Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. |
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
...
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
через
директиву @import url
@import url(style.css);
с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
| href | Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например: ; any - иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого тега. |
В этом разделе располагается все содержимое документа. Для элемента доступны .
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
HTML - это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.
Пользуясь HTML, разработчик может создать только внешний вид сайта. Важно понимать, что ни один сайт не существует без разметки. HTML является базой создания веб-страниц. Весь остальной функционал добавляется различными языками программирования.
Создание html-документаСоздать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.
Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.
Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.
Структура html-документа. ПримерСтруктура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.
На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.
Структура html-документа - основные теги:
Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.
Выше было сказано, что страницы сайтов имеют расширение.html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.
Раздел headНа рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).
Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.
Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.
Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.
Подключение стилейСтруктура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но данный способ не рекомендуется, поскольку код становится слишком большим и неудобным.
Подключается файл следующим образом.
В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.
Другим вариантом является определение стилей прямо в разделе head.
Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.
Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.
Подключение скриптовСкрипты подключаются следующим образом.
Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.
Раздел bodyСтруктура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.
Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.
Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.
Основные тегиСтруктура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.
Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.
Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.
Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.
Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.
Рассмотрим другие основные теги, которые указываются в разделе body.
Назначение |
|
Изображения |
|
Перенос текста на новую строку |
|
… | Жирный текст |
Перечеркнутый текст |
|
Подчеркнутый текст |
|
Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.
Вы узнаете какая должна присутствовать минимальная структура 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». Так у вас все новые документы будут сразу создаваться в этой кодировке.
Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как 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 код, а справа . Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.
На этом все!
Теперь вы знаете, как создать html страницу. Для этого мы рассмотрели саму структуру документа. Также я дал вам некоторые инструменты для удобной работы с кодом. Еще были важные правила по кодировке и работе с файлами. Обязательно их соблюдайте!
Структура HTML-документа. Начинаем работу.
С чего начинается HTML
Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE , которая обычно выглядит так:
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2, которая хоть и не отличается новизной, но, в отличие от более поздних версий, является полноценным, широко распространенным стандартом без каких-либо неопределенностей. Как видно из примера, самый короткий html-документ состоит буквально из одной строки.
|
Пример самого короткого HTML-документа: |
|
С чего начинается работа
На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера . Необходимо отметить, что любой HTML-документ открывется тегом и им же закрывается.
Затем, между тегами и следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:
Разжевать?
Если приведенный выше пример пояснить схематически, получится следующее:
Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD , а тело – элементом BODY .
Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE ).
Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами и
(HTML 1.0) – Comment ()
Используется для создания комментариев в любой части документа. Все, что находится внутри , будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).
Примечания:
|
Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке документа. Иначе говоря, тег внутри TITLE не действует. |
|
|
Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя. |
Создается с помощью элемента HEAD , между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается до тела документа (см. структуру HTML-документа).
Элементы, относящиеся к заголовку документа:
|
Определяет начало и конец заголовка документа |
||
|
Определяет имя всего документа, которое отображается в заголовке окна браузера |
||
|
Определяет базовый адрес, от которого отсчитываются относительные линки внутри документа |
||
|
Используется для вставки в документ таблицы стилей CSS |
||
|
Описывает взаимосвязь документа с другими объектами |
||
|
Используется для вставки метаданных |
(HTML 1.0) – Head
Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE ,BASE ,STYLE ,LINK ,META ).
(HTML 2.0) – Title
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
(HTML 3.2) – Base URL
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов.
Атрибуты:
HREF – определяет базовый адрес (URL) текущего документа.
TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме.
(HTML 3.2) – Style
Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).
Атрибуты:
TYPE – обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".
TITLE – определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.
(HTML 2.0) – Link
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK .
Атрибуты:
HREF – определяет URL объекта.
REL – определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:
stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE ) home – указывает на заглавную страницу вашего сайта toc, contents – указывают на файл, содержащий оглавление данного документа. index – указывает на файл, содержащий информацию для индексного поиска по текущему документу. glossary – указывает на файл, содержащий перечень терминов, относящихся к текущему документу. copyright – указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п. up, parent – указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта). child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта). next – указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря). previous – указывает на предыдущую страницу в последовательности документов. last, end – указывает на последнюю страницу в последовательности документов. first – указывает на первую страницу в последовательности документов. help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).
TYPE – определяет MIME-тип для объекта, указанного в атрибуте HREF.
Примечания:
(HTML 2.0) – Meta
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.
Атрибуты:
NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.
HTTP-EQUIV – определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.
CONTENT – присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV).
Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегают использования фреймов, к чему, поверьте, имеют довольно веские основания. Старайтесь использовать фреймы только тогда, когда это действительно необходимо.
Элементы для создания фреймов и работы с ними:
Примечания:
FRAMESET
(HTML 4.0) – Frame Set
Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME . Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET . То есть элемент FRAMESET поддерживает вложенные конструкции фреймов.
Атрибуты:
ROWS – определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:
В процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%"; в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%; в пикселах. Например: "75,*";
Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй – в 40 пикселов, а третий займет всю оставшуюся площадь.
COLS – определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS.
BORDER – определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape;
FRAMEBORDER – определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:
Yes – отображать рамки; No или 0 – не отображать рамки;
Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER.
FRAMESPACING – определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок.
Примечание:
(HTML 4.0) – Frame Определяет фрейм и его свойства внутри FRAMESET -структуры. (см. элемент FRAMESET ) Атрибуты:
SRC – обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.
NAME – определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A ). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов.
MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.
MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.
SCROLLING – определяет наличие линеек прокрутки содержимого фрейма. Возможные значения:
yes – отображать линейки прокрутки. no – не отображать линейки прокрутки. auto – отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме).
NORESIZE – не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения.
FRAMEBORDER – определяет наличие рамок у фрейма. Возможные значения:
yes – отображать рамки; no или 0 – не отображать рамки;
Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET .
|
Пример (файл index.html): |
|
|
... Ваш браузер не поддерживает фреймы ... |
|
В результате окно браузера разделится на три фрейма, как показано ниже. Причем frame1.html будет иметь ширину 265 пикселов, а frame2.html – высоту 165.
NOFRAMES
(HTML 4.0) – No Frames
Все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET .
|
Пример: |
|
|
Ваш браузер не поддерживает фреймы. Обыдно, да? |
|
Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. - «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).
doctypeЭто элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: и .
Элемент headЭлемент является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров. Помимо обязательного элемента , рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента .
Элемент должен быть первым дочерним элементом , никакое содержимое или элементы не должны располагаться перед ним:
Элемент title
Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который должен располагаться внутри элемента :
Заголовок окна
Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:
Элемент bodyЭлемент является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент ). Его основная цель - отделить содержимое документа от метаданных:
Заголовок окна
Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:
Заголовок окна Hello, world!
