Практическая работа №1 по теме:
«Структура HTML документа. Создание Web-страницы»
Цель: научить создавать простейшие HTML-документы, разбивать текст на абзацы, выполнять выравнивание различными способами, просматривать Web-страницы с помощью браузера; развитие познавательного интереса; воспитание аккуратности, бережного отношения к технике.
Теги — это определённые последовательности символов, заключенные между знаками < (меньше} и > (больше). Символ < обозначает начало теги, символ > обозначает конец тега.
HTML-документ – это всё, что заключено между тегами <HTML> и </HTML>.
Структура HTML документа
|
|
Заголовок находится между тегами <HEAD> и </HEAD>. В нем содержится информация о документе, которая не выводится на экран (является необязательным элементом). Название странички располагается между тегами <TITLE> и </TITLE> и появляется в верхней рамке окна программы просмотра. Прописные и строчные буквы в написании тегов значения не имеют. Тело выводится на экран программой просмотра (браузером) – текст, картинки, видеофрагменты. Оно заключается между тегами <BODY> и </BODY>.
|
Задание 1. Создание простейшего HTML-документа.
1.Откройте текстовый редактор Блокнот
2.Создайте в нем следующий документ:
<HTML>
<HEAD>
<ТITLE> Моя страничка </TITLE>
</HEAD>
<BODY>
Привет! Это моя первая страничка!
</BODY>
</HTML>
- Сохраните этот файл в своей папке, выполнив команду Файл/ Сохранить как, в поле Имя файла введите Пример.html. НЕ ЗАКРЫВАЯ Блокнот откройте этот файл в окне программы просмотра Internet Explorer с помощью команды Файл/ Открыть.
Задание 2. Разбиение на абзацы, различные способы выравнивания.
|
Разбиение на абзацы |
<P> текст </P> |
|
|
Абзац с выравниваем |
<P ALIGN=” Left”> текст </P> <P ALIGN=” Center”> текст </P> <P ALIGN=” Right”> текст </P> <P ALIGN=” Justify”> текст </P> |
По левому краю По центру По правому краю По ширине |
|
Перевод на новую строку в абзаце |
<BR> |
|
|
Заголовок (уровни от 1 до 6) |
<H1> текст1 </H1> … <H6> текст6 </H6> |
|
|
Заголовок с выравниваем |
<H1 ALIGN=”Left”> текст </H1> |
|
Замечание: пробелы и клавишу Enter внутри абзаца можно использовать произвольно (в браузере это не отображается).
1.Усовершенствуйте свою страничку, добавив в нее следующий текст:
<html> <title> первые стихи </title>
<body>
<p align=center> Привет! Это моя первая страничка!
<p align=left> В лесу родилась елочка.
В лесу она росла.
<p align=right> Зимой и летом стройная, зеленая была.
<p align=justify> Метель ей пела песенку:
«Спи, елочка, бай-бай».
Мороз снежком укутывал:
«Смотри, не замерзай!»
</body>
</html>
- Сохраните изменения, выполнив команду Файл/ Сохранить. НЕ ЗАКРЫВАЯ Блокнот откройте этот файл в окне программы просмотра Internet Explorer с помощью команды Файл/ Открыть, чтобы увидеть изменения нажмите кнопку
Обновить. - Приведите свою страничку к предложенному виду, добавив, необходимые теги.
Привет! Это моя первая страничка!
В лесу родилась елочка.
В лесу она росла.
Зимой и летом стройная,
Зеленая была.
Метель ей пела песенку:
«Спи, елочка, бай-бай».
Мороз снежком укутывал:
«Смотри, не замерзай!»
- Сохраните изменения,. НЕ ЗАКРЫВАЯ Блокнот просмотрите с помощью браузера Internet Explorer (чтобы увидеть изменения нажмите кнопку Обновить).
5.Вставьте после фразы «Привет! Это моя первая страничка!» два заголовка:
Заголовок первого уровня: Меня зовут (впишите свое имя)
Заголовок второго уровня: Я учусь в группе (впишите номер своей группы).
Заголовок третьего уровня: Это моя любимая песенка
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
7.Выровняйте заголовки следующим образом:
Заголовок первого уровня по левому краю,
Заголовок второго уровня по центру,
Заголовок третьего уровня по правому краю.
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Подведение итогов
- Сделайте в тетради конспект теоретического материала.
- Ответьте на следующие вопросы:
1.Что такое , для чего используется?
2.Какими способами можно создать Web-страницу?
3. Назовите обязательные и необязательные элементы HTML документа. Какового их назначение?
4. Каким образом можно сохранить HTML документ, созданный в Блокноте? Как его просмотреть?
5. Что делать, если закрыли Блокнот, а вам необходимо внести изменения в HTML документ?
Домашнее задание:
- Выучите конспект.
- Сформулируйте название вашего будущего сайта, подберите к нему материал.