- •Назначение языка html
- •Программы просмотра web – страниц
- •Программы-редакторы html
- •Интерфейс редактора htmlPad и его возможности
- •Синтаксис html
- •Структура html-документа
- •Физическое форматирование текста
- •Грибоедов александр сергеевич
- •Драматург, поэт, дипломат
- •Логическое форматирование текста
- •Оформление текста
- •Маркированные списки
- •Форматирование маркированных списков
- •Нумерованные списки
- •Форматирование нумерованных списков
- •Начальный номер списка
- •Списки определений
- •Задания для самостоятельной работы:
- •Внешние и внутренние ссылки
- •Гиперссылки изображений
- •Шеснадцатеричные значения кодов
Синтаксис html
Язык HTML – это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные команды HTML, описывающие, как должен выглядеть данный текст. Язык HTML представляет собой коллекции управляющих символов – тегов (дескрипторов), с помощью которых можно добавлять и форматировать элементы документа. Для настройки внешнего вида и функционирования элемента страницы устанавливаются его атрибуты. HTML постоянно развивается, дополняется новыми элементами.
Теги бывают одиночный и парный, начальный и конечный (открывающий и закрывающий).
Например:
<br> - одиночный тег
<html> и </html>; <head> и </head> - парные теги.
Теги состоят из следующих друг за другом в определенном порядке элементов:
левой угловой скобки <;
необязательного символа / (слэш), который означает, что тег является конечным тегом, закрывающим некоторую структуру, например </title>;
имени тега, например html;
необязательных параметров (атрибутов). Теги могут иметь один или несколько параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Параметры записываются внутри тега и разделяются пробелами. В некоторых случаях значение не требуется, важен сам факт указания параметра. Например, <body bgcolor="#008000">;
параметр тега состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки, например align="center". Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить. При наличии в значении параметра пробелов кавычки также обязательны.
правой угловой скобки >.
Большинство тегов спарены: за открывающим тегом следует соответствующий ему закрывающий тег, а между ними содержится текст или другие теги. В таких случаях два тега и часть документа, заключенная между ними, образуют блок, называемый элементом HTML. Некоторые теги, например <hr>, являются одиночными и для них закрывающий тег не применяется. Такие теги сами по себе являются элементами HTML.
Для имен тегов можно использовать и прописные и строчные буквы. Язык HTML не различает большие и малые буквы, так что теги <HEAD>, <head> и <Head> эквивалентны.
В любом документе HTML существуют элементы, определяющие его структуру – это структурные теги. Взаимное расположение структурных элементов HTML, HEAD, TITLE и BODY должно быть стандартным на любой странице (в тех случаях, когда не используются фреймы).
Структура html-документа
Для подготовки документов WWW используется HTML - язык разметки гипертекста (HyperText Markup Language).
Под разметкой понимается вставка в текст специальных кодов (управляющих символов).
Гипертекст – это метод представления текста, изображений, звука, связанных друг с другом произвольной связью.
Основа используемой в HTML-технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы – теги. В результате чего получаем Web‑страницу. Код HTML-документа записывается в обычном текстовом файле. Подготовить и отредактировать его можно при помощи любого текстового редактора, позволяющего сохранять неформатированный текст (например, Блокнота).
Web‑браузер получает документ, интерпретирует команды HTML и обеспечивает наилучшее представление информации на экране пользователя.
Любой HTML-код (или HTML-документ) состоит из трех частей:
Строки, содержащей информацию о версии HTML.
Блока заголовка документа.
Тела документа, содержащего непосредственно отображаемую информацию.
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>
<TITLE> Untitled </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Прежде всего надо указать на то, что данный документ описывает Web‑страницу на языке HTML. Для этого текст начинается с тега <HTML>. Для него требуется закрывающий тег </HTML>, обозначающий конец документа.
Далее идет тег заголовка <HEAD> </HEAD>. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т.д.).
Тег описания (тела страницы) <BODY> </BODY> определяет информационную часть описания страницы. В ней располагаются текст, рисунки и другие элементы.
Тег <TITLE> </TITLE>, расположенный в заголовке страницы, указывает название страницы, которое большинство браузеров отображают в заголовке окна.
Любой действительный документ HTML должен содержать информацию о версии языка HTML, используемого в документе.
Существует три типа документов:
HTML 4.0 Strict – такой документ не должен содержать отмененных тегов и атрибутов (параметров) и не должен быть контейнером для фреймов.
HTML 4.0 Transitional – может содержать все то, что и HTML 4.0 Strict, а также отмененные элементы и атрибуты.
HTML 4.0 Frameset – указывает на то, что данный документ является контейнером для набора фреймов.
Пример 1. Создание простейшего документа HTML.
Открыть текстовый редактор Блокнот.
Набрать в Блокноте следующий текст:
<HTML>
<HEAD>
<TITLE> Мой первый документ HTML</TITLE>
</HEAD>
<BODY>
Всем привет!
</BODY>
</HTML>
Сохранить набранный текст в свою рабочую папку под именем Пример1.htm или Пример1.html.
Загрузить файл Пример1.html в программу просмотра HTML-документов (Web-страниц) Internet Explorer. (Два раза щелкнуть по значку файла).
Откроется окно программы с просматриваемым файлом.
В заголовке окна программы отображается заголовок HTML-документа, а в рабочей области – тот текст, который был введен в тело документа.
Задание для самостоятельной работы:
создать HTML-документ, где в качестве заголовка документа будет ваше имя и фамилия, а в качестве тела документа – произвольный текст о себе.;
сохранить файл под именем Сам1.html;
просмотреть созданный файл в Internet Explorer;
сделать выводы по проделанной работе.
Тег <BODY> заключает в себе гипертекст, который определяет собственно Web-страницу. Эта часть отображается браузером.
Внутри тега <BODY>можно использовать все элементы, предназначенные для дизайна Web-страницы.
Тег <BODY> имеет параметры (атрибуты), которые обеспечивают установки для всей страницы в целом. (См. таблицу "Теги, определяющие структуру HTML-документа").
Один из самых полезных для дизайна параметров – параметр, определяющий фон страницы – bgcolor. Параметр bgcolor задает цвет фона Web-страницы. Параметр background определяет адрес файла, который будет использован в качестве фона документа. Параметр text определяет цвет текста.
Пример 2. Создание HTML-документа с использованием параметров элемента BODY
Скопировать к себе в папку файл с именем mixedroses_tn.jpg
Запустить программу Блокнот или любой HTML-редактор.
Набрать следующий текст:
<HTML>
<HEAD>
<TITLE> Мой второй документ HTML</TITLE>
</HEAD>
<BODY background="mixedroses_tn.jpg">
Поздравляем!
</BODY>
</HTML>
Сохранить файл под именем Пример2.html.
Просмотреть созданный файл в браузере.
Сделать выводы.
Отредактировать созданный файл следующим образом: заменить
<BODY background="mixedroses_tn.jpg"> на
<BODY bgcolor=#008000 text=silver>
Сохранить файл под именем Пример2_2.html.
Просмотреть созданный файл в браузере.
Сделать выводы.
