ЛАБОРАТОРНАЯ РАБОТА №2 ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ Структура HTML-страницы
advertisement
ЛАБОРАТОРНАЯ РАБОТА №2 < Структура HTML-документа> ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ Структура HTML-страницы В HTML-странице можно выделить заголовок (Head) и тело (Body) документа. В заголовке в основном содержаться служебные сведения о самой странице, многие из которых не влияют на отображение Web-страницы. В противоположность заголовку все данные, помещенные в тело страницы, выводятся на экран.Заголовок и тело страницы определяются специальными тегами, которые всегда размещаются в определенном порядке. Структура HTML-кода страницы <HTML> <HEAD> Раздел заголовка страницы, здесь помещаются теги служебной информации. </HEAD> <BODY> Все, что расположено здесь, отображается на Web-странице. </BODY> </HTML> Корректно составленный HTML-код начинается с тега <html>. Открывающий тег <head> и закрывающий тег </head> формируют раздел заголовка. В состав заголовка помещается описание документа. Основная часть html-файла - тело документа - формируется с помощью пары тегов <body> и </body>. Между этими тегами располагаются те данные, которые должны отображаться в окне броузера. Заканчивается html-код закрывающимся тегом </html>. Элементы, HTML-теги и атрибуты В языке HTML определены элементы, теги и атрибуты. Элемент состоит из открывающегося и закрывающегося тегов, между которыми расположены данные, например, <p align="justify">Это простой абзац</p> Здесь элемент - это абзац на странице. Тег определяется именем, которое указывается между открывающейся и закрывающейся угловыми скобками (символами "<" и ">"); имя тега определяет, как должна отображаться информация, содержащаяся в составе элемента. Например, тег <p> в первом примере определяет абзац. Атрибуты уточняют действие тега. Например, align="justify" назначает данному абзацу выравнивание "по ширине". При использовании тегов необходимо соблюдать следующие правила: все стандартные теги начинаются с символа "<" и заканчиваются символом ">" (например, <html>. между символами, составляющими имя тега, пробелы недопустимы. Также нежелательно включать пробелы между угловыми скобками и именем тега. каждому открывающему тегу должен соответствовать закрывающий. Закрывающий тег отличается от открывающего тем, что перед именем тега стоит косая черта (</html>). при создании html-кода используйте в именах тегов только символы нижнего регистра. Этого требует спецификация XHTML 1.0. для разделения атрибутов, а также джля того, чтобы отделить первый атрибут от имени тега, используются пробелы. Наличие пробелов в составе значения атрибута может привести к ошибке. придерживайтесь требуемой структуры HTML-документа. Задавайте основные теги в правильном порядке и строгой иерархии. Атрибуты уточняют действие тегов. Во многих тегах атрибуты не предполагаются, но есть и такие теги, в которых обязательно должны указываться атрибуты. Пара тегов <p> и </p> определяет абзац в составе страницы. Открывающий тег <p> может состоять только из имени, но при необходимости в него можно включить некоторые атрибуты. Так, например, в составе тега <p> может присутствовать атрибут align, задающий тип выравнивания абзаца. Атрибуты указываются лишь в открывающем теге. Не пытайтесь включить атрибут в состав закрывающего тега. Так, например, открывающий тег <p align="justify"> составлен корректно. Ему соответствует закрывающий тег </p>. В составе тега может присутствовать несколько атрибутов. Для большинства атрибутов задаются значения. Именно они в конечном итоге определяют особенности выполнения тегов. В приведенном выше примере атрибут align имеет значение jusify. Значение атрибута указывается в кавычках. ЛАБОРАТОРНАЯ РАБОТА Начало работы в Dreamweaver MX 1) Запустите программу Macromedia Dreamweaver MX (Пуск - Программы - Macromedia Macromedia Dreamweaver MX). 2) Рассмотрите основные элементы интерфейса программы . 3) Переключитесь в режим Code, щелкнув мышкой на кнопке . 4) Переключитесь в режим Code and Design, щелкнув мышкой на кнопке . Переключитесь в режим Design, щелкнув мышкой на кнопке . Перелючитесь в режим Code and Design, выбрав пункт меню View - Code and Design. Обратите внимание на HTML-код пустой страницы. (Структура HTML-кода) Вместо Untitled Document между тэгами <title></title> напишите "Моя первая страница". В результате должно получиться: <title>Моя первая страница</title> 9) (если в программе некорректно отображаются русские буквы, то выполните настройку программы) 10) Нажмите клавишу Design и вы увидите, как изменения HTML-кода отразились в окне документа (в заголовке окна программы появилась надпись "Моя первая страница (Untitled-1)" 11) Нажмите клавишу F12, чтобы увидеть как выглядит ваша страница в броузере. Обратите внимание на заголовок окна броузера. 5) 6) 7) 8) Принципы языка HTML 1) Обратите внимание на HTML-код страницы и сделайте так, чтобы между тегами <body> </body> не было никакой другой информации. 2) Между тегами <body> </body> напишите какое-нибудь стихотворение. В результате должно получиться: < body> Люблю тебя, Петра творенье, Люблю твой строгий, стройный вид, Невы державное теченье, Береговой его гранит. < /body> 3) Нажмите клавишу Design и посмотрите результат. 4) После каждой строчки поставьте тег <br>. В результате должно получиться: < body> Люблю тебя, Петра творенье, <br> Люблю твой строгий, стройный вид, <br> Невы державное теченье, <br> Береговой его гранит. <br> < /body> 5) Нажмите Design и посмотрите результат 6) После стихотворения напишите фамилию автора. В результате должно получиться: < body> Люблю тебя, Петра творенье, <br> Люблю твой строгий, стройный вид, <br> Невы державное теченье, <br> Береговой его гранит. <br> Пушкин А.С. < /body> 7) Сделаем стихотворение и подпись автора отдельными абзацами. Поставьте тег абзаца <p> где показано ниже: <body> <p>Люблю тебя, Петра творенье, <br> Люблю твой строгий, стройный вид, <br> Невы державное теченье, <br> Береговой его гранит. </p> <p>Пушкин А.С.</p> < /body> 8) Обрамите фамилию автора тегами <b>. В результате должно получиться <b>Пушкин А.С.</b>. 9) Обрамите текст стихотворения тегами <i>. В результате должно получиться: <p><i>Люблю тебя, Петра творенье, <br> Люблю твой строгий, стройный вид, <br> Невы державное теченье, <br> Береговой его гранит. </i></p> < p><b>Пушкин А.С.</b></p> </body> 10) Поставьте лишние пробелы между словами в какой-нибудь строчке стихотворения. Например: Люблю тебя, Петра творение, 11) Посмотрите результат в режиме Design. Атрибуты тегов 1) Обрамите фамилию автора тегами <marquee>. Должно получиться: <marquee><p><b>Пушкин А.С.</b></p></marquee> Оцените результат. 2) В открывающемся теге <marquee> поставьте атрибут direction="right". В результате должно получиться: <marquee direction="right"><p><b>Пушкин А.С.</b></p></marquee> Оцените результат 3) Поэкспериментируйте с атрибутами: direction="up" direction="down" behavior="alternate" behavior="slide" 4) Выберите пункт меню Help - Reference. 5) В раскрывающемся списке Book выберите "O'Reilly HTML References", из списка Tag выберите MARQUEE, а из соседнего списка выберите атрибут behavior. 6) Поработайте со справочной системой и выясните значения остальных атрибутов. (для владеющих техническим английским языком) ТЕСТ 1. В каком разделе html-страницы находится тег <title>? в разделе <body> в разделе <head> может находится в любом разделе 2. В html-коде абзаца Вы между двумя словами поставили пять пробелов. Сколько пробелов Вы увидите в браузере? Пять Один Ни одного Два 3. Какой из перечисленных тегов определяет абзац? <BR> <P> <H1> 4. Какой из перечисленных тегов только переводит курсор на новую строку? <BR> <P> <H1> 5. Какая из приведенных конструкций является синтаксически верной? 1) <p align=center> 2) <marquee direction="right"> 3) <marquee direction="2"> 1, 2, 3 2, 3 1, 2
