Маргоша

Ну и что это за ТЭГи такие?!



О ТЭГах



Для того, чтобы хоть немного представлять себе, что же такое язык HTML в натуральном виде, посмотрите на приведенную таблицу ТЭГов (список команд браузеру) и попытайтесь хоть немного отложить в памяти основные из них.
Если же вам это не интересно - смотрите следующую главу моего сайта.
ТЭГи - специальные символы-команды, по которым браузер читает ваш сайт. Для того, чтобы разговаривать с браузером на одном языке, необходимо запомнить основные из них. Хотя, при наличии специальных программ, механизирующих работу по созданию сайтов, это не обязательно - программа сама вставит нужную команду-ТЭГ туда, где вы укажете.
Тем не менее, хоть немного ориентироваться в значении ТЭГов, не помешает никому.

***

Список наиболее часто употребляемых ТЭГов


Обозначение типа документа

Тип документа <HTML></HTML>    - начало и конец HTML-документа (сайта).
Имя документа <TITLE></TITLE>     - название сайта, оно отражается в верхней части браузера.
теги Заголовок <HEAD></HEAD>     - описание документа, служит для "служебного пользования" браузера и не отражается на мониторе.
Тело <BODY></BODY>     - содержимое страницы вашего сайта, т.е. то, что мы видим в окне браузера.

***

Определение структуры

Заглавие <H?></H?> (обозначение размера заголовка абзаца; предусмотрено 6 величин размера от 1 до 6; здесь вместо значка ? надо поставить цифру от 1 до 6, в зависимости от желаемого размера)
Заглавие с выравниванием <H? ALIGN=LEFT|CENTER|RIGHT></H?> (левый край/центр/правый край)
Секция <DIV></DIV> область странички сайта;
Секция с выравниванием <DIV ALIGN=LEFT|RIGHT|CENTER></DIV>
Цитата <BLOCKQUOTE></BLOCKQUOTE> (обычно выделяется отступом)
Выделение <EM></EM> (выделение курсивного текста)
Выделение <STRONG></STRONG> (выделение жирного текста)
Отсылка, цитата <CITE></CITE> (обычно курсив)
Большой шрифт <BIG></BIG>
Маленький шрифт <SMALL></SMALL>

***

Внешний вид

Жирный <B></B>
Курсив <I></I>
Подчеркнутый <U></U> (часто не поддерживается)
Перечеркнутый <STRIKE></STRIKE> (часто не поддерживается)
Перечеркнутый <S></S> (часто не поддерживается)
Верхний индекс <SUB></SUB>
Нижний индекс <SUP></SUP>
Печатная машинка <TT></TT> (изображается как шрифт фиксированной ширины)
Форматированный <PRE></PRE> (сохранить формат текста как есть)
Ширина <PRE WIDTH=?></PRE> (в символах)
Центрировать <CENTER></CENTER> > (как текст, так и графика)
Мигающий <BLINK></BLINK> (наиболее осмеянный элемент)
Размер шрифта <FONT SIZE=?></FONT> (от 1 до 7)
Изменить размер шрифта <FONT SIZE="+|-?"></FONT>
Базовый размер шрифта <BASEFONT SIZE=?> (от 1 до 7; по умолчанию 3)
Цвет шрифта <FONT COLOR="#$$$$$$"></FONT>
Выбор шрифта <FONT FACE="***"></FONT>
Пустой блок <SPACER>
Тип пустого блока <SPACER TYPE=horizontal| vertical|block>
Величина пустого блока <SPACER SIZE=?>
Размеры пустого блока <SPACER WIDTH=? HEIGHT=?>
Выравнивание <SPACER ALIGN=left|right|center>

***

Ссылки и графика

Ссылка <A HREF="URL"></A> ссылка может быть на адрес источника в Интернете или на объект в теле вашего сайта;( имя документа - графики, адреса или текстового, ставится между кавычками)
Ссылка на другое окно <A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>
Определить закладку <A NAME="***"></A>
тэги html Графика <IMG SRC="URL"> - картинка, фото, схема, имя которого и расположение ставится между кавычками;
Выравнивание <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
Выравнивание <IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM>
Альтернатива <IMG SRC="URL" ALT="***"> (выводится если картинка не изображается, т.е. в браузере отключен просмотр графики)
Размеры графики <IMG SRC="URL" WIDTH=? HEIGHT=?> (размер можно проставлять в пикселях и процентах)
Окантовка <IMG SRC="URL" BORDER=?> (в пикселях)
Отступ <IMG SRC="URL" HSPACE=? VSPACE=?> (в пикселях)
Заменитель в низком разрешении <IMG SRC="URL" LOWSRC="URL">
Включить объект <EMBED SRC="URL"> (вставить объект в страницу)
Размер объекта <EMBED SRC="URL" WIDTH=? HEIGHT=?>

***

Разделители

Параграф <P></P> (закрывать элемент часто не обязательно)
Выравнивание <P ALIGN=LEFT|CENTER|RIGHT></P>
Новая строка <BR> (одиночный перевод строки)
Убрать выравнивание <BR CLEAR=LEFT|RIGHT|ALL>
Горизонтальный разделитель <HR>  - горизонтальная линия;
Выравнивание <HR ALIGN=LEFT|RIGHT|CENTER>
Толщина <HR SIZE=?> (в точках)
Ширина <HR WIDTH=?> (в точках)
Ширина в процентах <HR WIDTH="%"> (в процентах от ширины страницы)
Сплошная линия <HR NOSHADE> (без трехмерных эффектов)
Нет разбивки <NOBR></NOBR> (запрещает перевод строки)
Перенос <WBR> (где разбивать строку для переноса при необходимости).

***



Списки

Неупорядоченный <UL><LI></UL> (<LI> значок списка, ставится перед каждым его элементом)
Компактный <UL COMPACT></UL>
Тип метки <UL TYPE=DISC|CIRCLE|SQUARE> ( обозначение элемента списка круг/диск/дефис и т.д.)
Нумерованный <OL><LI></OL> (<LI> перед каждым элементом)
Компактный <OL COMPACT></OL>
Тип нумерации <OL TYPE=A|a|I|i|1> (для всего списка)
<LI TYPE=A|a|I|i|1> (этот и следующие)
Первый номер <OL START=?> (для всего списка)
<LI VALUE=?> (этот и следующие)
Меню <MENU><LI></MENU> (<LI> перед каждым элементом)
Компактное <MENU COMPACT></MENU>
Каталог <DIR><LI></DIR> (<LI>перед каждым элементом)
Компактный <DIR COMPACT></DIR>

***

Фон и цвета

Фоновая картинка <BODY BACKGROUND="URL"> фоновая картинка Вашей странички или ее определенной области;
Цвет фона <BODY BGCOLOR="#$$$$$$"> (порядок: красный/зеленый/синий)
Цвет текста <BODY TEXT="#$$$$$$">
Цвет ссылки <BODY LINK="#$$$$$$">
Пройденная ссылка <BODY VLINK="#$$$$$$">
Активная ссылка <BODY ALINK="#$$$$$$">

***

Специальные символы

&quot; - обозначение кавычек;
&nbsp; - не разделяющий пробел.
Торговая марка ТМ &reg;
Copyright &copy; - указывает на авторское право владельца документа;

***

Таблицы

Тело таблицы <TABLE></TABLE>
Окантовка таблицы <table border=?></TABLE>
html-документ Расстояние между ячейками <TABLE CELLSPACING=?>
Дополнение ячеек <TABLE CELLPADDING=?>
Желаемая ширина <TABLE WIDTH=?> (в точках)
Ширина в процентах <TABLE WIDTH="%"> (проценты от ширины страницы)
Строка таблицы <TR></TR>
Выравнивание <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Ячейка таблицы <TD></TD> (должна быть внутри строки)
Выравнивание <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Без перевода строки <TD NOWRAP>
Растягивание по колонке <TD COLSPAN=?>
Растягивание по строке <TD ROWSPAN=?>
Желаемая ширина <TD WIDTH=?> (в точках)
Ширина в процентах <TD WIDTH="%"> (проценты от ширины страницы)
Цвет ячейки <TD BGCOLOR="#$$$$$$">
Заголовок таблицы <TH></TH> (как данные, но жирный шрифт и центровка)
Выравнивание <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Без перевода строки <TH NOWRAP>
Растягивание по колонке <TH COLSPAN=?>
Растягивание по строке <TH ROWSPAN=?>
Желаемая ширина <TH WIDTH=?> (в точках)
Ширина в процентах <TH WIDTH="%"> (проценты ширины таблицы)
Цвет ячейки <TH BGCOLOR="#$$$$$$">
Заглавие таблицы <CAPTION></CAPTION>
Выравнивание <CAPTION ALIGN=TOP|BOTTOM> (сверху/снизу таблицы).

***

Фреймы

Документ с фреймами <FRAMESET></FRAMESET> (ставится вместо <BODY>)
Высота строк <FRAMESET ROWS=,,,></FRAMESET> (точки или %)
Высота строк <FRAMESET ROWS=*></FRAMESET> (* = относительный размер)
Ширина колонок <FRAMESET COLS=,,,></FRAMESET> (точки или %)
Ширина колонок <FRAMESET COLS=*></FRAMESET> (* = относительный размер)
Ширина окантовки <FRAMESET BORDER=?>
Окантовка <FRAMESET FRAMEBORDER="yes|no">
Цвет окантовки <FRAMESET BORDERCOLOR="#$$$$$$">
Определить фрейм <FRAME> (содержание отдельного фрейма)
Документ <FRAME SRC="URL">
Имя фрейма <FRAME NAME="***"|_blank|_self| _parent|_top>
Ширина границы <FRAME MARGINWIDTH=?> (правая и левая границы)
Высота границы <FRAME MARGINHEIGHT=?> (верхняя и нижняя границы)
Скроллинг <FRAME SCROLLING="YES|NO|AUTO">
Постоянный размер <FRAME NORESIZE>
Окантовка <FRAME FRAMEBORDER="yes|no">
Цвет окантовки <FRAME BORDERCOLOR="#$$$$$$">
Содержание без фреймов <NOFRAMES></NOFRAMES> (для просмотрщиков, не поддерживающих фреймы.

***

Язык JAVA (для работы со скриптами)

Applet <APPLET></APPLET>
Applet - имя файла <APPLET CODE="***">
Параметры <APPLET PARAM NAME="***">
Applet - адрес <APPLET CODEBASE="URL">
Applet - имя <APPLET NAME="***"> (для ссылок из других частей страницы)
Альтернативный текст <APPLET ALT="***"> (для программ не поддерживающих Java)
Выравнивание <APPLET ALIGN="LEFT|RIGHT|CENTER">
Размеры <APPLET WIDTH=? HEIGHT=?> (в точках)
Отступ <APPLET HSPACE=? VSPACE=?> (в точках)

***

Разное

Комментарий  <!-- *** --> (игнорируется браузером, пометка чисто для писателя сайта)
Пролог  HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> тип документа (для браузера)
Метаинформация <META> (должно быть в заголовке)
Стили <STYLE></STYLE>
Программа <SCRIPT></SCRIPT>

***

Совсем чуточку истории... (можно не читать, уж больно заумно....)))

Популярность World Wide Web и неотъемлемой ее части, HTML, безусловно, стала причиной повышенного внимания к системам гипертекстовой разметки документов. Хотя понятие гипертекста было введено В.Бушем еще в 1945 году и, начиная с 60-х годов стали появляться первые приложения, использующие гипертекстовые данные, всплеск активности вокруг этой технологии начался лишь тогда, когда возникла реальная необходимость в механизме объединения множества информационных ресурсов, обеспечения возможности создания, просмотра нелинейного текста. И примером реализации этого механизма послужила паутина WWW.

тэги html

Язык разметки документов - это набор специальных инструкций, называемых тэгами, предназначенных для формирования в документах какой-либо структуры и определения отношений между различными элементами этой структуры. Тэги языка, или, как их иногда называют, управляющие дескрипторы, в таких документах каким-то образом кодируются, выделяются относительно основного содержимого документа и служат в качестве инструкций для программы, производящей показ содержимого документа на стороне клиента.
В самых первых системах для обозначения этих команд использовались символы " < " и " > ", внутри которых помещались названия инструкций и их параметры. Сейчас такой способ обозначения тэгов является стандартным.

***

Немного о связях в паутине...

С помощью тэгов HTML можно связать любой документ Web-страницы (например текст или рисунок) с каким-нибудь адресом URL. Такие связи называются гиперссылками. При просмотре Web-страницы в браузере текстовые гиперссылки, как правило, выделяются от остального текста - или цветом, или размером, или подчеркиванием и т.д. (по усмотрению ВЭБ-мастера).
При щелчке мышью на гиперссылке происходит загрузка Web-документа, на который указывает адрес URL, записанный в гиперссылке.
Благодаря гиперсвязям все пространство Интернета можно рассматривать, как единую паутину, состоящую из множества взаимосвязанных гиперссылками документов.
Теоретически, начав работу в Интернете с просмотра одного-единственного документа (странички), можно бесконечно блуждать в паутине, получая все новую и новую информацию...

***



Далее - подробнее о средствах механизации верстки сайтов - о серверных технологях и CMS.