Знакомство с HTML
Введение
HTML (Hypertext Markup Language) - язык разметки гипертекста. Термин "гипертекст" предложил Тед Нельсон в 1965 г. Вот как звучит определение гипертекста, которое дал Нельсон в 1987 г.: "...форма письма, которое ветвится или осуществляется по запросу". Иначе говоря, HTML - это "нелинейное письмо", которое "больше, чем текст" (hypertext). В 1989 г. Тим Бернерс-Ли предложил глобальную гипертекстовую систему, позволившую соединять связями не только текст, но и графику, звуки, видео. Глобальность этой системы, в отличие, например, от системы Теда Нельсона, состояла в том, что данные распределены по всему миру, а ее основой стал Интернет. Язык HTML постоянно развивался с момента его создания и развивается в настоящее время.
Сегодня создать Web-страницу, которую потом можно сделать доступной для пользователей Интернет, совсем не сложно. Для этого существуют многочисленные HTML-редакторы, графические редакторы и другие инструментальные средства, научиться работать с которыми достаточно просто. Даже такой широко распространенный текстовый редактор, как Microsoft Word, позволяет автоматически формировать HTML-документы. Однако HTML-страницы, создаваемые с помощью инструментальных средств, не всегда удовлетворяют требованиям искушенного автора. С другой стороны, неподготовленный автор не может понять автоматически сформированный текст исходного описания HTML-страницы и испытывает большие затруднения при необходимости внести в этот текст простейшие изменения или дополнения. Именно поэтому необходимо сначала разобраться с основами HTML.
Основы HTML
Рассмотрим код простейшей Web-страницы:
<html>
<head>
<title>prim1</title>
</head>
<body>
</body>
</html>
Результат выполнения данного кода показан на рис.1.
рис.1
Перед нами текст простейшей HTML-страницы или, иначе, Web-страницы. Структурой и
форматированием HTML-документа управляют директивы языка HTML - теги (tag -
ярлык, признак). Все теги языка HTML выделяются символами-ограничителями (<
>), между которыми записывается идентификатор
(имя) тега и, возможно, параметры. Название тегов и их параметров можно
записывать на любом регистре. Большинство тегов записывается попарно, то есть
для определенного тега, называемого открывающим, в документе имеется
соответствующий закрывающий тег. По правилам HTML закрывающий тег выглядит так
же, как открывающий, но с символом / (прямой слэш)
перед именем тега. Закрывающий тег не использует параметров. Теги, которые
нуждаются в завершающих тегах, иногда называют тегами-контейнерами; все, что
находится между открывающим и закрывающим тегом, называется содержимым
тега.Иногда закрывающий тег можно опускать. Однако, это делать не
рекомендуется.
В случае нашего простейшего примера документ начинается с открывающего тега <html> и заканчивается закрывающим тегом </html>. Они очерчивают границы документа, т. е. вводят элемент с именем html, представляющий HTML-документ в целом.
Внутри документа, ограниченного парой <html> </html>, первым элементом является head - "заголовок документа", ограниченный тегами <head> и </head>. В этой части документа (в элементе head) может содержаться множество важной информации, но, во-первых, содержимое элемента head не отображается в окне браузера, а во-вторых, эта информация не обязательная. Единственным исключением является обязательный элемент title. Текст, содержащийся между тегами <title>...</title>, отображается в заголовке окна браузера как название документа (в нашем случае
prim1)
(рис. 1).
За заголовком следует элемент body - "тело" документа, ограниченное тегами <body> .</body>. Здесь и располагается содержимое страницы, которое видит пользователь в рабочем поле окна браузера.
Что касается имен тегов и атрибутов (о них позже) языка HTML, то их можно записывать символами верхнего и нижнего регистров, т. е. как строчными, так и прописными буквами - браузер не делает различия между "большими" и "малыми" буквами. Об этой особенности принято говорить, что HTML является регистронечувствительным языком. Вы можете, например, написать <TITLE>, или <Title>, или <title>, или <tItLE>. Кроме того, для браузера не имеет значения расположение тегов на строках документа, важен только их порядок. К примеру, предыдущая запись эквивалентна следующей:
<html><head><title>test</title></head><body></body></html>.
Задание.
Наберите в текстовом редакторе
"Блокнот" код этой странички. Сохраните получившийся файл под именем prim1.html, а затем
откройте его в броузере.
Примечание. Для обеспечения преемственности при переходе от HTML к более современным яыкам разметки (XHTML, XML) рекомендуется для записи тегов и их атрибутов использовать строчные буквы.
Перейдем теперь к содержимому элемента body. Рассмотрим следующий пример:
<html>
<head>
<title>prim2</title>
</head>
<body>
<p>первый абзац текста первый абзац текста</p>
<p>второй абзац текста</p>
</body>
</html>
В этом примере появился тег <p> - тег разбиения текста на абзацы. Если не заканчивать абзац закрывающим тегом </p>, то ошибки не возникнет, но общие правила требуют закрывающего тега.
Задание.Наберите этот пример в текстовом редакторе и сохранить в файле с именем
prim2.html. Откройте этот файл в браузере, окно браузера будет иметь вид, показанный на рис.2. Здесь в заголовке окна браузера "prim2" - содержимое элемента title и фирменное название браузера "Microsoft Internet Explorer"; в адресной строке - имя файла; в рабочем поле окна браузера - текст абзацев из элемента body.
Рис.2
Далее научимся помещать на Web-страницу гиперссылки. Рассмотрим код страницы, содержащей гиперссылки. Результат вы можете увидеть на рис. 3.
<html>
<head>
<title>prim3</title>
</head>
<body>
<p> <a href="http://www.rambler.ru/"> Поисковый сервер Рамблер - ссылка на ресурс Интернет </a> </p>
<p> <a href="prim2.html"> Пример с абзацами - ссылка на локальный документ </a> </p>
</body>
</html>
Рис.3
Гиперссылка в HTML-документе начинается тегом <a>. Здесь мы впервые встречаем не просто тег, а тег с атрибутом. У тега <a> могут быть разные атрибуты, но главный атрибут - href . Он указывает адрес, по которому выполняется переход при активации ссылки.
В приведенном примере значение атрибута href есть полный адрес интернет-ресурса:
<a href="http://www.rambler.ru/">. Далее следует название ресурса, которое будет отображаться на Web-странице и закрывающий тэг </a>.
Гиперссылка может указывать не на ресурс в Интернет, а на документ на том же Web-сервере:
<a href="prim2.html"> Пример с абзацами - ссылка на локальный документ </a>
Здесь гиперссылка "Пример с абзацами - ссылка на локальный документ" указывает на документ prim2.html, находящийся в той же папке, что и даный файл (размещение папки явно не указано). Такие гиперссылки называются относительными, так как указывают не абсолютный адрес ресурса, а относительный, расположенный в пределах данного Web-сайта.
Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем
prim3.html.
Откройте этот файл в браузере.
Примечание.Гиперссылка также может указывать на другое место в том же документе. То место, на которое нужно сослаться, необходимо пометить с помощью элемента а с атрибутом name: <a name="x1">, где x1 можно заменить на любое удобное обозначение. А ссылка на метку х1 записывается так:
<a href="#x1">текст ссылки</a>. Гиперссылка может указывать не только на HTML-документ, но и на любой ресурс и, например, на адрес электронной почты.
Наша Web-страничка будет выглядеть уныло, если не украсить её графическими изображениями.Пусть в том же каталоге, где размещен HTML-документ, находится файл с изображением, имеющий имя class.jpg. Включение его в документ будет выглядеть так:
<html>
<head>
<title>prim4</title>
</head>
<img src="pic.jpg" width="200" height="99" alt="Фото">
</body>
</html>
Итак, чтобы поместить рисунок на Web-страницу нужно воспользоваться тэгом <img>. Этот тэг имеет несколько атрибутов. Атрибут src указывает адрес расположения графического файла. В нашем случае файл находится в той же папке, что и наш HTML-файл, поэтому достаточно записать только имя файла. В других случаях необходимо указывать путь к файлу. Атрибуты width и height указывают ширину и высоту рисунка в пикселях. Атрибут alt позволяет показывать текст вместо рисунка, если его не позволяет показать броузер. Таким образом мы получим Web-страничку, изображенную на рис. 4.
Рис. 4
Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем prim4.html. Скопируйте файл pic.jpg в папку с созданным HTML-файлом.
Откройте этот файл в браузере.
Иногда необходимо поместить в документ таблицу. Рассмотрим код web-странички, содержащей таблицу.
<html>
<table width="100%" border="1">
<tr>
<td>(ячейка 1-го столбца 1-й строки)</td>
<td>(ячейка 2-го столбца 1-й строки)</td>
<td>(ячейка 3-го столбца 1-й строки)</td>
</tr>
<tr>
<td>(ячейка 1-го столбца 2-й строки)</td>
<td>(ячейка 2-го столбца 2-й строки)</td>
<td>(ячейка 3-го столбца 2-й строки)</td>
</tr>
</table>
</html>
Получившуюся Web-страничку вы можете увидеть на рис.5
Рис.5
Разберем её код. Для вставки таблицы служит тэг <table>. Атрибут width указывает ширину таблицы, border - толщину границы. Тэг <tr> задаёт строку таблицы, а тэг <td> формирует столбцы.
Задание.
Создайте HTML-файл prim5.html, содержащий таблицу, используя рассмотренный код,
просмотрите полученный файл в броузере.
Примечание.Таблицы также могут использоваться для форматирования
содержимого Web-страницы.
Оформление документа
Рассмотрим, как можно оформить внешний вид документа, используя HTML-тэги. В HTML существует множество тегов и их атрибутов, позволяющих самым разнообразным способом оформлять внешний вид текста. Можно задать размер, начертание, цвет текста, его расположение. Рассмотрим HTML-код,
<html>
<head>
<title>prim6</title>
</head>
<body>
<p> <font face="Arial" size="3"> <i><b> Оформление текста 1</i></font> </p>
<p> <font color= "red"> Оформление текста 2 </b></font></p>
<p> <center> Оформление текста 3 </center></p>
</body>
</html>
В результате должна получиться Web-страница изображенная на рис.6. Для изменения параметров шрифта текста служит тэг <font>. Он имеет следующие атрибуты: face - определяет какой используется шрифт (в нашем примере Arial), size - размер, color - цвет.
Рис.6
Чтобы текст выводился курсивом нужно использовать тег <i>, для выделения текста жирным шрифтом следует употребить тэг <b>. Для выравнивания текста по центру нужно использовать тэг <center>.
Задание. Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем prim6.html.
Откройте этот файл в браузере. Попробуйте создать свой HTML-документ содержащий текст, оформите текст, который находится в нем.
Для выделения структурных частей текста (названия, раздела, главы, параграфа существуют специальные тэги. Можно обойтись и без них, задав размер шрифта в теге font, но в этом случае наш документ будет проблематично отыскать с помощью поисковых систем (в случае публикации документа в сети Интернет). Рассмотрим код HTML-документа, в котором используется выделение структурных частей текста (рис.7):
<html>
<head>
<title>prim6</title>
</head>
<body>
<h1> раздел I </h1>
<h2> глава 1 </h2>
<h3> параграф 1 </h3>
</body>
</html>
Рис.7
Допустим, что в исходном документе имеются разделы и соответствующие заголовки трех уровней: разделы, главы и параграфы. Таким образом, в нашем примере мы использовали такие конструкции:<h1> раздел I </h1>, <h2> глава 1 </h2>, <h3> параграф 1 </h3>.
Задание. Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем prim7.html.
Откройте этот файл в браузере. Попробуйте создать свой HTML-документ содержащий заголовки, оформите текст, который находится в нем.
Каскадные таблицы стилей (CSS)
Cascading Style Sheets (Каскадные таблицы стилей) - это язык, содержащий набор средств для описания внешнего вида отображения любых HTML-документов. С его помощью можно полностью управлять стилем и расположением каждого элемента Web-страницы, что проще и гораздо функциональнее использования обычного набора HTML-тегов.
Предположим, что текст нужно оформить с помощью CSS так же, как в примере, где HTML-код выглядит следующим образом:
<font face="Arial" size="3"> <i><b><font color= "#6600CC ">оформленный текст </font>
Определить стиль можно с помощью специального элемента style. Определение стиля для нашего примера выглядит следующим образом:
<style type="text/css">
<!--
.mystyle { font-family: Arial, Helvetica, sans-serif;
font-size: 12pt; font-style: italic;
font-weight: bold; color: #6600CC}
->
</style>
Начальный тег определения стиля содержит атрибут type="text/css", значение которого указывает браузеру, что текст элемента на языке CSS. Определение стиля помещается в скобки HTML-комментария: "<!- - (tm)- - >". В начале следует "селектор стиля" - идентификатор с точкой перед ним ".mystyle". В фигурных скобках перечисляются свойства данного стиля и их конкретные значения. Каждое свойство задается парой "имя:значение". До двоеточия - имя свойства, после двоеточия - его значение. Прокомментируем приведенный текст определения стиля.
.mystyle (селектор стиля)
font-family: Arial, Helvetica, sans-serif (семейство шрифтов; лучше указывать не один конкретный шрифт, который может отсутствовать на компьютере пользователя, а семейство, обладающее схожими свойствами).
font-size: 12pt (размер шрифта; в данном случае он указан в абсолютных единицах - пунктах, хотя есть и другие способы указания размера шрифта)
font-style: italic (стиль шрифта - курсив) font-weight: bold ("вес" шрифта - полужирный) color: #6600CC (цвет шрифта, заданный в системе RGB). Все приведенное описание стиля помещается в виде элемента style в заголовок <head> .</head> HTML-документа.
Теперь, если мы хотим применить этот стиль к определенной части текста, например, размещенной в элементе span, то создаем такой код:
<span class="mystyle">оформленный текст</span>
Здесь атрибут class вводит для элемента span так называемое "имя класса". В документе может быть много элементов, но стиль нашего примера будет "действовать" только на те из них, у которых имя класса совпадает с идентификатором mystyle, входящим в селектор стиля.
Полный HTML-код будет выглядеть так:
<html>
<head>
<title>prim8</title>
<style type="text/css">
<!--
.mystyle {font-family: Arial, Helvetica, sans-serif;
font-size: 12pt; font-style: italic;
font-weight: bold; color: #6600CC}
-->
</style>
</head>
<body>
<span class="mystyle">оформленный текст1</span><br>
<span class="mystyle">оформленный текст2</span>
</body>
</html>
В данном случае мы получим следующую Web-страничку (рис.8):
Рис.8
Таким образом, использование CSS позволяет определить все необходимые стили в отдельном элементе <style type="text/css">, а затем применять их к нужным элементам документа простым указанием селектора стиля в качестве значения атрибута class: <span class="mystyle">оформленный текст</span>. В данном примере мы видим преимущества использования листов стилей перед классическими средствами HTML для оформления текстов. Применение таблиц стилей удобно в тех случаях, когда требуется одинаково оформлять много элементов одной HTML-страницы или всех многочисленных страниц одного Web-сайта. В этом случае при необходимости изменить оформление документа достаточно лишь изменить необходимые свойства стиля в его определении. Тогда все элементы, связанные с этим стилем, автоматически изменятся.
Задание.
Задание.Наберите этот пример в текстовом редакторе
"Блокнот" и сохранить в файле с именем prim8.html.
Откройте этот файл в браузере. Попробуйте создать свой HTML-документ содержащий описания стилей, оформите содержимое вашего документа.
Примечание. Определение стилей можно размещать не на каждой странице сайта. Применение CSS дает еще одну замечательную возможность - позволяет вводить одну таблицу стилей для всего сайта. Для этого можно создать отдельный файл с расширением .css со всеми описаниями стилей. Тогда на конкретной странице сайта можно лишь указать ссылку на этот файл, и все описанные в нем стили станут доступными для элементов страницы. Делается это следующим образом. В элементе <head> ...</head> HTML-документа помещается ссылка на файл стилей, например, на файл с именем main.css:
<link rel="stylesheet" type="text/css" href="main.css">
Сам файл стилей main.css содержит только набор определений стилей, например, его текст может быть таким:
Jinkl {font-family: Arial, Helvetica, sans-serif; font-size: x-small;
font-style: normal; line-height: normal; font-weight: bold;
font-variant: normal; text-transform: none;
color: #663300; text-decoration: none}
.normal {font-family: Arial, Helvetica, sans-serif; font-size: x-small;
font-style: normal; line-height: normal; font-weight: bolder;
font-variant: normal; text-transform: none;
color: #333333; text-decoration: none}.
Итоговое задание. Создайте HTML-документ в котором присутствовали бы все вышеперечисленные элементы HTML-документа.
Тест по основам
HTML
В начало
