HTML_1 (Методические материалы к лабораторным работам 1, 2)
Описание файла
Файл "HTML_1" внутри архива находится в следующих папках: Методические материалы к лабораторным работам 1, 2, html. Документ из архива "Методические материалы к лабораторным работам 1, 2", который расположен в категории "". Всё это находится в предмете "разработка интернет-приложений" из 5 семестр, которые можно найти в файловом архиве МГТУ им. Н.Э.Баумана. Не смотря на прямую связь этого архива с МГТУ им. Н.Э.Баумана, его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "разработка интернет-приложений" в общих файлах.
Онлайн просмотр документа "HTML_1"
Текст из документа "HTML_1"
14
Лекция №1. Введение в HTML.
----------------------------------------------------------------
1. История создания HTML.
2. Структура HTML-документа.
3. Основные типы конструкций HTML. Тэги, элементы, атрибуты.
4. Элементы языка HTML.
----------------------------------------------------------------
1. История создания HTML
Язык HTML (HyperText Markup Language - гипертекстовый язык разметки) был разработан Тимом Бернерс-Ли во время его работы в CERN. Язык был придуман, как одна из компонент технологии WWW.
На сегодняшний день актуальной является версия 4.01. Разрабатывается новая версия спецификации 5.0.
2. Структура HTML-документа
Пример документа HTML.
<!DOCTYPE HTML .” .dtd”> - ссылка на DTD с правилами описания тэгов (конструкция из SGML), обычно ее не используют
<HTML>
<HEAD>
<TITLE>Наш первый документ на языке HTML</TITLE>
</HEAD>
<BODY>
<P>Пример!
</BODY>
</HTML>
Документ HTML состоит из раздела заголовка документа (между тэгами <HEAD> и </HEAD>) и тела документа (между тэгами <BODY> и </BODY>). Название документа (между тэгами <TITLE> и </TITLE >) отображается в заголовке окна броузера, а содержимое документа (тело документа) отображается в окне броузера. В этом примере тело документа состоит только из одного параграфа текста, (тег <P>).
| Наш первый документ на языке HTML |
| Пример! |
В разделе заголовка документа может также располагаться невизуальная информация – список ключевых слов для поисковых машин, программы (сценарии) на Java Script или Visual Basic Script и др.
Данный документ может быть представлен в виде дерева.
| HTML | ||
| |---- | HEAD | |
| | | |---- | TITLE |
| | | ||
| |---- | BODY | |
| | | |---- | P |
3. Основные типы конструкций HTML (относится ко всем тэговым языкам – SGML, XML)
HTML является тэговым языком – содержит тэги, элементы, атрибуты.
3.1. Элементы
Элементы – основная конструкция документов HTML.
Каждое объявление элемента обычно включает три части: начальный тэг, содержимое и конечный тэг.
Имя элемента отображается в начальном тэге (пишется <имя-элемента>) и в конечном тэге (пишется </имя-элемента>), перед именем элемента в конечном тэге ставится прямой слеш. Например, начальные и конечные тэги элемента UL определяют маркированный список:
<UL>
<LI><P>...элемент списка 1...
<LI><P>...элемент списка 2...
</UL>
(LI – элемент списка)
Содержимым элемента могут быть текст, другие элементы, комментарии и т.д.
Некоторые типы элементов HTML позволяют опускать конечные тэги (например, типы элементов P и LI). Несколько типов элементов также позволяют опускать начальные тэги; например, HTML HEAD и BODY.
Некоторые типы элементов HTML не имеют содержимого. Например, элемент перехода на следующую строку <BR> не имеет содержимого; его роль - прерывание строки текста. Такие пустые элементы никогда не имеют конечных тэгов.
Элементы и тэги - это не синонимы. Элемент определяется тэгами (начала или конца). Например, элемент HEAD всегда присутствует, даже если начальный и конечный тэги HEAD отсутствуют.
3.2. Атрибуты
С элементами могут быть связаны свойства, называемые атрибутами, которые могут иметь значения.
Пример использования атрибутов.
<H1 id="section1">заголовок</H1>
Пары атрибут/значение помещаются перед закрывающей скобкой ">" начального тэга элемента. В начальном тэге элемента может быть любое число атрибутов, разделенных пробелами. Они могут указываться в любом порядке.
В данном примере для элемента H1 установлен атрибут id.
По умолчанию необходимо, чтобы все значения атрибутов были разделены с помощью двойных или одинарных кавычек. Одинарные кавычки могут включаться в значение атрибута, если значение отделяется двойными кавычками, и наоборот.
В HTML использование кавычек необязательно, хотя и рекомендутся.
Некоторые атрибуты играют роль логических переменных (например, атрибут selected для элемента OPTION). Их наличие в начальном тэге элемента подразумевает, что значением атрибута является "истина". Их отсутствие означает "ложь".
В HTML логические атрибуты могут быть в минимизированной форме - в начальном тэге элемента находится только значение атрибута. Таким образом, selected можно установить, написав:
<OPTION selected>
3.3. Ссылки на символы
Ссылки на символы - это имена символов, которые могут быть включены в документ HTML. Они удобны для обращения к редко используемым символам или к символам, которые трудно или невозможно вводить в средствах разработки документов. Ссылки на символы начинаются со знака "&" и заканчиваются точкой с запятой (;).
Примеры:
-
"<" представляет знак <.
-
">" представляет знак >.
-
""" представляет знак ".
-
"å" (десятичное число) представляет букву "a" с кружком сверху.
-
"å" (шестнадцатеричное число) представляет букву "a" с кружком сверху.
3.4. Комментарии
Комментарии в HTML имеют следующий синтаксис:
<!-- это комментарий -->
<!-- это тоже комментарий,
он занимает несколько строк -->
4. Элементы языка HTML
1. Элемент HTML
Корневой элемент документа
Начальный тег: необязателен, Конечный тег: необязателен
2. Элемент HEAD
Секция заголовка документа
Начальный тег: необязателен, Конечный тег: необязателен
3. Элемент TITLE
название документа (отображается в окне броузера)
Начальный тег: обязателен, Конечный тег: обязателен
4. Элемент BODY
Определение тела документа
Начальный тег: необязателен, Конечный тег: необязателен
Атрибуты:
background = uri
Значение этого атрибута - URI, указывающий на изображение. Это изображение является фоном страницы.
URI (URL, URN) (Universal Resource Identifier) - универсальный идентификатор ресурсов (вторая компонента Web, придуманная Бернерсом-Ли). Адрес какого-либо ресурса в Интернет.
В простейшем виде URI – имя файла.
text = цвет
Этот атрибут устанавливает цвет текста.
link = цвет
Этот атрибут устанавливает цвет текста гипертекстовых ссылок, по которым не было переходов.
vlink = цвет
Этот атрибут устанавливает цвет текста ссылок, по которым были переходы.
alink = цвет
Этот атрибут устанавливает цвет текста текущей выбранной ссылки.
bgcolor = цвет
Этот атрибут устанавливает цвет фона тела документа.
Эти атрибуты отменены в HTML5.
Как задается цвет?
Цвет можно задавать строковой константой или 16-ным значением.
(White = "#FFFFFF" , Red = "#FF0000" , Green = "#00FF00" Blue = "#0000FF")
Кодирование цвета: #RRGGBB – 3 байта, каждый принимает значение от 00 до FF, где RR – интенсивность красного цвета, GG – интенсивность зеленого цвета, BB – интенсивность синего цвета.
Пример:
<HTML>
<HEAD>
<TITLE>пример</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... тело документа... </BODY> </HTML>
В данном примере устанавливается белый цвет фона, черный цвет текста и красный цвет непосещенных гиперссылок, цвет фуксии (похож на фиолетовый) при активизации ссылок и коричневый для ссылок, по которым были переходы.
6. Объявление заголовков: Элементы H1, H2, H3, H4, H5, H6
Начальный тег: обязателен, Конечный тег: обязателен
В языке HTML существует шесть уровней заголовков: H1 - наиболее важный - и H6 - наименее важный. Обычно браузеры отображают более важные заголовки более крупным шрифтом.
Пример:
<BODY>
<H1>Заголовок 1-го уровня</H1>
<H2>Заголовок 2-го уровня</H2>
<P>Текст</P>
</BODY>
Атрибуты:
align = left|center|right|justify
Этот атрибут задает горизонтальное выравнивание элемента. Возможные значения:
-
left: строки текста выравниваются по левому краю.
-
center: строки текста выравниваются по центру.
-
right: строки текста выравниваются по правому краю.
-
justify: строки текста выравниваются по обоим краям.
Пример:
<H1 align="center"> Заголовок 1-го уровня по центру </H1>
7. Абзацы: элемент P
Начальный тег: обязателен, Конечный тег: необязателен
Элемент P представляет параграф текста.
Атрибуты: align.
Примеры:
<P align=center>Центрированный текст.
<P align="right">Правый край.</P>
8. Элемент BR
Принудительный переход на новую строку
Начальный тег: обязателен, Конечный тег: запрещен
Задает точку переноса, а не элемент, поэтому не может иметь содержимого.
9. Элемент HR
Горизонтальный разделитель (линия)
Начальный тег: обязателен, Конечный тег: запрещен
Атрибуты:
1. noshade (логический) – отсутствие тени (без углубления, как обычная линия)
2. size = высота в пикселах
3. width = ширина в пикселах или процентах
4. align = left|center|right
Примеры:
<HR>
<HR width="50%" align="center">
<HR noshade size="50" width="50" align="left"> - серый квадрат слева 50x50 пикселов
В HTML5 атрибуты эти атрибуты не поддерживаются, считается что верстку необходимо делать с помощью стилей.
Вставка фонового звука на страницу.
Оба способа не определены в стандарте и являются расширениями броузера.
1. Элемент BGSOUND (для IE)
Атрибуты:
1. src = URI звукового файла
2. Balance = - 10 000 (левый динамик) … +10 000 (правый динамик) - стерео баланс
3. Loop = -1 (постоянно) | 0 (1 раз) | N (количество раз) – число проигрываний файла
4. Volume – громкость -10 000 – тихо, 0 – громко.
Форматы звуковых файлов:
1. MP3, OGG, WAV – звуковой файл
2. MIDI – запись нот для музыкальных инструментов
3. WMA - Windows Media (только для Windows)
Элемент BGSound не отображается визуально.
2. Элемент EMBED – Netscape, IE
Элемент Embed отображается визуально в виде панели для проигрывания звука или видео.
Атрибуты:
1. src = URI звукового файла или видео (AVI)
2. width = ширина (px или %)
3. height = высота
4. hidden = true | false (не отображать визуально)
5. autostart = true | false (автозапуск)
6. loop = true | false (проигрывать в цикле)
С помощью EMBED в HTML5 вcтавляются только плагины. Атрибуты:
src
type
height
width
3. Элемент audio (новый, появился в HTML 5)
Внутри элемента можно писать текст, который отображается, если браузер не поддерживает этот элемент.
Не поддерживается Firefox, Google Chrome поддерживает.
Атрибуты::
1. src = URI файла
2. autoplay="autoplay" - автоматическое проигрывание при загрузке документа
3. controls="controls" - отображение кнопок запуска, остановки и т.д.
4. loop = "loop" - проигрывание в цикле
<audio src="1.mp3" controls="controls" loop="loop" >
Браузер не поддерживает элемент audio
</audio>
Атрибут controls (и другие) – это логические атрибуты (то есть они или присутствуют или нет). Но в HTML5 они записываются в форме имя=значение.
Данные элементы можно использовать, например, для создания музыкального учебного сайта.
