DVKuklin.ru

Учебник по программированию.

Создание сайтов. Первые шаги.

 

 

Учебник по программированию. Первые шаги. Язык программирования PascalABC.NET.
Предыдущий параграф Назад в содержание Следующий параграф

§2. Что такое html.
Тэги. Структура html документа. Атрибуты.
Комментарии. Исходный код интернет страницы.

Что такое html.

Язык html – язык, который служит для создания интернет страниц. Текстовый файл, написанный на этом языке и имеющий расширение html, далее будем называть html документом.

Сочетание букв html является аббревиатурой от Hyper Text Markup Language. Практически во всей литературе это переводится как язык разметки документов.

Что значит разметка документа? Вы наверняка «сидели» в Интернете и просматривали множество сайтов. Поэтому вы должны хорошо представлять, как может выглядеть обычная интернет страница. Как правило, в ней могут содержаться несколько картинок, текст, навигация или какие-либо другие элементы. Каждый элемент имеет своё собственное место на странице. При изменении масштаба страницы или при прокручивании страницы вверх и вниз это место не меняется относительно других элементов. Как раз с помощью языка html и закладывается это расположение. Т.е. с его помощью мы размечаем документ на области и в каждую область помещаем свой элемент.

Здесь хочется сделать следующее сравнение: наверняка вы создавали документы в программе Microsoft Word и размещали в них текст, таблицы, картинки, списки и другие элементы. Сохраняется такой документ в файл с расширением docx. Документы docx и html во многом схожи друг с другом. Отличиями является то, что в документе docx мы размещаем элементы на виртуальном листе бумаги, что бы его потом распечатать, а в документе html мы размещаем элементы на мониторе компьютера. Так же в отличии от html документа документ docx не является текстовым, при этом редактирование и сохранение его осуществляется с помощью программы Microsoft Word. Редактирование html документа можно производить в любом текстовом редакторе.

Ещё одно важное отличие  это то, что лист бумаги, хоть он и виртуальный не меняет своих пропорций, соответственно и элементы на нём относительно друг друга не смещаются. А вот мониторы у каждого пользователя разные, соответственно и пропорции у них тоже разные. Для того, что бы элементы корректно отображались один относительно другого и существует язык разметки документа html.

В подтверждение вышесказанному предлагаю провести следующий опыт: в предыдущем параграфе вам необходимо было подготовить какой-либо текст. Сейчас откройте его с помощью браузера и с помощью программы Microsoft Word. Затем попробуйте изменять размеры и пропорции окна программы и понаблюдайте за тем, как меняется положение слов текста относительно друг друга.

Если взять за основу текст из данного параграфа, то получится следующее:

Документ docx в нормальном окне программы.
Документ docx в уменьшенном окне программы.
Документ html в нормальном окне браузера.
Документ html в уменьшенном окне браузера.

Как видно из рисунков в случае с docx вид текста не меняется, при этом часть его стала не видна. В случае с html при изменении пропорций окна браузера слова перескочили из одной строки в другую. При этом весь текст по ширине остался видимым. Т.е. браузер автоматически сделал расположение элементов корректным при изменении размеров окна.

Как вы могли заметить, в Microsoft Word в тексте есть заголовок, который выделен жирным шрифтом и выровнен по центру. Есть название параграфа, тоже выделено жирным шрифтом. Так же в Microsoft Word каждый элемент начинается с новой строки. В случае с html, слова идут один за другим сплошным текстом. Это потому, что на самом деле этот документ ещё не размечен.

Тэги.

Разметка документа производится с помощью тэгов. Тэг – слово, заключённое в треугольные скобки «< >». Тэги бывают открывающие и закрывающие. Закрывающий тэг помимо скобок должен иметь ещё косую черту «/». Открывающий и закрывающий теги используются вместе и имеют одно и то же название. Разница в том, что в закрывающем тэге есть косая черта.

Так же стоит отметить, что тэги браузерами не отображаются.

Каждая пара тегов (открывающий и закрывающий) как бы говорят браузеру – каким образом необходимо отобразить текст, который в них заключён. Например, существует тэг, который говорит браузеру, что текст необходимо выделить жирным шрифтом и сделать его больше основного текста, а так же весь последующий текст разместить не в следующей строчке, а чуть ниже. Другими словами этот тэг говорит браузеру выделить текст как заголовок. Он имеет название «h1». Для примера заключим в него заголовок из текста данного параграфа:

<h1>Глава I. Язык разметки документов HTML.</h1>

В результате добавления тэга h1 получим следующее:

Результат добавления тэга h1.

Теперь, что бы разместить заголовок по центру, воспользуемся тэгом с названием «center»:

<center><h1>Глава I. Язык разметки документов HTML.</h1></center>

Получим следующее:

Использование тэга center.

Проделайте то же самое со своим текстом и поэкспериментируйте, меняя размеры окна браузера. Вы увидите, что как бы вы ни меняли ширину окна, заголовок всегда будет посередине:

При изменении ширины окна, заголовок всегда по середине.

В этом и заключается предназначение языка html – корректно отображать содержимое документа, не зависимо от того, на каком мониторе и с каким разрешением он отображается.

Далее воспользуемся ещё двумя тегами: h2 – заголовок меньшего размера, чем заголовок h1; h3 – заголовок ещё меньшего размера:

<h2>§1. Что такое html. Структура html документа.</h2> <h3>Что такое html.</h3>

Результат:

Результат.

Подведём небольшой итог: язык html служит для разметки страницы. Сама разметка осуществляется с помощью тэгов. Тэги бывают открывающие и закрывающие, они имеют одно и то же название, только в закрывающем есть ещё косая черта. Текст, заключённый в открывающий и закрывающий тэги, отображается определённым образом, в зависимости от названия тэга.

Примечание: все тэги, которые будут изучены в данном учебнике, представлены в приложении А. В дальнейшем этим приложением вы можете пользоваться в качестве справочника.

Структура html документа.

Перед тем, как вести речь о структуре html документа, проделаем следующие действия:

1) Откройте браузер «Opera»;

2) Включите инструменты разработчика, для этого выберите пункт меню: «Опера -> Другие инструменты -> Включить инструменты разработчика». Далее на рисунке показано как это выглядит:

Включение инструментов разработчика.

После выбора данного пункта, меню изменится и будет выглядеть так:

Включение Меню после включения инструментов разработчика.

3) Далее откройте свой html документ и выберите пункт «Веб-инспектор». У вас помимо вашей страницы должно появиться ещё одно окошко, в котором находится «веб-инспектор»:

Веб-инспектор.

Веб-инспектор состоит из нескольких окошек. Сейчас нам понадобиться только самое верхнее. Если внимательно его изучить, то его содержимое очень похоже на наш html документ:

 Верхнее окно веб-инспектора.

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

Пара тэгов html содержат в себе сам документ.

Пара тэгов head (в переводе с английского «голова») содержат в себе информацию, которая не отображается на экране. О назначении этой информации речь пойдёт в одном из следующих параграфов. Всё что заключено в этот тэг называется заголовком.

Пара тэгов body (в переводе с английского «тело») содержит в себе всё, что отображается на экране. Всё что заключено в этот тэг называется телом документа.

Получается, что html документ находится в тэге html, и должен содержать в себе «заголовок» и «тело». Даже если вы сами не написали тэги html, head и body, то браузер сам для себя это сделает.

Для чего мы научились открывать веб-инспектор. Для того, что бы показать, что браузер дописывает структуру документа как ему нужно. А так же в нём вы будете находить ошибки. Для эксперимента специально сделайте ошибку в написании какого-либо тэга в своём html документе, после чего откройте его в браузере «Opera». Ваш текст отобразится некорректно, т.е. не так как вы задумали. Затем откройте веб-инспектор и внимательно изучите код в его окне. Думаю, что ошибка будет налицо.

Атрибуты.

Один и тот же тэг может отображать элемент по-разному. Для этого необходимо изменить его атрибут. Т.е. у каждого тэга есть набор атрибутов, меняя значения которых, мы можем добиться различного отображения элемента. Если не один из атрибутов не был изменён разработчиком, то их значения берутся по умолчанию.

Например, у тега h1 есть атрибут align. Он определяет способ выравнивания заголовка, по левому краю (значение left), по центру (center) или по правому краю (right).

Для того, что бы изменить значение атрибута необходимо после имени тэга написать через пробел имя атрибута, поставить знак равно и в кавычках указать необходимое значение:

<h1 align = "center">Глава I. Язык разметки документов HTML.</h1>

При использовании данного атрибута тэг center будет уже не нужен. Результат отображения заголовка будет тот же самый.

Примечание: кавычки должны быть именно такими, какие приведены в примере. Если вы используете другие кавычки, то браузер проигнорирует значение атрибута и выставит его по умолчанию. Здесь же стоит сказать, что любая ошибка в html документе не будет ни как отмечена браузером и будет просто проигнорирована.

Более подробно о всех существующих тэгах и их атрибутах речь пойдёт в последующих параграфах.

Комментарии.

Как и в любом другом языке программирования в языке html есть возможность оставлять в коде документа комментарии, которые не будут отображаться браузером. Оформляются они следующим образом:

<!--Это комментарий.-->

Всё что находится между < !-- и --> считается комментарием и не отображается браузером.

Исходный код интернет страницы.

У любой страницы, загруженной из интернета можно просмотреть html код. Делается это следующим образом: щёлкните правой кнопкой в любом месте браузера, всплывёт меню, в нём выберите пункт «Просмотреть исходный текст» (браузер Opera) или «Просмотреть HTML-код» (браузер Internet Explorer). В каком либо другом браузере название пункта может быть другим.


Задание.

Отредактируйте свой html документ. Вставьте тэги html, head и body. Так же выделите все заголовки и подзаголовки с помощью тэгов h1,h2,h3. На данном этапе сделать это можно в обычном текстовом редакторе.

Для выравнивания заголовка вместо тэга center используйте одноимённый атрибут center.

Вставьте в свой документ какой-нибудь комментарий.

После выделения заголовков, отделите абзацы один от другого. Для этого заключите каждый абзац в тэг с именем p. Далее пример использования этого тэга:

<p>Язык html – язык, который служит для создания интернет страниц. Текстовый файл написанный на этом языке и имеющий расширение html называется html документом.</P>

У вас должно получиться примерно следующее:

Пример отделения абзацев друг от друга с помощью тэга p.

Предыдущий параграф Назад в содержание Следующий параграф