Veb-sayt tartibini: html-da fon yaratish

Ko'plab yangi boshlanuvchilar faqatgina veb-saytlarni yaratishda qalbiga kirib qoladilar. Va, agar ba'zi odamlar bu muammoni tushunsalar, tasvirni monitörün to'liq kengligida cho'zishda muammolar mavjud. Shu bilan birga, saytni barcha brauzerlarda teng darajada namoyish qilishni istayman, shuning uchun o'zaro faoliyat brauzerlarning muvofiqligi talablarini qondirish kerak. Siz fonni ikki yo'l bilan o'rnatishingiz mumkin: HTML teg va CSS uslubini ishlatish. Har bir inson o'zi uchun eng maqbul variantni tanlaydi. Albatta, CSS uslubi ancha qulayroq, chunki uning kodi alohida faylda saqlanadi va saytning asosiy teglarida keraksiz ustunlarni qo'ymaydi, lekin saytning fonida rasm o'rnatishning oddiy usulini ko'rib chiqishdan oldin.

Fon yaratish uchun asosiy HTML teglari

Shunday qilib, keling, butun ekranda html-da fon tasvirini qanday qilish haqida savolga o'tamiz. Sayt chiroyli ko'rinishi uchun bitta muhim ma'lumotni tushunishingiz kerak: faqat bitta gradient fonni yaratish yoki uni monoxrom rang bilan bo'yash uchun etarli, lekin agar siz fon rasmini suratga olishingiz kerak bo'lsa, bu monitorning butun kengligidan uzaymaydi. Tasvir dastlab tanlanishi yoki mustaqil ravishda bunday kengaytma bilan dizaynlashtirilgan bo'lishi kerak, unda siz ko'rsatiladigan saytning sahifasi bo'ladi. Faqat fon tasviridan so'ng, biz uni "Images" nomli papkaga uzatamiz. Unda biz ishlatilgan barcha rasm, animatsiya va boshqa grafik fayllarni saqlaymiz. Ushbu papka barcha HTML fayllaringiz bilan ildiz katalogida bo'lishi kerak. Endi siz kodga o'tishingiz mumkin. Kodni yozish uchun bir nechta variant mavjud, u bilan fon rasmga o'zgaradi.

1. Yorliqning xususiyatini yozing.
2. CSS-uslubi yordamida HTML-kod.
3. CSS uslubini alohida faylga yozing.

HTML-da bo'lgani kabi, fonni rasmga aylantirish uchun qaror qabul qilasiz, lekin men qanday qilib eng optimal bo'lishi haqida bir necha so'z aytmoqchiman. Teg xususiyati orqali yozishning birinchi usuli uzoq vaqtdan beri eskirgan. Ikkinchi variant juda kam hollarda ishlatiladi, chunki siz bir xil kodni olasiz. Va uchinchi variant - eng keng tarqalgan va samarali. Teglarning HTML-misollar:

1. Index.htm faylida tananing atributi orqali yozishning birinchi usuli. Ushbu shaklda yoziladi: (body background = "Folder_name / Picture_name.extension") (/ body). Ya'ni, agar bizda "Tasvir" va JPG kengaytmasi tasvirlangan bo'lsa, biz papkani "Images" deb nomladik, shunda HTML kodi shunday ko'rinadi: (body background = "Images / Picture.jpg") ... (/ body) .
2. Ikkinchi usul yozish uslubini CSS uslubiga ta'sir qiladi, ammo index.htm deb nomlangan bir xil faylda yoziladi. (Tana tarzi = "fon: url ('../ Images / Picture.jpg')").
3. Yozuvning uchinchi usuli esa ikki faylda amalga oshiriladi. Index.htm deb nomlangan hujjatda quyidagi yorliq bosh yorlig'i bilan yoziladi: (bosh) (link rel = "stylesheet" type = "text / css" href = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_file ") (/ bosh). Va style.css ismli stil fayliga allaqachon yozamiz: body {background: url (Images / Picture.jpg ')}.

HTML-da, fon rasmini yaratishda bo'lgani kabi, biz ham demontaj qildik. Endi rasmni ekranning kengligi bo'ylab qanday qilib tortish kerakligini tushunib olishingiz kerak.

Fon tasvirini oynaning kengligigacha uzaytirish usullari

Keling, ekranimizni foiz sifatida tasavvur qilaylik. Ekranning butun kengligi va uzunligi 100% x 100% bo'ladi. Rasmni bu kenglikka surishimiz kerak. Rasmiy yozuvni style.css faylida tasvirni ekranning to'liq kengligi va uzunligiga cho'zadigan mag'lubiyatga qo'shing. Qanday qilib CSS uslubida yozilgan? Hammasi oddiy!

Tanasi

{

Orqa fon: url (Images / Picture.jpg ')

Orqa fonning o'lchami: 100%; / * Ushbu yozuv eng zamonaviy brauzerlar uchun javob beradi * /

}

Shunday qilib, butun ekranda html-da fon tasvirini qanday qilishni aniqladik. Index.htm faylida yozishning usullari ham bor. Garchi bu usul eskirgan bo'lsa-da, yangi boshlanuvchilar uchun uni bilish va tushunish kerak. Yorliqda (boshli) (uslub) div {fon-o'lchami: qopqoq; } (/ Style) (/ head) bu yozuv biz oynaning butun kengligi bo'ylab joylashtiriladigan fon uchun maxsus blokni tanlashni bildiradi. Biz saytning fonini html-tasvirga aylantirishning 2 usulini ko'rib chiqdik, shunda tasvir zamonaviy brauzerlarning har qandayida ekran bo'ylab cho'zilib ketgan.

Qanday qilib mustahkam fonni yaratish kerak

Agar siz rasmni kelajakdagi veb-resursning fonida ishlatishga qaror qilsangiz, unda siz uni qanday qilib mustahkamlashni bilib olishingiz kerak bo'ladi, natijada u uzoq bo'yli emas va estetik ko'rinishni buzmaydi. Bu kichik qo'shimchani yozish uchun HTML kodini ishlatish kifoya. Style.css faylida fondan keyin bir iborani kiritishingiz kerak: url (Images / Picture.jpg ') belgilangan; Yoki nuqta-vergul qoldirilganidan keyin alohida satr qo'shish o'rniga: qattiq. Shunday qilib, sizning fon rasmingiz qoladi. Saytdagi tarkibni siljitish paytida, matn satrlari harakatlanayotganini va orqa fonda qolayotganini ko'rasiz. Shunday qilib, html-da fonni bir necha usulda qanday qilib o'rgandingiz.

HTMLda jadval bilan ishlash

Ko'pgina sodda veb-ishlab chiquvchilar, jadvallar va bloklar bilan duch kelganlar, odatda, jadvalning orqa fonida rasmni qanday qilishni tushunishmaydi. Barcha HTML va CSS uslubi buyruqlari kabi , bu veb-dasturlash tili juda sodda. Va bu muammoni echish bir necha juft kodlar yozishni boshlaydi. Jadval satrlari va ustunlar yozishni o'z navbatida teglar (tr) va (td) deb belgilashini bilishingiz kerak. Jadvalning orqa rejasini rasm sifatida ko'rsatish uchun siz rasmga bog'langan tag (stol), (tr) yoki (td) ga oddiy iborani kiritishingiz kerak: background = tasvirning URL manzili. Aniqlik uchun biz bir necha misolni keltiramiz.

Fon o'rniga rasmli jadvallar: HTML misollar

Keling, 2x3 stolini chizamiz va rasm papkasida saqlangan fon rasmini keltiraylik: (jadval fon = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ jadval). Shunday qilib, stol rasmimizning fonida bo'yaladi.

Endi 2x3 o'lchamdagi bir stolni chizamiz, lekin rasmni 1, 4, 5 va 6-sonli chiziqlarga kiritamiz. (Jadval) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ Td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 / Td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ jadval). Ko'rib turganimizdek, fon faqat biz ro'yxatga olingan kameralarda paydo bo'ladi, ammo butun stolda emas.

O'zaro faoliyat brauzer sayti

Veb-resursning o'zaro faoliyat brauzer resursi kabi narsalar hali ham mavjud. Bu shuni anglatadiki, sayt sahifalari bir xil tarzda brauzerlarning turli xil va versiyalarida namoyish etiladi. Shu bilan birga, kerakli brauzerlar uchun HTML kodini va CSS uslubini sozlashingiz kerak. Bundan tashqari, smartfonlarni rivojlantirishning zamonaviy davrida ko'plab veb-ishlab chiquvchilari mobil versiyalar va kompyuter ko'rinishlariga moslashgan saytlarni yaratishga harakat qilmoqdalar.