 |
Создание Web-сайтов средствами языка HTML
|
|
|
|
Язык HTML (Hyper Text Markup Language) — язык гипертекстовой разметки документа, служит для написания Web-сайтов. Язык HTML позволяет:
— создавать и редактировать Web-сайты, в том числе домашнюю
Web-страницу, которую можно затем разместить в Интернете;
— редактировать документы HTML, полученные из Интернета,
так чтобы функционировали все внедренные в документ объекты
(картинки, анимации и т.д.);
— создавать мультимедийные презентации, слайд-шоу, демон-
страционные проекты, благодаря гипертекстовым ссылкам и воз-
можности вставлять в документ HTML рисунки, диаграммы, ани-
мации, видеоклипы, музыкальное и речевое сопровождение, тек-
стовые спецэффекты (например, бегущая строка).
ОСНОВНЫЕ ПОНЯТИЯ ЯЗЫКА HTML
Элемент — это конструкция языка HTML, или контейнер, содержащий данные.
Web-страница представляет собой набор элементов.
Тег (Tag) — это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, например: <HTML>-Конечный тег, если он предусмотрен синтаксисом языка, снабжается косой чертой: </HTML>.
Гиперссылка (Hyperlinks) — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому.
Фрейм (Frame) — область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют разбивать страницы н прямоугольные области, в каждой из которых отображается своя собственная страница. Вы можете разместить один или несколько
Раздел 4. Сетевые технологии обработки информации
фреймов на странице (такая страница называется страницей фреймов или фреймсет (frameset)).
Форма (Form) — область гипертекстового документа, которая необходима для организации обратной связи с посетителями сайта.
|
|
|
Апплет (Applet) — небольшая прикладная программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
Скрипт (Script) — программа, включенная в состав Web-страницы для расширения ее возможностей.
Загрузка (DownLoad) — копирование документа с Web-сервера на компьютер клиента.
Размещение (UpLoad) — копирование документа с компьютера клиента на Web-сервер — используется при создании собственной Web-страницы (т.е. при ее опубликовании).
Пиксел (Pixel) — наименьшая цветная точка экрана монитора.
ОБЩАЯ СТРУКТУРА ПРОСТЕЙШЕГО ДОКУМЕНТА HTML
Общая структура простейшего документа HTML такова:
<СОММЕNТ> Комментарий </СОММЕNТ>
<HTML>
<HEAD>
<TITLE> Название документа </ТIТLЕ>
</HEAD>
<BODY>
Здесь расположен текст самого документа HTML.
</BODY>
</HTML>
Дадим пояснения указанным тегам документа HTML.
<COMMENT> — комментарий к документу. Не является обязательным.
<HTML> — идентификатор всего блока HTML-команд.
<HEAD> — идентификатор заголовка документа HTML. <TITLE> — идентификатор заголовка окна просмотра.
<BODY> — идентификатор HTML-команд документа для просмотра.
Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру основную информацию для идентификации и организации документа.
|
Информатика и информационные технологии
Все указанные теги — парные, т.е. каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой, так и с большой буквы.
<МЕТА> — непарный тег применяется для указания подробной информации о документе.
ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТОВОГО ПОТОКА
<Р> — идентификатор конца абзаца, после которого добавляется пустая строка. В конце нужен тег </Р>.
<BR> — идентификатор перевода строки.
|
|
|
<HR> — идентификатор изображения горизонтальной линии.
Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой.
<PRE> — установка равноширинного шрифта. В конце нужен тег </PRE>.
ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ ЗАГОЛОВКОВ
И ПОДЗАГОЛОВКОВ ДОКУМЕНТА
<Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>. При этом заголовки будут выведены большими буквами, причем размер букв у тега <Н1> будет самый большой, у <Н2> — меньше, у <НЗ> — еще меньше и т.д.
ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ СИМВОЛОВ ТЕКСТА
<В> — идентификатор полужирного шрифта.
<strong> — идентификатор выделенного шрифта.
<i> — идентификатор курсива.
<U> — идентификатор подчеркивания.
<s> — идентификатор перечеркивания.
<tt> — идентификатор равноширинного шрифта (телетайпного или курьера).
<big> — задает увеличенный размер шрифта.
<small> — задает уменьшенный размер шрифта.
< center > — задает центрирование текста.
<sub> — задает нижний индекс.
ТЕГИ ФОРМАТИРОВАНИЯ АБЗАЦЕВ <р align=left> — выравнивание текста в абзаце паевому краю- <р align=right> — выравнивание текста в абзаце по правому краю.
Раздел 4. Сетевые технологии обработки информации
<р align=center> — выравнивание текста в абзаце по центру.
<р align=justify> — полное выравнивание по обоим краям экрана. align — атрибут выравнивания.
ТЕГИ СПИСКОВ
Теги списков являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Браузер автоматически генерирует номера для каждого пункта в списке.
<OL> — идентификатор упорядоченного списка. В конце </OL>.
Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять маркер.
<UL> — идентификатор неупорядоченного списка. В конце </UL>.
Отдельные элементы в упорядоченном и неупорядоченном списках помечают одиночным тегом <Ы>, а элементы в списках определений <DL> тегами <DT> для термина и <DD> для значения термина.
<LI> — идентификатор элемента в упорядоченном и неупорядоченном списке.
Конечный тег <LI> может быть опущен.
ТЕГИ СПИСКОВ ОПРЕДЕЛЕНИЙ
|
|
|
Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний.
<DL> — идентификатор списка определений. В конце </DL>.
<DT> — идентификатор термина в списке определений.
<DD> — идентификатор значений термина в списке определений.
<DL>
<DT> название термина 1
<DD> определение термина 1
<DD> другое определение термина 1
</DL>
ТЕГИ ЦВЕТА
<BODY bgcolor=«teal» text=«aqua» link=«red»> — задает цвет тек-ста {text), цвет фона {bgcolor) и цвет гипертекстовой ссылки {link),
Информатика и информационные технологии
<BODY background=«back.jpg»> — задает фоновый рисунок (обои) на Web-странице в файле back.jpg.
<BODY background=«\windows\tartan.bmp»> — фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла.
<font color=«yellow» size=5> — задает цвет символов текста (color) и их размер (size). В конце нужен тег </font>.
ТЕГИ ЛИНИЙ
<hr color=«lime»> — задает цвет горизонтальной линии.
<hr color=«red» size=3 width=220 align=center> — атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселях; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо).
ТЕГИ ДЛЯ ВСТАВКИ ИЗОБРАЖЕНИЙ
Графика на страницах — это средство выражения мысли, подчеркивания идеи.
Изображения можно сохранять в нескольких форматах. Тип файлов GIF — графический формат обмена, стал первым типом файлов, которые поддерживались в WWW. Затем был разработан формат JPEG — объединенная группа экспертов фотографии. Это формат эффективнее GIF для представления больших изображений.
Приобрел популярность формат PNG — персональная сетевая графика, который заменяет GIF.
При публикации сайта рисунок должен находиться в папке, где хранятся файлы страниц, а URL-адрес должен быть реальным.
JPEG использует специальную технику компрессии изображений, что является преимуществом для рисунков и фотографий.
<IMG SRC=«lycos.gif»> — вставка графического изображения в виде анимационного файла lycos.gif. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.
|
|
|
<IMG SRC=«echomsk.gif» width=«403» height=«263»> — если при вставке изображения использованы атрибуты width (ширина в пикселях) и height (высота в пикселях), то при загрузке изображения браузер покажет сначала рамку, где должно быть изображение, а затем уже само изображение, поскольку оно загружается дольше. Таким образом, резервируется место на экране под изображение.
<IMG SRC=«\html\animat\iexplor.gif»> — вставка графического изображения в виде файла iexplor.gif, причем указан полный путь графического файла на диске: c:\html\animat\iexplor.gif.
Раздел 4. Сетевые технологии обработки информации
<IMG SRC=«scene.jpg» border=3 alt=«Картина»> — атрибут border задает рамку по периметру изображения толщиной 3 пикселя. Атрибут Alt дает текст на месте рамки, если изображения нет.
Атрибут border=0 используется, чтобы убрать рамку вокруг рисунка. Это необходимо, например, при использовании анимирован-ных пша-рисунков на прозрачной основе.
<IMG SRC=«flower.jpg» border=0 width=«85» height=«130» align=«left» hspace=5 аlt=«Цветок»>
Здесь атрибут hspace =5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.
Атрибут align=«left» обеспечивает размещение рисунка слева.
ТЕГ ПЕРЕХОДА К ДРУГОМУ ФАЙЛУ
<а href=«excite.htm»>excite.htm</a> — гипертекстовая ссылка к файлу excite.htm.
<а href=«C:\book\book.inf»>book.inf</a> — гипертекстовая ссылка, переход к файлу book.inf. При запуске браузера следует указать программу для просмотра текстового файла book.inf, например
edit.com.
При работе в Интернете следует различать файлы с большими и с маленькими буквами в имени и расширении. Должно быть полное соответствие между именами файлов по размеру каждой буквы в имени и расширении, указанными в гиперссылке и лежащими на сервере, иначе гиперссылки не будут работать.
Для облегчения работы можно задавать цифровые имена файлов (цифры всегда одного размера).
ТЕГ ПЕРЕХОДА К ДРУГОЙ WEB-СТРАНИЦЕ
<а href=«http://www.da.ru»>http://www.da.ru</a> — гипертекстовая ссылка в виде текста, переход в Интернете к Web-странице http://www.da.ru.
<а href=«zinn.gif»><img src=«globe.gif» border=«3»X/a> — гипертекстовая ссылка в виде изображения globe.gif, переход к просмотру изображения zinn.gif.
ТЕГ ВСТАВКИ АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ
<а href=«mailto: int@mtu-net.ru»>int@mtu-net.ru</a> — гиперссылка на адрес электронной почты. При нажатии происходит вызов почтовой программы и указанный адрес E-mail:int@mtu-net.ru вводится в пункт Кому.
Информатика и информационные технологии
ТЕГ ВСТАВКИ ДОКУМЕНТА
<embed src=«Welcome.avi» Width=280 Height=140 autostart=trae> —
вставка объекта в документ HTML. В данном случае это мультимедийный файл *.avi, причем при загрузке страницы происходит автозапуск этого файла, размеры которого на экране заданы атрибутами Width и Height.
|
|
|
Если документ HTML большой, то внутри него делают переходы по метке (U01): <Р><a href=#UО1»>Введение</а></P> <а name=«U01»> Введение </а>
ТЕГИ ДЛЯ СОЗДАНИЯ БЕГУЩЕЙ ТЕКСТОВОЙ СТРОКИ
(ТОЛЬКО ДЛЯ INTERNET EXPLORER):
<marquee behavior=«scroll» direction=«right» loop=«-1»> Интернет — это окно в Mир !</marquee>
Если текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (т.е. без атрибутов, и она будет бежать влево):
<marquee>Добро пожаловать! </marquee>
Если текстовая строка должна бежать то влево, то вправо, то в теге <marquee> используется атрибут behavior=«alternate».
СПИСОК ЦВЕТОВ СИМВОЛОВ HTML
Всего 16 основных цветов:
| white — белый | black | - черный | blue- | синий | gray | серый |
| red — красный | green | — зеленый | yellow | — желтый | pink — | розовый |
| maroon — темно-красный | aqua | - бирюзовый | nayy | темно-си- | fuchsia — ярко-фиолетовый | |
| olive — оливковый | purple | — фиолетовый | cyan — оттенок бирюзового | brown вый | — коричне- | |
| silver — светлосерый | teal — | ярко-голубой | orange | — оранжев. | lime | ярко-зеленый |
Вместо указанных терминов для задания цвета можно использовать RGB-коды (Red, Green, Blue), например: #FFFFFF - белый (white), #FF0000 - красный (red).
Меняя RGB-коды, цвета можно подбирать желаемые текста и фона.
Раздел 4. Сетевые технологии обработки информации
ТЕГИ ПОДКЛЮЧЕНИЯ ЗВУКА
Для воспроизведения звука (файл *.mid) после загрузки документа HTML в браузер Internet Explorer (т.е. в фоновом режиме), надо записать следующую команду, например:
<bgsound src=«\windows\canyon.mid» loop=l>
Можно также использовать файл формата *.wav. Число воспроизведений loop можно увеличить с 1 до п.
ТЕГИ ФРЕЙМОВ
<frameset></frameset> — определение фреймовой (оконной) структуры документа: размеры и расположение фреймов на странице. Заменяет тег BODY в документе с фреймами; может быть вложен в другие фреймсеты.
<frameset rows=«value,value»> — определение количества и размеров горизонтальных фреймов (фреймов-строк) в окне браузера (пиксели, проценты ширины).
<frameset cols=«value,value»> — определение количества и размеров вертикальных фреймов (фреймов-столбцов) в окне браузера (пиксели, проценты ширины).
<frame> — определение фрейма и его свойства внутри FRAM ESET-структуры.
<noframes></noframes> — определяет, что показывать, если браузер не поддерживает фреймы.
Атрибуты фреймов
<frame src=«URL»> — указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.
<frame name=«name»> — определение имени данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра target.
<frame marginwidth=#> — определение ширины (в пикселях) левого и правого полей фрейма; должен быть равен или быть больше 1.
<frame marginheight=#> — определение ширины (в пикселях) верхнего и нижнего полей фрейма; должен быть равен или быть больше 1.
<frame scrolling=VALUE> — определение наличия полосы прокрутки содержимого фрейма; значениями могут быть: «yes,» «no,» или «auto.» По умолчанию стоит auto.
<frame noresize> — предотвращение изменения размеров фрейма.
| Раздел 4. Сетевые технологии обработки информации Тег <table>может иметь атрибуты: <table border=«5» width=«100» cellpadding=«10» cellspacing=«10»>, |
Информатика и информационные технологии
ТЕГИ ФОРМЫ
Для функционирования формы понадобится написать CGI скрипт. HTML просто создает вид формы.
где
| <form></form> | Создание заполняемой формы |
| <select multiple name=«NAME» size=?></select> | Элемент select создает в заполняемой форме меню типа «Выбор одного пункта из многих» или «Выбор нескольких пунктов из многих». Size определяет число видимых пунктов без прокрутки. |
| < Option > | Элемент option описывает отдельные пункты меню. Не имеет конечного тэга. |
| <textarea name=«NAME» cols=40 rows=8></textarea> | Создание поля для ввода нескольких строк текста. Cols указывает на ширину; rows указывает на высоту. |
| <input type=«checkbox» name=«NAME»> | Создание поля ввода для атрибутов типа «да»/»нет» или для атрибутов, которые могут одновременно принимать несколько значений. Сразу за тегом следует текст. |
| <input type=«radio» name=«NAME» value=«x»> | Создание поля ввода для атрибутов, которые принимают одно значение из нескольких возможных. Текст следует сразу за тегом. |
| <input type=text name=«foo» size=20> | Создание поля ввода под одну строку текста. Size указывает длину в символах. |
| <input type=«submit» value=«NAME»> | Создание кнопки, при нажатии которой заполненная форма посылается на сервер. |
| <inpu(type=«image» border=0 name=«NAME» src=«name.gif»> <input type=«reset»> | Создание графического образа для кнопки, инициализирующей передачу данных на сервер. |
border=«5» — ширина боковой грани в пикселях. При нулевом значении рамка исчезает;
width=«100» — ширина таблицы в пикселях или width=«50%» — ширина таблицы в % по отношению к ширине страницы в окне;
cellspacing=«10» — ширина фронтальной грани в пикселях;
cellpadding=«10» — задает размер пустого пространства в пикселях, окружающего данные в ячейке.
Тег <caption></caption> задает заголовок таблицы.
Тег <tr> задает строку таблицы. Следующий тег <tr> задает следующую строку таблицы. Конечный тег необязателен.
Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую ячейку таблицы. Конечный тег необязателен.
Цвет фона ячейки задается в теге <td>: <td bgcolor=«yellow»>
Непарный тег <th> — задает элемент ячейки, которая является заголовком таблицы. Этот тег должен находиться внутри тега <tr>.
Ячейка-заголовок отличается от обычной тем, что текст внутри нее выделяется полужирным шрифтом. Цвет фона заголовка задается: <tr><th bgcolor=«yellow»>Заголовок 1 1.
СКРИПТ
Для реализации Web-сайта используется программа Движок, реализующая функциональность, отличную от простого показа готовых Web-страниц. Например, просмотр каталога Интернет-магазина (список товаров извлекается из базы данных магазина), поиск в Интернете (страницы с ответами поисковой системы формируются динамически), показ баннеров (движок «выдает» страницам сайта тот или иной баннер по заданному алгоритму).
| СОЗДАНИЕ ТАБЛИЦ В HTML Таблицы являются удобным средством форматирования данных в HTML. Таблицу задает и определяет ее общие свойства тег <table></table>.По горизонтали, например по центру, таблицу можно выровнять с помощью тега <р align=«center»>,размещаемо го перед <table>. |
Скрипт — несложная программа на «скриптовом» языке программирования (Perl, Php, Javascript), компонент движка. В предельном случае движок сайта может состоять из одного-единствен-ного скрипта.
Cgi-bin исторически — подкаталог на сервере, в котором располагались скрипты и иные компоненты движка сайта. Некоторые хостинги (услуги по размещению чужого Web-сайта на своем Web-сервере или чужого Web-сервера) предоставляют своим клиентам Jличные каталоги cgi-bin для размещения скриптов.
|
|
|
