Web-страницы создаются с помощью языка HTML — (Язык разметки гипертекста). Именно этот язык используют специальные программы при создании документов всемирной паутины. Браузеры при просмотре Web-страниц также интерпретируют HTML-документы.
Язык HTML предоставляет простой набор команд, описывающих структуру документа. Данный язык позволяет выделить в документе отдельные элементы — заголовки, абзацы, таблицы и т.д.
HTML-документ представляет собой обыкновенный текстовый файл. Элементы языка, которые управляют отображением текста, называются тегами. Теги заключаются в угловые скобки < u >, например, тег <b> устанавливает полужирное начертание текста.
Многие теги спарены: за открывающим тегом следует закрывающий тег, а между ними содержится текст или другие теги. Закрывающий тег содержит символ слеш /, например, конечным для тега <b> будет </b>. Открывающий и закрывающий теги, а также часть документа, заключенная между ними, образует блок, называемый элементом HTML. Некоторые теги, например, <hr>, являются одиночными, и для них нет закрывающего тега.
Теги могут иметь атрибуты — параметры с дополнительной информацией о том, как браузер должен обрабатывать текущий тег, например, можно указать тип выравнивания текста. Атрибут тега состоит из имени, например, паше (Имя), знака равенства = и значения, которое задается строкой символов, например, nаmе="ИВАНОВ". Значение атрибута может записываться как в кавычках, так и без них. Если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки иногда опускают. Атрибуты в теге отделяются друг от друга пробелами, при этом их порядок следования произволен. Атрибуты могут быть обязательными и необязательными.
Язык HTML не различает большие и малые буквы, так что теги <b> и <В> эквивалентны. В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов — любые символы. Если в качестве значений атрибута применяются русские символы, то они должны быть заключены в кавычки.
Следует отметить, что неверно записанный тег или его параметр игнорируется браузером.
Лабораторная работа №1 (создание первого сайта)
1. Запустите программу Блокнот (Пуск – Все программы – стандартные – блокнот).
2. В появившемся документе ведите код, содержащий основные теги для определения структуры html-документа:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
3. Между тегами <title> и </title> введите название Web-страницы – ваше Ф.И.О.( на экран не выводится)
4. Между тегами <body> и </body> вставьте любой «основной» текст. Дня установки абзацев используйте теги <р> </р> (каждый абзац должен находиться между данными тегами)
5. Сохраните документ на диске с помощью команды Сохранить как. В пункте Имя файла введите свою фамилию и установите расширение html (Ivanov.html). Нажмите сохранить.
6. В проводнике откройте данный файл с помощью Интернет браузера.
Лабораторная работа №2 (Форматирование текста)
1. В Интернет браузере войдите во вкладку Вид – Просмотр HTML кода. В открывшемся окне появится текст html кода вашей странички.
2. Измените цвет шрифта и фона (на ваше усмотрение) см. справку
Справка
<body>...< /body>
Определяет тело документа. Заметим, что использование атрибутов данного тега нежелательно, поскольку более предпочтительно представлять документы с помощью таблицы стилей, которые будут описаны в другом приложении.
Атрибуты:
alink
Устанавливает цвет активной ссылки, иными словами, когда она выбрана пользователем,
background
Укалывает электронный адрес фонового изображения,
bottommargin
Определяет границу нижнего поля документа в пикселях,
bgcolor
Устанавливает цвет фона документа.
leftmargin
Определяет границу левого поля документа к пикселях.
link
Устанавливает цвет непросмотренной ссылки,
rightmargin
Определяет границу правого поля документа в пикселях,
scroll
Устанавливает наличие полос прокрутки в окне браузера,
text
Задает цвет текста,
topmargin
Определяет границу верхнего ноля документа в пикселях,
vlink
Устанавливает цвет просмотренной ссылки.
Необходимо иметь в виду, что задавать цвет в числовом представлении неудобно. Лучше использовать названия цветов, из которых наиболее распространенными являются: aqua (Голубой), black (Черный), blue (Синий), gray (Серый), green (Зеленый), fuchsia (Сиреневый), lime (Светло-зеленый), maroon (Каштановый), navy (Темно-синий), olive (Оливковый), purple (Фиолетовый), red (Красный), silver (Серебряный), teal (Сине-серый), white (белый), yellow (Желтый).
Пример:
<body bgcolor=blue text=red> Тело документа </body>
3. Установим заголовки. На Web-странице могут использоваться заголовки разделов документа. Заголовки объявляются парой тегов <h1> </h1>, <h2> </h2>,...<h6> </h6>. Заголовки имеют шесть уровней или размеров. Заголовок первого уровня с тегами <h1>...</h1> является самым крупным, а заголовок шестого уровня с тегами <h6>...</h6> — самым мелким.
Атрибуты:
align
Указывает тип выравнивания текста в элементе. Значение данного атрибута left позволяет выровнять текст по левому краю окна браузера, center — по центру, right — по правому краю.
Пример:
<h1 align=center>Teкст большего размера</h1> <h2 align=left> Текст меньшего размера</h2>
В качестве заголовка напишите «Лабораторная работа» и выровняйте по центру.
4. Основной текст сделайте наклонным, полужирным и подчеркнутым.
Теги <i> </i> – делают текст наклонным, <b> </b> – полужирным и <u> </u> – подчеркнутый
Пример:
<i>Иванов Иван Иванович – студент 1-го курса исторического факультета, по специальности государственное муниципальное управление. </i>
5. Измените размер шрифта основного текста. Для этого используйте теги <font></font>. Атрибут size позволяет установить размер шрифта от 1 до 7. (1 — min, 7 – max).
Пример: <font size=5><i>Иванов Иван Иванович – студент 1-го курса исторического факультета, по специальности государственное муниципальное управление. </i></font>
6. Выровняем основной текст по текст по центру, с помощью тегов <center> </center>.
7. Закройте Блокнот, сохранив изменения. Обновите страничку с помощью кнопки
обновить
.