Файл: Лекция1-4.docx

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 04.12.2019

Просмотров: 555

Скачиваний: 4

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Общее представление

Браузеры

Версии

Перспективы

Структура HTML-документа

Синтаксис тегов

Атрибуты

Тип элемента документа

Структура элемента

Примечания

Варианты DOCTYPE для HTML 4.01

Варианты DOCTYPE для HTML 5

Браузерные войны

Структура HTML-документа

Варианты DOCTYPE для HTML 4.01

DOCTYPE для HTML 5

Основные элементы («теги»)

Гиперссылки

Текстовые блоки

Форматирование текста

Списки

Объекты

Изображения

Таблицы

Формы

Символы

Названия цветов

Основные символы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

  • Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

  • Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

  • С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Варианты DOCTYPE для HTML 5

В HTML 5 используется только один вариант DOCTYPE:

<!DOCTYPE HTML>

Браузерные войны

Основная статья: Война браузеров

В середине 1990-х годов основные производители браузеров — компании Netscape и Microsoft — начали внедрять собственные наборы элементов в HTML-разметку. Создалась путаница из различных конструкций для работы во Всемирной паутине, доступных для просмотра то в одном, то в другом браузере. Особенно большие трудности были при создании кросс-браузерных программ на языке JavaScript. Веб-мастерам приходилось создавать несколько вариантов страниц или прибегать к другим ухищрениям. На какое-то время проблема потеряла актуальность по двум причинам:

  • Из-за вытеснения браузером Internet Explorer всех остальных браузеров. Соответственно, проблема веб-мастеров становилась проблемой пользователей альтернативных браузеров.

  • Благодаря усилиям производителей других браузеров, которые либо следовали стандартам W3C (как Mozilla и Opera), либо пытались создать максимальную совместимость с Internet Explorer.

На современном этапе можно констатировать рост популярности браузеров, следующих рекомендациям W3C (это Mozilla Firefox и другие браузеры на движке Gecko; Safari, Google Chrome и другие браузеры на движке WebKit; Opera с движком Presto). Доля Internet Explorer на данный момент составляет менее 50 %.

В современной практике существует возможность упростить разработку кросс-браузерных программ на языке JavaScript, с помощью различных библиотек и фреймворков. Например таких как jQuery, sIFR и др.





Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML



Структура HTML-документа

HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:

<p>Текст между двумя тегами - открывающим и закрывающим.</p>

<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>

А вот пример пустого элемента: <br>

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

  • Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE для HTML 5

В отличие от предыдущих версий тег всего один [1]

<!DOCTYPE html>

Основные элементы («теги»)

Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://yahoo.com"> и <a href="http://yahoo.com"> означают одно и то же.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.

Гиперссылки

<A HREF="filename" target="_self">название ссылки</A>

  • Атрибут HREF задает значение адреса документа, на который указывает ссылка.

  • filename — имя файла или адрес Internet, на который необходимо сослаться.

  • название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.

  • TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:

    • _top — открытие документа в текущем окне;

    • _blank — открытие документа в новом окне;

    • _self — открытие документа в текущем фрейме;

    • _parent — открытие документа в родительском фрейме.

Значение по умолчанию: _self.

Текстовые блоки

  • <H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый большой, 6 — почти равен обычном тексту по умолчанию).

  • <P> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.

  • <BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)

  • <HR> — горизонтальная линия

  • <BLOCKQUOTE> … </BLOCKQUOTE> — цитата. Обычно текст сдвигается вправо.

  • <PRE> … </PRE> — режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе).

  • <DIV> … </DIV> — блок (обычно используется для применения стилей CSS)

  • <SPAN> … </SPAN> — строка (обычно используется для применения стилей CSS)

Форматирование текста

  • <EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом)

  • <STRONG> … </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом)

  • <I> … </I> — выделение текста курсивом

  • <B> … </B> — выделение текста жирным шрифтом

  • <U> … </U> — подчёркивание текста

  • <S> … </S> — зачёркивание текста. Вот так: зачёркнутый текст.

  • <STRIKE> … </STRIKE> — то же самое, что <S> … </S>

  • <BIG> … </BIG> — увеличение шрифта

  • <SMALL> … </SMALL> — уменьшение шрифта

  • <BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег может не работать в браузере Internet Explorer версий 5 и ниже без применения JavaScript

  • <MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст.

  • <SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H2O.

  • <SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc2.

  • <FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:

    • COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.

    • FACE=шрифт меняет шрифт

    • SIZE=размер меняет размер шрифта. Размер от 1 до 7, стандартный по умолчанию 3. (Есть много способов изменить стандартный размер для данной страницы.)

    • SIZE=+размер или SIZE=-размер — размер задаётся по сравнению со стандартным. Например, +2 означает размер на 2 больше стандартного.

Так, например,

Сигналом к началу атаки являются

<U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.

создаст текст

Сигналом к началу атаки являются три больших зелёных свистка.

Списки

<UL>

<LI> первый элемент </LI>

<LI> второй элемент </LI>

<LI> третий элемент </LI>

</UL>

создаёт список

  • первый элемент

  • второй элемент

  • третий элемент

Если вместо <UL> (Unordered List, что означает ненумерованный список) поставить <OL> (Ordered List, нумерованный список), список получится нумерованным:

  1. первый элемент

  2. второй элемент

  3. третий элемент

У этих тегов есть параметры:

«type»="тип"

где тип — форма цифр или букв (может быть в ul -

  1. square — квадрат

  2. round — пустой круг

  3. disk — полный круг, по умолчанию,

а в ol -

  1. «A» или «а» (латинскими буквами) — Буквенный список, соответственно заглавными или обычными буквами.

  2. «I» или «i» — Римские цифры

  3. «1» — арабские цифры

пишется так:

<ol type="i">

<li> Первое </li>

<li> Второе </li>

<li> И т.д. </li>

</ol>

, параметр «start» (для <ol), определяющий начало нового отсчета, например, не 1, 2, 3, а 14, 15, 16

Пишется так:

<ol start="24">

<li> Двадцать четыре </li>

<li> Двадцать пять </li>

<li> И т.д. </li>

и, наконец для тега <li параметр «value» - если необходимо перескочить с одной цифры на другую, например, не 1, 2, 3, а 1, 2, 4, 5, и т.д.

<ol>

<li> Один </li>

<li> Два </li>

<li value="22"> Двадцать два </li>

<li> Двадцать три </li>

.

Наконец, третьим, и последним, списком, является список определений:

<DL>

<DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>

<DT> Кот </DT> <DD> муж кошки </DD>

<DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>

</DL>

создаст следующее:

Кошка

мяукающее домашнее животное

Кот

муж кошки

Крокодил

большой африканский зверь с острыми зубами

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Объекты

  • EMBED — вставка различных объектов: не-HTML документов и media-файлов

  • APPLET — вставка Java-апплетов

  • SCRIPT — вставка скриптов.

Изображения

  • IMG — вставка изображения. Этот тег не закрывается.

    • SRC — имя или URL

    • ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)

    • TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)

    • WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется»/«сожмется»)

    • ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)

    • VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения

Пример:

<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">

Изображение можно сделать ссылкой:

<A HREF=url ><IMG SRC=url></A>

Таблицы

  • TABLE — создание таблицы. Параметры тега:

    • BORDER — толщина разделительных линий в таблице

    • CELLSPACING — расстояние между клетками

  • CAPTION — заголовок таблицы (этот тег необязателен)

  • TR — строка таблицы

  • TH — заголовок столбца таблицы (этот тег необязателен)

  • TD — ячейка таблицы

  • height — высота таблицы

  • width — ширина таблицы

Так, например,

<TABLE BORDER="1" CELLSPACING="0">

<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>

<TH> Год </TH>

<TH> Улов </TH>

<TR>

<TD> 1997 </TD>

<TD> 214 </TD>

</TR>

<TR>

<TD> 1998 </TD>

<TD> 216 </TD>

</TR>

<TR>

<TD> 1999 </TD>

<TD> 207 </TD>

</TR>

</TABLE>

Создаст таблицу:

Улов крокодилов в Мумбе-Юмбе

Год

Улов

1997

214

1998

216

1999

207

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе

Год

Улов

1997

214

1998

216

1999

207

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

Например, если заменить первые строки таблицы на

<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">

<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>

<TH> Год </TH>

<TH> Улов </TH>

<TR>

<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе

Год

Улов

1997

214

1998

216

1999

207

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.

Формы

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

  • FORM — создание формы

  • INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)

  • TEXTAREA — текстовая область (многострочное поле для ввода текста)

  • SELECT — список (обычно в виде выпадающего меню)

  • OPTION — пункт списка

Символы

Чтобы создать символ, необязательно искать его на клавиатуре. Можно просто набрать тег (например, чтобы получить ¢, надо набрать следующее: &cent;). Пробел - &nbsp; , ударение - &#x301; и т. д.

Названия цветов

В HTML определены следующие цвета.

Название

Шестнадцатеричный цвет

black

#000000

silver

#c0c0c0

maroon

#800000

red

#ff0000

navy

#000080

blue

#0000ff

purple

#800080

fuchsia

#ff00ff

green

#008000

lime

#00ff00

olive

#808000

yellow

#ffff00

teal

#008080

aqua

#00ffff

gray

#808080

white

#ffffff

Основные символы

Код

Символ

Смысл

&lt;

<


&gt;

>


&amp;

&


&nbsp;

 

неразрывный пробел (на этом пробеле не переводится строка)

&sect;

§


&#8470;

№


&copy;

©

копирайт (copyright)

&reg;

®

зарегистрированный товарный знак (registered trademark)

&#153;

™

товарный знак (trademark)

&deg;

°

градусы

&laquo;

"

открывающая кавычка в русском языке

&raquo;

« 

закрывающая кавычка в русском языке

&hellip;

…

многоточие

&mdash;

—

тире

&#149;

•

жирная точка

&plusmn;

±

плюс-минус

&minus;

−

минус

Клавиатурные символы ' и » в руском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), ™, C.

Дефис, тире и минус — три разных знака.

  1. Клавиатурный символ - называется дефис и используется внутри слов.

  2. Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.

  3. Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.

В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.

Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл.

Полный набор специальных символов см. на сайте Владимира Городулина.

Для автоматической замены символов на специальные см. Типограф на сайте Артёма Лебедева.


Смотрите также файлы