Для создания списков используются HTML теги <ol> или <ul> и <li> . HTML теги
<ol> или <ul> обозначают начало списка вообще, а HTML теги
<li> означают начало элемента списка. Соответственно HTML теги </ol> или </ul> означают окончание списка, а HTML тег </li> означает окончание элемента списка.

Как разобраться, когда пишется <ol>, а когда пишется <ul>? Дело в том, что списки бывают 2-х видов – нумерованные и маркированные. Для нумерованных списков будет использоваться HTML тег <ol>, я для маркированных – <li> .

Пример:

Маркированный список создается с помощью HTML тега <ul>.Например:

Атрибуты HTML тегов нумерованных списков

Мы можем управлять стилем маркированного и нумерованного HTML списка. Делается это с помощью атрибута type, который записывается сразу же после открытия тега списка. Какие значения принимает атрибут type? Для нумерованного списка атрибут type принимает следующие значения:

• type= “1″ (по умолчанию) – список нумеруется арабскими цифрами;
• type= “A” – список нумеруется латинскими буквами (большими “A” или маленькими “a”);
• type= “I”– список нумеруется римскими цифрами (большими “I” или маленькими “i”).

Пример 1 использования атрибута type HTML тега <ol>

Пример 2 использования атрибута type HTML тега < ol >

А если в HTML теге <li> для нумерованного списка указать атрибут start, то мы можем управлять с какого числа начнётся нумерация списка. Например:

<ol start=”7″> //нумерация начнётся с семёрки

<li>Элемент списка 1</li>

<li> Элемент списка 2</li >

<li> Элемент списка </li>;

</ol>

Атрибут value в HTML теге <li> для нумерованного списка задаёт произвольное число начала списка. Например:

<ol>

<li>Элемент списка 1</li>

<li value=”20″ > Элемент списка 2</li> //этот элемент списка будет двадцатым

<li> Элемент списка 3</li>

</ol>

Атрибуты HTML тегов маркированных списков

Для маркированных списков также применяется атрибут Type. В маркированном списке данный атрибут принимает значение:

• type= “disc”  (по умолчанию) список маркируется закрашенным кружком;
• type= “square”  список маркируется квадратиками;
• type= “circle”  список маркируется не закрашенным кружком.

Пример 1 использования атрибута type HTML тега <ul>

Пример 2 использования атрибута type HTML тега <ul>

Popularity: 2% [?]

Если вам не хочется возиться с созданием сайт через HTML, то воспользуйтесь нашим бесплатным предложением по созданию сайта через Joomla WordPress и Drupal здесь!

В принципе, в прошлом видеокасте мы с вами рассмотрели как создавать параграф в HTML странице. Теги параграфа – <p> </p>. Например:

<p>Это пример параграфа</p>

Гораздо интереснее рассмотреть вопрос об атрибутах параграфа HTML страницы. В принципе, большинство атрибутов относятся к каскадным таблицам стилей (CSS), и рассмотрим мы это в других публикациях. Сейчас же мы остановимся на атрибуте выравнивания HTML страницы. Этот атрибут называется align и имеет четыре значения:

• Left выравнивание по левому краю
• Center выравнивание по центру
• Right выравнивание по правому краю
• Justify выравнивание по ширине

Например:

<p align="left">Это выравнивание по левому краю</p>
<p align="center">Это выравнивание по центру </p>
<p align="right">Это выравнивание по правому краю</p>
<p align="justify">Это выравнивание по ширине</p>

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

Это выравнивание по левому краю

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

Это выравнивание по правому краю

Это выравнивание по ширине

Надо заметить, что выравнивание по ширене считается в HTML странице недопустимым. Используется в большинстве случаев выравнивание по левому краю – так легче читать веб-документы. Остальные способы используются в зависимости от решаемых задач.

Кроме этого, часто используется тег абзаца <br /> который применяется для создания пустой строки.

Как задавать HTML заголовки

И ещё один вопрос стоит здесь рассмотреть – как в HTML документе создавать заголовки.

Заголовки в HTML странице задаются следующим образом:

<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
<h4>Это заголовок четвертого уровня</h4>

Ну и так далее.

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

Это заголовок первого уровня

Это заголовок второго уровня

Это заголовок третьего уровня

Это заголовок четвертого уровня

Popularity: 2% [?]

Сегодня мы начинаем новый цикл постов, посвящённых изучению языка разметки HTML и CSS. Многие правоверные джидаи могут спросить – А на кой вообще нужно изучать всякие там HTML и CSS? Берём Joomla или WordPress или Drupal и создаём свой сайт или блог бесплатно!

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

Ну и, кстати, многие создают одностаничники для сбора подписей на свои курсы. А там уж точно нельзя без HTML и CSS. Директ почта – ещё один пример рационального использования HTML и CSS. Что приятнее получить – оригинальное письмо в виде одностраничника, или тупо письмо? Думаю ответ очевидный.

Короче, всякий уважающий себя джидай должен знать HTML и CSS, хотя бы для того, чтобы не тупить, когда откроет шаблон Joomla WordPress или Drupal. И сегодня мы стартуем.

Чё такое HTML?

Прежде всего, язык HTML – язык разметки. HTML состоит из тегов, те в свою очередь имеют свои атрибуты. Обычно теги начинаются с открытого тега и заканчиваются закрытым тегом. Например, тег параграфа начинается с открытого тега параграфа <p> и закрывается тегом </p>. В итоге вся конструкция выглядит так (писать р или Р – без разницы):

<p> Здесь будет тест параграфа </p>

Но бывают и пустые теги, например:

<br />

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

Структура HTML документа

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
< body >
</body>
</html>


Что сие значит? Итак, первые 2 строки HTML страницы – это указание на валидизацию. Иными словами как браузер узнает, что это именно HTML документ? Правильно, по первым 2-м строчкам.

Точнее сказать по первой строчке, так как между тегами <html> </html> записывается основное содержание страницы. Другими словами HTML страница начинается с  <html> и заканчивается </html> в самом конце страницы.

Далее идут теги <head> </head>. Между ними записываются мета теги для HTML страницы, мета теги описания, тип кодировки. Мета теги ключевых слов HTML страницы выглядят следующим образом:

<meta name=”keywords” content=”гараж, автомобиль продажа” >

Мета теги описания HTML документа имеют вид:

<meta name=”description” content=”На данной страницы вы найдёте инфо о б автомобилях” >

Пару слов о кодировке. В данном примере стоит кодировка HTML страницы charset=utf-8. Проблема в том, что для русского языка есть две кодировки utf-8 и win-1251. Иногда нужно писать utf-8, иногда win-1251. Это зависит от ряда факторов, которые мы пока не будем трогать.

Кроме того, между тегами HTML страницы <head> </head> подсоединяются файлы с CSS или файлы Java script.

Ещё одни важные теги HTML страницы – теги заголовка – <title> </title>. Заголовок страницы выводиться в верхней части браузера. По умолчанию это Untitled Document – Документ без названия. А вы уж пишете своё название HTML страницы. Например, это страница будет называться ‘‘Структура HTML документа‘‘ (посмотрите на верхнею правую часть браузера!)

И наконец теги HTML страницы <body> </body>. Это теги, между которыми записывается вся информация, предназначенная для пользователя. Чё за фигня! – воскликнет удивлённый читатель! Выше было сказано, что содержание страницы записывается между тегами <head> </head>!

Так то оно так, да не так. Между тегами HTML страницы <head> и <body> записывается то, как будет информация отображаться, как эту страницу будут видеть поисковые роботы и т.д. То есть записывается служебная информация HTML страницы. А то, что будут видеть пользователи, отображается как раз между тегами <body> </body>.

На этом всё, мои дорогие детешички. Если хотите получить свой сайт в свои цепкие лапки бесплатно, жмите сюда.

Popularity: 2% [?]