Углубленный курс HTML | Как добавить стиль
Дэйв Рэгетт
Эта публикация представляет собой краткое введение в создание HTML-документов. Многие люди по-прежнему пишут HTML-код вручную, используя такие программы как NotePad в системе Windows или SimpleText на Mac. Это руководство поможет Вам начать работу. Даже если Вы не собираетесь работать с непосредственно кодом HTML, а хотите использовать HTML-редактор типа Netscape Composer или W3C Amaya, это руководство даст Вам достаточное понимание языка, что позволит лучше использовать такие программы и делать HTML-документы доступными различным браузерам. Разобравшись с основами создания документов HTML, Вы, возможно, захотите узнать о том, как можно добавить стиль с помощью CSS и познакомиться с дополнительными возможностями, изложенными а материале "Углубленный курс HTML"
Устранять ошибки разметки автоматически удобно с помощью утилиты HTML Tidy. Эта утилита приводит разметку в порядок, упрощая прочтение и редактирование. Рекомендую Вам регулярно проверять всю разметку, которую Вы пишете или редактируете, с помощью Tidy. Tidy очень эффективна для приведения в порядок разметки, созданной некорректными HTML-редакторами.
p.s. Хороший способ учиться - смотреть на html-код других страниц. Для этого в меню "View (Вид)" выберите пункт "Source (Исходный текст)". Посмотрите на эту страницу, как я реализовал в ней идеи, которые объясню ниже. У Вас разовьется критический взгляд, поскольку многие страницы на поверку оказываются куда более беспорядочными!
Это руководство научит Вас:
Если Вы хотите узнать что-то еще, попробуйте перейти к углубленному курсу HTML.
Каждый документ HTML имеет заголовок. Вот как это делается:
<title>Мой первый документ HTML</title>
Измените текст в кавычках, как нужно Вам. Тексту заголовка предшествует начальный тег <title>, а за ним следует соответствующий конечный тег </title>. Заголовок должен располагаться в начале документа.
Если Вы работали с редактором Microsoft Word, то Вы наверняка знакомы со встроенными стилями заголовков различной степени важности. В HTML есть шесть уровней заголовков. H1 - это наиболее важный заголовок, H2 - следующий по степени важности и т.д. вплоть до H6, наименее важного заголовка.
Вот как добавляется важный заголовок:
<h1>Важный заголовок</h1>
а вот как добавляется менее важный заголовок:
<h2>Менее важный заголовок</h2>
Каждый абзац текста должен начинаться с тега <p>. Тег </p> необязателен, в отличие от конечного тега таких элементов как, например, заголовки. Например:
<p>Это первый абзац.</p> <p>Это второй абзац.</p>
Одно или несколько слов можно выделить с помощью тега <em>, например:
Это действительно <em>интересно</em>!
Изображения могут придать Web-страницам индивидуальность и помочь передать смысл. Проще всего добавить изображение с помощью тега <img>. Предположим, у Вас есть файл изображения с именем "peter.jpeg" в той же папке/каталоге, что и HTML-файл. Он имеет 200 пикселов в ширину и 150 в высоту.
<img src="peter.jpeg" width="200" height="150">
Атрибуты width и height (ширина и высота) не являются обязательными, но помогают ускорить отображение своей Web-страницы. И все равно кое-чего еще не хватает! Если кто-то не может увидеть изображение, понадобится описание, которое он прочел бы вместо этого. Короткое описание можно добавить следующим образом:
<img src="peter.jpeg" width="200" height="150" alt="Мой друг Петя">
Атрибут alt используется для указания короткого описания, в данном случае это "Мой друг Петя". Для более сложных изображений понадобятся длинные описания. Предположим, длинное описание находится в файле с именем "peter.html". Тогда с помощью атрибута longdesc можно сделать следующее:
<img src="peter.jpeg" width="200" height="150" alt="Мой друг Петя" longdesc="peter.html">
Есть множество способов создания изображений - например, с помощью цифрового фотоаппарата, путем сканирования или рисования в редакторе изображений. Большинство браузеров понимают форматы GIF и JPEG, более новые браузеры понимают также и формат PNG. Во избежание задержек во время загрузки изображения по сети старайтесь не использовать файлы изображений большого размера.
Вообще формат JPEG больше подходит для фотографий и других изображений без резких переходов, а GIF и PNG - для графики, где встречаются пятна одного и того же цвета, линии и текст. Все три формата поддерживают возможность последовательной генерации, когда сначала отправляется версия изображения низкого качества, а затем качество постепенно улучшается.
Эффективность Web заключается в возможности определения ссылок с одной страницы на другую и перехода по этим ссылкам с помощью нажатия кнопки мыши. С помощью одного щелчка Вы можете переместиться на другую сторону Земли!
Ссылки определяются с помощью тега <a>. Давайте определим ссылку на файл "peter.html":
Это ссылка на <a href="peter.html">Петину страницу</a>.
Текст между тегами <a> и </a> используется в качестве заголовка ссылки. Обычно такие заголовки представляются подчеркнутым синим шрифтом.
Чтобы создать ссылку на страницу на другом Web-сайте, укажите полный Web-адрес (обычно он называется URL), например, для ссылки на www.w3.org напишите:
Это ссылка на <a href="http://www.w3.org/">W3C</a>.
Ссылкой можно сделать и изображение. Например, в следующем примере показано, как можно сделать логотип компании ссылкой на ее страницу:
<a href="/"><img src="logo.gif" alt="домашняя страница"></a>
В HTML поддерживаются три вида списков. Первый - маркированный список, часто называемый неупорядоченным. Для него используются теги <ul> и <li>, например:
<ul> <li>первый элемент списка</li> <li>второй элемент спискаlt;/li> <li>третий элемент списка</li> </ul>
Обратите внимание, что список всегда должен заканчиваться конечным тегом </ul>, но конечный тег </li> необязателен и может быть опущен. Второй вид списков - нумерованные списки, часто они называются упорядоченными. Для этого типа используются теги <ol> и <li>. Например:
<ol> <li>первый элемент списка</li> <li>второй элемент списка</li> <li>третий элемент списка</li> </ol>
Как и для маркированных списков, всегда нужно указывать конечный тег </ol>, а конечный тег </li> необязателен и может быть опущен.
Третий и последний тип списков - список определений. Он позволяет создавать списки терминов и их определений. Списки этого тип начинаются тегом <dl> и заканчиваются тегом </dl> Каждый термин начинается тегом <dt>, а каждое определение - тегом <dd>. Например:
<dl> <dt>первый термин</dt> <dd>его определение</dd> <dt>второй термин</dt> <dd>его определение</dd> <dt>третий термин</dt> <dd>его определение</dd> </dl>
Конечные теги </dt> и </dd> необязательны, их можно не указывать. Обратите внимание, что списки могут быть вложенными. Например:
<ol>
<li>первый элемент списка</li>
<li>
второй элемент списка
<ul>
<li>первый вложенный элемент</li>
<li>второй вложенный элемент</li>
</ul>
</li>
<li>третий элемент списка</li>
</ol>
Для длинных элементов списков можно также использовать абзацы, заголовки и т.д..