Отправляет email-рассылки с помощью сервиса Sendsay

Свежие уроки CSS3, HTML5, jQuery

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 142 RSS
  Апрель 2014   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней 12 выпусков (1-2 раза в неделю)


Открыта: 27-04-2014

Автор
Юрий Немец

Статистика

142 подписчиков
0 за неделю
←   Все выпуски   →

Свежие уроки CSS3, HTML5, jQuery Урок 2. Параграфы, заголовки


Урок 2. Параграфы, заголовки

Здравствуй, уважаемый читатель.

Сегодня мы изучим параграфы и заголовки. Для чего используются заголовки? Почему необходимо применять параграфы? Вы найдете ответы в данном уроке.


Это вторая статья, посвященная изучению html. Если вы не прошли первый урок, рекомендую его пройти — Первый урок.

Теория и практика

Сегодня мы поговорим о параграфах и заголовках.

Параграфы

Начнем с параграфов. В примере нашей первой страницы мы уже написали тег <p>.

1
2
3
4
5
6
7
8

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Начало обучения технологии html</p>	
</body>
</html>

Если текст находится внутри данного тега, тогда его можно красиво оформить(чем мы и займемся на уроках по css). Но даже без css текст можно центрировать, либо представить справа или слева с помощью атрибута align.

Если вы хотите представить текст по центру необходимо написать:

1
2
3
4
5
6
7
8

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p align="center">Начало обучения технологии html</p>	
</body>
</html>

Выглядеть в браузере это будет:
Параграф по центру в браузере

Если вы хотите представить текст слева необходимо написать:

1
2
3
4
5
6
7
8

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p align="left">Начало обучения технологии html</p>	
</body>
</html>

Выглядеть в браузере это будет также, если бы вы не писали. Но иногда приходится писать данный атрибут специально:
Параграф слева в браузере

Если вы хотите представить текст справа необходимо написать:

1
2
3
4
5
6
7
8

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p align="right">Начало обучения технологии html</p>	
</body>
</html>

Выглядеть в браузере это будет:
Параграф по слева в браузере

НО! Параграф не должен содержать в себе другие параграфы и блоки типа div.

Я не хочу долго заморачиваться на счет параграфов и их атрибутов. Для того чтобы уметь редактировать шаблон и верстать знать все теги наизусть нет необходимости. Поэтому пойдем дальше.

Заголовки

Заголовки важны тем, что чем больше заголовок и его «вес», тем он более значим. Это важно для робота, который индексирует ваш сайт. Тогда он точно видит, что есть название статьи. Всего 6 уровней заголовков. Первый уровень <h1></h1> и последний шестой <h6></h6>.
В коде html страницы это выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Начало обучения технологии html</p>
    <h1>Заголовок первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <h3>Заголовок третьего уровня</h3>
    <h4>Заголовок четвертого уровня</h4>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
</body>
</html>

А в браузере:
Заголовки в браузере

Вот так пишутся заголовки. Ничего сложного нет абсолютно!

Я выкладываю код, чтобы вам было легче разобраться. НО! Попробуйте обязательно прописать всё РУКАМИ с нуля! Тогда вы лучше запомните теги.

Больше практикуйтесь!
В избранное