Основы языка HTML

Основы языка HTML
Курс Frontend-разработки на Javascript + Vue/React

О языке HTML
• HTML (HyperText Markup Language) – декларативный язык разметки.
Используется для построения веб-страниц.
• HTML – единственный язык, на котором сегодня пишется разметка
для веб-сайтов (для всех популярных браузеров)
• На сегодняшний день актуальной версией языка является HTML5.

Сферы применения
• При помощи HTML:
• Страница разбивается на логические (семантические) блоки
• В страницу вставляется содержимое – текст, ссылки, картинки, аудио, видео
• В страницу вставляются интерактивные элементы – кнопки, поля для ввода и
т.д.
• К странице подключаются скрипты и стили
• HTML не используется для следующих целей:
• Стилизация содержимого страницы
• Анимации на странице
• Хранение данных веб-приложения
• Реализация логики веб-приложения

Создание и запуск первой
страницы
• Веб-страница – это файл с расширением .html
• Для запуска страницы достаточно просто её открыть в проводнике
• Для создания страницы:
• Создать в IDE новый файл
• Сохранить под названием index.html (вместо index можно любое другое имя)
• Открыть папку, где сохранена страница и двойным кликом открыть в
браузере

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

Структура HTML-страницы
• Фраза <!doctype html> указывает
браузеру, что документ нужно
обрабатывать в стандарте HTML5
• В html-документе корневой
элемент - <html>. Внутри него
содержится вся страница.
• Тег <head> содержит
описательную информацию о
странице.
• Тег <body> содержит все то, что
пользователь будет видеть на
странице.
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
Page contents
</body>
</html>

Кодировка
• В некоторых браузерах и операционных системах некорректно
отображаются русские буквы в веб-страницах. Чтобы это исправить,
необходимо странице задать кодировку:
<head>
<meta charset="utf-8" />
<title>Моя страница</title>
</head>

Задача 1.
Самостоятельно:
• Создайте и запустите веб-страницу, на которой будет выведены
ваше имя, возраст, город проживания, домашний адрес и место
работы/учебы, а также несколько слов о себе.

Теги
• Тегом в HTML называется контейнер содержимого.
• Записывается тег следующим образом:
• В угловых скобках записывается название тега. У тега есть начало и
конец – открывающий и закрывающий теги. В закрывающем теге
перед названием пишется слеш.
• Содержимое тега записывается между открывающим и
закрывающим тегами. Содержимым может быть текст,
комментарии или другие теги и их комбинации.
<tag>Contents</tag>

Одинарные теги
• Некоторые теги не имеют содержимого и поэтому не имеют
закрывающего. Такие теги записываются только с открывающим:
• В конце такого тега принято ставить слеш, но это не обязательно
для одинарных тегов.
<br/>
<img src=""/>
<hr/>

Текстовые узлы
• Текстовым узлом в HTML называется текст между любыми двумя
тегами:
• К текстовым узлам относятся и невидимые символы: пробелы,
знаки табуляции и переноса:
<p><b>Lorem ipsum <i>dolor</i> sit amet</b> consequetur</p>
<section>
<div>
<p>
<b>Hello, world!</b>
</p>
</div>
</section>

Спецсимволы
• Спецсимволом называется специальный синтаксис внутри текстового
узла, позволяющий вывести на страницу символы, которых нет на
клавиатуре:
• Будет преобразовано в
© 2010 - 2015
• У спецсимвола три части – амперсанд (&), код символа и точка с запятой.
• Существуют таблицы спецсимволов, где собрано множество вариантов
кодов символов
<p> © 2010 - 2015</p>

Атрибуты тегов
• Атрибутом тега называется специальное свойство, расширяющее
возможности конкретно данного тега:
• Значение атрибута записывается в двойных кавычках
• Атрибуты есть только в открывающем теге. В закрывающем они не
дублируются
• Если атрибутов несколько, то они отделяются друг от друга
пробелами
<p align="center">Text</p>
<a href="http://google.com" title="Link">Link</a>
<img src="1.png" width="400" height="400" title="My image"/>

Комментарии
• Комментарием в коде называется специальный узел, не видный
пользователям на странице и никак не влияющий на саму страницу, но
позволяющий разработчику оставить пометку в коде.
• В HTML комментарии только многострочные. Все, что будет размещено
между открывающим и закрывающим комментарием, будет
комментарием.
<body>

<div class="main-section">
<div></div>
</div>
</body>

Базовые теги форматирования
Тег Описание
<b></b> Выделяет содержимое жирным начертанием
<strong></strong> То же (семантический тег)
<i></i> Выделяет текст курсивом
<em></em> То же (семантический тег)
<u></u> Выделяет текст подчеркиванием
<sub></sub> Выводит текст в нижнем индексе
<sup></sup> Выводит текст в верхнем индексе
<q></q> Выводит текст в кавычках
<s></s> Выделяет текст перечеркиванием
<strike></strike> То же (семантический тег)
<span></span> Строчный контейнер (нет визуального эффекта)

Универсальные атрибуты
Атрибут Описание
title Текст всплывающей подсказки при наведении на элемент
id Идентификатор элемента. Используется для якорей, стилей и скриптов.
Должен быть уникальным.
class Список стилевых классов. Используется, в основном, для вёрстки.
• Кроме того, тегу можно задавать и собственные атрибуты.
• У каждого тега есть определенный набор атрибутов, влияющих на
поведение этого тега. Посмотреть список атрибутов можно в
справочнике по тегу.
• Если в теге есть атрибут, который не влияет на этот тег, то никакого
эффекта от его присутствия не будет.

Пересечение тегов
• В HTML должно строго соблюдаться правило иерархии тегов. Оно
требует, чтобы любой тег находился внутри какого-либо полностью.
Это значит, что теги не могут пересекать друг друга
• Неверно:
• Верно:
<span>Hello <b>,</span> World </b>
<span>Hello <b>,</b></span><b> World </b>

Переносы и пробелы
• В HTML в тексте игнорируются переносы строк – все строки будут
слеплены в одну.
• Чтобы сделать перенос текста, в месте переноса необходимо
вставить тег <br/>
• В HTML все пробелы между словами, кроме одного, будут
игнорироваться. Чтобы вставить несколько пробелов, необходимо
вставлять их в виде спецсимволов, например  

Задача 2.
1. Вывести на странице следующий текст:
2. Вывести на странице стихотворение с тремя четверостишиями. Каждую
строку стихотворения переносить на новую строку, последнюю строку в
каждом четверостишии выделять курсивом. Между четверостишиями –
одна пустая строка.
3. Вывести на страницу формулу химической реакции:
HCl + СaCO3 = CaCl2 + CO2 + H2O
Semper nec nostra mus accumsan id felis cursus tellus mus
scelerisque at ornare lectus ante consectetur interdum
viverra id. A taciti ridiculus.

Валидация кода
• Валидатор HTML – специальный сервис, позволяющий оценить
корректность кода страницы с точки зрения синтаксиса.
• Валидность кода – важный фактор корректной работы веб-
приложения и эффективной индексации поисковыми системами
• Валидатор доступен по ссылке https://validator.w3.org/

Строчные и блочные теги
• В HTML теги условно делятся на две категории: блочные и строчные
• Строчные теги – теги, которые не переносят своё и следующее
содержимое на следующую строку и применяют свой эффект
внутри строки, в которой записаны. К ним относятся рассмотренные
ранее теги.
• Блочные теги – теги, которые переносят своё содержимое на
следующую строку. Такие теги следуют друг под другом.

Блочные теги
• И иные
Тег Описание
<h1></h1> Заголовок. Визуально текст крупным шрифтом и жирный
<h2..h6> Заголовки более низких уровней
<p></p> Абзац текста. Внутри могут быть только строчные теги.
<div></div> Универсальный контейнер. Не задает визуального эффекта, но
используется для разметки страницы.
<pre></pre> Внутри будут сохранены все пробелы, переносы и использован
моноширинный шрифт
<xmp></xmp> Содержимое внутри выведется как текст, даже если там есть теги и
комментарии
<hr/> Вертикальная линия-разделитель
<br/> Принудительный перенос

Списки
• Элемент 1
1. Молоко
2. Хлеб
3. Мука
<ul>
<li>Элемент 1</li>
<li><b>Элемент</b> 4</li>
</ul>
<ol>
<li>Молоко</li>
<li>Хлеб</li>
<li>Мука</li>
</ol>

Списки (вложенные)
• Продукты
1. Молоко
2. Хлеб
• Для дома
1. Порошок
2. Отбеливатель
<ul>
<li>
<p>Продукты</p>
<ol>
<li>Молоко</li>
<li>Хлеб</li>
</ol>
</li>
<li>
<p>Для дома</p>
<ol>
<li>Порошок</li>
<li>Отбеливатель</li>
</ol>
</li>
</ul>

Таблицы
• Вся таблица описывается тегом
table
• Содержимое таблицы
описывается в теге <tbody>
• Тег <tr> - одна строка таблицы
• Тег <td> - ячейка таблицы. В
каждой строке должно быть
одинаковое количество тегов с
ячейками.
<table border="1">
<tbody>
<tr>
<td>Cell 1 X 1</td>
<td>Cell 1 X 2</td>
</tr>
<tr>
<td>Cell 2 X 1</td>
<td>Cell 2 X 2</td>
</tr>
</tbody>
</table>

Вставка ссылок
• Ссылкой называется элемент, нажатие на который открывает в
браузере другой документ.
• У любой ссылки есть адрес (значение атрибута href) и анкор – текст
ссылки. В ссылку, вообще говоря, можно положить любое
содержимое и оно станет ссылкой.
• Тег <a> - строчный.
<a href="http://google.com">Google.com</a>

URL
• URL (Universal Resource Locator) – способ написания адреса
документа в Сети.
• Адрес может быть сетевым – тогда указывается вместе с
протоколом, например:
• Если адрес указан без протокола, он будет относительным.
Документ будет запрашиваться относительно местоположения
документа, в котором находится ссылка:
<a href="http://google.com">...</a>
<a href="pages/3.html">...</a>

Открытие в новой вкладке
• Если у ссылки задан атрибут target="_blank", то при клике на неё
документ откроется в новой вкладке.
<a href="./page.html" target="_blank">Link</a>

Вставка изображений
• Изображения вставляются в HTML-документ при помощи тега
<img/>:
• В атрибут src указывается URL-адрес картинки (относительный или
абсолютный).
<img src="./images/3.jpg"/>

Атрибуты тега <img>
Атрибут Описание
src URL изображения
align left | right. Если задан, то делает картинку обтекаемой – все элементы под
картинкой будут огибать картинку, а не следовать под ней
width Ширина картинки в пикселях. Если не задана, то используется ширина
изображения
height Высота в пикселях. Если не задана, используется стандартная
vspace Отступ картинки в пикселях сверху и снизу от остального содержимого
страницы
hspace Отступ картинки в пикселях слева и справа от контента
• Если для картинки задана только ширина или только высота, то второй
параметр автоматически изменится так, чтобы сохранялись пропорции
оригинального изображения.

Разметка страницы
• Веб-страницы, как
правило, бывают
довольно большими.
• Чтобы ориентироваться в
таком коде, используются
семантические
контейнеры,
позволяющие разбить
страницу на смысловые
компоненты:
<body>
<div class="menu">

</div>
<div class="content">
<div class="heading">

</div>
<div class="services">

</div>
</div>
<div class="footer">

</div>
</body>

Задача 3.
• Создать сайт из трех страниц.
• В каждой странице вверху – меню из трёх ссылок на каждую из
страниц этого сайта. Также в шапке есть логотип (картинка),
который является ссылкой на первую страницу сайта.
• На первой странице – небольшой отформатированный рассказ с
подзаголовками.
• На второй странице – галерея из картинок с подписями и таблица с
картинками.
• На третьей странице – таблица с ценами на услуги и список услуг
(вложенный) с ссылками на описание соответствующей услуги в
Интернете.

Дополнительные материалы
Спецсимволы
https://html5book.ru/specsimvoly-html/
http://citforum.ru/internet/html/symbols
.shtml
Строчные теги форматирования
http://htmlbook.ru/html/type/inline
Валидатор W3C
https://validator.w3.org/
Справочник по тегам
https://webref.ru/html
Самоучитель HTML4
http://htmlbook.ru/samhtml
Создание таблиц - на MDN
https://developer.mozilla.org/ru/docs/L
earn/HTML/Tables/Basics
<img> на Webref
https://webref.ru/html/img

Основы языка HTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

Similaire à Основы языка HTML

Similaire à Основы языка HTML (20)

Plus de Denis Latushkin

Plus de Denis Latushkin (14)

Основы языка HTML