Основные html теги
Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.
Как в любом языке, да и в жизни здесь действует правило парето 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.
Видео урок по теме — «Что такое HTML? Файл index html»:
Бесплатная ex-pr.ru биржа пиара ВКонтакте для продвижения профилей, пабликов и групп.
Уважаемый автор, всё здесь замечательно и правильно, за исключением одного НО — громадного количества лишних мягких знаков в глаголах. Совершенно невозможно читать, глаз всё время спотыкается. Вы бы, что ли, поправили, для этого случая есть ведь простейшее правило.
Спасибо, GreenCape. Обязательно поправлю.
Спасибо за отличную статью!Сам бывает подсматриваю в значения тегов.
Да, Сергей, у меня даже txt файл на рабочем столе есть «нужные html коды»)). Чтобы каждый раз не вспоминать как, что прописывать и не дай Бог не ошибиться, просто копирую от туда нужные, наиболее часто употребляемые коды.
Заглянул — вспомнил — закрепил! Спасибо