21

H TML учебник

HTML – тот минимум, который абсолютно необходим для создания любого сайта, как самого простенького, так и профессионального.

В 1989 году Тим Бернерс–Ли впервые пред­ло­жил использование гипертекста для объеди­нения разрозненных массивов информации.

С этого дня началась ЭПОХА ИНТЕРНЕТ.

HTML, являясь основным средством описания гипертекстовых связей является основой любого существующего во всемирной сети сайта, начиная от самого простого и заканчивая крупными корпоративными проектами.

Это интересно. По статистике на изучение языка HTML среднестатистический веб–мастер тратит около 1го – 2х месяцев, в то же время большая часть веб–мастеров знают не более 30% HTML тегов, чего оказывается вполне достаточно для создания полноценных сайтов.

HTML учебник, расположенный перед вами содержит в себе все необходимые HTML теги с подробным описанием и примерами.

Изучение этого HTML учебника станет для вас первым шагом в огромный и интерестный мир. Создание сайтов в современном мире превратилось в неплохой бизнес, который постоянно порождает открытие новых отраслей для заработка. Создание сайтов, веб–дизайн, интернет–маркетинг, копирайтинг и SEO – одни из немногих отраслей, связанных с созданием сайтов и приносящих своим владельцам огромные доходы.

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

Изучив этот учебник HTML вы без труда сможете:

• писать валидный код, кроссбраузерный код, который будет одинаково отображаться всеми интернет–браузерами и правильно индексироваться поисковыми машинами

• создавать собственные web–страницы и даже целые сайты

• понимать и с легкостью редактировать чужой HTML код

• встраивать элементы кода любой сложности в свой сайт (всевозможные счетчики, партнерские программы и т.д.)

Даже если вы не имеете большого опыта работы в сети интернет, вы сможете с легкостью понять и изучить информацию, написанную на страницах этого учебника.

А теперь, предлагаю вам перейти к изучению первого урока:

Урок 1:Введение в HTML.

"Введение в HTML" – первый урок учебника HTML. Здесь мы с вами поговорим об основных правилах синтаксиса языка, узнаем, что такое теги и какими они бывают. Также мы с вами разберем структуру html документов. Введение в HTML станет для вас самым первым шагом на пути к созданию собственного сайта.

Данный урок станет для вас первым шагом на пути к созданию собственного сайта и он уже наполовину пройден...

Элементы разметки HTML.

HTML, являясь языком разметки состоит из так называемых тегов (элементов разметки), которые, в свою очередь, могут быть:

• полные

• неполные

• символьные

Полный элемент разметки, также называемый контейнером, имеет открывающий и закрывающий теги, неполный – только открывающий, а символьные элементы разметки представляются в виде символьных кодов и вы можете видеть их в таблице ниже:

Символьные элементы разметки

Код символа	Именное значение	Символ
&#34	&quot	"
&#38	&amp	&
&#60	&lt	<
&#62	&gt	>
&#160	&nbsp	пробел
&#161	&iexcl	¡
&#162	&cent	¢
&#163	&pound	£
&#164	&curren	¤
&#165	&yen	¥
&#168	&uml	¨
&#169	&copy	©
&#171	&laquo	«
&#174	&reg	®
&#177	&plusmn	±
&#187	&raquo	»

Основным назначением HTML тегов является указание области действия тех или иных правил разметки документов. Большая часть HTML тегов состоит из двух частей: открывающий тег <...> и закрывающий тег </...>.

Например:

<strong>текст</strong>

<div> ........ </div>

Также в HTML существуют теги, не требующие закрывающего элемента. Это, как правило, элементы вставки чего–либо или служебные элементы:

<img>– тег вставки изображения

<br>– тег вставки разрыва строки

<hr>– тег вставки горизонтальной линии

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

Так что изначально учитесь писать грамотный HTML код, закрывая все теги, требующие закрытия.

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

Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих контейнеров:

<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

Внутри контейнера <HTML></HTML> расположен весь документ HTML, включая все служебные комманды и основной контент, поэтому выход за границы этого тега очень нежелателен.

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

Внутри контейнера <BODY></BODY> расположенна вся информация, которую необходимо вывести на экран.

В какой программе удобно писать HTML.

И в заключение я хотел бы обсудить тему написания WEB документов. В принципе веб-доку­мент является простой последовательностью символов, поэтому его можно написать абсолютно в любом редакторе текста, затем сохранив с расширением .htm (.html, .xhtml, .xml и т.д.) и вывести его на экран браузером.

Так то оно так, но удобно ли это?

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

Данный урок был вводным. В нем мы бросили первый взгляд на язык разметки HTML. Думаю, что введение в html не было для вас трудным, ведь этот язык очень прост для понимания и достаточно быстро усваивается.

В следующем уроке мы обсудим основы этого языка. Поговорим о грамматике, изучим несколько новых элементов разметки и научимся делать комментарии.

Урок 2: Основы HTML для начинающих.

"Основы HTML для начинающих" – второй урок учебника HTML. Речь здесь пойдет об основных особенностях отображения и разметки текста. В данном уроке мы вплотную начнем работать с элементами разметки, предоставляемыми этим языком и вы на себе поймете, что язык действительно прост.

Основы отображения текста.

Разметка текста, принятая во могих популярных текстовых редакторах, таких как Microsoft Word или БЛОКНОТ, не может быть правильно интерпретированна в рамках спецификации HTML. Вызванно это значительными различиями внутренней архитектуры вывода этих языков.

Основными элементами разметки языка HTML можно считать тег параграфа <p></p>, тег разрыва строки <br> и теги заголовков <h1></h1>,<h2></h2> и т.д. Количество пробелов между символами не может превышать одного. Если очень необходимо установить более одного пробела необходимо использовать символьный элемент – &nbsp. Рассмотрим сказанное на примере:

<p>Это простое предложение, которое является параграфом.</p> <h1>Это заголовок уровня H1</h1> <p>Выводим     несколько пробелов</p>.

Это простое предложение, которое является параграфом. Это заголовок уровня H1 Выводим несколько пробелов.

Элементы контейнера HEAD.

Контейнер HEAD – очень важный элемент любого web-документа. В нем задаются параметры, которые позволяют браузеру и серверу правильно определить кодировку документа. Также в этом контейнере размещается множество дополнительных параметров, которые необходимы для установки связи с внешними файлами, для работы с поисковыми системами, для подтверждения прав собственности на сайт и т.д.

Внутри контейнера <HEAD> могут располагаться:

• TITLE (заголовок страницы);

• BASE (каталог для сайта по умолчанию);

• META (служебные теги);

• LINK (ссылки страницы);

• STYLE (внутренний лист стилей);

• SCRIPT (скрипты).

Изучая основы html для начинающих первым делом необходимо разобраться с элементами кон­тейнера <head>. Должен сказать, что большинство учебников, посвященных изучению HTML на­чинается с описания именно этого контейнера, в то время, как читатель еще не достаточно подготовлен. Сегодня мы бросим беглый взгляд на элементы этого контейнера, не останавливаясь на них подробно. Все станет для вас намного понятней по мере изучения этого учебника.

Title.

Title – САМЫЙ ВАЖНЫЙ ЭЛЕМЕНТ РАЗМЕТКИ. Переоценить значимость этого тега практически невозможно. Заголовок страницы играет огромную роль в индексировании страницы поисковыми машинами. Именно заголовок страницы используется в качестве ссылки в строке выдачи результата ПМ. Оптимизация title является наиболее важным фактором внутренней оптимизации сайта.

Title играет немаловажную роль при программировании на JavaScript, определяя зону видимости переменных.

Перечислять достоинства этого элемента разметки можно до бесконечности. В общем никогда не забывайте придумывать для каждой страницы уникальный тег заголовка.

Base.

При создании web-страниц вам постоянно придется ставить ссылки между страницами разных уровней вложенности. Далеко не всегда удобно каждый раз писать абсолютные адреса вида:

<a HREF="http://www.eltisbook.ru/something.html">

когда их можно заменить относительными:

<a HREF="../something.html">

,что дословно означает – «НА УРОВЕНЬ ВЫШЕ ОТ БАЗОВОГО РАСПОЛОЖЕН ФАЙЛ something.html»

Так вот базовым, по умолчанию, всегда принимается корневой каталог сайта, но вы без труда сможете это изменить посредствам тега <BASE>:

<BASE HREF="http://www.eltisbook.ru/html">

Данная запись означает, что в качестве базового каталога мы выбрали html, который расположен на уровень выше от корневого.

Link.

Служит для построения дополнительных, постоянных внешних связей документа:

<LINK REL="stylesheet" href="style.css" TYPE="text/css">

REL определяет тип связи между документами, а TYPE определяет тип подключаемого документа. Для разных типов документов существуют разние методы интерпретации, поэтому следите за правильностью ввода.

Style.

Тег <style> позволяет задать внутреннюю таблицу стилей внутри тела html документа. Этот метод уже мало где используется ввиду дополнительного загромождения кода и тем самым, увеличения веса и времени загрузки документа. Но если вам где-нибудь понадобится этот метод, знайте:

<STYLE TYPE=text/css>

..описание стилей..

</STYLE>

Script.

Этот элемент разметки служит для использования и загрузки скриптов:

<SCRIPT LANGUAGE="JavaScript" SRC=jvscript.js> ..код.. </SCRIPT>

Meta.

Мета-теги содержат служебную информацию о документе.

Использование Мета–тегов – достаточно обширная тема, требующая отдельного урока, поэтому об использовании META–тегов мы поговори в следующий раз.

Использование комментариев.

Как и в любом другом языке программирования в HTML имеется поддержка комментариев. Для создания комментария используется конструкция вида:

<!-- комментарий -->

Использование комментариев может оказаться действительно полезным, например при одновременной работе нескольких специалистов над одним проектом.

В данном уроке мы разобрались с основами html для начинающих и посмотрели на него в действии, научились использовать элементы разметки и добавлять комментарии. Не так далек тот момент, когда вы без труда сможете создать свой собственный сайт на любую тематику, пусть это даже будут профильные трубы.

В следующий раз речь пойдет об использовании мета-тегов. Мы разберем особенности этих элементов и поговорим о каждом из них в отдельности.

Урок 3: Мета теги HTML.

"Мета теги" – третий урок учебника HTML. В этом уроке мы поговорим об использовании основных мета тегов. Использование мета информации позволяет максимально точно описать большинство параметров страницы, тем самым улучшив ее отображение в различных браузерах.

Мета теги могут также содержать служебную информацию, необходимую поисковым системам.

Основные мета теги в HTML.

Мета теги предоставляют браузерам пользователей и поисковым машинам служебную информацию о документе. Информацию о создателе, частоте обновления, ключевых словах, и т.д. Грамотно составленные мета теги помогают поисковым машинам лучше понять вашу страницу и правильнее ее классифицировать, а браузерам – правильно отобразить.

Все без исключения мета теги не являются обязательными, но, несмотря на это, использование некоторых из них настоятельно рекомендуется.

Здесь мы перечислим наиболее важные мета-теги в HTML:

<META HTTP – EQUIV="Content – Type" content="text/html" charset="windows – 1251">

Данный мета тег указывает тип и кодировку документа. content="text/html" – указывает, что текущий документ будет содержать текстовую информацию, оформленную на языке HTML. charset="windows – 1251" – указывает кодировку документа.

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

Настоятельно рекомендую не забывать использовать.

<META HTTP – EQUIV="Refresh" content="5" url="http://www.ya.ru">

Мета тег перезагрузки страницы, среди параметров которого время до следующей перезагрузки и адрес загружаемой страницы. content="5" – задает время задержки перед перезагрузкой равным 5 секундам. url="http://www.ya.ru" – указывает адрес страницы, которая будет загруженна.

<META NAME="Description" CONTENT="Описание вашей страницы.">

Краткое описание (аннотация) страницы, используемое поисковыми машинами для составления так называемого "сниппета" (краткого описания страницы, расположенного под заголовком).

<META NAME="Keywords" CONTENT="Ключевые слова.">

Список используемых на странице ключевых слов. Используется поисковыми системами для классификации страниц, хотя в настоящее время актуальность данного тега сведена к минимуму.

<META NAME="Document – state" CONTENT="Dynamic">

Этот мета тег указывает на статичность или динамичность страницы. В данном случае указывает на динамичность страницы.

<META NAME="Revizit – after" CONTENT="10 days">

Указывает поисковому роботу частоту изменения информации на странице. Не играет роли для современных поисковых систем.

<META NAME="author" content="Автор">

Указывает автора сайта. Может быть использован для подтверждения прав на сайт.

<META NAME="Copyright" content="Авторские права">

Мета тег, описывающий авторские права.

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

Урок 4: Форматирование текста в HTML

"Форматирование текста в HTML" – четвертый урок учебника HTML. В этом уроке мы разберем основы форматирования текстов в HTML. Форматирование в HTML имеет ряд особенностей, которые мы с вами и рассмотрим.

Теги форматирования текста в HTML.

Для придания тексту смысловой нагрузки используются специальные теги форматирования. Одним из наиболее значимых тегов форматирования теста в html является тег параграфа (<p>). Для усиления смысловой нагрузки используются теги <strong>– сильное увеличение смысловой нагрузки (жирный текст) и <em>– среднее увеличение смысловой нагрузки (курсивный текст).

Написанное здесь очень важно так как именно увеличение смысловой нагрузки дают эти теги, а не просто жирное или курсивное выделение в отличии от тегов <b> (жирный текст) и <i> (курсивный текст). А вот как отобразить текст это уже дело браузера... ну здесь, как вы уже наверное понимаете, большинство браузеров предпочитает выделять текст жирным или курсивом. Визуально нет никаких отличий, но зато есть большая разница для поисковых машин.

<p> <strong>важный</strong> <b>жирный</b> < em>значимый</em> < i>курсивный</i> < /p>

Не менее важными тегами форматирования текста можно считать теги <br> и <nobr>.

Тег <br> позволяет разорвать строку с текстом, продолжив написание текста с новой строки. Атрибут clear в теге <br> используется для отмены обтекания текстом объекта, расположенного рядом с текстом. В этом случае текст продолжается с первой новой строки после объекта.

Тег <nobr> означает написание текста без разрыва строки, даже если он не умещается на ширину экрана (в этом случае внизу экрана появится полоса прокрутки).

Использование тега PRE.

К одной из особенностей форматирования html относится то, что если вы скопируете текст из другого текстового редактора (например MS Word), то форматирование текста не будет сохранено. Для копирования текста из текстового редактора с сохранением форматирования используется тег <PRE>:

<pre>

Это предварительно форматированный текст. Он сохраняет как пробелы в любом количестве, так и переносы строк.

</pre>

Заголовки.

Еще одним очень важным элементом форматирования текста является использование заголовков. Заголовки бывают 6–ти основных уровней от H1 (самый большой) до H6 (самый маленький). Увидеть каждsй из них вы сможете в таблице:

Уровень заголовка	Вид
h1	h1
h2	h2
h3	h3
h4	h4
h5	h5
h6	h6

Выравнивание элементов .

Для выравнивания элементов используется тег align, который может принимать следующие значения :

Значение	Вид
justify	Выравнивание текста по ширине
left	Выравнивание по левому краю
right	Выравнивание по правому краю
center	Выравнивание по центру

К примеру, для выравнивания текста по ширине страницы используется следующий код:

<p align="justify"> Этот текст будет отформатирован по ширине страницы</p>

Форматирование шрифта.

Для форматирования шрифта используется тег Font, который имеет ряд атрибутов, которые позволяют придать тексту определенный шрифт, размер и цвет:

Значение	Вид
face	Позволяет изменить шрифт
color	Позволяет выбрать цвет
size	Задает размер букв

В приведенной ниже таблице вы можете увидеть шестнадцетиричные коды основных цветов, также называемых безопасной web палитрой. Проще говоря данные цвета будут отображаться одинаково, вне зависимости от версии браузера и модели монитора:

цвет	шестнадцатеричное представление
aqua	#00FFFF
black	#000000
blue	#0000FF
fuchsia	#FF00FF
gray	#808080
green	#008000
lime	#00FF00
maroon	#800000
navy	#000080
olive	#808000
purple	#800080
red	#FF0000
silver	#C0C0C0
teal	#008080
white	#FFFFFF
yellow	#FFFF00

Ну и небольшой пример:

<font face="verdana" color="red" size="1"> Я красный текст шрифта verdana размером 1 </font>

Теперь мы научились форматировать текст в HTML, используя основные теги форматирования.

Следующий урок будет очень важен, т.к. в нем речь пойдет о работе с гиперссылками. Гипертекстовые переходы – основа web документов, поэтому отнеситесь к предстоящему уроку максимально серьезно.

Практическая работа

<html>

<head>

<Title>Заголовок страницы

</Title>

</head>

<body>

<strong>текст</strong>

<div> ........ </div>

<p>Это простое предложение, которое является параграфом.</p>

<h1>Это заголовок уровня H1</h1>

<p>Выводим     несколько пробелов</p>.

<p> <strong>важный</strong> <b>жирный</b> < em>значимый</em> < i>курсивный</i> < /p>

<p align="justify"> Этот текст будет отформатирован по ширине страницы</p>

<font face="verdana" color="red" size="1"> Я красный текст шрифта verdana размером 1 </font>

</body>

</html>

Урок 5: Гиперссылки в HTML.

"Гиперссылки в HTML" – пятый урок учебника HTML. В этом уроке речь пойдет об использовании гипертекстовых ссылок. На гипертекстовых связях основан любой web документ, поэтому уметь работать со ссылками обязан каждый веб мастер.

Правила использования гипертекстовых ссылок.

Гиперссылки в HTML необходимы для связи различных документов, как в пределах одного сайта, так и в пределах всей сети интернет. Для создания гипертекстовых связей (гиперссылок) используется дескриптор <a>:

<a href="адрес_документа">текст ссылки</a>

При помощи атрибута href передается адрес документа, на который указывает ссылка.

В качестве гиперссылок могут выступать самые разнообразные объекты, в том числе изображения:

– мета–теги в HTML .

Ссылаться можно не только на разные документы, но и на различные части этих документов. Для этого в некоторой части документа необходимо разместить так называемый якорь – конструкцию вида <a name="название якоря "></a>, а затем сослаться на нее, указав в атрибуте href следующий код:

href="http://www.eltisbook.ru.#название якоря"

Нажав на ссылку ниже вы попадете в нижнюю часть главной страницы:

<a href="../index.php#1">Как создать свой сайт БЕСПЛАТНО </a>

Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход просто произойдет на начало документа, при этом не возникнет никаких ошибок.

Гипертекстовые связи могут осуществляться по множеству протоколов. Наиболее часто используемые представленны ниже:

HTTP– протокол – стандартный протокол гипертекстовых связей, предназначенный для разовой передачи блоков информации.

FTP– протокол – уневерсальный протокол передачи файлов. Требует авторизации.

MAILTO– стандартный протокол передачи почты.

Настройка гиперссылок в HTML.

Атрибут target, тега <a> определяет как откроется новая страница и принимает следующие значения:

_self – документ откроется в текущем окне

_parent – во фрейме–родителе текущего фрейма

_top – в главном окне всей фреймовой структуры

_blank – документ откроется в новом окне

Например для открытия страницы с контактами в новом окне необходимо использовать следующий код:

<a href="http://www.eltisbook.ru/contact/contact.php" target="_blank">Контакты</a>

Придать гиперссылкам особенный вид можно при помощи атрибутов LINK, ALINK, VLINK, где:

Link – определение внешнего вида еще не посещенных ссылок.

Alink – определение внешнего вида уже посещенных ссылок.

Vlink – определение внешнего вида выделенных ссылок.

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

В следующем уроке мы поговорим о работе с графикой в HTML: научимся вставлять изображения, настраивать их внешний вид и т.д.

Урок 6: Графика в HTML.

"Графика в HTML" – шестой урок учебника HTML. В этом уроке речь пойдет о работе с веб графикой, как частью HTML страниц. Мы научимся создавать изображения в рамках HTML и настраивать их отображение.

Работа с изображениями и графикой в HTML очень важна, именно она позволяет сделать внешний вид страницы таким, каким мы его и хотим видеть, создание фона, добавление графических объектов и многое другое будет рассмотренно в этом разделе.

Использование графики на HTML страницах.

В современном интернет очень популярно оспользование всевозможной графики на веб страницах, использование звуков и анимации. Многие веб–мастера используют графику на своих сайтах для привлечения новых клиентов, для создания броского и уникального дизайна для сайта.

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

Простота – есть гениальность.

Придерживайтесь этого правила и ваши страницы будут притягивать внимание.

Но простота и примитивность – совершенно разные понятия. Найдите баланс. Экспериментируйти для получения своей, уникальной формулы дизайнерского успеха...

Добавление изображений к html странице.

Для добавления к web–странице файла с изображением используется тег <img>, с обязательным атрибутом src, который будет указывать на файл с изображением.

<p><center><img src="../img/cat.gif" alt="Это кот "></center></p>

Форматирование изображений.

Для форматирования текста, расположенного рядом с изображением используется атрибут тега <img>– allign. Пример его работы вы можете видеть ниже:

Значение	Вид
Rigth Hspace=10px	б ла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Left Hspace=3px	б ла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Top Hspace=10px Vspace=5px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Middle Hspace=1px Vspace=12px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Bottom Hspace=10px Vspace=10px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла

Для дополнительного форматирования изображений могут быть использованны атрибуты hspace и vspace, которые определяют интервал между графическим изображением и расположенным возле текстом по горизонтали и вертикали. Величина отступа задается в пикселях. В примере сверху вы можете видеть влияние этих атрибутов на форматирование.

Также форматировать изображение можно посредством атрибута border, задающего ширину рамки вокруг изображения. По умолчанию рамка вокруг изображения равна 0, а вокруг изображения, являющегося ссылкой – 2.

Аттрибуты height и width позволяют задать размер изображения по ширине и высоте. Задать размер можно как в пиксельной, так и в процентной величине. По умолчанию браузер устанавливает изображению его реальные размеры, но я вам настоятельно рекомендую всегда использовать эти атрибуты и задавать размер изображения вручную. Связанно это с тем, что при невозможности загрузить изображения браузер установит ему случайные размеры и получится пустой квадрат со случайным размером, который почти наверняка искаверкает общий каркас сайта, что приведет к неправильному отображению последнего. Если же атрибуты размера установленны, то даже при невозможности загрузки изображения каркас сайта не будет нарушен.

Атрибут ALT– указывает название изображения, которое учитывается поисковыми машинами при индексации сайта и отображается в пустом квадрате вместо изображения, в случае невозможности загрузки последнего. Использование этого атрибута я считаю обязательным, но об этом мы поговорим в разделе «Как раскрутить сайт самостоятельно и с нуля».

Использование фона в HTML.

Одним из наиболее важных факторов графического оформления сайта является использование фона. Для создания фона, состоящего из одного сплошного цвета используется атрибут bgcolor со значением цвета. Для использования изображения в качестве фона используется атрибут background с адресом фонового рисунка. Особенностью тега background является то что он при открытии изображения помещает его в полном размере в левый верхний угол экрана и начинает его тиражировать на весь экран, что позволяет добиваться довольно интерестных эффектов. Например:

Я текст на красном фоне

<body bgcolor="red">

<p align="center">

я текст на красном фоне

</p> </body>

Я текст на фоне маленького кота

<body background=

"../img/cat_mini.gif">

< p align="center">

я текст на фоне маленького кота

< /p></body>

я текст на фоне кота побольше

<body background=

"../img/cat.gif">

<p align="center">

я текст на фоне кота побольше

</p></body>

Из примеров хорошо видно, как браузер тиражирует изображение.

Горизонтальная линия.

Для построения горизонтальной линии используется тег <hr>. Для изменения параметров линии, а именно, толщины и длинны, используются атрибуты SIZE и WIDTH. Для выравнивания линии, относительно центра страницы используется атрибут ALIGN. Атрибут NOSHADE используется для определения, будет ли у линии тень.

<hr align="center" color="#666666" width="400">

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

Графическое оформление позволит сделать ваш сайт уникальным и привлекательным. При создании графики внутри HTML страниц немаловажно проводить оптимизацию изображений для уменьшения их веса, а соответственно и скорости загрузки картинок. Для небольших изображений рекомендую использовать формат .gif, для крупных – .jpeg со средними настройками качества. .png изображения являются одними из наиболее увесистых, поэтому рекомендую по возможности отказаться от их использования.

В следующий раз мы научимся работать с таблицами в html. Правильная работа с таблицами позволяет отлично позиционировать элементы и даже создавать каркасы сайтов.

Урок 7: Таблицы в HTML.

"Таблицы HTML" – седьмой урок учебника HTML. В этом уроке мы поговорим об очень важной вещи, а именно – об использовании таблиц в HTML.

Использование таблиц в html разметке гипертекстовых документов играет очень важную роль, т.к. открывает почти безграничные возможности в позиционировании элементов.

Таблицы являются незаменимым инструментом структурирования информации.

Создание таблиц.

Для создания таблицы html используется контейнер <table>...</table>. Для создания строк служит тег <tr> ,а для столбцов – <td>. Давайте создадим простую таблицу, состоящую из 3х строк и 3х столбцов.

<table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

Ячейки таблицы без содержимого в большинстве браузеров могут выводиться некорректно, поэтому внутри каждого столбца я помещаю символ неразрывного пробела &nbsp. Если не помните, то можете прочитать про символьные элементы разметки.

Атрибуты таблиц в HTML.

У таблиц в HTML существуют следующие атрибуты:

• align– задает выравнивание по горизонтали. Возможные значения: left, center, right. По умолчанию таблицы выравниваются по левому краю окна браузера.

• valign– вертикальное выравнивание содержимого таблицы. Принимаемые значения: top, bottom, middle.

• border– Задает внешнюю рамку таблицы. 1 – рамка есть, 0 – рамки нет. Тоесть, при использовании 0 таблица визуально не будет видна.

• cellpadding– расстояние между границей каждой отдельной ячейки и ее содержимым.

• cellspacing– расстояние между границами близлежащих ячеек.

• width– ширина таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).

• height– высота таблицы. Может быть заданна в абсолютном значении (пиксели) или в относительном (проценты).

• bgcolor– задает цвет фона для таблицы.

• background– устанавливает рисунок в качестве фона таблицы.

Форматирование таблиц.

Придание таблицам надлежащего внешнего вида является ключевым моментом при создании каркаса страницы, основанного на табличном методе. Ничего сложного в форматировании таблиц нет. Далее я приведу пример, в котором использую основные методы форматирования таблиц:

Объединение 2х ячеек по горизонтали, цвет фона красный			Объединение 3х ячеек по вертикали и выравнивание по верху, цвет фона синий
	Выравнивание по низу и цвет рамки синий
	Выравнивание по верху и цвет рамки белый, цвет фона белый
	Объединение 2х ячеек по горизонтали выравнивание по низу и цвет рамки синий

<table width="358" height="452" border="1" align="right" bordercolor="#FF0000"> <tr> <td height="107" colspan="2" class="text" bgcolor="#FF0000"> </td> <td width="37" class="text"> </td> <td width="111" rowspan="3" valign="top" class="text" bgcolor="#0000FF"> </td> </tr> <tr > <td width="69" height="169" class="text"> </td> <td width="113" valign="bottom" bordercolor="#0000FF" class="text"> </td> <td class="text"> </td> </tr> <tr> <td height="102" class="text"> </td> <td valign="top" bordercolor="#FFFFFF" class="text" bgcolor="#FFFFFF"> </td> <td class="text"> </td> </tr> <tr> <td height="60" class="text"> </td> <td colspan="2" valign="bottom" bordercolor="#0000FF" class="text"> </td> <td class="text"> </td> </tr> </table>

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

Работа с таблицами очень важна при создании сайтов. Даже если вы не будете использовать табличный дизайн для вашего сайта, использование таблиц позволит вам максимально точно позиционировать элементы на странице.

В следующий раз речь пойдет о создании и использовании списков HTML.

Урок 8:HTML списки.

"HTML списки" – восьмой урок учебника HTML. В этом уроке мы обсудим вопрос создания и форматирования HTML списков.

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

Упорядоченные HTML списки.

Для создания упорядоченного html списка используется тег <ol>. Все элементы списка расположенны в контейнере <li></li>.

У тега <ol> существуют следующие атрибуты: start– определяет первое число построения списков и type– задает стиль нумерации списков и может принять следующие значения:

• "A"– большие заглавные буквы (A, B, C ...)

• "a"– малые буквы (a, b, c ...)

• "I"– большие числа римского алфавита (I, II, III ...)

• "i"– малые числа римского алфавита (i, ii, iii ...)

• "1"– простые числа арабского алфавита (1, 2, 3 ...)

Ну а теперь небольшой пример:

<p>Упорядоченный список:</p><br> <ol> <li><p>элемент 1</p></li> <li>элемент 2</li> <li>элемент 3</li> </ol>

Упорядоченный список: элемент 1 элемент 2 элемент 3

Внутри элементов списка можно размещать любой другой элемент, например элемент параграфа как это показанно в примере.

Не трудно догадаться, что вложенность списков второго, третьего и т.д. уровней тоже поддерживается:

<p>Многоуровневый список <p> <ul> <li>элемент 1</li> <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> <li>элемент 2</li> <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> <li>элемент 3</li> <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> </ul>

элемент 1 элемент 1 элемент 2 элемент 3 элемент 2 элемент 1 элемент 2 элемент 3 элемент 3 элемент 1 элемент 2 элемент 3

Неупорядоченные HTML списки.

Ненумерованные списки, в отличие от нумерованных, маркируются различными символами.

Для создания ненумерованного списка используется элемент разметки <ul>. Как и в случае с нумерованными списками каждый элемент списка располагается в контейнере <li></li>.

<p>Неупорядоченный список:</p> <ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul>

Неупорядоченный список: элемент 1 элемент 2 элемент 3

Списки определений.

Должен сразу вам сказать, что списки определений на мой взгляд как и фреймы являются своеобразным HTML–архаизмом. Используются они крайне редко и потому заострять внимание на них мы не будем. Просто обсудим способ их построения:

Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>, а каждое новое определение – с тега <dd>.

HTML списки позволяют максимально наглядно структурировать информацию на странице. Так же списки часто используются для проектирования меню навигации (как это сделанно на данном сайте).

В следующем уроке мы поговорим о создании форм в HTML. Формы способны внести множество полезного функционала на ваши страницы. В большинстве случаев формы используются совместно с языками программирования, такими как PHP и JavaScript.

Урок 9: HTML формы.

"HTML формы" – девятый урок учебника HTML. В этом уроке мы поговорим о создании и использовании HTML форм.

Использование HTML форм очень важно для осуществления взаимодействия между пользователем и сайтом. Формы позволяют пользователям произвести выбор, отправить информацию или загрузить файлы на сайт. Так же использование форм очень важно при программировании на PHP или JavaScript.

Создание html форм.

Для создания форм используется особый html контейнер <form></form>. Тег <form> имеет ряд атрибутов, из которых наибольшее значение имеют action и method. При помощи этих атрибутов задается способ отправки данных серверу.

<form action="html_form_action.php" method=get>

Атрибут action указывает адрес расположения файла, который будет обрабатывать данные формы.

Атрибут method может принимать следующие значения: GET и POST. При использовании метода GET данные формы передаются непосредственно в адресной строке (там, где вы вводите адрес сайта) в качестве параметров.

Метод POST устанавливает соединение с сервером и только потом передает данные по протоколу, что является намного надежнее и используется при передаче конфиденциальной информации.

Основные элементы форм.

Подавляющее большинство элементов форм создается посредством использования элемента <input>, имеющего обязательные атрибуты:

• name – задает имя элементу формы, которое потребуется для последующей обработки

• type – определяет тип элемента формы

Текстовые поля.

type = text– задает поле для ввода текстовой информации. Длинну поля можно задать при помощи атрибута size (влияет только на видимую длинну поля).

<form> Имя:<br> <input type="text" name="firstname"> <br> Фамилия:<br> <input type="text" name="lastname" value="Сидоров" > </form>

Начало формы Имя: Фамилия: Конец формы

Для задания значения по умолчанию используется атрибут value.

Поле пароля.

type = password– создает поле для ввода пароля. Принцип создания аналогичен созданию текстового поля. Единственное различие между ними в том, что при вводе в поле с паролем, введенная информация заменяется символами (вид символа зависит от браузера, но чаще всего это закрашенный круг).

<form> Логин :<br> <input type="text" name="firstname"> <br> Пароль:<br> <input type="password" name="pass"> </form>

Начало формы Логин : Пароль: Конец формы

Переключатели (радиокнопки).

type = radioопределяют поля выбора одного значения из нескольких доступных. Для каждого варианта выбора создается отдельная позиция вида <input type=radio>.

Все переключатели, имеющие одинаковое значение в атрибуте name, объединяются в общую группу. Значение переключателя задается в атрибуте value.

<form> Укажите Ваш пол: <br> <input type="radio" name="sex" value="male" checked="checked"> мужчина <br> <input type="radio" name="sex" value="female"> женщина </form>

Начало формы Укажите Ваш пол: мужчина женщина Конец формы

Для выбора определенного значения переключателя по умолчанию используется атрибут checked.

Флажки (checkbox).

type = checkbox используются для выбора некоторого числа вариантов (от 1 до n) из всех возможных. В отличие от переключателей у каждого флажка должно быть свое уникальное имя, заданное в атрибуте name.

<form> В этом году я собираюсь приобрести: <br> <input type="checkbox" name="computer" checked="checked"> Компьютер <br> <input type="checkbox" name="notebook"> Ноутбук <br> <input type="checkbox" name="printer"> Принтер <br> <input type="checkbox" name="scanner" checked="checked"> Сканер </form>

Начало формы В этом году я собираюсь приобрести: Компьютер Ноутбук Принтер Сканер Конец формы

Как и в случае с переключателями, для выбора значения по умолчанию используется атрибут checked.

При выборе флажка пользователем в его атрибут value автоматически записывается значение on, которое, при желании, легко можно изменить, вручную задав значение для этого атрибута.