Урок 1

Тема: тэги, HTML документ. Язык HTML основан на использовании тэгов. Тэги - это команды, которые указывают браузеру, где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки на другие документы. Для того, чтобы браузер не путал тэги с текстом, их отмечают треугольными скобками < и >. Большинство тэгов, как правило, используются парами. Т.е. первым идет открывающий тэг, он объясняет браузеру, что делать с последующим текстом. Затем следует закрывающий тэг, который указывает область действия первого. Отличается закрывающий тэг от открывающего наличием в нем косой черты - слэша. Пример HTML текста: Вот это курсив, а это уже нет. На экране вы увидите: Вот это курсив, а это уже нет. Тэги не чувствительны к регистру. Это означает, что ,<title> и <TitLe> для браузера абсолютно одинаковы. Теперь рассмотрим, из чего, в основном, состоит HTML документ. Сам документ ограничивается тэгами <HTML> и </html> - браузер должен знать, где страница начинается, и где заканчивается. Состоит из заголовка (теги <HEAD> и </HEAD>), содежащего различную информацию о документе, и, собственно, тела документа (теги <BODY> <!-- copyright (t2) --><div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div><!-- /copyright --> </body>), т.е. того, что вы видите в окне браузера. В заголовке находится заглавие (или название) страницы, рекомендуется не более 64 символов, теги < TITLE> и <TITLE>. Пример: <HTML> <HEAD> <TITLE>Название страницы Здесь находится текст странички, различные картинки.
Сайт создан в системе uCoz
Попробуйте набрать этот пример в любом текстовом редакторе и сохранить его с расширением .html или .htm. Теперь можно его просматривать, как любой HTML документ.

Урок 2

Тема: выделение текста - физические и логические стили. В HTML существует два подхода к шрифтовому выделению текста - т.н. физический и логический стили. Физические стили. Под физическими стилями подразумевают прямое указание браузеру на модификацию текущего шрифта. Т.е. между тэгами и будет жирный шрифт, а между и - курсив (наклонный). - жирный шрифт; - курсив; - шрифт фиксированной ширины (как на пишущей машинке); - подчеркнутый текст; - перечеркнутый шрифт; - тоже перечеркнутый шрифт; - шрифт большего размера; - шрифт меньшего размера. Шрифты могут комбинироваться. Например, используя такой текст пример мы получим комбинацию жирного и наклонного шрифтов: пример. Логические стили. Используя логические стили, вы не можете точно знать, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по разному. Например, обычно выделяет текст жирным шрифтом, но кто-то из читателей захочет, возможно, чтобы в данном случае текст выделялся цветом. Таким образом логические стили дают большую свободу в выборе шрифтов пользователю. - служит для описания определений (это определение); - служит для выделения текста (это выделенное слово); - служит для выделения цитат (это цитата); - служит для выделения программных кодов, текстов программ и т.п. Обычно выделяется шрифтом фиксированной ширины (это текст программы); - используется для ввода с клавиатуры пользователя (Введите password ); - используется для вывода машинных сообщений (Segmentation fault: core dumped); - служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст); - используется для символьных переменных (это переменная); - используется для аббревиатур (СНГ, КПСС, WWW); - используется для сокращений (стр., англ.). Элементы и могут содержать атрибут , описывающий расшифровку аббревиатуры или сокращения: <ABBR TITLE="World Wide Web">WWW</ABBR> Элементы ABBR и ACRONYM используются для голосовых браузеров (для слепых, например), в остальных браузерах сокращения каким-либо шрифтом не выделяются. <h2><i>Урок 3</i></h2> Тема: форматирование текста. 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>! <h2><i>Урок 4</i></h2> Тема: ссылки. Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом: <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:zhunya@mail.ru">автору</A> В окне браузера: Пишите письма автору А это то же самое (ссылка на почтовый ящик), но с использованием атрибута TITLE. В тексте: Пишите письма <A HREF="mailto:zhunya@mail.ru" TITLE="Ссылка на почтовый ящик Сергея Жуковича">автору</A> В окне браузера: Пишите письма автору Попробуйте навести курсор на "автора". Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же - нерабочая ссылка. <h2><i>Урок 5</i></h2> Тема: рисунки. В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате 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".