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

Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете  именно те 20% тегов, которые Вам будут необходимы всегда.osnovnye_html_tegi_koda


Как в любом языке, да и в жизни здесь действует правило парето 20/80 (20% дел имеет 80% важности для достижения нужного результата), что означает — достаточно знать всего 20% кодов, чтобы уверенно достигать своих целей в сайтостроении.

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

HTML язык — это самый наипростейший язык! Если Вы решили его изучить, то важно понять с самого начала, что в этом нет ни какой сложности. С уверенностью можно сказать, что в школе детям, на уроке информатики намного сложней приходиться.

Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».

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

HTML теги для создания каркаса сайта

Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».

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

  • <!DOCTYPE HTML PUBLIC «-//w3c//DTD HTML 4.01 Transitional//EN»- указание версии
  • <html> </html> — сообщают браузеру, что все, что находится между ними, это есть html код;
  • <head> </head> — с англ. «голова», содержит название, кодировку, мета теги для поисковиков;
  • <title>НАЗВАНИЕ</title> — мета тег, в основном для поисковиков, внутри содержит название документа, отображается вверху  браузера;
  • <meta http-eguiv=»Content-Type» content=»text/html; charset=windows-1251″> — одинарный тег указывающий браузеру кодировку языка, где windows-1251 — говорит о том, что текст данной страницы на русском языке (windows-1252 — для английского языка);
  • <meta name=»keywords» content=»КЛЮЧЕВЫЕ СЛОВА»> — для ключевых слов сайта;
  • <meta name=»description» content=»ОПИСАНИЕ»> — краткое содержание страницы;
  • <body>ТЕЛО ДОКУМЕНТА</body> — с англ. «тело», содержит всю страницу сайта.

Это были стандартные теги html кода, с которых, без изменений должны начинается все страницы сайта/блога в таком виде:

<!DOCTYPE HTML PUBLIC «-//w3c//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>
<head>
<title></title>
<meta http-eguiv=»Content-Type» content=»text/html; charset=windows-1251″>
<meta name=»keywords» content=»»>
<meta name=»description» content=»»>
</head>
<body></body>
</html>

Список html тегов находящихся в теле страницы

Между тегами <body></body> будет находится само тело страницы сайта где:

  • <h1>заголовок</h1> — самый важный заголовок 1 уровня;
  • с <h2>подзаголовок</h2> по <h6> подзаголовок </h6> — соответственно подзаголовки 2, 3, 4, 5 и 6 уровня;
  • <a href=»http://www.адрес.ru» target=»_blank» title=»название»>анкор ссылки</a> — ссылка, где » target=»_blank»» — атрибут отвечающий за открытие в новом окне, » title=»» название того, на что будет ссылка;
  • <strong></strong> и <b></b> — теги для выделения жирным. «<b></b>» устарели и рекомендуется использовать «<strong></strong>»;
  • <em></em> — для выделения курсивом;
  • <img src=»путь к изображению» width=»ширина» height=»высота» alt=»описание»> — одинарный тег, отвечающий за вставку изображения на странице;
  • <p></p> —  «p» от англ. «параграф», а значит делит текст на параграфы. По умолчанию выравнивается по левому краю;
  • <br> — логический тег означающий конец строки и переход на следующую;
  • <p align=»center»></p> — атрибут выравнивающий текст по центру;
  • <p align=»right»></p> — атрибут выравнивающий текст по правому краю;
  • <font color=»green» face=»verdana» size=»3″></font> —
  • color=»green» отвечает за цвет текста. В данном случае стоит зеленый. Вместо слова «green» обычно ставится код из шестнадцатеричной системы цветов, например: «#088f47»;
  • face=»verdana» — атрибут указывающий шрифт в тексте;
  • size=»3″ — размер шрифта;
  • <ol><li>первое</li><li>второе</li><li>третье</li></ol> — нумерованный список;
  • <ul><li>слово</li><li>слово</li><li>слово</li></ul> — маркированный список;

HTML теги для создания таблицы

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

  • <table border=»1″ width=»450″ align=»center»></table> — тег отвечающий за создание таблицы, где «1» есть ширина бордюра таблицы, где «450» ширина таблицы, а «center» вы уже знаете;
  • <tr></tr> — тег находящийся внутри «<table></table>» и создает строку в таблице;
  • <td width=»150″></td> — создает столбец в строке, находится внутри тегов «<tr></tr>». «150», как вы уже наверное догадались — ширина столбца;

Полностью  html теги таблицы выглядят примерно так:

<table border=»1″ width=»450″ align=»center»>
<tr>
<td width=»150″><p>ячейка №1</p></td>
<td width=»150″><p>ячейка №2</p></td>
<td width=»150″><p>ячейка №3</p></td>
</tr>
<tr>
<td width=»150″><p>ячейка №4</p></td>
<td width=»150″><p>ячейка №5</p></td>
<td width=»150″><p>ячейка №6</p></td>
</tr>
</table>

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

До скорых встреч, друзья.

Поделись своим мнением, нам не без разницы, что ты думаешь!
Мета теги:

5 комментариев

  1. SEOForce
  2. GreenCape
    • Александр
  3. Сергей
    • Александр

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *