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

Приветствую всех посетителей сайта! На этой странице приведены основные команды (тэги) HTML-разметки, используемые при создании веб-страниц. Любой HTML-документ состоит из заглавной части HEAD, именуемой головой документа, и основной части BODY, именуемой телом документа. 

Структура веб-страницы в упрощенном виде выглядит так:
 
<HTML>
<HEAD>
заглавная часть
</HEAD>
<BODY>
основная часть
</BODY>
</HTML>

Любой HTML-документ должен начинаться и заканчиваться тегом <HTML>...</HTML>. Этот тег указывает на то, что данный документ содержит в себе HTML-текст.

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

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

Внутри контейнера <HEAD> допускается размещать следующие данные: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>. Из всех вложенных  тегов на странице отображается только тэг <title></title>, задающий название вэб-документу.

Например, на моем сайте между тэгами <HEAD> ... </HEAD> размещена следующая информация:

<title>Сайт с нуля</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="author" content="SvetLana">
<meta name="description" content="Пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. Подробная инструкция со скриншотами по созданию сайта с помощью простой и удобной программы-конструктора WebPageMaker.">
<meta name="keywords" content="Пошаговое создание сайта, свой сайт с нуля, создание сайта с нуля, создание сайта самостоятельно, создание сайта самому">

Как видите, это стандартная информация: название страницы, кодировка, автор, описание и ключевые слова, здесь все просто, поэтому переходим к основной части веб-страницы...

<BODY> ... </BODY> - между этими тэгами как раз и размещается весь контент страницы.

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















                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
2010 - 2021 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
ПОДРОБНЕЕ

Задает фоновый рисунок страницы, используя изображение.
Задает цвет фона документа в виде RGB, например: EFEFEF - светло-серый цвет.
Задает цвет текста документа, например: 000000 - черный цвет.
Задает цвет гиперссылок, например:  0000FF - синий цвет.
Задает цвет посещенных гиперссылок, например: CC00FF - сиреневый цвет.
Задает цвет активных гиперссылок (при нажатии), например: CC0000 - темно-красный цвет.




Создает САМЫЙ БОЛЬШОЙ заголовок, например, тему страницы или статьи.
Создает заголовок меньшего размера, например, для подтемы и т.д. до h6.
Создает самый маленький заголовок.
Создает жирный текст.

Создает наклонный текст.
Устанавливает размер текста в пределах от 1 до 7.
Устанавливает цвет текста, используя значение цвета в виде RGB.
Предназначен для отображения текста в виде верхнего индекса, размер шрифта уменьшается на 1. 
Предназначен для отображения текста в виде нижнего индекса, размер шрифта также уменьшается на 1.
Создает новый параграф.
Выравнивает параграф относительно одной из сторон документа, имеет значения: left, right, или center.
Вставляет перенос строки.
Запрещает перенос строк.
Создает отступы с обеих сторон текста.
Создает нумерованный список.
Определяет каждый элемент (пункт) списка и присваивает номер.
Создает маркированный список.
Предваряет каждый элемент (пункт) списка и добавляет маркер.
Создает список определений, состоящий из самих терминов и их определений (описаний).
Задает термин  списка.
Описывает определение заданного термина. 




Создает текстовую ссылку на определенную страницу. 
Создает ссылку на определенную страницу  в виде изображения.
Создает гиперссылку вызова почтовой программы для написания письма автору документа.
Создает метку (закладку) в нужном месте страницы.
Создает внутреннюю гиперссылку на заданную метку.




Добавляет изображение в HTML документ
Выравнивает изображение по стороне документа, имеет значения: left, right, center; bottom, top, middle.
Устанавливает толщину рамки вокруг изображения, задается в пикселах.
Задает размеры изображению, где height - это высота , а width - ширина.
Добавляет альтернативный текст к изображению, если в браузере отключен показ картинок.

Добавляет в HTML-документ горизонтальную линию.
Устанавливает высоту(толщину) линии
Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
Создает линию без тени.
Задает линии определенный цвет. 




Создает таблицу.
Создает строку в таблице.
Создает ячейку в таблице.
Создает ячейку-заголовок с содержимым по центру, и выделенным жирным шрифтом.
Задает толщину рамки таблицы.
Задает внешние отступы и расстояние между ячейками таблицы.
Задает внутренние отступы - расстояние между содержимым ячейки и ее границей.
Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
Горизонтально выравниванивает ячейки в таблице, имеет значения: left, center или right.
Вертикально выравнивает ячейки, имеет значения: top, middle или bottom.
Указывает кол-во столбцев, которое будет объединено в одну ячейку (по умолчанию=1).
Указывает кол-во строк, которое будет объединено в одну ячейку (по умолчанию=1).
Запрещает перенос строки в ячейке таблицы.




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

<body background=img.png>      

<body bgcolor=?>                      

<body text=?>  
                         
<body link=?>                           

<body vlink=?>                         

<body alink=?>                         


Теги для форматирования текста


<h1></h1>
                               
<h2></h2>
                                       
<h6></h6>                               
<b></b> или 
<strong></strong>                    
<i></i>  или <em> </em>        
<font size=?></font>                
<font color=?></font>  
             
<sup> </sup> 
                                  
<sub> </sub> 
                                 
<p>                                            
<p align=?>  
                              
<br>                                           
<nobr>  
<blockquote></blockquote>       
<ol></ol>
<li>                                            
<ul></ul>  
                                
<li>
                                             
<dl></dl>
                                  
<dt> 
<dd>                                          


Тэги для гиперссылок

<a href="URL"></a>               
<a href="URL"
 <img src="img.png"> </a>           
<a href="mailto:EMAIL"></a>
    
<a name="NAME"></a>              
<a href="#NAME"></a>            


Тэги для изображений

<img src="name">                       
<img src="name" align=?>  
         
<img src="name" border=?>
         
<img src="img.gif" 
height="48" width="48">                
<img src="img.gif"
alt="Альтернативный  текст">      

<hr>                                             
<hr size=?>                                  
<hr width=?>
                                
<hr noshade>                                
<hr color=?>                                 


Тэги для таблиц

<table></table>                           
<tr></tr>                                     
<td></td>                                    
<th></th> 
                                   
<table border=#>                         
<table cellspacing=#> 
                 
<table cellpadding=#> 
                
<table width=#>  
                         
<tr align=?> или
 <td align=?> 
<tr valign=?> или 
<td valign=?>                               
<td colspan=#> 
                            
<td rowspan=#>
                            
<td nowrap>                                  


Тэги для форм

<form></form>                              
<input type="text"
 size="20" value="?">                     
<textarea name="?" 
cols=40 rows=8></textarea>         
<input type="radio" name="?"
 value="?">                                      
<input type=
"checkbox" name="?">           
<input type="submit">
value="Отправить">
<input type="image"                     
src="name.png">
<input type="reset"
value="Сбросить">                          
Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы. Вместо вопросительных знаков в примерах вам нужно будет вписать свой текст.

Примечание: HTML не чувствителен к регистру, т.е. все равно какими буквами писать: прописными или строчными (например BODY эквивалентно body или Body).

Скачать справочник основных тэгов по прямой ссылке можно здесь.

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

До новых встреч! С ув. Светлана (SvetLana_TSV).