Лабораторная работа №1. Структура web-страницы Цель работы Основные понятия
реклама
Лабораторная работа №1. Структура web-страницы Цель работы: Познакомиться со структурой web-страницы. Основные понятия: Язык HTML не является языком программирования в традиционном понимании. При разработке HTML-документа выполняется разметка текстового документа, которая служат для указания формы представления информации. Для этого в текст вставляются специальные коды – тэги (tags). Тэги заключаются в угловые скобки (< >). Все объекты, не заключенные в угловые скобки, воспринимаются браузером как текстовые элементы. Существует два типа тэгов: контейнеры и одиночные тэги. Контейнер – это пара тэгов, состоящая из открывающего и закрывающего тэга. Закрывающий тэг записывается так же, как и открывающий, но с символом "/" (слеш) перед именем тэга. <ТЭГ> … </ТЭГ> Теги могут записываться с параметрами (атрибутами). Наборы допустимых параметров индивидуальны для каждого тэга. Параметры отделяются друг от друга пробелами. Порядок следования параметров произволен. Многие параметры требуют указания их значений, которые ставятся после названия параметра через знак равенства. Значение параметра может записываться в кавычках, так и без них. Единственным случаем, в котором без кавычек не обойтись, является случай, когда в значении параметра имеются пробелы. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тэга. <ТЭГ параметр1="значение1" … параметрN="значениеN"> содержимое контейнера </ТЭГ> HTML позволяет использовать принцип вложения одного тэга в другой. <ТЭГ1> <ТЭГ2> …</ТЭГ2> </ТЭГ1> Язык HTML относится к языкам нечувствительным к регистру, в котором записываются команды (теги и имена их параметры). Некоторые элементы языка HTML могут иметь в качестве параметров переменные, обозначающие цвета. Определить цвет при создании webстраницы можно двумя методами: посредством меток, обозначающих названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки. Создание веб-страниц В языке HTML для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту можно получить любой желаемый оттенок путём смешения всего лишь трех красок: красной, зелёной и синей. Для обозначения цвета шестнадцатеричным цифровым кодом принят следующий синтаксис записи: перед самим кодом ставится символ #, далее следует набор из шести знаков в шестнадцатеричной системе счисления: первые два знака – яркость красного цвета, вторые – зелённого, третьи – синего. Color = Red или Color = #FF0000 Иногда у web-мастера возникает необходимость использовать в тексте своей web-странички символы, зарезервированные для обозначения элементов кода HTML. Для того чтобы избежать проблем при отображении подобных элементов были придуманы так называемые escape-последовательности ("нотации символьных объектов"). Все escape-последовательности начинаются с символа ампресанд (&) и заканчиваются точкой с запятой, а между ними размещается сама команда, записываемая в нижнем регистре: Символ < > " & © ® Значение Символ "меньше, чем"; левая угловая скобка Символ "больше, чем"; правая угловая скобка Парные кавычки Ампресанд Неразрывный пробел (словосочетания, разделенные таким пробелом, не разрываются при переносе) Символ авторского права Символ зарегистрированной торговой марки Команда &lt; &gt; &quot; &amp; &nbsp; &сору; &reg; Все web-страницы имеют одинаковую структуру: Документ HTML Заголовок документ Внешний заголовок Тело документа Основной код 2 <HTML> <HEAD> <TITLE> Внешний заголовок </TITLE> </HEAD> <BODY> Основной код </BODY> </HTML> Создание веб-страниц Тэг <HTML> обозначает начало HTML-кода. Он должен всегда начинать описание документа, а завершать описание документа должен тэг </HTML>. Эти тэги обозначают, что находящиеся между ними строки представляют единый HTML-документ. Сам по себе документ является обыкновенным текстовым файлом. Большинство браузеров не воспринимают текст, находящийся за пределами этой пары тегов. Тэг <HEAD> определяет заголовок web-страницы и может включать следующие теги: TITLE – определяет заголовок документа в окне браузера; META – сообщает браузеру дополнительную информацию о документе; BASE – задаёт базовый адрес документа; STYLE – определяет внешний вид документа; ISINDEX – указывает, что данный документ будет использоваться в поисковых системах; SCRIPT – определяет операторы интерпретируемых языков программирования, таких как JavaScript и VBScript. Тэг <BODY> означает тело (основную часть) HTML-документа и содержит в себе всю отображаемую на странице информацию. Тэг <BODY> может иметь следующие параметры: BACKGROUND – указывает на URL-адрес изображения, которое используется в качестве фонового; BGCOLOR – определяет цвет фона документа; TEXT – определяет цвет текста; LINK – определяет цвет еще не просмотренной ссылки; ALINK – определяет цвет активной гиперссылки, т.е. гиперссылки после щелчка на неё мышью и до момента загрузки вызываемого ресурса; VLINK – определяет цвет уже просмотренной ссылки. При отображении текстовых документов в окне браузера место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тэг принудительного перевода строки <BR>, который не имеет соответствующего закрывающего тэга. Код HTML может содержать комментарии, которые не отображаются на экране. Комментарий открывается символьной последовательностью, начинающейся с открывающей угловой скобки, восклицательного знака и двух знаков дефиса (<!--), закрывается сочетанием двух знаков дефиса и закрывающей угловой скобкой (-->). Они могут быть произвольного длины. <!-- текст комментария --> 3 Создание веб-страниц Порядок выполнения работы: 1. Откройте Блокнот. 2. Напишите следующий текст: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> 3. Сохраните файл в папку D:\Users\...\Web\Lab1\ как текстовый файл с именем index1.html . 4. Откройте сохранённый документ в браузере. 5. Для документа задайте заголовок: Моя первая страничка 6. Сделайте, чтобы в окне браузера выводилась надпись, содержащая: Ваше Ф.И.О группа специальность год 7. Посмотрите, как информация отображается в окне браузера. 8. Сделайте, чтобы информация была разбита на строки. 9. Сделайте, чтобы ниже введённого текста выводилась надпись: ® ФГБОУ ВПО "Тамбовский государственный технический университет" 10. Сделайте комментарий на страничке. В комментарий напишите сегодняшнюю дату. 11. Измените фоновый цвет странички, используя шестнадцатеричный цифровой код цвета. 12. Откройте Paint. 13. В Paint создайте рисунок размером 50х50 точек и сохраните его в папку D:\Users\...\Web\ Lab1\ в формате JPG под именем bgpic. 14. Сделайте этот рисунок фоновым для созданной web-страницы. 15. Измените цвет текста. 4
