Что такое HTML? Правила построения HTML-документов

Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.

Но сразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы (т.е. выпуски моей рассылки). И параллельно с этим практиковаться .

Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.

Сегодняшний вступительный урок, мы начнем с изучения структуры HTML документа и основных тегов HTML.

Поехали…

Каждый HTML документ начинается со строчки:

XHTML

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

Тег весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.

Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .

Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению , когда мы уже будем что-то уметь и сможем реально оценить его работу.

А пока движемся ниже по странице.

Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?

Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).

Наверное, не совсем понятно слово тег?

Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.

С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» ( ). И закрывающий (с косой чертой). Например, жирный текст . Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.

Что такое тег, надеюсь, понятно.

Предлагаю набрать что-нибудь своими руками.

Итак, приступим.

Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:

XHTML

Заголовок окна браузера

Заголовок окна браузера

Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.

Между тегами и располагается информация, не отображаемая на странице.

Например, тег , кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name="author" content="Ф.И.О.") , или слова для поисковой машины, тег заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).

Тег определяет текст в заголовке окна браузера. (Тег закрывающийся).

Также в теге могут располагаться скрипты javascript или vbscript, заключенные в теги …. .

И стили, заключенные в теги …. .

На этом с тегом пожалуй мы закончим.

Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тега есть набор параметров, которые мы рассмотрим, но использовать их не рекомендуется.

bgcolor — устанавливает цвет фона документа. ( )

background — указывает на url-адрес изображения — фона документа.

text — устанавливает цвет текста документа.

link — устанавливает цвет гиперссылок.

vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.

alink= — устанавливает цвет гиперссылок при нажатии.

bgproperties=fixed — фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.

Эти параметры можно объединять, например, на этой страничке используется:

XHTML

Давайте и наберем эту строку в нашем предыдущем примере.

XHTML

. Все, что заключено внутри этих тэгов, при просмотре страницы остается невидимым. ADDRESS является одним из важнейших элементов HTML. Он служит для идентификации автора документа и (по желанию) для указания адреса автора. Сюда же обычно помещаются сведения об авторских правах. Этот элемент располагается либо в начале, либо в самом конце документа. ADDRESS состоит из текста, помещенного между тэгами и . Текст, заключенный между этими тэгами обычно показывается в окне браузера курсивом. Структура HTML-документа

Основные понятия HTML

HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц.

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

HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только браузер на компьютере пользователя Интернета.

HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы - скрипты на языках Javascript и Visual Basic Script и программы - апплеты на языке Java .

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

Основными компонентами HTML являются:

HTML-код – уникальная последовательность символов, благодаря которой веб - страница приобретает свой неповторимый внешний вид. Код для веб - страницы – все равно, что ДНК для человека.

Код любой веб - страницы можно просмотреть тремя способами:

1) Вызвать контекстное меню браузера, и выбрать пункт о просмотре исходного кода.

2) Нажать сочетание клавиш Ctrl+U.

3) Открыть страницу с помощью блокнота.

Второй способ не работает в Internet Explorer. А последний способ доступен только в том случае, если страница сохранена на носителе вашего компьютера.

Элемент

Элемент – это основа HTML , звено для построения кода, его неделимая единица. Любой код, который вы напишете для создания веб - страницы, будет состоять из элементов.

Элемент HTML представляет собой символ или сочетание символов.

Примеры элементов: p, br, h1, img, meta, table, strong, address, basefont

Набор применяемых в HTML элементов строго ограничен. В своем коде вы можете использовать только их.

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

HTML-тэг записывается в угловых скобках (< >) и состоит из имени, за которым может следовать список атрибутов (для большинства тэгов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен. Записывать тэги можно в любом регистре – прописными или строчными буквами.

Тэги можно разделить на две большие группы.

Тэги одной группы, называемые контейнерами , воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный). Закрывающий тэг имеет то же название, что и открывающий, но перед его названием ставится косая черта (символ /). Между открывающим и закрывающим тэгами могут располагаться текст или другие тэги.

Автономные (одиночные) тэги не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тэг вызывает вставку рисунка из файла pict.gif, расположенного в той же папке, что и сам HTML-документ.

Тэги могут иметь уточняющие параметры – атрибуты. Атрибуты позволяют регулировать способ отображения информации, добавляемой с помощью тега. Атрибуты записываются внутри автономного тэга, а в контейнере только в открывающей части. В списке атрибуты отделяются друг от друга пробелами. Последовательность атрибутов не существенна. Значения атрибутов указываются после знака равенства в кавычках.

Примеры тэгов с атрибутами:

– задает светло-синий фон для документа,

текст – парный тэг, дает указание браузеру вывести заключенный в "контейнер" текст символами, увеличенными относительно базового размера (SIZE="+2") и красного цвета (COLOR="RED").

Структура HTML-документа

Документ HTML всегда начинается с тега и заканчивается закрывающим тегом .

Внутри документа выделяют два основных раздела: раздел заголовков и тело документа, идущие друг за другом.

Раздел заголовков содержит описание параметров, используемых при отображении документа, но не отображающихся непосредственно в окне обозревателя.

Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Тег заголовочной части документа должен быть использован сразу после тэга и более нигде в теле документа. Данный тег представляет собой общее описание документа. Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех браузерах заголовок документа виден в верхней части экрана (окна).

Заголовок окна Web - страницы устанавливается внутри контейнера .

Тег предназначен для хранения других элементов, цель которых - помочь браузеру в работе с данными. Также внутри контейнера находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое тега не отображается напрямую на веб-странице, за исключением тега устанавливающего заголовок окна Web - страницы.

Заголовок

Внутри контейнера допускается размещать следующие элементы: , , , , , , , .

Синтаксис:

Раздел тела документа содержит текст, предназначенный для отображения обозревателя, и тэги, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и т.д.

Элемент предназначен для хранения содержания Web - страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег также применяется для определения цветов ссылок и текста на Web - странице.

Часто тег используется для размещения обработчика событий, например, onload , которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги на Web - странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML - документа.

Простейший документ HTML, содержащий все теги, определяющие структуру, имеет вид:

Метатеги

Кроме элемента ... , заголовок может содержать мета – теги ... .

Метатеги - это теги языка HTML, содержащие различную служебную информацию. - тег используется в пределах заголовка страницы и предназначен для того, чтобы включить любую полезную информацию, не определенную другими HTML тегами. Такая информация может быть извлечена серверами/клиентами для использования в идентификации, индексации и создании каталогов страниц. Метатеги размещаются в заголовке страницы (между тегами и ) и имеют формат:

Условно метатеги можно разделить на три группы:

Открывающий тэг включает пары имя = значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

Тип и кодировка документа: META HTTP-EQUIV = "CONTENT-TYPE"

- кодировка Windows.

Основное назначение этого тега - сообщение браузеру об используемой кодировке. Использовать метатег content-type надо только с учетом некоторых нюансов.

Кодировка символов текста должна соответствовать кодировке, указанной в теге.

Сервер не должен менять кодировку текста при обработке запроса браузера.

Если сервер меняет кодировку текста, он должен скорректировать или удалить мета тег content-type.

Несоблюдение этих требований может привести к следующему: Web - сервер автоматически определит кодировку запроса клиента и отдаст страничку браузеру перекодированной. Браузер, в свою очередь, будет читать документ в соответствии с метатегом content-type. И если кодировки не совпадут, то прочитать документ можно будет только после ряда замысловатых манипуляций.

Некоторые из возможных типов кодировки:

· ISO-8859-1- Latin-1, для большинства западноевропейских языков;

· Windows-1251- Кириллица (Windows);

· KOI8-r- Кириллица (КОИ8-Р);

· cp866- Кириллица (DOS);

· Windows-1252- Западная Европа (Windows);

· Windows-1250- Центральная Европа (Windows).

Введение в HTML

В этой главе:

Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML .

Как браузер получает веб-страницы?

Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер - это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.

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

Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.

Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer , Mozilla Firefox , Google Chrome , Safari , Opera .

Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.

Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.

Зачем нужен HTML-редактор?

Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор - это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.

Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver , Visual Studio и PHPStorm . В качестве бесплатных редакторов можно использовать notepad++ и geany .

Что из себя представляет HTML-документ?

HTML-документ - это обычный текстовой файл c расширением .html , который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.

Windows:
Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:

В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмем сохранить . Всё, HTML-документ создан.

Кликаем правой кнопкой мыши (ПКМ ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск → открываем Панель управления → выбираем Параметры папок → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов .

Открыть файл, сохраненный с расширением.html, для просмотра в браузере можно двумя способами:

Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.

Кликнуть по нему ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам браузер.

При получении HTML-документа браузер будет отображать его в виде веб-страницы (веб-страницей является то, что отображается в окне браузера), при этом вы не увидите в окне своего браузера отображения написанных вами тегов, потому что они будут интерпретированы для отображения содержимого страницы в нужном вам виде.

Заголовок Мой первый заголовок

Мой первый абзац

Результат данного кода в окне браузера:

Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам редактор, если в списке нет нужного редактора, жмем Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++ ) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Что такое HTML?

HTML - это язык для описания структуры веб-страниц. Cтраницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.

• Аббревиатура HTML расшифровывается как H yper T ext M arkup L anguage (язык разметки гипертекста).
• Запомните, он не является языком программирования, это язык разметки.
• HTML использует теги разметки, чтобы описать структуру веб-страницы.

Что такое теги?

HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например ,

, и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: . Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например:
. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами:

Означает то же самое, что и

По стандарту HTML5 теги могут быть написаны в любом регистре.

С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов. Без использования тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах ниже.

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

Летнее меню Напитки в нашем кафе Мультифрукт - 100р.

Фруктовый напиток, содержащий апельсиновый и ананасовый соки.

Молочный коктель - 150р.

Сливочное мороженое, перемешанное с мякотью фруктов.

То же самое, но без использования тегов:

Напитки в нашем кафе Мультифрукт - 100р. Фруктовый напиток, содержащий апельсиновый и ананасовый соки. Молочный коктель - 150р. Сливочное мороженое, перемешанное с мякотью фруктов.

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

Структура HTML документа

Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной ).

Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

Как создать сайт в интернете

Браузер сам интерпретирует все эти теги и выводит их в одном для пользователя виде информации. Вы и сами замечали, что, когда заходите на сайт, на экране не отображаются эти элементы. Вы видите только красивую обертку, которую выводит браузер.

Визуальный пример html страницы Тег DOCTYPE

Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

Тег HTML

Является контейнером, который заключает в себя все содержимое веб-страницы. Открывающие и закрывающие элементы в документе не обязательны. Однако хороший стиль требует их использования.

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype . Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype ) должны быть вложены внутри этого контейнера.

Тег head

Тег head предназначен для хранения других элементов, цель которых помочь браузеру при работе с данными. Также внутри контейнера находятся мета теги, которые используются для хранения информации. Она предназначена для браузеров и поисковых систем.

Содержимое head не отображается напрямую на веб-странице, кроме тега title . Он отвечает за заголовок страницы.

В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы. Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем и различные скрипты.

Тег title

У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

Отнеситесь к этому серьезно!

В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

Профессиональное создание сайта в интернете с примерами

Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.

Тег meta

Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

Профессиональное создание сайта в интернете с примерами

Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.

Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры ).

Тег body

Чуть ниже идет тег body. Это основное тело документа. Внутри него находится тот контент, который виден пользователю. Это может быть текст, картинки, ссылки, видео и так далее.

Обратите внимание, что body всегда идет ниже тега head . То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h1. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

Синтаксис html

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

Профессиональное создание сайта в интернете с примерами

Здесь размещается содержание документа, которое видно всем пользователям.

Браузеру будет все равно.

Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

Название документа Название материала

Основной текст

То есть тег head должен идти отступом в одну табуляцию относительно тега html . Body идет на уровне с head поскольку он тоже вложен в контейнер html .

В общем, для быстрой и удобной работы с исходным кодом обязательно соблюдайте отступы по уровню вложенности элементов.

Исключение лишь могут составлять head и body . Они используются всего лишь один раз на странице. Поэтому чтобы не уходить далеко вправо при большой вложенности, эти элементы можно делать без отступов.

Название документа

Основной текст

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

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

Если тег открывается, то он должен быть закрыт. Если он пустой и без зарывающей части, то в такой тег ничего вложить нельзя.

Важно четко соблюдать порядок!

Если в какой-то тег вкладывается другой, то сначала идет открывающая часть одного тега. Затем открывающая часть другого и так далее. Только потом их нужно закрывать. Но делать это нужно уже в обратном порядке. То есть сначала закрываем второй тег и только в конце доходим до первого.

Правильный пример:

Здесь размещается содержание документа, которое видно всем пользователям.

Неправильный пример:

Здесь размещается содержание документа, которое видно всем пользователям.

Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый. Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

Для наибольшей удобности дополнительно можно использовать html комментарии в коде. Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.

Сам комментарий может быть, как однострочным, так и многострочным.

Название документа

Основной текст

Прописывается он между конструкциями .

Как создать файл html

Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:

• Brackets
• Блокнот
• Notepad++
• Sublime Text
• Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.

Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас ), который мы выше разбирали. Он должен всегда присутствовать.

Профессиональное создание сайта в интернете с примерами Как создать сайт в интернете

Здесь размещается содержание документа, которое видно всем пользователям.

Текст можете изменить под себя. В общем, это будет самая простая html страница.

HTML кодировка

При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head .

Вообще, этот meta элемент многогранный. Он может отвечать не только за кодировку, но и за многие другие вещи. Однако об этом поговорим в следующих статьях.

Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8 .

Для чего вообще нужна кодировка?

Не секрет, что во всем мире пишут и разговаривают на разных языках. Если мы создаем страницу и пишем на русском языке, то в Германии будут создавать и писать уже на немецком. В других странах уже свой язык.

Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.

Когда мы заходим на страницу, браузер уже понимает, на каком языке написан сайт. Также он понимает какой язык для текста используется. Соответственно, он пытается отобразить этот текстовый контент в зависимости от заданной кодировки.

К сожалению, это не всегда получалось.

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

Неправильно задана html кодировка

Как решение этой проблемы была создана универсальная кодировка utf-8.

Когда она стала уже стандартом, отпала необходимость указывать конкретную кодировку для определенного языка. Достаточно было указать универсальную utf-8 и у вас сайт отображался бы нормально во всех браузерах.

При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.

Сохраняем html utf-8

Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.

Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке ), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.

В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

И сразу такой совет!

Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

Как сохранить html страницу

Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html .

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

Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

И как вы уже должны заметить, расширение файла должно быть html . То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

Как открыть html файл

Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Как посмотреть html код страницы

Еще хочу вам рассказать, как можно посмотреть html код страницы прямо в браузере. Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.

Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U . В новой вкладке вам откроется исходный код страницы сайта.

Исходный код сайта

Еще можно в адресной строке прямо перед адресом страницы прописать:

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

Инструмент разработчика в браузере

Во вкладке «Elements» слева будет html код, а справа . Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.