Как сделать сайт. Видео уроки HTML. Урок 2. Теги HTML p и h1…h6

Автор: . 18 Авг 2011 в 11:16

Start Up

Урок 1

Чтобы посмотреть второй видео-урок, пройдите по этой ссылке:

Второй видео-урок по HTML.

Ниже вы найдете текстовое описание второго видео-урока:

Откроем страницу “index.html”, которую мы создали на первом уроке, в текстовом редакторе notepad ++ и продолжим знакомиться с тегами HTML.

Во-первых, разобьем наш текст на параграфы и заголовки.
Сделаем мы это с помощью тегов HTML <p></p> и <h1></h1>….<h6></h6>.

То есть, дадим каждому параграфу название и, заодно, познакомимся с тегом, определяющим заголовки.
Этот тег существует в шести видах, начиная от самых крупных заголовков, которые обозначаются тегом <h1></h1> , и заканчивая самыми мелкими, обозначаемыми соответственно тегом <h6></h6>.

Давайте, первому параграфу мы дадим заголовок самым большим размером <h1></h1>, второму параграфу, размером чуть поменьше <h2></h2>, третьему, еще меньше <h3></h3>, ну и так далее – <h4></h4>, <h5></h5>, <h6></h6>.
Смотрим, что у нас получилось.

Здесь, я первый раз хочу обратить ваше внимание на то, что все элементы HTML делятся, в частности, на блочные и строчные.
Так параграфы и заголовки являются блочными элементами. Что это значит.
Это значит что каждому из этих кусочков текста можно придать ширину, высоту, обвести рамкой. И располагаются блочные элементы один под другим.
Как вы можете видеть, между всеми параграфами и заголовками присутствует некий пробел.
И если вы захотите убрать этот пробел, между первым и вторым параграфом, например, то вам нужно будет переделать один из этих элементов из блочного в строчный.

Убрать тег <p></p> вокруг второго параграфа и включить это текст в первый параграф. При этом, если вы хотите чтобы между этими двумя частями текста был абзац, но не было пробела между строк, то поможет вам в этом тег переноса<br>.  Его название происходит от английского слова break.
Этот тег, во-первых, является одинарным, во-вторых, строчным. Строчные элементы, могут располагаться в строке один за другим.

О свойствах строчных и блочных элементов, мы больше будем говорить в уроках по CSS, так как, в сущности, блочная верстка, базируется на этих свойствах.

К строчным относятся ещё два тега, которые мы рассмотрим в этом уроке. Тег <strong></strong>, который делает текст заключенный в него жирным, и тег <em></em>, который делает текст курсивом. Если вы хотите чтобы ваш текст был одновременно выделен и жирным и курсивом, то рекомендуется тег <em></em>, размещать внутри тега <strong></strong>, а не наоборот.  Пример: <strong><em>Текст</em></strong>.

В следующем,  третьем  видео уроке по HTML, поговорим о таком элементе, как <!DOCTYPE>, а также посмотрим что ещё, кроме тега <title></title>, находится в “голове” документа, то есть, внутри тега  <head></head>.

Урок 3

Лучшие статьи на ваш Email

Подпишитесь на рассылку:

Ваш e-mail: *
Ваше имя: *

Похожие статьи:

  1. Как сделать сайт. Видео уроки по HTML. Урок 1. Структура HTML документа
  2. Как сделать сайт. Часть 2. HTML и CSS.
Рубрики: HTML


Отзывов пока нет.

Ваш отзыв