Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Создание структуры html документа






МЕТОДИЧЕСКИЕ УКАЗАНИЯ

 

по дисциплине

«Информационные системы в профессиональной деятельности»

 

на тему:

«ЯЗЫК HTML»

 

Преподаватель:

Никульникова М. А.

 

 

г. Краснодар

2012 г.


Создание структуры html документа

< HTML> … < /HTML> говорит браузеру, что далее будет текст, написанный на HTML-языке. Атрибуты тега < HTML>:

dir – определяет направление символов: ltr — слева направо; rtl — справа налево

lang – определяет язык отображаемого документа

title – задает всплывающую подсказку.

version – версия HTML, под которую создан документ.

xmlns – Объявляет пространство имен для тегов в HTML документе

xml: lang – идентификатор языка

< HEAD> … < /HEAD> тег-контейнер, заголовок документа, содержит информацию о текущем документе: название документа, инструкции браузеру по отображению страницы, ключевые слова и описание страницы для поисковых машин, подключения внешних файлов таблиц стилей и скриптов, описания внутренних таблиц стилей и скриптов. Размещается внутри тега < HTML>. Атрибуты тега < HEAD>:

dir – определяет направление символов: ltr — слева направо; rtl — справа налево

lang – определяет язык отображаемого документа

profile – указывает расположение профилей метаданных, разделенных пробелами

 

< TITLE> … < /TITLE> – это заголовок окна страницы, который отображается в браузере. Размещается внутри тега < HEAD>. Содержимое тега отображается: в заголовке окна; в результатах запроса в поисковых системах; в названии закладки, при добавлении страницы в избранное. Атрибуты тега < TITLE >:

dir – определяет направление символов: ltr — слева направо; rtl — справа налево

lang – определяет используемый язык

< LINK> одиночный тег, необходим для подключения внешних файлов. Размещается внутри тега < HEAD>. Например, если вы будете использовать каскадную таблицу стилей, то ее удобнее хранить в отдельном файле и подключать этот файл ко всем страницам сайта. У тега < LINK > несколько атрибутов:

charset – определяет набор символов, используемый браузером для отображения страницы, на которую оказывает ссылка

class – определяет имя используемого класса

dir – определяет направление символов: ltr — слева направо; rtl — справа налево

disabled – флаг. Определяет элемент как неактивный.

href – указывает URL-адрес подключаемого файла.

hreflang – определяет используемый язык в документе, на который указывает ссылка

id – уникальный идентификатор

lang – определяет язык отображаемого документа

media – усторойство, для которого применяется стиль оформления: all — все устройства; braille — устройства для слепых на основе системы Брайля; screen — экран (по умолчанию); print — устройство печати; projection — проектор; speech — синтезатор голоса;

onclick – щелчок на элементе;

ondblclick – двойной щелчок на элементе;

onkeydown – нажатие клавиши, когда элемент имеет фокус;

onkeypress – нажатие и освобождении клавиши, когда элемент имеет фокус;

onkeyup о – вобождение ранее нажатой клавиши, когда элемент имеет фокус;

onmousedown - нажатие кнопки мыши, когда элемент имеет фокус

onmousemove – движение указателя мыши, когда элемент имеет фокус

onmouseout – смещение указателя мыши с элемента

onmouseover – помещение указателя мыши на элемент

onmouseup – освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус

rel – указывает на тип отношения данного документа к внешнему: stylesheet — указывает на файл, содержащий таблицу стилей (CSS) для текущего документа; home — указывает на заглавную страницу сайта; toc, contents — указывают на файл, содержащий оглавление документа; index — указывает на файл, содержащий информацию для индексного поиска по текущему документу; glossary — указывает на файл, содержащий перечень терминов, относящихся к текущему документу; copyright — указывает на страницу сайта, в которой говорится об авторских правах; child — указывает на «дочернюю» страницу; next — указывает на следующую страницу в последовательности документов; previous — указывает на предыдущую страницу в последовательности документов; last, end — указывает на последнюю страницу в последовательности документов; first — указывает на первую страницу в последовательности документов; help — указывает на страницу с подсказкой

rev – определяем обратную связь целевого документа к текущему

style – задает встроенную таблицу стилей

target – имя окна или фрейма. В качестве аргумента используется имя окна или фрейма. Зарезервированные имена: _blank — откроет документ в новом окне; _parent — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне; _ top — отменяет все фреймы и загружает страницу в полном окне браузера, если фремов нет, откроет в текущем окне; _self — откроет в текущем окне (по умолчанию)

title – всплывающая подсказка

type – указывает тип и параметры присоединенной таблицы стилей, т.е. MIME-тип объекта, указанного в параметре href.

Пример. Подключаем файл стилей < link href=" css/main.css" rel=" stylesheet" type=" text/css" media=" screen" />

 

< META> содержит метаданные – техническое описание документа в виде пар «имя-значение». Размещается внутри тега < HEAD>. Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств. Атрибуты тега < META>:

content – устанавливает значение параметра, заданного с помощью name или http-equiv

dir – определяет направление символов: ltr — слева направо; rtl — справа налево

http-equiv – конвертируется в формат заголовка ответа HTTP

lang – определяет язык отображаемого документа

name – имя метатега

scheme – название схемы для интерпретации значения свойства

Пример. Указание кодировки страницы для русского текста в кодировке Windows < meta http-equiv=" Content-Type" content=" text/html; charset=UTF-8" >
Пример. Указание ключевых слов страницы (используется при оптимизации страниц) < meta http-equiv=" KEYWORDS" content=" тег, структура html, заголовок страницы" >
Пример. Указание краткого описания страницы: < meta http-equiv=" DESCRIPTION" content=" Описание структура html и элементов заголовка" >

< SCRIPT> … < /SCRIPT> используются для подключения внешних файлов скриптов. Это позволяет оптимизировать код страниц. Размещается внутри тега < HEAD> или < BODY>. Например, если вы используете функции java script для большинства своих страниц, то поместив эти функции на отдельную страницу - *.js, с помощью тега < SCRIPT > можно указать путь к этой страницы. Это повышает читабельность кода и ускоряет загрузку страниц. У этого тега несколько атрибутов:

harset – набор символов ресурса

defer – задерживает выполнение скрипта до полной загрузки страницы

language – определяет язык скрипта: JavaScript — язык программирования JavaScript; JScript — разновидность языка JavaScript разработанная компанией Microsoft; VBS, VBScript — язык программирования VBScript основанный на Visual Basic

runat – runat=" server" показывает, что скрипт будет работать на сервере.

src – URL файла со скриптом

type – MIME-тип, определяющий язык скрипта: text/javascript — язык программирования JavaScript; text/vbscript — язык программирования VBScript

Пример. Подключаем скрипт Javascript < script type=" text/javascript" > <! -- Now = new Date(); document.write(" Страница загружена в" + Now.getHours() + ": " + Now.getMinutes() + ": " + Now.getSeconds()); //--> < /script> При такой записи на странице будет выводится время загрузки страницы, которое определяется кодом на Javascript.

< BASE> указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы. Тег < base> рекомендуется использовать для уменьшения объема страниц, за счет того, что не нужно писать полные адреса в ссылках, изображениях, скриптах и объектах. Так же лучше страховать правильность адресов этим тегов на проектах с большой вложенностью папок. Размещается внутри тега < HEAD>. У этого тега несколько атрибутов:

href – задает базовый адрес документа

target – имя окна или фрейма, куда будут открываться документы по ссылкам с текущей страницы. Зарезервированные имена: _blank — откроет документ в новом окне; _parent — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне; _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фремов нет, откроет в текущем окне; _self — откроет в текущем окне (по умолчанию).

Пример. Задаем базовый адрес для документа: < head> < base href=" https://mysite.com/" /> < /head> При такой записи адреса на сайте у ссылки будут таким: https://mysite.com/test.html
Пример. Открывать все ссылки в новом окне < head> < base target=" _blank" /> < /head>

< BODY> … < /BODY> определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы. Заключается внутри тега < HTML>.

alink – задает цвет активной ссылки (в момент нажатия).

background – задает URL фонового рисунка.

bgcolor – задает цвет фона страницы

bgproperties – при установке bgproperties=" fixed" фон фиксируется и не прокручивается вместе со страницей

bottommargin – определяет отступ от нижнего края окна браузера.

class – определяет имя используемого класса

dir – задает направление: ltr — направление слева направо (по умолчанию); rtl — направление справа налево

id – уникальный идентификатор

lang – определяет язык отображаемого документа

leftmargin – определяет отступ от левого края окна браузера.

link – задает цвет ссылок.

onblur – потеря фокуса элементом.

onclick – щелчок на элементе

ondblclick – двойной щелчок на элементе

onerror – ошибка сценария на странице.

onfocus – получение фокуса элементом.

onkeydown – нажатие клавиши, когда элемент имеет фокус

onkeypress – нажатие и освобождении клавиши, когда элемент имеет фокус

onkeyup – освобождение ранее нажатой клавиши, когда элемент имеет фокус

onload – окончание загрузки страницы

onmousedown – нажатие кнопки мыши, когда элемент имеет фокус

onmousemove – движение указателя мыши, когда элемент имеет фокус

onmouseout – смещение указателя мыши с элемента

onmouseover – помещение указателя мыши на элемент

onmouseup – освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус

onresize – изменение пользователем размера окна.

onunload – выгрузка браузером текущего документа из окна или фрейма

rightmargin – определяет отступ от правого края окна браузера.

scroll – управляет отображением полос прокрутки: yes — отображает полосы прокрутки (по умолчанию); no — запрещает показ полос прокрутки

style – задает встроенную таблицу стилей

text – задает цвет текста. Значение по умолчанию #000000.

title – добавляет всплывающую подсказку

topmargin – определяет отступ от верхнего края окна браузера.

vlink – задает цвет посещенных ссылок.

 

Пример. Задаем фон картинкой fon.jpg, задаем цвет фона #302020, задаем цвет текста #EEE, задаем цвет ссылок на странице #44C1DC, задаем цвет уже посещенных ссылок #721CA4 < html> < head> ... < /head> < body background=" fon.jpg" bgcolor=" #302020" text=" #EEE" link=" #44C1DC" vlink=" #721CA4" > ... тело документа. ... < /body> < /html>





© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.