Продолжаю серию постов для начинающих освоение HTML.
В этот раз мы рассмотрим теги для выделения текста, теги для создания списков, перенос строки и горизонтальную линию.
Кроме этого – несколько важных правил относительно имён файлов, размещаемых на хостинге.
Теги выделения текста курсивом и полужирным шрифтом
Тег <strong>Текст внутри этого тега, будет выведен браузером полужирным шрифтом</strong>.
Тег <em>даёт команду браузеру вывести текст — курсивом</em>.
Надо сказать, что оба этих тега называются логическими, и их назначение – именно логическое выделение участка текста.
Возможно, вам известно, что существуют не графические браузеры, для слепых, например. Такой браузер текст читает, и в логических тегах он произносит слова или громче, или с другой интонацией.
В HTML5 вернули, ранее считавшиеся устаревшими, теги физического форматирования <b> – от слова bold (“полужирный”) и тег <i> от слова italica (“курсив”). Но я по-прежнему рекомендую их не использовать, а отдать предпочтение <strong> и <em>.
Маркированный и нумерованный списки
В таблице ниже, вы увидите, что начало маркированного списка задаёт тег <UL>, а начало нумерованного списка – тег <OL>.
Каждый пункт списка находится в теге <LI>.
Маркированный список (не упорядоченный)
ВЕБ мастер должен освоить:
- HTML
- CSS
- JavaScript
- AdobePhotoshop
HTML код:
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>AdobePhotoshop</li> </ul>
Нумерованный список (упорядоченный)
Для создания успешного блога нужно:
- купить домен
- хостинг
- установить WordPress
- написать статьи
HTML код:
<ol> <li>купить домен</li> <li>хостинг</li> <li>установить WordPress</li> <li>написать статьи</li> </ol>
Внутри OL и UL нельзя будет размещать ничего, кроме элементов LI, но в самих пунктах списка (LI) могут быть вложены, например, ссылки.
Маркированные списки, с отключенными маркерами, широко используются для создания различных навигационных меню по сайту.
Специальным указанием, в CSS этого документа, любой список из вертикально расположенного, можно превратить в горизонтальный.
Атрибуты HTML тегов
Ещё можно встретить в HTML-коде такие конструкции:
<UL TYPE=»SQUARE»>
“дополнение”, которое идёт через пробел внутри угловых скобок тега – называется “атрибут тега”. В данном случае, этот атрибут даёт указание браузеру заменить в маркированном списке традиционные чёрные кружки маркеров, на квадратики.
В наступающем Новом Году HTML5, НЕ рекомендуется использовать атрибуты тегов. Для этой цели, теперь нужно использовать возможности CSS3 (Каскадные таблицы стилей).
С помощью CSS3 можно поменять не только вид маркеров (это может быть любой символ, который есть в шрифте), но и тип символов нумерации в нумерованных списках. Это могут быть, например, римские цифры или буквы латинского алфавита (A, B, C, D…).
О CSS правилах для изменения внешнего вида маркеров списка я буду рассказывать позже.
Тег переноса строки и создания горизонтальной линии
Для принудительного переноса текста на следующую строку (без создания нового абзаца) служит тег <BR />.
Иногда, его используют, когда нужно просто вывести несколько строк друг над другом. Почтовый адрес, например.
Для визуального отделения частей страницы, можно использовать тег <HR />. Он создает горизонтальную линию. Длину этой линии можно задать внутри тега атрибутом WIDTH.
<hr width="30%" />
Эта линия будет занимать 30% от ширины родительского элемента.
Примерно так…
Посмотрите презентацию на тему «Основы HTML». В ней рассказ о уже известных вам, базовых тегах HTML.
Важные правила при задании имени файла
Нужно помнить, что есть ограничения при выборе имени файла HTML-документа (это же относится и к названиям каталогов). Эти особенности связаны с UNIX – подобной операционной системой, именно их используют большинство хостинг-провайдеров.
Правила просты:
- Не используйте русских букв, в именах могут быть только латинские буквы и цифры,
- Не используйте пробелы. Их можно заменить на символ_нижнего_подчеркивания. Хотя, часто слова в имени файла пишут слитно.
- Не используйте специальные символы, типа: “№;%:?*()”@! Можно использовать только нижнее подчёркивание и точку (хотя лучше один раз – перед расширением).
- Желательно называть имена и каталоги буквами только в нижнем регистре (т.е. маленькими буквами).
Вот и все правила – три “золотых” и одно “серебряное”.
Продолжение сериала…
В следующей статье поговорим о вставке изображений в HTML – страницу. Тег IMG и его атрибуты.