Урок 1
Тема: тэги, HTML документ.
Язык HTML основан на использовании тэгов. Тэги - это команды, которые указывают браузеру,
где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки
на другие документы. Для того, чтобы браузер не путал тэги с текстом, их отмечают треугольными скобками
< и >. Большинство тэгов, как правило, используются парами. Т.е. первым идет открывающий тэг, он
объясняет браузеру, что делать с последующим текстом. Затем следует закрывающий тэг, который
указывает область действия первого. Отличается закрывающий тэг от открывающего наличием в нем
косой черты - слэша.
Пример HTML текста:
Вот <I>это курсив</I>, а это уже нет.
На экране вы увидите:Вот это курсив, а это уже нет.
Тэги не чувствительны к регистру. Это означает, что <TITLE>,<title> и <TitLe> для браузера
абсолютно одинаковы.
Теперь рассмотрим, из чего, в основном, состоит HTML документ. Сам документ ограничивается
тэгами <HTML> и </HTML> - браузер должен знать, где страница начинается, и где заканчивается.
Состоит из заголовка (теги <HEAD> и </HEAD>), содежащего различную информацию о документе,
и, собственно, тела документа (теги <BODY></BODY>), т.е. того, что вы видите в окне
браузера. В заголовке находится заглавие (или название) страницы, рекомендуется не более 64 символов, теги <
TITLE> и <TITLE>. Пример:
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
</HEAD>
<BODY>
Здесь находится текст странички, различные картинки.
</BODY>
</HTML>
Попробуйте набрать этот пример в любом текстовом редакторе и сохранить его с расширением
.html или .htm. Теперь можно его просматривать, как любой HTML документ.
Урок 2
Тема: выделение текста - физические и логические стили.
В HTML существует два подхода к шрифтовому выделению текста - т.н. физический и логический
стили.
Физические стили.
Под физическими стилями подразумевают прямое указание браузеру на модификацию текущего
шрифта. Т.е. между тэгами <B> и </B> будет жирный шрифт, а между <I> и
</I> - курсив (наклонный).
| <B> | - жирный шрифт;
|
| <I> | - курсив;
|
| <TT> | - шрифт фиксированной ширины (как на пишущей машинке);
|
| <U> | - подчеркнутый текст;
|
| <STRIKE> | - перечеркнутый шрифт;
|
| <S> | - тоже перечеркнутый шрифт;
|
| <BIG> | - шрифт большего размера;
|
| <SMALL> | - шрифт меньшего размера.
|
Шрифты могут комбинироваться. Например, используя такой текст
<B><I>пример</I></B>
мы получим комбинацию жирного и наклонного шрифтов: пример.
Логические стили.
Используя логические стили, вы не можете точно знать, что увидит на экране читатель. Разные
браузеры толкуют одни и те же метки логических стилей по разному. Например, <STRONG> обычно
выделяет текст жирным шрифтом, но кто-то из читателей захочет, возможно, чтобы в данном случае
текст выделялся цветом. Таким образом логические стили дают большую свободу в выборе шрифтов
пользователю.
<DFN> - служит для описания определений (это определение);
<EM> - служит для выделения текста (это выделенное слово);
<CITE> - служит для выделения цитат (это цитата);
<CODE> - служит для выделения программных кодов, текстов программ и т.п. Обычно
выделяется шрифтом фиксированной ширины (это текст программы);
<KBD> - используется для ввода с клавиатуры пользователя (Введите password
);
<SAMP> - используется для вывода машинных сообщений (Segmentation fault:
core dumped);
<STRONG> - служит для особого выделения текста, обычно выделяется жирным текстом
(это очень важный текст);
<VAR> - используется для символьных переменных (это переменная);
<ABBR> - используется для аббревиатур (СНГ, КПСС, WWW);
<ACRONYM> - используется для сокращений (стр., англ.).
Элементы <ABBR> и <ACRONYM> могут содержать аттрибут <TITLE>, описывающий
расшифровку аббревиатуры или сокращения:
<ABBR TITLE="World Wide Web">WWW</ABBR>
Элементы ABBR и ACRONYM используются для голосовых браузеров (для слепых, например), в остальных
браузерах сокращения каким-либо шрифтом не выделяются.
Урок 3
Тема: форматирование текста.
HTML имеет 6 уровней заголовков разделов страницы, имеющих номера от 1 до 6. Заголовок высшего
уровня имеет номер 1. Отличаются заголовки от текста и между собой толщиной и высотой букв, в
заголовке <H1> самые крупные символы. Тэги
<H1>..</H1>, <H2>..</H2>, ... , <H6>..</H6>.
Абзацы в тексте выделяются тэгами <P>..</P>. При просмотре браузером абзацы отделяются друг от
друга пустой строкой. Надо заметить, что в существующих версиях HTML закрывающий тэг </P> не
используется. Но все-таки рекомендуется его употреблять, так как он может быть введен в последующих версиях.
К ошибке это не приведет - браузер просто проигнорирует все незнакомые тэги. А вам потом не придется
переделывать свои документы. В версии HTML+ предлагается использовать закрывающий тэг </P>.
И заголовки, и абзацы по умолчанию выключены влево (т.е. прижаты к левому краю окна). Атрибут
ALIGN позволяет выключить текст по центру или вправо. Синтаксис: <P ALIGN=RIGHT>,
может принимать значения LEFT (влево), CENTER (по центру), RIGHT (вправо). Пример:
<P>Этот абзац расположен слева<P>
<P ALIGN=CENTER>Этот абзац по центру</P>
<P ALIGN=RIGHT>А вот этот абзац справа</P>
Что дает при просмотре:
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа
Аналогично форматируются и заголовки: <H1 ALIGN=RIGHT>..</H1> и т.д.
Еще один полезный способ выравнивания по центру, это использование тэгов <CENTER>..<CENTER>.
Они позволяют отформатировать сразу несколько заголовков и абзацев. Например:
<CENTER>
<H1>Заголовок страницы</H1>
<H2>Подзаголовок</H2>
<P>Абзац 1.</P>
<P>Абзац 2.</P>
</CENTER>
В результате заголовок, подзаголовок и оба абзаца будут выключены по центру.
Чтобы перейти на новую строку, не прерывая абзаца (т.е., чтобы не вставлять пустую строку между
абзацами), применяется тэг <BR>. Закрывающего тэга у него нет.
Тэг <HR> описывает горизонтальную линию. Может включать аттрибуты:
- SIZE - толщина
линии в пикселах;
- WIDTH - длина линии в пикселах или процентах от ширины экрана;
- ALIGN -
выравнивание линии, может принимать значения LEFT, CENTER, RIGHT;
- COLOR -
цвет линии;
- NOSHADE - линия рисуется без тени.
Пример использования
тэгов <BR> и <HR>:
Стишок-нескладуха
<HR NOSHADE WIDTH="250" ALIGN="LEFT">
Нет приятнее занятья,<BR>
Чем в носу поковырять:<BR>
Всем ужасно интересно,<BR>
Что там спрятано внутри.<BR>
А кому смотреть противно,<BR>
Тот пускай и не глядит -<BR>
Мы же в нос к нему не лезем,<BR>
Пусть и он не пристает!<BR>
<HR SIZE=4 WIDTH=50%>
Получаем:
Стишок-нескладуха
Нет приятнее занятья,
Чем в носу поковырять:
Всем ужасно интересно,
Что там спрятано внутри.
А кому смотреть противно,
Тот пускай и не глядит -
Мы же в нос к нему не лезем,
Пусть и он не пристает!
Метки <BLOCKQUOTE></BLOCKQUOTE> добавляют к выделенному ими тексту со всех четырех
сторон поля (сверху и снизу - по пустой строке, слева и справа - шириной в 5 знаков). Пример - этот абзац.
Еще один способ форматирования текста - использование меток <PRE>..</PRE> (prefomatted
text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Однако с использованием
тега <PRE> текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.
Пример. В тексте:
<PRE>
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг <BR>!
</PRE>
В окне браузера:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг <BR>!
Урок 4
Тема: ссылки.
Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:
<A HREF="путь/имя файла">Ссылка на документ</A>
Может содержать аттрибут TITLE, описывающий ссылку. Если пользователь наведет указатель мыши на
ссылку, то появится ее описание - содержимое этого аттрибута.
Различают относительные и абсолютные ссылки. Примеры относительной ссылки:
<A HREF="filename.htm"> - на документ "filename.htm", находящийся в
одном каталоге с текущим документом;
<A HREF="./filename.htm"> - в точности то же самое;
<A HREF="folder/filename.htm"> - переход на файл "filename.htm" в
подкаталоге "folder" текущего каталога;
<A HREF="../folder/filename.htm"> - подняться вверх на один шаг по дереву
каталогов, перейти в каталог "folder" и осуществить переход на "filename.htm".
В абсолютной ссылке указывается полный путь к файлу:
<A HREF="http://www.fortunecity.com/business/fax/339/index.htm">
Относительные ссылки удобнее. Они не привязаны к конкретной структуре каталогов, т.е. вы можете
создать свой сайт на компьютере, тестировать и исправлять ошибки не подключаясь к Интернет. И лишь
после полной готовности перенести его на сервер, он будет работать так же.
Можно делать ссылки внутри документа. Это удобно для перехода к разным главам одной большой
статьи. Для этого необходимо создать некую опорную точку - анкер (anchor - якорь,англ.), на
которую и будет происходить переход. Разберем это на примере. Допустим, нам надо перейти на начало
этого урока. Для чего создадим такой анкер:
<A NAME=lesson4>Ссылки
При этом слово "Ссылки" в тексте никак выделяться не будет. Теперь в тексте можем делать ссылку на анкер (и не один раз). Например, так:
Нажмите <A HREF="#lesson4">здесь</A> для возврата к началу урока
И получите:
Нажмите здесь для возврата к началу урока
Можете нажать - пример работает! К этому анкеру можно перейти и из другого файла (например, чтобы сделать
ссылку к конкретному уроку 4, а не урокам HTML вообще). Тогда ссылка будет выглядеть так:
<A HREF="uroki.htm#lesson4">
До сих пор мы рассматривали ссылки на HTML-документы. Однако возможны ссылки и на другие виды
ресурсов:
<A HREF="ftp://servername/directory/file.ext">
Такая ссылка запустит протокол передачи файлов и произведет выгрузку файла "file.ext"
из директории "directory" сервера "servername" на жесткий диск пользователя
(download).
Еще один вид ссылки - ссылка на почтовый ящик. Выглядит в тексте:
Пишите письма <A HREF="mailto:p2087@yandex.ru">автору</A>
В окне браузера:
Пишите письма автору
А это то же самое (ссылка на почтовый ящик), но с использованием аттрибута TITLE. В тексте:
Пишите письма <A HREF="mailto:p2087@yandex.ru" TITLE="Ссылка на почтовый ящик Сергея Жуковича">автору</A>
В окне браузера:
Пишите письма автору
Попробуйте навести курсор на "автора".
Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо "http://webs.web.com"
наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями:
если у вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же -
нерабочая ссылка.
Урок 5
Тема: рисунки.
В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения
в формате GIF (файлы с расширениями .gif) и JPEG (файлы с расширениями .jpg и .jpeg) и строчка
HTML-тексте, указывающая браузеру, где этот рисунок находится:
<IMG SRC="picture.gif"> - рисунок "picture.gif" находится в
том же каталоге, что и текущий документ;
<IMG SRC="images/picture.gif"> - перейти в подкаталог "images" текущего
каталога и взять файл оттуда;
<IMG SRC="../images/picture.gif"> - подняться вверх на один шаг, перейти в
каталог "images" и взять рисунок оттуда;
<IMG SRC="http://www.fortunecity.com/business/fax/339/artics/practic/myphoto.gif">
- указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или
используется картинка с другого сайта.
У данного тэга могут быть следующие аттрибуты:
- ALT="какой-то текст" - альтернативный текст. Текст, который появляется вместо картинок при просмотре
странички браузером с отключенной автоматической загрузкой изображений (отключают многие
- для экономии времени на медленных линиях связи).
- BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0"
рамка не рисуется.
- WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины
экрана браузера (тогда после n следует знак %).
- HEIGHT="n" - высота изображения в пикселах или в процентах от высоты экрана.
- HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное
пространство между рисунком и текстом или чем-то иным).
- VSPACE="n" - вертикальный отступ от картинки в пикселах.
- ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка.
Применяя аттрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка (
CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение аттрибута LEFT или RIGHT,
рисунок прижимается соответственно к левому или правому краю экрана.
Значения n перечисленных выше аттрибутов по умолчанию равны нулю.
Рисунок может быть ссылкой. Для этого <IMG SRC="..."> разместите между тэгами
<A HREF="..."> и </A>. Вокруг рисунка появится рамка, показывающая, что он
является ссылкой. Если рамка портит внешний вид документа, то укажите в аттрибутах рисунка BORDER="0".
