Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

WEB - Лекция 2 - [HTML]

.pdf
Скачиваний:
84
Добавлен:
26.03.2015
Размер:
4.17 Mб
Скачать

Лекция 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

Соседние файлы в предмете Программирование для Web