Просмотр содержимого документа
«Разработка урока по информатике на тему: Разработка Web-сайтов с использованием языка разметки гипертекста HTML. Web-страницы и Web-сайты.»
Урок №29.
Тема урока: Разработка Web-сайтов с использованием языка разметки гипертекста HTML. Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице.
Цели урока:
- познакомить учащихся с языком разметки гипертекста HTML, структурой Web-страницы и форматированием текста на Web-странице;
- воспитывать внимание, прилежание, любовь к предмету.
Оборудование: презентация.
Ход урока:
Организация класса. Проверка отсутствующих.
Проверка домашнего задания.
- Какие формы электронной коммерции существуют в Интернете?
- Что такое хостинг?
- Чем отличается реклама в Интернете от рекламы обычной?
- Что такое интернет-аукционы? Интернет-магазины? Цифровые деньги?
Актуализация знаний учащихся.
Объявление темы урока.
Изучение нового материала.
Web-страницы и Web-сайты
Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются: - малый информационный объем; - возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").
Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.
Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
Структура Web-страницы
HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называетсяконтейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помещается в контейнер (рис. 6.26):
Компьютер
Компьютер и ПО
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
Форматирование текста на Web-странице
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.
Заголовки. Размеры шрифтов заголовков задаются парами тэгов от (самый крупный) до (самый мелкий).
Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.
Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".
Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".
Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
Компьютер и ПО
Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга
.
Абзацы. Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Компьютер" текст, разбитый на абзацы с различным выравниванием:
Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
Таким образом, домашняя страница сайта "Компьютер" будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):
Компьютер и ПО
Р ALIGN="left"Ha этом сайте... Терминологический словарь ...