Теги html языка – Что такое HTML, теги в составе кода документа (страницы) на языке гипертекстовой разметки | Создание сайтов и заработок в сети

Учебник HTML - Теги HTML

 

HTML-документ (страничка) - документ, написанный на языке HTML. Заключается между тегами <HTML> и </HTML>.

Значения тегов разметки документа

Теги разметки - специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.

Основные теги разметки

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе.

<TITLE> и </TITLE>. В этих тегах заключается название странички, которое будет выведено в рамке окна программы просмотра.

<BODY> и </BODY>. "Тело" документа (текст, графика и т.д.) располагается между этими двумя тегами.

Параметры тега <BODY>:

BGCOLOR - цвет фона (<BODY BGCOLOR="#000000">)

BACKGROUND - бэкграунд

TEXT - цвет текста

LINK - цвет ссылки

VLINK - цвет ссылки, уже посещенной в прошлом

ALINK - цвет активной ссылки

<P> и </P> - теги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.

<BR> - тег, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.

<HR> -  тег, служащий для логического разделения текста горизонтальной линией.

<PRE> и </PRE> -  Между этими тегами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".

Параметры выравнивания

Используются в <P> и <H>

ALIGN=LEFT - выравнивание по левому полю

ALIGN=RIGHT - выравнивание по правому полю

ALIGN=CENTER - выравнивание по центру

Теги выравнивания

<LEFT> и </LEFT> - выравнивание по левому полю

<RIGHT> и </RIGHT> - выравнивание по правому полю

<CENTER> и </CENTER> - выравнивание по центру

Заголовки, служащие для выделения логических частей текста

<h2> и </h2> - Заголовок первого уровня.

<h3> и </h3> - Заголовок второго уровня.

<h4> и </h4> - Заголовок третьего уровня.

<h5> и </h5> - Заголовок четвертого уровня.

<H5> и </H5> - Заголовок пятого уровня.

<H6> и </H6> - Заголовок шестого уровня.

Теги для выделения текста и шрифта

<B> и </B> - теги для выделения текста (слов, букв) жирным шрифтом.

<I> и </I> - теги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

<U> и </U> - текст, расположенный между двумя этими тегами, будет подчеркнут.

<BLINK> и </BLINK> - текст, расположенный между двумя этими тегами, будет мигать.

<FONT SIZE=n>и</FONT> - теги для изменения размера шрифта (где n - размер шрифта в пикселях px).

<FONT COLOR="#FFFFFF"> и </FONT> - теги для изменения цвета шрифта.

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

<OL> и </OL> - теги, показывающие начало и конец нумерованного списка

<UL> и </UL>

- теги, показывающие начало и конец маркированного списка.

<LI> - Элемент списка

 

<DL> и </DL> - теги, показывающие начало и конец глоссария.

<DT> - Термин глоссария, располагается без отступа от левого поля страницы.

<DD> - Описание термина, располагается с отступом от левого поля страницы.

Теги-команды для вставки в текст объектов не текстовой информации

<IMG SRC="file.gif"> или <IMG SRC="file.jpg"> - команда для вставки графического изображения

<IMG SRC="file.wav"> - команда для вставки звукового фрагмента

<IMG SRC="file.avi"> - команда для вставки видео фрагмента

Параметры графического изображения

WIDHT - ширина картинки в пикселях

HEIGHT- высота картинки в пикселях

ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе, ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру)

HSPACE - горизонтальный отступ от графического изображения

VSPACE - вертикальный отступ

ALT - альтернативный текст, служит для обозначения изображения

Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет

<A HREF="fail.htm">и</A>или<A HREF="http://www.ru">и</A> - гиперсвязи

<ADDRESS><A HREF="mailto:[email protected]">[email protected]</ADDRESS> - гиперсвязь с адресом электронной почты

Таблицы

Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста

<TABLE> и </TABLE> - теги для вставки таблицы в HTML документ

Параметры тега <TABLE>

BGCOLOR - цвет фона

BORDER - ширина бордюра

WIDHT - ширина таблицы

Теги разметки таблицы

<CAPTION> и </CAPTION> - название таблицы, имеет параметр ALIGN=TOP - выравнивание над таблицей и ALIGN=BOTTOM - под  таблицей.

<TR> и </TR> - Строчка таблицы. Может иметь параметры BGCOLOR - цвет фона внутри строки;

ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри строки;

VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание внутри строки таблицы.

<TD> и </TD>-  Столбец таблицы. Может иметь параметры BGCOLOR - цвет фона под столбцом;

ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри столбца;

VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание;

COLSPAN растягивание клетки на несколько столбцов, ROWSPAN - растягивание клетки на несколько строк.

<TH> и </TH> - Заголовок столбца. Может иметь параметры BGCOLOR - цвет фона под названием;

ALIGN=LEFT, RIGHT, CENTER - выравнивание;

VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание;

COLSPAN, ROWSPAN - растягивание клетки на несколько столбцов или строк; WIDHT - ширина названия.

Рамки-фреймы

Рамки-фреймы - средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-страницы или Web-сайта.

<FRAMESET> и </FRAMESET> теги для создания рамки

Параметры тега <FRAMESET>

COLS - подразделяют экран на определенное количество колонок (вертикальных)

ROWS - подразделяют экран на определенное количество колонок (горизонтальных)

BORDCOLOR - цвет рамки

BORDER - ширина бордюра

FRAMEBORDER - граница рамки (FRAMEBORDER=YES - есть граница, FRAMEBORDER=NO - нет границы, FRAMESPACING=n - ширина границы)

<FRAME> Тег для описания рамки (<FRAME SRC="file.htm">).

Параметры тега <FRAME>

SCROLING - параметр для регулировки полосы прокрутки:

SCROLING=YES - полоса прокрутки будет всегда

SCROLING=NO - полосы прокрутки не будет

SCROLING=AUTO - полоса прокрутки появляется только в случае необходимости

MARGINWIDHT и MARGINHEIGHT - параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки

NORESIZE - параметр, указывающий на то, что размер рамки-фрейма никогда не будет меняться.

A link to <A HREF="file.htm" TARGET="frame2"> file.htm</A> - Связь между фреймами

TARGET - атрибут связи между фреймами. Имеет несколько значений:

_BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно.

_SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.

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

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

Обработка браузеров, не поддерживающих фреймы:

<FRAMESET>

...Здесь располагаются фреймы

</FRAMESET>

<NOFRAMES>

<BODY>

...Здесь располагается текст без фреймов

<BODY>

</NOFRAMES>

Бегущая строка

<MARQUEE>ТЕКСТ</MARQUEE> - тег, создающий бегущую строку

<MARQUEE DIRECTION="left">TEKCT</MARQUEE> - Если бегущую строку нужно направить справа налево

<MARQUEE DIRECTION="right">TEKCT</MARQUEE> - движение слева направо.

scroll - стандартное движение от правого края к левому

slide - надпись один раз пробегает от правого края к левому, где и остается.

alternate - движение от правого края страницы к левому и обратно. Бесконечный цикл.

<MARQUEE LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE> - Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.

<MARQUEE WIDHT=n>TEKCT</MARQUEE> - указать ширину участка, занимаемого бегущей строкой, где n - ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.

<MARQUEE scrollamount=n>TEKCT</MARQUEE> - Регулировка движения надписи по экрану. Здесь n - число пикселей.

<MARQUEE scrolldelay=t>TEKCT</MARQUEE> - В данном случае переменная величина - время t - измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.

<FONT SIZE=n><MARQUEE> ТЕКСТ</MARQUEE></FONT> - возможность указывать величину шрифта текста в строке.

<MARQUEE BGCOLOR=n> ТЕКСТ </MARQUEE> - окрасить поверхность бегущей строки в какой-либо цвет, где n можно указать в виде шестнадцатеричного числа либо написав его название

<MARQUEE HEIGHT=n>ТЕКСТ</MARQUEE> - указывает высоту бегущей строки

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

В основе языка HTML лежит понятие «тэг» (англ.: tag-ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов <html> и </html>. В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.

Итак HTML документ заключается в контейнер <html></html>, заголовок в контейнер <head></head>, а содержание документа в контейнере <body></body>. Контейнер <title></title>, расположенный в заголовке (контейнере <head></head>) содержит текст, отображающийся в верхней строке окна браузера. В контейнер заголовка также могут быть добавлены тэги, содержащие кодировку, ключевые слова web-страницы, а также код для подключения файлов каскадных таблиц стилей CSS, языка программирования jаvascript, VBScript и т.д.

Пример простейшей HTML странички, содержащей только основные тэги:

<html><head><title>Название странички</title></head><body>Содержание простейшей странички</body></html>

Результат работы указанного кода изображен на рисунке.

Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.

Для изменения шрифта, его цвета и размера используется тэг <font> с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:

<font face=”Arial” color=”red” size=”14”>Форматируемтекст</font>

Для выделения абзаца в тексте используется тэг <p>, в контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги <h2>, <h3>, <h4>, <h5>, <h5>, <h6>.

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

Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг <a>. Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.

Пример использования гиперссылок представлен на рисунке.

При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.

Для вставки изображения на web-страницу используется тэг <img> с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:

<img src=”путь/изображение.jpg” width=”100” height=”50” border=”1” >

Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга <body> «bgcolor» или «background-image». Пример вставки фонового цвета:

<body bgcolor=”red”>

Пример вставки фонового изображения:

<body background=”путь/изображение.jpg”>

Указанные атрибуты могут быть использованы не только для тэга <body>, но и для тэгов таблицы, области и других, которые будут рассмотрены в следующих темах.

 

Поделиться в соц. сетях:

Все HTML теги в одной программе или шпаргалка для забывчивых новичков

Всемирная паутина становится все более сложным и технологичным механизмом и сам Интернет стал одной из наиболее значительных достижений XX века. И без знаний основ Web-программирования очень сложно будет развивать свой проект. Даже с учетом того что современные системы для управления содержимым, такие как WordPress позволяют легко управлять своим сайтом. Так или иначе, приходится разбираться с Web-кодом внутри шаблона или других элементов, таких как плагины, виджеты и т.п. Так же технологии работы в Интернете постоянно развиваются и не стоят на месте. В основе всех этих технологий лежит язык HTML, переживший несколько этапов развития, которые завершались появлением новых версий языка.

Независимо от версий языка HTML, используемой при создании своего Web-проекта, есть общие правила форматирования HTML-страницы и структурирования их содержимого.

В основном основой языка HTML являются так называемые теги(tag’s). Они несут в себе определенную информацию, могут описывать документ в целом или способ форматирования текста. Эти теги можно назвать основой построения сайта. Все, что вы захотите создать или описать на вашей Web-странице, будет сделано в основном с помощью HTML-тегов. Обычно они идут парами закрывающий и открывающий <p>…</p>. В некоторых случаях закрывающий тег вообще не требуется, а в других его можно пропустить, однако для корректной обработки документа рекомендуется всегда использовать закрывающий тег.

И этих тегов для создания Web-сайта очень большое количество. Их точно более 100 штук. Появляются все более новые теги для вставки новых мультимедийных данных, таких как видео, аудио, flash анимация и т.п. Старые теги устаревают и их заменяют либо другие более новые типы тегов или другие более современные методы отображения информации. Постоянно что-то меняется, обновляется и изменяется.

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

PFW

Programming for web

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

Programming for web

Подробнее о программе

Основы HTML Cинтаксис HTML. Теги (tags)

Внимание! Данный сайт не обновляется. Новая версия: shatalov.su

Дата создания: 2012-03-04 00:50:20
Последний раз редактировалось: 2012-10-25 07:15:35

Современную жизнь практически невозможно представить без интернета. Чтобы мы делали без всевозможных Одноклассников, Вконтактов и Живых Журналов? Даже страшно представить, как оскуднела бы наша жизнь, если б ОН вдруг пропал! Как бы мы жили без смешных картинок, дурацких видео, мегабайтов африканского спама? Нет, друзья, я отказываюсь жить в таком ужасном мире!

Что такое интернет? (Internet)

Интернет - это все компьютеры (вычислительные устройства) в мире, соединённые между собой.

Синоним понятия Интернет - веб. Слово веб - калька с английского web (паутина). А web в свою очередь - часть понятия World Wide Web (всемирная глобальная паутина). Огромную долю интернета занимают всевозможные сайты.

Что такое сайты (Site)

Сайт (site) - это некоторое количество текстовых файлов в формате html. Т.е. это обычные файлы, которые хранятся на каком-то компьютере.

И тут мы подходим к нашей теме: а что же это за формат такой - HTML, и зачем он нужен?

Что такое HTML?

HTML (HyperText Markup Language - язык разметки гипертекста) - это такой специальный язык. Но надо сразу заметить, что это не язык программирования. Это язык разметки текста.

Свою историю HTML берёт со специальных программ для разметки газетных статей. Эти программы позволяли указать как располагать текст на странице, где будут картинки. То же самое позволяет делать и HTML, только на экране цифрового устройства (компьютера, телефона...).

Если вы откроете любой текстовый файл в блокноте, то увидите только скучный текст. HTML же позволяет превратить такой скучный текст в более интересный: где-то добавить картинку, где-то разбить текст на блоки.

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

Использование HTML - синтаксис языка разметки

HTML-текст состоит из тегов, в которые помещают информацию.

Тег состоит из двух частей: открывающий тег и закрывающий тег. И в открывающем, и в закрывающем тегах записывается имя тега. Но в закрывающем перед именем ставится косая черта / - чтобы отличить закрывающий, от открыающего. Вот несколько примеров:

<p>Содержимое тега</p>
<a>Содержимое тега</a>
<div>Содержимое тега</div>
<span>Содержимое тега</div>

Слово tag переводится как - этикетка, ярлык. Т.е. тег как бы приявязывается к содержимому - размечает его.

У каждого тега своё значение. Какие значения имеют теги, которые мы видели выше? p - абзац. a - ссылка. div - блок. span - кусочек текста. Мы ещё рассмотрим значения этих тегов в следующих уроках.

Одиночные теги

Некоторые теги не имеют закрывающей пары. А это значит, что у таких тегов нет содержимого. Например, тег br - разрывает строку:

Простой текст,<br/> на примере<br> которого показан разрыв<br/> строк.

Там где находится тег br браузер сделает разрыв строки. В результате конечный пользователь вышеприведённое предложение вот в таком виде:

Простой текст,
на примере
которого показан разрыв
строк.

Ещё теги, которые не имеют закрывающей пары: hr (горизонтальная черта) и img (картинка).

Иерархия тегов

Теги можно встраивать друг в друга.

<div>
<p>Просто текст. <a>Ссылка</a>. Продолжение текста.
</p>

<p>
Ещё один абзац.
</p>
</div>

Здесь div содержит два абзаца, а первый абзац в свою очередь содержит ссылку.

При создании иерархии тегов главное, чтобы они не пересекались:

<div>
<p>Так нельзя!!!
</div>
</p>

Здесь сначала должен закрыться тег p, потом div.

Атрибуты тегов

Атрибуты позволяют указать дополнительную информацию. Атрибуты записываются через пробел после имени отрывающего текста:

<тег атрибут1="Значение атрибута" атрибут2="Значение атрибута" атрибут3="Значение атрибута">Содержимое тега</тег>

Например, у ссылки есть атрибут href, который позволяет указать адрес страницы, куда будет осуществлён переход, при щелчке на эту ссылку:

<a href="http://shatalov.su">Ссылка на главную страницу</a>

Вот так это будет выглядеть на готовой странице:

Ссылка на главную страницу

Ещё один пример атрибута - src у img. Этот атрибут позволяет указать путь к картинке, которая должна загрузиться:

<img src="Адрес картинки">

Значения атрибутов можно записывать как в вдойных кавычках, так и в одинарных:

Оба варианта правильные.

Вот в общем-то и всё. Теперь мы готовы приступить к созданию HTML-документов.

Введение в HTML (язык разметки гипертекста)

Язык разметки HTML

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

  • Аббревиатура HTML расшифровывается как Hyper Text Markup Language (язык разметки гипертекста).
  • Запомните, он не является языком программирования, это язык разметки.
  • HTML использует теги разметки, чтобы описать структуру веб-страницы.

Теги

HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например <body>, <p>, <h3> и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: <p>текст</p>. Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например: <br>. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами: <P> означает то же самое, что и <p>. Теги определяют, где начинается и где заканчивается, HTML-элемент.

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

Примечание: в нашем HTML справочнике вы можете посмотреть стили, применяемые по умолчанию, для любого интересующего вас тега.

Без использования HTML тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах.

Так выглядит страница, в которой используются теги для разметки:


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Летнее меню</title>
  </head>
  <body>
    <h2>Напитки в нашем кафе</h2>

    <h4>Мультифрукт - 100р.</h4>
    <p>Фруктовый напиток, содержащий апельсиновый и ананасовый соки.</p>

    <h4>Молочный коктейль - 150р.</h4>
    <p>Сливочное мороженое, перемешанное с мякотью фруктов.</p>
  </body>
</html>
Пример веб-страницы с использованием HTML-тегов

То же самое, но без использования тегов:


Напитки в нашем кафе

Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.

Молочный коктейль - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
Пример веб-страницы без использования HTML-тегов

С этой темой смотрят:

Что такое HTML язык? Учебник html

Глава 1

Начну, пожалуй, с начала..

HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.

Теперь о командах - их называют дескрипторами, но чаще - тегами.

Вернемся к нашей первой страничке.. итак мы написали:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
<br>
Меня зовут Карлсон, это моя первая страничка!
</body>
</html>

Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег <html> понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег </html> говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.

Так что же мы написали? и как это читает браузер?

Мысли браузера:

<html> - начало документа.. опять работы привалило..
<head> - смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
<title> - "название" значит.. это в шапке окна нужно написать его название:
Моя первая страничка - опять чайник тренируется..
</title> - все название закончилось.. можно идти дальше..
</head> - ага и в голове кроме названия больше никаких вздорных мыслей не держим..
<body> - "тело" документа всё что написано ниже выставляем на всеобщее обозрение
Привет мир!!! - как мило! Достали уже!!!
<br> - переносим текст на следующую строчку.. я даже догадываюсь что в ней будет...
Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут..
</body> - что всё что ли? Больше ничего не отображать?
</html> - ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

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

1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий </…>

Хотя есть и исключения как например у нас тег <br> - он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")

2) Все документы должны иметь вот такой шаблон кода:

<html>- начало документа
<head>- начало головы
</head>- закрытие головы
<body>- начало тела
</body>- закрытие тела
</html>- конец документа

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

3) О порядке:

Открывающий и закрывающий тег по типу <…> </…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "ящик маленький" >
</Тег "ящик средний" >
</Тег "большой ящик">

Если писать, например, так:

<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "большой ящик">
</Тег "ящик маленький">
</Тег "ящик средний">

То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..

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

  • При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!

  • При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:

    <html>
    <head>
    <title>Моя первая страничка</title>
    </head>
    <body>
    Привет мир!!!
    <br>
    Меня зовут Карлсон, это моя первая страничка!
    </body>
    </html>

    Значительно легче, чем так:

    <html>
    <head>
    <title>Моя первая страничка</title>
    </head>
    <body>
    Привет мир!!!
    <br>
    Меня зовут Карлсон, это моя первая страничка!
    </body>
    </html>

    И уж тем более чем вот так:

    <html><head><title>Моя первая страничка</title></head><body>Привет мир!!!<br>Меня зовут Карлсон, это моя первая страничка!</body></html>

    Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".



Понятие тега HTML

Тег (мн. теги, иногда тэг) — это элемент языка HTML, с помощью которого выполняется разметка исходного текста веб-страницы. Теги представляют из себя сокращения или аббревиатуры английских слов заключенные в угловые скобки <>, например, тег <p></p> сокращение от английского слова paragraph, то есть текст заключенный в данный тег будет распознаваться браузерами, как параграф.

HTML теги

Каждый тег в HTML имеет специальное значение и отвечает за вывод определенных данных. Регистр букв в названиях тегов не имеет значение, например, тег <p></p> и тег <P></P> — это одно и то же. То есть теги можно записывать и строчными, и заглавными буквами. Раньше общепринятым было, все теги записывать заглавными буквами, чтобы теги отличались от обычного текста. Сейчас такой необходимости нет, так как многие редакторы имеют подсветку синтаксиса.

Классификация тегов

Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня <h2>…</h2>. В таких случаях используются парные теги: открывающий и закрывающий. Открывающий тег (например, <h2>) создает эффект, а закрывающий (</h2>) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (/) — прямой слеш. Такие теги называют парные.

Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы <HR> или тег отображения картинки <img>. Такие теги не имеют закрывающих тегов. Такие теги называют не парные.

Типы тегов

Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:

  • теги верхнего уровня;
  • теги заголовка документа;
  • блочные элементы;
  • строчные элементы;
  • универсальные элементы;
  • списки;
  • таблицы;
  • фреймы.

Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков <ol> и <ul> относятся и к спискам, и к блочным элементам.

Структура тегов

При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.

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

Давайте посмотрим на правильную структуру тегов содержащих атрибуты:

  1.  <img src=»logo.jpg»>
  2. <a href=»samsebewebmaster.ru»>Сам Себе Вебмастер</a>

Для примера я привел два совершенно разных тега. Первый <img> одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg». Второй  <a>…</a> парный отвечает за создание ссылок, атрибут — href=»samsebewebmaster.ru».

Вывод 1: Атрибуты могут иметь парные и непарные теги.

Вывод 2: Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.

Картинка для разъяснения:

Cтрутура тега html

Рисунок 1. Cтрутура тега html

 

Задача на внимательность и знание синтаксиса HTML

Давайте посмотрим на примере простой веб-страницы, которую мы рассматривали в уроке Введение в HTML:

1
2
 
Простейшая HTML страница

Простейшая HTML страница

Тескт веб-страницы.

Задание: Проанализируйте и найдите две ошибки в коде использованного примера.

На этом урок закончен. Теперь вы знаете такое понятие, как Тег языка HTML.

[Всего голосов: 0    Средний: 0/5]
Читайте также:

Добавить комментарий

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