Читайте также:
|
Практическая работа
Цель работы: сформировать навыки по созданию и редактированию HTML-документов, сформировать умения по использованию служебных элементов языка HTML.
Задание:
В текстовом редакторе Блокнот создать web – страницы простейшей структуры, используя базовые теги HTML.
Методические указания по выполнению задания:
1. В папке своей группы создайте папку под именем HTML для хранения всех созданных нами web-страниц. В папке HTML создайте папку Lesson1, в ней мы будем сохранять все полученные в ходе нашего занятия web-страницы.
2. Откройте текстовый редактор Блокнот. Редактор откроется, и курсор окажется в первой строке.
3. Создайте HTML – документ по образцу. HTML -документ — это просто текстовый файл с расширением .htm.
Конструкции HTML называются тегами. Для того чтобы браузер мог отличить их от обычного текста, они заключаются в угловые скобки < и >: например, <html>.
Тэг обозначает начало действия какой-либо инструкции отображения. Если эта инструкция применяется ко всему документу, то такой тэг не имеет своего закрывающего двойника. Большинство тегов все-таки парные, и второй тэг прекращает действие первого. Например, каждая Web -страница должна начинаться с тэга <html>, а заканчиваться его закрывающим двойником </html>. Обратите внимание, закрывающий тэг открывающего лишь наличием косой черты / после первой угловой скобки.
Многие открывающие тэги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тэг.
Наименования тэгов и их атрибутов можно вводить как большими, так и маленькими буквами. Например, тэги <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Любая Web -страница структурно разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web -странице, а в теле Web -страницы мы описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web -страницы ограничивается тэгами <head> и </head>, а тело документа обозначается тэгами <body> и </body>.
4. Сохраните созданный файл под именем page1.htm в папке Lesson1, для этого выполните команду Файл - Сохранить как... В диалоговом окне Сохранить как в поле Тип файла выберите вариант Все файлы.
5. Откройте файл page1.htm в окне любого браузера, например Mozilla Firefox, выполнив команду Файл – Открыть файл или просто щелкните двойным щелчком левой кнопкой мыши по имени файла в Проводнике Windows, тогда автоматически будет запущен браузер, установленный по умолчанию, и в него уже будет загружен выбранный HTML -документ. Вот как выглядит наша первая Web -страница в браузере Mozilla Firefox:
Рассмотрим обязательные теги HTML -документа:
· <html>... </html>. Тэг <html> должен открывать HTML -документ. Аналогично, тэг </html> должен завершать HTML -документ.
· <head>... </head>. Эта пара тэгов указывает на начало и конец заголовка документа. В этот раздел может включаться наименование документа и множество служебной информации, о которой будет говориться чуть позже.
· <title>... </title>. Все, что находится между тэгами <title> и </title>, толкуется браузером как название документа. Рекомендуется название не длиннее 64 символов. Заголовком Web -страницы никогда не следует пренебрегать, т. к. это самое первое, что видит посетитель Web -сайта. Заголовок отображается еще до того, как произойдет окончательная загрузка содержимого страницы, поэтому выбирать его следует тщательно.
· <body>... </body>. Эта пара тэгов указывает на начало и конец тела HTML -документа. Оно определяет содержание документа.
· <H1>... </H1> — <H6>... </H6>. Для выделения логических частей текста обычно используют заголовки (headings). Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы указывает уровень заголовка (всего их может быть 6). Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
· <P>... </P>. Такая пара тэгов описывает абзац. Все, что заключено между тэгами <P> и </P>, воспринимается как один абзац. Абзацы отделяются друг от друга отступом в одну строку. Для того чтобы в окне просмотра браузера отобразить текстовую строку, никаких тэгов применять не требуется. Достаточно написать текст. Но когда нужно разбить его на абзацы, тут уж без этих тэгов не обойтись. Тэги <Hi> и <P> могут содержать дополнительный атрибут ALIGN.
6. Создайте в Блокноте новый файл и наберите в нем текст HTML - документа:
7. Сохраните этот файл под именем page2.htm в папке Lesson1 и посмотрите его в окне браузера.
8. Рассмотрим возможности улучшения нашего простого HTML -документа. Далее поговорим о тэгах, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые к тому же должны вводиться только маленькими буквами. Создайте в Блокноте новый файл и наберите в нем текст HTML - документа. Сохраните этот файл под именем page3.htm в папке Lesson1 и посмотрите его в окне браузера.
<BR> - этот тэг используется, если необходимо перейти на новую строку, не прерывая абзаца, что очень удобно при публикации стихов. Иногда его используют так же для того, чтобы увеличить расстояние между абзацами. Тэг <BR> обозначает то место, где надо перенести текст на другую строку.
9. Создайте в Блокноте новый файл и наберите в нем текст HTML - документа. Сохраните этот файл под именем page4.htm в папке Lesson1 и посмотрите его в окне браузера.
<HR>. Тэг <HR> вставляет в HTML -документ вот такую горизонтальную линию. Тэг обладает несколькими атрибутами, которые позволяют достаточно детально определять внешний вид горизонтальной линии.
Атрибут ALIGN задает горизонтальное выравнивание линии. Он может принимать одно из трех предустановленных значений — LEFT, RIGHT и CENTER, которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно. По умолчанию используется значение CENTER.
Если в состав тэга <HR> входит атрибут NOSHADE, то отображаемая горизонтальная линия не будет иметь тени.
Тэг может включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет длину линии в процентах от ширины экрана, по умолчанию используется значение 100%).
Внеаудиторная самостоятельная работа:
Ответьте на вопросы письменно в тетради:
Дата добавления: 2015-10-02; просмотров: 44 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Висновок | | | Приклад виконання. |