Учебное пособие "Язык гипертекстовой разметки HTML"

Авг - 17 - 2012

Автор конспекта:
Автор(ы): — Сунгурова Светлана Владимировна

Место работы, должность: —

ГБОУ СПО "Чусовской индустриальный техникум", преподаваетль "Информатики и ИКТ"

Регион: — Пермский край

Характеристика конспекта:
Уровни образования: — начальное профессиональное образование

Класс(ы): — 10 класс
Класс(ы): — 11 класс

Предмет(ы): — Информатика и ИКТ

Целевая аудитория: — Учащийся (студент)
Целевая аудитория: — Учитель (преподаватель)

Тип ресурса: — методическая разработка

Краткое описание ресурса: —

В предлагаемом учебном пособии рассмотрены основы сайтостроительства на языке гипертекстовой разметки HTML. Пособие содержит как теоретический материал, так и практические задания для закрепления рассмотренного материала на практике. Предусмотрен текущий контроль по темам и итоговый. Теоретический материал снабжен мультимедийными презентациями.

Агентство по управлению государственными учреждениями
Пермского края Чусовской индустриальный техникум

Учебное пособие

Выполнила преподаватель
информатики и ИТ
Сунгурова С.В.

Чусовой, 2010

Согласовано на заседании ЦМК

«____» _________2010г. _______
Введение

В современном курсе информатики и информационных технологий большое внимание уделяется формированию компетентностей у учащихся связанных с умением применять информационные технологии в практической деятельности, а также телекоммуникационным технологиям. В частности, умению создавать сайты. Без этого невозможно приобщение учащихся к нарастающим информационным потокам современной цивилизации.

Учебное пособие предназначено для студентов начального и среднего профессионального образования дневной формы обучения всех специальностей.

Содержание

Тема 1. Язык разметки гипертекста HTML………………………………. 5

Тема 2. Теги форматирования текста……………………………………… 7

Практическая работа №1………………………………………………………. 9

Самостоятельная работа №1…………………………………………………. 14

Тест по теме «Основные теги языка HTML»…………………………….. 15

Дополнительные задания к темам 1, 2………………………………….. 17

Самостоятельная работа №2…………………………………………………. 18

Тема 3………………………………………………………………………………… 19

Практическая работа №2………………………………………………………. 21

Самостоятельная работа №3…………………………………………………. 23

Тема 4………………………………………………………………………………… 24

Практическая работа №3………………………………………………………. 26

Самостоятельная работа №4…………………………………………………. 30

Тема 5………………………………………………………………………………… 31

Практическая работа №4………………………………………………………. 32

Итоговый контроль……………………………………………………………… 34

Список проектных работ………………………………………………………. 37

Заключение………………………………………………………………………… 38

Список литературы……………………………………………………………… 39

Приложение 1. Таблица тегов……………………………………………….. 40

Приложение2. Таблица кодов цветов…………………………………….. 43

Тема 1

Язык разметки гипертекста HTML

Язык HTMLбыл разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах.

HTML–это язык разметки гипертекста. Гипертекст — это способ организации текстовой информации, внутри которой установлены смысловые связи (гиперссылки) между различными ее фрагментами.

Документ, выполненный в форме HTMLназывается:

HTML – документом;

Web – документом;

Web– страницей.

Документ HTML можно создавать практически в любом текстовом редакторе. Самый простой редактор предназначенный для создания такого документа Блокнот (стандартная программа операционной системы Windows). Расширение таких документов .htmlили .htm. Для просмотра Web-документов предназначены браузеры. Например, InternetExplorer, Opera, MozillaFirefox и другие.

Структура HTML документа

Любой HTML-документ состоит из тегов (команд) заключенных в угловые скобки и разделяется на две части заголовок сайта и тело программы (сайта) – собственно гипертекст.

описание Web-страницы заголовок

содержание Web-страницы гипертекст (тело документа)

Любой HTML-документ начинается с тега и заканчивается тегом .

Тег – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением «/».

Метки можно вводить как заглавными, так и строчными буквами. Например, метки , и будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию.

Основные теги

— обозначение документа на языке HTML.
— область заголовка Web-страницы.
— отражает название вашего сайта.
— заключает в себе гипертекст, который определяет web-страницу.

Пример документа HTML

Пример 1

Привет!

Это приер HTML-документа

Тема 2

Теги форматирования текста

Форматирование абзацев

Браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелы. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца.

Тег перевода строки
отделяет строку от последующего текста.
Тег абзаца
тоже отделяет строку, но еще добавляет пустую строку перед ним.

Оба тега являются одноэлементными (не требуют закрывающего тега).

Тег текст абазаца устанавливает границу абзаца. Пустые строки добавляются перед абзацем и после него.

Теги форматирования шрифта

— для выделения полужирным шрифтом,
— для выделения курсивом,
— для выделения подчеркиванием.

Существует два способа управления размером текста, отображаемого браузером:

использование стилей заголовка;
задание размера текущего шрифта.

— тег стиля. Выделяет текст как заголовок. Существует семь размеров шрифта от 1 до 7.

- самый крупный размер шрифта.
Тег текст позволяет изменять размер, начертание и цвет текста, добавляются атрибуты.
- текст — размер шрифта (7- самый крупный размер)
- текст — шрифт
- -цветшрифта. Вместо Х надо подставить либо название цвета), либо его шестнадцатеричное значение (Приложение 1).

Пример: текст

Выравнивание текста по горизонтали

ALIGN=CENTER — Выравнивание по центру
ALIGN=RIGHT — Выравнивание по правому краю
ALIGN=LEFT — Выравнивание по левому краю

Пример: текст — этот текст выровнен по центру.

Задание цвета фона и текста

Цвета фона и текста документа устанавливаются в начале файла HTML в теге .
Атрибут BGCOLOR=X — задает цвет фона страницы.
TEXT=X — определяет цвет текста для всей страницы

Пример:

Практическая работа №1

Тема работы:Создание HTML-документа.

Цель работы:Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.

Создайте в папке Мои документы, папкуСоздание сайта, в ней папку с названием вышей фамилии и номером группы, внутри нее создайте папку ЛР №1.

Создание простейших файлов HTML

Запустите стандартную программу Блокнот и наберите следующий текст с элементами форматирования:

Пример

Моя первая страница сайта

2. Сохраните файл(Файл, Сохранить как..) под именем Пример 1.htmlв созданной вами папке.

3. Просмотрите созданную Web-страницу в браузере MicrosoftInternetExplorer или другом, который установлен на вашем компьютере.

Управление расположением текста на экране.

Внесите изменения в текст, расположив слова «Моя первая», «страница», «сайта» на разных строках:

Пример

Моя первая

страница

сайта

2. Сохраните изменения в файл (Файл, Сохранить как…) под именем Пример2.html

3. Просмотрите с помощью браузера новую полученную Web- страницу. Обратите внимание, изменилось ли расположение текста на странице. Почему?

Управление расположением текста на экране (переход на
новую строку).

Внесите изменения в текст файла Пример 1.html.

Пример

Моя первая

страница
сайта

Сохраните файл под именем Пример 3.htmlв созданной вами папке. Просмотрите с помощью браузера обновленную страницу.

Выделение фрагментов текста.

Внесите изменения в текст файла Пример 3.html.

Пример

Моя первая страница сайта

Сохраните файл под именем Пример 4.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Изменение размера текста

использование стилей заголовка

Внесите изменения в текст файла Пример 4.html.

Пример

Моя первая

страница сайта

Сохраните файл под именем Пример 5.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

задание размера текущего шрифта

Внесите изменения в текст файла Пример 5.html.

Пример

Моя первая страница сайта

4. Сохраните файл под именем Пример 6.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Гарнитура и цвет шрифта

Внесите изменения в текст файла Пример 6.html.

Пример

Мояпервая страницасайта

Сохраните файл под именем Пример 7.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа. Сохраните изменения (Файл, Сохранить). Посмотрите новую полученную Web-страницу.

Выравнивание текста по горизонтали

Внесите изменения в текст файла Пример 7.html.

Пример

Мояпервая

страницасайта

Сохраните файл под именем Пример 8.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Задание цвета фона и текста

Внесите изменения в текст файла Пример 8.html.

Пример

Мояпервая

страницасайта

2.Сохраните файл под именем Пример 9.htmlв созданной вами папке. Посмотрите новую полученную Web-страницу.

Самостоятельная работа №1

Открыть через Блокнот файл Первая самю работа.html, расположенный на рабочем столе.

Используя теги форматирования привести текст согласно заданию в файле.

Сохранить измененный файл в папке с вашей фамилией (Мои документы, Создания сайта).

Просмотреть измененный файл в браузере.

Первая самостоятельная работа

Этот абзац должен быть выравнен по центру.

Этот абзац должен быть выравнен по левому краю.

Этот текст должен быть напечатан в две строки.

Этот текст оформить курсивом с новой строки (с добавлением перед текстом пустой строки).

Этот текст выделить полужирным шрифтом с подчеркиванием, с новой строки.

Тест по теме «Основные теги языка HTML»

1.Какие из тегов используются в любой программе на языке HTML?

Какой тег означает курсивное написание текста?

—

какой тег определяет границы абзаца?

Какие теги используют для печати текста с новой строки?

Какой тег используют для печати названия сайта?

В каком теге заключается гипертекст?

После какого тега текст переносится на новую строку внутри одного абзаца с добавление пустой строки?

Действие тега (начального и конечного) распространяется:

на текст стоящий перед ним

на текст находящийся внутри тега

на текст находящийся после тега

на весь текст в программе

Описание сайта заключается в теге:

—

Выберите верные утверждения:

Теги можно вводить только заглавными буквами

Теги определяют границы действия элементов

Все теги парные, т.е. на каждый открывающийся тег должен быть закрывающийся

Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию

HTML-документ состоит из тегов

Дополнительные задания к темам 1, 2

№1. В файл Пример 4.html внести изменения. Текст должен отображаться в следующем виде:

Моя перваястраница сайта

Сохранить изменения в папке ЛР №1 с именем Задание1.html

№2. В файл Пример 6.html внести изменения (изменяя размер шрифта и используя переход на новую строку). Текст должен отображаться в следующем виде:

Моя первая

страница

сайта

Сохранить изменения в папке ЛР №1 с именем Задание2.html

№3. В файл Пример 7.html внести изменения. Текст должен отображаться в следующем виде: все слова должны быть разного цвета. Сохранить изменения в папке ЛР №1 с именем Задание3.html

№4. В файл Пример 6.html внести изменения (использовать различное выравнивание текста, разный размер и написание шрифта). Текст должен отображаться в следующем виде:

Расписание

занятий

на вторник

Сохранить изменения в папке ЛР №1 с именем Задание4.html

№5. В файл Пример 5.html внести изменения: добавить цвет шрифта и фон страницы, используя в теге атрибуты BGCOLOR=»#FFFFCC» TEXT=»#330066», коды цветов взять другие.Сохранить изменения в папке ЛР №1 с именем Задание5.html

Самостоятельная работа №2

Разработать HTML-документ первой страницы сайта о техникуме. Использовать образец. Сохранить созданный документ в папке с вашей фамилией под именемПервая страница.html

Тема 3

Размещение графики на web-странице

Создание списокв

URL»> — тег добавления графического изображения

Этот тег не закрывается.
URL – указывает браузеру где находится рисунок (указывается название диска, папки, вложенных папок, название файла с расширением). Желательно размещать файлы с необходимыми графическими изображениями в той же папке, где сохраняется HTML-документ. В этом случае в URL указывается только названий файла.

Атрибуты

Таблица 1

Атрибут

Формат

Описание

1.ALT

Надпись «картинка» выводится на экран при подведении указателя мыши к изображению.

2.BORDER

Задает рамку вокруг изображения толщиной 5 пикселей.

3.ALIGN

Выравнивает изображение относительно текста по верхней границе текста.

4.HEIGHT

Вертикальный размер изображения принудительно устанавливается в 55 пикселей.

5.WIDTH

Горизонтальный размер изображения принудительно устанавливается в 200 пикселей.

6.VSPACE

Атрибут добавляет верхнее и нижнее пустые поля высотой 6 пикселей.

7.HSPACE

Добавляет левое и правое пустые поля шириной 6 пикселей.

Фоновые рисунки

— фон сайта становится изображение расположенное в указанном файле. В случае если изображение небольшого размера, то они дублируется на экране.

Создание маркированных списков

текст
текст
…
текст

Пример:

химия
физика
ОБЖ
история

Создание нумерованных списков

текст

…

текст

Графические маркеры в списке

Практическая работа №2

Создайте в вашей папке папку ЛР №2.
Скопируйте все файлы из папки Графика для ЛР №2 (Мои документы, Создание сайта) в ту же папку, которая будет использована для хранения создаваемой Web-страницы (в вашей папке – папка ЛР №2).
Откройте файл Пример 9.html и внесите в него следующие изменения.

Пример

Мояпервая
страницасайта

Сохраните его в папке ЛР №2 под именем Рисунок 1.html
Добавите в файл Рисунок 1.html из таблицы 1 атрибуты 2, 7 и сохраните изменения в файле Рисунок 2.html
Добавите в файл Рисунок 1.html из таблицы 1 атрибуты 1, 4, 6 и сохраните изменения в файле Рисунок 3.html

Фоновое отображение графики на Web-странице

Внесите изменения в файл Рисунок 1.html

Пример

Мояпервая
страницасайта

Сохраните его в папке ЛР №2 под именем Рисунок 4.html

Линейки (графические разделители) и буквицы

Разместите в Вашем документе Рисунок 1.html разделитель anim_hr.gif так, чтобы он находился под текстом.
Задайте этому изображению высоту (вертикальный размер), равную 40 пикселям.
В слове Моя замените букву М изображением, взять его Вы можете в файле m.gif.
Сохраните измененный файл в папке ЛР №2 под именем Рисунок 5.html

Создание списков

Откройте файл Рисунок 5.html и добавьте в него маркированный список уроков:

математика
математика
ОБЖ
ОБЖ
обед
физика
физика

Список должен быть расположен по левому краю страницы.

Увеличьте размер шрифта для всего списка.

Сохраните измененный файл в папке ЛР №2 под именем Маркированный список1.html

Графические маркеры

Откройте файл Маркированный список1.html
Теперь введем в тег
- Скопировать папку Сам. Работа №3 с рабочего стола в папку с вашей фамилией.
- Открыть файл Сам. Работа №3.html(находится в скопированной вами папке).
- Внести следующие изменения:
- добавить цвет фона и цвет текста;
- увеличить размер заголовка «Знаки зодиака» до 7;
- размер основного текста – 5;
- основной текст оформить как маркированный список
- добавить графический маркер (файл marker1.gif);
- добавить картинку в конец документа из файла znaki.bmp
- Сохранить изменения в файле в папке с вашей фамилией, Сам работа №3 через команду Файл, Сохранить.
- В вашей папке создайте папку ЛР №3.
- Запустите стандартную программу Блокнот и наберите следующий текст с элементами форматирования:
- Сохраните в вашей папке в папкеЛР №3 под именем Таблица.html
- Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
- Вставьте в тег следующие атрибуты: width=50% align=”center” bgcolor=”yellow” bordercolor=”blue”. Просмотрите обновленный документ в браузере.
- Добавьте в тег атрибут: cellspacing=5. Просмотрите обновленный документ в браузере.
- Измените значение атрибута cellspacing на 10, 30 и посмотрите что произойдет с таблицей.
- Добавьте между второй парой тегов : теги дядя дедушка Просмотрите полученный документ в окне браузера.
- Добавьте между третьей парой тегов : теги дочь внучка Просмотрите обновленный документ в браузере.
- Добавьте в первой паре тегов : в теге атрибут colspan=3. Просмотрите полученный документ в окне браузера.
- Добавьте в первой паре тегов : в теге еще атрибут align=»center» Просмотрите полученный документ в окне браузера.
- Добавьте во второй паре тегов : в первом теге атрибут rowspan=2 Просмотрите полученный документ в окне браузера.
- Удалите из второй пары тегов : тег внучка Просмотрите полученный документ в окне браузера.
- Создайте страницу, содержащую расписание учебной группы. HTML-код должен выглядеть примерно так:
- Сохраните файл под именем Расписание на понедельник.html.
- Используя различные варианты оформления таблиц, создайте файлы с именами Рас писание на вторник.html и Расписание на среду.html, содержащие расписание на вторник и среду, соответственно.
- В файле Расписание на четверг.htmlсоздайте таблицу такого вида:
- Для созданной таблицы установите следующие параметры: расположение на экране — центральное, ширина 550 пикселей. Цвет вертикальной общей ячейки — голубой. Цвет всей таблицы — зеленый. Расположение текста в ячейках — по центру.
- В файле Расписание на субботу.html создайте таблицу такого вида:
- Для созданной таблицы установите следующие параметры: расположение на экране — левостороннее, ширина 550 пикселей. Цвет общей горизонтальной ячейки — красный. Цвет всей таблицы — желтый.
- В файле Расписание на воскресенье.html создайте таблицу такого вида:
- Для созданной таблицы установите следующие параметры: расположение на экране — правостороннее, ширина 550 пикселей. Цвет общей ячейки — оранжевый. Цвет всей таблицы — серый.
- Создайте с помощью текстового редактора «Блокнот» файл Техникум.html и поместите в начало страницы следующий код:
- Сохраните созданный файл в папку ЛР №3.
- Определите для слова Понедельник ссылку на внешний документ:
- элемент списка
- элемент списка
  
  …
- элемент списка
  
  - нумерованный список

Рубрики: Информатика и ИКТ Метки:Учебное пособие

Учебное пособие "Язык гипертекстовой разметки HTML"

Привет!

- самый крупный размер шрифта.

Моя первая

КЛАСС конспектов

EOR рейтинг

Учебное пособие "Язык гипертекстовой разметки HTML"

Привет!

- самый крупный размер шрифта.

Моя первая

Похожие конспекты:

КЛАСС конспектов

EOR рейтинг