Веб-разработка. Занятие №2. HTML
.pdfОсновы веб-разработки
2. HTML
Браузер — программа для просмотра сайтов.
Сайты состоят из веб-страниц, написанных на HTML.
HTML (HyperText Markup Language) — язык разметки гипертекста.
HTML «говорит» браузеру, где (в каком месте) и как (в каком виде) показывать ту или иную информацию.
Теги
HTML «разговаривает» с браузером с помощью специальных команд — ТЕГОВ.
Теги бывают 1) парные:
<имя_тега>какая-то информация</имя_тега> <p>Какой прекрасный сегодня день!</p>
2) одиночные (для них не требуется закрывающий тег):
<meta>, <br>, <hr>
Атрибуты тегов
Иногда требуется передать браузеру дополнительную информацию — в таких случаях внутри тегов появляются специальные параметры — атрибуты.
Атрибуты выглядят так: имя_атрибута='значение'
Пример тега с атрибутами: <meta charset='utf-8'>
Структура HTML-документа
<!DOCTYPE html> <html>
<head>
Здесь располагаются служебные теги, не видимые посетителю сайта, но сообщающие браузеру необходимую информацию для правильного отображения страницы.
</head>
<body>
Здесь располагаются теги с текстом, картинками, формами для ввода данных — всей информацией, которую мы видим на странице в браузере.
</body> </html>
Вложенность тегов
Неправильно:
<div><p>Привет, чуваки!</div></p>
Правильно:
<div><p>Привет, чуваки!</p></div>
Заголовки, параграф, перевод строки
<h1>Самый большой заголовок</h1>
<h2>Заголовок поменьше</h2>
…
<h6>Самый маленький заголовок</h6>
<p>Параграф — предназначен для оформления основного текста</p>
Первая строка текста<br> Вторая строка текста
Оформление текста
<b>жирный</b> <i>курсив</i> <u>подчеркнутый</u>
<sup>верхний индекс</sup> <sub>нижний индекс</sub>
Ссылки
Ссылки — это основа гипертекстовых документов.
Ссылки позволяют переходить с одной веб-страницы на другую, загружать файлы с сервера.
<a href='URL'>какой-то текст</a>
<a href='https://vk.com'>открыть ВК</a>
Ссылки
Абсолютные ссылки:
<a href='https://vk.com'>открыть ВК</a> Относительные ссылки:
<a href='/auto/nissan.html'>Nissan</a> <a href='about.html'>О компании</a>