Какой вид кодов интернета еще называют тегами. Основные html теги. Что такое музыкальные теги в аудио-файлах

Сегодня мы рассмотрим html теги для создания сайта. Именно не все подряд, а те, что наиболее часто используются при создании сайтов и верстке. Потому что есть просто масса тегов, которые нужны 1 раз в год, а есть те, которые вы будете использовать постоянно. Ну что ж, поехали. В конце у нас получится простенькая веб-страничка со всеми основными элементами.

Теги структуры html документа

Это глобальные теги, которые нам в любом случае нужны. На веб-странице они никак не отображаются, но позволяют разметить структуру. Например, тег html. Сегодня его очень часто даже не пишут, в этом действительно нет нужны. В общем-то, он является общий контейнером для всего html-документа. В него вложено все остальное.

Далее идут 2 секции — head и body . В первой располагаются различного рода параметры веб-страницы, подключаются внешние файлы и т.д. Например, тут задается кодировка сайта, прописываются мета теги, title , подключаются css-стили и веб-сценарии. В общем, для работоспособности сайта секция head имеет важнейшую роль.

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

Форматирование текста

Обычно о форматировании всегда говорят в первую очередь, когда речь заходит об html. Действительно, что может быть важнее текста на странице и его грамотного оформления?

Например, создадим три абзаца. Один будет простым, во втором текст будет выделен жирным, а в третьем — подчеркнут.

Какой-то текст в абзаце, имитируем наполнение

Какой-то текст в абзаце, имитируем наполнение

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

Html теги для картинок (изображений)

Для картинок есть всего 1 основной тег — img . И у него, в свою очередь, всего 1 обязательный параметр — src , то есть путь к файлу. Все остальное можно настраивать через css. Собственно, подробно о вставке картинки я писал также , ну и вот пример самой простой вставки:

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

Изменять размер катинки можно с помощью атрибутов width и height , но оптимально все же делать это через css. Но кроме тега img в html5 появились еще теги, которая так или иначе помогают оформить картинку. Это figure и figcaption . То есть фигура и подпись к ней. Вообще область применения этих тегов более широка, но мы рассмотрим пример с картинкой:

Ну и пару css-строк:

Figure{ width: 300px; } figcaption{ text-align: center; color: grey; }

Эти теги просто упростили процесс добавления подписей к картинкам:

Теги для ссылок

Анкор

То есть тоже есть 1 обязательный атрибут — href . Без него браузер просто не будет понимать, куда ему переходить. Адрес нужно указывать с протоколом http:// . Ну и между открывающим и закрывающим тегом указываем непосредственно сам анкор, то есть текст, который увидим на странице.

Списки на веб-страницах

Со списками все тоже достаточно просто. Есть 2 типа списков — маркированный и нумерованным. Различия только во внешнем виде нумератора. То есть числа это, или просто маркеры.

Нумерованный список создается тегом ol , а сами пункты тегами li . В этот тег можно вложить сколько угодно других тегов и любое содержимое.

Убрать на столе
Приготовить еду
Сходить на футбол

По умолчанию список уже отображается с определенными отступами.

Маркированный список, соответственно, создается с помощью тега ul , а внутри него все те же li .

Таблицы

Подробно о тегах для таблицы я написал здесь. Если же говорить кратко, то это:

table — сам контейнер для таблицы;
tr — ряд таблицы, тоже выполняет роль контейнера;
td — одна ячейка, именно сюда помещается содержимое;

Создадим простую таблицу:

Ячейка 1 Ячейка 2

Ячейка 1 Ячейка 2

Ну и через css я ее немного оформил:

Table{ border-collapse: collapse; } td{ border: 1px solid red; padding: 15px; }

Если вам непонятно, что такое css, то приглашаю прочитать заодно , сразу все станет понятно.

Формы

Формы также очень важны при создании сайтов, так как они применяются сплошь и рядом. О формах у меня по-моему толковой статьи на блоге еще нет, значит надо написать. Ну а пока создадим простую форму:

Основные элементы формы:

form — непосредственно контейнер формы, в который помещаются все поля. Чтобы форма корректно работала, ей нужно прописывать атрибуты action и method , но это уже работа с языком php.
input — поле формы, каким именно оно будет, зависит от значения в атрибуте type . Например, text — поле для ввода обычного текста, password — поле для ввода пароля, checkbox — галочка, submit — кнопка отправки формы. Конечно, это не все значения, но о других подробнее я напишу в отдельной статье про формы (скоро будет).
Ну и вспомогательные элементы. В нашем случае это текст и переносы строк.

Возможности форм, особенно с приходом html5, стали очень велики. Вы можете делать в них неограниченное количество полей, помечать их как обязательные, задавать паттерны и т.д. Опять же, обо всем этом напишу как-нибудь отдельно.

Блочные и строчные элементы

Вообще все элементы в html грубо можно разделить на две категории: блочные и строчные. К строчным относятся, например, теги: b (выделение жирным), img (картинка), a (ссылка) и т.д. То есть их можно несколько раз употребить на одной строке.

Блочные же — совсем другое дело. Блок может быть только одним в своей строке. Примеры блоков: абзацы, таблицы, списки. То есть на одной строке не может быть 2 абзаца, правильно?

В html есть теги, которые просто обозначают блочный и строчный элемент, не придавая ему более никаких свойств. Это span и div . Первый строчный, а второй блочный. Используются в верстке сплошь и рядом. Чтобы вы понимали разницу, вот пример:

Текст

Текст Текст Текст

Вот пожалуй и все основные html теги для создания сайта, которые действительно применяются сплошь и рядом и которые действительно нужно знать.

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

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

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

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

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

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

и . «Тело» документа (текст,графика и т.д.) располагается между этими двумя тегами.

Параметры флага :

BGCOLOR — цвет фона ()

BACKGROUND — «обои» или бэкграунд

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

LINK — цвет гипертекстовой связи (ссылки)

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

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

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

и

Между этими тегами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа»курьер».

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

Используются в

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

ALIGN=RIGHT

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

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

и — выравнивание по левому полю

и — выравнивание по правому полю

и — выравнивание по центру

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

и

Заголовок первого уровня.

и

Заголовок второго уровня.

и

Заголовок третьего уровня.

и

Заголовок четвертого уровня.

и

Заголовок пятого уровня.

и

Заголовок шестого уровня.

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

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

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

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

и Теги для изменения размера шрифта.

и Теги для изменения цвета шрифта.

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

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

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

Элемент списка

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

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

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

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

или — команда для вставки графического изображения

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

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

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

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

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

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

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

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

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