Базовые html теги
(Проголосуй)
Сегодня мне на email пришло письмо, которое и натолкнуло меня на написание этой статьи. В письме человек попросил меня научить его делать сайты, я посоветовал ему несколько моих статей, но потом подумал и понял, что новичкам нужно начинать немного с другого.
Поэтому сегодня я расскажу вам с чего нужно начинать, чтобы научится делать сайты. Многие из вас (я подозреваю, что все) уже знакомы с языком разметки гипертекста – HTML. Но найти современный дельный учебник по этому языку достаточно сложно, да и «воды» много в учебниках.
Пожалуй начнем с того, что каждая страничка в интернете имеет две части. Функциональную часть (head) и основную часть (body). Обе они заключены в тег <html> который показывает браузеру то, что это html документ.
Все вместе это выглядит следующей конструкцией:
<html>
<head></head>
<body></body>
</html>
Теперь я расскажу вам, почему каждый из этих трех тегов продублирован и дубликат имеет обратный слешь на конце. Дело в том, что почти все теги в языке Html – парные, то есть имеют закрывающий тег (тот самый дубликат) после себя.
Спросите зачем? Для того, чтобы отделить эти части друг от друга. Так как текст в этих частях может занимать ни одну и не две строчки.
Теперь про два из этих тегов, чуть подробнее. В теге <head>, как правило, находятся заголовок, ссылка на файл со стилями (CSS) и ссылки на различные скрипты. Но сегодня мы остановимся на заголовке.
Чтобы задать Html страничке свой заголовок нужно между двумя тегами функциональной части добавить еще один парный тег, а именно тег <title></title>.
В итоге вся конструкция будет выглядеть следующим образом:
<html>
<head>
<title>Тут заголовок</title>
</head>
<body></body>
</html>
Если открыть текстовый документ, написать там эту конструкцию и сохранить в формате html, потом открыть в браузере, то вы получите белую страничку с заголовком.
Теперь попытаемся добавить текст на эту страничку. Вот несколько тегов, которые отвечают за формирование текста в html документе:
<p>Тут один параграф текста</p>
<b>Жирный текст</b>
<i>Курсив</i>
<h1>Самый крупный заголовок первого уровня</h1>
<h6>Самый мелкий заголовок шестого уровня</h6>
Итак попробуем написать небольшой текст с заголовком, выделением параграфов, выделением жирным и курсивным шрифтом.
<html>
<head>
<title>Моя первая страничка с использованием HTML.</title>
</head>
<body>
<h1>Вот моя первая страничка на html с использованием современных тегов.</h1>
<p>На <b>этой</b> страничке я попытаюсь рассказать вам, как я делаю такие сайты.</p>
<p>Вначале я создаю новый документ с разрешением <i>HTML</i> и начинаю записывать в него основные теги. </p>
<p>Потом добавляю текст, заголовок и сохраняю.</p>
</body>
</html>
Вот как это будет выглядеть в браузере:
Также текст и другие части html документа можно выровнять по центру, левому и правому краям. Для этого нужно дописать параметр align (выравнивание).
К примеру если текст в одном из параграфов мы хотим выровнять по центру, пишем:
<p align=center>Этот текст выровнян по центру</p>
Теперь я расскажу вам про тег, который поможет вам разделять текст по смыслу. Тег линии – <hr>. Это непарный тег, к нему не нужно дописывать закрывающийся тег со слешем.
Этот html тег имеет несколько параметров. А именно width (ширина) и size(толщина). Оба значения дописываются внутрь тега так же как и выравнивание.
Например нам нужно создать линию шириной 150 пикселей и толщиной в шесть пикселей, выравненную по центру. Для этого пишем:
<hr width=150 size=6 align=center>
Существует также еще один непарный тег, который может быть полезен при создании вашей странички. Тег <br> этот тег отвечает за перенос строки. Просто ставите его в том месте, где нужно закончить строчку.
Ну, думаю на сегодня всё. Не скучайте