Л/Р №1 СТРУКТУРА HTML ДОКУМЕНТА. ДЕСКРИПТОРЫ.
Что такое HTML
Язык HTML (HyperTextMarkupLangguage - язык разметки гипертекста) является языком форматирования текстовых документов для представления их в WWW - "всемирной паутине". Описание лабораторных работ, которое вы читаете является примером HTML документа.
Для просмотра HTML документа необходима специальная программа - браузер. Наиболее популярными браузерами являются InternetExplorer, Netscape и Opera. Предполагается, что этот практикум выполняется с использованием InternetExplorer.
Для написания HTML документов достаточно простейшего текстового редактора, не добавляющего в текст никаких специальных символов. При работе в Windows наиболее простым вариантом является использование редактора Notepad (он же Блокнот в русских версиях Windows). Запуск редактора осуществляется через кнопку "Пуск"--->"Стандартные"--->"Блокнот".
Создание HTML файла
Зайдите в каталог вашей группы.
Создайте в каталоге группы свой личный каталог, в нем для каждой лабораторной работы необходимо создавать отдельный каталог, например lab1, lab2 и т. д.
Запустите текстовый редактор Notepad (Блокнот): "Пуск"--->"Стандартные"--->"Блокнот";
Установите "Формат"--->"Перенос по словам" (или проконтролируйте, чтобы там стояла галочка)и наберите текст согласно образцу:
Сохраните документ: "Файл"--->"Сохранить как";
Выберите папку для сохранения lab1;
Выберите "Тип файла": Все файлы;
Выберите "Имя файла": first.html (имя first, затем точка, затем расширение html);
Нажмите кнопку "Сохранить";
Просмотр HTML файла при помощи браузера
Зайдите в каталог lab1 своего линого каталога;
Если указанные выше действия (по созданию HTML-файла) были выполнены правильно, в каталоге lab1 будет нахлодиться файл first.html, отображаемый как синенькая буковка "e" (что говорит о том, что для просмотра файла будет использован браузер InternetExplorer);
Двойной клик левой кнопкой мыши по файлу запустит браузер для просмотра Вашего первого HTML документа:
Редактирование HTML файла
Для внесения изменений в HTML документ проще всего пользоваться контекстным меню. Кликните по файлу правой кнопкой миши и оно появится;
Выбирите "Открыть с помощью" ---> "Блокнот" и редактируйте файл;
Для сохранения файла используйте "Файл"---> "Сохранить" или комбинацию клавиш "Ctrl+S";
Для просмотра файла в браузере не обязательно закрывать Блокнот;
Запустите браузер не закрывая Блокнот (как обычно, двойным левым кликом);
Вносите измения в Блокноте и сохраняйте их ("Файл"---> "Сохранить"или "Ctrl+S");
Переключитесь на браузер и выберите обновление содержания клавишей "F5" (для InternetExplorer) или кнопкой с изображением циклических стрелочек на панели инструментов;
При создании 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 страничку, цвет фона и текста выберите по своему усмотрению.
Л/Р № 2 ФОРМАТИРОВАНИЕ ТЕКСТА. ГРАФИКА В HTML.
Начиная лабораторную работу № 2, не забудьде создать для нее отдельный каталог.
Обычный HTML-документ обычно состоит написанных мелким шрифтом текстовых абзацев, предшествующих им более крупных заголовков графических изображений (картинок). В этом можно убедиться просматривая находящийся перед вами HTML-документ.
Заголовки в HTML документах
В HTML документах предусмотрено 6 типов заголовков. Самый крупный определяется дескрипторами <H1>...</H1>, а самый мелкий дескрипторами <H6>...</H6>. Для каждого из дескриптора заголовка допускается атрибут выравнивания текста ALIGN, который может принимать следующие значения:
ALIGN=LEFT вырвнивает заголовок по левому краю;
ALIGN=RIGHT вырвнивает заголовок по правому краю;
ALIGN=CENTER располагает заголовок по центру;
ALIGN=JUSTIFY выравнивает заголовок по ширине текста, выравнивая его по левому и правому краю, если длина заголовка более одной строки. Если длина заголвка менее одной строки, то выравнивание аналогично ALIGN=LEFT.
Если атрибут ALIGN не указывается, это равнозначно ALIGN=LEFT.
Текстовые абзацы
Для выделения абзацев в HTML документах служат дескрипторы <P>...</P>. В абзаце текст автоматически распределяется по строкам, поэтому заботиться о переносе строк не требуется. Для дескриптора <P> (так же, как и для заголовков) предусмотрен атрибут ALIGN:
ALIGN=LEFT вырвнивает текст абзаца по левому краю;
ALIGN=RIGHT вырвнивает текст абзаца по правому краю;
ALIGN=CENTER центрирует текст абзаца;
ALIGN=JUSTIFY выравнивает текст абзаца по ширине (по левому и правому краю). Если длина текста менее одной строки, то выравнивание аналогично ALIGN=LEFT.
Для того чтобы избежать набора с клавиатуры повторяющихся фрагментов текста, используйте копирование.
Дескрипторы форматирования
При помощи дескрипторов <B>...</B> можно выделять текст полужирным шрифтом;
Дескрипторы <I>...</I> определяют написание курсивом;
Посредством дескрипторов <U>...</U> можно подчеркнуть текст;
Использование дескрипторов <S>...</S> позволяет
перечеркнуть написанное;
Задание
Отредактируйте файл с абзацами, выделив названия (Windows, FAR Manager, Notepad) полужирным шрифтом, а термины (браузер, редактор) - курсивом.
Зайдите на Генератрор текста- Online-Generators.ru или найдите любой генератор текста через поисковик. Скопируйте текст к себе в файл referat.html (предварительно его создав) и сделайте из него HTML страничку с центрированием заголовка и выравниванием текста по ширине. Цвет фона и текста определите самостоятельно.
Копирование изображений с Web-страничек
В качестве упражнения скопируем картинку с этой странички в каталог лабораторной работы № 2.
Кликните по картинке правой кнопкой мыши и выберите пункт меню "Сохранить изображение"
Сохраните изображение в каталог лабораторной работы № 2, убедитесь с помощью FAR Manager, что файл picture.jpg появился в этом каталоге.
Добавление изображений в HTML документ
Изображения (графика) добавляются в HTML документы посредством дескриптора <IMG> (закрывающий дескриптор для него не предусмотрен). Дескриптор <IMG> имеет множество атрибутов для "тонкой настройки" расположения рисунка на страничке, мы огораничимся рассмотрением только атрибута SRC, спомощьюкотрого указывается графический файл, который нужно отобразить в документе. Для вставки в HTML документ могут использоваться графические форматы "gif", "jpeg" или "png".
Задание
В поисковиках google или yandex по запросу "картинки" найдите сайты с картинками приличного содержания. Скопируйте несколько картинок в каталог лабораторной работы № 2 и создайте HTML страничку с этими картинками.
Л/Р №3 СПИСКИ И ТАБЛИЦЫ
В HTML предусмотрены дескрипторы, позволяющие включать в текст списки различных типов и таблицы. Мы ограничимся рассмотрением наиболее часто используемых списков - нумерованных и ненумерованных, для таблиц рассмотрим наиболее существенные атрибуты. Более полную информацию о списках и таблицах можно почерпнуть в справочниках или стандартах HTML.
Нумерованные списки
Нумерованный список определяется парой дескрипторов <OL>...</OL>, элементы списка маркируются одиночным дескриптором <LI>
Из атрибутов дескриптора <OL> рассмотрим атрибут TYPE, который позволяет задать способ нумерации элементов списка
TYPE="1" Нумерация арабскими цифрами, этот способ нумерации используется по умолчанию, если атрибут TYPE не указан явно;
TYPE="I" Нумерация большими римскими цифрами;
TYPE="i" Нумерация малыми римскими цифрами;
TYPE="A" Нумерация большими латинскими буквами;
TYPE="a" Нумерация малыми латинскими буквами;
Поэкспериментируйте, задавая разные способы нумерации.
Ненумерованные списки
Ненумерованный список определяется парой дескрипторов <UL>...</UL>, элементы списка маркируются одиночным дескриптором <LI>
Из атрибутов дескриптора <UL> рассмотрим атрибут TYPE, который задает вид начального символа элемента списка. Обратите внимание, что значение типа задается малыми буквами (для InternetExplorer)
TYPE="disk" Список начинается маленьким закрашенным кружочком;
TYPE="circle" Список начинается маленьким незакрашенным кружочком;
TYPE="square"Список начинается маленьким закрашенным квадратиком;
Поэкспериментируйте, задавая разные начальные символы для элементов списка.
Таблицы
Таблицы в HTML состоят из строк, которые, в свою очередь делятся на ячейки. Все содержимое таблицы заключается между парой дескрипторов <TABLE>...</TABLE>, для задания толщины линий используется атрибут BORDER, а для указания цвета заполнения рамки - атрибут BORDERCOLOR. Каждая сторка таблицы определяется дескрипторами <TR>...</TR>, а ячейка заключена между дескрипторами <TD>...</TD>. Ячейки, используемые для заголовков столбцов задаются дескрипторами <TH>...</TH>.
Задание 1
В поисковике Google, Яndex и т.д. найдите законы Мерфи (не менее 20) и составьте их нумерованный список на страничке murphy.html по образцу
Задание 2
В поисковике Google, Яndex и т.д. найдите английские пословицы (не менее 10) и составьте из них таблицу на страничке proverbs.html по образцу
Л/р №4 гиперсвязи и фреймы Гиперсвязи
Для описания гиперсвязей в HTML используется парный дескриптор <A>...</A> (аббревиатура английского слова anchor - якорь). Текст заключенный в в дескрипторы отображается, как правило, голубым цветом, его можно изменить, но об этом немного позже. Пока посмотрим как работает дескриптор <A>. В нашем примере оформим гиперссылку как отдельный абзац. По гиперссылке мы переходим к файлу, который указывается в атрибуте HREF дескриптора <A>. Создададим файлы index.html и hplink.html и сввяжем их гиперссылкой.
Запустив файл index.html увидим:
Щелкнув по гиперссылке, получим:
Задание 1
Порезультатом лабораторной работы №2 у Вас есть файл с рефератами referat.html, а по результатам лабораторной работы №3 файлы proverbs.html и murphy.html с английскими пословицами и законами Мерфи. Создайте индексный файл с гиперссылками на эти файлы. Вы можете скопировать эти файлы в каталог лабораторной работы №4 или указать путь к ним по правилам Unix.
Фреймы
Окно браузера может быть разбито на произвольное число независимых подокон, в каждом из которых могут отображаться разные HTML странички. Такие подокна называются фреймами. Разбиение окна браузера на фреймы осуществляется парным дескиптором<FRAMESET>...</FRAMESET>. Каждый созданный фрейм посредством этого же дескриптора может быть, в свою очередь, также разделен на фреймы. Деление окна браузера на фреймы не является телом HTML документа, поэтому дескриптор <BODY>...</BODY> не используется.
Дескриптор <FRAMESET> имеет два атрибута COLS и ROWS. Они позволяют разделять окно на вертикальные полосы (COLS - колонки) либо горизонтальные полосы (ROWS - строки). Размер полосы указывается либо в процентах от вертикального (горизонтального) размера разделяемой области, либо в экранных пикселях. После разделения на фреймы, каждый фрейм должен быть определен одиночным дескриптором <FRAME>, либо снова разделен на фреймы. Каждому значению COLS либо ROWS в порядке их следования должен однозначно соответствовать либо <FRAME> либо новый <FRAMESET>.
Пример 1
Пример 2
Показ html страниц во фреймах
Для показа во фрейме HTML При описании фрейма дескриптором <FRAME> нужно указать атрибут SRC, задающий имя файла, который будет открыт во фрейме и атрибут NAME, определяющий имя фрейма, под этимм именем фрейм будет известен в пределах создаваемого Web-сайта. Имя фрейма обеспечивает возможность кликать по гиперссылкам в одном фрейме, а просматривать файлы, открывающиеся по ссылкам, в другом фрейме, это прекрасная возможность создавать системы меню для сайтов.
Создадим три коротенькие HTML странички: title.html, с текстом "Заголовок"; menu.html, с текстом "Меню" и main.html, с текстом "Информация". Модифицируем файл index.html следующим образом:
Организация меню сайта
Добавим в наш проект два HTML файла из предыдущих лабораторных работ:
vasya.html
и dosye.html
Сделаем так, чтобы их можно было выбирать во фрейме "Меню" и выбранный файл отображался во фрейме "Информация". Для этого используются уже рассмотренные нами гиперссылки с атрибутом TARGET. Список гиперссылок мы сформируем в файле menu.html, который открывается во фрейме menu, а в гиперссылках укажем для файлов vasya.html и dosye.html TARGET="info", тогда эти файлы, будучи выбранными по гиперссылке откроются во фрейме c именем info.
Запустив индексный файл получим:
Атрибуты дескриптора <FRAME>
Мы рассмотрели два атрибута дескриптора <FRAME> - атрибут NAME, определяющий имя фрейма и атрибут SRC, указывающий имя файла, открывающегося во фрейме, рассмотрим еще несколько атрибутов:
Атрибут FRAMEBORDER - позволяет отобразить или скрыть границу фрейма, для скрытия границы между двумя фреймами нужно скрыть границу в каждом из них. Если атрибут не указан, граница отображается.
FRAMEBORDER=0 скрывает границу (InternetExplorer отображает тонкую границу);
FRAMEBORDER=1 отображает границу.
Атрибут NORESIZE - исключает возможность изменения размеров фрейма мышью, если атрибут не указан, такая возможность есть;
Атрибут SCROLING - отображает или заперщает отображение полос прокрутки. Если информация не умещается во фрейме, то на правой и нижней границе фрейма могут появлятся полосы прокрутки.
SCROLING=AUTO (используется по умолчанию) - если информация помещается во фрейме полосы прокрутки не отображаются, если не умещается - отображаются;
SCROLING=YES - полосы прокрутки всегда отображаются;
SCROLING=NO - полосы прокрутки не отображаются;