Последнее обновление: 08.04.2016
Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать *.html
Создадим текстовый файл, назовем его index и изменим его расширение на .html .
Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:
Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration сообщает веб-браузеру тип документа. указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.
А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа.
Внутри элемента html мы можем разместить два других элемента: head и body . Элемент head содержит метаданные веб-страницы - заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы - стили, скрипты, если они использутся. Элемент body собственно определяет содержимое html-страницы.
Теперь изменим содержимое файла index.html следующим образом:
В элементе head определено два элемента:
элемент title представляет заголовок страницы
элемент meta определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку. В данном случае с помощью атрибута charset="utf-8" указываем кодировку utf-8.
В пределах элемента элемента body используется только один элемент - div , который оформляет блок. Содержимым этого блока является простая строка.
Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM :
После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена.
Сохраним и откроем файл index.html в браузере:
Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе title заголовок "Документ HTML5", то именно такое название будет иметь вкладка браузера.
Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.
А весь текст, определенный внутри элемента body мы увидим в основном поле браузера.
Думается, что вы хорошо знакомы с языком HTML, и вам известно, что такое теги, и какую роль они играют в HTML-документе. Если что-то не ясно, можно посмотреть . По отношению к тегу meta следует помнить следующее: во-первых, - все мета-теги пишутся в , во-вторых, - они должны располагаться после и в-третьих, - не парные элементы и их не нужно закрывать.
Теперь давайте подробнее взглянем на эти мета-теги. Следует заметить, что в этой статье мета-теги описываются в порядке уменьшения важности. Считается, что при создании сайтов последовательность расположения мета-тегов в коде HTML страницы не имеет никакого значение, однако даже если это и так, то расположив их в том же порядке, как они описываются в данной статье вы ничего не потеряете, а может быть и выиграете. Итак, приступим.
Description
Это очень важный мета-тег. То, что указано в атрибуте content будет показано на странице с поисковыми результатами многих поисковых систем. И поэтому если конечному пользователю не понравится описание, то он не заинтересуется вашим сайтом.
Keywords
ключевые слова и фразы" />
Важный мета-тег. Хотя в последнее время его значимость падает, некоторые поисковые системы до сих пор именно из данного тега извлекают информацию о вашем веб-сайте. Отбирать ключевые слова и фразы следует после проведения соответствующих исследований. Это могут быть поисковые проверки, специальные сервисы поисковых систем и получение ключевых слов из специальных списков, которые распространяются бесплатно и найти их будет совсем не трудно. При написании ключевых слов главное не перестараться, иначе, если повторов ключевых слов и фраз будет слишком много, поисковики сочтут это за поисковый спам и забанят ваш сайт. При составлении ключевых слов старайтесь не превышать планку в 500-800 символов.
Abstract
Бытует множество противоречивых мнений о важности этого мета-тега и целесообразности его использования. Как вариант, можно скопировать содержимое тега description, немного изменив его.
Robots
Весьма важный мета-тег, который информирует робота поисковых систем о том, как следует поступать с данной веб-страницей и со всеми страницами, на которые с нее есть ссылки. В качестве значения в атрибуте content используются следующие директивы:
- index – индексировать данную веб-страницу,
- follow – индексировать все веб-страницы, на которые на данной странице есть ссылки,
- all – две верхние директивы одновременно,
- noindex – не индексировать веб-страницу,
- nofollow – не переходить по ссылкам с данной веб-страницы.
При этом можно указывать одновременно две директивы, разделяя их запятой (например, noindex,nofollow).
Subject
Этот мета-тег предназначен для того, чтобы задавать тип данных, представленных на этой веб-странице. По идее, основываясь на данном описании, робот поисковиков должен поместить вашу веб-страницу в ту или иную категорию. К большому сожалению, каждый поисковик имеет собственно разработанную систему классификации веб-страниц.
Page-type
Назначение этого мета-тега полностью совпадает с назначением предыдущего мета-тега, поэтому будет разумно ввести здесь те же термины.
Title и Page-topic
Оба эти мета-тега аналогичны, поэтому и описываются в одном разделе. Здесь все вполне ясно из синтаксиса этих мета-тегов. Можно рекомендовать скопировать текст из и поместить его в атрибуте content.
Revisit
Если информация на вашем сайте часто обновляется, то этот мета-тег очень важен для вас. Он информирует роботов поисковых систем, через сколько дней им следует переиндексировать данную веб-страницу. Существует альтернативный мета-тег – revisit-after, который полностью идентичен данному мета-тегу, однако используется реже.
Пожалуй, это все основные мета-теги, позволяющие описать веб-страницу. Хотя существует множество других атрибутов и значений для тега meta, но их предназначение не относится к данной статье.
Лабораторная работа №1
«Создание простейшего HTML-документа. Форматирование текста»
Цель работы
Изучить структуру html-документа, основные тэги форматирования текста и использовать их при создании веб-страницы.
Основы создания Web-страниц средствами
Языка разметки гипертекста HTML
Создание простого документа
Основой разработки веб-страниц является язык HTML (HyperText Markup Language – язык разметки гипертекстов).
Основной структурной единицей языка HTML является тег (от англ. Tag - дескриптор, маркер ). Тег всегда заключен между скобками < > и имеет следующий вид:
<ТЕГ атрибут 1=ЗНАЧЕНИЕ... атрибут N=ЗНАЧЕНИЕ>
Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий .
Открывающий тег служит для указания программе-браузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения свойств, заданных в открывающем теге.
Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер.
Документ HTML начинается открывающим тегом и заканчивается закрывающим тегом . Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок, заключенный в контейнер
... и тело документа в контейнере ... (содержание страницы). В разделе описания заголовка можно указать заглавие документа, для этого используется тэгТаким образом, структура простого HTML документа выглядит примерно так:
{начало страницы}
{описание страницы, заголовка}{закрытый тэг описания заголовка}
{содержание страницы}текст
{закрытый тэг описания страницы}
{конец страницы}
Форматирование текста
- тег, определяющий границы тела документа.Атрибуты:
BGCOLOR – определяет цвет фона документа. По умолчанию «White» (#FFFFFF).
TEXT – задает цвет текста для всей страницы. Цвет указывается в формате RGB или константами red, green, blue и т.п. По умолчанию «black» (#000000).
В таблице 1 приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.
Таблица 1
| Название | Код | Название | Код |
| Aqua | #00FFFF | navy | #000080 |
| Black | #000000 | olive | #808000 |
| Blue | #0000FF | purple | #800080 |
| Fuchsia | #FF00FF | red | #FF0000 |
| Gray | #808080 | silver | #C0C0C0 |
| Green | #008000 | teal | #008080 |
| Lime | #00FF00 | white | #FFFFFF |
| Maroon | #800000 | yellow | #FFFF00 |
Атрибуты:
ALIGN – выравнивание. Возможные значения: RIGHT-выравнивание текста по правому краю; CENTER - по центру; LEFT - по левому краю; JUSTIFY – по ширине.
<Н1> …<Н6> - заголовки разного уровня (от первого до шестого).
Заголовок второго уровня с выравниванием по центру.
<НR> - горизонтальная линия
Атрибуты:
ALIGN – выравнивание.
WIDTH – длина линии в процентах от окна браузера или пикселях
SIZE – ширина линии в процентах от окна браузера или пикселях
COLOR – цвет линии.
Дополнительные возможности по форматированию:
Полужирный текст;
- курсивный текст;
- эффект подчёркивания;
- эффект зачеркивания.
- используется для указания начертания шрифта в документе.
Атрибуты:
SIZE – размер шрифта.
COLOR – цвет шрифта.
FACE – гарнитура шрифта.
<Р> Красная строка набрана шрифтом ARIAL 4 размера
Создание списков
В HTML-документе существует четыре основных вида списков:
- нумерованный
- маркированный
- вложенные списки
- список определений
Фрагмент текста, представляющий список, заключается в тэги:
Упорядоченный список (ordered list);
Неупорядоченный список (unordered list);
< LI>…. вложенные списки;
- ….
Список определений служит для создание списков типа «термин» - «описание». Каждый термин начинается тэгом
Каждый элемент списка заключается в тэги
Тэг
- может иметь параметры:
- может иметь параметры:
или
TYPE Вид маркера (см.
- ) или счетчика (см.OL)
VALUE=n Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.
Создание документа HTML в текстовом редакторе Блокнот
Для того чтобы создать документ HTML в текстовом редакторе Блокнот необходимо выполнить следующие действия:
1. Запустить текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Создать типовую структуру HTML - документа и ввести текст.
Рис. 1. Создание HTML - документа в текстовом редакторе Блокнот
4. Закрыть блокнот. Найти файл first.html и открыть его с помощью интернет-браузера.
Рис. 2. Иллюстрация документа в интернет-браузере.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
Табл. 4.1. Допустимые DTD
DOCTYPE Описание HTML 4.01 Строгий синтаксис HTML. Переходный синтаксис HTML. В HTML-документе применяются фреймы. HTML 5 В этой версии HTML только один доктайп. XHTML 1.0 Строгий синтаксис XHTML. Переходный синтаксис XHTML. Документ написан на XHTML и содержит фреймы. XHTML 1.1 Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.</p> <p>В дальнейшем будем применять преимущественно строгий <!DOCTYPE> , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.</p> <p>Часто можно встретить код HTML вообще без использования <!DOCTYPE> , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.</p><p>Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head> ) и тело документа (<body> ).</p><p>Заголовок документа, как еще называют блок <head> , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.</p><p> <title>Пример веб-страницы Тег
определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy></p> <p>Рис. 4.2. Вид заголовка в браузере</p> <p>Тег <title> является обязательным и должен непременно присутствовать в коде документа.</p><p>Обязательно следует добавлять закрывающий тег </head> , чтобы показать, что блок заголовка документа завершен.</p><p>Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.</p><p> <h1>Заголовок</h1> </p><p>HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.</p><p> <!-- Комментарий --> </p><p>Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.</p> <p>Введение в HTML </p> <h3>В этой главе:</h3> <i> </i><p>Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык <b>HTML </b>.</p> <h2>Как браузер получает веб-страницы?</h2> <p>Для <a href="/chto-takoe-mediafaily-v-telefone-chto-eto-za-faily-dthumb-i-nomedia-na.html">общего понимания</a> давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер - это <a href="/kak-podklyuchit-obychnyi-kompyuter-pk-k-wi-fi-seti-podklyuchaem.html">обычный компьютер</a> с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.</p> <p><img src='https://i1.wp.com/web.ryusupov.com/images/html/web-server.png' width="100%" loading=lazy></p> <p>Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для перехода на <a href="/kak-uiti-iz-vkontakte-navsegda-kak-udalit-stranicu-vo-vkontakte-razlichnymi.html">различные страницы</a>. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.</p> <p>Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.</p> <p>Примечание: Браузер (от англ. <b><a href="/kakie-brauzery-dlya-windows-podderzhivayut-flash-kak-ustanovit-flesh-pleer-vo.html">Web browser</a> </b> - Веб-обозреватель) - <a href="/programmnoe-obespechenie-otnositsya-k-chemu-chto-takoe-programmnoe-obespechenie.html">программное обеспечение</a>, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее <a href="/populyarnye-brauzery-kakoi-brauzer-ustanovit-na-staryi-pk.html">популярным браузерам</a> относятся: <b><a href="/kak-izmenit-domashnyuyu-stranicu-v-internet-explorer-kak-v-internet-explorer-sdelat.html">Internet Explorer</a> </b>, <b><a href="/kak-posmotret-istoriyu-v-mozilla-firefox-vosstanovlenie-istorii-v-mozilla-firefox.html">Mozilla Firefox</a> </b>, <b>Google Chrome </b>, <b>Safari </b>, <b>Opera </b>.</p> <p><b>Обратите внимание: </b> во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.</p> <p>Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.</p> <h2>Зачем нужен HTML-редактор?</h2> <p>Редактировать HTML-документы можно и в обычном <a href="/skachat-programmu-dlya-redaktirovaniya-tekstovyh-dokumentov-luchshie-tekstovye.html">текстовом документе</a>, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор - это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.</p> <p>Существует множество платных и <a href="/sreda-programmirovaniya-html-i-css-luchshie-besplatnye-redaktory.html">бесплатных HTML-редакторов</a>, к наиболее часто используемым платным относятся <b>Dreamweaver </b>, <b><a href="/osnovnye-razdely-programmy-v-yazyke-s-vnutrennyaya-struktura-programmy.html">Visual Studio</a> </b> и <b>PHPStorm </b>. В качестве <a href="/graficheskie-redaktory-dlya-windows-7-pyat-besplatnyh-graficheskih-redaktorov-fotografii-besplatnye-r.html">бесплатных редакторов</a> можно использовать <b>notepad++ </b> и <b>geany </b>.</p> <h2>Что из себя представляет HTML-документ?</h2> <p><b>HTML-документ </b> - это обычный текстовой файл c расширением <b>.html </b>, который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.</p> <p><b>Windows: </b><br> Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:</p> <ol><li>В <a href="/kak-voiti-v-sistemnyi-reestr-windows-10-kak-zapustit-redaktor-reestra-dopolnitelnymi-sposobami-k.html">открытом редакторе</a> (или в обычном текстовом документе) нажимаем <b><i>файл </i> </b> → выбираем <b><i>сохранить как </i> </b> → внизу в текстовом поле <b><i>имя файла: </i> </b> напишем к примеру так: mypage.html → жмем <b><i>сохранить </i> </b>. Всё, HTML-документ создан.</li> <li>Кликаем <a href="/pravaya-knopka-myshi-po-angliiskii-zachem-nuzhna-pravaya-knopka.html">правой кнопкой</a> мыши (<b>ПКМ </b>) на <a href="/fail-povrezhden-vord-chto-delat-vosstanovlenie-povrezhdennyh.html">текстовом файле</a> → выбираем <b><i>переименовать </i> </b> и меняем расширение с <b><i>.txt </i> </b> на <b><i>.html </i> </b>. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем <b><i>Пуск </i> </b> → открываем <b><i>Панель управления </i> </b> → выбираем <b><i>Параметры папок </i> </b> → вкладка <b><i>Вид </i> </b> → прокручиваем в самый низ и убираем галочку на <b><i>Скрывать расширения для зарегистрированных типов файлов </i> </b>.</li> </ol><p>Открыть файл, сохраненный с расширением.html, для просмотра в браузере можно двумя способами:</p> <ol><li>Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.</li> <li>Кликнуть по нему ПКМ → наводим курсор на <b><i>открыть с помощью... </i> </b> → выбираем нужный вам браузер.</li> </ol><p>При получении HTML-документа браузер будет отображать его в виде веб-страницы (<b>веб-страницей </b> является то, что отображается в окне браузера), при этом вы не увидите в окне своего браузера отображения написанных вами тегов, потому что они будут интерпретированы для отображения содержимого страницы в нужном вам виде.</p><p> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Заголовок Мой первый заголовок
Мой первый абзац
TYPE= определяет вид нумерации, START= задаёт начальное значение первого элемента списка (независимо от типа указывается цифрой).
TYPE=A – маркеры в виде прописных латинских букв;
TYPE=a – маркеры в виде строчных латинских букв;
TYPE=I – маркеры в виде больших римских цифр;
TYPE=i – маркеры в виде маленьких римских цифр;
TYPE=1 – маркеры в виде арабских цифр (по умолчанию).
Тэг
- может иметь параметр:
Тип тэга
- определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).
Тэг