Web-страницы и Web-сайты. Структура Web-страниц. Форматирование текста на Web-страницах
Submitted by Елена Викторовна Анисимова on пн, 16/04/2012 - 10:35
Тема:Web-страницы иWeb-сайты. СтруктураWeb-страниц. Форматирование текста наWeb-страницах
Цель:
познакомить учащихся с языком разметки гипертекста HTML, структурой Web-страницы и форматированием текста на Web-странице
начать разработку Web-страницы «Компьютер и ПО»
Задачи урока :
обучающая - организация деятельности учащихся по изучению новой темы; ознакомление учащихся с понятием сайта , структурой web- страницы, основными тегами.
развивающая- способствование развитию памяти, внимания, мышления;
воспитательная- создание условий для воспитания аккуратного, бережного отношения к технике.
Организационный момент. Постановка целей и задач урока. (2 мин)
Здравствуйте ребята! Тема урока : «Web-страницы и web-сайты.Структура web-страницы.»Записываем тему.
Сегодня на уроке вы узнаете, что понимают под сайтами, какие бывают виды сайтов и что собой представляет язык разметки гипертектовых документов - HTML.
2. Проверка домашнего задания (7 мин)
Какие способы поиска информации в Интернете вам известны?
Каким образом производится поиск документов по ключевым словам?
Какие поисковые системы вам известны?
Какие формы электронной коммерции существуют в Интернете?
Что такое хостинг?
Чем отличается реклама в Интернете от рекламы обычной?
Что такое интернет-аукционы? Интернет-магазины? Цифровые деньги?
3.Объяснение нового материала (22мин)
Мы сегодня с вами будем говорить о web-сайтах и web-страницах. Итак, что же такое Web-сайт и Web-страница? Чтобы разобраться в этом вопросе, давайте подумаем, а какая информация может содержаться на Web-сайте? Конечно, практически любая. Сайт может содержать информацию о компьютерных играх, автомобилях, городах и странах мира и т.д.. На сайте даже можно разместить уроки, произведения писателей, поэтов, композиторов. Получается, что сайт это книга, но только не простая, а электронная? Да, Web-сайт, по своей сути, действительно является электронной книгой, журналом или учебником, который может содержать как полезную для вас информацию, так и ту, что вас на данный момент совсем не интересует.
Web – страницы создаются с использование гипертекстовых документовHTML. В обычный документ вставляются управляющие символы –HTML-тэги, которые определяют вид Web-страниц при ее просмотре.
ДостоинстваWeb-страниц:
Малый информационный объем;
Возможность просмотра в различных операционных системах
Для создания веб страниц в различных ОС используются различные редакторы. В частности,
Простейшие текстовые редакторы :
в ОСWindows – Блокнот
в ОСLinux – Kate
Web – редакторы :
в ОСWindows –Microsoft FrontPage
в ОСLinux – Quanta Plus
Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Web-сайты – совокупность тематическихWeb-страниц. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.
Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
В качестве гиперссылки на страницах сайта может использоваться текст, такая гиперссылка будет называться текстовой. Весьма часто текстовая гиперссылка представляет собой подчеркнутый текст синего цвета.
Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно. Как же в таком случае определить, является изображение гиперссылкой или нет? На этот случай запомните следующее правило: "Если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой".
Примечание: Из этого правила есть исключение, так например в случае с ролловерами, которые могут не являться гиперссылками, но при наведении курсора мыши на них, курсор тоже принимает форму руки. Кроме изменения вида курсора, при наведении на гиперссылку, должен также отобразиться URL (уникальный адрес ресурса), но об этом мы поговорим в уроке посвященном созданию гиперссылок средствами программы FrontPage.
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называетсяконтейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами
Структура Web-страницы
<HTML> внутрь этого контейнера помещается HTML-код страницы
<HEAD>- Заголовок страницы
<TITLE>.....</title> Название страницы
</head>
<BODY> Помещается содержимое страницы
Тело документа
</body>
</html>
Сохранение страницы: в виде файла index.htm
Теперь давайте на сайте marklv.narod.ru/html/pr1 посмотрим простейший пример HTML-документа. А затем сами попробуем создать нашу первую страничку.
Практическая работа № 3.8 страница учебника 165. Выполняем задания 1-2 со стр. 166
Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере
Создать папку Мой сайт на рабочем столе
Запустить приложение Блокнот
<HTML>
<HEAD>
<ТITLE>Компьютер</ТITLE>
</HEAD>
<BODY>
Компьютер и ПО
</BODY>
</HTML>
Форматирование текста на Web-страниц
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.
Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1></Н1> (самый крупный) до <Н6></Н6> (самый мелкий).
Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга 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".
Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
<FONT COLOR="blue">
<Н1 ALIGN="center">Компьютер и ПО</Н1>
</FONT>
Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга <HR>.
Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Во время объяснения учителем материала, учащиеся заполняют раздаточный материал «Форматирование текстового документа
<PALIGN=”left”> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>
<PALIGN=”right”>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </P>
</BODY>
</HTML>
На сайте marklv.narod.ru/html/pr2 смотрим пример форматирования текста.
Знакомство с ошибками, допускаемыми при разработке Web-страниц.
Создать сайт или даже отдельную Web-страницу, дело совсем не из простых. Очень часто создатели допускают ряд типичных ошибок, с которыми я предлагаю вам познакомиться на сайте Евгения Мухутдинова.
Адрес ресурса: ttp://inf777.narod.ru/lessons/frontpage_lessons/errors/errors.htm
4.Закрепление знаний. (10 мин)
Совместно проходим тест (демонстрируется на экране) Слайды презентации 22-28
5. Домашнее задание (2 мин)
п. 3.7.1-3.7.3, разработать Web-страницу «Знакомьтесь: это я!»с использованием только изученных тегов.