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


 

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

75904. Политические партии в России в начале ХХ в.: сравнительный анализ программных лозунгов и деятельности двух-трех партий на выбор 186.39 KB
  Лидеры партии отстаивали целостность России допуская автономию только для Финляндии и Польши. Лидерами партии были известные предприниматели и финансисты А.
75905. Почему большевики смогли взять и удержать власть 15.43 KB
  Напротив большевики придя к власти незамедлительно приняли Декрет о земле отменивший право частной собственности на землю: земля переходила во всенародную государственную собственность; В 1914-1918 гг. Большевики соответственно также издали и Декрет о мире; Политическая раздробленность царившая среди остальных партийных кругов компромисс кадетов с эсерами с меньшевиками привела к потере ими фактического влияния в стране; наиболее организованной группой оставались лишь большевики способные в короткий срок мобилизовать собственные...
75906. Диссидентское движение в СССР: основные направления, лидеры и результаты деятельности 19.6 KB
  Диссиденты (лат. dissidents - несогласный) - термин, который с середины 70-х годов применялся к лицам, открыто спорившим с официальными доктринами в тех или иных областях общественной жизни СССР и пришедшим к явному столкновению с аппаратом власти. Первые годы брежневского правления
75907. Сравнительный анализ политических программ двух-трех современных российских политических партий (целевая аудитория (электорат) партии, образ желаемого будущего России (политическая, социально-экономическая модели, место России в международных процессах) 16.93 KB
  Все три партии видят будущее России поразному. Окончательное формирование социалистических общественных отношений В качестве альтернативы этим шагам предусмотрена программаминимум которая предполагает национализацию природных богатств России установление власти трудящихся и т. В программе ЕР нет ясного положения относительно будущего России какой она должна быть отсутствует там и идеология партии.
75908. Аграрная политика в дореволюционной России и в СССР: крепостное право и коллективизация без выдачи паспортов, община и колхоз 16.6 KB
  Крепостное право и кресьянская община. В России крестьянская община зародилась вместе с Древнерусским государством и видоизменяясь просуществовала вплоть до конца 1920х. В период Киевской Руси крестьянская община стала основной производящей единицей.
75909. В чем причины кризиса советской экономики в 1980-е гг.? Системный кризис, падение цен на нефть, нерентабельность производства, экстенсивный характер развития? Причины субъективные и объективные 15.55 KB
  Системный кризис падение цен на нефть нерентабельность производства экстенсивный характер развития Причины субъективные и объективные. Проблемы экономического развития были вызваны рядом причин: Системный кризис. В условиях догоняющего развития без демократических свобод при отсутствии гражданского общества в СССР произошла подмена цели средствами главной жертвой которой стала свобода как необходимое хотя и не единственное условие развития человека его инициативы и предприимчивости. Советская модель хозяйствования лишенная...
75910. Как характеризуют существовавшие в конце 80-х - начале 90-х программы реформ Г.Явлинский и А.Чубайс? Каковы отличия в подходах и восприятии 18.19 KB
  Российская приватизация по масштабам и объему стоящих перед ней задач принципиально отличалась от приватизации осуществленной в 1980е годы в странах Запада.Чубайс прохладно относился к приватизации однако понимал важность ее осущетсвления в рамках проведения рыночных реформ. списка литры: мы вели очень жесткую теоретическую дискуссию с Виталием Найшулем как автором концепции ваучерной приватизации приводили ему длинный список катастрофических тяжелейших последствий которые она неизбежно повлечет за собой. мне лично тема приватизации...
75911. Особенности шоковой терапии и приватизации в России 18.04 KB
  Особенности процесса приватизации происходившего в России: массовый характер приватизации вызванный высокой долей государственной собственности в стране а также стремлением ускорить процесс преобразования экономической структуры общества; значительный удельный вес неэквивалентных форм безвозмездная передача оплата не в полной мере и др. вызванный отсутствием денежных средств в частных руках; проведение особого ваучерного этапа приватизации. Целью приватизации провозглашалось создание эффективного собственника однако бесплатная...
75912. Российские экономические реформы 1990-х гг. в оценках западных исследователей: направления критики 19.84 KB
  В оценках западных исследователей: направления критики Негативная оценка результатов российских реформ общее в выступлениях экономистов Оправдывать или объяснять логику развития событий в России становится неприличным и социально опасным Российские реформы далеки от того чтобы считать их феноменально успешными Главные аргументы критиков Игнорирование китайского опыта...