Мастеркласс Вебмастеринга: HTML прошлого века (без CSS) (web html)
Ключевые слова: web, html, (найти похожие документы)
From: Алексей Соммер <asommer@yandex.ru.>
Newsgroups: email
Date: Mon, 26 Dec 2007 14:31:37 +0000 (UTC)
Subject: Мастеркласс Вебмастеринга: HTML прошлого века (без CSS)
ОСНОВЫ ВЕБМАСТЕРИНГА для увлеченных программированием
ВЕБ-МАСТЕРКЛАСС для "НЕЧАЙНИКОВ" ( Мастеркласс Вебмастеринга )
автор Соммер Алексей
перепечатка разрешена со ссылкой на автора
авторское право сохраняется © Copyright 2005
Как же все-таки правильно называть создание сайтов вебмастерингом или веб-дизайном?
Вебмастерингом можно назвать именно верстку-программирование веб-страниц.
А вот создание простых страниц, но красивых и имеющих оригинальный дизайн, даже нужно
назвать веб-дизайном. Вы мастер или дизайнер сайтов?
Для того, чтобы создать сайт можно воспользоваться каким-либо HTML редактором или программой,
способной преобразовывать созданные документы в формат веб-страниц. Также можно найти ресурс,
который разместит ваши фотографии и тексты соответственно с вашим вкусом и пожеланиями.
Но для того, кто этим занимается всерьез будет достаточно и двух программ - простого текстового
редактора ( подобного редактору "Блокнот" ОС Windows ) и браузера ( интернет-обозревателя ).
Язык верстки веб-страниц HTML
HyperText Markup Language - Язык разметки гипертекста
Язык HTML , с помощью которого описывается содержимое веб-страницы, является избранным и
усложненным подмножеством SGML ( Standard Generalized Markup Language ).
Стандарт разметки SGML изначально был разработан для текстовых документов - он описывает то,
как документ должен выглядеть на экране или при распечатке на принтере. Но на сегодняшний день,
с развитием инфраструктуры коммуникаций появилось много новых, в основном, мультимедийных возможностей.
Из всего многообразия HTML хотелось бы предоставить вашему вниманию самое важное и нужное.
1.Команды и стандарты языка HTML
---------------------------------
В различных других языках программирования программа пишется с помощью команд ( операторов ).
Содержимое же веб-страницы формируется с помощью тэгов
$$ tag - ярлычок , этикетка, хвостик, ушко, избитая фраза, метка ( англ. ) $$ ,
которые могут иметь различные дополнительные атрибуты. Большинство тэгов парные, но некоторые
употребляются без пары.
Атрибуты ( и присвоенные им значения ) вписываются в первый ( открывающий ) тэг через пробел.
Второй тэг является, соответственно, закрывающим - он точно такой-же, - но с наклонной чертой.
Содержимое между тэгами отображается по-особенному, в зависимости оттого, что означают эти тэги.
Оно как бы "промаркировано".
Термин тэг уже довольно прижился в русском языке, поэтому далее употребляться будет он, взамен
какому-либо аналогичному русскоязычному слову. Тэги можно писать, не взирая на регистр символов -
то есть как маленькими, так и большими буквами.
Схема html страницы выглядит так:
<html>
<head> </head>
<body> Содержимое окна просмотра </body>
</html>
Сохраненная в файл html ( имя_файла.html ) эта страница в Интернет обозревателе будет выглядеть
приблизительно как и текстовой файл формата txt ( имя_файла.txt ) с текстом "Содержимое окна просмотра".
В некоторых текстовых редакторах сохраняя текст веб-странички в формат html нужно выбирать в графе
тип файла "все файлы" - иначе у вас может получится файл формата txt - имя_файла.html.txt
Содержимое тэгов <head> </head> это заголовок документа.
Содержит информационно-программную часть страницы. Может включать в себя скрипты программ-сценариев;
установки стилей либо правил для элементов страницы; заглавие; данные для анализаторов и т.п.
Тэги <body> </body> включают в себя содержимое окна.
Все, что заключено между ними - это непосредственно само содержание страницы.
Основные тэги <body> </body> также имеют и свои атрибуты, задающие в данном случае
правила отображения для всей страницы.
Атрибуты body :
bgcolor=" " - цвет фона страницы; text=" " - цвет текста ;
link=" " - цвет, которым обозначаются переходы на другие документы - ссылки;
vlink=" " - цвета посещенных ссылок; alink=" " - цвет активизированных ссылок;
background=" " -фоновое изображение;
Тэги <title> </title> с текстовым содержимым между - находящиеся между
тэгов <head> </head> придадут странице заголовок, отображаемый в верхней строке
интернет-обозревателя ( в заголовке окна ).
<html>
<head>
<title> Моя проба пера</title>
</head>
<body bgcolor="yellow" text="red">
Test. Я очень рад, что вы это читаете!
</body>
</html>
1.1.Цвета
Значения цветов представляются как строковые литералы ( слова ) либо десятичные
или шестнадцатиричные триплеты RGB типа ( RGB - Red Green Blue - Красный Зеленый Синий ).
Десятичный триплет устанавливает насыщенность каждого из этих цветов по шкале от 0 до 255
( либо по шкале от 0% до 100% ). Шестнадцатеричный представляет собой выражение из 6 знаков
( шестнадцатеричных - 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ).
Первые 2 знака - красный, вторые - зеленый, третие - синий.
ЦВЕТ Десятичный триплет Шестнадцатеричный Литерная подстановка
Красный rgb(255,0,0) FF0000 red
Черный rgb(0,0,0) 000000 black
Белый rgb(255,255,255) FFFFFF white
И далее приведен список англоязычных литеральных значений цветов :
aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond,
blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue,
cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki,
darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen,
darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray,
dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold,
goldenrod, gray, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki,
lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan,
lightgoldenrodyellow, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen,
lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta,
maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue,
mediumspringgreen, mediumturqoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin,
novajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen,
paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red,
rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue,
slateblue, slategray, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet,
wheat, white, whitesmoke, yellow, yellowgreen.
Совет! Для того, чтобы цвет фона гармонировал с рисунками - вы можете в графическом редакторе
использовать функцию для взятия цвета ( и его кода ) с определенной точки картинки.
Большинство серьезных программ для работы с графикой имеют такую возможность.
1.2.Универсальный локатор ресурса URL
Uniform / Universal Resourse Locator - универсальное размещение ресурса.
Какие-то внешние объекты/ресурсы в HTML описываются с помощью URL.
Фактически это просто адрес странички или объекта в web или на компьютере.
Как правило URL веб-страниц начинается с http:// что означает, что для получения документа
с сервера использовался протокол передачи гипертекста ( Hypertext Transfer Protocol ).
Далее идет сам адрес ресурса.
Если в тексте HTML странички вместо URL задать просто имя файла, то он станет последним звеном
в цепи текущего путевого адреса ( то есть станет последним после косой черты / слэш в том URL ,
по которому находится страничка ).
Пример URL: http://asommer.narod.ru/
Внимание!!! Желательно соблюдать строчно-заглавное написание букв при написании URL , так как не
все браузеры обладают возможностью изменить заданный URL для того, чтобы перейти на наиболее похожий
ресурс. Хотя доменные имена сайтов как правило можно писать не взирая на регистр символов.
http://WWW.JERRYD1.COM/
1.3.Размеры в HTML
Обычно размеры в HTML по умолчанию значатся в пикселях px ( Пиксель - минимальная единица градации
изображения. В пикселях обычно устанивливается разрешение монитора по вертикали и горизонтали ).
Можно устанавливать размер в % - процентах, которые обозначат размер равный процентам от истинного
размера объекта либо окна документа.
Размеры шрифтов устанавливаются целым числом, которое указывает относительную величину шрифта.
1.4.Комментарии
<!-- Комментарии записываются между такими вот символами //-->
<-- Комментарий в одну строчку -->
<comment> А если текст находится между такими вот тэгами - то это тоже комментарий. </comment>
2.Основные тэги и их атрибуты
Есть несколько основных тэгов и атрибутов, только с помощью которых уже возможно создать простую,
но вполне приличную web-страничку.
<p> </p> - ( атрибуты : align, title ... )
Эти тэги обрамляют текстовое содержимое страницы. Текстовой абзац. Желательно всегда применять их,
если вы хотите вставить в веб-страничку текст. Хотя конечно, можно и просто написать какой-либо
текст - он и в этом случае тоже будет присутствовать на странице.
Если в HTML тексте встречаются подряд несколько пробелов, то они отображаются как один.
Переходы на новую строку совершаются когда текст в ширину займет всю свободную видимую часть окна.
Если же в начале текста поставить <pre> а в конце </pre> - тогда все абзацы и пробелы
в нем сохраняются и он отображается как уже отредактированный ( preform ).
<html>
<head>
<title>Пример</title>
</head>
<body bgcolor="#AB49C3" text="white">
<p>примерный текст примерный текст примерный текст</p>
<pre><p>С новой строчки
, продолжение этого предложения.</p></pre>
</body>
</html>
Как видно из примера - тэги <p> и </p> находятся между тэгами <pre> и </pre> .
Многие другие тэги могут точно также размещаться между какими-либо тэгами, то есть быть "вложенными" в них.
Если какие-то тэги включают в себя другие, то они зачастую задают свое правило и для них. Довольно
показательным примером являются тэги:
<center> </center> Содержимое выравнивается на середину по горизонтали.
Все компоненты страницы, находящиеся по HTML тексту между этими тэгами - отображаются по центру.
<h1> </h1> , <h2> </h2>, <h3> </h3>,
<h4> </h4>, <h5> </h5>, <h6> </h6>
( атрибуты: align, title ... )
Заключенный между ними текст отобразится текстовым заголовком определенной величины,
соответственно с цифрой после литеры h.
<br> Совершает переход на новую строку ( абзац ). Необязательный в данном случае
закрывающий тэг </br> добавит дополнительный отступ.
<img src=" " > ( alt, tltle, align, width, height, border ... )
Отобразит графическое изображение на странице. Значением src=" " является URL изображения.
Атрибут alt=" " задаст текст, который будет отображен при невозможности отобразить объект,
либо будут выведен при наведении курсором - как подсказка.
<a href=""> </a> (атрибуты: target, title, tabindex ... )
Делает содержимое активизируемым переходом на другой URL - так называемой гиперссылкой.
При нажатии на какой-либо объект из содержимого этих тэгов, отображаемый на web-странице -
в текущее окно загружается новый документ ( к примеру веб-страница ), URL которого задан в качестве
значения href=" "
С помощью атрибута target=" " можно задать окно, в которое будет идти загрузка. Значение
_blank - каждый раз создает новое окно над текущим, _parent - содержимое всего окна полностью,
top - загружает ссылку в окно над текущим, _self - загружает страницу в текущий фрейм.
( Обратите внимание на знак подчеркивания перед значением атрибута.
Его наличие или отсутствие может приводить к различным результатам )
Если же окну задано какое-либо имя, - его можно указать для того, чтобы загрузка шла именно в него.
Атрибут tabindex=" " - должен иметь своим значением число, указывающее очередность придания ссылке
фокуса ввода при табуляции ( при нажатии кнопки Tab )
<hr> ( align, width, size, noshade, color ... )
Отображает горизонтальную линию. Атрибут width=" " - установит ширину линии ( в px или %).
Атрибут size=" " - толщину линии в пикселях. Атрибут-параметр noshade добавленный в тэг - укажет,
что линия будет отображаться не как тень основного фона.
2.1.Основные атрибуты
Описание тех атрибутов, которые подходят к большинству тэгов :
align=" " горизонтально позиционирует элемент.
Значения: left - слева ; center - по центру ; right - справа;
justify - растянет текст, если ему не хватает немного пространства
width=" " и height=" " задают ширину и высоту объекту в px или %.
title=" " текст подписи подсказки при наведении курсором.
border=" " размер обрамляющей границы в px.
Некоторые атрибуты тэгов также распространяют свои правила на другие, заключенные между ними тэги.
<html>
<head></head><body>
<p align="center">ВОТ ВАМ ВСЕМ БОЛЬШОЙ ПРИВЕТ!
<hr width="55%" size="5" noshade>
</p></body></html>
В примере линия отображается по центру, так как тэг, вводящий ее в страницу, находится
между тэгами <p> и </p> , которые имеют атрибут align=" " с присвоенным ему значением center.
В следующем примере и в некоторых последующих используется файл графического изображения,
который должен быть размещен в той же папке, что и web-страничка. В данном случае это файл myphoto
формата jpg .Но если вы желаете использовать файл другого формата и имени - просто смените в
листинге программы myphoto.jpg на имя вашего файла, либо подставьте какой-либо
известный вам URL изображения.
( JPEG - Joint Photographic Expert Group - объединенная экспертная группа по фотографии )
Внимание!!! Файл рисунка может быть сохраненным в формат jpg или jpeg , также имя формата
может быть написанным либо прописными, либо заглавными буквами. В HTML тексте правильным будет
указать точное расширение файла.
<html><head>
<title>Пример обыкновенной странички</title>
</head>
<body bgcolor="gainsboro" link="#0000F0" vlink="#FE00D8">
<a href="http://www.lycos.com">
<h2>Ищите-свищите меня в Lycos</h2></a>
<br></br>
<center><p>Не скучайте...</p>
<img src="myphoto.jpg"></center>
<p>Программа HTML лучше программы КПСС!!!</p>
<p align="right">Наши компьютеры самые большие!!!</p>
<hr size="7" width="75%" noshade>
</body></html>
3.Некоторые тэги специального оформления текста
<i> </i> - отображают текст курсивом
<b> </b> - выделяют текст как полужирный
<u> </u> - подчеркивают текст
<small> </small> - уменьшают размер шрифта на единицу
<big> </big> - увеличивают
<sub> </sub> - выводят текст как текст нижнего индекса
<sup> </sup> - как текст верхнего индекса
<font> </font> ( size, color, face ... )
Зададут заключенному между ними тексту - размер, цвет и шрифт, которым он будет отображаться.
Может быть указано несколько значений шрифтов через запятую. В таком случае при невозможности
отобразить текст первым шрифтом - он будет отображаться последующим. Значением размера шрифта
может быть число ( от 1 ... ), либо значение ( состоящее из знака + или - и числа ) - указывающее
на сколько он соответственно увеличивается или уменьшается относительно исходного.
<font size="2" color="#FE45C3" face="Tahoma,Comic Sans,arial"> </font>
В текст можно вставлять символы с помощью подстановок, выглядящих как : &символьное_обозначение .
Либо можно вставить символ, используя его десятичный код в наборе символов ISO LATIN - &#десятичный_код
С помощью символьных подстановок в текст можно вставлять скобки < и >
( < и > или < и > ) - которые при обычном написании иногда неправильно
интропретируются браузером.
Если в тексте несколько пробелов следуют подряд, то они отображаются браузером как
один пробел. Поэтому для того, чтобы сделать дополнительный пробел существует
подстановка ( ) Еще, к примеру, можно добавить в текст знак копирайт - © или ©
Эти подстановки являются частью расширения языка SGML ( ISO 8879 ), называющегося
XML ( Extensible Markup Language - растяжимый язык разметки ). Стандарт разметки веб-страниц
включающий его называется XHTML. Язык XHTML является своеобразным продолжением HTML.
Первые 32 знака и 127 из набора символов ISO Latin зарезервировано для управляющих кодов.
Коды от 65 и до 90 имеют заглавные буквы латинского алфавита, а от 97 по 122 - строчные.
Всего в наборе ISO Latin 256 кодов ( от 0 до 255 ). Какие символы представляют остальные коды
вы всегда сможете узнать, подставив их в текст вашей страницы.
4.Таблицы
Очень часто для относительного позиционирования всего содержимого страницы используют таблицы.
К примеру, в левой колонке располагается меню, а в правой - информация, которую предоставляет
данная страничка.
<table> </table> ( Атрибуты: width, height, border, align, bgcolor ... ) - эти тэги
создают таблицу. В них заключаются строки/ряды таблицы <tr> </tr> , в которых содержатся
столбцы/колонки ячеек <td> </td> . Соседние ячейки взаимосвязаны между собой. Они могут быть
объединены между собой по горизонтали с помощью атрибута colspan=" " , задающего число объединенных
ячеек, - и по вертикали с помощью аналогичного атрибута rowspan=" " . Возможно также задавать расстояние
между содержимым ячейки и ее границей, используя атрибут cellpadding=" " , и между отдельными ячейками -
атрибутом cellspacing=" " .
Схематичная таблица с одним рядом в котором две колонки:
<table> <tr> <td> </td> <td> </td> </tr> </table>
<html>
<head><title>Таблица</title></head>
<body>
<table cellpadding="15" border="2" bordercolor="#000080">
<tr><td align="center"><h2>привет мир!</h2></td>
<td bgcolor="#CE8F00"><p>МИРУ МИР</p></td></tr>
<tr><td width="250px"><p>Лучше мест в мире нет, чем мой диван и Интернет</p></td><td></td></tr>
<tr><td colspan="2"><img src="myphoto.jpg"></td></tr>
</table>
</body></html>
Как видно из данного примера атрибуты <table> подходят также и для <tr> и для <td>.
Атрибут valign=" " , который может обладать значениями top, middle, bottom вертикально позиционирует
содержимое ячейки ( если он применен к тэгам <td> ).
<div> </div> - эти тэги объединят свое содержимое. Создадут единую компоненту из нескольких
элементов страницы.
К примеру все содержимое <div align="right"> </div> будет прижато к правой стороне
страницы. Ко всем тэгам, находящимся между этими будет применено свойство позиционирования, заданное
с помощью атрибута align="right".
<fieldset> </fieldset> - создадут рамку для своего содержимого.
<legend> </legend> - текст, заключенный между ними, задает рамке сопутствующую подпись.
Тэги должны быть вложенными в <fieldset> </fieldset>
5.Звук и видео
<img dynsrc=" ">
Можно вставлять в страницу видеоролик. Как и файл графического изображения видео файл внедряется с
помощью тэга <img> , но URL задается с помощью атрибута dynsrc=" " . Имеются также специфические
атрибуты. Атрибут loop=" " задает число повторов проигрования. Для бесконечного повтора нужно задать
значение "-1" .
Атрибут loopdelay=" " задаст задержку между повторами в миллисекундах.
Атрибут start=" " значением mouseover укажет, что файл начнет проигрываться при наведении на него мышкой.
<img dynsrc="mybirthday.avi" loop="3">
Также видеоролик можно вставить в страницу тэгами, которыми внедряются какие-либо сторонние объекты
для просмотра с помощью соответствующих им приложений. В этом случае видеовставка будет и выглядеть
как встроенный в страницу объект, а не как один из элементов страницы.
<embed src=" "> </embed>
Понятный атрибут autostart=" " обладает значениями true или false ( автоматический старт - разрешить
или нет )
<bgsound src=" " > ( loop, loopdealy, volume, balance ... ) - придаст странице фоновое музыкальное
сопровождение значением src=" " является URL проигрываемого аудио файла. Более громкое звучание левой
или правой колонки ( баланс ) задается с помощью атрибута balance=" " , значением которого может быть
положительное или отрицательное число. Громкость может устанавливаться различной с помощью volume=" ".
Чем меньшее отрицательное число является значением этого атрибута - тем тише будет громкость. Если
значение 0, то громкость нормальная.
6.1.Фреймы
Возможно создание HTML страницы состоящей из нескольких ресурсов. Для этого можно разбить окно
просмотра браузера на несколько окошек ( на отдельные области с отдельными документами - на фреймы ).
В таком случае вместо основных тэгов <body> </body> следует использовать тэги <frameset>
</frameset> . Атрибут открывающего тэга cols=" " укажет ширину фрейма ( или фреймов ) по горизонтали
( в % или px через запятую ) , а аналогичный атрибут rows=" " - по вертикали. После чего фреймам по порядку
задается содержимое с помощью тэгов <frame src=" " > , где значением src является URL. Атрибут
framespacing=" " задаст значением пикселей промежуток между фреймами ( отступ ).
<frame src=" "> (Атрибуты: name, scrolling, noresize, border, marginwidth, marginheight ... )
Тэги <noframes> </noframes> обрамляют альтернативное содержимое окна, которое будет
отображено, если браузер пользователя не распознает фреймовую структуру документа.
Предусмотрена необходимость встроить фрейм внутрь какой-либо страницы как объект. В этом случае
необходимый ресурс будет отображаться в окне необходимого размера - в нужном месте страницы. Делается это
с помощью тэга <iframe src=" " >
, задающего URL отображаемого документа и закрывающего тэга </iframe>. Размер окна устанавливается
атрибутами width=" " и height=" " .
<iframe src=" " > </iframe> ( Атрибуты: name, scrolling, noresize, border, width, height,
align, marginwidth, marginheight ... )
6.2.Описания атрибутов
Атрибут name=" " - задает имя фрейму для возможности на него сослаться.
Если нужно, чтобы загрузка ссылки шла в какой-либо конкретный фрейм, то его имя упоминается
в атрибуте target=" ".
Атрибут border=" " - значением yes или no ( либо 0 или 1 ) укажет наличие или отсутствие границ у фрейма.
Атрибут scrolling=" " управляет отображением полос прокрутки. Значениями могут быть: yes, no, auto.
Атрибут-параметр noresize обозначит своим наличием невозможность изменять размеры границ.
marginwidth=" " и marginheight=" " ширина и высота отступа содержимого фрейма от полей соответственно.
<html>
<head><title>Фреймы</title></head>
<frameset cols="450,*">
<frame src="http://www.yandex.ru" scrolling="no">
<frame src="http://www.rambler.ru" name="fr2">
<noframes><p>Ваш обозреватель фреймы не поддерживает.
<br>Очень жаль, так как с фреймами эта страница более информативна.</p>
<h2><a href="nofr.html">Вариант странички без фреймов</a></h2>
</noframes>
</frameset></html>
7.Динамично движущееся содержимое страницы
------------------------------------------
<marquee> </marquee> - придают своему содержимому эффект движения. Атрибуты:
behavior=" " - определяет тип движения. Значения могут быть: scroll, slide, alternate.
direction=" " - определяет направление движения. Значения : left, right, up, down.
scrollamount=" " - задает скорость движению числом от 1 до 10.
scrolldelay=" " - задает интервал между шагами.
loop=" " - количество повторов движения ( "-1" - бесконечно )
8.Экстра возможности ссылок на другой URL
<a href=" "> </a> создают ссылку на другой URL. Возможно также активизировать установленную
на компьютере пользователя программу для написания письма с заданным адресом и темой.
Для этого в значение href=" " необходимо подставить конструкцию:
mailto:адрес e-mail?subject=тема письма
<a name=" имя_якоря "> </a> - из своего содержимого создают "якорь" с присвоенным именем -
то есть задают именно данному месту документа URL , состоящий из текущего URL плюс отделяемое знаком #
( хаш или решетка ) присвоенное якорю имя.
Таким образом получаем URL фрагмента документа - фрагментарный URL.
При активизации ссылки на такой адрес браузер не просто загружает страницу, но и отображает в верхней
видимой части окна то место страницы, которому задан якорь. Если якорь находится на текущей странице,
то страница не перезагружается, но в видимой части окно принудительно отображается его содержимое. Атрибут
name=" " задает якорю уникальное имя. Для того, чтобы сослаться на эту ссылку нужно упомянуть это имя в
значении href=" " с впереди стоящим знаком решетки.
<a href="#имя_якоря">
Возможно использовать различные части ( сегменты ) объекта как различающиеся гиперссылки на другие
документы. Карта расположения на документе различных ссылок создается с помощью тэгов:
<map> </map> Между ними описываются области в которых находятся ссылки.
<area href=" " > с атрибутами shape=" " и coords=" "
Атрибут shape определяет тип применяемой системы координат для выделения части объекта. coords - это
соответственные координаты.
shape="rect" coords="x1,y1,x2,y2" - прямоугольник
shape="circle" coords="x,y,d" - круг
shape="poly" coords="x1,y1,x2,y2,x3,y3 ... - ... x1,y1" - многоугольник
С помощью атрибута name=" " , внедренного в открывающий тэг <map> карте расположения ссылок
задается имя. Карта применяется к объекту с помощью присвоения ему атрибута usemap=" " , в котором
указывается имя применяемой карты ( после знака # ).
<html>
<head>
<title>Экстра возможности ссылок</title>
</head>
<body bgcolor="#CCDDCC" link="#0000F0" vlink="#FE00D8">
<a name="hippo"><p>Два варианта ссылки</p></a>
<img src="myphoto.jpg" usemap="#kar1" width="500" height="600">
<map name="kar1">
<area href="http://www.yahoo.com" shape="rect" coords="1,1,150,150">
<area href="http://www.msn.com" shape="rect" coords="350,350,500,600">
</map>
<h2 align="center">
<a href="mailto:billgatesmail@billgates.com.?subject=FUN">Послать e-mail Биллу Гейтсу :-)</a></h2>
<p><a href="#hippo">Вверх в начало страницы </a></p>
</body>
</html>
Создаст из верхнего левого угла рисунка ссылку на www.yahoo.com , а из нижнего правого -
на www.msn.com . При нажатии на текстовую строку "Послать e-mail Биллу Гейтсу" запустится почтовая
программа в режим готовности для написания письма - с уже подставленным адресом billgatesmail@billgates.com
в строчке куда, и темой письма FUN. В самом низу страницы - фрагментарная ссылка наверх.
Если задать ссылке имя с помощью идентификатора id="придуманное_имя" , то объекты страницы находящиеся
между тэгами <label for="придуманное_имя"> </label> будут отождествляться с этой ссылкой,
и при щелчке на них - активизировать ее .
9.1.Некоторые элементы ввода данных и управления
Элементы управления также как и формы ввода данных как правило используются какими-либо скриптовыми
программами, либо они передают информацию указанную в них программам серверной стороны CGI-приложениям
( Common Gateway Interface ).
<textarea> </textarea> - создают текстовую область.
( атрибуты : name, rows, cols, wrap, disabled, readonly, tabindex ... )
<select> </select> ( атрибуты : name, size, multiple, disable, tabindex ... ) - создают
выпадающий список элементы которого создаются находящимися между ними тэгами
<option> </option> ( атрибуты : selected, value ) - содержимым которых является текст элемента
списка.
<input type="text"> - создает поле ввода текста.
<input type="password"> - создает поле ввода пароля.
<isindex prompt="Текст приглашения"> - создает поле ввода данных с текстом описания.
( они обладают атрибутами : name, value, disabled, readonly, maxlength, tabindex, size ... )
<input type="hidden> - создает скрытое поле хранящее информацию.
<input type="file"> - создаст окошко с кнопкой для возможности добавления файла.
<input type="checkbox"> - создает окошко переключателя.
<input type="radio"> - создает один переключатель из группы. Атрибут name=" " , задающий имя -
причислит переключатели с одинаковым именем к одной группе.
( они обладают атрибутами : name, value, checked, disabled, size, readonly ... )
<input type="button"> - создаст кнопку.
<input type="submit"> - создаст кнопку отправки данных.
<input type="reset"> - создаст кнопку очистки информации.
<input type="image" src=" "> - создаст кнопку с фоном из графического изображения.
( их атрибуты : name, value, disabled, size ... )
9.2.Описание атрибутов
value=" " - содержит отображаемый текст либо текст по умолчанию или скрытое значение элемента.
name=" " - собственное имя элемента
checked или selected - активизируют элемент при создании.
disabled - выключит элемент для использования.
readonly - обозначит , что элемент только для чтения ( отображения ).
multiple - покажет сразу несколько значений. Сделает список раскрытым.
maxlength=" " - задаст максимально возможное число символов при вводе.
rows=" " и cols=" " - ширина и высота в количестве символов.
size =" " - задаст размер элементу.
wrap=" " - значением off укажет на то, что все отобразится без переносов, в одну строку. Значение
physical отобразит текстовое содержимое с переходами на новую строку. Если используется значение virtual -
то абзацы видны только внешне, а на сервер отправляется целая строка.
При наличии какого-либо элемента управления в тэгах <label> </label> - все их содержимое при нажатии
будет активизировать этот элемент управления. Либо, если элементу задано идентифицирующее имя атрибутом
id=" " , то содержимое тэгов <label for="идентифицирующее имя"> </label> с этим именем,
указанным в атрибуте for=" " будет активизировать его.
10.Мета данные
Имеются такие тэги, функцией которых является хранение данных. Необходимой информацией для страницы,
которая будет размещена в web, является информация, используемая поисковыми машинами. Вот 2 самых важных
тэга, размещающихся в заголовке страницы ( между <head> и </head> ) :
<meta name="keywords" content=" " >
Между кавычками в content=" " вписываются через запятую слова, характеризующие содержание страницы.
Приблизительно 15-и слов достаточно. Поисковые машины будут выводить результатом страницу на запрос о
поиске каких-либо из этих слов.
<meta name="description" content=" " >
Содержимым content=" " является короткий текст, описывающий страницу. Желательно содержащий не более 200 знаков.
И еще один, несущий в себе, пожелания автора странички по поводу индексирования поисковыми машинами.
Программы-роботы поисковых машин, просматривая информацию на вашей страничке будут иметь их к сведению.
<meta name="robots" content=" ">
Следующие значения content означают :
all - индексировать страницу и ее ссылки
index - индексировать только страницу
noindex - не индексировать страницу
follow - индексировать ссылки
nofollow - не индексировать ссылки
А вот, кстати, и тот тэг, в котором можно оставить информацию об авторе.
<meta name="author" content="Имя автора">
Подобных тэгов много. Хотелось бы только упомянуть о тэге, предоставляющем данные о языке на котором
написана страница.
<meta name="content-language" content="russian">
Здесь языком содержания страницы является русский.
Мета данные могут не только нести в себе информацию, но и изменять содержимое страницы. Следующий тэг
обновляет содержимое страницы перезагружая ее каждые 45 секунд.
<meta http-equiv="refresh" content="45">
А также с его помощью можно сделать редирект (переход ) с одной текущей страницы на другую через
определенный промежуток времени.
<meta http-equiv="refresh" content="20; URL=URL на который совершается переход">
Значением URL является адрес, который загрузится в текущее окно через 20 секунд.
Для того, чтобы превратить web-страничку в полноценный web-документ необходимо в самое начало html
текста подставить конструкцию:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
в которой упоминается основной язык документа ( в нашем случае EN - английский ) и версия языка HTML
использующаяся для создания ( в примере это 4.0 ).W3C означает, что документ оформлен в соответствии
со стандартом всемирного консорциума ( World Wide Web Consortium ).
Все стандарты web и их описания, а также версии HTML, вы можете найти на сайте http://www.w3.org
