ßê âåðñòàòè äèâàìè

òåã
àêòèâíî âèêîðèñòîâóºòüñÿ â web-äèçàéí³ äëÿ ñòâîðåííÿ íà html-ñòîð³íêàõ áëîê³â, âñåðåäèíó ÿêèõ ìîæíà ïîì³ñòèòè âì³ñò áóäü-ÿêîãî õàðàêòåðó - òåêñò, êàðòèíêè, òàáëèö³ ³ ò.ä.

³äåî - Web Junior 2016 - óðîê 4. Áëîêîâà ìîäåëü HTML ³ ÑSS

²íñòðóêö³ÿ
1
Ïðè âèêîðèñòàíí³



çàêðèâຠòåã
îáîâ`ÿçêîâèé. Éîãî ìîæíà âèêîðèñòîâóâàòè ç íàñòóïíèìè àòðèáóòàìè:
- align - âèð³âíþâàííÿ (left, center, right, justify), íàïðèêëàä,
òåêñò

³äåî - HTML5 äëÿ ïî÷àòê³âö³â | # 14 Îñíîâè CSS ³ áëîêîâî¿ âåðñòêè

-
- class - ³ì`ÿ êëàñó (
òåêñò

³äåî - Ñòâîðåííÿ ïåðøîãî ñàéòó - ×àñòèíà 2 (CSS DIV áëîêîâà âåðñòêà)

) -
- id - ³ì`ÿ ³äåíòèô³êàòîðà html-òåãà-
- style - íàïðÿìîê ñòèëþ-
- title - ñïëèâàþ÷à ï³äêàçêà.
2
Ïðè âèêîðèñòàíí³ áëîê³â äîö³ëüíî çàñòîñîâóâàòè òàáëèöþ ñòèë³â. Íàïðèêëàä, ÿêùî ïîòð³áíî íà ñòîð³íö³ ñòâîðèòè äâà ð³çíèõ áëîêó ç âì³ñòîì, òî êîä áóäå âèãëÿäàòè ïðèáëèçíî òàê:






Áëîê æîâòîãî êîëüîðó ïåðøèé ç øèðèíîþ 500px ³ äîâæèíîþ 200px.

Áëîê çåëåíîãî êîëüîðó ïåðøèé ç øèðèíîþ 200px ³ äîâæèíîþ 500px.

3
Ïðàâîñòîðîíí³é / ë³âîñòîðîíí³é âèð³âíþâàííÿ áëîê³â ìîæíà çàäàòè çà äîïîìîãîþ ñòèë³â:
4
Çà äîïîìîãîþ òåãà
ìîæíà îðãàí³çóâàòè ïîñë³äîâíó çì³íó êàðòèíîê.













Ïîä³ëèñÿ â ñîö ìåðåæàõ:

Óâàãà, ò³ëüêè ÑÜÎÃÎÄͲ!
Ñõîæ³
» » ßê âåðñòàòè äèâàìè