Html теги и атрибуты справочник с примерами. Основные 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 лежит понятие «тэг» (англ.: tag -ярлычок, этикетка). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов и . В web-странице включены контейнеры, отвечающие за заголовок документа (голова) и содержат дополнительную информацию, а также контейнеры, отвечающие за само содержание документа (тело). Они представлены на рисунке.
Итак HTML документ заключается в контейнер , заголовок в контейнер
, а содержание документа в контейнере . КонтейнерПример простейшей HTML странички, содержащей только основные тэги:
Результат работы указанного кода изображен на рисунке.
Как видно из примера текст «Содержание простейшей странички» отображается обычным текстом. Для того чтобы произвести форматирование этого текста, необходимо использовать специальные тэги. Пример использования тэгов форматирования представлен на рисунке.
Для изменения шрифта, его цвета и размера используется тэг с параметрами “face”, “color” и “size”. Например для того чтобы задать шрифт “arial” красного цвета и 14 размера необходимо написать следующий код:
Форматируемтекст
Для выделения абзаца в тексте используется тэг
В контейнер которого как правило помещается каждый абзац текста. Для создания заголовка используются тэги
, , , , , .
, , , .
, .
Для формирования списков в теле документа используются контейнеры , и . Причем тэг
- формирует нурмерованный список, тэг
- помещаются элементы списка. Пример кода отображения списков, представленный в виде нумерованного и маркированного списков представлен на рисунке.
Для связи двух и более Web-страниц между собой используются гиперссылки, для создания которых используется тэг . Причем в тэгах гиперссылок используются дополнительные атрибуты, позволяющие либо перейти к другой web-странице, либо переместиться внутри данной страницы. Второй способ желательно использовать в большом документе, имеющем несколько смысловых разделов.
Пример использования гиперссылок представлен на рисунке.
При указании URL адреса другой страницы необходимо указывать либо полный абсолютный путь к странице «полный путь/папка/страница» либо относительный (относительно данной страницы) «папка/страница». Параметр “target” позволяет открыть web-страницу в новом или существующем окне браузера.
Для вставки изображения на web-страницу используется тэг
с параметрами src (путь к изображению), width (ширина изображения), height (высота изображения), border (рамка вокруг рисунка). Пример кода вставки изображения:
Часто при создании Web-страниц необходимым является задание фонового цвета или фонового изображения. Для этого используются атрибуты тэга
«bgcolor» или «background-image». Пример вставки фонового цвета:Пример вставки фонового изображения:
Указанные атрибуты могут быть использованы не только для тэга
, но и для тэгов таблицы , области и других, которые будут рассмотрены в следующих темах.Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
Тег
-
устанавливает нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.
-
Тег
-
определяет отдельный элемент списка. Внешний тег
-
или
- ,
- ,
- создающий термин и тег
- задающий определение этого термина. Закрывающий тег не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
- Пункт меню 1
- Пункт меню 2
-
устанавливает тип списка — маркированный или нумерованный.
Тройка элементов предназначена для создания списка определений. Каждый такой список начинается с контейнера
-
, куда входит тег
Каждый, кто читает данный урок, наверняка знает, что такое HTML. Но обзор основ помогает увеличить знания и отточить мастерство, особенно в условиях постоянно развивающихся веб технологий.
Сейчас много говорят об изменениях, которые принес HTML 5. Каждый тег, упомянутый в данной статье поддерживается и в HTML 4.01 и в HTML 5. Хотя некоторые из этих тегов широко используются, будет очень полезно пересмотреть задействованные методы.
1.
Каждая книга о программировании содержит упоминание о том, что очень полезно объяснять, что делает ваш код. Почему комментирование является хорошей практикой? Это очень помогает тому, кто читает ваш код, разобраться в сути происходящего.
Для HTML комментирование может казаться пунктом, увеличивающим вес страницы. Однако комментарии могут быть полезны для определения секций и для сохранения структуры и организации кода страницы. Отметка начала и конца различных секций может реально помочь при работе над проектом.
Это основной контент.
...2. Стили таблицы: , , и
Чтобы сделать хороший дизайн таблиц, нужно использовать теги, указанные в подзаголовке. Они все влияют на строки таблицы и можно легко задать для них стили.
Item Qty Sum 7 #1 3 #2 4 Оборачиваем строки таблицы в . Таким образом формируется заголовок таблицы.
Обернув строки в формируем итоговые строки внизу таблицы. Строки должны определяться до строк , таким образом, итоговые строки выводятся на экран до остальных строк таблицы.
Cтроки с данными оборачиваем в
.Пункт Кол-во Сумма 7 #1 3 #2 4 3.
Выпадающий список является великолепным способом представить данные для выбора пользователя. Они не только занимают мало места, но и знакомы пользователям и легки в применении. Чудесным свойством является возможность создавать категории (или подзаголовки) для элементов списка.
Detroit Tigers Chicago Cubs Detroit Lions Chicago Bears
4. Заголовки -
,
,
,
,
, и
Конечно, каждый использует заголовки. Но если быть честным, то когда вы в последний раз использовали
или заголовок еще более низкого уровня? Заголовки позволяют строить меньше семантических конструкций, таких как дополнительные стили для текста в.Не надо создавать себе дополнительной работы. Помните про теги заголовков.
5.
Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.
-
- - маркированный список, а в тэгах