Читайте также:
|
С чего начинается HTML
Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2, которая хоть и не отличается новизной, но, в отличие от более поздних версий, является полноценным, широко распространенным стандартом без каких-либо неопределенностей. Как видно из примера, самый короткий html-документ состоит буквально из одной строки.
|
С чего начинается работа
На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тэгом <HTML> и им же закрывается.
Затем, между тэгами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено - вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:
|
Разжевать?
Если приведенный выше пример пояснить схематически, получится следующее:
Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY.
Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).
Тело документа - святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тэгами <BODY> и </BODY>
Одной из наиболее распространенных ошибок было и остается размещение заголовка в теле документа или наоборот, что совершенно недопустимо. Сначала закрываем заголовок </HEAD>, затем открываем тело.
HR
(HTML 2.0) - Horisontal Rule
Вставляет в текст горизонтальную разделительную линию.
Параметры:
WIDTH - определяет длину линии в пикселах или процентах от ширины окна браузера.
SIZE - определяет толщину линии в пикселах.
ALIGN - определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:
left - выравнивание по левому краю документа.
right - выравнивание по правому краю документа.
center - выравнивание по центру документа (используется по умолчанию).
NOSHADE - определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.
COLOR - определяет цвет линии. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Работает только в Internet Explorer, поэтому лучше его не использовать.
|
H1,H2,...H6
(HTML 2.0) - Headers
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы.
Параметры:
ALIGN - определяет способ выравнивания заголовка по горизонтали.
Возможные значения: left, right, center.
|
I
(HTML 2.0) - Italic
Текст, заключенный между начальным и конечным тэгами, будет выделен курсивом.
|
IMG
(HTML 2.0) - Image
Используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG, но до тех пор пока они не устареют от применения PNG лучше воздержаться.
Элемент IMG не имеет конечного тэга.
Параметры:
SRC - обязательный параметр. Указывает адрес (URL) файла с изображением.
HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).
HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
ALIGN - обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
NAME - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.
BORDER - определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.
LOWSRC - указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.
USEMAP - применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты - "map1", то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном параметре трактуются браузером как разные.
ISMAP - определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный параметр является флагом и не требует присвоения значения.
|
|
|
|
Примечания (особо важно):
| Золотое правило web-мастера - всегда явно задавать размеры картинки в параметрах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это смотрится просто отвратительно. |
|
| Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT. |
|
| ВСЕГДА сразу после <IMG...> ставьте <BR>!!! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: <img...><br>. Увижу что сделали иначе - лично пристрелю! |
|
| Для завершения обтекания изображения текстом используйте параметр CLEAR элемента BR. |
|
| Значения top и texttop параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать. |
|
| Указывайте значения параметров HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю. |
|
| По возможности старайтесь не создавать навигационных карт, обрабатываемых на сервере. Иначе говоря, вместо параметра ISMAP используйте параметр USEMAP и локальные карты. |
INPUT
(HTML 2.0) - Input
Элемент INPUT создает поле формы (кнопку, поле ввода, чекбокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тэга. Элемент INPUT должен располагаться внутри элемента FORM.
Параметры:
NAME - определяет имя, используемое при передаче содержания данной формы на сервер. Этот параметр необходим для большинства типов (параметр TYPE - cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.
TYPE - определяет тип поля для ввода данных. По умолчанию - это "text". Возможные значения:
text - создает поле ввода под одну строку текста. Как правило используется совместно с параметрами SIZE и MAXLENGTH.
textarea - создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA
file - дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с параметром ACCEPT.
password - создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз.
checkbox - создает поле ввода для атрибутов типа Boolean ("да"/"нет") или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей CHECKBOX, которые могут иметь одинаковые имена. Каждое выбранное поле CHECKBOX создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле типа CHECKBOX обязательно должно иметь параметры NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано.
radio - создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей CHECKBOX, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button).
submit - создает кнопку, при нажатии которой заполненная форма посылается на сервер. Параметр VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если параметр NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для параметра SUBMIT, в противном случае пара не добавляется.
image - создает графический образ для кнопки, инициализирующей передачу данных на сервер. Местонахождение графического изображения можно задать с помощью параметра SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля IMAGE суффиксов ".x" в случае абсциссы, и ".y" в случае ординаты.
reset - создает кнопку, перезагружающую поля формы к их первоначальным значениям. Надпись на кнопке может быть изменена с помощью параметра VALUE. По умолчанию надпись на кнопке зависит от браузера.
hidden - поля этого типа не отображаются на экране монитора, что позволяет разместить "секретную" информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер.
button - позволяет создать кнопку в HTML документе, что добавляет функции при использовании Visual Basic Script или Java Script. Параметр NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр VALUE позволяет задать текст, который будет отображен на кнопке в документе.
ACCEPT - конкретизирует тип файла. Используется только совместно с пара-метром TYPE="file". Значение задается в виде MIME.
VALUE - задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, имеющих значение вида Boolean (отмеченный или неотмеченный), таких как checkbox или radio, будет возвращено значение, заданное в параметре VALUE.
CHECKED - указывает, что поля типов checkbox и/или radio (см. выше параметр TYPE) активизированы.
SIZE - определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE="24".
MAXLENGTH - определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре SIZE, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено.
SRC - задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных. Используется совместно с параметром TYPE="image".
ALIGN - определяет способ вертикального выравнивания для изображений. Используется совместно с параметром TYPE="image". Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.
|
|
KBD
(HTML 2.0) - Keyboard
Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило текст, заключенный между начальным и конечным тэгами, выделяется жирным моноширинным шрифтом.
|
LI
(HTML 2.0) - List Item
Создает пункт в списке. Располагается внутри элементов OL или UL.
Параметры:
VALUE - изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
|
LINK
(HTML 2.0) - Link
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тэга. В заголовке может содержаться несколько элементов LINK.
Параметры:
HREF - определяет URL объекта.
REL - определяет тип взаимосвязи текущего документа с объектом, определенным параметром HREF. Возможные значения:
stylesheet - указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в параметре HREF адреса и применит его к текущему документу (см. также элемент STYLE)
home - указывает на заглавную страницу вашего сайта
toc, contents - указывают на файл, содержащий оглавление данного документа.
index - указывает на файл, содержащий информацию для индексного поиска по текущему документу.
glossary - указывает на файл, содержащий перечень терминов, относящихся к текущему документу.
copyright - указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.
up, parent - указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).
child - указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).
next - указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).
previous - указывает на предыдущую страницу в последовательности документов.
last, end - указывает на последнюю страницу в последовательности документов.
first - указывает на первую страницу в последовательности документов.
help - указывает на страницу с подсказкой (напр. по навигации по вашему сайту).
TYPE - определяет MIME-тип для объекта, указанного в параметре HREF.
|
|
Примечания:
|
| Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта - эта информация интересна только индексирующим роботам поисковых систем. |
Списки
Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
Элементы:
|
MAP
(HTML 3.2) - Map
Создает новую навигационную карту. Между начальным и конечным тэгами содержит один или несколько элементов AREA, определяющих навигационные области карты.
Параметры:
NAME - единственный и обязательный параметр. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью параметра USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
|
META
(HTML 2.0) - Meta
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тэга.
Параметры:
NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.
HTTP-EQUIV - определяет имя мета-записи. Практически аналогичен параметру NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.
CONTENT - присваивает значение мета-записи, определенной в параметре NAME (или HTTP-EQUIV).
|
================================
Таблица MIME-типов
ПРИЛОЖЕНИЕ 3. Таблица MIME-типов
MIME Type Extension animation/narrative nmlapplication/activemessageapplication/andrew-insetapplication/applefileapplication/atomicmailapplication/dca-rftapplication/dec-dxapplication/dsptype tspapplication/fastman lccapplication/font-tdpfr pfrapplication/futuresplash splapplication/mac-binhex40 hqxapplication/mac-compactpro cptapplication/macwriteiiapplication/mspowerpoint pot pps ppt ppzapplication/mswordapplication/news-message-idapplication/news-transmissionapplication/octet-stream bin class dms exe seaapplication/oda odaapplication/pdf pdfapplication/postscript ai eps psapplication/remote-printingapplication/rtf rtfapplication/slateapplication/softvision sviapplication/witaapplication/wordperfect5.1application/x-authorware-bin aabapplication/x-authorware-map aamapplication/x-authorware-seg aasapplication/x-bcpio bcpioapplication/x-bzip2 bz2application/x-calquick cqkapplication/x-cdlink vcdapplication/x-cocoa ccoapplication/x-compress Zapplication/x-cpio cpioapplication/x-csh cshapplication/x-director dcr dir dxrapplication/x-dvi dviapplication/x-excel xlsapplication/x-expandedbook ebkapplication/x-gtar gtarapplication/x-gzip gzapplication/x-hdf hdfapplication/x-httpd-cgi cgiapplication/x-javascript js ls mochaapplication/x-koan skd skm skp sktapplication/x-latex latexapplication/x-lzh lha lzhapplication/x-mapserver mpsapplication/x-mascot mctapplication/x-mif mifapplication/x-netcdf cdf ncapplication/x-ns-proxy-auto-config pacapplication/x-pixelscooter mppapplication/x-pointplus cssapplication/x-sh shapplication/x-shar sharapplication/x-shockwave-flash swfapplication/x-sprite spr spriteapplication/x-spt sptapplication/x-stuffit sitapplication/x-sv4cpio sv4cpioapplication/x-sv4crc sv4crcapplication/x-tar tar tgzapplication/x-tcl tclapplication/x-tex texapplication/x-texinfo texi texinfoapplication/x-troff roff t trapplication/x-troff-man manapplication/x-troff-me meapplication/x-troff-ms msapplication/x-ustar ustarapplication/x-wais-source srcapplication/x-xdma xdm xdmaapplication/zip zipaudio/basic au sndaudio/echospeech esaudio/midi kar mid midiaudio/mpeg mp2 mp3 mpgaaudio/tsplayer tsiaudio/voxware voxaudio/x-aiff aif aifc aiffaudio/x-bamba abaaudio/x-chacha chaaudio/x-mio mioaudio/x-pn-realaudio ra ram rmaudio/x-pn-realaudio-plugin rpmaudio/x-twinvq vqf vqlaudio/x-twinvq-plugin vqeaudio/x-wav wavchemical/x-csml csmchemical/x-embl-dl-nucleotide embchemical/x-gaussian-input gauchemical/x-mdl-molfile molchemical/x-mopac-input mopchemical/x-pdb pdbchemical/x-xyz xyzi-world/i-vrml ivrimage/fif fifimage/gif gifimage/ief iefimage/jpeg jpe jpeg jpgimage/png pngimage/tiff tif tiffimage/vasa mcfimage/x-cmu-raster rasimage/x-freehand fh fh4 fh5 fh7 fhcimage/x-jps jpsimage/x-portable-anymap pnmimage/x-portable-bitmap pbmimage/x-portable-graymap pgmimage/x-portable-pixmap ppmimage/x-rgb rgbimage/x-xbitmap xbmimage/x-xpixmap xpmimage/x-xres swximage/x-xwindowdump xwdmessage/external-bodymessage/newsmessage/partialmessage/rfc822multipart/alternativemultipart/appledoublemultipart/digestmultipart/mixedmultipart/parallelplugin/listenup ptlkplugin/wanimate waf wantext/html htm htmltext/plain txttext/richtext rtxtext/tab-separated-values tsvtext/x-setext etxtext/x-sgml sgm sgmltext/x-speech talktext/x-vcard vcfvideo/mpeg mpe mpeg mpgvideo/quicktime mov qtvideo/vnd.vivo viv vivovideo/x-bamba vbavideo/x-msvideo avivideo/x-sgi-movie movievideo/x-tango tgovideo/x-vif vifworkbook/formulaone vtsworld/x-panoramix panx-conference/x-cooltalk icex-world/x-d96 d96 musx-world/x-svr svrx-world/x-vrml vrml wrl x-world/x-vrt vrt
Дата добавления: 2015-11-16; просмотров: 59 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Заголовок HTML-документа | | | Примеры таблиц |