Язык гипертекстовой разметки HTML Зарубина Наталья Алексеевна

Урок 1. Знакомство с языком HTML Команды языка HTML называются теги они записываются в < > Большинство тегов – парные <html>…</html> Документ HTML имеет три структурных типа содержимого: 1. Теги – команды в < > 2. Комментарии –пояснения к документу. Они помогают разобраться в его содержании <!-- … -- > 3. Текст – то, что пользователь видит на экране браузера Мультимедийные элементы – картинки, звук, видео – не являются частью HTML-документа и хранятся в отдельных файлах. HTML -документ содержит только ссылки на эти файлы в виде тегов.

теги и атрибуты Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров) <img src=“dog. gif” width=6> Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “ ). Тег со всеми атрибутами желательно располагать на одной строке. Для большинства тегов нужен закрывающий тег: …

Структура HTML документа Ø Раздел HTML документа Каждый HTML документ должен начинаться открывающим HTML тегом и заканчиваться закрывающим HTML тегом <HTML>…</HTML> Ø Раздел заголовка (Header Section) Раздел начинается с тега <HEAD> и заканчивается</HEAD> Заголовок включен внутрь тега TITLE, который начинается с <TITLE> … </TITLE> Ø Раздела тела документа (BODY Section) Раздел следует после раздела заголовка. Содержит текст, картинки и ссылки, которые должны отображаться на Web странице. Начинается с тега <BODY> … </BODY>

<html> <head> <title> Мой первый сайт </title> </head> <body> Добро пожаловать на мою первую страницу! </body> </html>

Заголовок документа – теги <Head> и <Title> Тег <Head>…</Head> заключает в себе теги заголовка. 1. Тег <Title>…</Title> содержит слова, которые появляются в стоке заголовка браузера <html> <head> <title>Мой первый сайт </title> </head> 2. Дополнительные теги заголовка: <meta> - содержит дополнительные данные о документе, используемые поисковыми серверами; <base> и <link> - определяют базовый адрес документа и некоторые другие

Тело документа – тег <body> Все, что находится между<body> и </body>, называется содержимым тела документа. Тег <body> может содержать 3 группы параметров: 1. Управление внешним видом документа. 2. Атрибуты программирования – по событию, таблицы стилей и пр. 3. Атрибуты ссылок и идентификации.

Параметры тега <body> Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB <body bgcolor = “red”> <body bgcolor = “#FF 0000”> Text – задает цвет текста. <body bgcolor = “red” text=“blue”> Background – помещает в качестве фона изображение из файла с картинкой. <body background = “dog. gif”> Bgproperties = “fixed” – фоновый рисунок не прокручивается вместе со страницей. Link – задает цвет гиперссылок, по которым пользователь еще «не ходил» . Vlink – задает цвет посещенных гиперссылок. Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)

Оформление текста Заголовки Существует 6 уровней заголовков: <h 1>. . . </h 1>, …, <h 6>. . . </h 6> Атрибут – align – выравнивание Значения: Left (по умолчанию) Right Center <body bgcolor ="#CC 3399" text ="#CCCCCC"> <h 1 align = center> Title 1 </h 1> <h 2 align = right> Title 2 </h 2> <h 3 align = left> Title 3 </h 3> <h 4> Title 4 </h 4> <h 5> Title 5 </h 5> <h 6> Title 6 </h 6> </body>

Абзацы Тег указывает на начало нового абзаца и вставляет пустую строку перед абзацем. Атрибут align. Тег - разрыв строки. Используется для записи текстов стихов и песен. Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all - продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.

Физическое и логическое форматирование текста теги физических стилей … Полужирный шрифт <big>… </big> Увеличенный шрифт … Курсив … Уменьшенный шрифт … Подчеркивание … Верхний индекс <s>…</s> Зачеркнутый шрифт Нижний индекс <tt>…</tt> Стиль печатной <blink>…</blink> машинки … Мерцающий текст (в Internet Explorer) Можно комбинировать теги стилей: Полужирный курсив

Изменение шрифта тег … - изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1 -7. По умолчанию size=3 size= +1 – относительный (на 1 больше, чем базовый размер шрифта) color - цвет шрифта face - тип шрифта face="Comic Sans MS, Courier New”

<html> <head> <title>Мой первый сайт </title> </head> <body> Это обычный шрифт Это измененный шрифт Это снова обычный шрифт </body> </html>

теги логических стилей <abbr> </abbr> Аббревиатура <cite>… </cite> Библиографическая <samp>… ссылка, исп. для </samp> записи названий книг и пр. (курсив) Текст с «буквальным» смыслом <code> </code> Для текстов программ Для имен переменных … Визуальное … выделение (курсив), важный текст Логическое выделение (полужирный) <dfn>… </dfn> Для специальных терминов <kbd>… </kbd> Для технических терминов <q> … </q> Блок цитат (атрибут cite=“URL” -источник <address>…</ Адрес (курсив) address> цитаты) <acronym> </acronym> <var>… </var> Сокращение, напр. , HTML

<html> <head> <title>Мой первый сайт </title> </head> <body> Рациональный ум не работает по принуждению, он не подчиняет свое восприятие реальности чьим-либо приказам, директивам, ограничениям, он не приносит свои знания, свое видение истины в жертву чьим-либо мнениям, угрозам, пожеланиям, планам или благосостоянию. <cite>Айн Рэнд. Концепция эгоизма</cite></body> </html>

списки Список – это набор упорядоченных абзацев текста, выделенных отступами и помеченных специальными значками (маркерами) или нумерованных. ØМаркированные списки ØНумерованные списки ØСписки определений

маркированные списки Используются для перечня элементов, для которых не важен порядок следования. Тэги <UL>…</UL> заголовок списка <li> (List Item) элемент списка Атрибуты (маркеры для обозначения элементов списка) Disc Circle Square

<html> <head> <title> Мой первый сайт </title> </head> <body> <ul> <li> понедельник <li> вторник <li> среда <li> четверг <li> пятница <li> суббота <li> воскресение </ul> </body> </html>

<html> <head> <title> Мой первый сайт </title> </head> <body> <UL> <li> фрукты <ul> <li> апельсин <li> яблоко <li> груша </ul> <li> цветы <ul> <li> роза <li> ромашка <li> тюльпан </ul> </body> </html>

Важно!!! Атрибут TYPE используется для принудительного задания видов маркеров списка!!! По умолчанию <UL> и <LI> Выбор типа маркера: Ø<UL TYPE =SQUARE > Ø<UL TYPE = DISC> Ø<UL TYPE = CIRCLE>

нумерованные списки Тэг <ol>…</ol> заголовок списка Тэг <li> элемент списка Атрибуты start=“число“ устанавливает номер списка, с которого начинается нумерация Type=”тип” устанавливает тип номеров в списке Тип Стиль Образец 1 Арабские цифры (по умолчанию) 1, 2, 3, 4, … A Заглавные буквы A, B, C, D, … a Строчные буквы a, b, c, d, … I Заглавные римские I, III, IV, … i Строчные римские i, iii, iv, … В тэг <li> можно вставлять атрибуты Type=”тип” и value=“число“

<html> <head> <title> Мой первый сайт </title> </head> <body> <o. L> <li> фрукты <ol type=i> <li> апельсин <li> яблоко <li> груша </ol> <li> цветы <ol type=A> <li> роза <li> ромашка <li> тюльпан </ol> <li> животные <ol start=5> <li> медведь <li> слон <li> тигр </ol> </body> </html>

<html> <head> <title> Мой первый сайт </title> </head> <body> <u. L> <li> фрукты <ol type=i> <li> апельсин <li> яблоко <li> груша </ol> <li> цветы <ol type=A> <li> роза <li> ромашка <li> тюльпан </ol> </ul> </body> </html>

Списки определений Используются для: ØСловарей; ØСписка типа имя / значение; ØСоздания маркеров элементов списка. Списки определений устроены как статьи в толковом словаре, которые могут быть заполнены текстом и картинками. Тэг <DL>…</DL> заголовок списка Каждый элемент списка состоит из двух частей – термина и определения: <dd> - термин <dt> - определение или объяснение

<html> <head> <title> Мой первый сайт </title> </head> <body> <d. L> <dt> понедельник <dd> первый день недели <dt> HTML <dd> Язык гипертекстовой разметки <dt> сеть <dd> группа компьютеров, связанных между собой </dl> </body> </html>

Спасибо за внимание!