Тема урока: Web-страницы
и Web-сайты.
Структура Web-страницы.
Форматирование текста на Web-странице.
Автор: Дотдаева Елена Сагитовна
Должность: учитель информатики
Категория: 1
Образовательное учреждение: Лицей №1 г.
Усть - Джегута
Карачаево- Черкесская Республика, город
Усть – Джегута.,
E-mail: dotdaeva2012@mail.ru
Предмет: Информатика.
Класс: 8
Ключевые слова: Web-
страница, Web- сайт,
тег, язык HTML, сервер.
Оборудование: компьютерный
класс, локальная сеть, Интернет, проектор, экран.
Тип урока: изучения
новых знаний.
Формы работы: фронтальная,
коллективная, индивидуальная на компьютере.
Цель урока: познакомить
учащихся с языком разметки гипертекста HTML, структурой Web-страницы и
форматированием текста на Web-странице; начать разработку Web-страницы.
Задачи:
1. Организация
деятельности учащихся по изучению новой темы;
2. Ознакомление
учащихся с понятием сайта, структурой web- страницы, основными
тегами;
3. Способствование
развитию памяти, внимания, мышления.
Ход урока:
I.
Организационный
момент.
Приветствие учащихся. Проверка готовности
к уроку.
II.
Актуализация
опорных знаний.
1.Какие способы
поиска информации в Интернете вам известны?
2.Каким образом
производится поиск документов по ключевым словам?
3.Какие поисковые системы
вам известны?
4.Какие формы
электронной коммерции существуют в Интернете?
5.Что такое
хостинг?
6.Чем отличается
реклама в Интернете от рекламы обычной?
7. Что такое
интернет-аукционы? Интернет-магазины? Цифровые деньги?
III.
Изучение
нового материала.
Тема
нашего сегодняшнего урока: «Web-страницы и Web-сайты. Структура Web-страницы.
Форматирование текста на Web-странице».
Основные моменты и определения учащиеся записывают в тетрадях.
Итак, что
же такое Web-сайт и Web-страница?
Собрание
страниц, объединенных некоторой общей тематикой и помещенных, как правило, на
одном компьютере, называют Web-узлом или сайтом.
Узлы Web подобны
книгам, а Web-страницы -
страницам этих книг. Компьютеры, на которых размещаются сайты, а также
программы, обеспечивающие поддержку сайтов, называются серверами.
На одном сервере может размещаться множество Web-узлов или
сайтов.
Чтобы
опубликовать в Интернете страницу, содержащую некоторую информацию,
используется специально разработанный для этого язык HTML.
HTML – HyperText Markup Language (Язык
разметки гипертекста) представляет собой довольно простой набор команд,
описывающих структуру документа. Этот язык разметки позволяет выделить в
документе отдельные логические части – заголовки, абзацы, таблицы,
списки-перечисления и т.д., но не задает конкретные атрибуты форматирования.
Конкретный вид форматирования определяет сам браузер при чтении документа,
и именно браузер обеспечивает наилучшее отображение Web-документа
на вашем экране.
Создавать Web-страницы
можно с помощью специальных программ-редакторов, автоматически генерирующих
код HTML, работа с
которыми не требует знания языка разметки.
Документ в
окне с кодом HTML -
это текстовый документ специального формата. Все файлы этого формата имеют
расширение .html или .htm. В документе HTML обычный
текст сочетается с элементами разметки, заключенными в
угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие
элементы разметки называются тэгами. Тэги бывают одиночными,
открывающими и закрывающими и состоят из следующих друг за другом в
определенном порядке элементов:
• левой
угловой скобки <;
• необязательного
символа слэш /, который означает, что тэг является конечным тэгом,
закрывающим некоторую структуру, например, </title>. В этом
смысле можно читать символ / как конец некоторого элемента разметки, например,
строки или абзаца;
• имени
тэга, например, html;
• необязательных
атрибутов. Тэг может быть без атрибутов или сопровождаться одним или
несколькими атрибутами, например, align="center";
• правой
угловой скобки >.
Таким
образом, открывающий тэг <html>, стоящий вначале
документа HTML и
означающий его начало, состоит из имени html и двух
угловых скобок < >, а тэг </html>, находящийся
в конце Web-документа,
кроме указанных элементов содержит также символ слэш /, означающий
закрывающий тэг и указывающий на конец документа.
В тэгах
могут использоваться только символы латинского алфавита, а в значениях
атрибутов - любые символы. Если в качестве значений атрибута используются,
например, символы кириллицы, то они должны быть заключены в кавычки,
например name="Раздел
1".
Язык HTML не
различает большие и малые буквы, так что тэги <HEAD>, <head> и <Head> эквивалентны.
Большинство
тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий
тэг, а между ними содержится текст или другие тэги.
В таких
случаях два тэга и часть документа, заключенная между ними, образует
блок, называемый элементом HTML. Некоторые тэги,
например <hr>, являются
одиночными, и для них закрывающий тэг не применяется. Такие тэги сами по
себе являются элементами HTML.
Каждый HTML-документ
имеет определенную структуру, которая выглядит следующим образом:
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Структура HTML-документа
содержит следующие обязательные элементы:
•
тэги <html> и </html>, которые
отмечают начало и конец документа;
• заголовок,
ограниченный тэгами <head> и </head>;
• тело,
ограниченное тэгами <body>...</body>.
В
заголовке, ограниченном тэгами <head> и </head>, с
помощью тэгов <title>...</title> определяется
название документа, которое должно описывать его содержимое и обычно
содержит не более 5-6 слов. Это название отображается браузерами в строке
заголовка рабочего окна программы, а роботы, составляющие индексы
для поисковых систем, идентифицируют документ, используя его название.
Кроме
элемента <title>...</title>,
заголовок может содержать элементы <meta>...</meta>. Открывающий
тэг <meta> включает
пары имя=значение, описывающие свойства документа, например, авторство, список
ключевых слов и т.д. Эти данные используются также поисковыми серверами при
индексации документов.
Создание и
оформление web- страниц.
Для
создания Web-страниц
понадобится любой браузер - Internet Explorer или Netscape Communicator. Кроме
того, нужен любой текстовой редактор, например, Блокнот из Windows.
Программа Блокнот нужна для подготовкиHTML-файлов, а браузер - для просмотра
и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем
локальном компьютере, после чего поместим его на один из WWW-серверов
в Интернете, сделав, таким образом, наши Web-страницы
доступными всему миру.
В качестве
примера создадим сайт лицея. Цель сайта - рассказать миру о лицее, сфере
его деятельности, интересов, достижении, найти друзей.
Для файлов
нашего сайта нужна отдельная папка. (Все объяснения сопровождаются
демонстрацией последовательных действий на экране).
Создаем
папку с именем Web на
жестком диске нашего компьютера.
Теперь
запустим программу Блокнот и приступим к работе.
Сначала
введем в окне программы Блокнот тэги, определяющие структуру любого
HTML-документа. Напомним, что в HTML-коде допускается использовать любой
регистр символов - верхний или нижний.
Введем с
клавиатуры следующие основные тэги, поместив каждый из них, кроме закрывающего
тэга </title>, в новой
строке.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Напомним,
что первый <html> и
последний </html> тэги
означают соответственно начало и конец документа, элемент <head>...</head> определяет
заголовок Web-страницы, элемент<body>...</body> -
тело документа, а в элементе <title></title> мы
сейчас укажем название Web-страницы.
Между
открывающим <title> и
закрывающим </title> тэгами
вставьте название документа – Лицей № 1. Этот элемент должен
выглядеть следующим образом:
<title>Лицей № 1</title>
Напомним,
что название Web-страницы должно быть коротким и в максимальной степени
отображать ее содержание.
Наша
следующая задача - вставить в тело документа между тэгами <body>...</body> короткий
текст-приветствие посетителям Web-страницы.
Вставим
пустую строку между тэгами <body> и </body> и
введем в ней следующий текст:
Добро
пожаловать на страничку Лицея № 1! Здесь Вы узнаете о нашей деятельности, о
наших интересах и увлечениях, о наших успехах и достижениях.
Для каждой
Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с
помощью атрибутов bgcolor и text открывающего
тэга <body>. Для
определения цвета как значения атрибутов существует два варианта:
•
словесное указание имени цвета, например, white (белый). В
языке HTML предусмотрено
шестнадцать таких имен;
• цифровое
обозначение в шестнадцатеричной записи, например, "#ffffff" -
белый, которое указывает, каким образом цвет формируется из основных цветов -
красного, зеленого, синего.
Таблица
цветов.
|
черный
|
black
|
000000
|
|
фиолетовый
|
purple
|
FF00FF
|
|
белый
|
white
|
FFFFFF
|
|
желтый
|
yellow
|
FFFF00
|
|
красный
|
red
|
FF0000
|
|
коричневый
|
brown
|
996633
|
|
зеленый
|
green
|
00FF00
|
|
оранжевый
|
orange
|
FF8000
|
|
бирюзовый
|
azure
|
00FFFF
|
|
лиловый
|
violet
|
8000FF
|
|
синий
|
blue
|
0000FF
|
|
серый
|
gray
|
A0A0A0
|
Конечно,
словесное указание цвета более удобно и понятно. С другой стороны, численные
обозначения дают больше возможностей, так как позволяют указать практически
любой из 16777215 оттенков, тогда как словесные обозначения ограничены только
шестнадцатью цветами.
Используем
в качестве примера для фона нашей Web-страницы синий цвет (blue), а для
текста - желтый (yellow).
Вставим в
открывающий тэг <body> атрибуты bgcolor=blue и text=yellow. Этот тэг
должен принять вид:
<body bgcolor=blue text=yellow>
Ваш
текстовый файл должен выглядеть примерно так:
<html>
<head>
<title>Лицей
№ 1</title>
</head>
<body
bgcolor=blue text=yellow>
Добро
пожаловать на страничку Лицея № 1! Здесь Вы узнаете о нашей деятельности, о
наших интересах и увлечениях, о наших успехах и достижениях.
</body>
</html>
Теперь
документ следует сохранить. Открываем ранее созданную папку Web, вводим
имя файла licey1.html и
нажимаем кнопку Сохранить.
Обратите
внимание: вы обязательно должны указать расширение имени файла .html или .htm, чтобы
браузер смог его открыть.
Возможно,
в вашем браузере размер шрифта текста будет крупнее или мельче, чем на рисунке.
В таком случае выберите команду меню Вид • Размер текста • Средний в
браузере Internet Explorer или Вид • Увеличить
шрифт, Вид • Уменьшить шрифт в
браузере Netscape Communicator, чтобы
установить средний размер шрифта.
Следует
иметь в виду, что разные браузеры могут по-разному отображать содержимое одного
и того же HTML-файла. Поэтому при создании Web-страниц желательно всегда
просматривать результат в обоих наиболее популярных браузерах - Internet Explorer и Netscape Communicator. В таком
случае вы будете уверены, что посетитель вашего сайта увидит именно то, что вы
хотите ему показать.
Так как в
элементе <body></body> мы
ввели текст без разбивки на абзацы, то в браузере он отображается в виде одного
абзаца и выровнен влево. Теперь следует придать тексту более наглядный вид.
Чтобы
наша Web-страница выглядела более привлекательно, разделим текст на абзацы и
выделим заголовок. HTML имеет
шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6.
Заголовки объявляются парой тэгов с номерами, соответствующими уровню,
например, <h1></h1> -
заголовок раздела первого уровня, а <h6></h6> -
заголовок раздела шестого уровня. От нормального текста заголовки отличаются
размером и толщиной букв. Заголовок первого уровня h1 отображается
обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 -
очень мелким.
Не следует
путать заголовки разделов документа с рассмотренным ранее заголовком документа,
определяемым элементом <head></head>.
В качестве
заголовка текста используем первое предложение - Добро пожаловать на
страничку Лицея №1! Для этого достаточно ограничить его тэгами <h1> и </h1>.
Вставляем
в текст файла licey1.html тэги <h1> и </h1> так,
чтобы они ограничивали первое предложение текста, и этот фрагмент кода принял
следующий вид:
<h1>Добро
пожаловать на страничку Лицея №1!</h1>
Сохраним файл,
выбрав команду Сохранить меню Файл программы Блокнот.
Операцию
сохранения необходимо всегда выполнять перед просмотром документа, так как
браузер открывает файл для просмотра, загружая его в оперативную память
компьютера с диска. Если после редактирования кода HTML вы
не сохраните файл, то никаких изменений в браузере не увидите.
Нажмите
клавишу F5 или
кнопку Обновить на панели инструментов рабочего окна
программы Internet Explorer или
аналогичную кнопку Обновить в Netscape Communicator. Файл licey1.html будет
перезагружен, и вы увидите в окне браузера, как выглядит заголовок первого
уровня.
Используя
шесть уровней заголовков, которые предоставляет в ваше распоряжение язык HTML, можно
создать легко читаемый документ с интуитивно ясной структурой. Помните, что ваш
документ всегда будет читаться значительно лучше, если в нем будет четкое
разделение на разделы и подразделы.
По
умолчанию заголовок выравнивается по левому краю страницы. Но его можно также
выровнять по правому краю или центрировать. Для правостороннего выравнивания в
тэге <h1>используется
атрибут align=right, а для
центрирования — align=center.
Допускается также явное указание левостороннего выравнивания - align=left.
Добавим в
тэг <h1> атрибут align=center, чтобы
центрировать заголовок. Этот элемент должен принять следующий вид:
<h1 align=center>Добро
пожаловать на страничку Лицея №1!</h1>
Теперь
займемся остальным текстом. Увеличим его размер и оформим текст полужирным
курсивным начертанием. Для установки полужирного начертания используются парные
тэги <b></b>.
Вставим в
файле licey1.html открывающий <b> и
закрывающий </b> тэги
так, чтобы они ограничили текст Здесь вы узнаете… . Этот элемент
должен принять следующий вид:
<b> Здесь
Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших
успехах и достижениях </b>
Курсивное
начертание устанавливается с помощью тэгов <i></i>.
Вставим в
исходный код HTML тэг <i> и </i> так,
чтобы отредактированный элемент принял следующий вид:
<b><i>Здесь
Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших
успехах и достижениях</i></b>
С
помощью пары тэгов <u></u> можно
установить подчеркнутое начертание текстового фрагмента, который ограничивают
данные тэги, а с помощью пары тэгов <tt></tt> -отобразить
текст телетайпным шрифтом.
После
того, как вы просмотрите полученный результат, увеличим размер шрифта текста.
Это можно сделать разными способами.
Тэги <big></big> увеличивают
размер шрифта текста, заключенного между ними.
Добавьте в
начало и конец вышеуказанного фрагмента кода соответственно тэги <big> и </big> так,
чтобы элемент принял следующий вид:
<big><b><i> Здесь
Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших
успехах и достижениях </i></b></big>
С помощью
тэгов <small></small> вы
можете уменьшить размер шрифта текста по сравнению с исходным.
Другой
способ указания размера шрифта - с помощью тэгов <font></font> с
атрибутом size. В качестве
значений этого атрибута используются целые числа от 1 до 7. Причем
значение 1соответствует минимальному размеру шрифта, а
значение 7 - максимальному.
В качестве
значения атрибута size можно также использовать числа от 1
до 7 со знаком + (плюс) или - (минус). В этом случае размер шрифта
соответственно увеличивается или уменьшается, по сравнению с исходным,
например, тэги <font size=+1></font> увеличат
размер шрифта, по сравнению с текущим, на один порядок.
В
тэгах <font></font> может
использоваться также атрибут color для указания
цвета шрифта, ограниченного тэгами текста. Значения этого атрибута такие же,
как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста
документа.
По
умолчанию абзац с текстом Здесь Вы узнаете... выровнен влево.
Центрируем его по горизонтали с помощью тэгов <center></center>. Вы
можете также выровнять абзац по правому краю страницы с помощью тэгов <right></right> или
по левому - с помощью тэгов <left></left>.
Вставьте
тэги <center></center>,
ограничив ими указанный абзац так, чтобы код HTML принял
следующий вид:
<html>
<head>
<title>Лицей №
1</title>
</head>
<body
bgcolor=blue text=yellow>
<h1 align=center>Добро
пожаловать на страничку Лицея № 1!</h1>
<center><font size=5><b><i>Здесь
Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших
успехах и достижениях.</i></b></font><center>
</body>
</html>
Язык HTML допускает
два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно
прямо указать, что шрифт на некотором участке текста может быть полужирным или
курсивным, т.е. явно указать начертание шрифта текста, как мы это делали в
данном опыте. С другой стороны, можно пометить любой фрагмент текста, как
имеющий некий, отличный от нормального, логический стиль, предоставив интерпретацию
этого стиля браузеру. Таким образом, логический стиль указывает роль текстового
фрагмента, например, большую значимость по сравнению с обычным текстом или то,
что данный фрагмент является цитатой. В своей работе вы можете использовать
следующие тэги, определяющие логические стили. Проверьте, как они работают в
разных браузерах.
<dfn></dfn> -
применяется для определения слова. Текст обычно выводится курсивом.
<em></em> - для
выделения слов и усиления. Отображается курсивом.
<cite></cite> -
для выделения названий книг, фильмов, спектаклей и т.д. Выводится курсивом.
<code></code> -
для фрагментов кода программ. Показывается на экране шрифтом фиксированной
ширины.
<kbd></kbd> -
используется для текста, который пользователь вводит с клавиатуры. В разных
браузерах может отображаться разными шрифтами.
<samp></samp> -
служит для отображения сообщений программ. Выводится шрифтом фиксированной
ширины.
<strong></strong> -
для особо важных фрагментов. Обычно выделяется полужирным начертанием.
<var></var> -
используется для указания, что часть текста или слово является символьной
переменной, т.е. текстом, который может быть заменен различными выражениями.
Отображается курсивом.
IV.
Практическая
часть урока.
Задание для
практической работы:
Создайте папку с
именем Web на жестком диске вашего компьютера.
Теперь запустите
программу Блокнот.
С помощью
приведенной ниже таблицы создайте документ с расширением .html или .htm для
web- сайта «Восьмиклассники».
V.
Итоги
урока.
На
этом уроке вы познакомились с языком разметки гипертекста HTML, структурой
Web-страницы и форматированием текста на Web-странице; начали разработку
Web-страницы «Восьмиклассники».
VI.
Домашнее
задание.
§ 3.7 Стр. 113
-117
Задание
Создайте папку с именем Web на
жестком диске вашего компьютера.
Теперь запустите программу Блокнот.
С помощью приведенной ниже таблицы
создайте документ с расширением .html или .htm для web- сайта «Восьмиклассники».
|
Основные
теги
|
|
<html></html>
|
Указывает
программе просмотра страниц что это HTML документ.
|
|
<head></head>
|
Определяет
место, где помещается различная информация не отображаемая в теле документа.
Здесь располагается тег названия документа и теги для поисковых машин.
|
|
<body></body>
|
Определяет
видимую часть документа
|
|
Атрибуты
тела документа
|
|
<body
bgcolor="?">
|
Устанавливает
цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000
- красный цвет.
|
|
<body
text="?">
|
Устанавливает
цвет текста документа, используя значение цвета в виде RRGGBB - пример:
000000 - черный цвет.
|
|
<body
link="?">
|
Устанавливает
цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 -
зеленый цвет.
|
|
<body
vlink="?">
|
Устанавливает
цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде
RRGGBB - пример: 333333 - серый цвет.
|
|
<body
alink="?">
|
Устанавливает
цвет гиперссылок при нажатии.
|
|
Теги
форматирования текста
|
|
<pre></pre>
|
Обрамляет
предварительно отформатированный текст.
|
|
<h1></h1>
|
Создает
самый большой заголовок
|
|
<h2></h2>,
<h3>, </h3><h4></h4>, <h5>, </h5>
|
Создает заголовки
промежуточных размеров
|
|
<h6></h6>
|
Создает
самый маленький заголовок
|
|
<b></b>
|
Создает жирный
текст (не рекомендованный)
|
|
<i></i>
|
Создает
наклонный текст (не рекомендованный)
|
|
<tt></tt>
|
Создает
текст - имитирующий стиль печатной машинки. (не рекомендованный)
|
|
<kbd></kbd>
|
Создает
текст - имитирующий стиль печатной машинки. (рекомендованный)
|
|
<var></var>
|
Название
переменных отображается курсивом
|
|
<cite></cite>
|
Выделение
цитат курсивом
|
|
<address></address>
|
Отображается
курсивом в виде отдельного абзаца
|
|
<em></em>
|
Наклонный
текст (воспринимается поисковыми роботами как выделение)
|
|
<strong></strong>
|
Жирный
текст (воспринимается поисковыми роботами, как особо сильное выделение)
|
|
<font
size="?"></font>
|
Устанавливает
размер текста в пределах от 1 до 7.
|
|
<font
color="?"></font>
|
Устанавливает
цвет текста, используя значение цвета в виде RRGGBB.
|
Используемая литература.
1. Учебник Н.
Д. Угринович 8 класс, издательство БИНОМ.
2. http://inform-ikt.narod.ru/book15.htm
3. http://scriptic.narod.ru/html/teg.htm
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.