Перед началом работы создадим файл index.html, который будем редактировать в блокноте (Notepad++).
Задаем тип документа с помощью <doctype>
Строка <!DOCTYPE html> идет первой в файле HTML и перед ней не должно быть пробелов и пустых с трок.
<html>
Внутри элемента <html> помещается весь код
В теге html указываем атрибут lang, который определяет язык содержимого в документе
<head> — голова
Внутри тега определяются: заголовок страницы, кодировка символов, мета-теги, ссылки на внешние файлы, содержащие стили, сценарии и т.д.
Содержимое тега, за исключением заголовка, не отображается в браузере.
<body> — тело
<meta> — метатеги
Кодировка символов в теге head указывается следующим через метатэг <meta charset=»utf-8″>
В description и keywords указывается описание сайта (description) и ключевые слова (keywords)
<title> — заголовок страницы
Чрезвычайно важный тег.
Заголовок указывается в теге head:
<title>Разработка сайтов с помощью HTML5</title>
<link> — ссылка на style.css
Тэг используется для подключения к документу стилей, сценариев и т.д.
<link rel=»stylesheet» href=»style.css»>
В итоге код страницы будет выглядеть следующим образом:
Таблица стилей — это набор правил форматирования, позволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера. Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволяет воспользоваться преимуществами новых возможностей HTML5.[1]
В HTML5 не нужно указывать тип подключаемой таблицы стилей (атрибут type больше не используется). Достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отношение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что styles.css — это CSS-файл со стилями.
[1] Гоше X. Д. HTML5. Для профессионалов. — СПб.: Питер, 2013. — 496 с
Введение в HTML, структура HTML-документа, форматирование текста
Похожие презентации:
Проблема. Мне бы хотелось найти друзей
Cloud and Mobile technology
Анализ воздействия социальных сетей на формирование зависимого поведения у молодежи
Облачные технологии
Киберспорт
Основы web-технологий. Технологии создания web-сайтов
Веб-дизайн
Социальная сеть Facebook
Системы телекоммуникации
Новый Пульт ГрузовичкоФ
1. Введение в HTML, структура HTML-документа, форматирование текста
Презентация 11-7 Введение в HTML, структура HTML-документа, форматирование текста Основные понятия •Гипертекст — это текст, в котором содержаться ссылки на другие документы или переходы внутри исходного документа. Это один из основных способов размещения информации в глобальной сети Internet и родственных ей сетях intranet. Основные понятия •Web-страница — это электронный документ, в котором кроме текста содержатся специальные команды форматирования, а также встроенные объекты (рисунки, аудио- и видеоклипы и др.). Основные понятия •Web-сайт — совокупность web-документов, объединенных по какому-либо признаку (адресом сервера, темой, оформлением). Основные понятия •Браузер — специальная программа для просмотра Web-страницы (например Internet Explorer, Mozilla Firefox, Opera и др. ). Основные понятия •HTTP (Hyper Text Transfer Protocol) — протокол передачи гипертекста для доступа к Web-страницам. Основные понятия •Унифицированный указатель ресурса URL (Uniformed Resource Locator) или URL-адрес стандартизированный способ записи адреса ресурса в сети Интернет. Пример URL: http://www.klyaksa.net/htm/exam/answers/images/a23_1.gif 1 Протокол передачи гипертекста HTTP 2 Доменное имя компьютера, на котором хранится данный документ 3 Путь доступа к файлу с именем файла, содержащему Web-документ, на указанном компьютере Здесь приведен URL-адрес рисунка, находящегося на одной из Webстраниц портала www.klyaksa.net. Основные понятия •HTML (HyperText Markup Language) — язык гипертекстовой разметки. Указания, записанные на HTML, интерпретируются браузером. Обычно файл Веб-страницы имеет расширение .html или .htm. Тег – элемент языка разметки гипертекста. Для обозначения тегов используется угловые скобки <тег>. Виды тегов: 1) парные, которые выделяют блок текста, также называются еще контейнером. Контейнер требует закрывающего тега, обозначаемого </тег>. 2) одиночные. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна. Пример 1. Использование парных тегов (контейнера) <b>Жирный шрифт</b> в тексте. Пример 2. Использование одиночных тегов Первая строка текста <br> Вторая строка текста. Пример 3. Правильное сочетание тегов <b><i>Полужирный курсивный текст</i></b> Пример 4. Неправильное сочетание тегов <i><b>Полужирный курсивный текст</i></b>
11. Гипертекст
Гипертекст — текст с управляющими элементами языка разметки гипертекста (тегами).
12. Структура документа
HTML-документ состоит из двух разделов заголовка (HEAD) и тела документа (BODY). Раздел заголовка документа (HEAD) определяет заголовок веб-страницы и содержит служебную информацию. Раздел тела документа (BODY) хранит видимое содержание страницы.
13. HTML-документ
<html> <head> <title>Заголовок страницы</title> Служебная информация </head> <body> Видимое содержание страницы </body> </html>
14. Типы тегов:
форматирование; верстка таблиц; верстка списков; формирование гиперссылок; вставка изображений.
15. Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста.
16. Начертания и эффекты текста
Код HTML Описание <b>Текст</b> Жирный текст <i>Текст</i> Курсивное начертание текста <u>Текст</u> Подчеркнутый текст <sup>Текст</sup> Верхний индекс <sub>Текст</sub> Нижний индекс <strike>Текст</strike> Зачеркнутый текст <pre>Текст</pre> Текст пишется как есть, включая все пробелы <em>Текст</em> Курсивный текст <strong>Текст</strong> Жирный текст Строка1<br> Строка2 Перевод курсора в новую строку
17.
Начертания и эффекты текстаПример 1. Жирный курсивный текст Результат в браузере: «Привет» – мое приветствие. Запись в коде: <b><i>»Привет»</i></b> – мое приветствие. Пример 2. Создание нижнего индекса Результат в браузере: Формула серной кислоты: h3SO4 Запись в коде: <b>Формула серной кислоты:</b> <i>H<sub>2</sub>SO<sub>4</sub></i>
18. Задание 1
<HTML> <HEAD> <TITLE>Моя первая страница</TITLE> </HEAD> <BODY> Это моя первая страница </BODY> </HTML>
19. Кодировка текста
Для операционной системы Windows и кириллицы используется кодировка текста (данных) windows-1251.
20. Задание 2
<HTML> <HEAD> <TITLE>Моя первая страница</TITLE> <META=»text/html; charset=windows-1251″ equiv=»content-type»> </HEAD> <BODY> Это моя первая страница </BODY> </HTML> http-
English
Русский
Правила
Какова основная структура документа HTML?
Имама Захур
Устали от LeetCode? 😩
Изучите 24 шаблона, чтобы решить любой вопрос на собеседовании по кодированию, не заблудившись в лабиринте практических задач в стиле LeetCode. Практикуйте свои навыки в практической среде кодирования, не требующей настройки. 💪
Документы HTMLHyperText Markup Language используют различные теги и атрибуты для отображения таких элементов, как заголовки, абзацы, гиперссылки и изображения. Они состоят из следующих основных частей: 9.0003
Информация о версии HTML
Элемент
Элемент
Элемент
Эти части существуют в иерархии. Тег Уникальный раздел, указывающий начало и конец элемента HTML. включает в себя элементы и , и каждый из них заключает в себе другие элементы. Базовая блок-схема, описывающая эту иерархию, показана ниже:
Блок-схема, показывающая иерархию основных структур документа HTML
Синтаксис
Рассмотрим эти части более подробно. На изображении ниже показан базовый шаблон HTML-документа.
Шаблон HTML
Информация о версии HTML
Объявление DOCTYPE представляет собой одну строку, определяющую версию HTML, используемую веб-страницей.
Он должен быть указан в начале каждого документа. HTML5 требует, чтобы объявление было сделано следующим образом:
Элемент
Элемент следует непосредственно за объявлением типа документа и содержит остальные элементы. Он состоит из начального и конечного тегов.
Элемент
Элемент содержит информацию о документе, такую как его заголовок и метаданные. Он также может загружать внешние ресурсы, такие как ссылки и скрипты. Элементы внутри 9Элемент 0021
обычно не виден непосредственно на веб-странице.
Важным разделом внутри элемента является тег </code>. Он содержит текст, который отображается в строке заголовка веб-браузера.</p><pre> <голова>
<title><div id="yandex_rtb_5" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";}
else{var rtbBlockID="R-A-744004-5";}
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_5",blockId:rtbBlockID,pageNumber:5,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");}
g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_5").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_5");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> Название страницы
Элемент
Элемент описывает содержимое и структуру веб-страницы. Это может включать такие вещи, как текст, изображения и ссылки.
Популярные теги, используемые внутри , включают следующее:
и : Эти теги помогают структурировать документ.
от
до : Эти теги определяют заголовки каждого раздела в документе. Числа от одного до шести представляют размер (и, следовательно, значимость) каждого заголовка, где является самым большим, а самый маленький.
: Тег абзаца можно использовать для написания относительно длинного фрагмента текста.
: Этот тег отображает изображение на странице HTML.
: Тег привязки используется для ссылки на другие страницы и приложения путем создания гиперссылок.
<тело>
Заголовок содержания
Содержание
Все вместе
Давайте создадим базовый HTML-документ, используя то, что мы уже узнали. Нажмите кнопку «Выполнить», чтобы просмотреть результирующую страницу на вкладке «Вывод».
Тег является корнем всего контента, который виден пользователю . Его часто называют 9.0145 видовое окно .
Никакие другие теги не допускаются между закрывающим тегом и закрывающим тегом . Это означает, что за закрывающим тегом должен сразу следовать закрывающий тег . Как обычно, пробелы на самом деле не считаются содержимым, поэтому вы можете поместить закрывающий тег на новую строку и отделить его от пробела, однако он будет выглядеть более читабельным для вас.
Давайте объединим все это в полноценную (хотя и простую) HTML-страницу:
Сохраните этот файл как simple-document.html , помня, в каком каталоге вы его сохранили.
После этого откройте браузер, например Google Chrome. Нажмите на Файл меню и выберите Открыть файл... . Перейдите в каталог, в котором вы сохранили файл simple-document.html , и выберите его, нажав кнопку Открыть . Вы должны увидеть что-то вроде следующего:
Как видите, текст, который я разместил внутри тега </code>, отображается (обведен красным) как имя вкладки браузера. Область просмотра браузера, т. е. видимая нам часть, показывает текст, который был окружен <code> Тег<body> </code>.</p><h3><span class="ez-toc-section" id="i-15"> Но действительно ли это? </span></h3><p> Давайте воспользуемся онлайн-валидатором HTML, рекомендованным WHATWG, для проверки нашего HTML-кода.</p><ol><li> Перейдите по следующей ссылке: https://html5.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/r/RJu0Ml31xFysP4BdSEnHGZLzKO6pbQh2wtkcNrovm/slide-45.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/r/RJu0Ml31xFysP4BdSEnHGZLzKO6pbQh2wtkcNrovm/slide-45.jpg' /></noscript> validator.nu/</li><li> В раскрывающемся списке <em> Адрес </em> выберите <em> Текстовое поле </em></li><li> Стереть все в текстовой области</li><li> Скопируйте и вставьте HTML-код файла <code> simple-document.html </code> в эту текстовую область, а затем нажмите кнопку 9.0021 Подтвердить кнопку </code>.</li></ol><p> Как видно из скриншота ниже, валидатор сообщает, что наш HTML-код действителен:</p><p></p><h3><span class="ez-toc-section" id="i-16"> Давайте сломаем и починим </span></h3><p> Когда я обсуждал, как теги могут быть вложены друг в друга, я упомянул правило тегов <em>, закрывающее первым то, что вы открыли последним </em> .</p><p> Давайте добавим несколько простых тегов в содержимое <code> body </code>, но при этом нарушим это правило ( <code> invalid-document.html </code> ):</p><pre data-lang="html"/> <table> <tbody> <tr> <td> <pre> 1
2
3
4
5
6
7
8
9
10
</pre></td><td><pre> <!doctype html>
<html>
<голова>
<мета-кодировка="utf-8">
<title>Это название... волна!
<тело>
Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволяет воспользоваться преимуществами новых возможностей HTML5.[1]
Технологии создания web-сайтов
).
Начертания и эффекты текстаПример 1. Жирный курсивный текст
Практикуйте свои навыки в практической среде кодирования, не требующей настройки. 💪
Это может включать такие вещи, как текст, изображения и ссылки.
Нажмите кнопку «Выполнить», чтобы просмотреть результирующую страницу на вкладке «Вывод».