HTML 2, Структура и текстовые теги

Дата 25/07/2011 | Категория Уроки HTML..

А теперь поговорим о структуре HTML )

Много знать о ней в начале не нужно, запомните только несколько тегов, которые должны всегда присутствовать на странице, они не будут отображаться в браузере, но они обязательные.

Давайте рассмотрим их в примере.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Название страницы, отображается в верхней части страницы</title>
</head>

<body>
Видимая часть
</body>
</html>

Вставляем в блокнот, сохраняем с расширением “.html” (кто не помнит, то прочитайте урок 1) и открываем нашим любым браузером, и смотрим, что у нас получилось )

А теперь обратите внимание на сам код в примере, самый первый тег HTML, внутри него все содержание страницы, далее идет тег HEAD, все что внутри него, не отображается на странице, это больше информационный тег, он несет в себе несколько определяющих тегов, это описания страницы, кодировку страницы, линки на стили и скрипты.

В данном примере внутри тега HEAD, находятся еще два тега, META и TITLE. В META мы задали кодировку UTF 8, а в TITLE название страницы.

Далее идет тег BODY, вот в нем все содержимое нашей страницы будет, все что внутри этого тега, это видимая часть.

Вот теперь перейдем к изучению наших первых тегов:

  • h1, h2, h3, h4, h5, h6 -теги заголовков, например h1 – это самый большой заголовок, а h6 – самый мелкий )
  • p – тег обозначающий абзац.
  • strong – делает шрифт жирным
  • em – курсивный текст
  • br – переход на новую строчку, вот он является исключением, не имеет закрывающий тег.

А теперь давайте рассмотрим их на примере:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Название страницы, отображаеться в верхней части страницы</title>
</head>

<body>
<h1>Заголовок</h1>
<p>
  Какое либо текстовое содержание страницы.<br>
  Перешли на новую строчку.
</p>
<p>
  <strong>Второй абзац</strong> - <em>какое либо описание, либо текст</em>
</p>
</body>
</html>

Вставляем в блокнот данный код, сохраняем с расширением “.html” (кто не помнит, то прочитайте урок 1), и смотрим что у нас получилось )

Ну на этом урок заканчиваем, в следующем уроке, начнем разбирать блочные теги.

2011 © Блог веб разработчика