Перед вами краткое руководство по написанию HTML. Многие до сих пор пишут HTML,А используя средства похожие на Notepad или SimpleText. Данное руководство поможет вам получить начальное представление о HTML. Даже если вы не планировали редактировать HTML напрямую, а использовать HTML-редактор, такой как Netscape Composer или FrontPage, данное руководство поможет вам использовать эти средства лучше, а также делать ваши HTML-документы понятными для большинства браузеров. Почувствовав выгоды, которые дает вам знание основ написания HTML, вы, возможно, захотите освоить материал, размещенный в раздел Продвинутый HTML.
Хороший способ научиться — это посмотреть, как другие люди пишут коды своих HTML-страниц. Для этого выберите в браузере пункт "View" ("Вид"), а затем "Source" ("В виде HTML").
Данная страница научит вас как:
Если вы ищете что-то еще, попробуйте Продвинутый HTML
Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 — самый важный, Н2 — чуть менее важен, и, наконец, Н6 — наименее значимый.
Пример того, как добавить важный заголовок:
<h1>Важный заголовок</h1>
Результат:
и чуть менее важный:
<h2>Чуть менее важный</h2>
Результат:
Каждый параграф, который вы напишете должен начинаться тэгом <p> и заканчиваться тэгом </p> . Например:
<p>Это первый параграф.</p>
<p>А это второй параграф.</p>
Вы можете выделить одно или больше слов, используя тэг <em>, пример:
Это действительно <em>интересный</em> пункт!
Результат:
Это действительно интересный пункт!
Тэг FONT может быть использован для указания цвета и размера шрифта, которым будет выведен ваш текст. В этом примере устанавливается цвет:
В этом предложении есть <font color="yellow">слово</font> , выделенное желтым цветом.
Результат:
В этом предложении есть слово выделенное желтым цветом.
Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):
Советы <font size="+2" color="maroon">ветеринарного</font> врача
Результат:
Советы ветеринарного врача
Использование рисунков делает ваши страницы более интересными. Вставить рисунок позволяет тэг <img>. Предположим, что файл рисунка "peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.
<img src="peter.jpeg" width="200" height="150"><BR>
Указание ширины и высоты не является строго необходимым, но увеличивает скорость загрузки вашей WEB-страницы. Следует задать описание картинки для людей, у которых отключена загрузка изображений. Вы можете добавить краткое описание, используя атрибут alt:
<img src="peter.jpeg" width="200" height="150" alt="Мой друг Петя">
В WWW используется два формата графических файлов GIF и JPEG. Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:
Формат JPEG больше подходит в следующих случаях:
Ссылки обозначаются тэгом <a>. Определим ссылку на страницу определенную в файле "advanced.htm":
Это ссылка на <a href="advanced.htm">Продвинутый HTML</a>.
Результат:
Это ссылка на Продвинутый HTML.
Текст между <a> и </a> используется как описание ссылки, обозначается обычно синим цветом, и подчеркивается линией.
Для ссылки на другую Web-страницу нужно указать ее полный Web-адрес (называемый URL), например, для ссылки на www.km.ru необходимо набрать следующий текст:
Это ссылка на <a href="http://www.km.ru/">www.km.ru</a>.
Вы можете использовать в ссылке картинку. Следующий пример позволяет кликаньем на логотипе компании перейти на ее домашнюю страницу:
<a href="/"><img src="logo.gif" alt="home page"></a>
HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным) списком. Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>, пример:
<ul> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ul>
Результат:
Второй вид - нумерованный (упорядоченный) список. Он использует тэги <ol> и <li>. Пример:
<ol> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ol>
Результат:
И последний - это список определений (глоссарий). Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>. Пример:
<dl> <dt>первый термин</dt> <dd>его определение</dd> <dt>второй термин</dt> <dd>его определение</dd> <dt>третий термин</dt> <dd>его определение</dd> </dl>
Результат:
Списки могут быть вложенными, один в другой. Пример:
<ol>
<li>первый пункт списка</li>
<li>второй пункт списка
<ul>
<li>первый пункт вложенного списка</li>
<li>второй пункт вложенного списка</li>
</ul>
</li>
<li>третий пункт списка</li>
</ol>
Результат:
Если вы готовы изучать HTML дальше, я подготовил дополнительный материал Продвинутый HTML.