36286

HTML (HyperText Markup Language). Структура гипертекстового документа

Доклад

Информатика, кибернетика и программирование

Средствами HTML задаются синтаксис и размещение специальных встроенных указаний в соответствии с которыми браузер отображает содержимое документа текст графика мультимедиа гиперссылки. DHTML Dynmic HyperText Mrkup Lnguge : Клиентские сценарииJvScript и VBScript Серверные сценарии SP и PHP Технологии Jv и CGI плагин plugin приложения Другие средства Структура гипертекстового документа html hed title Заголовок HTML документа title hed body Тело HTML документа body...

Русский

2013-09-21

181 KB

4 чел.

  •  HTML (HyperText Markup Language) — язык разметки гипертекста — стандартный обобщенный язык разметки. Средствами HTML задаются синтаксис и размещение специальных встроенных указаний, в соответствии с которыми браузер отображает содержимое документа (текст, графика, мультимедиа, гиперссылки).
  •  DHTML (Dynamic HyperText Markup Language) :
    •  Клиентские сценарии(JavaScript и VBScript)
    •  Серверные сценарии ASP и PHP
    •  Технологии Java и CGI, плагин (plug-in)  - приложения
    •  Другие средства

Структура гипертекстового документа

<html>

---------------------

<head>

<title> Заголовок HTML документа </title>

</head>

---------------------

<body>

Тело HTML документа

</body>

---------------------

</html>

  •  Алфавит

Английские буквы прописные и строчные не различаются

  •  Комментарии

<!-- 

Это многострочный

комментарий  

-->

Текст, заключенный между такими скобками, браузером не воспринимается и на экране не отображается.

  •  Использование  кавычек

<HR      ALIGN=CENTER >

Значения атрибутов указываются в двойных кавычках (“) или апострофах (‘), размещенных в рамках одной строки.  Допускается вложение кавычек в апострофы и наоборот.

  •  Использование пробелов, знаков табуляции и перевода строки

Любая последовательность пробелов, символов табуляции и пустых строк эквивалентна единственному пробелу в файле HTML.

Теги управления

Жирный шрифт (bold):                       <b>текст</b>               <strong>текст</strong>

Курсив (italic):                                       <i>текст</i>        <em>текст</em>

 Подчеркнутый шрифт (underline):     <u>текст</u>

 Перечеркнутый шрифт (strike):         <strike>текст</strike>

Надстрочный индекс (Superscript):    <sup>текст</sup>  Пример:   23=8

Подстрочный индекс (Subscript):       <sub>текст</sub>  Пример:   C2H5OH

Имитация стиля печатной машинк (Teletype): <tt>текст</tt> Пример:  Teletype

Шрифт для вывода цитат (citation):  <cite>текст</cite> Пример:  основной текст цитата

Шрифт для вывода исходного текста программ: <code>текст</code>            <samp>текст</samp>
   Отображается моноширинным шрифтом Courier.

Шрифт для выделения переменной в программе: <var>текст</var>

Шрифт для имитации ввода с клавиатуры: <kbd>текст</kbd>

     Отображается моноширинным шрифтом Courier.

Заголовки   

     <h1>Самый большой заголовок</h1>
     ...
   
<h5>Самый маленький заголовок</h5>

Задание базового шрифта: <BASEFONT> 

  •   Не применяется к заголовкам.
    •  Если базовый шрифт не задан по умолчанию используется шрифт с размером 3

Атрибуты элемента <BASEFONT>
color=(цвет). size=(целое число от 1 до 7).  face=(список разделенных        запятыми названий шрифтов).
Увеличение размера шрифта: <big>текст</big>
Уменьшение размера шрифта: <small>текст</small>
Управление размером шрифта с помощью тэга <FONT>:

 Размер шрифта меняется с помощью атрибута SIZE тэга <FONT>
 <
font size="1">size=1</font>
 В атрибуте SIZE можно указывать размер шрифта относительно текущего   размера SIZE

 <font size="+1">size +1</font>
Управление цветом шрифта с помощью тэга <FONT>:

 <FONT COLOR="#FF0000">FONT COLOR="#FF0000"</FONT>
 <FONT COLOR="red">FONT COLOR="red"</FONT>

Задание шрифтов с помощью тэга <FONT>:

 <font face="имя шрифта"></font>
  Задает имя шрифта. Можно задавать несколько шрифтов через запятую,   в этом случае используется первый найденный шрифт.

Фреймы

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

Загрузочный файл – для задания размеров, количество и атрибутов фреймов.

Тэг  <FRAMESET></FRAMESET>

Атрибуты тэга <FRAMESET>:

rows="разделенный запятыми список пикселов, процентов и относительных длин"  -Расположение горизонтальных фреймов.

cols="разделенный запятыми список пикселов, процентов и относительных длин".

Расположение вертикальных фреймов.

Достоинства:

  •  фреймы одновременно отображают различную информацию в пределах одного окна;
  •  используя фреймы, можно постоянно отображать какую-нибудь информацию (например логотип), не включая ее в каждую страницу сайта;
  •  можно гибко построить навигацию по сайту.

Недостатки:

  •  доступная область Вэб-страницы существенно сужается;
  •  при создании фрейма правильно выбрать его размер часто бывает затруднительно. Таким образом, пользователь должен постоянно пролистывать фрейм при помощи полос прокрутки, что может неудобно пользователю;
  •  при низком разрешении экрана монитора объем видимой информации значительно уменьшается;
  •  ну и самый неприятный недостаток - многие поисковые системы и каталоги отказываются регистрировать страницы, использующие фреймы.
  •  Еще одним из недостатков фреймов является тот факт, что некоторые браузеры не умеют обрабатывать фреймы. При этом пользователь видит перед собой пустой экран. Для того, чтобы не вводить пользователя в заблуждение служит тэг<NOFRAMES>. Текст, помещенный между открывающим и закрывающим тэгом, отображается в случае невозможности отображения фрейма.

ПРИМЕРЫ ЗАДАНИЯ РАЗМЕРОВ ФРЕЙМОВ

<FRAMESET  rows="30%,70%"> …</FRAMESET>

  - в процентах от окна браузера

<FRAMESET  cols="30%,30%,*"> …</FRAMESET>

  - можно не указывать размеры одного фрейма

<FRAMESET  rows=“100,400,*"> …</FRAMESET>

  - в пикселях

< FRAMESET  cols="*,3*,7*">…</FRAMESET>

  - в относительных частях

Атрибуты тэга <FRAME>:

src="URL"

Описывает URL документа, который будет отображен внутри данного фрейма.

name="frame_name"

Имя фрейма, которое должно обязательно начинаться с символа.

marginwidth="value"

Ширина боковых разделительных полос между фреймами в пикселях.

marginheight="value"

Ширина верхних и нижних разделительных полос между фреймами в пикселях.

scrolling="yes", "no", "auto"

Наличие полос прокрутки у фреймов где:

  •  yes - полосы прокрутки присутствуют.
  •  no - полосы прокрутки отсутствуют.
  •  auto - полосы прокрутки присутствуют только при их необходимости (по умолчанию).

noresize

Отмена возможности изменения размеров фреймов.

Плавающие фреймы

Тэг <IFRAME>.

Плавающим называется фрейм, представляющий собой часть вэб-страницы и не требующий построения отдельной страницы с описанием фреймов.  

Атрибут NAME служит для задания имени плавающего фрейма.

Атрибутами WIDTH и HEIGHT можно задавать размеры плавающего фрейма

<body>

<iframe src="lsn017.html" name="frame1" width="350" height="300" align="left">

</iframe>

<h1>Пример работы с фреймами</h1>

..

<h1>Пример работы с фреймами</h1> </frameset>

ССЫЛКИ (гиперссылки)

Атрибуты тэга <A>:

href="URL"

URL-адрес объекта ссылки.

name="имя ссылки"

Имя ссылки в документе. Используется для организации ссылок внутри одного и того же документа HTML

target

Имя окна, в которое должен быть загружен документ. Может принимать значения:

  •  _blank -документ будет загружен в новое окно браузера;
  •  _parent -документ будет загружен в окно, которое является родительским по отношению к текущему;
  •  _self -документ будет загружен в то же самое окно, где расположена ссылка;
  •  _top -при использовании фреймов, документ займет все окно браузера

title

Название, которое появится внизу браузера при наведении мышью на ссылку.

пример

<a href="folder1/file.htm">ссылка на folder1/file.htm</a>

Ссылка на документ file.htm, находящийся в папке folder2 из документа index.htm

<a href="../index.htm">ссылка на index.htm</a>

Ссылка из документа file.htm, находящегося в папке folder1 на документ index.htm

<a href="folder2/file.htm" target="_blank">ссылка на folder2/file.htm</a>

Ссылка откроется в новом окне браузера

<a href="../folder2/file.htm">ссылка на folder2/file.htm из folder1/file.htm</a>

Ссылка на документ file.htm, находящийся в папке folder2 из документа file.htm, находящегося в папке folder1

Ссылки в пределах одного документа

<!-- оглавление -->
<a href="#chapter1">Первая глава</a>
<a href="#chapter1">Вторая глава</a>
<a href="#chapter1">Третья глава</a>
<!-- текст -->
<p><a name="chapter1">Первая глава</a>
. . .
Содержимое первой главы
. . .
<p><a name="chapter2">Вторая глава</a>
. . .
Содержимое второй главы
. . .
<p><a name="chapter3">Третья глава</a>
. . .
Содержимое третьей главы

Внешние ссылки

<a href="протокол://путь/:порт>

Значения параметра атрибута href

href="http://..."

Ссылка на объект, который будет передаваться с использованием протокола HTTP. Может быть любым произвольным объектом.

href="ftp://..."

Ссылка на FTP-сервер.

href="mailto:..."

Ссылка на адрес электронной почты. При выборе этой ссылки, загружается почтовая программа.

href="news:..."

Ссылка на электронную конференцию.

href="nntp://..."

Ссылка на сервер электронной конференции.

href="telnet://..."

Активизация сеанса удаленного доступа к узлу сети Internet с использованием протокола TELNET.

href="gopher://..."

Ссылка на сервер Gopher.

Цвет текста гиперссылок

  •  LINK служит для выделения гиперссылок, которые еще не посещались пользователем.
  •  VLINK - уже посещенные ссылки.
  •  ALINK - выделяет активную гиперссылку.

Карта ссылок документа HTML

Карта ссылок - это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку.
Прямоугольная зона (rect) - задаются координаты двух точек - левого верхнего угла, правого нижнего угла.

Многоугольник (poly)  - задаются координаты каждой точки многоугольника.

Круг (circle) - задается координата центра круга и его радиус.


<MAP> - для ввода данных. 

<AREA> - определяет зоны изображения карты ссылок.

Атрибут SHAPE описывает форму зоны карты ссылок.

Атрибут COORDS назначает координаты конкретной зоны.

Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.

Если при вводе координат произошла ошибка, то браузер воспринимает область пересечения как часть той зоны, которая описана первой. Если же введенные координаты выходят за границы изображения, то они игнорируются браузером.

Формы

HTML - формы предназначены для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером, например, регистрацию пользователя на сервере, или выбор нужного документа из представленного списка, или отправку информации по электронной почте и др. Формы поддерживаются всеми популярными браузерами.

<form nethod="post"

action="mailto:webwood@chat.ru"

enctype="text/plain">

<input type="submit" value="Отправить почту">

<input type="reset" value="Очистить форму">

<textarea name="email" rows=5 cols=60>

</textarea>

</form>

Синтаксис

<FORM ACTION="URL" METHOD=метод_передачи ENCTYPE=MIME-тип>

содержание формы

</FORM>

Параметры

  •  action – Адрес программы или документа, которые обрабатывает данные формы(является единственным обязательным).
  •  enctype - MIME-тип информации формы ( определяет формат кодирования данных при передачи их от браузера к серверу).  Возможны два значения этого атрибута: 
    application/x-www-form-urlencoded (по умолчанию) и multipart/form-data
  •  method - Метод протокола HTTP.  Может принимать два значения: GET (по умолчанию) и POST.
    •  При использовании метода GET данные формы передаются в составе URL-запроса, к которому присоединяется после символа "?" в виде совокупности пар переменная = значение, разделенных символом "&". В этом случае первая сторока запроса может иметь следующий вид:

http://yandex.ru/yandsearch?text=учебник+HTML

  •  При использовании метода POST данные формы пересылаются Web-серверу в теле запроса, после чего передаются сервером в  программу через стандартный ввод.
  •  name - Имя формы.
  •  target - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.


 

А также другие работы, которые могут Вас заинтересовать

58059. Шопен – душа фортепіано 74 KB
  Мета уроку: Навчальна: ознайомити учнів із творчістю та життєвим шляхом Ф.Шопена, провідними стильовими засадами його композиторського почерку; працювати над диханням, чистотою інтонування, співом у єдиній вокальній позиції.
58060. Вражаючі здібності «фортепіанного поета» Фридеріка Францішека Шопена 89.5 KB
  МЕТА: поглибити знання дітей про творчість Фридеріка Шопена; вчити учнів глибоко емоційно сприймати інструментальну фортепіанну музику розуміти та інтерпретувати її зміст; дати визначення понять ноктюрн і скерцо; збагатити уявлення дітей про життєвий зміст музики розуміння її...
58061. Урок-презентація: Симфонія вогняних років 64 KB
  Учитель музики: Доброго дня діти. Сьогодні ми міркуємо про музику яка народжувалась і звучала в роки Великої Вітчизняної війни подивимось як боровся наш народ з ворогом у блокадному Ленінграді і як ця боротьба показана Шостаковичем через музику в симфонії на екрані слайд...
58062. Стихійні лиха 75.5 KB
  Мета: продовжити ознайомлювати учнів із небезпеками природного походження, розглянути приклади стихійних небезпек, скласти алгоритми поведінки в надзвичайних ситуаціях (сильного вітру і грози та в разі потрапляння в зону підтоплення); розвивати логічне мислення; виховувати бережливе ставлення до власного здоровя та життя.
58063. Прикладне мистецтво 293 KB
  Обладнання для учнів: естетичний словник з образотворчого мистецтва ручка. Види діяльності учнів: пізнавальна сприймання мистецтва. Вид уроку: бесіда з образотворчого мистецтва.
58064. Психічна і духовна складові здоров’я 96.5 KB
  11 Конфлікти і здоровя. Види конфліктів. Вплив конфліктів на здоровя. 1 МЕТА: надати учням поняття про конфлікти їх види вплив конфліктів на здоровя; формувати в учнів вміння адекватного оцінювання життєвих ситуацій; вміння обирати шляхи вирішення спільних проблем; вчити учнів запобігати конфліктних ситуацій та при їх виникненні вміти розвязувати конфліктні ситуації; розвивати в учнів розуміння почуттів і потреб інших людей; виховувати в учнів толерантне ставлення до чужих поглядів і переконань товариські стосунки.
58065. Формування здорового способу життя 2.02 MB
  Мета: сформувати поняття про здоровий спосіб життя як умову збереження і зміцнення здоровя. Обладнання та матеріали: фотографії й плакати які дають змогу ілюструвати різний спосіб життя формування здорового способу життя. Базові поняття й терміни: здоровя спосіб життя.
58066. Сприйняття мистецтва. Імпресіонізм. Відтворення дійсності у стилі імпресіонізм. Зображення на площині. Відтворення святкового настрою. Творча робота «Ялинка на майдані» 91.5 KB
  Мета: ознайомити учнів зі стилем мистецтва імпресіонізм з творчістю художників імпресіоністів; учити спостерігати вплив світла на зміну кольорів; формувати вміння передавати світло тіньові явища відповідно до змін часу доби та пори року...
58067. Доброта творит чудеса 72.5 KB
  Цель урока: Способствовать воспитанию в детях добрых человеческих взаимоотношений, отзывчивости и милосердия к окружающим, друг к другу.