slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 1919
Теги: html, tags, img, tag, div

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

basic HTML3

Как я уже заметил в предыдещей статье "Основы HTML. Урок №2. Структура страницы." теги бывают парные и не парные, а так же там я дал определение тега, рассказал, что это вообще такое, в этой статье мы не будем на таком останавливаться.

Тег <p></p>

Этот тег один из наиболее распространенных. Тег абзаца, проще говоря в такой тег помещают текст, или большой текст, чтобы его было легче прочитать разделают на абзацы и каждый из них помещают в такой тег.

Код примера:

 

<p>На третий день после ссоры князь Степан Аркадьич Облонский - Стива, как его звали в свете, - в обычный час, то есть в восемь часов утра, проснулся не в спальне жены, а в своем кабинете, на сафьянном диване.. Он повернул свое полное, выхоленное тело на пружинах дивана, как бы желая опять заснуть надолго, с другой стороны крепко обнял подушку и прижался к ней щекой; но вдруг вскочил, сел на диван и открыл глаза.</p>
<p>"Да, да, как это было? - думал он, вспоминая сон. - Да, как это было? Да! Алабин давал обед в Дармштадте; нет, не в Дармштадте, а что-то американское. Да, но там Дармштадт был в Америке. Да, Алабин давал обед на стеклянных столах, да, - и столы пели: Il mio tesoro, и не Il mio tesoro, а что-то лучше, и какие-то маленькие графинчики, и они же женщины", - вспоминал он.</p>

 

Пример:

На третий день после ссоры князь Степан Аркадьич Облонский - Стива, как его звали в свете, - в обычный час, то есть в восемь часов утра, проснулся не в спальне жены, а в своем кабинете, на сафьянном диване.. Он повернул свое полное, выхоленное тело на пружинах дивана, как бы желая опять заснуть надолго, с другой стороны крепко обнял подушку и прижался к ней щекой; но вдруг вскочил, сел на диван и открыл глаза.

"Да, да, как это было? - думал он, вспоминая сон. - Да, как это было? Да! Алабин давал обед в Дармштадте; нет, не в Дармштадте, а что-то американское. Да, но там Дармштадт был в Америке. Да, Алабин давал обед на стеклянных столах, да, - и столы пели: Il mio tesoro, и не Il mio tesoro, а что-то лучше, и какие-то маленькие графинчики, и они же женщины", - вспоминал он.

Тег <div></div>

По моему скромному мнению, самый часто используемый тег и самый полезный. Этот тег сообщает браузеру о блоке, в блоке может содержатся все, что угодно - картинки, текст, таблицы, видео. Используют его чаще всего для того, чтобы придать странице необходимую структуру. Если закинуть в него просто текст, никаких изменений не произойдет, но если использовать стили на этот блок, то текст будет преображаться, это уже ближе по теме к языку CSS.

Тег <img>

Данный тег сообщает браузеру о картинке на странице, задавая в этом теге адрес картинки, открывая его браузер будет показывать именно картинку.

Код примера:

 

<img src="http://l.foto.radikal.ru/0701/4bd6ed64fc81.jpg" />

 

Пример:

Тег <br/>

Тег вынужденного переноса строки или простоп переноса строки, используеться в разных случаях, если необходимо разделить текст или картинки или еще что-то.

Код примера:

 

<p>В этот момент происходит перенос строки на следующую строчку...<br>Продолжаем писать текст или что-то еще...</p>

 

Пример:

В этот момент происходит перенос строки на следующую строчку...
Продолжаем писать текст или что-то еще...

Тег <ul></ul> и <ol></ol> (а так же вспомогательный <li></li>)

Довольно часто при создании страничек используют списки, которые могут быть двух типов - нумерованные и маркерованные, так вот тег <ul> создает маркерованный список, а тег <ol> - нумерованный. Для того, чтобы добавить новый пункт в любой из таких списков нужно добавить теги <li></li>, которые по своей сути и представляют элемент списка.

Код примера:

 

<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>

 

Пример:

  • Первый пункт
  • Второй пункт
  • Третий пункт
  1. Первый пункт
  2. Второй пункт
  3. Третий пункт

Теги модификации текста - <b></b>, <i></i>, <u></u>, <s></s>

Специальные теги, которые всячески модифицируют текст, например тег <b> - делает текст полужирным, тег <i> - курсивом, а тег <u> - подчеркивает текст, последний тег из представленных тут <s> - перечеркивает текст по середине.

Код примера:

 

<p>Обычный текст</p>
<p><b>Полужирный текст</b></p>
<p><i>Курсивный текст</i></p>
<p><u>Подчеркнутый текс</u></p>
<p><s>Перечеркнутый текст</s></p>

 

Пример:

Обычный текст

Полужирный текст

Курсивный текст

Подчеркнутый текс

Перечеркнутый текст

Теги заголовков вида <hx></hx>

Такие теги модифицируют текст в зависимости от номера x = от 1 до 6, присвоенных тегу. При этом самым большим считаеться h1 и в порядке уменьшения размера идут следующие. Этот тег важен для поисковых систем, которые замечают первым делом большие заголовки и остальные не очень. Просмотрим пример, чтобы получше понять.

Код примера:

 

<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h3>Заголовок</h3>
<h4>Заголовок</h4>
<h5>Заголовок</h5>
<h6>Заголовок</h6>

 

Пример:

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок
Заголовок

Тег ссылки <a></a>

Последний тег, о котором мы расскажем - тег ссылки <a></a>, который сообщает браузеру что данный текст, находящийся в этом теге должен расцениватся как ссылка и при помощи атрибута href должен вести на определенную страницу.

Код примера:

 

<a href="http://web.cofp.ru/">Ссылка на наш сайт</a>

 

Пример:

Ссылка на наш сайт

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

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • ZOMRO
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Основы HTML. Урок №1. Как создать HTML документ?

С этой статьи я начинаю свой цикл, посвященный основам HTML, где я буду доступным и постараюсь понятным для новичков языком объяснять основы данного веб-языка.

Теги:

html, document, file

Комментариев: 0 Подробнее
Основы HTML. Урок №2. Структура страницы.

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

Теги:

html, title, body, head

Комментариев: 0 Подробнее
Основы HTML. Урок №4. Атрибуты, их значения и роли всего этого в HTML

Итак, мы переходим к следующему уроку по изучению языка программирования HTML. На этом этапе я расскажу вам, что такое атрибуты тега и их значения и какие они бывают (некоторые примеры).

Теги:

html, tags, attribute, tag

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
А Вы уже приобрели защиту от всех известных DDoS-атак (L2-L7)? Наши преимущества: Защищаем от атак ...
Перейти в тему
ZOMRO аватар
Жаркое лето дарит горячие бонусы для наших партнёров! Вознаграждение до 40% от всех платежей и прив...
Перейти в тему
ZOMRO аватар
VIP-тарифы для Вас! Высокопроизводительные VDS/VPS по VIP-тарифам будет отличным решением для тех, ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.