Практическая работа "Создание текстовой Web-страницы"

Раздел 4. Сетевые технологии обработки информации и автоматизированные

информационные системы (АИС)

Тема 4.2. Создание Web-страниц.

Практическая работа Создание текстовой Web-страницы.

Учебная цель: Создание Web-страницы с использованием языка разметки текста

HTML в простейшем текстовом редакторе Блокнот.

Формирование общих компетенций (ОК): ОК 2, ОК 4, ОК 5, ОК 6.

Задачи: знакомство со структурой Web-документа и языком разметки гипертекста

HTML, развитие творческих способностей к самовыражению, посредством создания

сайтов.

Время 2 часа

Используемое программное обеспечение: Internet Explorer (или другой

установленный браузер).

Содержание работы: изучите теоретический материал, выполните задания.

Теоретический материал:

Теги – определенные последовательности символов, заключенные между знаками <

и >

< - символ начало тега, > - символ конца тега.

Все, что заключено между тегами <html> и </html> - является html-документом.

Html –документ состоит из двух частей.

Первая – заголовок. Она находится между тегами <head> и </head>. В нем содержится

информация о документе, которая не выводится на экран. Название странички

располагается между тегами <title> и </title>.

Вторая часть – тело, которое выводится на

экран. Оно заключается между тегами

<body> и </body>.

Теги бывают парные и непарные. Парные

теги бывают открывающие и закрывающие.

/ - символ закрывающего тега. Область

парного тега начинается с того места, где

стоит открывающий тег, а кончается там,

где встречается закрывающий. Теги можно

печатать прописными и заглавными

буквами

Порядок работы:

1. Открыть текстовый редактор Блокнот

ввести код, содержащий основные теги для

определения структуры HTML-документа:

1ДОКУМЕНТ:

<HTML>

<HEAD>

<TITLE>Компьютер</TITLE>

</HEAD>

<BODY>

Все о компьютерах

</BODY>

</HTML>

Сохраните как 1.HTML

2 ДОКУМЕНТ: Добавим заголовок и текст

<html>

<head>

<title> Компьютер </title>

</head>

<body>

<H1> Стих о компьютере </H1>

Отгадайте, ребятишки;

Сей предмет похож на книжку.

Точно так же он легко,

Быстро открывается,

Но листков внутри него

И не наблюдается...

Вся на свете ребятня

Этой книжке рада,

Но сидеть за ней полдня

Лучше бы не надо...

Пусть она немало знает,

Развивает ловкость рук,

Но при этом утомляет...

Книжка эта ноутбук

</body>

</html>

Сохраните как 2.HTML

3 ДОКУМЕНТ: Сделаем перевод строки

<html>

<head>

<title> Компьютер </title>

</head>

<body>

<H1> Стих о компьютере </H1>

Отгадайте, ребятишки;

Сей предмет похож на книжку.

Точно так же он легко,

Быстро открывается,

Но листков внутри него

И не наблюдается...

Вся на свете ребятня

Этой книжке рада,

Но сидеть за ней полдня

Лучше бы не надо...

Пусть она немало знает,

Развивает ловкость рук,

Но при этом утомляет...

Книжка эта ноутбук

</body>

</html>

Сохраните как 3.HTML

4 ДОКУМЕНТ: Добавим Абзац

<html>

<head>

<title> Компьютер </title>

</head>

<body>

<H1> Стих о компьютере </H1>

Отгадайте, ребятишки;

Сей предмет похож на книжку.

Точно так же он легко,

Быстро открывается,

Но листков внутри него

И не наблюдается...

Вся на свете ребятня

Этой книжке рада,

Но сидеть за ней полдня

Лучше бы не надо...

Пусть она немало знает,

Развивает ловкость рук,

Но при этом утомляет...

Книжка эта ноутбук

</body>

</html>

Сохраните как 4.HTML

5 ДОКУМЕНТ: Выравнивание текста

<html>

<head>

<title> Компьютер </title>

</head>

<body>

<H1> Стих о компьютере </H1>

Отгадайте, ребятишки;

Сей предмет похож на книжку.

Точно так же он легко,

Быстро открывается,

Но листков внутри него

И не наблюдается...

Вся на свете ребятня

Этой книжке рада,

Но сидеть за ней полдня

Лучше бы не надо...

Пусть она немало знает,

Развивает ловкость рук,

Но при этом утомляет...

Книжка эта ноутбук

</body>

</html>

Сохраните как 5.HTML

6 ДОКУМЕНТ: Заливка текста цветом

<html>

<head>

<title> Компьютер </title>

</head>

<body>

<H1> Стих о компьютере </H1>

Отгадайте, ребятишки;

Сей предмет похож на книжку.

Точно так же он легко,

Быстро открывается,

Но листков внутри него

И не наблюдается...

Вся на свете ребятня

Этой книжке рада,

Но сидеть за ней полдня

Лучше бы не надо...

Пусть она немало знает,

Развивает ловкость рук,

Но при этом утомляет...

Книжка эта ноутбук

</body>

</html>

Сохраните как 6.HTML

7 ДОКУМЕНТ: Способы заливки текста цветом

<html>

<head>

<title> Компьютер </title>

</head>

<body>

<H1> Стих о компьютере </H1>

Отгадайте, ребятишки;

Сей предмет похож на книжку.

Точно так же он легко,

Быстро открывается,

Но листков внутри него

И не наблюдается...

Вся на свете ребятня

Этой книжке рада,

Но сидеть за ней полдня

Лучше бы не надо...

Пусть она немало знает,

Развивает ловкость рук,

Но при этом утомляет...

Книжка эта ноутбук

</body>

</html>

Сохраните как 7.HTML

ЗАДАНИЕ №8 Создайте аналогично свою Web-страницу.

Критерии оценки:

Оценка «5» - выполнено 8 заданий, ошибки незначительные либо отсутствуют.

Оценка «4» - выполнено 7 заданий и ½ Задания №8, ошибки незначительные либо

отсутствуют.

Оценка «3» - выполнено 6-7 заданий, ошибки незначительные либо отсутствуют.

Оценка «2» - выполнено менее 6 заданий.

Информационное обеспечение.

Основные источники:

1. Колмыкова Е.А., Кумскова И.А. Информатика: учеб. Пособие для студ. сред. проф.

образования М., Издательский центр «Академия», 2017

2. Фуфаев Э.В. Пакеты прикладных программ: учеб. пособие для студ. учреждений

сред. проф. образования / Э.В. Фуфаев, Л.И. Фуфаева. – 7 –е изд., испр. – М : Издательский

центр «Академия», 2017.

Дополнительные источники:

1. Михеева Е.В. Информационные технологии в профессиональной деятельности

(учебное пособие для студ. сред. проф. образования) М., Издательский центр «Академия»,

2017

2. Михеева Е.В. , Титова О.И. Информатика (учебник для студ. сред. проф. образования

М., Издательский центр «Академия», 2017

3. Астафьева Н.Е., Гаврилова С.А., Цветкова М.С. Информатика и ИКТ: Практикум

для профессий и специальностей технического и социально-экономического профилей:

учеб. пособие для студ. учреждений сред. проф. образования / под ред. М.С.Цветковой. —

М., 2017

4. Малясова С.В., Демьяненко С.В. Информатика и ИКТ: Пособие для подготовки к

ЕГЭ : учеб. пособие для студ. учреждений сред. проф. образования / под ред.

М.С.Цветковой. — М., 2017.

Интернет-ресурсы

1. Электронно-библиотечная система BOOK.RU [Электронный ресурс] — Режим

доступа: https://www.book.ru/

2. Электронно-библиотечная система ACADEMIA [Электронный ресурс] — Режим

доступа: https://www.academia-moscow.ru

3. Электронно-библиотечная система ЮРАЙТ [Электронный ресурс] — Режим

доступа: https://urait.ru/

4. Каталог видеоуроков TeachVideo.ru [Электронный ресурс] — Режим доступа: http://

www.teachvideo.ru.

5. Информатика и информационно-коммуникационные технологии [Электронный

ресурс] // Федеральный центр информационно-образовательных ресурсов. – Режим

доступа:

http://fcior.edu.ru/catalog/srednee_obshee?discipline_oo=6&class=&learning_character=&acces

sibility_restriction=&page=2

6. Федеральные образовательные ресурсы для общего образования [Электронный

ресурс] //Российское образование: федеральный портал. – Режим доступа:

http://www.edu.ru/db/portal/sites/res_page.htm

Скачать материал

Практическая работа "Создание текстовой Web-страницы"

Информатика - еще материалы к урокам:

Предметы

Похожие материалы