Enginering.RU

Урок HTML №10 - теги ul и li

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

Синтаксис тегов маркера таков:

<ul></ul> - определяют контейнер маркированного HTML списка

<li></li> - определяют элементы (пункты) маркированного HTML списка.

Если к тегу <ul> применяется таблица стилей CSS, то элементы <li> наследуют эти свойства.

Как видим из первого примера применения данного тега, вид точек элементов <li> по умолчанию имеют вид форму круглой чёрной точки, но с помощью атрибута type и его свойств, таких как:

disc - кружок

circle - окружность

square - квадрат

маркированному списку можно задать другой внешний вид, например:

Урок HTML №6 - атрибут заголовка таблицы

Тег <th>.....</th> применяется для ячеек первой строки таблицы, практически это "шапка" таблицы. По умолчанию, содержимое данного тега отображается браузером жирным шрифтом и располагается по центру ячейки. По сути, это таже ячейка, но с дополнительными стилевыми параметрами, которые уже предустановлены по умолчанию, это жирный шрифт с горизонтальным и вертикальным выравниванием по середине. Но которые можно дополнительно изменять.

Давайте рассмотрим этот урок на практике, для этого как всегда создадим .html документ с следующим кодом таблицы:

, где

height="100px" - общая высота таблицы

width="450px - общая ширина таблицы

border="1px" - толщина рамки таблицы

В итоге получим:

В этом уроке я научу вас как создать таблицу инструментами HTML.

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

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

Наберите в Notepad++ этот код HTML:

Визуальный результат получится такой:

Для того чтобы создать свой сайт в интернет, знание HTML является одним из ключевых факторов. Для начала узнаем, что такое HTML - это определённый язык гипертекстовой разметки файл-документов, на английском языке пишется так: HyperText Markup Language.

Для создания или редактирования документа HTML можно использовать стандартный Notepad или Wordpad, но я использую более удобную программу Notepad++, что и вам советую.Теперь я покажу вам простой пример HTML кода страницы с тегами, которые просто обязательны при вёрстке любого HTML документа или страницы:

Теперь нужно сохранить этот пример, как документ с расширением .html

Результат задания данного урока, вы можете посмотреть тут СМОТРЕТЬ УРОК №1