ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПО HTML

СПРАВОЧНАЯ ИНФОРМАЦИЯ

Копирование текста

Таблица цветов

Словарь HTML

Свойства CSS

Справочник по HTML и CSS. Для тех, кто делает сайты

Профессиональные бесплат-ные шаблоны HTML и CSS

Яндекс.Вебмастер - проверка орфографии сайта

Адвего - проверка орфографии сайта

Поиск для сайта Google

Яндекс: «Поделиться» в соцсетях

Плагины JavaScript jQuery UI

Слайд-плагин Highslide JS/jQuery

Слайд-плагин Fancybox JS/jQuery

Слайд-плагин Lightbox JS/jQuery

"Кремлёвская" JS-утилита Masha

JS/jQuery утилита Flot для построения графиков

Лр №1 Структура HTML документа. Дескрипторы (тэги).

Для написания HTML документов достаточно простейшего текстового редактора, не добавляющего в текст никаких специальных символов. При работе в Windows наиболее простым вариантом является использование редактора Notepad (он же Блокнот в русских версиях Windows). Запуск редактора осуществляется через кнопку "Пуск"--->"Стандартные"--->"Блокнот".

Создание HTML файла

Зайдите в каталог вашей группы.
Создайте в каталоге группы свой личный каталог, в нем для каждой лабораторной работы необходимо создавать отдельный каталог, например lab1, lab2 и т. д.
Запустите текстовый редактор Notepad (Блокнот): "Пуск"--->"Стандартные"--->"Блокнот";
Установите "Формат"--->"Перенос по словам" (или проконтролируйте, чтобы там стояла галочка)и наберите текст согласно образцу:
Сохраните документ: "Файл"--->"Сохранить как";
Выберите папку для сохранения lab1;
Выберите "Тип файла": Все файлы;
Выберите "Имя файла": first.html (имя first, затем точка, затем расширение html);
Нажмите кнопку "Сохранить";

Просмотр HTML файла при помощи браузера

Зайдите в каталог lab1 своего личного каталога;
Если указанные выше действия (по созданию HTML-файла) были выполнены правильно, в каталоге lab1 будет находиться файл first.html, отображаемый как синенькая буковка "e" (что говорит о том, что для просмотра файла будет использован браузер Internet Explorer);
Двойной клик левой кнопкой мыши по файлу запустит браузер для просмотра Вашего первого HTML документа:

Редактирование HTML файла

Для внесения изменений в HTML документ проще всего пользоваться контекстным меню. Кликните по файлу правой кнопкой мыши и оно появится;
Выберите "Открыть с помощью" ---> "Блокнот" и редактируйте файл;
Для сохранения файла используйте "Файл"---> "Сохранить" или комбинацию клавиш "Ctrl+S";
Для просмотра файла в браузере не обязательно закрывать Блокнот;
Запустите браузер не закрывая Блокнот (как обычно, двойным левым кликом);
Вносите изменения в Блокноте и сохраняйте их ("Файл"---> "Сохранить"или "Ctrl+S");
Переключитесь на браузер и выберите обновление содержания клавишей "F5" (для Internet Explorer) или кнопкой с изображением циклических стрелочек на панели инструментов;
При создании HTML-документов можно переключаться между редактором и браузером (сохранения изменения в редакторе и обновляя изображение в браузере ) до получения требуемого результата.

Подобным образом создаются, редактируются и просматриваются все остальные HTML-документы в данном лабораторном практикуме.

Дескрипторы (тэги)

Разметка HTML документа осуществляется дескрипторами. В простейшем случае дескриптор представляет собой ключевое слово, заключенное в угловые скобки (знаки "меньше"и "больше"). Большинство дескрипторов образуют пары, как <HTML> и </HTML>, у закрывающего дескриптора ключевому слову предшествует наклонная черта (слэш), но есть и одиночные дескрипторы, их мы рассмотрим позже. В различной литературе дескрипторы еще называют тэгами и, иногда, флагами.

Структура HTML документа

HTML документ начинается дескриптором <HTML> и заканчивается дескриптором </HTML>.

Далее HTML документ делится на две части заголовок и тело. Границы заголовка определяются парой дескрипторов <HEAD> и </HEAD>, тело ограничивается парой дескрипторов <BODY> и </BODY>.

Заголовок содержит сведения для браузера и поисковых машин, необходимые для работы с документом. Мы ограничимся названием документа. Название документа заключается в дескрипторы <TITLE>...</TITLE>.

В теле HTML документа располагается текст, графика, гиперссылки и другая информация, которую отображает браузер.

Учитывая необходимость разделов HEAD, TITLE и BODY преобразуем наш первый HTML к правильному виду.

Одиночные дескрипторы (тэги)

Большинство дескрипторов HTML парные такие как <HTML>...</HTML>, <HEAD>...</HEAD> и т.д.. Но есть и одиночные дескрипторы, такие, как, например, <BR> и <HR>.

Дескриптор <BR> нужен для принудительного перевода строки, а дескриптор <HR> рисует горизонтальную линию, сколько дескрипторов <HR>, столько и линий.

Атрибуты дескрипторов (тэгов)

Как мы уже говорили дескриптор, в простейшем случае, это ключевое слово, заключенное в угловые скобки. В общем случае, помимо ключевого слова дескриптор может содержать атрибуты. Так в дескрипторе <BODY> можно указать атрибуты, отвечающие за цвета фона и текста документа: BGCOLOR и TEXT. Значение атрибутов BGCOLOR и TEXT задаются как шестнадцатеричный код трехбайтного RGB цвета, например "7FFFD4" (аквамарин) или как имя в таблице цветов - "aquamarine".