Ученики на Учителя.com


Конспект урока "Основы HTML и Web-дизайна" 8 класс

Гулина Наталия Степановна
МОУ «Средняя школа № 1» г. Кимры Тверской области
Учитель информатики
Основы HTML и Web-дизайна
Урок информатики в 8 классе
Тип урока: урок изучения нового материала.
Цель урока: познакомиться и научиться создавать простейший HTML-документ.
Что такое HTML?
Всемирная паутина соткана из Web-страниц, которые создаются с помощью так
называемого языка разметки гипертекста HTML (HyperText Markup Language). HTML
не является языком программирования. HTML — язык разметки документа. При
разработке HTML-документа выполняется разметка текстового документа, которая
служит для указания формы представления информации, содержащейся в документе.
Специальные программы просмотра HTML-документов, которые называются
браузерами, служат для интерпретации файлов, размеченных по правилам языка HTML,
форматирования их в виде Web-страниц и отображения их содержимого на экране
компьютера. Существует большое количество программ-браузеров — Microsoft Internet
Explorer, Opera, Mozilla Firefox, Google Chrome.
Символы, которые управляют отображением текста и при этом сами не
отображаются на экране, в языке HTML называются тэгами (от английского слова tag
— ярлык, признак).
Все тэги языка HTML выделяются символами-ограничителями (< и >), между
которыми записывается идентификатор (имя) тэга и его параметры. Единственным
исключением из этого правила являются тэги комментария (<!-- и --!>) . Названия тэгов,
а также их параметров можно записывать на любом регистре.
Большинство тэгов HTML используется попарно, т. е. Для определенного тэга,
назовем его открывающим, в документе имеется соответствующий закрывающий тэг.
По правилам HTML закрывающий тэг записывается так же, как и открывающий, но с
символом / (прямой слэш) перед именем тэга. Единственным принципиальным
различием парных тэгов является то, что закрывающие тэги не использую параметры.
Тэги, которые нуждаются в соответствующих завершающих тэгах, называются
тэгами-контейнерами. Все, что записано между соответствующим открывающим и
закрывающим тэгом, называется содержимым тэга-контейнера.
Ряд тэгов не нуждается в завершающих тэгах. Например, тэг вставки
изображений <IMG>, принудительного перевода строки <BR>.
Существуют общие правила интерпретации тэгов браузерами. В отличие от
языков программирования, в которых ошибочные операторы приводят к выдаче
соответствующих сообщений на этапе компиляции программы и требуют правки, в
HTML не принято реагировать на неверную запись тэгов. Неверно записанный тэг или
его параметр просто игнорируется браузером.
Структура документа
Первым тэгом, с которого следует начинать описание документов HTML,
является тэг < HTML>. Он должен всегда начинать описание документа, а завершать
описание документа должен тэг < /HTML>. Эти тэги обозначают, что находящиеся
между ними строки представляют единый HTML-документ. Без этих тэгов браузер не в
состоянии идентифицировать формат документа и правильно его интерпретировать.
Большинство современных браузеров могут опознать документ и не содержащих тэгов
< HTML > и </ HTML >, все же их употребление крайне желательно.
Между парой < HTML > и </ HTML > располагается сам документ. Документ
может состоять из двух разделов — раздела заголовка (начинающийся тэгом <HEAD>)
и раздела содержательной части документа (начинающийся тэгом <BODY>).
Раздел документа HEAD
Раздел документа HEAD определяет его заголовок и не является обязательным
тэгом. Тэги, находящиеся внутри HEAD (кроме названия документа, описываемого с
помощью тэга <TITLE>), не отображаются на экране.
Раздел заголовка открывается тэгом <HEAD>, который обычно следует сразу
же за тэгом <HTML>. Закрывающий тэг </HEAD> показывает конец этого раздела.
Название документа
Тэг <TITLE> служит для того чтобы дать документу название, которое
показывается в заголовке окна браузера. Тэг <TITLE> нельзя путать с названием файла
документа и с заголовками внутри документа.
Название документа записывается между тэгами <TITLE> и </TITLE> и
представляет собой строку текста (рекомендуется 60 символов).
Раздел документа BODY
В этом разделе документа располагается его содержательная часть. Раздел
документа BODY начинается тэгом <BODY> и завершается тэгом </BODY>, между
которыми располагается все содержимое данного раздела. Тэг BODY имеет ряд
параметров.
Параметр
Назначение
ALINK
Определяет цвет активной ссылки
LINK
Определяет цвет еще не просмотренной ссылки
VLINK
Определяет цвет уже просмотренной ссылки
BACKGROUND
Указывает на URL-адрес изображения, которое используется
в качестве фонового
BGCOLOR
Определяет цвет фона документа
TEXT
Определяет цвет текста
SCROLL
Устанавливает наличие или отсутствие полос прокрутки
окна браузера
Пример задать изображение осень.jpg в качестве фона для web-страницы:
1. Откройте программу блокнот.
2. Наберите следующий текст:
<html>
<BODY BACKGROUND= “C:\Мои документы\осень.jpg”>
</html>
3. В меню Файл выберите команду Сохранить как (выберите свою папку, задайте
название файлу: Моя первая страничка.html и нажмите кнопку Сохранить).
4. Зайдите в свою директорию и запустите созданную web-страницу.
Форматирование HTML-документа
Разделение на абзацы
Для разделения на абзацы служит тэг <P> перед началом каждого абзаца и </P>
после абзаца (не обязателен). Браузеры отделяют абзацы пустой строкой. Тэг <P>
может задаваться с параметром горизонтального выравнивания ALIGN. Возможные
значения параметра приведены в таблице.
Значение параметра ALIGN
Действие
LEFT
Выравнивание текста по левой границе
окна браузера
CENTER
Выравнивание текста по центру окна
браузера
RIGHT
Выравнивание текста по правой границе
окна браузера
JUSTIFY
Выравнивание текста по ширине окна
браузера
Создайте html-документ и расположите текст следующим образом:
1. Откройте блокнот.
2. Введите текст:
<html>
<body bgcolor=lightblue>
<p align=left>
Меня зовут Карабасик-Барабасик.
</p>
<p align=center>
Я живу в г. Кимры
</p>
<p align=right>
и учусь в школе № 55.
</p>
</body>
</html>
3. Сохраните созданную web-страничку.
Перевод строки
При отображении текстовых документов место переноса строки в пределах
абзаца определяется автоматически в зависимости от размера шрифта и размера окна
просмотра. Перенос строки осуществляется только по символам-разделителям слов,
например — пробелам. Иногда требуется задать принудительный перевод строки, для
этого используется тэг <BR> (не имеет закрывающего). В отличие от тэга абзаца при
использовании тэга <BR> не будет образовываться пустая строка.
Тэги форматирования текста
Тэг <B> отображает текст полужирным шрифтом.
Тэг <I> отображает текст курсивом.
Тэг <U> отображает текст подчеркнутым.
Тэг <STRIKE> и <S> отображает текст, перечеркнутый горизонтальной линией.
Тэг <BIG> отображает текст шрифтом большего размера.
Тэг <SMALL> отображает текст шрифтом меньшего размера
Тэг <SUB> сдвигает текст ниже уровня строки и выводит его шрифтом меньшего
размера. Удобно использовать для математических индексов.
Тэг <SUP> сдвигает текст выше уровня строки и выводит его шрифтом меньшего
размера. Удобно использовать для задания степеней в математике.
Тэг <BLINK> отображает мигающий текст.
Пример:
<i> Текст курсивом </i>
<i><u> Текст подчеркнутым курсивом </u></i>
<b><i> Полужирный наклонный текст </i></u>
Тэг <FONT>
Тэг <FONT> задает параметры шрифта. Имеет следующие параметры:
Параметр
Назначение
FACE
Указывает тип шрифта
SIZE
Указывает размер шрифта в условных единицах от 1 до 7.
Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер
«нормального» шрифта соответствует значению 3.
COLOR
Устанавливает цвет шрифта
Пример:
1. <FONT FACE= “Arial”, “Verdana” SIZE=4 COLOR =green> Шрифт
размером 4, тип шрифта Arial или Verdana </FONT>
2. <FONT SIZE=-1 COLOR =green> Шрифт размера 2 зеленого цвета </FONT>
3.
Зайдите в свою директорию, запустите созданную web-страницу в блокноте, измените
текст:
<html>
<body bgcolor=lightblue>
<p align=left>
<font size=5 color=red>
Меня зовут <b>Карабасик-Барабасик.</b>
</font>
</p>
<p align=center>
<font size=2 color=green>
Я живу в г. Золотой ключик
</font>
</p>
<p align=right>
<font size=4 color=blue>
и учусь в школе № 55.
</font>
</p>
</body>
</html>
Скачать материал

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