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

3 чел.

  •  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 - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.


 

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

82105. Электрогидравлический привод подачи фрезерного станка 1.61 MB
  Отсчет перемещения стола 10 относительно станины 9 осуществляется линейным индуктосином 11, который является индуктивным датчиком перемещения. Измерение осуществляется за счет сдвига вектора магнитной индукции при перемещении движка индуктосина относительно основной шкалы...
82106. Система автоматического регулирования температуры жидкости в системе охлаждения двигателя 858.5 KB
  Построение желаемой ЛАЧХ системы и оценка качества САР. Коррекция САР и расчет параметров корректирующего устройства Расчет переходной характеристики скорректированной САР Заключение. Для получения характеристического уравнения найдем главную передаточную функцию замкнутой САР.
82107. Электрогидравлический следящий привод с объемным регулированием 1.16 MB
  В систему также может подключаться с помощью выключателя 17 датчик угловой скорости 15 вала гидромотора. Сигнал от датчика обратной связи поступает на усилитель-сумматор, который определяет ошибку регулирования (где - управляющее напряжение) и усиливает сигнал ошибки.
82108. Электрогидравлический следящий привод с машинным управлением 923 KB
  В данной курсовой работе рассматривается электрогидравлический следящий привод с машинным управлением. Электрогидравлический следящий привод с машинным управлением (рисунок 1) имеет силовую часть, состоящую из регулируемого насоса 11 и гидродвигателя 12, и управляющую часть.
82111. Электрогидравлический следящий привод с дроссельным управлением 1.31 MB
  Датчик скорости: Постоянные времени и коэффициенты передач Функциональная схема электрогидравлического следящего привода с машинным управлением САР является регулированной системой по ошибке и многоконтурной по числу обратных связей. Данная схема САР состоит из: сравнительного элемента...
82112. Электрогидравлический следящий привод подачи фрезерного станка 1.99 MB
  В данной курсовой работе рассматривается электрогидравлический привод подачи фрезерного станка. Привод с гидромотором 8 подачи фрезерного станка с передачей «шариковый винт-гайка» применяется при больших длинах хода стола 10, когда изготовление длинной детали представляет значительные трудности.