Структура HTML-документа — Бесплатный HTML-курс
На самом деле браузер может отображать не только HTML-код, но и другие форматы данных. Поэтому, чтобы браузер точно не сомневался, что перед ним HTML-страница, нужно следовать определённой структуре.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Титул в браузере</title>
</head>
<body>
код страницы
</body>
</html>
Первая строчка <!DOCTYPE HTML>, хоть и выглядит как html-тэг, на самом деле таковым не является. Это т.н. тип документа, который указывает, что это именно HTML. Это исторический артефакт, который на самом деле нужен для того, чтобы указать ещё и версию HTML-стандарта.
Сейчас мы верстаем просто на HTML, но на самом деле это HTML 5. Раньше были и другие стандарты: HTML 4, 3, XHTML и т.д. Путаница была жуткая, но только так можно было сказать браузеру в каком режиме ему следует отображать страницу (строгий, нестрогий, фреймы.
После этого идёт непосредственный код, который заключается в единственный тэг <html> </html>.
Внутри есть две секции: HEAD и BODY.
Секция HEAD — служебная, где располагается различная мета-информация, например титул страницы, её описание, кодировка, подключаемые файлы стилей, скриптов и прочее. Эта секция никак не отображается браузером, но если ты случайно разместишь в ней какой-то значащий для вывода тэг (например изображение), то браузер автоматически завершит секцию HEAD до этого тэга.
Это позволяет сократить код страницы и не указывать BODY, который является необязательным. Но, с точки зрения качества кода, мы всегда указываем полную структуру html-страницы.
Секция BODY содержит код, который нужен для отображения страницы. Именно здесь и происходит вся вёрстка страницы.
Автор котика: nan dai
Оформление кода
Сразу поговорим о том, как правильно оформлять код.
Запомни простое правило — код должен быть читаемым и понятным другим верстальщикам.
Если мы говорим об исходном коде, то есть тот, который ты пишешь в текстовом редакторе, должен быть оформлен так, чтобы его можно было легко понять. Для этого используются «стандарты» кодирования, хотя это больше устоявшаяся практика, чем реальное требование.
Регистр
Все тэги пишутся в нижнем регистре. Для браузера это вообще не имеет никакого значения, но у верстальщиков используется именно нижний регистр. Тоже самое касается и всех атрибутов. Только нижний регистр.
Отступы
Блоки, которые вложены друг в друга должны отбиваться слева. Вот пример:
<section> <div> <h2>Заголовок</h2> <h3>Подзаголовок</h3> <blockquote>Цитата</blockquote> </div> </section>
Смысл всего этого в том, чтобы визуально сразу видеть вложенность тэгов.
Пробелы или табулятор
Отступ можно делать как табулятором, так и пробелами.
В основном кодеры используют пробелы из расчёта 4 пробела — это один табулятор. Табулятор удобен там, где нет автоформатирования (он автоматом расставляет отступы). Но вообще принципиальной разницы нет: если тебе всё равно, то используй пробелы.
Кавычки
Кавычки могут быть одинарные ' и двойные ". Правило для HTML такое: вначале двойные, потом одинарные. Обычно это используется в JavaScript-коде:
<a href="адрес">ссылка</a> <div>Кликни на меня</div>
Слэш в конце одиночных тэгов
Иногда встречается такая форма указания одиночных тэгов:
<img src="адрес" />
То есть используется слэш в конце. Так делать не нужно, поскольку это пережиток стандарта XHTML, который используется разве что для каких-то автоматических задач.
Порядок атрибутов в тэгах
Пока мы не изучали атрибуты, поэтому ты запомни эту страницу, чтобы вернуться к ней позже.
Для HTML, опять же, без разницы, но для верстальщиков удобней такой вариант: вначале какие-то «особые-особые» атрибуты, потом id (поскольку он уникальный), потом class, а дальше все остальные без разницы.
И в конце одиночные атрибуты.
<input v-data type="email" name="my-email" required>
И в заключении отмечу, что Visual Studio Code умеет выполнять форматирование автоматически (после установки соответствующих плагинов). То есть очень часто вообще не приходится об этом задумываться. Даже если получился «ужасный» код, достаточно выбрать пункт «Форматировать документ» и программа приведёт код в приличный вид.
Задание
Найди текст из википедии про Солнце и размести его в отдельном файле с учётом правильной html-структуры документа. Сделай так, чтобы страница была доступна по адресу http://localhost/sun.
Структура HTML-документа, понятие URI и URL
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Перейти на сайт->
Бесплатный Курс «Практика HTML5 и CSS3»
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Начать->
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Получить в подарок->
Бесплатный курс «Сайт на WordPress»
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
Получить в подарок->
*Наведите курсор мыши для приостановки прокрутки.
Глобальная структура HTML-документа
Мы уже говорили о том, что HTML — это «приложение на практике» языка SGML (Смотрите HTML: общая концепция языка и элементы). Это значит, что HTML документ также является и SGML-документом. Первое, что должно встречаться нам в SGML-документе — это объявление типа документа.
Это означает именно то, что и написано, т.е. объявление типа документа говорит о том, что документ этот будет относиться к определенному типу.
В нашем случае тип — это HTML. Сейчас мы не будем углубляться в тему типов документов. На данный момент мы будем использовать следующее объявление типа документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Пусть Вас не смущают угловые скобки. Это не элемент. Если Вы присмотритесь внимательнее, то увидите, что содержимое данной конструкции начинается с восклицательного знака — это значит, что это SGML-код.
Теперь посмотрите на данную конструкцию еще немного и порадуйтесь тому, что Вам не нужно изучать SGML. Поэтому сейчас просто поверьте мне на слово и поместите такой код в верхнюю часть вашего документа.
После того, как мы объявили, что данный документ является HTML-документом, мы можем начинать добавлять элементы.
Первым элементом всегда должен быть элемент html. Все документы HTML имеют элемент html, в котором будут находиться все остальные элементы. Давайте напишем открывающий и закрывающий тэги для данного элемента, а с его содержимым разберемся позже. Итак, у нас есть следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> </html>
Каждый элемент html разбивается на два элемента: head и body (т.е. «голова» и «тело»). Каждый документ HTML должен содержать в себе по одному элементу head и body. По сути, эти два элемента — это единственные вещи внутри элемента html. Итак, давайте разместим и их:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> </body> </html>
Заметьте, что я сделал небольшой отступ для элементов head и body.
Вы могли заметить, что «белое пространство» (будь то пробел, табуляция или перевод строки) в HTML как бы «схлопываются». Это значит, что вы можете добавлять сколько вам угодно пробелов, переводов строк и т.п. для улучшения визуального восприятия кода и это никак не скажется на смысле и функционировании документа.
Различие между элементами head и body заключается в том, что элемент head содержит информацию о документе, в то время как элемент body содержит в себе собственно документ. Прежде чем мы перейдем к элементу body нам нужно разобраться с одним элементом, обязательным для каждого элемента head: это элемент title («название»).
Название документа — очень важная его часть. Оно позволяет отличить один документ от другого и делает его уникальным, в то же время описывая его для вашего посетителя.
Элемент title очень прост. Он может содержать только простой текст, и этот текст и будет являться названием документа. Итак, давайте добавим в наш документ элемент title:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Уроки и статьи по созданию сайтов</title>
</head>
<body>
</body>
</html>
Мы почти закончили! Теперь нужно только добавить содержимое для элемента body.
Параграфы и заголовки
Наш документ будет состоять из заголовка и двух параграфов. В HTML есть специальные элементы, предназначенные для обозначения заголовков и параграфов. Параграфы обозначаются с помощью элемента p. C заголовками ситуация более запутанная, так как можно использовать заголовки шести уровней. Они представлены элементами h2, h3, h4, h5, h5 и h6.
В следующем примере показано применение параграфов и заголовков двух уровней:
<h2>Уроки и статьи по созданию сайтов</h2> <p>Данный проект создан мной для того, чтобы делиться со всеми желающими уроками и статьями по теме создания сайтов.</p> <p>Если Вас интересует данная область, Вас ждут примеры кода, видеоуроки, интересные статьи и другие материалы по тематике создания сайтов. Они отражают как мой личный опыт в этой сфере, так и опыт других разработчиков.</p> <h3>Кому будет полезен данный ресурс?</h3> <p>Данный ресурс будет полезен всем тем, кто связан с разработкой сайтов или только учится данному ремеслу.</p>
Теперь мы можем просто вставить данный код между тэгами body нашего документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Уроки и статьи по созданию сайтов</title>
</head>
<body>
<h2>Уроки и статьи по созданию сайтов</h2>
<p>Данный проект создан мной для того, чтобы делиться со всеми желающими уроками и статьями по теме создания сайтов.
</p>
<p>Если Вас интересует данная область, Вас ждут примеры кода, видеоуроки, интересные статьи и другие материалы по тематике создания сайтов. Они отражают как мой личный опыт в этой сфере, так и опыт других разработчиков.</p>
<h3>Кому будет полезен данный ресурс?</h3>
<p>Данный ресурс будет полезен всем тем, кто связан с разработкой сайтов или только учится данному ремеслу.</p>
</body>
</html>
</p>
<p>Если Вас интересует данная область, Вас ждут примеры кода, видеоуроки, интересные статьи и другие материалы по тематике создания сайтов. Они отражают как мой личный опыт в этой сфере, так и опыт других разработчиков.</p>
<h3>Кому будет полезен данный ресурс?</h3>
<p>Данный ресурс будет полезен всем тем, кто связан с разработкой сайтов или только учится данному ремеслу.</p>
</body>
</html>
Ресурсы и URI
«Что такое ресурс» — спросите Вы? Все, что угодно! Эта страница — ресурс, это предложение — ресурс, Вы — ресурс, Я — ресурс, мой почтовый ящик — тоже ресурс. Ресурс — понятие абстрактное. Ресурс это просто «что-то» или «что угодно».
Так зачем же называть «что-то» ресурсом? Причина этого не совсем ясна, но все это сводится к тому, что нам нужно каким-то образом получать доступ к некоторым ресурсам.
Важной характеристикой ресурса, однако, является то, что он является уникальным.
Если Вы уже успели побродить по сети достаточное время, то Вы поняли, что с его помощью можно получить доступ к миллиардам различных вещей. Поэтому возникла необходимость каким-то образом ссылаться на каждый конкретный ресурс. К примеру, если я хочу сослаться на данную страницу, мне нужен простой способ для того, что описать её так, чтобы это было понятно и компьютерам, и людям. И как раз тут некие умные люди придумали так называемый Унифицированный (единообразный) Идентификатор Ресурса (URI — Uniform Resource Identifier).
URI идентифицирует ресурс (т.е. по сути, идентифицирует «что-то»). Наиболее важно для нас то, что ресурс является уникальным и обладает уникальным «местоположением», где его можно найти. Данная страница — отличный пример. Она находится на веб-сервере с «адресом»: codeharmony.ru, в разделе materials и ее порядковый номер — 33.
Тут мы подошли к понятию Унифицированный Локатор (определитель местонахождения) Ресурса (URL — Uniform Resource Locator). URL — это разновидность URI.
URL имеет определенный синтаксис, который мы рассматривать не будем, так как это не представляет для нас большого интереса. Единственное, что стоит знать про URL — это то, что любой такой URL-адрес можно разделить на три части: имя схемы, двоеточие, и само местонахождение. Вот пара примеров:
http://www.codeharmony.ru/sections/html mailto:[email protected]
В примерах выше именами схемы являются http и mailto. После них идет двоеточие и набор символов, означающих URI. Имя схемы определяет то, как будет интерпретироваться оставшаяся часть URI. К примеру, возьмем два URL:
http://webreference.com/html/ ftp://webreference.com/html/
Эти адреса позволяют получить доступ к двум совершенно разным ресурсам.
Хотя у них одинаковый синтаксис после двоеточия, у них разные схемы и они, соответственно, интерпретируются по-разному.
По материалам www.webreference.com
Перевод — Дмитрий Науменко.
P.S. Обратите также внимание на уроки ниже. Первый бесплатный курс позволит вам освоить работу с HTML и научиться создавать «каркасы» для сайтов. Второй курс покажет 5 прикладных техник для «резиновой» верстки сайтов:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
|
PHP: Получение информации об объекте или классе, методах, свойствах и наследовании |
|
|
CodeIgniter: жив или мертв? |
|
|
Функции обратного вызова, анонимные функции и механизм замыканий |
|
|
Применение функции к каждому элементу массива |
|
|
Слияние массивов. |
|
|
Деструктор и копирование объектов с помощью метода __clone() |
|
|
Эволюция веб-разработчика или Почему фреймворк — это хорошо? |
|
|
Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.) |
|
|
PHP: Удаление элементов массива |
|
|
Ключевое слово final (завершенные классы и методы в PHP) |
|
|
50 классных сервисов, программ и сайтов для веб-разработчиков |
Преобразование массива в строкуНаверх
HTML-структура | Webflow University
Используйте HTML (язык гипертекстовой разметки) для отображения содержимого и настроек веб-сайта.
У этого видео старый интерфейс. Скоро будет обновленная версия!
Клонировать этот проект
Расшифровка
HTML (язык гипертекстовой разметки) — одна из самых важных основ в Интернете. Это язык разметки, который используется для создания веб-сайтов. Содержание и настройки веб-сайта можно найти в нашем HTML.
Двумя основными структурными компонентами HTML являются тело и заголовок . Оба они используются всеми веб-браузерами для отображения структуры и настроек веб-страницы.
Тело
Внутри тела хранится весь контент веб-сайта. Например, заголовок, абзац и изображение записываются как разные теги (типы элементов) в теле, где они отображаются браузером.
В этом примере мы вручную кодируем HTML, чтобы продемонстрировать, как он отображается в браузере.
Эти теги и весь код, который вы видите, будут созданы для вас автоматически, когда вы будете добавлять этот тип контента с помощью Webflow.
Head
Здесь определяются настройки страницы — здесь хранится вся информация о веб-сайте. Вот несколько вещей, которые вы можете найти в голове:
Тег заголовка — заголовок, который появляется, когда веб-сайт отображается в результатах поиска Google.
Метатеги — описание, которое будет отображаться под заголовком в результатах поиска Google.
CSS — разметка, которая определяет стили HTML-элементов (например, высоту, цвет, размер шрифта и т. д.). Без CSS мы бы увидели весь контент, сложенный вертикально, без структуры или стиля, как в текстовом документе.
Теги Open Graph — состоят из изображения и описания, которые появляются при публикации сайта (например, Twitter, Facebook и т. д.).
В пользовательском интерфейсе Webflow
В Webflow такие настройки, как заголовок, метаописание и открытый график, можно редактировать на панели страниц.
CSS создается, когда вы выбираете элемент на холсте и используете панель стилей.
Мы будем использовать интерфейс Webflow для предварительного просмотра того, как это будет выглядеть и работать, поэтому нам не нужно беспокоиться о сканировании файлов HTML или CSS в течение 90 минут только для того, чтобы обнаружить, что мы забыли закрыть тег в строке 4722. Вместо этого мы можем полностью сосредоточиться на создании контента.
Попробуйте Webflow — это бесплатно
Был ли этот урок полезен? Дайте нам знать!Спасибо за отзыв! Это поможет нам улучшить наш контент.
Свяжитесь с нашим сообществом
Свяжитесь со службой поддержки
Что-то пошло не так при отправке формы.
Связаться со службой поддержки
У вас есть предложение по уроку? Дайте нам знать
Спасибо! Ваша заявка принята!
Ой! Что-то пошло не так при отправке формы.
Откройте для себя наши курсы, связанные с этим уроком, и узнайте больше!
Курс взаимодействия и анимации
Промежуточный —
CSS Styling
Промежуточные
CMS & Dynamic Content
Intermediate
Структура HASTMM2 9003
.
пишется и распространяется с целью предоставления описания основной структуры HTML-документа.
Поэтому давайте не будем больше терять время и приступим прямо сейчас. Следующая диаграмма иллюстрирует основную структуру документа, написанного на HTML.
Структура HTML-документа разбита на две части и изображена на схеме, расположенной выше:
- «Головная» часть
- Деталь «тело»
Раздел «head» включает всю информацию о веб-странице, а раздел «body» включает фактическое содержимое, которое будет
отображается в веб-браузере. Тег «head» — это контейнер для метаданных.
Базовый HTML-документ выглядит так, как показано на рисунке в начале статьи. Теперь давайте напишем HTML-код, содержащий все
основные теги HTML.
<голова>
Это название страницы
<стиль>
тело{
цвет фона: перу; цвет: бело-дымчатый;
размер шрифта: 24px; отступ: 8px;
}
<тело>
Основной заголовок
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Подзаголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus odio magnam eligendi.
Вывод, созданный этим HTML-кодом, будет выглядеть примерно так:
Вы можете себе представить, что любое содержимое, доступное в разделе «тело», отображается как вывод в веб-браузере на основе источника HTML.
код и вывод, произведенный им. В то время как содержимое раздела «head» является контейнером для метаданных, мы можем записывать данные о HTML-коде.
документа в этом разделе, например название документа, описание документа, его оформление и т. д.
Если вы не знаете, где написать HTML-документ или как получить результат, позвольте мне кратко объяснить. Впрочем, я уже обращался к этому вопросу в
начало курса, на первой странице.
Чтобы написать HTML-код, откройте текстовый редактор, например «Блокнот», или другой мультиредактор и программное обеспечение для редактирования кода, например «Visual Studio Code». Создайте HTML-код, показанный выше, или просто скопируйте и вставьте его. Затем сохраните файл с любым именем и расширением «.html» или «.htm», например:
codecracker.html.
После сохранения файла щелкните его правой кнопкой мыши и выберите «открыть с помощью», затем выберите любой веб-браузер, например «Google Chrome», «Mozilla» или «Safari».
Какой бы браузер вы ни установили в своей системе, он будет указан там. Итак, откройте любой веб-браузер по вашему выбору, чтобы увидеть тот же результат, что и на
снимок как результат кода, приведенного выше. Таким образом, вы должны написать код HTML и наблюдать за его выводом.
Ниже приводится объяснение примера структуры HTML-документа:
- Объявление типа DOCTYPE используется для запуска стандартного режима рендеринга. Это объявление определяет тип документа как HTML.
- Все, что находится между тегами и , считается HTML-документом. Все, что находится внутри этого тега, описывает
HTML-документ.
.
пишется и распространяется с целью предоставления описания основной структуры HTML-документа.
Поэтому давайте не будем больше терять время и приступим прямо сейчас. Следующая диаграмма иллюстрирует основную структуру документа, написанного на HTML.
Структура HTML-документа разбита на две части и изображена на схеме, расположенной выше:
- «Головная» часть
- Деталь «тело»
Раздел «head» включает всю информацию о веб-странице, а раздел «body» включает фактическое содержимое, которое будет
отображается в веб-браузере. Тег «head» — это контейнер для метаданных.
Базовый HTML-документ выглядит так, как показано на рисунке в начале статьи. Теперь давайте напишем HTML-код, содержащий все
основные теги HTML.
<голова>
Это название страницы
<стиль>
тело{
цвет фона: перу; цвет: бело-дымчатый;
размер шрифта: 24px; отступ: 8px;
}
<тело>
Основной заголовок
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Подзаголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus odio magnam eligendi.
Вывод, созданный этим HTML-кодом, будет выглядеть примерно так:
Вы можете себе представить, что любое содержимое, доступное в разделе «тело», отображается как вывод в веб-браузере на основе источника HTML.
код и вывод, произведенный им. В то время как содержимое раздела «head» является контейнером для метаданных, мы можем записывать данные о HTML-коде.
документа в этом разделе, например название документа, описание документа, его оформление и т. д.
Если вы не знаете, где написать HTML-документ или как получить результат, позвольте мне кратко объяснить. Впрочем, я уже обращался к этому вопросу в
начало курса, на первой странице.
Чтобы написать HTML-код, откройте текстовый редактор, например «Блокнот», или другой мультиредактор и программное обеспечение для редактирования кода, например «Visual Studio Code». Создайте HTML-код, показанный выше, или просто скопируйте и вставьте его. Затем сохраните файл с любым именем и расширением «.html» или «.htm», например:
codecracker.html.
После сохранения файла щелкните его правой кнопкой мыши и выберите «открыть с помощью», затем выберите любой веб-браузер, например «Google Chrome», «Mozilla» или «Safari».
Какой бы браузер вы ни установили в своей системе, он будет указан там. Итак, откройте любой веб-браузер по вашему выбору, чтобы увидеть тот же результат, что и на
снимок как результат кода, приведенного выше. Таким образом, вы должны написать код HTML и наблюдать за его выводом.
Ниже приводится объяснение примера структуры HTML-документа:
- Объявление типа DOCTYPE используется для запуска стандартного режима рендеринга. Это объявление определяет тип документа как HTML.
- Все, что находится между тегами и , считается HTML-документом. Все, что находится внутри этого тега, описывает
HTML-документ.
.
пишется и распространяется с целью предоставления описания основной структуры HTML-документа.
Поэтому давайте не будем больше терять время и приступим прямо сейчас.Следующая диаграмма иллюстрирует основную структуру документа, написанного на HTML.
Структура HTML-документа разбита на две части и изображена на схеме, расположенной выше:
- «Головная» часть
- Деталь «тело»
Раздел «head» включает всю информацию о веб-странице, а раздел «body» включает фактическое содержимое, которое будет отображается в веб-браузере. Тег «head» — это контейнер для метаданных.
Базовый HTML-документ выглядит так, как показано на рисунке в начале статьи. Теперь давайте напишем HTML-код, содержащий все основные теги HTML.
<голова>
Это название страницы
<стиль>
тело{
цвет фона: перу; цвет: бело-дымчатый;
размер шрифта: 24px; отступ: 8px;
}
<тело>
Основной заголовок
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Подзаголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus odio magnam eligendi.
Вывод, созданный этим HTML-кодом, будет выглядеть примерно так:
Вы можете себе представить, что любое содержимое, доступное в разделе «тело», отображается как вывод в веб-браузере на основе источника HTML. код и вывод, произведенный им. В то время как содержимое раздела «head» является контейнером для метаданных, мы можем записывать данные о HTML-коде. документа в этом разделе, например название документа, описание документа, его оформление и т. д.
Если вы не знаете, где написать HTML-документ или как получить результат, позвольте мне кратко объяснить. Впрочем, я уже обращался к этому вопросу в начало курса, на первой странице.
Чтобы написать HTML-код, откройте текстовый редактор, например «Блокнот», или другой мультиредактор и программное обеспечение для редактирования кода, например «Visual Studio Code».
Создайте HTML-код, показанный выше, или просто скопируйте и вставьте его. Затем сохраните файл с любым именем и расширением «.html» или «.htm», например:
codecracker.html.
После сохранения файла щелкните его правой кнопкой мыши и выберите «открыть с помощью», затем выберите любой веб-браузер, например «Google Chrome», «Mozilla» или «Safari». Какой бы браузер вы ни установили в своей системе, он будет указан там. Итак, откройте любой веб-браузер по вашему выбору, чтобы увидеть тот же результат, что и на снимок как результат кода, приведенного выше. Таким образом, вы должны написать код HTML и наблюдать за его выводом.
Ниже приводится объяснение примера структуры HTML-документа:
- Объявление типа DOCTYPE используется для запуска стандартного режима рендеринга. Это объявление определяет тип документа как HTML.
- Все, что находится между тегами и , считается HTML-документом. Все, что находится внутри этого тега, описывает
HTML-документ.
