- Преподавателю
- Информатика
- Пособие Основы языка HTML для 8 классов
Пособие Основы языка HTML для 8 классов
Раздел | Информатика |
Класс | 8 класс |
Тип | Другие методич. материалы |
Автор | Касаева И.И. |
Дата | 05.12.2015 |
Формат | docx |
Изображения | Есть |
Основы языка HTML
Учебно-методическая разработка для учащихся
8 классов
Автор:
Касаева И.И.
учитель информатики
ГБОУ Гимназия Диалог
2015
Пример создания HTML-документа
Создать HTML- документ можно в любом текстовом редакторе, например, "блокнот".
Для этого достаточно, после написания кода, сохранить полученный файл в расширении .html или после сохранения файла с расширением .txt поменять его на .html.
Например, в блокноте у вас получился файл "текстовой докумен.txt" , меняем имя на index.html, при публикации сайта в интернет для главной страницы обычно присваивается имя index, остальные страницы можно называть как угодно.
Если Ваш компьютер не показывает расширения файлов, в Windows XP можно зайти в панель управления, выбрать "свойства папки" и в меню "вид", снять галочку с пункта "скрывать расширения для зарегистрированных файлов".
Простейший HTML-документ выглядит так:
Простейший HTML-документ
Тело документа - текст, фотографии и всё остальное, что будут видеть посетители Вашего сайта.
В данном примере элемент HTML явно указывает браузеру, что им будет обрабатываться HTML-код.
Заголовок HTML-документа находится в элементе HEAD, его иногда называют "шапкой", и содержит информативные элементы.
TITLE - заголовок документа, его Вы можете видеть в самом верху браузера. Например, для этой страницы "Простейший HTML-документ".
Элемент BODY - тело документа, вся его содержательная часть, текст, фотографии и так далее...
(рассмотрим позже)
После обработки браузером данный документ будет выглядеть так:
Примечание: В данном и последующих примерах на сайте я буду использовать браузер "Opera", в других браузерах, например, "Internet Explorer", документ будет выглядеть аналогично.
Начертание текста
Для задания начертания текста используются следующие элементы:
-
B - полужирное начертание
-
I - курсивное начертание
-
U - подчёркнутый текст
-
S - перечеркнутый текст
-
BIG - увеличенный размер шрифта
-
SMALL - уменьшенный размер шрифта
-
SUP - верхний индекс
-
SUB - нижний индекс
-
TT - моноширный шрифт
-
BLINK - мерцающий текст
Составим такой документ:
Пример начертания текста
текст с полужирным начертанием
текст с курсивным начертанием
подчёркнутый текст
перечеркнутый текст
увеличенный размер шрифта
уменьшенный размер шрифта
верхний индекстекст нижний индекс
моноширный шрифт
подчёркнутый текст с полужирным курсивным начертанием
После обработки браузером данный документ будет выглядеть так:
Форматирование текста
По умолчанию браузер отображает текст в одну строку по ширине окна с выравниванием по левому краю.
Для перехода на следующую строку можно использовать одиночный тег BR. Тег можно вставлять в любом месте текста.
При использовании тега BR браузер отображает текст как один абзац, для разделения текста на абзацы используется элемент P, который задаётся парными тегами ..... Закрывающий тег не обязателен.
Чтобы полностью сохранить исходное форматирование текста можно использовать элементPRE, который задаётся парными тегами ..... При использовании этого элемента тест сохраняет исходное форматирование и отображается моноширным шрифтом.
При необходимости запретить разрыв строк можно использовать элемент NOBR, который задаётся парными тегами ..... Текст расположенный между этими тегами будет отображаться в одну строку и если он не будет помещаться в окне браузера, то браузер отобразит горизонтальную линию прокрутки.
Форматирование текста
Текст разрывается
в указанных местах
при помощи элемента BR
Элемент PRE:
Текст отображается
с сохранением исходного форматирования
моноширным шрифтом.
После обработки браузером данный документ будет выглядеть так:
Заголовки и атрибуты шрифта
Заголовки
Для обозначения заголовков текста в языке HTML существуют специальные элементы - H1, H2, H3, H4, H5 и H6 (номера определяют важность заголовка от 1 до 6)
Для заголовков можно задать следующие свойства:
-
align - выравнивание заголовка
-
title - текст подсказки (всплывает при наведение указателя)
Элемент FONT
Для задания отображения части текста отличного от изображения используемого по умолчанию используется элемент FONT, который может иметь следующие атрибуты:
-
fise - название шрифта
-
size - размер шрифта от 1 до 7 (по умолчанию используется 3)
-
color - цвет текста
Например:
Заголовки. Элемент FONT
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
Использование элемента FONT для отображения текста
Выглядит это так:
Создание списков
Маркированные списки
Для перечисления информации удобно применять маркированные или нумерованные списки. В таких списках каждый новый элемент выделяется маркером или ему присваивается порядковый номер.
Маркированные списки задаются парными тегами
.....
Элементы списка начинаются с тега ,
закрывающий тег не обязателен.
Например:
первый элемент списка
второй элемент списка
При помощи атрибута type можно задать следующие типы маркера:
-
circle - круг без заливки
-
dist - круг с заливкой (используется по умолчанию)
-
sguare - квадрат
Нумерованные списки
Нумерованный список обозначается парными тегами
...
Например:
первый элемент списка
второй элемент списка
Атрибутом type можно задать тип нумерации:
-
1 - используются арабские цифры
-
A и a - большие или малые буквы латинского алфавита
-
I и i - большие или малые римские цифры
Атрибутом start можно задать номер первого элемента в списке.
Вставляем изображения
Для добавления на веб-страницу изображений используется одиночный тег IMG, который может иметь следующие атрибуты:
-
scr - задаёт URL изображения
-
alt - текст, который отображается на месте изображения, если браузер не может отобразить само изображение
-
border - толщина границы вокруг изображения в пикселях
-
align - задаёт выравнивание изображения
-
height - задаёт высоту изображения в пикселях
-
width - задаёт ширину изображения
-
vspace - задаёт величину свободного пространства сверху и снизу от изображения
-
hspace - задаёт величину свободного пространства слева и справа от изображения
Например:
Изображение
Здесь специально указан не существующий URL изображения и поэтому оно не может быть отображено
Данный документ выглядит так:
Гиперссылки