Пятница, 29.03.2024, 13:01
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 65
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 основные HTML теги

Основные HTML теги

Во втором уроке мы рассмотрели пример создания простенькой страницы, где давались комментарии некоторых html тегов. Мне кажется, что лучше сначала показать что-то на примере, а потом перейти к более детальному изучению. Именно поэтому создание страницы было рассмотрено во втором уроке, а более детальное в третьем. Ниже Вы найдете описания распространенных html тегов. Поверьте, их хватит, чтобы написать целый сайт.

Основные HTML теги

1) <p></p> - выводит текстовый абзац (допускает параметр style, class, id). Довольно распространенный тег.

<p>Текстовый абзац. В принципе ничего интересного</p>

<p>А это другой абзац</p>

Преобразуется на странице в следующее:

Текстовый абзац. В принципе ничего интересного

А это другой абзац

К тегу можно ещё приписать параметр style:

<p style="различные значения"></p>

С помощью этих различных значений можно редактировать внешний вид текста. Читайте про эти параметры в отдельном уроке: стили в html.

Также можно прописать CLASS и ID.

2) <b></b> и <strong></strong> - два тега, которые позволяют сделать текст жирным. Разницы между этими тегами нет.
Приведем пример. Html код:

<b>жирный текст</b>

Преобразуется на странице в следующее:

жирный текст

3) <i></i> - курсивный текст (допускает параметр style, class, id)
Например, html код:

<i>курсивный текст</i>

Преобразуется на странице в следующее:

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

4) <u></u> - подчеркнутый текст (допускает параметр style, class, id)
Например, html код:

<u>подчеркнутый текст</u>

Преобразуется на странице в следующее:

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

5) <a href="links"></a> - создает ссылку (допускает параметр style, class и другие).
Например, html код:

<a href=http://zarabotkii.ru/>текст ссылки</a>

Преобразуется на странице в следующее:

текст ссылки  

Все параметры и атрибуты тега <a> будут рассмотрены в отдельном уроке: html тег a.

6) <h1></h1>,...,<h6></h6> - заголовки страницы (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.
Например, html код:

<h6>Заголовок h6</h6>

Преобразуется на странице в следующее:

Заголовок h6

7) <center></center> - выравнивает текст по центру.
Например, html код:

<center>Этот текст будет в центре</center>

Преобразуется на странице в следующее:

Этот текст будет в центре

Примечание
Рекомендуется не использовать тег <center></center>, а вместо него использовать:
<p style="text-align"> </p> - для текста
• <div style="text-align"> </div> - для всего (например, изображение)

8) <sub></sub> - выводит подстрочный текст.
Например, html код:

Обычный текст, <sub>подстрочный текст</sub>

Преобразуется на странице в следующее:

Обычный текст, подстрочный текст

9) <sup></sup> - выводит надстрочный текст.
Например, html код:

Обычный текст, <sup>надстрочный текст</sup>

Преобразуется на странице в следующее:

Обычный текст, надстрочный текст

10) <big></big> / <small></small> - выводит текст на один пиксель большего/меньшего размера (допускает параметр style, class, id).
Например, html код:

Обычный текст, <big>этот текст больше на один пиксель</big>

Преобразуется на странице в следующее:

Обычный текст, этот текст больше на один пиксель

11) <ul><li></li></ul> - выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li>.
Например, html код:

Список:

<ul>

<li>первый элемент списка</li>

<li>второй элемент списка</li>

</ul>

Преобразуется на странице в следующее:

Список:

    первый элемент списка
    второй элемент списка

12) <table></table> - создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами <tr></tr>, а столбец <td></td>.
Например, html код:

<table border=1>

<tr><td>1-строка 1 элемент</td><td>1-строка 2 элемент</td></tr>

<tr><td>2-строка 1 элемент</td><td>2-строка 2 элемент</td></tr>

</table>

Преобразуется на странице в следующее:

1-строка 1 элемент 1-строка 2 элемент
1-строка 1 элемент 1-строка 2 элемент

 

Все возможности тега <table> будут рассмотрены в отдельном уроке: html тег table.

13) <br/> - переход на следующую строку, представляет собой одиночный тег.
Например, html код:

Строка 1

<br/>

2-строка

<br/>

3-строка А этот текст будет на 3ей строке, поскольку перехода не было

Преобразуется на странице в следующее:

1-Строка
2-строка
3-строка
А этот текст будет на 3ей строке, поскольку перехода не было

14) <hr/> - чертит линию, представляет собой одиночный тег (допускает параметр style, class).
Например, html код:

Какой-то текст над линией

  <hr>

А этот текст будет уже под линией

Преобразуется на странице в следующее:

Какой-то текст над линией


А этот текст будет уже под линией

15) <img src="ссылка_на_изображение"> - выводит изображение, представляет собой одиночный тег (допускает параметр style, class).
Например, html код:

<img src="http://www.zarabotkii.ru/uroki/7.jpg" border="0" alt="" />

Преобразуется на странице в следующее:

Все возможности тега <img> будут рассмотрены в отдельном уроке: html тег img.

16) <font></font> - для смены стиля текста (допускает параметр style, class, id).
Например, html код:

<font style="color:green; font-size:17px;">

Этот текст зеленый, а его размер

16 пикселей

</font>

Преобразуется на странице в следующее:

Этот текст зеленый, а его размер 16 пикселей

Примечание
Аналогичным тегом является <span></span>.


17) <form></form> - создание формы на странице (допускает параметр style, class).
Подробное описание этого тега читайте: html тег form.


18) <div></div> - служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега <div> задача упростилась. Практически все сайты содержат <div> блоки, как удобную альтернативу таблицам.
Подробное описание этого тега читайте: html тег div.


19) <!--комментарий--> - служит для добавления комментариев в коде html. Все, что заключено между <!-- и --> является комментарием и не отображается на интернет странице. Комментарии очень удобны и позволяют упростить код, делая его более понятным. Приведем простой пример:

 <body>

   <!--верхушка сайта-->

    <div class="top">Здесь содержится верхушка сайта</div>

  <!--конец верхушки сайта-->

   <!--левое меню-->

  <div class="leftblock">Левая часть сайта, здесь может быть различное меню, реклама и т.д.</div>  <!--конец левого меню-->

  <!--контент страницы-->

           <div class="content">Содержательная часть страницы</div>

    <!--конец контента страницы-->

               </body>

В html есть ещё пару важных тегов, о которых выше не было рассказано. Я имею ввиду заголовочные теги, однако на данном уровне Ваших познаний, мне кажется, что их изучение пока преждевременно. Для начала нужно разобраться с базовыми тегами.


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

Ссылка на следующий урок:
Урок 4. Style в html

← Перейти в каталог html уроков и советов

Copyright MyCorp © 2024
Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz