WEB - Лекция 2 - [HTML]
.pdfЛекция 2. Языкразметки HTML
Web-технологиии программирование
© 2014 NetCrackerTechnologyCorporationConfidential
Планлекции
•Что такое HTML?
•Инструментарий.
•Структура кода.
•Типы тегов.
•Основные элементы.
•Формы.
•Написание корректного кода.
©2014 NetCrackerTechnology CorporationConfidential |
2 |
Чтотакое HTML?
HTML (HyperTextMarkupLanguage) –
язык разметкигипертекста
Система версткивеб-страниц, которая определяет, какие элементы и как должны располагаться в документе.
HTML-страница— это обычный текстовыйфайл, который содержит набор инструкцийдля интерпретации браузером.
Любой документ на языкеHTML представляет собой набор элементов, начало и конец каждогоэлемента обозначается специальнымипометками— тегами.
©2014 NetCrackerTechnology CorporationConfidential |
3 |
Чтотакое HTML?
Стандартный язык разметки документов.
Теговый язык.
HTML
интерпретируется браузерами и отображаетсяв виде документа в понятной для человека форме.
4
Основныепонятия
Тег— это специальныйсимвол разметки,которыйприменяетсядля вставкиразличныхэлементовна веб-страницутакихкак: рисунки, таблицы,ссылкии др.и для измененияихвида.
Контейнер - парный тег, внутрикоторого могутрасполагаться другиетеги. Контейнертребуетзакрывающеготега,обозначаемого </тег>.Такимобразом,контейнерсостоитизоткрывающеготега (<тег>)и закрывающего(</тег>).
<h1>Тегив HTML</h1>
<!--отобразиттекст«Тегив HTML»как заголовокпервогоуровня-->
Элементы могутбытьпустыми,тоестьне содержащиминикакого текстаи другихданных(например,тегпереводастроки<br>).В этом случаеобычно неуказываетсязакрывающийтег.
©2014 NetCrackerTechnology CorporationConfidential |
5 |
Основныепонятия
Начальныйтег может содержатьатрибуты— описание дополнительных свойств,уточняющихдействиеинструкций.Если
атрибутов несколько, то они отделяютсядругот другапробелом.
Чтобыуказатьатрибут,сначалазаписываетсяегополное имя (иногдасокращенное),а затемпосле знака равно значение, которое оно должно принять.
<FONT color="blue"size=5>Списки</FONT>
<!--отобразитслово «Списки»шрифтомсинегоцветаи размером5-->
Для создания комментариев в любойчасти документаиспользуется парный тег<!---->.
©2014 NetCrackerTechnology CorporationConfidential |
6 |
Основныепонятия
Допускается однупару тэгов заключать внутридругойпары.В этом случае инструкциивнешней пары будутраспространятьсяи на заключеннуювнее внутреннюю пару.
<b><i>Форматированиетекста</i></b> отобразитсякурсивнымии полужирнымибуквами:
Форматированиетекста
При написаниитеговстрочные и прописныебуквы не различаются, перенос строки распознаетсякак пробел, а несколько подряд записанныхпробелов воспринимаютсякак один.
Исключением изэтогоправилаявляетсятег <pre>, внутрикоторого
любое число пробелов отображается именнотак,как оноуказанов коде.
©2014 NetCrackerTechnology CorporationConfidential |
7 |
Инструментарий
Текстовыйредактор
Браузер для просмотра результатов
Валидатор
Графическийредактор
Справочникпо тегам HTML
©2014 NetCrackerTechnology CorporationConfidential |
8 |
Инструментарий
Текстовый редактор
подсветкасинтаксиса— выделениетегов,текста,ключевыхслов и параметровразнымицветами.
работас вкладками.Сайтпредставляетсобой наборфайлов,которые приходитсяправитьпоотдельности,длячего нуженредактор,умеющий одновременноработатьсразус несколькимидокументами.
проверкатекущего документана ошибки.
©2014 NetCrackerTechnology CorporationConfidential |
9 |
Инструментарий
Валидатор
Валидация HTML-документапредназначенадлявыявления ошибок в синтаксисевеб-страницыи расхождений соспецификацией
HTML.
Валидаторыусловноделятсяна онлайновые и локальные.
Онлайн: validator.w3.org
Локально: программаTidy
©2014 NetCrackerTechnology CorporationConfidential |
10 |