Ваши первые 10 тегов в HTML
Этот урок расскажет вам о 10 базовых HTML тегов которые вам необходимо запомнить. В конце урока вы найдете пример страницы, где будут использованы все 10 тегов, и наглядно продемонстрировано как они сочетаются.
Теги и элементы
HTML тег это специальное слово или буква заключенная в острые скобы, <a>. В HTML теги используются для создания элементов, такие как абзацы, блоки или ссылки.
Большинство элементов имеют открывающий тег и закрывающий тег — например параграф имеет открывающий тег <p>, затем идет текст, и закрывающий тег </p>.
Некоторые элементы не имеют закрывающего тега. Это так называемые пустые элементы. Например <br> используемый для разрыва линии.
Если вам доведется работать с XHTML, то там нужно будет прописывать самозакрывающиеся теги — к примеру <br />.
Давайте взглянем поближе на каждый тег поотдельности.
1. <html> … </html> — Корневой элемент
Любая веб страница начинается с элемента html. Его еще можно назвать корневым элементов, так как он стоит в основе всего дерева элементов из которых состоят страницы.
Для того чтобы создать элемент html, нужно написать открывающий тег <html> и его закрывающего родича </html>. Все остальное на вашей веб странице будет находится внутри этих 2 тегов:
|
1 2 3 |
<html> (остальные элементы будут находится тут) </html> |
2. <head> … </head> — Верхушка документа
Элемент head содержит информацию о веб странице и дополнительные сведения для веб браузера. В этот элемент прописываются другие элементы необходимые для корректного отображения страницы, информация для поисковиков, стили, скрипты.
- title (описано ниже)
- link (подключаем файлы стилей и favicon)
- meta (описание страницы, ключевые слова, кодировка документа
- script
Пример типичного элемента head:
|
1 2 3 4 5 6 7 8 |
<head> <title>Приключения в мире веб разработки</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Основы html, css, javascript и все что с этим связано."> <meta name="keywords" content="html, css, javascript, js, уроки"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> |
3. <title> … </title> — Заголовок страницы
Как понятно из названия, в этом теге содержится заголовок страницы. Он отображается в самой верхней части веб браузера, в закладках, поисковых результатах и прочих местах где мы можем увидеть название страницы.
Заголовок страницы должен кратко и емко передавать ее содержимое. Постарайтесь каждой вашей странице дать уникальное имя.
Пример:
|
1 |
<title>Приключения в мире веб разработки</title> |
4. <body> … </body> — Содержимое страницы
Элемент body идет следом за head. Именно в нем и содержится весь контент страницы, текст, картинки, таблицы и т.д. Любая страница может содержать лишь один элемент body, исключением могут быть лишь страницы основанные на фреймах, но это очень редко используется и мы не будем вдаваться в детали (если вам все-же интересна тема фреймов, напишите об этом в комментариях).
Пример формата элемента body:
|
1 2 3 |
<body> (Ваш контент должен быть тут) </body> |
5. <h1> … </h1> — Заголовок секции
Такие заголовки помогают визуально разбивать контент страницы. Они работают по тому-же принципу что и абзацы в книгах или печатных статьях.
В HTML используется 6 заглавных элементов: h1, h2, h3, h4, h5, и h6. h1 для самых важных заголовков, h2 для менее важных и так далее по очередности. Обычно не требуется использовать более 3 типов, за исключением если ваша страница очень длинная и сложная.
Пример заглавного элемента h1 :
|
1 |
<h1>Приключения юного веб разработчика</h1> |
6. <p> … </p> — Параграф
Элемент p создает текстовые параграфы. Большинство браузеров отображают каждый параграф с вертикальным отступом друг от друга.
В принципе текст можно разделять и с помощью тега <br>, вставляя пустые строки между разделами текста, но гораздо лучше использовать тег <p>, так как он показывает браузерам и поисковиками структуру вашего документа.
Пример параграфа:
|
1 |
<p><b>Программирование</b> может быть средством заработка, увлечением (хобби), и, в конце концов, это искусство.</p> |
Хорошим тоном в написании ваших текстов будет разделять параграфы по содержанию, общей мысли, точки зрения или темы. Если вы хотите описать 2 разные точки зрения относительно одной темы, напишите это в 2х параграфах.
7. <a> … </a> — Ссылка
Одним из самых важных элементов на любой странице является возможность ссылаться на другие страницы, причем как на свой сайт, так и на другие.
Чтобы создать ссылку используется тег <a> с его закрывающим собратом </a>, именно в него вписывается URL нужной страницы.
Пример ссылки на www.example.com:
|
1 |
<a href="http://www.example.com/">Посетите отличный сайт</a> |
8. <img> — Изображение
Элемент img используется для вставки изображений на ваши страницы. Для того чтобы вставить изображение его, для начала, нужно выгрузить на ваш веб сервер, а затем уже вписать в тег <img> путь к файлу.
К примеру:
|
1 |
<img src="myphoto.jpg" alt="Мое эпическое фото"> |
Атрибут alt следует применять ко всем картинкам. В нем содержится описание для браузеров которые не отображают изображения, предлагая посетителю, в качестве альтернативы, описание.
9. <div> … </div> — Блочный элемент
Элемент div используется для структурирования контента вашей страницы. К примеру вы хотите объеденить несколько параграфов или заголовков отобразить в от отдельном блоке на странице.
Типичные тег <div> используется для таких штук:
- Шапка и подвал страницы
- Колонки контента
- Специфические области на странице (а примеру рекламные)
- Галереи изображений
Добавляя атрибут class и/или id вы сможете стилизовать эти элементы с помощью CSS. Собственно этот элемент и является основой страниц собранных на CSS.
Пример использования элемента <div> для создания сайдбара на странице:
|
1 2 3 4 5 |
<div id="sidebar"> <h1>Заголовок сайдбара</h1> <p>Текст сайдбара</p> <p>И еще немного сайдбара</p> </div> |
10. <span> … </span> — Дополнительный контейнер для контента
Элемент span очень похож на div в плане организации структуры контента. Разница в том, что span по сути является дополнительной оболочкой для строчных элементов:
- Блочные элементы, такие как div, h1 и p созданы для того чтобы в них помещать большие порции контента, вроде параграфов текста. И блочный элемент в коде всегда пишется с новой линии.
- Строчные элементы, вроде span, a, или img призваны для мелкого отображения или стилизации информации — ссылка, фраза, предложение, внутри большого блока контент. Строчный элемент в коде не требует написания с новой линии. Блочные элементы могут содержать строчные, а строчные элементы НЕ могут содержать блочные.
Как и div, к элементу span можно добавлять атрибут class и/или id, и в дальнейшем стилизовать с помощью CSS.
Пример использования элемента span:
|
1 |
<p>Некоторые товары могут быть <span class="product">отличными</span>, <span class="product">дешевыми</span>, и <span class="product">доступными</span>.</p> |
А теперь все вместе!
Мы рассмотрели 10 важных элементов которые встречаются на 99% страниц в интернете, посмотрим как они выглядят:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <title>Приключения в мире веб разработки</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Основы html, css, javascript и все что с этим связано."> <meta name="keywords" content="html, css, javascript, js, уроки"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> <h1>Приключения разработчка</h1> <div id="mainContent"> <p>Программирование может быть средством заработка, увлечением (хобби), и, в конце концов, это искусство.</p> <p>Отличное фото</p> <img src="photo.jpg" alt="photo"> </div> <div id="sidebar"> <h2>Покупайте нашу продукцию!</h2> <p>Некоторые товары могут быть <span class="product">отличными</span>, <span class="product">дешевыми</span>, и <span class="product">доступными</span>.</p> </div> </body> </html> |
Собственно вы видите, что даже с помощью этих 10 элементов можно создать самую простую HTML страницу. Готовы двигаться дальше?
Источник: http://www.elated.com
