Урок 2. Заголовок, текст и его форматирование на HTML

Вчера мы прошли первый урок, а сегодня продолжим наши занятия. Перед тем как продолжим, хочу начать с редактора кода. В предыдущем уроке я упомянул Sublime Text 2 и показал пример кода на нём, и на обычном Блокноте. Разница конечно же ощутима, и отличается глобально. Далее советую верстать на нём, ну или на Notepad++ (тоже очень хороший редактор кода).
Давайте установим Sublime Text 2. Скачать его можно здесь. Выберите версию операционной системы и качайте. Далее простая установка. Он время от времени просит денег, но от этого ничего не меняется, он все равно работает. Он бесплатный.
Открываем index.html с его помощью, и начинаем :)
Вспоминаем первый урок, и появляется это:

<!doctype html>
<html>
<head>
<title>Учебная страница</title>
<meta charset="utf-8" />
</head>
<body>

</body>
</html>

В сегодняшнем уроке я покажу как форматируется текст. Начнем с заголовков, они обозначаются такими тегами:

<h1></h1>

Есть также заголовки второго уровня (подзаголовки) “h2″, третьего уровня “h3″ … до шестого уровня “h6″. Наличие заголовков разных уровней очень полезно для сайта при ранжировании страниц поисковой системой!!!
Сам же текст берём в такие теги:

<p></p>

Вместе должно выглядеть так:

<!doctype html>
<html>
<head>
<title>Учебная страница</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Заголовок текста</h1>
<p>А вот и сам текст с которым мы будем работать.</p>
</body>
</html>

Теги заголовка писать обязательно, иначе он не будет заголовком, а всего лишь обычным текстом, а вот если не написать тег текста, то визуально ничего не изменится, но когда мы будем использовать CSS стили, то если какой либо кусок текста не будет взять в тег, к нему не будет применяться форматирование. Давайте договоримся так: Мы будем всегда использовать ВСЕ теги, без исключения. Это будет полезным для вас!
Сейчас попробуем выделить какое либо слово. Например тегом “эмфасис” который акцентирует на каком либо куске текста выделяя его курсивом, в HTML применяется тегами:

<em></em>

Применим к какому либо слову, например к слову «которым». Применяется так:

<!doctype html>
<html>
<head>
<title>Учебная страница</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Заголовок текста</h1>
<p>А вот и сам текст с <em>которым</em> мы будем работать.</p>
</body>
</html>

Жирным выделяется с помощью тегов:

<strong></strong>

И выглядит это так:

<!doctype html>
<html>
<head>
<title>Учебная страница</title>
</head>
<body>
<h1>Заголовок текста</h1>
<meta charset="utf-8" />
<p>А вот и сам текст с <em>которым</em> мы будем <strong>работать</strong>.</p>
</body>
</html>

И так, мы написали кусок текста, с заголовком и выделили одно слово жирным, а одно «эмфасисом». Давайте откроем в браузере и посмотрим всё ли правильно мы сделали. Не забудьте сохранить изменения (Ctrl+S).
tegi_h1_p_em_strong_formatirivanie
У меня всё работает! Надеюсь у вас тоже. Если нет ищите ошибки! Следующий урок читайте завтра.
Чуть не забыл. Если у вас в браузере текст отображается непонятными символами, нужно перекодировать сам документ index.html в кодировку UTF-8.

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>