Читайте также:
|
В настоящее время наличие собственной Web-страницы стало непременным атрибутом престижа фирм. Сложные по художественному оформлению и многостраничные Web-документы разрабатывают профессионалы Web-дизайнеры. Однако простые Web-страницы нетрудно составить самому.
Одним из языков создания Web-страниц является HTML (Hyper Text Markup Language). Файлы, содержащие Web-страницы, созданные на HTML, имеют расширение htm. Чтение Web-страниц в сети Интернет производится по протоколу HTTP (Hyper Text Transfer Protocol), обозначение http://
Данные, описываемые на языке HTML, могут быть представлены в виде текста и статичных графических изображений. Команды языка HTML носят название тэгов или дескрипторов. Комментарии в HTML-документе начинаются символами <! и завершаются символом >.
Одним из средств создания HTML-документов является текстовый редактор Блокнот. Для создания Web-страницы необходимо:
1. Открыть редактор Блокнот
2. Написать текст программы на языке HTML
3. Сохранить текст программы в файле с расширением htm.
1. Основы построения HTML-документов
Документ, написанный на языке HTML, легко узнать по двум тэгам, содержащимся в нем: в самом начале исходного текста ставится открывающий тэг <HTML>, в самом конце – закрывающий тэг </HTML>. Все элементы языка и все тексты являются вложенными между этими тэгами.
Каждый HTML-документ разделен на 2 части: заголовок (head) и тело (body). Заголовок документа содержит информацию о документе в целом, тело содержит текст документа. Чтобы отделить эти части друг от друга используются тэги разметки: <HEAD> </HEAD>, <BODY> </BODY>.
Обычно заголовок содержит только титульную строку документа. Ее текст вложен между тэгами <TITLE> и </TITLE>. Тэг может иметь атрибут BGCOLOR, который определяет цвет фона окна вывода.
Пример
<HTML>
<HEAD>
<TITLE>МОЯ ПЕРВАЯ ДОМАШНЯЯ СТРАНИЦА</TITLE>
</HEAD>
<BODY BGCOLOR=’0000FF’>
<!СОДЕРЖИМОЕ МОЕЙ ПЕРВОЙ ДОМАШНЕЙ СТРАНИЦЫ>
</BODY>
</HTML>
2 Заголовки страницы
HTML определяет 6 уровней вложенности заголовков, обозначаемых тэгами <H1> <H2> <H3> <H4> <H5> <H6>. Наивысшим уровнем вложенности заголовков является уровень H1. На этом уровне обычно дается название страницы.
Заголовки должны использоваться в иерархической последовательности: нельзя пропустить уровень вложенности, скажем употреблять H3 сразу за H1.
Тэги заголовков могут иметь атрибут ALIGN, который определяет расположение заголовка относительно границ окна вывода. Атрибут ALIGN может принимать значения LEFT, RIGHT, CENTER.
Для перевода курсора на начало новой строки используется тэг <BR>. Для разделения одной части текста от другой можно использовать горизонтальную линию, тэгом которой является <HR>.
Пример
<H1 ALIGN=CENTER>Это текст размера H1</H1><BR>
<H2 ALIGN=RIGHT>Это текст размера H2</H2><BR>
<H3 ALIGN=LEFT>Это текст размера H3</H3><BR>
<H4 ALIGN=CENTER>Это текст размера H4</H4><BR>
<H5 ALIGN=RIGHT>Это текст размера H5</H5><BR>
<H6 ALIGN=LEFT>Это текст размера H6</H6><BR>
<HR>
3 Тэги стилей
| Тэги стилей | Описание |
| <TT> </TT> | Шрифт пишущей машинки |
| <B> </B> | Жирный шрифт |
| <I> </I> | Курсив |
| <U> </U> | Подчеркивание |
Тэги <PRE> </PRE> определяют неформатированный текст. Все символы перевода строки и все символы пробелов внутри текста сохраняются. Тэг <FONT SIZE=n> определяет размер шрифта (n может принимать значения от 1 до 7). Базовый размер шрифта, по умолчанию, равен 3. Этот тэг может иметь атрибут PACE, который задает тип шрифта и атрибут COLOR, который задает цвет букв (шестизначное шестнадцатеричное число).
Пример (белый цвет)
<FONT PACE=”Arial” COLOR=’#FFFFFF’>
4 Списки
Список – это последовательность строк, каждая из которых помечена тэгом <LI>. Эта последовательность помещается между стартовым и завершающим тэгами, определяющими тип списка.
| Тэги списка | Описание |
| <OL> </OL> | Пронумерованный список |
| <UL> </UL> | Непронумерованный список |
| <MENU> </MENU> | Список элементов меню |
Тэги <DL> </DL> определяют список определений (глоссарий). Каждый элемент этого списка должен быть помечен тэгом <DT>.
Пример
<OL>
<LI>ЧАСТЬ 1
<LI>ЧАСТЬ 2
</OL>
<UL>
<LI>ПЕРВАЯ ГЛАВА
<LI>ВТОРАЯ ГЛАВА
<LI>ТРЕТЬЯ ГЛАВА
</OL>
<MENU>
<LI>ПРИЛОЖЕНИЕ А
<LI>ПРИЛОЖЕНИЕ Б
<LI>ПРИЛОЖЕНИЕ В
</MENU>
<H2>СПЕЦИАЛЬНОСТИ ЭКОНОМИЧЕСКОГО ФАКУЛЬТЕТА:
<DL>
<DT>ФИНАНСЫ
<DT>БУХГАЛТЕРСКИЙ УЧЕТ И АУДИТ
<DT>КОММЕРЦИЯ
</DL>
5 Таблицы
Таблица начинается с тэга <TABLE> и завершается тэгом </TABLE>. Каждая новая строка начинается тэгом <TR> и завершается тэгом </TR>. Между этими тэгами можно определить столбцы таблицы с помощью тэгов <TD>. Данные, размещенные между тэгами <TD> и </TD> и находящиеся в одной строке (<TR></TR>), определяют содержимое отдельной ячейки таблицы. Для каждого столбца можно задать заголовок с помощью тэгов <TH> </TH>.
Пример
<TABLE BORDER='2'>
<TH>Первый столбец</TH><TH>Второй столбец</TH>
<TR>
<TD>Первая ячейка</TD><TD>Вторая ячейка</TD>
</TR>
<TR>
<TD>Третья ячейка</TD><TD>Четвертая ячейка</TD>
</TR>
</TABLE>
6 Гиперссылки
Простейшая ссылка выглядит так:
<A HREF=”Имя документа”>Текст</A>
Пример
<A HREF=”my.html”>Моя домашняя страница<A>
Если требуемый файл нужно искать в Интернет, то нужно указать не только Имя документа, но Метод доступа и Полное имя файла.
Пример
<A HREF=”http://www.aport.ru”>Поиск<A>
7 Изображения
Чтобы включить изображение внутрь страницы, используется тэг <IMG>. Он должен обязательно иметь атрибут SRC. Этот атрибут определяет файл, содержащий картинку. Тэг может иметь атрибут ALIGN, который принимает одно из трех значений: top, middle, bottom, которые определяют, как текст и картинка будут взаимно расположены.
Пример
<IMG SRC="Зима.jpg">
МУЛЬТИМЕДИЙНЫЙ ОБЪЕКТ НА WEB-СТРАНИЦЕ
Самый простой способ вставить мультимедийный объект на Web-страницу – это использовать тэг гиперссылки. Но, если нужно воспроизводить мультимедийный файл автоматически, то нужно использовать специальный тэг EMBED. Это одиночный тэг, для него не требуется закрывающего тэга. Обязательным атрибутом тэга является атрибут CRC=, значение которого есть абсолютный или относительный путь поиска соответствующего файла. Возможно, использовать атрибуты WIDTH= и HEIGHT=, задающие ширину и высоту области, отводимой на экране под воспроизведение мультимедийного файла.
Пример.
<A HREF=”music.wav”>Щелкните здесь, чтобы послушать музыку <A>
< EMBED SRC=”File.avi” WIDTH=”200” HEIGHT=”200”>
РАЗМЕЩЕНИЕ НЕСКОЛЬКИХ ДОКУМЕНТОВ
НА ОДНОЙ WEB-СТРАНИЦЕ
Язык HTML позволяет разбить окно программы-браузера на несколько областей и в каждой из них отобразить отдельный документ. Такие области называются фреймами. Для создания фреймов используют особый документ HTML, который не содержит текста. Он содержит только описание фреймов, заключенное между тэгами FRAMESET и /FRAMESET. В этом описании указывают размеры и порядок размещения областей в окне браузера и задают документы, загружаемые в каждую из областей.
Тэг FRAMESET должен содержать обязательный атрибут COLS= или ROWS=. Эти атрибуты задают способ разбиения окна. При использовании атрибута COLS= окно делится на области вертикальными линиями, а при использовании атрибута ROWS= - горизонтальными. Если заданы оба эти атрибута, в окне создается сетка из подобластей. Значения этих атрибутов определяют высоту и ширину областей окна. Параметры для каждой строки и столбца можно задать в процентах через запятую. Последним параметром может быть *. В этом случае под фрейм выделяется все свободное пространство окна.
Между тэгами FRAMESET и /FRAMESET располагают дополнительные тэги, указывающие назначение созданных областей. Для этого можно использовать вложенные тэги FRAMESET и тэг FRAME. Тэг FRAME должен содержать обязательный атрибут SRC=, определяющий документ, загружаемый в данную область.
Пример.
<FRAMESET ROWS=”45%,30%,25%>
<FRAMESET COLS=”40%,30%,30%>
<FRAME SRC=”doc1.htm>
<FRAME SRC=”doc2.htm>
</FRAMESET>
Дата добавления: 2015-10-02; просмотров: 46 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Теги тела HTML-документа | | | Основы записи вокала |