HTML5 и CSS3: Първи стъпки

HTML (Език за маркиране на хипертекст) или език за маркиране на хипертекст, е стандартът, използван за разработването на уеб страници, това е език, базиран на тагове, който структурира информация въз основа на йерархията на съдържанието. Сам по себе си HTML не дава графични характеристики на представената информация, а само я организира по такъв начин, че да има логичен ред на четене.
Второ CSS (Cascading Style Sheet) или каскадни стилови таблици е език, използван за дефиниране и създаване на презентация на структуриран документ, написан на HTML, той отговаря за формулирането на спецификацията на стиловите таблици, която ще служи като стандарт за браузърите.
В този урок ще представим основната структура на документ HTML5, най -популярните етикети и йерархичния ред за тяхното деклариране. На свой ред ще обясним връзката между HTML5 и CSS3, начина, по който те могат да бъдат свързани, структурата на декларациите, направени в CSS3 и графичните атрибути, които могат да дадат на HTML документа.
За примерите, които ще изпълним, е необходимо да имаме редактор на код, в нашия случай избраният редактор е Dreamweaver CC 2014, в урока Основи на Dreamweaver CS6: Познаване на работната среда са описани характеристиките на приложението, които остават същите въпреки разликата в техните версии
1. Структура на HTML5 документ

ДА СЕ) Този маркер показва версията, която ще използваме в документа, в този случай това е версия 5 на HTML.
Б) Показва отварянето на HTML документ, това е първият маркер, който е деклариран.
° С) Можете да включите заглавие на документа, скриптове, стилове, мета-информация и др.
Д) Предоставя метаданни за HTML документа. Метаданните няма да се показват на страницата, те ще бъдат анализирани само като прикачена информация. Елементите обикновено се използват за определяне на описание на страницата, ключови думи, автор на документ и др. В примера, показан на изображението, използвахме атрибута charset, за да определим набора от знаци, в които ще се показва страницата, charset = "utf-8" в случай на испански език.
И) Тя ни позволява да зададем името на страницата, която ще се показва в браузърите.
Е) По -голямата част от маркерите в HTML се нуждаят от декларация за отваряне и декларация за затваряне:

 Съдържание на етикета 

В този случай показаното изображение затваря маркера на главата с
Ж) Всичко в този елемент ще се показва от браузъра, тоест в този маркер ще обозначим цялото визуално съдържание на нашия HTML документ.
З) По същия начин, както е обяснено в раздела F това е затварянето на маркера
Аз) По същия начин, както е обяснено в раздела F това е затварянето на маркера
Структура на CSS3 документ

ДА СЕ) .class: Всички декларации, които започват с точка, са от клас, техните графични характеристики могат да бъдат приложени към всеки HTML маркер.
Б) #Id: Декларациите, които започват със знака за паунда, показват, че той е от тип ID. Както класовете, така и идентификаторите се използват за определяне на какви графични атрибути искаме да дадем на нашето HTML съдържание. Разликите между тези 2 вида изявления обаче са следните:
Идентификационните номера са уникални:
- Всеки елемент може да има само един идентификатор.
- Всяка страница може да има само един елемент с този идентификатор.
Нашият HTML код няма да премине валидиране, ако един и същ идентификатор се използва в повече от един елемент.
Класовете не са уникални:
- Същият клас може да се използва в няколко елемента.
- Можете да използвате няколко класа в един и същ елемент.
Всеки стил, който трябва да се приложи към множество обекти на страница, трябва да бъде направен с клас. Важно е да се спомене, че всичко, декларирано в CSS документите, е чувствително към регистъра.
° С) {Отваряща скоба, която започва декларирането на атрибутите.
Д) } Ключ, който затваря декларациите, направени за клас или идентификатор.
И) Структура на атрибут: след деклариране на атрибут е необходимо да се посочи неговата стойност, в примера, показан на изображението, ние присвояваме височина от 600 пиксела на #Id.
За разделяне на атрибутите и техните стойности се използва точка и запетая; както е илюстрирано на снимката.
Това са, по прост начин, общите характеристики на структурата на кода HTML, необходимите етикети и как да ги поръчате. В случай че CSS видовете декларации и общата им структура. С тези знания ще бъдем готови да направим първия си HTML и да дадем на етикетите графични характеристики.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка