Добавлен: 25.04.2023
Просмотров: 280
Скачиваний: 1
Разметка в версии языка HTML5 описывается так:
<!DOCTYPE html>
Когда браузер получит HTML- документ, он интерпретирует данную строку, как необходимость применить при обработке документа нотации HTML5, что им и будет сделано.
Раздел, помечаемый тегом <html> … </html>
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа (Document Type Definition, DTD)/ Закрывающий тег </html> должен всегда стоять в документе последним.
Раздел, помечаемый тегом <head> … </head>
Тег <head> является контейнером и предназначен для хранения других элементов, цель которых помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы. При этом, содержимое, размеченное тегом <title> … </title> не отображает на странице документа, его видно только на плашке страницы в окне браузера.
Раздел, помечаемый тегом <body> … </body>
Тег <body> описывает контейнер, предназначенный для хранения содержания веб-страницы, контента, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д. Тело документа должно находиться между тэгами <body> … </body>.
Давайте, посмотрим на пример простой HTML-страницы, сформированной по указанным выше правилам формирования структуры документа и результат ее интерпретации в браузере:
Рисунок 6Код HTML-документа.
Рисунок 7Интерпретация кода HTML-страницы браузером.
2.3. Форматирование содержимого HTML-страницы
В предыдущем примере (Рисунок 6Код HTML-документа.) мы показали, как просто создаются HTML-документы. Стоит отметить, что результат интерпретации данного кода браузером будет довольно скучным. Если мы представим, что в качестве тела документа нам нужно вывести текст какой-либо статьи, ее текст будет выведен строка за строкой, без какого-либо форматирования:
Читать такие страницы не просто скучно, это неудобно. Информация не структурирована, не разделена на абзацы, текст не имеет отступов и заголовков. К счастью, средства языка HTML предусмотрели для нас насколько большие возможности по форматированию текста и применения к его оформлению различных стилистических приемов, что для их описания потребуется не одна книга, и, к сожалению, они не укладываются в рамки курсовой работы. Поэтому, давайте рассмотрим основные из них.
Первое, что необходимо усвоить, что все теги, помогающие нам в оформлении документа можно разделить на две большие группы: строчные и блочные элементы. Это важно, т.к. влияет на расположение блоков текста на отображаемой странице.
Строчные элементы
Теги, относящие к строчным, интерпретируются браузером как строки. Т.е., блоки текста, последовательно размеченные строчными тегами, будут отображаться на странице друг за другом.
Блочные элементы
Блочные элементы публикуются на странице один под одним.
Добавим дополнительную разметку в пример, описанный нами выше и посмотрим на результат (Рисунок 9). Мы добавили строчные теги <a>, используемые для публикации на странице ссылок на какие-либо объекты, и разделили текст на абзацы, используя тег <p>. Как можно видеть, браузер интерпретировал код образом, описанным нами выше, и соответствующим образом выполнил форматирование элементов.
Рисунок 8Добавление в код страницы блочных и строчных тегов.
Рисунок 9Интерпретация кода браузером.
2.4. Теги разметки текста в HTML-документе
В данном разделе мы сосредоточимся на тегах, позволяющих нам форматировать страницы, чтобы сделать их структурированными и удобочитаемыми для пользователей. Рамками данной курсовой работы мы не ставим задачу изучить все возможные теги и способы форматирования текста, т.к. их очень много. Мы рассмотрим основные теги, наиболее часто используемы при верстке страниц: изображения, ссылки, заголовки, списки, абзацы, цитирование, адресная справка, теги центрирования. Такой набор тегов достаточен для приведения формата страниц HTML-документа к привычному нам, по реальному миру, книжному формату восприятия текста, и позволит представить HTML-страницу пользователям в привычном для них виде.
Теги заголовков. HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство:
Рисунок 10Синтаксис тегов заголовков.
Рисунок 11Теги заголовков в HTML-документе.
Тэг абзаца. Для обозначения абзаца в HTML используется блочный тег <p> … </p>. Браузер разделяет абзацы только при наличии тэга <p>. Если вы не разделите абзацы тэгом <p>, ваш документ будет выглядеть как один большой абзац.
Дополнительные параметры тэга <p>:
<p align=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.
Тэг добавления изображений <img>
Одиночный тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src (source, в переводе с английского - источник). Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Стандартные средства языка позволяют, через задание дополнительных атрибутов, установить размеры изображения, для этого используются атрибуты width="х" и height="у", где x, y – значения в пикселах для рисунка. Атрибут alt=”текст” позволяет задать текст, описывающей, что отображается на картинке. Текст будет виден только тогда, когда браузеру не удалось загрузить изображение из атрибута src, что позволит пользователю понять, что же должно было быть изображено в данном месте страницы. Атрибут align определяет, как рисунок будет выравниваться по краю и способ обтекания текстом:
|
Значение |
Описание |
Пример |
|
bottom |
Выравнивание нижней границы изображения по окружающему тексту.. |
Lorem ipsum dolor sit amet, consectetuer |
|
left |
Выравнивает изображение по левому краю окна. |
|
|
middle |
Выравнивание середины изображения по базовой линии текущей строки. |
Lorem ipsum dolor sit amet, |
|
right |
Выравнивает изображение по правому краю окна. |
|
|
top |
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
Lorem ipsum dolor sit amet, |
adipiscing elit...В общем виде синтаксис тега <img> выглядим следующим образом:
<img src="URL" width="x" height="y" alt="Text" align=top|middle|bottom|texttop>
Давайте посмотрим на пример использования тега <img> при верстке страницы. Добавим в наш пример HTML-документа, приводимый выше, логотоип учебной организации:
Рисунок 12Использование тега <img> при верстке страницы.
Рисунок 13Результат отображения страницы в браузере.
Центрирование элементов документа. Вы можете центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <center>. Все элементы между тэгами <center> … </center> будут находиться в центре окна.
Дополнительные теги, часто применяющиеся при разметке страниц:
Тег <address> … </address> предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов.
По умолчанию текст внутри контейнера <address> отображается курсивным начертанием. Если эта особенность не требуется, используйте стили для изменения начертания шрифта.
Тег <br> извещает браузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где браузер должен отображать их одну под другой.
<br clear=left|right|all> - данный параметр позволяет не просто выполнить перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <br> для смещения текста ниже рисунка:
Тег <nobr> … </nobr> позволяет исключить автоматический перенос строки браузером. В этом случае браузер не будет переносить строку даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно.
Тег <blockquote> … </blockquote> предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный этим тэгом, отступает от левого края документа на 8 пробелов.
Тег <b> … </b> выделяет помеченный им текст жирным шрифтом.
Тег <i> … </i> выделяет помеченный им текст наклонным шрифтом.
Рисунок 14Разметка с применением различных тегов
Рисунок 15Результат верстки, отображаемый браузером.
Тег ссылок <a> … </a>
Гипертекстовые ссылки являются ключевым компонентом, делающим работу с сайтами привлекательной для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки) мы делаем набор документов связанным и структурированием, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.
Синтаксис для указания ссылки:
<a href=”URL” [name = “anchor”]> Текст наименования ссылки </a>
Можно использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. В первом случае в качестве URL указывается атрибут #anchor (см. описание ниже), во втором указывается ссылка на другую страницу сайта.
#anchor (якорь). Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.