ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПО HTML
Л/р №1: Структура HTML документа. Дескрипторы.
Л/р №2: Форматирование текста. Графика в HTML.
Л/р №3: Списки и таблицы.
Л/р №4: Гиперсвязи и фреймы.
Л/р №5: Технология CSS.
Зачетная лабораторная работа.
СПРАВОЧНАЯ ИНФОРМАЦИЯ
Копирование текста
Таблица цветов
Словарь HTML
Свойства CSS
РЕКОМЕНДУЕМЫЕ РЕСУРСЫ
Справочник по HTML и CSS. Для тех, кто делает сайты
PHP: Простой учебник - Manual
Профессиональные бесплат-ные шаблоны HTML и CSS
Яндекс.Вебмастер - проверка орфографии сайта
Адвего - проверка орфографии сайта
Поиск для сайта Яндекс
Поиск для сайта Google
Яндекс: «Поделиться» в соцсетях
Плагины JavaScript jQuery UI
Слайд-плагин Highslide JS/jQuery
Слайд-плагин Fancybox JS/jQuery
Слайд-плагин Lightbox JS/jQuery
"Кремлёвская" JS-утилита Masha
JS/jQuery утилита Flot для построения графиков
Л/р №1 Структура HTML документа. Дескрипторы.
Что такое HTML
Язык HTML (Hyper Text Markup Langguage - язык разметки гипертекста) является языком форматирования текстовых документов для представления их в WWW - "всемирной паутине". Описание лабораторных работ, которое вы читаете является примером HTML документа.
Для просмотра HTML документа необходима специальная программа - браузер. Наиболее популярными браузерами являются Internet Explorer, Netscape и Opera. Предполагается, что этот практикум выполняется с использованием Internet Explorer.
Для написания 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".
Задание
Создайте следующую HTML страничку, цвет фона и текста выберите по своему усмотрению.