HTML Урок1

Урок1
HTML
WEB-САЙТ

– набор web – страниц, связанных между
собой по смыслу, а также вспомогательных
файлов мультимедиа, скриптов и т.д.
WEB – СТРАНИЦА.

Web – страница – записать– это файл,
являющаяся гипертекстовым документом.
Файл имеет расширение htm, html (а также
php, asp и т.д.). Создается такой документ с
помощью специального языка, в нашем
случае это будет язык HTML.
HTML



Hyper Text Markup Language – язык разметки
гипертекста. HTML - платформенно-независимый
интерпретируемый язык разметки текста для
внесения в документ сведений о его структуре.
Платформенно-независимый – внешний вид
документа не должен зависеть от архитектуры
компьютера, ОС и программы просмотра.
Интерпретируемый – конструкции, написанные на
языке, будут выполняться сразу программой
просмотрщиком (браузером), без предварительной
обработки. Создавать текст можно в любом текстовом
редакторе.
ГИПЕРТЕКСТ

– совокупность смыслового текста и команд
языка HTML, создающих разметку и
оформление этого текста.
ВЕРСИИ ЯЗЫКА HTML.






HTML 2.0. – академический. Минимальное оформление, только сведения о структуре: заголовки,
ссылки, абзацы, разделы, списки. Стандарт был утвержден в ноябре 1944 г. организацией IETF
(Internet Engineering Task Force). В нем были расширены возможности предыдущей версии
языка, и он получил широкое распространение, как у профессионалов, так и любителей.
HTML 3.0 - Проект версии языка был опубликован в марте 1995 г. В нем были произведены
радикальные изменения предыдущих версий включены дополнительные возможности, включая
таблицы, математические выражения и т.д. Это стало причиной того, что он не стал официальной
спецификацией и был заменен спецификацией HTML 3.2
HTML 3.2 – оформительский. HTML 3.2 (кодовое наименование проекта: “Wilbur”) – Был
опубликован и начал широко использоваться с мая 1996 г., получил официальное утвержден в
1997 г. Получил популярность из-за совместимости с HTML 2.0
HTML 4.0 – стильный. Кодовое наименование проекта: “Cougar ” – последняя версия языка. В
нем реализованы многие распространенные концепции Web -дизайна и приняты некоторые
средства HTML 3.2. Самым значительным отличием HTML 4.0 от предыдущих версий является
кодировка Unicode , тег “ Object”, позволяющий работать с мультимедиа (в т.ч. с видеоклипами и
звуком) и др.
XHTML – (extensible). “Расширяемый язык разметки”. Предложен консорциумом WWW
Consortium (W3C) -ориентированных языков в 1996 г. Входит в подмножество SGML. Возник в
результате необходимости создать более обобщенный язык разметки без соблюдения сложного и
громоздкого для использования в Интернете стандарта SGML.
HTML5 — пятая версия языка разметки HTML. Версия языка, полностью соответствующая
стандарту XML, называется XHTML5. Здесь добавлены новые элементы и атрибуты.
БОЛЕЕ ПОДРОБНО О РАЗЛИЧИЯХ:











В XHTML все теги и атрибуты должны быть набраны в нижнем регистре, кроме тега<!DOCTYPE>.
Необходимо закрывать любые теги, в том числе одиночные, кроме <!DOCTYPE>:
<option> </option>,
<br />,
<hr />,
<img />,
<input />,
<link />,
<meta />.
Запрещается использование сокращений для булевых атрибутов, параметры вписываются
полностью. К примеру, актуально:
<hr noshade="noshade" />, <input type="checkbox" checked="checked" />, вместо
<hr noshade>, <input type="checkbox" checked>
Рекомендуется максимально семантически использовать теги: блок <div> </div> – для верстки, а
таблицы – для табличного представления данных.
Расширением документа может быть .xhtml или .html, но чаше встречается второй способ.
ЧЕМ ОТЛИЧАЕТСЯ СОВРЕМЕННЫЙ XHTML ОТ
HTML
XHTML (Extensible Hypertext Markup Language)
– Расширяемый язык разметки гипертекста...
HTML 4.01 документ может содержать
элементы XHTML, но не наоборот!
Hовый HTML – HTML 5 по сути является
дополненным
новыми
элементами
и
атрибутами XHTML-м.
СРЕДСТВА СОЗДАНИЯ WEB – СТРАНИЦ.

Поскольку html – код – это текст и для просмотра
результата работы кода не нужно компиляции, то
такой код можно создавать в любом текстовом
редакторе с последующим сохранение в
формате html. Однако, для облегчения работы
существует масса специализированных
программных средств для создания webстраниц. Их можно разделить на 2 группы:
WYSIWYG – редакторы (Word, FrontPage,
DreamWeaver).
 Редакторы HTML (тэгов).

ПРАВИЛА ИМЕНОВАНИЯ ФАЙЛОВ И ПАПОК НА
WEB-САЙТЕ
имена файлам и папкам должны быть на
латинице маленькими символами
 пробелы использовать нельзя.
 имя файла или папки должно подчиняться
правилу 8:3.

СТРУКТУРА САЙТА
index.html(default.asp)
 IMG – картинки(jpg, Jpeg, Pmg, gif…)
 HTML(htm, html)
 CSS(css)
 CSRIPT(js…)

ПОНЯТИЕ ЭЛЕМЕНТ, ДЕСКРИПТОР, ТЭГ,
АТРИБУТ.





















Элемент – совокупность логически законченного содержания и его границ. Например, список, абзац.
Гипертекстовый характер и внешний вид задается при помощи дескрипторов (команд разметки).
Каждый элемент имеет начало и конец. Т.е. где начинать форматирование и где заканчивать. Команды
начала и конца называются тэгами (tag).
Имя элемента совпадает с именем тэга и отображается в начальном и конечном тэге.
Тэги заключаются в угловые скобки. <P>. Причем конечный тэг начинается с прямого слэша </P>.
Регистр не важен.
<p> - начало форматирования
</p> -окончание форматирования
Например,
<BODY>
Основной текст
</BODY>
Бывает без конечного тэга. Тогда в последней версии языка слэш стоит прямо внутри элемента.
Например,
<hr />
Возможна вложенность тэгов.
Например,
<BODY>
<P>абзац 1</P>
</BODY>
Атрибуты – свойства элемента, уточняющие действие элемента. Свойства могут иметь параметры, т.е.
значения.
Например, <P Align=”center”> Здесь Align- атрибут, center – параметр.
СТРУКТУРА ГИПЕРТЕКСТОВОГО ДОКУМЕНТА.
<!DOCTYPE HTML PUBLIC “-//W3С//DTD HTML4.0//EN”>
<HTML>
<HEAD>
<TITLE>Внешний заголовок документа</TITLE>
</HEAD>
<BODY>
Тело документа
</BODY>
</HTML>
ТАКОЙ ДОЛЖНА БЫТЬ НАЧАЛЬНАЯ СТРУКТУРА
HTML СТРАНИЦЫ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>HTML структура документа</title>
</head>
<body>
</body>
</html>
СТРУКТУРА HTML 5 ДОКУМЕНТА
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<title>Имя HTML 5 документа</title>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML “НОМЕР “ “URL//EN”>






Информацию о версии языка, объявление типа
документа. Синтаксис
Элемент !DOCTYPE – сообщает Web – серверу способ
обработки документа и то, какие дескрипторы могут
находиться на странице.
DTD – Document Type Definition – определение типа
документа.
3WC – WWW consortium – организация,
контролирующая движение языка.
URL – адрес, откуда можно загрузить DTD.
EN – язык
СТРУКТУРНЫЕ ЭЛЕМЕНТЫ
ФОРМАТИРОВАНИЯ.
АБЗАЦ Р (PARAGRAPH).
Абзац кодируется (задается) с помощью
элемента Р (Paragraph). Имеется
открывающие и закрывающий теги.
 <p> Текст</p>

РАЗРЫВ СТРОКИ
</BR> – разрывает абзац,
 пустая строка не вставляется.

КОММЕНТАРИЙ

<!--комментарий -->
ИЕРАРХИЧЕСКИЕ ЗАГОЛОВКИ.
Синтаксис: <Hn> - </Hn>- всего 6 уровней.
 <h1>Заголовок</h1>
 <h2> Заголовок </h2>
 <h3> Заголовок </h3>
 <h4> Заголовок </h4>
 <h5> Заголовок </h5>
 <h6> Заголовок </h6>

РАЗДЕЛИТЕЛЬНЫЕ ЛИНИИ

<HR> Horizontal Ruler
ВСТАВКА ИЗОБРАЖЕНИЯ
<IMG SRC=“путь к картинке” width=“” heigh=“”
alt=“” align=“”>
 Width - ширина
 Heigh - высота
 Alt - подпись
 Align – выравнивание
 Картинка в папке IMG, ставим ее в файл index
 <IMG SRC=“IMG/полное имя файла” />

СПИСКИ

Маркированные
<UL>
<LI>элемент 1</LI>
<LI> элемент 2</LI>
<LI> элемент 3</LI>
</UL>


Нумерованные
<OL>
<LI>элемент 1</LI>
<LI> элемент 2</LI>
<LI> элемент 3</LI>
</OL>
ВСТАВКА ВИДЕО

<embed src=" IMG/полное имя файла "
height="60" width=144>
ВСТАВКИ ЗВУКОВ
<bgsound src=«IMG/полное имя файла"
loop="1"></bgsound>
<bgsound>:
src - адрес звукового файла
loop - число повторов мелодии (если равно -1, то
повторяется бесконечно)
balance - стереобаланс (значения от -10000 до
10000)
volume - громкость, максимальное значение = 0
(возможные значения от -10000 до 0)
 <embed src=" IMG/полное имя файла " height="60"
width=144>

ВСТАВКА ГИПЕРССЫЛКИ









<A HREF=“путь к файлу”>гиперссылка</A>
Гиперссылка из файла index.htm на файлы в папке
HTML
<A href=“HTML/полное имя файла”>гиперссылка</a>
Гиперссылка в папке HTML с одного файла на другой
<A href=“полное имя файла”>гиперссылка</a>
Гиперссылка из файла, который находиться в папке
HTML на картинку
<A href=“../IMG/полное имя файла”>гиперссылка</a>
Гиперссылка из файла в папке HTML на index
<A href=“../index.htm”>гиперссылка</a>