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

Конспект занятия

Создание текстовой Web-страницы с помощью языка разметки гипертекста HTML.

Егорова Ольга Олеговна

16 марта 2021

1225

Содержимое публикации

Раздел 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 ДОКУМЕНТ: Сделаем перевод строки <br>

<html>

<head>

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

</head>

<body>

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

Отгадайте, ребятишки; 
Сей предмет похож на книжку. 
Точно так же он легко, 
Быстро открывается, 
Но листков внутри него 
И не наблюдается... 
Вся на свете ребятня 
Этой книжке рада, 
Но сидеть за ней полдня 
Лучше бы не надо... 
Пусть она немало знает, 
Развивает ловкость рук, 
Но при этом утомляет... 
Книжка эта ноутбук 
</body>
</html>

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

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

<html>

<head>

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

</head>

<body>

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

Отгадайте, ребятишки; 
Сей предмет похож на книжку. 
Точно так же он легко, 
Быстро открывается, 
Но листков внутри него 
И не наблюдается... 
Вся на свете ребятня 
Этой книжке рада, 
Но сидеть за ней полдня 
Лучше бы не надо... 
Пусть она немало знает, 
Развивает ловкость рук, 
Но при этом утомляет... 
Книжка эта ноутбук 
</body>
</html>

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

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

<html>

<head>

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

</head>

<body>

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

<palign=left >

Отгадайте, ребятишки; 
Сей предмет похож на книжку. 
Точно так же он легко, 
Быстро открывается,

<palign=center >

Но листков внутри него 
И не наблюдается... 
Вся на свете ребятня 
Этой книжке рада,

<palign=right >

Но сидеть за ней полдня 
Лучше бы не надо... 
Пусть она немало знает, 
Развивает ловкость рук, 
Но при этом утомляет... 
Книжка эта ноутбук 
</body>
</html>

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

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

<html>

<head>

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

</head>

<body>

<font color="red"> <H1> Стихокомпьютере </H1>

<palign=left >

Отгадайте, ребятишки; 
Сей предмет похож на книжку. 
Точно так же он легко, 
Быстро открывается,

<palign=center >

Но листков внутри него 
И не наблюдается... 
Вся на свете ребятня 
Этой книжке рада,

<palign=right >

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

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

<html>

<head>

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

</head>

<body>

<font color="red"> <H1>Стихокомпьютере </H1></font>

<fontcolor="blue"> Отгадайте,ребятишки; 
Сейпредметпохожнакнижку. 
Точно так же он легко, 
Быстро открывается, </font>

<fontcolor="008000">

Но листков внутри него 
И не наблюдается... 
Вся на свете ребятня 
Этой книжке рада, </font>

<palign=right >

<fontcolor="fuchsia"> Но сидеть за ней полдня 
Лучше бы не надо... 
Пусть она немало знает, 
Развивает ловкость рук, 
Но при этом утомляет... 
Книжка эта ноутбук </font>
</body>
</html>

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

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

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

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

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

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

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

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

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

Колмыкова Е.А., Кумскова И.А. Информатика: учеб. Пособие для студ. сред. проф. образования М., Издательский центр «Академия», 2017

Фуфаев Э.В. Пакеты прикладных программ: учеб. пособие для студ. учреждений сред. проф. образования / Э.В. Фуфаев, Л.И. Фуфаева. – 7 –е изд., испр. – М : Издательский центр «Академия», 2017.

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

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

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

Астафьева Н.Е., Гаврилова С.А., Цветкова М.С.Информатика и ИКТ: Практикум для профессий и специальностей технического и социально-экономического профилей: учеб. пособие для студ. учреждений сред. проф. образования / под ред. М.С.Цветковой. — М., 2017

Малясова С.В., Демьяненко С.В. Информатика и ИКТ: Пособие для подготовки к ЕГЭ : учеб. пособие для студ. учреждений сред. проф. образования / под ред. М.С.Цветковой. — М., 2017.

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

Электронно-библиотечная система BOOK.RU [Электронный ресурс] — Режим доступа: https://www.book.ru/

Электронно-библиотечная система ACADEMIA [Электронный ресурс] — Режим доступа: https://www.academia-moscow.ru

Электронно-библиотечная система ЮРАЙТ [Электронный ресурс] — Режим доступа: https://urait.ru/

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

Информатика и информационно-коммуникационные технологии [Электронный ресурс] // Федеральный центр информационно-образовательных ресурсов. – Режим доступа: http://fcior.edu.ru/catalog/srednee_obshee?discipline_oo=6&class=&learning_character=&accessibility_restriction=&page=2

Федеральные образовательные ресурсы для общего образования [Электронный ресурс] //Российское образование: федеральный портал. – Режим доступа: http://www.edu.ru/db/portal/sites/res_page.htm

Скачать

Комментировать