Введение
Интернет на настоящее время является самым актуальным средством для общения, обмена информацией, высказывания своего мнения, публикации научных работ и статей. Размеры Интернета и число ее пользователей точно не известны - счет идет на сотни миллионов человек во всех странах мира. Для того, чтобы опубликовать в Интернете документ, содержащий некую информацию, достаточно просто поместить его на сервер, имеющий более или менее постоянную связь с другими серверами Интернета. Все вместе эти сервера называют World Wide Web (Всемирная паутина) или сокращенно WWW. Общение между серверами происходит при помощи Hypertext Transfer protokol (Протокол передачи гипертекстов). Документы, размещаемые на северах Интернета, должны быть написаны с использованием комманд HTML - HyperText Markup Language (языка маркировки гипертекстов). Сам по себе этот язык крайне прост и потому доступен любому человеку. Многие распространенные редакторы, например Microsoft Word, позволяют сохранять документы в формате HTML. Вы можете разрабатывать свои HTML-документы на любом компьютере не зависимо от того, подключен он к Интернету иили нет. Для работы с настоящим учебником достаточно средств Windows - таких как Notepad - в качестве редактора и Internet Explorer - в роли браузера. Стоит сделать необходимое отступление и поговорить о редакторах и браузерах. Редакторы HTML. На данный настоящий момент существует множество всевозможных редакторов для HTML. В принципе их можно разделить на две категории:
1. Редакторы HTML-текстов
В этих редакторах Вы работаете непосредственно с текстом HTML-документа и можете вносить в него изменения вручную или же при помощи комманд меню. В Интернет существует множество редакторов этого типа, распространяемых бесплатно, как простых, так и довольно сложных, с большими или меньшими возможностями. В качестве примера можно привести такие редакторы как SiteAid или HotDog.
2. Редакторы типа "что видишь - то и получаешь".
При использовании редакторов этого типа пользователь не видит содержимого самого HTML-файла. Работа с этими редакторами чем-то напоминает работу с Microsoft Word - Вы не видите того, что содержиться непосредственно в файле. Это довольно большие и зачастую дорогие редакторы, например, Microsoft Front Page или Netscape Navigator Gold. Интернет-броузеры Интернет-броузеров (от английского browser - программа просмотра) также существует великое множество. Однако, на данный момент, наиболее распространенными можно считать Microsoft Internet Explorer (поставляется вместе с Windows) и Netscape Navigator. В связи с тем, что язык HTML довольно быстро развивается и претерпевает некоторые изменения тот или иной броузер может по разному реагировать на одну и ту же команду. Однако, большинство из них выполняет основные команды одинаково. Перейдем, однако, непосредственно к языку HTML.
HTML-документ состоит из набора команд или тэгов (от английского tag) и текста с изображениями, которые Вы видите на экране. Писать тэги можно в любом регистре - для HTML не имеет значения какими буквами Вы пишете - большими или маленькими буквы. После соединения с удаленным сервером Ваш браузер начинает скачивать HTML-файл и выполняет эти тэги по порядку. Синтаксис прост - команды-тэги заключаются между '<' и '>'. Например: <title>.
Все, что написано между '<' и '>' считается тэгом и Ваш браузер будет пытаться его выполнить. В случае ошибочной команды неправильный тэг будет выведен на экран просто как текст. Абсолютное большинство тэгов является парными, т.е. состоит из двух частей - открывающего и закрывающего тэга. Закрывающий тэг выглядит так: </tag>. В результате мы получаем такую конструкцию:
<tag> какой-либо текст </tag>
Для удобства написания HTML-файлов открывающий тэг можно расположить на одной строчке, текст на другой, а закрывающий тэг - на третьей. Кроме того, броузеры игнорируют символы конца строки и множественные отступы в HTML-файлах. Т.е. наша конструкция может выглядить так: <tag>
какой-либо текст
</tag> Кроме того, тэги могут быть вложенными друг в друга. Например: <tag1>
<tag2>
какой-либо текст
</tag2>
</tag1> Структура HTML-файла
Любой HTML-файл имеет строго определенную структуру. Обязательными для каждого HTML-документа являются следующие тэги:
1. <html> и </html>
Это тэги начала и конца HTML-файла, т.е. файл должен открываться тегом <html> и заканчиваться </html>.
2. <head> и </head>
Это тэги, описывающие заголовок документа. Заголовок помещается в начале документа и может содержать массу служебной информации.
3. <title> и </title>
Эта пара тэгов размещается внутри заголовка и описывает название документа. Например, Internet Explorer выводит его в верхней строчке окна.
4. <body> и </body>
Вслед за заголовком следует тело документа. Начинается оно с тэга <body> и закрывается тэгом </body>. В теле документа и располагается,собственно, вся информация.
Итак, любой HTML-файл имеет следующий вид:
<html>
<head>
Заголовок документа
<title>Название документа</title>
</head>
<body>
Текст документа
lt;/body>
</html>
Для удобства в любом месте HTML-файла можно вставлять комментарии. Они располагаются между '<!--' и '-->'. Весь текст, расположенный между этими знаками будет проигнорирован броузерами. Заголовок документа
Заголовок Вашего документа содержит всевозможную техническую информацию. Большинство поисковых систем осуществляют поиск, используя информацию, которая содержится в заголовке. Одну пару тэгов для заголовка Вы уже знаете - это <title> и </title>
Далее в заголовке следую так называемые META-инструкции:
1.<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
Эта инструкция описывает кодировку, в которой написан документ. В данном случае это - windows-1251.
2. <META HTTP-EQUIV="Refresh" CONTENT="[время];URL=[путь]">
В случае, если через некоторое [время] после открытия страницы пользователь не предпринимает никаких действий эта инструкция автоматически загружает документ, находящийся по адресу [путь]. В качестве такого документа можно вставить, например, файл с музыкой.
3. <META NAME="Author" CONTENT="Nick Sapozhnikov">
Необязательная инструкция, но всегда приятно прочитать свое имя ;)))
4.<META NAME="Description" CONTENT="описание">
Предназначено для того, чтобы в поисковиках кроме названия было еще и краткое описание документа. Обычно выводится сразу после названия. Не следует писать слишком много.
5.<META NAME="Classification" CONTENT="классификация">
В эту инструкцию следует вставить классификацию документа. Например: HTML программирование учебник. Все слова пишутся через пробел и без знаков препинания.
6.<META NAME="KeyWords" CONTENT="ключевые слова">
При помощи ключевых слов Ваша страничка будет искаться поисковиками, поэтому желательно писать их побольше. Слова пишутся через пробел. Тэг BODY
Тэгом <body>, как уже говорилось, открывается само тело документа. Внутри самого тэга <body> можно описать некоторые параметры, которые будут действовать на весь документ в целом. Обычно описываются цвет текста, ссылок, параметры шрифта и т. д. При необходимости для отдельных участков документа эти параметры можно будет изменять. Тэг принимает следующий вид: <body параметр1 параметр2 параметр3>
Текст документа
</body> В случае, если Вы не задаете этих параметров,браузер использует параметры по умолчанию. Рассмотрим основные параметры тэга <body>:
1.text="#000000" - цвет текста
2.bgcolor="#ffffff" - цвет фона
3.link="#ff0000" - цвет ссылок
4.vlink=#553388" - цвет ссылок, которые уже были просмотренны ранее
5.alinк - цвет ссылок при наведении на них курсора
6.background - задание фонового рисунка Цвета в HTML
Теперь стоит поговорить об использовании цветов в HTML-документах. Как видно выше, каждый цвет кодируется тремя парами чисел. Каждая пара предсталяет собой степень насыщенности одного из трех цветов - красного, зеленого или синего. Степень насыщенности выражается шестнадцетиричным числом от 00 до FF. К примеру, значение цвета текста "#000000" означает, что насыщенность всех цветов равна 0 и мы получаем черный цвет. В цвете же ссылок ("#ff0000") значение насыщенности красного цвета - максимальная и ссылки соответственно получатся красного цвета. Однако можно использовать и общепринятые обозначения цвета, например black, white, red, blue, yellow, gray и др. Работа с текстом
Уже отмечалось выше, что браузеры игнорируют разного рода отступы, концы строк и множественные пробелы. В принципе, текст можно рассматривать как одну длинную строку. Для того, чтобы разбить текст на отдельные абзацы или как-то выделить часть текста существует несколько тэгов. Самым простым выделением можно считать изменение размера текста. Это удобно для обозначения заголовков. Осуществляется это при помощи тэгов <H1...6> и </H1...6>: <H1>ТЕКСТ</H1> <H2>ТЕКСТ</H2> <H3>ТЕКСТ</H3> <H4>ТЕКСТ</H4> <H5>ТЕКСТ</H5> <H6>ТЕКСТ</H6> Как Вы видите, при изменении значения тэга <Hi>, меняется и размер выводимого текста. Однако, хочется иметь заголовок посередине страницы. Для этого существует команда выравнивания ALIGN. Она может принимать четыре значения - LEFT (ввыравнивание текста влево), RIGHT (выравнивание вправо), CENTER (выравнивание по центру) и JUSTIFY (выравнивание по ширине): <H1 ALIGN = LEFT>ВЛЕВО</H1> <H2 ALIGN = RIGHT>ВПРАВО</H2> <H3 ALIGN = CENTER>ПО ЦЕНТРУ</H3> Если Вам необходимо выравнивание текста, допустим, влево немного отступив от края используйте тэг <blockquote>: <blockquote>ВЛЕВО С ОТСТУПОМ </blockquote> Парный тэг <P>...</P>описывает абзац. Весь текст, заключенный между этой парой тэгов считается одним абзацем, для которого можно задавать свои параметры. Однако, если вы хотите просто осуществить перевод строки можно воспользоваться одинарным тэгом <br>. С его помощью можно также вставлять пустые строки - просто напишите его несколько раз. Также можно изменять цвет текста или шрифт. Делается это при помощи тэгов <font> и </font> следующим образом:
<FONT COLOR="#FF00FF" FACE="COURIER" SIZE=+2>Выделенный текст</FONT> Как видите при помощи тэга <FONT> можно изменить параметры шрифта. Комманда <font color="#ХХХХХХ"> изменяет цвет, комманда <font face="название шрифта"> - тип шрифта, <font size=N> - размер шрифта. Размер можно указывать либо целым числом, либо изменением размера относительно текущего - как то: +2 или -1. Существуют и команды для выделения текста стилем написания:
<B> и </B> - для жирного шрифта
<I> и </I> - для наклонного
<U> и </U> - для подчеркнутого
Например:
<B>Это жирные буквы</B>
<I>Это - наклонные</I>
<I><B>Это и жирные, и наклонные</B></I>
<I><B><U>А это еще и подчеркнутые</U></B></I>
<SUB>нижний индекс</SUB>
<SUP>верхний индекс</SUP>
<STRIKE>перечеркнутый</STRIKE>
<EM>Акцентированный</EM>
<STRONG>Сильно акцентированный</STRONG>
<CODE>используется для фрагментов программ</CODE>
<SAMPLE>образец выводимого на экран сообщения</SAMPLE>
<KBD>клавиатура</KBD>
<VAR>переменная</VAR>
<TT>Имитация пишущей машинки</TT> Спецсимволы
Некоторые символы не выводятся браузерами на экран. Например, угловые скобки. Для вывода этих символов в HTML используются так называемые &-последовательности. Выглядят они так: < выводит <
> выводит >
& выводит &
" выводит "
© выводит ©
® выводит ® Списки
HTML представляет возможность организовывать текст на экране в разного рода списки. Собственно списки разделяются на три типа: нумерованные, ненумерованные и списки определений. Рассмотрим каждый из этих типов. Нумерованные списки
Нумерованные списки определяются при помощи пары тэгов <OL> и </OL> Каждый элемент списка определяется одинарным тэгом <LI>:
<OL>
<LI> Первый пункт
<LI> Второй пункт
<LI> Третий пункт
</OL>
В результате получаем следующее:
Первый пункт
Второй пункт
Третий пункт
Ненумерованные списки
Структура ненумерованных списков ничем не отличается от структуры нумерованных. Просто для их создания используются тэги <UL> и </UL>:
<UL>
<LI> Первый пункт
<LI> Второй пункт
<LI> Третий пункт
</UL>
Результат таков:
Первый пункт
Второй пункт
Третий пункт
Списки определений
Несколько сложнее обстоит дело со списками определений. В них в качестве тэгов начала и конца списка используются <DL> и </DL>. Вместо тега <LI> здесь использованы два одинарных тега - <DT> - тэг для определяемого термина и <DD> - тэг для определения. Посмотрим на примере:
<DL>
<DT> Остров
<DD> Часть суши, окруженная со всех сторон водой
<DT> Материк
<DD> Очень большой остров
</DL>
Смотрим на результат:
Остров
Часть суши, окруженная со всех сторон водой. Самым крупным островом можно считать Гренландию.
Материк
Очень большой остров Внутри элемента списка определений может находится несколько абзацев. При этом все абзацы будут иметь одинаковое левое поле. Работа с изображениями
Было бы скучновато разглядывать страницы, состоящие только из текста. Хочется вставить на личную страницу свою фотографию, в научных работах зачастую необходимы графики. Да и просто красивая кнопочка уже радует глаз. Можно оформить страницу и простенькой анимацией: Добавить на страницу какое либо изображение довольно просто. Достаточно иметь файл с этим изображением в формате *.GIF или *.JPG.
Чтобы вставить изображение в документ используется тэг <img src="путь"> Ну "путь", я думаю, понятно - путь к файлу с изображением. Кроме того, для изображений в HTML существует еще несколько необязательных параметров. Вот они: WIDTH и HEIGHT - ширина и высота изображения в пикселах. Если заданы фиксированные размеры изображения и они отличаются от реальных размеров, то картинка будет соответствующим образом сжата или растянута.
BORDER - ширина рамки вокруг картинки (в пикселях)
ALT - надпись, выводимая на экран пока изображение не появилось После загрузки изображения, надпись будет появляться если навести на него курсор мышки.
ALIGN - выравнивание текста относительно той строки, где появиляется изображение. Имеет следующие параметры:
1.LEFT - слева от текста
2.RIGHT - справа
3.TOP - текст будет слева и справа от верха картики, а потом только после нее
4.MIDDLE - строка слева и справа по центру изображения
5.BOTTOM - строка слева и справа от низа
Кроме того, следует отметить, что к картинкам применимы все те команды, которые используются для текста. Создание таблиц
Таблицы, необходимы для представления каких-либо данных в табличной форме. Однако их можно использовать не только для этого. Таблицы также могут поочь при размещении текста в нескольких колонках.
Чтобы нарисовать таблицу, необходимо воспользоваться следующей коммандой:
<table bgcolor=#XXXXXX" align="XXX" border="XXX" width="XXX" cellpadding="XXX" cellspacing="XXX"> таблицa </table>
Рассмотрим параметры задания таблицы: BGCOLOR - Цвет фона таблицы. Может быть использовано и для ячеек. ALIGN - выравнивание таблицы на экране. Может быть LEFT, RIGHT и CENTER.
BORDER - толщина рамки между ячейками в пикселaх.
WIDTH - ширина таблицы. Указывается в пикселах или в процентах от размера окна.
CELLPADDING - расстояние от текста до рамки в пикселях.
CELLSPACING - В HTML каждой ячейке назначается ее собственная рамка, которая отделяется от рамок соседних ячеек.
Все эти параметры необязательны и описывают внешний вид таблицы и ее расположение в окне.
Каждая строка таблицы описывается парой тэгов <TR> и </TR>.
Тэг <TR> может включать в себя следующие параметры:
ALIGN - горизонтальное выравнивание внутри ячеек
VALIGN - вертикальное выравнивание внутри ячеек: TOP - прижать кверху, MIDDLE - по центру, BOTTOM - прижать книзу.
Ячейки в строке задаются еще парой тэгов <TD> и </TD> Здесь в тэге <TD> могут быть использованы следующие параметры:
NOWRAP - подавление переноса строк
ROWSPAN - целое число строк, перекрываемых ячейкой
COLSPAN - целое число столбцов, перекрываемых ячейкой Фреймы
Для чего нужны фреймы? Они очень удобны при написании страниц с большим количеством файлов. При использовании фреймовВы фактически разбиваете экран на несколько окон, независимых друг от друга. Так, например, в одном окне у Вас может находиться не изменяющийся заголовок страницы, в другом - меню или карта сайта, а уже в третье Вы будете загружать страницу, на ссылку которой щелкнул Ваш посетитель.
Обычно описание фреймов вставляется в самое начало тела страницы. Делается это следующим образом:
<body>
<frameset framespacing="0" frameborder="1" rows="5%,*">
<frame name="frame1" src="меню">
<frame name="frame2" src="первая страница">
</frameset>
</body> Мы разделили экран на два окна В первое окно будет загружаться файл с меню, а во второе - страница, с которой Вы хотели бы начать показ Вашего сайта.
Окна расположены друг над другом. Однако их можно расположить рядом. Для этого просто надо заменить параметр rows на cols. Вообще же при помощи этих двух параметров задаются размеры фреймов. Их можно указывать как в примере - в процентах относительно окна броузера, либо более жестко - в пикселах. Символ звездочки "*" указывает броузеру на то, что он может автоматически определить размер данного фрейма.
Допустимо также использование вложенных фреймов - таким образом можно разбить страницу на вертикальные и горизонтальные окна.
Давайте рассмотрим и остальные параметры тэгов <frameset> и <frame>:
FRAMESPACING - расстояние между фреймами в пикселах
FRAMEBORDER - ширина рамки вокруг фрейма
NAME - имя фрейма
SRC - путь к файлу, который будет загружен в фрейм
SCROLLING - устанавливает наличие или отсутствие прокрутки в фрейме. Может принимать значения "YES" или "NO"
NORESIZE - в случае, если указан этот параметр, размер фрейма не изменяется.
Надо отметить, что в дальнейшем при загрузке нового файла (например по ссылке в файле-меню), он по умолчанию будет грузиться в первый фрейм. Чтобы избежать этого необходимо в заголовок файла-меню вставить следующую команду:
<base target="frame2"> Ссылки
Сам термин "гипертекст" подразумевает использование в нем ссылок на различные части этого текста или на другие документы. При щелчке левой кнопкой мыши на ссылку происходит переход к какому-то документу либо к какой-то части текста. Организовать ссылку в HTML можно при помощи следующей комманды:
<A HREF="адрес">описание ссылки</A>
адрес - это путь к тому документу или фрагменту текста, куда направляется ссылка. Далеко не обязательно, чтобы ссылка была просто текстом - это может быть и изображение, например кнопка. В таком случае ссылка примет следующий вид:
<A HREF="адрес">кнопка<IMG SRC="путь"></A>
Для того, чтобы организовать ссылки внутри одного документа необходимо предварительно внутри текста расставить метки для перехода. Делается это так:
<A NAME="имя метки">текст</a>
На внешний вид текста это не повлияет, зато теперь можно будет сделать ссылку к этому тексту. В это случае комманда перехода будет выглядеть так:
<A HREF="#имя метки">описание ссылки</A> Несколько советов
Имена файлов. Имя файла должно состоять из 8-ми символов и иметь расширение .htm или .html. Главный файл лучше всего назвать index.htm. Тогда будет проще давать адрес Вашей странички - имя главного файла можно не называть - оно работает по умолчанию.
Скрипты и апплеты. При помощи скриптов и апплетов можно довольно красиво оформить свой сайт. Обычный скрипт, написанный на языке JAVA имеет такой вид:
<script language="Java Script">
<!-- тело скрипта //-->
</script>
<запуск скрипта>
Cкрипты можно размещать в любом месте страницы, но преимущественно их располагают в конце заголовка.
Работа с апплетами мало чем отличается от работы с изображениями. Формат апплета такой:
<applet codebase="путь" code="*.class" name="имя" height="XXX" wight="XXX" align="XXX" alt="надпись">
Здесь в качестве параметров:
CODEBASE - путь к каталогу, где находиться апплет
CODE - имя файла, содержащего апплет (обычно с расширением .class)
Остальные параметры Вам известны.
Альтернативный текст.Многие пользователи отключают вывод изображений для ускорения работы броузера. Поэтому необходимо указывать альтернативный текст к картинкам и ссылкам.
Сообщение отредактировал Kordyukov - Воскресенье, 03.09.2006, 18:39:28 | 
