Автор работы: Пользователь скрыл имя, 27 Октября 2013 в 19:38, реферат
Основа каждой странички — язык разметки гипертекста, или HTML (Hypertext Markup Language).
Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или "тэги" (markup tags). Флаги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью флагов разметки формируются связи с другими web-сайтами и ресурсами Интернет.
Таблица вставляется в HTML-документ парными флагами <TABLE> и </TABLE>.
У флага <TABLE> есть параметры:
BORDER — ширина бордюра;
WIDTH —ширина таблицы;
BGCOLOR — цвет фона под таблицей.
Между флагами могут располагаться следующие элементы:
У флага CAPTION есть всего один параметр, определяющий положение названия таблицы — ALIGN. Он может принимать два значения: top — над таблицей; bottom —под таблицей.
У этого флага есть три параметра:
ALIGN — выравнивание внутри строки:
LEFT, RIGHT, CENTER; VALIGN — вертикальное выравнивание внутри строки таблицы:
TOP, BOTTOM, MIDDLE; BGCOLOR — цвет фона внутри строки.
Флаг столбца таблицы может иметь следующие параметры:
ALIGN — выравнивание:
LEFT, RIGHT, CENTER; VALIGN — вертикальное выравнивание:
TOP, BOTTOM, MIDDLE; COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов, строк; BGCOLOR — цвет фона под столбцом.
Создадим в текстовом редакторе файл t1.htm и запишем в каталог HTML:
<HTML> <HEAD>
<title> Таблица </title>
</HEAD>
<BODY>
<H2 ALIGN=Center> Самая простая таблица </H2>
<TABLE BORDER>
<TR> <TD> ячейка A </TD> <TD> ячейка В </TD> <TD> ячейка С </TD> </TR>
<TR> <TD> ячейка D </TD> <TD> ячейка E </TD> <TD> ячейка F </TD> </TR>
</TABLE>
</BODY>
</HTML>
Открыв файл в программе просмотра, увидим пример самой простой таблицы
Чтобы назвать столбцы и строки, воспользуемся флагом <ТН> Заголовок </ТН>.
Он может иметь следующие параметры:
ALIGN — выравнивание;
VALIGN — вертикальное выравнивание;
COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов, строк; WIDTH — ширина названия;
BGCOLOR — цвет фона под названием.
Отредактируйте файл t1.htm следующим образом:
<HTML> <HEAD>
<title> Таблица </title>
</HEAD>
<BODY>
<H2 ALIG№=Center> Самая простая таблица с заголовками </Н2>
<TABLE BORDER>
<ТН> Заголовок 1 </ТН> <ТН> Заголовок 2 </ТН> <ТН> Заголовок 3 </ТН>
<TR> <TD> ячейка A </TD> <TD> ячейка В </TD> <TD> ячейка С </TD> </TR> <TR> <TD> ячейка D </TD> <TD> ячейка E </TD> <TD> ячейка F </TD> </TR>
</TABLE>
</BODY>
</HTML>
Чаще встречаются сложные
Измените файл t1.htm:
<HTML> <HEAD>
<title> Таблица </title>
</HEAD>
<BODY>
<H2 ALIGN=Center> Таблица </H2>
<TABLE BORDER>
<TH> Заголовок 1 </TH> <TH> Заголовок 2 </TH> <TH> Заголовок 3 </TH>
<TR>
<TD ALIGN=center COLSPAN=2> ячейка A </TD>
<TD ALIGN=center ROWSPAN=2> ячейка В </TD>
</TR>
<TR>
<TD> ячейка С </TD> <TD> ячейка D </TD> </TR>
</TABLE>
</BODY>
</HTML>
Параметр BORDER флага <TABLE> устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10. Ширина бордюра BORDER=G обозначает его отсутствие.
Когда Вы создаете таблицу, то ширина столбца оказывается равной самому широкому элементу этого столбца. Если Вы хотите установить для него точную ширину, то пригодится параметр WIDTH.
Создайте файл t2.htm такого содержания:
<HTML>
<HEAD> <title> Таблица </title> </HEAD>
<BODY>
<H2 ALIGN=Center> Таблица </H2>
<TABLE BORDER=7 WTOTH=,,50%">
<caption> Таблица в 50% ширины от экрана </caption>
<TR>
<TD WTOTH=80%> Столбец в 80% ширины таблицы </TD> <TD> ячейка 2 </TD> </TR>
<TR>
<TD> ячейка 3 </TD> <TD> ячейка 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
На экране компьютера Вы увидите, сколько места занимают таблица, столбцы и ячейки.
Таблицы можно использовать и для форматирования текста. Предположим, что Вам надо выровнять текст по левой границе и отодвинуть его от края. Для достижения цели используйте флаги таблицы, не указывая строки и ячейки, но указывая невидимый бордюр (NOBORDER).
Таблица может использоваться в том случае, если Вам необходимо разместить текст на "обоях", но Вы хотите, чтобы при этом он еще хорошо читался. Можно подобрать цвет таблицы в тон обоям или добавить какие-нибудь графические элементы.
Создайте файл t3.htm:
<HTML>
<HEAD> <title> М.Ю. Лермонтов </title> </HEAD>
<BODY background="f:/work/intemet/
<br> <br> <br> <br>
<TABLE align=right > <caption> * * * </caption>
<TR> <TD> <font size=+2>
Горные вершины <br>
Спят во тьме ночной; <br>
Тихие долины <br>
Полны свежей мглой; <Ьг>
Не пылит дорога, <br>
Не дрожат листы ... <br>
Подожди немного, <br>
Отдохнёшь и ты.
</font> </TD> </TR>
</TABLE>
</BODY>
</HTML>
Составьте таблицу (на страничке index.htm) с именами файлов в вашем каталоге HTML и с комментариями к ним. Причём, имена файлов в таблице должны являться «гиперссылками на соответствующие HTML-документы.
Бегущая строка
Бегущая строка — это очень интересное изобразительное решение, которое может украсить Вашу страничку.
Главным и единственным флагом, создающим бегущую строку, является флаг <MARQUEE> ТЕКСТ </MARQUEE> На место слова ТЕКСТ подставляется любое слово или фраза, которую надо заставить бежать по экрану компьютера. Вставленная фраза появится из-за правого края программы просмотра и, пройдя через всю страницу, скроется за левым краем.
Если бегущую строку нужно направить справа налево флаг принимает вид: <MARQUEE DIRECTION=left> ТЕКСТ </MARQUEE>
Флаг
<MARQUEE DIRECTION=right> ТЕКСТ </MARQUEE> сохранит движение слева направо.
С помощью другой группы атрибутов можно задавать характер движения надписи по странице.
scroll — стандартное движение от правого края к левому. Этот атрибут организует бесконечный цикл. Число циклов можно ограничить, введя оператор LOOP
<MARQUEE LOOP-n BEHAVIOR=scroll> ТЕКСТ </MARQUEE>
Значение n оператора LOOP указывает число повторений цикла. В данном случае, поскольку во флаг еще включен атрибут BEHAVIOR со значением scroll, надпись совершит стандартное движение от правого до левого края Web-страницы три раза.
slide — надпись один раз пробегает от правого края к левому, где и остается, alternate — движение от правого края страницы к левому и обратно. Бесконечный цикл. Флаги бегущей строки с включенными в них атрибутами характера движения выглядят следующим образом:
<MARQUEE BEHAVIOR=scroll> ТЕКСТ </MARQUEE>
<MARQUEE BEHAVIOR=slide> ТЕКСТ </MARQUEE>
<MARQUEE BEHAVIOR=altemate> ТЕКСТ </MARQUEE >
Нет необходимости растягивать бегущую строку на всю ширину раскрытой Web- страницы. Можно указать ширину участка, занимаемого бегущей строкой. Флаг бегущей строки в этом случае приобретает вид:
<MARQUEE WDDTH=n> ТЕКСТ </MARQUEE>
где n — ширина той части страницы, на которой расположена бегущая строка. Значение п указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.
Движение надписи по экрану можно регулировать — для этого, например, указывается, какое число пикселей должен пройти текст надписи, чтобы снова прорисоваться на экране:
<MARQUEE scrollamount=n> ТЕКСТ </MARQUEE> Здесь п — число пикселей.
Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново:
<MARQUEE scrolldelay=t> ТЕКСТ </MARQUEE> В данном случае переменная величина t — измеряется в миллисекундах.
Есть возможность указывать величину шрифта текста в строке:
<FONTSIZE=n> <MARQUEF> ТЕКСТ </MARQUEE> </FONT> Можно окрасить поверхность бегущей строки в какой-либо цвет:
<MARQUEE BGCOLOR=n> ТЕКСТ </MARQUEE>, где n, можно указать в вид шестнадцатеричного числа либо написав его название. И, наконец, можно указать высоту бегущей строки, задавая величину n в пикселях:
<MARQUEE HEIGHT=n> ТЕКСТ </MARQUEE>
Вставьте в свою Web-страничку бегущую строку. Сделайте так, чтобы она была в тон к цвету Вашей странички или контрастной. Надпись должна совершить стандартно движение от правого до левого края Web-страницы пять раз. Затем попробуйте проверить различные варианты цикличности движения строки, выберите оптимальное для вашей собственного странички.
Рамки
Рамки (или фреймы — Frame) — мощный механизм представления информации на Web- Страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла.
Для создания рамок (областей страницы) используют флаг <FRAMESET> и парный ему флаг </FRAMESET>, а для их описания — флаги < FRAME >.
Создайте четыре маленьких Web-документа: a.htm, b.htm, c.htm, d.htm. Задайте цвет фона каждой страницы, для чего используйте атрибут BGCOLOR флага BODY.
Файл a.htm:
Файл d.htm:
<HTML>
<HEAD> <TITLE> Рамки. Страничка D </TITLE> </HEAD>
<BODY BGCOLOR-"#FFFFFF"> Фрейм D белого цвета </BODY>
</HTML>
Создайте базовую страницу, на которой будут отображаться рамки, и сохраните ее в
файле с именем baza.htm:
<HTML>
<HEAD> <TITLE> Рамки </TITLE> </HEAD>
<FRAMESET COLS="50%, 50%">
<FRAME SRC="a.htm">
<FRAME SRC ="b.htm">
</FRAMESET>
</HTML>
Откройте страницу baza.htm в программе просмотра, и Вы увидите, что она состоит из двух областей.
Приведем небольшой комментарий к использованию флага <FRAMESET>. В нем указывается, что экран подразделяется на две колонки (параметр COLS), каждая из которых занимает ровно половину экрана (COLS-»50%, 50%").
Флаг <FRAMESET> представляет собой флаг-контейнер, то есть флаг, который может включать в себя другие флаги. Флаг - контейнер заканчивается парным ему флагом </FRAMESET>. Флаг <FRAME> не является флагом - контейнером и не требует парного закрывающего флага.
Измените страницу baza.htm:
<HTML>
<HEAD> <ПТЬЕ> Демонстрация фреймов </TITLE> </HEAD>
<FRAMESET COLS="25%, 25%, 25%, 25%">
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
<FRAME SRC="d.htm">
</FRAMESET>
</HTML>
Откройте файл baza.htm в программе просмотра. Отредактируйте Ваш файл baza.htm, изменив строку:
<FRAMESET COLS="10%, 10%, 10%, *"> Обратите внимание, что размер четвертой (самой правой) рамки указан не числовым значением, а символом «*». Это означает, что данная рамка должна занимать всю оставшуюся площадь главной страницы. Просмотрите файл на экране.
Размеры рамок можно задавать не
только в процентах, но и в пикселях.
Например, можно указать, что каждая
из четырех рамок имеет
<FRAMESET COLS="60,60,60,60"> Использование абсолютных величин может привести к нежелательным эффектам — страница, которая отлично смотрится с разрешением 1024x768, может выглядеть совсем по- другому в разрешении 800x600. Поэтому следует придерживаться простого правила: задавать размер одной из рамок символом «*».
Во всех рассмотренных примерах использовались рамки в виде колонок. Естественно, что мы можем использовать и горизонтальные ряды. Измените в базовом файле один флаг:
<FRAMESET ROWS-»25%, 25%, 25%, 25%"> Можно задать соотношение между фреймами:
<FRAMESET COLS="100, *, 2*">
Самая левая рамка имеет горизонтальный размер 100 пикселей, вторая должна занимать всю оставшуюся часть главной страницы, а третья (самая правая) — в два раза больше второй.
Теперь разделим третью рамку пополам:
<HTML>
<HEAD> <TITLE> Демонстрация фреймов </TITLE> </HEAD>
<FRAMESET COLS="100, *, 2*">
<FRAME SRC="a.htm">
<FRAME SRC-»b.htm">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="c.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Рамки — мощное и удобное средство, но не следует злоупотреблять ими. Не располагайте на экране более трех рамок и старайтесь не применять их без надобности.
Вернемся к примеру с двумя
рамками (файл baza.htm). Найдите какую-нибудь
небольшую картинку в формате .gif или .jpg
(например, C-server\net\html\computr.gif)
графическое изображение:
<HTML>
<HEAD> <TITLE> Демонстрация фреймов </TITLE> </HEAD>
<FRAMESET COLS="*, 80%">
<FRAME SRC=7/c-server/net/litml/
<FRAME SRC="a.htm">
</FRAMESET> </HTML>
WEB-странички
Желательно добиться того, чтобы размер рамки, содержащей графическое изображение, был равен размеру изображения, а вторая рамка покрывала оставшуюся часть главного окна. Если мы зададим размер рамки-фрейма, содержащей графическое изображение, меньшим, чем размер изображения, то увидим появление полос прокрутки.
Введя атрибут SCROLLING в соответствующий флаг <FRAME>, можно управлять появлением на экране полос прокрутки. Возможные значения атрибута SCROLLING:
SCROLLING = YES — у рамки всегда будут полосы прокрутки, независимо от того, нужны ли они или нет.
SCROLLING = NO — у рамки не будет полос прокрутки, независимо от того, нужны ли они или нет.
SCROLLING = AUTO — у рамки будут полосы прокрутки только в случае необходимости.
Проведите эксперимент с полосами прокрутки, увеличив размеры второго фрейма до 90% и изменяя атрибут флага:
<FRAME SRC ="... .gif" SCROLLING=NO>
Выровнять графическое изображение
по левой границе рамки можно
с помощью атрибутов MARGINWIDT
<FRAME SRC-"... .gif" MARGIN WIDTH=1 MARGINHEIGHT= 1 >
Добавим в флаг <FRAMESET> атрибут BORDER, присвоив ему значение 10. Изменим цвет границы рамки, например, на черный:
<FRAMESET COLS-"*,80%" border=10 bordercolor="#000000">
<FRAME FRAMEBORDER=NO> — избавиться от границы
<FRAME FRAMEBORDER=YES> — оставить границу Проведите эксперименты с границами рамок.
Связь между рамками
Измените содержимое файла a.htm, добавив ссылку на другой файл (c.htm):