Основы языка разметки гипертекста HTML
| Урок 1. | Урок 2. | Урок 3. | Урок 4. | Урок 5. | Урок 6. | Урок 7. |
Урок 1. Структура web-страниц
В языке html, как и в любом другом языке, есть свой алфавит, но в отличие от естественных языков он состоит не из букв, а из тэгов (маркеров). Тэг состоит из латинских букв или слов заключенные в знаки “<” и “>”.
Пример: <html>
Различают начальные и конечные тэги. Начальный тэг означает начало действия, конечный закрывает (заканчивает) действие. Отличаются они только наличием в конечном тэге знака “/”. Пример: <html> - начальный тэг; </html> - конечный тэг.
Структура web-страницы. Любая страница начинается с тэга <html> и заканчивается </html>.
Обязательный набор тэгов:
<HTML>
<head> - /Головной тэг/
</head>
<body> - /Тело страницы/
</body>
</HTML>
Как видно из примера размер букв в тэгах не имеет значения.
В головном тэге <head></head> прописываются заголовок страницы или сайта, а также кодировка национального алфавита (в нашем случае русского):
- Тэг для заголовка страницы: <title>Заголовок страницы</title>.
- Тэг для кодировки: <meta> - одиночный тэг, т.е. закрывать его не надо.
Большинство тэгов можно "настроить" с помощью атрибутов, которые позволяют менять их свойства. Атрибуты записываются в начальном тэге через пробел и приравниваются к названию свойства. Пример: <meta charset=windows-1251>
Порядок записи тэгов:
<HTML>
<head>
<title>Заголовок страницы</title>
<meta charset=windows-1251>
</head>
<body>
Содержание web- страницы
</body>
</HTML>
Практическое задание:
Создать web-страницу (с помощью программы Блокнот или другого текстового редактора). Заголовком страницы сделать надпись: "Страница Фамилия Имя". В содеражнии страницы набрать: Дату создания страницы, название используемой программы. Сохранять файл необходимо с расширением html. Пример: index.html.
Урок 2. Форматирование текста
Для работы со шрифтом необходим тэг - <font></font>.
Пример: <font size=3>Текст</font>
Пример: <font color=red>Текст</font>
Пример: <font face=Arial Black>Текст</font>
- Чтобы изменить размер символов необходимо к атрибуту size приравнять цифру от 1 до 7 (1 - маленький, 7 - большой).
- Чтобы изменить цвет текста поможет атрибут color, который приравнивается названию цвета на английском языке.
- Для изменения вида шрифта служит атрибут face. Ему приравнивается название шрифта (названия можно взять из текстового процессора).
Еще несколько дополнительных тэгов для изменения вида символов (форматирования).
- <B></B> - полужирный;
- <i></i> - курсив;
- <u></u> - подчеркнутый;
- <big></big> - большой шрифт;
- <small></small> - маленький шрифт;
- <STRIKE>…</STRIKE> -перечеркнутый текст
- <SUB>…</SUB> - подстрочный индекс
- <SUP>…</SUP> - надстрочный индекс
Практическое задание:
Создать web-страницу содержащую 8 строк любого стихотворения. Каждая строка должна иметь свой размер, цвет, тип шрифта и 1 из дополнительных тегов форматирования символов.
Урок 3. Форматирование абзаца. Списки.
<p></p> - тэг выделения текста в отдельный абзац.
К форматированию абзаца можно отнести процесс его выравнивания на странице, атрибут align. Варианты выравнивания: left - по левому краю старницы, center - по центру, right - по правому краю, justify - по ширине.
Пример: <p align=center>Текст</p>
Если нет необходимости выделять текст в отдельный абзац, но надо сместить текст на новую строку (стихотворение), то можно воспользоваться тегом <Br> - принудительный разрыв строки. Тэг является непарным, т.е. закрывать его не надо.
Пример:
Уронили мишку на пол <Br>
Оторвали мишке лапу <Br>
Все равно его не брошу…<Br>
Встречаются ситуации когда текст надо выделить в виде заголовка, например названия произведения или раздела. Для создание заголовка:
<H1>…….Текст…..</h1> - самый крупный
<H2>…….Текст…..</h2>
<H3>…….Текст…..</h3>
<H4>…….Текст…..</h4>
<H5>…….Текст…..</h5>
<H6>…….Текст…..</h6> - самый маленький
Создание автоматизированных списков:
В html выделено три вида списков:
Маркированный: <ul></ul>
Нумерованный: <ol></ol>
Словарный: <dl></dl>.
Для маркированного и нумерованного списков существует атрибут: type. В маркированном списке он может равняться: circle - не залитый круг, disc - залитый круг, square - залитый квадрат. В нумерованном же type приравнивается к первой римской или арабской цифре или первой латинской (заглавной, строчной) букве.
Каждый новый элемент списка следует начинать с метки <LI>
Словарный список не имеет обозначений (маркеров, цифр) предназначен для представления определений. Элементы в таком списке обозначаются тэгом <dt>, а подэлементы <dd>.
Пример:
|
Маркированный список
|
Нумерованный список
|
Словарный список
|
|
<UL type=“circle”> <LI>……………….. <LI>……………….. <LI>……………….. </UL> |
<OL type=“1”> <LI>……………….. <LI>……………….. <LI>……………….. </OL> |
<DL> <DT>……………….. <DD>……………….. <DT>……………….. </DL> |
Практическое задание:
Создать страницу содержащую произвольное расписание уроков одного дня в виде нумерованного или маркированного списка.
Урок 4. Добавление графики в WEB-документ.
Для заливки фона страницы каким-либо цветом достаточно добавить атрибут bgcolor к тэгу body:
Пример:
<BODY bgcolor=“blue”>……
………………
………………..
</BODY>
Разграничение страницы горизонтальной линией поризводится одинарным тэгом <HR>. По умолчанию линия проходит через всю страницу, имеет черный цвет. Для изменения ее параметров имеются следующие атрибуты:
- color - цвет линии;
- size - толщина;
- align - выравнивание;
- width - длина, задается в пикселях или процентах. Если задать в пикселях линия на мониторе с любым расширением будет заданной длины, если задать в процентах, то при различных разрешениях длина линии будет меняться, в зависимости от проставленных процентах.
Пример:
<hr align=center color=green size=5 width=50%> - линия зеленого цвета толщиной в 5 пикселей занимающая половину листа, выравненная по центру.
Изображения на web-страницу вставляются через тэг <img>, при помощи атрибута src. Он приравнивается к полному имени файла, при условии что изображение находится в той же папке что и страница, в противном случае этому атрибуту приравнивают путь к файлу с полным именем.
Пример: <img src=big.jpg>
Атрибуты к тэгу img:
- align - задает выравнивание изображения в тексте (top, midle, bottom) и на странице (left, center, right);
- Width – задает ширину области в пикселях или процентах, отводимой в окне под изображение;
- Height – задает высоту области в пикселях, отводимой в окне под изображение;
- Hspace – задает пустое пространство в пикселях слева и справа от рисунка;
- Vspace – задает пустое пространство в пикселях сверху и снизу от рисунка;
- Border – задает в пикселях толщину рамки вокруг рисунка;
- background - изображение фоном страницы (приравнивается к полному названию файла, при условии что изображение находится в той же папки что и страница).
Пример:
<img src=big.jpg align=left width=25% vspace=5 hspace=5 border=2>
Практическое задание:
На странице из предыдущего урока добавить фон желтого цвета, любое изображение небольшого размера. В конце страницы добавить горизонтальную линию синего цвета.
Урок 5. Организация ссылок в WEB-документах.
Для создания переходов между страницами на каждой из страниц прописываются текстовые или графические гиперссылки с помощью тэга <a> и атрибута href, к которому приравнивается название страницы перехода или документа скачивания (страница или документа должен находиться в той же папки).
Пример:
<a href=index.html>На главную страницу</a>
Если необходимо дать ссылку на документ, находящийся на другом сервере, необходимо вводить полный путь к файлу.
Ссылкой может служить не только текст но и изображение. Прописывается тэг аналогично предыдущему, только вместо текста вводится тэг изображения.
Пример:
<A HREF=“index.html”><IMG SRC=“picture.gif”></a>
Пример:
<A HREF=“http://www.othersite.ru/index.html”>Другой сайт</A>
С помощью ссылок можно создать "якорь" - переход к определенному месту страницы. Для этого необходимо в месте где будет создан якорь прописать следующий тэг: <a name="название якоря (на латинском языке)">, а для гипертекста: <a href=название страницы перехода#имя якоря>.
Пример:
Якорь: <a name=adres>
Ссылка: <a href=index.html#adres>Якорь</a>
Цветовая гамма гиперссылок HTML-документа
- Link – цвет гиперссылки;
- Vlink – цвет просмотренных ссылок;
- Alink – цвет ссылки при наведении курсора.
Практическое задание:
Страницы созданные в предыдущих практических заданиях связать гиперссылками.
Урок 6. Создание таблиц.
Заполнение большинства web-страниц необходимо начинать с таблицы, которая позволит разбить ее на разделы для меню и основной части. Создаются таблицы тэгом <table></table>. Разграничение таблицы на строки и столбцы: <tr></tr> - тэг строки; <td></td> - тэг ячейки. Для создания видимой границы таблицы служит атрибут: border, толщина границы: cellspacing, цвет границы: bordercolor, фон ячеек, строк, таблицы: bgcolor.
Пример:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Таблица 3х3:
<table border=1 bordercolor=red cellspacing=3>
<tr bgcolor=yellow>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
Объединение ячеек, в данном случае, возможно по горизонтали или вертикали:
- colspan - атрибут для объединения ячеек по горизонтали;
- rowspan - атрибут для объединения ячеек по вертикали.
Пример:
Объединения ячеек по горизонтали:
<table border="1" align="right" bordercolor="red" cellspacing=3>
<tr>
| 1 2 3 | ||
| 4 | 5 | 6 |
| 7 | 8 | 9 |
<td colspan=3>1 2 3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
Пример:
Объединения ячеек по вертикали:
<table border="1" align="right" bordercolor="red" cellspacing=3>
<tr>
1 2 3 4 5 6 7 8 9
| 1 4 | 2 | 3 |
| 5 | 6 | |
| 7 | 8 | 9 |
<td rowspan=2>1 4</td><td> 2</td><td> 3</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
Практическое задание:
Создайте таблицу по образцу:
Урок 7. Бегущая строка
HTML позволяет создать простейшую анимацию в виде бегущий строки.
Тэг - <marquee></marquee>
Атрибуты:
- bgcolor - фон бегущий строки;
- height - высота строки;
- width - ширина строки;
- loop - кол-во раз прокручивания строки;
- direction - направление двжиения строки;
- behavior - поведение строки (scroll - обычная прокрутка, slide - прокрутка с остановкой, alternate - движение строки от края страницы до края, без исчезания);
- scrollamount - скорость движения строки (меняется от 1 до 10, 1 - медленно, 10 - быстро).
В принципе, этой информации достаточно для создания web-страниц с помощью языка html, а после связывания их гиперссылками получить web-сайт. Надеюсь эти уроки оказались для Вас полезными.