Web-sahifa matniga rasm kiritish uchun bitta tegdan foydalaniladi. (P 1-jadval). Ushbu tegning atributlari sahifaga joylashtirilgan rasmning barcha parametrlarini o'rnatadi. Grafik faylning manzili va nomini belgilaydigan SRC atributi talab qilinadi. Agar SRC atributi o'rnatilmagan bo'lsa, u holda faqat bo'sh tasvir belgisi ko'rsatiladi.

Teg tuzilishi SRC atributi bilan quyidagicha ko'rinadi:

.

Institut nomli grafik fayl veb-sahifa bilan bir papkada joylashgan bo'lsa, uni joylashtirish uchun quyidagilarni yozish kerak:

.

Fayl nomi formati

D:\Collection\Cities\MINSK.GIF manzilida joylashgan MINSK nomli grafik faylni joylashtirish uchun siz yozishingiz kerak. .

Teg foydalanish Veb-sahifa boshqa kompyuterda joylashgan grafik faylni o'z ichiga oladi global tarmoq"Internet".

Rasmda ko'rsatilgan institutimiz fotosurati bilan veb-sahifa yaratish. 4.1, siz quyidagi HTML kodni kiritishingiz kerak:

Bizning institutimiz

Guruch. 4.1. Institut fotosurati bilan veb-sahifa

Yuqoridagi misolda fotosurat balandligi (HEIGHT) 200 piksel va kengligi (WIDTH) 300 piksel. Suratni joylashtirish uchun markazga moslashtirilgan paragraf yaratiladi.

Gorizontal chiziqlar

Gorizontal chiziqlar Web-sahifada bitta teg yordamida joylashtiriladi

Gorizontal chiziqlarni joylashtirishni tushuntirish uchun bir nechta misollarni ko'rib chiqaylik:

1.

2.

WIDTH = "200" ALIGN="RIGHT"> – yashil rangdagi gorizontal chiziq, qalinligi 15 piksel, kengligi 200 piksel va o'ngga tekislangan.

3.

4.

WIDTH = "300" ALIGN = "LEFT"> – qizil rangdagi gorizontal chiziq, qalinligi 20 piksel, kengligi 300 piksel va chapga tekislangan.

To'rtta yozilgan misol uchun chiziqli displey rasmda ko'rsatilgan. 4.2.

Guruch. 4.2. Veb-sahifadagi chiziqlar

JADVALLAR

Jadvallar yaratish

Jadval juftlangan teg yordamida yaratiladi

Har qanday jadval qatorlardan, qatorlar esa hujayralardan iborat. Jadval qatorlari va katakchalarini shakllantirish uchun quyidagi teglardan foydalaniladi:

... - yangi qator;

... - sarlavhali katak;

... - oddiy stol katakchasi.

Bu teglar juftlangan teg ichida yoziladi

Jadval ketma-ket shakllanadi - birinchi navbatda, bitta qator ko'rsatiladi va unda kerakli hujayralar soni ko'rsatiladi, keyin ikkinchi qator va hokazo.

Rasmda ko'rsatilgan jadvalni olish uchun. 5.1, siz quyidagi HTML kodni kiritishingiz kerak:

Guruch. 5.1. Jadval sahifasi

Jadval sarlavhasi katakchalaridagi matn (5.1-rasm) yarim qalin shriftda ko'rsatiladi va katakning o'rtasiga tekislanadi, oddiy katakchalarda esa matn ajratilmaydi va chapga tekislanadi.

Shuni ta'kidlash kerakki, yuqoridagi sahifaning HTML kodida teg

keyin tashqi chegara qalinligi 6 piksel bo'ladi. Jadval chegaralari ko'rsatilishiga yo'l qo'ymaslik uchun siz BORDER atributini 0 ga qo'yishingiz yoki shunchaki ushbu atributni o'tkazib yuborishingiz kerak.

Aytganimizdek, bugungi kunda HTML har qanday veb-sahifani yozish uchun asosdir Internet. At CSS yordamida HTML kodlash keskin o'zgarib bormoqda. Siz ma'lum vizual effektlarga erishish uchun murakkab HTML teglarini o'zgartirish bilan xayrlashishingiz mumkin. Ba'zi HTML teglari yoki atributlari haqida, masalan, eskirgan teg...

Uy

Veb-saytga buyurtma bering va biznesni boshlang!

Bu iborani ko'plab saytlarda eshitish va ko'rish mumkin va bu bejiz emas!

Veb-sayt — bu kompaniyaning yuzi. Va bu potentsial iste'molchilar bilan eng zamonaviy va samarali aloqa kanalidir. Faqatgina Internet saytining imkoniyatlari foydalanuvchiga axborot xabarini etkazishning barcha usullaridan to'liq foydalanish imkonini beradi. Matn, audio va video ma'lumotlar iste'molchini ular bilan tanishtirish uchun bitta sayt ichida taqdim etilishi mumkin.

Foydalanish orqali dasturiy ta'minot Saytda siz to'lovlarni qabul qilishingiz, telefonda gaplashishingiz, ma'lumotlar bazalarini yuritishingiz, fakslarni yuborishingiz va qabul qilishingiz, SMS xabarlar almashishingiz va boshqa ko'plab amallarni bajarishingiz mumkin. Zamonaviy internet sayti nafaqat har qanday kompaniya, balki har qanday internet foydalanuvchisi uchun axborot markazidir.

Va bu o'z g'oyalaringiz yoki ishlanmalaringizni eng keng auditoriyaga samarali va ayni paytda sodda va aniq etkazishning g'alaba qozonish usuli. Va bugungi kunda HTML gipermatnli belgilash tilida yozilgan veb-hujjatlari Web muhitida ma'lumotlarni taqdim etishning asosiy shakli bo'lib qolmoqda.

HTMLning eng muhim afzalliklari quyidagilardan iborat:

• soddaligi, eng qisqa vaqt ichida HTMLni o'rganish imkonini beradi.
• o'z veb-sahifalaringizni yaratish qobiliyati
• va HTML bugungi kunda mavjud bo'lgan barcha platformalarda xuddi shunday ishlaydi; Va har qanday mavjud matn muharriridan foydalanish kifoya, masalan, Notepad.

Ushbu saytda men o'z veb-saytingizni yaratish jarayonini, ya'ni tayyor loyihani barcha foydalanuvchilarga kirishini ta'minlash uchun Internetda nashr etish jarayonini batafsil tasvirlashga harakat qildim.

Umid qilamanki, mening maqolalarim ko'pchilik uchun juda foydali bo'ladi, chunki men o'zim dasturchi emasman, lekin bu ish meni juda ilhomlantirdi.

Grafika va trafik

Web-sahifalar dizaynining go'zalligi va ifodaliligiga qo'yiladigan talablar doimiy ravishda ziddiyatli texnik imkoniyatlar zamonaviy veb-xosting. Shu sababli, veb-sayt dizayneri dizayner va foydalanuvchi o'rtasida vositachi bo'lishi va vizual jozibadorlik va Internetda ma'lumotni etkazib berishning oqilona tezligi o'rtasidagi muvozanatni qat'iy saqlashi kerak. Ushbu muammoni muvaffaqiyatli hal qilish uchun siz Internetda qo'llaniladigan barcha grafik formatlarni bilishingiz, ular orasidagi farqlarni, ularni qo'llash sohalarini va foydalanish xususiyatlarini tushunishingiz kerak.

Internetda qabul qilingan ko'p sonli formatlar va protokollarni tushunish va o'z sahifangizni yaratish uchun siz o'zingizning aniq maqsadlaringiz uchun eng mosini tanlashingiz kerak. Ba'zi formatlar faqat bitta brauzerga xos bo'lishi mumkin, boshqalari esa maxsus plaginni talab qiladi.

GIF va JPEG uzoq vaqtdan beri WWW da foydalanish uchun de-fakto standartlarga aylangan eng mashhur grafik formatlardan ikkitasidir. Ikkalasi ham juda universal, ko'pchilik brauzerlar tomonidan o'qilishi mumkin va maxsus dasturiy ta'minotni (yoki qo'shimcha modullarni) talab qilmaydi. GIF va JPEG rastr tasvir formatlari bo'lib, ular shunga mos ravishda ekranda bunday tasvirlarni ko'rsatishda qat'iy belgilangan formatni (ravshanlikni) aniqlaydi. Masshtabni o'lchashga harakat qilganingizda (ba'zi brauzerlarda mavjud), rastr (piksel) tasvirlar sifatini sezilarli darajada yo'qotadi.

8 bitli (256 rangli) GIF formati uchun ranglar palitrasini tanlash ham jiddiy muammo hisoblanadi.

Vektor grafik formatlari Internetda foydalanish uchun ancha jozibali. Bitmaplardan farqli o'laroq, vektor grafiklari ma'lumotlarning matematik (geometrik) tasviriga asoslanadi. Bunday tasvirlar saqlash / uzatish hajmi jihatidan sezilarli darajada kichikroq, osonlik bilan o'lchaydi va har qanday konvertatsiya paytida deyarli sifatni yo'qotmaydi. Afsuski, vektor formatlari hali ham Internetda kam qo'llaniladi, ammo standartlar allaqachon shakllangan va dizaynerlar uchun qiziqish uyg'otishi kerak.

Nisbatan yaqinda bir nechta vektor standartlari taklif qilingan va PGML va VML formatlari hozirda World Wide Web Consortium (W3C) tomonidan ko'rib chiqilmoqda. Biroq, VMLni targ'ib qiluvchi Macromedia uzoq vaqtdan beri boshqa ishlab chiquvchilar uchun Shockwave Flash vektor formatini ochgan va mashhur brauzerlar uchun ushbu formatdagi grafiklarni ko'rish uchun qo'shimcha modullarni joriy qilgan.

Biroq, yangi mahsulotlar barcha ilovalar uchun yaxshiroq bo'lishi shart emas. Internetda nashr etilgan eng keng tarqalgan tasvirlar hali ham raqamli fotosuratlar, chizmalar va skanerlangan rasmlar bo'lib, ular juda ko'p mehnat talab qiladi va vektor formatiga aylantirish qiyin.

Shuning uchun formatni tanlash oxir-oqibat maqsadlaringizga bog'liq va qaysi tasvirlar maqsadli auditoriyangizga eng mos kelishini o'zingiz hal qilasiz.

CompuServe dastlab shaxsiy kompyuterdagi standart grafiklarning cheklangan imkoniyatlari kontekstida o'zining GIF formatini interaktiv ilovalar uchun mo'ljallangan. Bu dastlab 4-bitli, keyin esa 8-bitli rastr formati boʻlib, maksimal 256 ta rangni qoʻllab-quvvatlovchi belgilangan ranglar palitrasi boʻlgan. Formatning muhim afzalliklaridan biri shundaki, rasmlarni ma'lum bir palitraga (ranglar to'plamiga) indekslash mumkin, JPEG tasvirlarni esa palitraga "qulflash" mumkin emas va ularni "to'g'ri" ko'rsatish har doim ham mumkin emas.

Bu xususiyat, ayniqsa, ma'lum bir tizim qanday rang chuqurligi bilan ishlashidan qat'i nazar, har qanday va barcha platformalar (kompyuter, Mac, Web-TV yoki boshqalar) uchun tasvirlarni uzatishni optimallashtirish uchun palitrani indekslashni ishlatadigan ishlab chiquvchilar uchun juda muhimdir. Ushbu ko'p qirralilikka Windows va, masalan, MacOS-da ishlatiladigan barcha umumiy ranglarni o'z ichiga olgan 216 rangdan iborat cheklangan palitrasi orqali erishiladi. Saytni universal palitrada loyihalash izchil, o'zaro platformalar va apparatdan mustaqil displeyni kafolatlaydi. Bundan tashqari, GIF formatida yo'qotishsiz siqish sxemasi qo'llaniladi (oddiy takroriy kodlash algoritmi bilan: bir xil rangdagi baytlar ketma-ketligi ikki baytlik so'z bilan almashtiriladi, ulardan biri soyali naqshni o'z ichiga oladi, ikkinchisi esa raqamni aniqlaydi. takrorlashlar soni), bu formatdagi grafik ma'lumotlar siqish va tiklash jarayonida ma'lumotni yo'qotmasligi uchun. Biroq, aynan shu o'rnatilgan rang cheklovlari tufayli GIF formati faqat cheklangan miqdordagi ranglarga ega bo'lgan tasvirlar uchun ishlatilishi mumkin, masalan, qora-oq diagrammalar yoki bitta rangning katta maydonlarini o'z ichiga olgan rasmlar, masalan. multfilm ramkalari yoki rangli to'ldirish bilan raqamli chizmalar. Albatta, istalgan rasmni saqlashingiz mumkin

Shunday qilib, GIF formatining asosiy afzalliklari yo'qotishsiz siqishni qo'llash va aniq chegara va qat'iy rang o'tishlari bilan rangning qattiq joylarini tejamkor saqlashdir. JPEG formati tasvirlanganidan farq qiladi, chunki siqilish darajasiga qarab, qattiq joylar vayron bo'ladi va o'tkir rang o'tishlari tekislanadi yoki xiralashadi.

GIF formatini tanlashning asosiy mezoni: agar siz o'zingiz bir xil rangdagi katta maydonlarga ega bo'lgan Photoshop yoki Painter kabi grafik paketlarda rasm chizgan bo'lsangiz yoki mavjud tasvirni qayta ishlagan bo'lsangiz va saqlashni xohlasangiz. yuqori kontrast(masalan, matnni ko'rsatishda zarur), keyin ushbu formatda saqlang (birinchi navbatda, bu oq-qora yoki yomon rangli chizmalarga tegishli).

Rangli silliq o'tishlardan (gradientlardan) foydalanadigan fotosuratlar, video kadrlar yoki boshqa to'liq rangli tasvirlar uchun JPEG formatidan foydalaning.

Shuni ham yodda tutish kerakki, agar siz doimiy ohangli tasvirlarni GIF sifatida saqlashga harakat qilmoqchi bo'lsangiz, tasvirni tayyorlash jarayonida (uni qattiq palitraga o'tkazishda) va GIF-ni siqish jarayonida juda ko'p ma'lumotlarni tashlab yuborishingiz kerak bo'ladi. usul shunchalik samarasiz bo'ladiki, siz moliyaviy jihatdan ham yo'qotasiz (mehnat xarajatlari va fayl hajmi bo'yicha).

Boshqa narsalar qatorida, GIF formati interlaced ko'rinishni ta'minlaydi, bu qabul qilishning boshida sekin kanallari bo'lgan foydalanuvchilarga rasm mazmunini baholashga yordam beradi (effekt asta-sekin chizilgan rasmga o'xshaydi). fokusli rasm) va uni to'liq uzatish uchun zarur bo'lgan vaqt va natijada uni olishni davom ettirish yoki olishni to'xtatish yaxshiroqmi degan qarorni qabul qiling.

Biroq, progressiv JPEGdan farqli o'laroq, bu erda ta'sir haqiqiydan ko'ra ko'proq psixologik (rasmga qarang).

Bundan tashqari, GIF formatining muhim afzalligi, ba'zi hollarda uning barcha kamchiliklari bilan ham chetlab bo'lmaydi, shaffoflikni qo'llab-quvvatlash (GIF89a kengaytmasi), bu mavjud fonda to'rtburchaklar bo'lmagan konturli siluetni ko'rsatishga imkon beradi. . GIF formatidagi shaffoflik ibtidoiy tarzda amalga oshiriladi - bitta rang (odatda fon) shaffof sifatida belgilanadi. Ushbu afzallik ko'pincha sahifa dizaynida tugmalar va piktogrammalarni yaratishda ishlatiladi (JPEG shaffoflikni qo'llab-quvvatlamaydi). Xulosa qilib, biz quyidagilarni aytishimiz mumkin: GIF - Mavjud apparat va dasturiy ta'minot o'rtasida samarali kelishuvga erishish va 8 bitli GIF tasvirini 216 universal rangga indekslash qobiliyati sizning rasmlaringiz turli xil brauzerlar va noma'lum platformalarda ko'rsatilishi uchun juda muhimdir.

JPEG - fotosuratlar va video ramkalar uchun format

JPEG formati o'z nomini 80-yillarning oxiri va 90-yillarning boshlarida ushbu standartni yaratgan Joint Photographic Experts Group commiteti qisqartmasidan oladi. JPEG formati yo'qolgan siqishni algoritmiga (diskret kosinus o'zgarishiga) asoslangan bo'lib, u sizning tasviringizni hududlarga (odatda 8x8 piksel kvadratlar) ajratadi, bunda rang taqsimoti matematik funktsiya bilan almashtiriladi va faqat ushbu funktsiyaning koeffitsientlari saqlanadi. uning ko'rinishini qayta tiklashingiz kerak. Tabiiyki, siz sifatning biroz yo'qolishiga duch kelasiz (tasvirni almashtirish uchun ishlatiladigan funktsiyaning murakkabligiga qarab) va qayta tiklangandan so'ng siz endi haqiqiy tasvirni emas, balki uning matematik "surrogatini" olasiz. Biroq, asl nusxangiz sifatiga va siqilish darajasiga qarab, sifatni yo'qotish tomoshabin uchun mutlaqo ko'rinmas bo'lishi mumkin.

Ammo JPEG formatining GIFga nisbatan asosiy afzalligi shundaki, GIF atigi 8 bitli (256 rang), JPEG esa 24 bitli va 16,7 million rangni aks ettira oladi. Shu sababli, to'liq rangli JPEG tabiiy ravishda GIF-ga qaraganda ko'proq video ma'lumotlarini qayta ishlab chiqaradi. Ushbu format haqiqiy hayot tasvirlari uchun eng mos keladi - skanerlangan rasmlar yoki raqamli fotosuratlar

, shuningdek, raqamli video ramkalar yoki renderlangan 3D kompyuter grafikasi sahnalari.

JPEG-ning yana bir afzalligi shundaki, GIF-dan farqli o'laroq, u manba tasviriga qo'llaniladigan siqilish darajasini mustaqil ravishda belgilash imkonini beradi, bu esa o'lcham va sifat o'rtasidagi zarur muvozanatni saqlashga imkon beradi.

Shunday qilib, JPEG formatidagi fotosurat bilan ishlashda siz 16,7 million rangga ega 24 bitli tasvirni saqlash imkoniyatiga egasiz va siqish paytida sifatni yo'qotishiga qaramay, u hali ham 256-dan ko'ra asl nusxaga sodiqdir. rangli GIF. Bunday holda, sifatning muqarrar ravishda yo'qolishi asl tasvirning o'lchamiga, sifatiga va turiga bog'liq.

Bundan tashqari, JPEG progressiv displey deb ataladigan narsani aniqlashga imkon beradi, ya'ni yuklash paytida darhol ekranda tasvirning "qo'pol" ko'rinishi paydo bo'ladi, bu esa qabul qilinganda. Qo'shimcha ma'lumot, asta-sekin yaxshilanadi (shu bilan birga, siz yuklab olish tugashidan oldin ham taqdim etilayotgan materialning mohiyati haqida kerakli tushunchaga ega bo'lishingiz va jarayonni istalgan bosqichda to'xtatishingiz mumkin, bu onlayn kontentni ko'rish vaqtini sezilarli darajada tejaydi).

Siz ushbu vositalardan o'zingiz xohlagancha foydalanishingiz mumkin va bunday bosqichma-bosqich namoyon bo'lishi kanal tiqilishi bilan kurashda yaxshi yordam bo'lishi mumkin. Progressiv JPEG bilan bog'liq yagona muammo (o'zaro bog'langan GIF-dan farqli o'laroq) eski brauzerlar uni qo'llab-quvvatlamasligi mumkin.

PNG - universal rastr yangiligi

Rastr formatlarining keyingi avlodining vakili PNG JPEG va GIF formatlarining eng yaxshi xususiyatlarini oldi va tasvirni taqdim etishga o'ziga xos, o'ziga xos yondashuvni qo'shdi, bu esa uni bitta faylga joylashtirish imkonini beradi. turli versiyalar past, o'rta va yuqori aniqlik uchun bir xil tasvir.

PNG (Portable Network Graphics) formati nisbatan yangi rastr grafik formati boʻlib, u W3C konsorsiumi tomonidan standart sifatida tasdiqlangan va asta-sekin ikkala “eskirgan” formatlarni ham almashtirishi kerak: GIF va JPEG. PNG ranglarni indekslashni (256 tagacha rang), 24 va 48 bitli ranglarni (True-Color) qo'llab-quvvatlashni va shaffoflik kanali (alfa kanali) bilan ishlashni taklif qiladi va u an'anaviy saqlash formatlariga qaraganda ancha samarali. rastrli tasvirlar.

To'liq rangli tasvirni siqish algoritmi sifat jihatidan JPEG-dan ustundir va cheklangan indekslangan palitrani (256 ranggacha) qo'llab-quvvatlagan holda, yangi format GIF formatida amalga oshirilganidan 10-30% yaxshiroq yo'qotishsiz siqishni ta'minlaydi, bu har qanday holatda foydalanish uchun optimal qiladi. Afsuski, yangi format yuqoriroq siqish nisbati evaziga tasvir sifatini qurbon qilishga imkon bermaydi..

JPEG formati Shaffoflikni qo'llab-quvvatlash GIF-dan farqli o'laroq, u to'liq huquqli, ya'ni siz shaffof tasvirlar yoki chegaralarni yaratishingiz mumkin, shuning uchun GIF faylida shaffoflikdan foydalanganda hal qilish qiyin bo'lgan "toza" chegaralar muammosi bu erda osonlikcha engib o'tiladi.

Biroq, PNG taklif qilayotgan barcha yaxshilanishlarga qaramay, yangi format faqat veb-sayt dizaynerlari va dasturiy ta'minot ishlab chiqaruvchilari tomonidan tasvirlarni yangi formatda ko'rsatish va ularni nashrga tayyorlash uchun foydalanilgandan keyingina o'z kuchini yo'qotadi. Ayni paytda, Netscape Navigator va Microsoft Internet Explorer-da ushbu formatni qo'llab-quvvatlash yaqinda kiritilganiga qaramay, PNG tasvirlarini Internetning istalgan joyidan topish juda qiyin.

Va ular bo'lsa-da oxirgi versiyalari va PNG-ni qo'llab-quvvatlaydi, ular buni juda cheklangan tarzda qilishadi. Hozirgi vaqtda PNG faylini toʻliq koʻrishni istagan foydalanuvchilar uchun yagona yechim tashqi modulni (PNG Live-ga oʻxshash) oʻzlari oʻrnatishdir.

Ko'rinishidan, ishlab chiquvchilar kechiktirib, foydalanuvchilarning yangi formatlarga to'liq o'tishlarini kutishmoqda. Xo'sh, sog'lom konservatizm hech qachon zarar qilmaydi, lekin biz hali ham GIF formatining barcha mavjud foydalanishlarini almashtirib, asta-sekin PNG-ga o'tishingizni qat'iy tavsiya qilamiz.

Vektor tasviri

JPEG, GIF va PNG ham tasvirning diskret (piksel yoki nuqta) tasviriga asoslangan rastr formatlari, vektor formatlari esa matematik formulalarga (shakllarning geometrik tasviri) asoslangan. Vektorli grafikalar rastrga nisbatan sezilarli afzalliklarni beradi, ayniqsa diagrammalar, matnlar va sanoat grafiklari haqida gap ketganda (va tejamkor formatlar Internet uchun katta ahamiyatga ega).

Shunday qilib, birinchi afzallik - bitmaplarga nisbatan vektor tasvirlarining sezilarli darajada kichikroq o'lchamidir, chunki tasvirning har bir alohida pikseli emas, balki butun rasm tasvirlangan (masalan, doirani belgilash uchun siz 3-4 raqamni o'tkazishingiz kerak: radius, markaz koordinatalari va chiziqning turi yoki qalinligi va uning atributlari bo'lishi mumkin). Vektor tasvirini tavsiflovchi matematik formulalar alohida piksellar va ularning atributlariga qaraganda ancha kam joy egallaydi.

Vektor tasvirining yana bir muhim afzalligi tasvirning aniqligi yoki ravshanligini yo'qotmasdan deyarli cheksiz ravishda tasvirni (yoki uning tafsilotlarini) o'lchash qobiliyatidir. Vektor tasvirini ma'lum bir palitraga, platformaga, apparat yoki dizayn xususiyatlariga moslashtirish uchun hech qanday harakat talab etilmaydi; va siqish sxemasi va ko'rsatish sifatini muvofiqlashtirish hech qanday muammosiz amalga oshiriladi.

Biroq, har bir rastrli tasvirni vektor ko'rinishiga aylantirib bo'lmaydi (masalan, fotosuratlar, skanerlangan rasmlar yoki rastr chizmalarini vektorlashtirish qiyin). Ammo maxsus tayyorlangan vektor chizmalarini (masalan, chizilgan rasm, piktogrammalar, texnik rasmlar, xaritalar, axborot grafikasi va tarixiy vektor bo'lgan boshqalar) Internetda nashr qilish uchun rastr ko'rinishiga aylantirish shunchaki ahmoqlikdir, bu bugungi kunda hamma joyda sodir bo'lmoqda.

Ko'rsatish muammolari vektor grafikasi World Wide Web-da rastrdan boshqa ko'rsatish usuli yo'qligi sababli paydo bo'ldi va PDF formatida fayllarni ko'rsatish uchun paydo bo'lgan o'rnatilgan modul etarli darajada moslashuvchanlikni ta'minlamadi va barcha tarkibni bitta shaklda - PDF-da saqlashni talab qildi.

Vektorli grafikalarni an'anaviy HTML formatiga hech qanday qo'shimcha dasturiy ta'minotsiz muammosiz joylashtirish imkoniyatini ta'minlash uchun hozirda W3C standartlar qo'mitasi tomonidan ikkita yangi vektor standarti ko'rib chiqilmoqda: PGML (Precision Graphics Mark-up Language) va VML (Vector Mark-up Language) ). PGML Adobe Systems, IBM, Netscape va Sun Microsystems tomonidan qo'llab-quvvatlanadi va VML Microsoft, Hewlett-Packard, Autodesk, Macromedia va Visio tomonidan qo'llab-quvvatlanadi. Ikkala standart ham XML belgilash tilining kengaytmalariga asoslangan bo'lib, HTML ning vorisi sifatida Internetda foydalanish uchun targ'ib qilinadi va W3C tomonidan kelajakda foydalanish uchun tavsiya etiladi.

Ammo hozirda brauzerlarning hech biri vektor grafik standartlarini qo'llab-quvvatlamaydi, garchi qo'shimcha modullar (plaginlar) allaqachon mavjud. Bugungi kunda Internetda statik vektor tasvirlarni ko'rsatishning eng mashhur usullaridan biri Macromedia-ning SWF (Shockwave Flash) formati va hali ham past baholangan Xara Flare formatidir.

Olovli - yaxshi qaror, bu esa sahifaning tafsilotlari darajasini deyarli cheksiz oshirish imkonini beruvchi vektorli tasvirlarni kiritish imkonini beradi, shu bilan birga ularning o'lchamlari Shockwave Flash bilan taqqoslanadi. Bu rasmlarni ko'rish uchun qo'shimcha modullardan foydalanish juda noqulay degani emas, lekin sahifalaringizda bunday vositalardan foydalanganda foydalanuvchini bu haqda ogohlantirganingizga ishonch hosil qiling va u sahifaga o'tishdan oldin unga tegishli modulni yuklab olish imkoniyatini bering. bu elementlarni o'z ichiga oladi.

Qisqa muddatda, bu, albatta, yangi foydalanuvchilar uchun ko'rish jarayonini sekinlashtiradi, lekin asta-sekin siz mos keladigan vositalar brauzerning keyingi versiyasiga kiritilgunga qadar va yangi boshlanuvchilar endi qo'shimcha qurilmalarga muhtoj bo'lmaguncha ko'proq va ko'proq tarafdorlarga ega bo'lasiz. modul.

Animatsiya, interaktivlik va o'zaro ta'sir Umuman olganda, GIF tasvirlarini bitta faylda maxsus stek sifatida joylashtirish mumkin va natijada olingan "film" (flipbook) oddiy rastrli animatsiya yaratish orqali takrorlanishi mumkin. Netscape ham, Microsoft ham o'zlarining brauzerlarining uchinchi versiyalaridan beri animatsion GIF-larni qo'llab-quvvatladilar, shuning uchun ularning Internetda mavjudligini oldini olish endi qiyin. Bunday GIF steklarini yaratishga imkon beruvchi ko'plab GIF animatorlari keng tarqalgan (ham tijorat, ham ommaviy foydalanish mumkin). Biroq, GIF formatini "jonlantirish" nazoratsiz holatga olib kelishi mumkin

fayl o'lchamlari

, chunki bunday stekning har bir "darajasi" individual GIF tasviridir, shuning uchun kompyuter animatsiyasi uchun odatda soniyasiga 15 kvadrat son-sanoqsiz kilobaytlarni ishlab chiqishi mumkin.

Java yoki JavaScript bilan birgalikda siz foydalanuvchiga javob beradigan interaktiv animatsiya yaratishingiz mumkin. Endi veb-animatsiya va foydalanuvchilarning interaktiv o'zaro ta'siri bo'yicha boshqa echimlarni ko'rib chiqamiz va bu erda asosiy rolni bozorga Shockwave va Flash dasturlari bilan uzoq vaqtdan beri kirib kelgan va o'z mahsulotlarini doimiy ravishda takomillashtirib, samaradorligini oshirishda davom etmoqda. foydalanuvchilar va dizaynerlarning ehtiyojlari bilan. animatsiya yaratish va uni Web-sahifada nashr qilish. Shockwave Flash juda kichik fayllarni ishlab chiqaradi (chunki u asosan vektorli tasvir formatidan foydalanadi) va boshqa formatlarga qaraganda, tayyorgarlik nuqtai nazaridan eng qulay hisoblanadi.

Bunday animatsiyani o'z sahifalaringizda nashr etayotganda, foydalanuvchini oldindan qo'shimcha modulga zaxiralashi va yuklab olishni zerikarli kutishga tayyorlanishi uchun bu haqda xabardor qilishni unutmang. Biroq, Netscape Navigatorning so'nggi versiyalari va Internet Explorer Hatto asosiy paketda ham Flash animatsiyalari uchun ko'rish modullariga ega. Netscape Navigator-ning kelajakdagi versiyalarida hatto kod darajasida ham Flash-ni qo'llab-quvvatlashini tasdiqladi.

Yakuniy qaror sizniki

Shunday qilib, veb-kontent taqdimotiga munosabat o'zgarmoqda, yangi ma'lumotlar formatlari va ularni qo'llab-quvvatlovchi ishlab chiqish vositalari paydo bo'lmoqda. Biroq, eski formatlar (grafiklarni taqdim etish uchun GIF va JPEG) hali ham juda mashhur. Ular deyarli barcha brauzerlar tomonidan qo'llab-quvvatlanadi va ko'pchilik ishlab chiquvchilar ular bilan ishlashda katta tajribaga ega. Tasvir sifati va fayl o'lchamlari o'rtasidagi muvozanatni ta'minlash uchun aniq maqsad uchun to'g'ri formatdan foydalanish muhimdir. Misol uchun, GIF formatidagi bitta rasm ko'proq joy egallashi va JPEG formatidagiga qaraganda past sifatli natija berishi mumkin, boshqasi uchun esa buning aksi bo'ladi.

Biroq, bitmap tasvirlarni taqdim etishda PNG afzalroq bo'ladi va agar siz undan ham uzoqroqqa borsangiz va undan foydalanishga harakat qilsangiz vektor tasvir, keyin bugun Macromedia'dan Shockwave Flash formati sizning xizmatingizda.

SWF (Shockwave Flash) formati keng tarqalgan emas, balki ichki vektor formatidir Flash dasturlar Macromedia-dan (CD-ROMdagi “Macromedia Flash Lessons”ga qarang), shuning uchun o'zingizning rasmingiz yoki animatsiyangizni olish uchun Macromedia-dan tegishli multimedia paketini sotib olishingiz kerak bo'ladi va foydalanuvchi vizualizatsiya qilish uchun qo'shimcha modul o'rnatishi kerak bo'ladi. natija.

Shunday qilib, veb-sahifangizga oddiygina vektorli tasvirni joylashtirish uchun siz bir qator noqulayliklarni engishingiz kerak bo'ladi.

Biroq, boshqa vektor formatlari yo'lda va tez orada standart bo'ladi.

ComputerPress 5" 1999 yil

Ikkita joylashtirish usuli mavjud grafik tasvirlar sahifada:

• individual rasmlarni kiritish;
• fonni rasm bilan to'ldirish.

Har qanday holatda, grafik tasvir fayldan olinadi.

Grafika kiritish

Grafik formatdagi fayldan sahifaga grafik tasvirni kiritish teg yordamida amalga oshiriladi (ingliz tilidan, rasm - rasm) argument sifatida fayl manzilini ko'rsatadi SRC atributi:

< IMG SRC = "адрес_графического_файла" >

Grafik fayl manzili URL yoki fayl nomi, ehtimol yo'l bilan. Masalan, logotip.jpg grafik faylini ko'rsatish uchun tegni yozishingiz kerak:

< IMG SRC = "logotip.jpg" >

Tegdagi grafik tasvirni uzatish tezligini oshirish uchun atributidan foydalanishingiz mumkin ( qo'shimcha parametr) Grafik fayl manzilini argument sifatida qabul qiluvchi LOWSRC. Ikkita grafik fayl yaratishingiz mumkin: birida (masalan, logotip.jpg deylik) yuqori aniqlikdagi tasvir, ikkinchisida (masalan, logotip.gif) past aniqlikdagi tasvir mavjud. Keyin teg:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...brauzerga avval logotip.gif faylini yuklab olishni va keyin uni qabul qilinganda logotip.jpg fayli bilan almashtirishni buyuradi.

Grafik yuklashni tezlashtirishning yana bir usuli - atributlar yordamida grafik joylashtiriladigan to'rtburchaklar maydonining o'lchamini belgilash. WIDTH(kenglik) va BAYIYLIK(balandlik), piksel bilan o'lchanadi. Agar siz ushbu atributlarni belgilasangiz, brauzer avval grafiklar uchun joy ajratadi, hujjat tartibini tayyorlaydi, matnni ko'rsatadi va shundan keyingina grafiklarni yuklaydi. Brauzer tasvirni belgilangan ramka o'lchamiga moslash uchun siqadi yoki cho'zadi. Rasm o'lchamlarini belgilashga misol:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Grafika odatda matn bilan birgalikda ishlatiladi, shuning uchun matn va grafiklarni tekislash muammosi paydo bo'ladi. Ushbu muammo atribut yordamida hal qilinadi LIGN teg turli argumentlardan foydalanish. Misol uchun, biz matnni tasvir atrofida o'ngga yoki chapga aylantirishni xohlashimiz mumkin. Odatda rasm matn bilan chambarchas bog'langan bo'lib, u xunuk bo'lishi mumkin. Bunga yo'l qo'ymaslik uchun rasm atrofida bo'sh chekkalarni o'rnatishingiz mumkin. Maydonlar atributlar yordamida yaratiladi VSPACE yuqori va pastki chetlari uchun va NSPACE tegdagi yon chekkalar uchun . Ushbu atributlarning argumentlari maydonlarning o'lchamini piksellarda ko'rsatadigan raqamlar sifatida ko'rsatilgan. Grafiklar atrofida matn o'rashni bekor qilish uchun tegdan foydalaning
.

Quyidagi teg logotip.jpg faylidagi grafiklarni oʻngga oʻrash uchun oʻrnatadi (tasvir matnning chap tomonida joylashgan boʻladi):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Agar siz rasmni matnning o'ng tomoniga qo'ymoqchi bo'lsangiz, unda sizga atribut kerak bo'ladi LIGN argument tayinlash TO'G'RI:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Rasm atrofidagi chekkalarni o'rnatish uchun siz quyidagi kabi teg yozishingiz kerak:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Bu erda 20 va 10 raqamlari maydonlarning hajmini aniqlaydi.

Keling, bir misolni ko'rib chiqaylik almashish grafikalar va matnlar. Bloknotni oching ( matn muharriri Notepad) Windows. Yuqorida muhokama qilingan teglar yordamida unga HTML kodini yozing. Quyida ba'zi matn va grafiklarni chiqaradigan dastur mavjud. Grafik fayl sifatida mavjud bo'lgan har qanday fayldan foydalanishingiz mumkin. Bu yerda foydalaniladigan fayl logotip.gif.

< HTML >

< HEAD >

< TITLE >1-mashq< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Matn o'ng tarafdagi grafikalarni o'rab oladi< / H1 >

Sahifada tasvirlarni (shuningdek, boshqa elementlarni) aniq joylashtirish uchun keng imkoniyatlar mavjud jadvallar Va uslublar. Bular HTML elementlari keyinroq muhokama qilinadi. Masalan, siz ko'rinadigan ramkalarsiz jadvalni belgilashingiz va ushbu jadvalning katakchalariga rasmlar, matnlar va boshqa elementlarni joylashtirishingiz mumkin.

Jadvaldagi ranglar

Qanday qilib sahifada jadval tuzish kerak

Ro'yxatlar ichidagi ro'yxatlar

Ta'riflar ro'yxati

Raqamlangan ro'yxat

Belgilangan roʻyxat

Sahifada ro'yxatni qanday yaratish kerak

Ro'yxatlarning uchta asosiy turi mavjud: markirovka qilingan, raqamlangan va aniqlangan ro'yxatlar. Ro'yxatdagi turlar orasidagi asosiy farq raqamlash usuli va tuzilishidir.

Eng ko'p ishlatiladigan raqamsiz yoki markirovka qilingan ro'yxat. Belgilangan ro'yxat teglar bilan belgilanadi va bu teglar orasidagi ro'yxat elementlari teg bilan belgilanadi