Это третья статья, в цикле изучения основ HTML и в ней я расскажу вам о некоторых тегах, который используются в теле документа.
Как я уже заметил в предыдещей статье "Основы HTML. Урок №2. Структура страницы." теги бывают парные и не парные, а так же там я дал определение тега, рассказал, что это вообще такое, в этой статье мы не будем на таком останавливаться.
Тег <p></p>
Этот тег один из наиболее распространенных. Тег абзаца, проще говоря в такой тег помещают текст, или большой текст, чтобы его было легче прочитать разделают на абзацы и каждый из них помещают в такой тег.
Код примера:
Пример:
На третий день после ссоры князь Степан Аркадьич Облонский - Стива, как его звали в свете, - в обычный час, то есть в восемь часов утра, проснулся не в спальне жены, а в своем кабинете, на сафьянном диване.. Он повернул свое полное, выхоленное тело на пружинах дивана, как бы желая опять заснуть надолго, с другой стороны крепко обнял подушку и прижался к ней щекой; но вдруг вскочил, сел на диван и открыл глаза. "Да, да, как это было? - думал он, вспоминая сон. - Да, как это было? Да! Алабин давал обед в Дармштадте; нет, не в Дармштадте, а что-то американское. Да, но там Дармштадт был в Америке. Да, Алабин давал обед на стеклянных столах, да, - и столы пели: Il mio tesoro, и не Il mio tesoro, а что-то лучше, и какие-то маленькие графинчики, и они же женщины", - вспоминал он. |
Тег <div></div>
По моему скромному мнению, самый часто используемый тег и самый полезный. Этот тег сообщает браузеру о блоке, в блоке может содержатся все, что угодно - картинки, текст, таблицы, видео. Используют его чаще всего для того, чтобы придать странице необходимую структуру. Если закинуть в него просто текст, никаких изменений не произойдет, но если использовать стили на этот блок, то текст будет преображаться, это уже ближе по теме к языку CSS.
Тег <img>
Данный тег сообщает браузеру о картинке на странице, задавая в этом теге адрес картинки, открывая его браузер будет показывать именно картинку.
Код примера:
Пример:
![]() |
Тег <br/>
Тег вынужденного переноса строки или простоп переноса строки, используеться в разных случаях, если необходимо разделить текст или картинки или еще что-то.
Код примера:
Пример:
В этот момент происходит перенос строки на следующую строчку... |
Тег <ul></ul> и <ol></ol> (а так же вспомогательный <li></li>)
Довольно часто при создании страничек используют списки, которые могут быть двух типов - нумерованные и маркерованные, так вот тег <ul> создает маркерованный список, а тег <ol> - нумерованный. Для того, чтобы добавить новый пункт в любой из таких списков нужно добавить теги <li></li>, которые по своей сути и представляют элемент списка.
Код примера:
Пример:
|
Теги модификации текста - <b></b>, <i></i>, <u></u>, <s></s>
Специальные теги, которые всячески модифицируют текст, например тег <b> - делает текст полужирным, тег <i> - курсивом, а тег <u> - подчеркивает текст, последний тег из представленных тут <s> - перечеркивает текст по середине.
Код примера:
Пример:
Обычный текст Полужирный текст Курсивный текст Подчеркнутый текс
|
Теги заголовков вида <hx></hx>
Такие теги модифицируют текст в зависимости от номера x = от 1 до 6, присвоенных тегу. При этом самым большим считаеться h1 и в порядке уменьшения размера идут следующие. Этот тег важен для поисковых систем, которые замечают первым делом большие заголовки и остальные не очень. Просмотрим пример, чтобы получше понять.
Код примера:
Пример:
ЗаголовокЗаголовокЗаголовокЗаголовокЗаголовокЗаголовок |
Тег ссылки <a></a>
Последний тег, о котором мы расскажем - тег ссылки <a></a>, который сообщает браузеру что данный текст, находящийся в этом теге должен расцениватся как ссылка и при помощи атрибута href должен вести на определенную страницу.
Код примера:
Пример:
Ссылка на наш сайт |
Ну вот пожалуй и все основные теги, о которых вы должны знать обязательно, если вас заинтересовала данная тема, то более детальное описание каждого тега, а так же множество других тегов вы можете найти на сайт-справочнике.
Добавить комментарий
Авторизоваться с помощью: