Основы языка 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

После обработки браузером данный документ будет выглядеть так:

Заголовки и атрибуты шрифта

Заголовки

Для обозначения заголовков текста в языке HTML существуют специальные элементы - H1, H2, H3, H4, H5 и H6 (номера определяют важность заголовка от 1 до 6)
Для заголовков можно задать следующие свойства:

• align - выравнивание заголовка

• title - текст подсказки (всплывает при наведение указателя)

Элемент FONT

Для задания отображения части текста отличного от изображения используемого по умолчанию используется элемент FONT, который может иметь следующие атрибуты:

• fise - название шрифта

• size - размер шрифта от 1 до 7 (по умолчанию используется 3)

• color - цвет текста

Например:



Заголовки. Элемент FONT

Выглядит это так:

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

Маркированные списки

Для перечисления информации удобно применять маркированные или нумерованные списки. В таких списках каждый новый элемент выделяется маркером или ему присваивается порядковый номер.

Маркированные списки задаются парными тегами
.....
Элементы списка начинаются с тега ,
закрывающий тег не обязателен.
Например:

первый элемент списка
второй элемент списка

При помощи атрибута type можно задать следующие типы маркера:

• circle - круг без заливки

• dist - круг с заливкой (используется по умолчанию)

• sguare - квадрат

Нумерованные списки

Нумерованный список обозначается парными тегами
...
Например:

первый элемент списка
второй элемент списка

Атрибутом type можно задать тип нумерации:

• 1 - используются арабские цифры

• A и a - большие или малые буквы латинского алфавита

• I и i - большие или малые римские цифры

Атрибутом start можно задать номер первого элемента в списке.

Вставляем изображения

Для добавления на веб-страницу изображений используется одиночный тег IMG, который может иметь следующие атрибуты:

• scr - задаёт URL изображения

• alt - текст, который отображается на месте изображения, если браузер не может отобразить само изображение

• border - толщина границы вокруг изображения в пикселях

• align - задаёт выравнивание изображения

• height - задаёт высоту изображения в пикселях

• width - задаёт ширину изображения

• vspace - задаёт величину свободного пространства сверху и снизу от изображения

• hspace - задаёт величину свободного пространства слева и справа от изображения

Например:




Изображение





Здесь специально указан не существующий URL изображения и поэтому оно не может быть отображено

Данный документ выглядит так:

Гиперссылки

Для навигации и связывания документов между собой в языке гипертекстовой разметки HTML предусмотрена возможность создания гиперссылок. Для этого используется элемент A, который задаётся парными тегами . Обычно браузеры выделяют гиперссылки, чтобы их сразу можно было отличить от остального содержимого страницы - подчёркивание и синий цвет.
Для создания ссылки нужно задать атрибуту href элемента A URL нужного ресурса.
Например:


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

Составим такой документ:




Создание гиперссылок




Первая страница сайта

Вторая страница сайта

Яндекс

После обработки браузером получается:

Чтобы создать изображение-гиперссылку достаточно заключить элемент IMG внутрь элементаA, например:

Таблицы

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

Примечание: Посмотреть исходный код любой веб-страницы можно щелкнув правой кнопкой на любом свободном от ссылок и картинок месте и выбрав в всплывающем меню пункт "Просмотр HTML-кода" в Internet Explorer или "Исходный код" в Opere.

Таблицы задаются парными тегами ... и состоит из строк, задаваемых элементом TR - парные теги ... (закрывающий тег не обязателен) и ячеек - элементTD, с парными тегами ... (закрывающий тег так же не обязателен).

Для таблицы имеется возможность создавать заголовок, задаваемый парными тегами..., который должен располагаться непосредственно за открывающим тегом
Пример простейшей таблицы:

Простейшая таблица





1
11
111

2
22
222

Пример таблицы с заголовком:

Таблица с заголовком





Пример таблицы с заголовком
1
11
111

2
22
222

После обработки браузером это выглядит так:

Атрибуты таблиц

Многие параметры отображения таблицы задаются соответствующими атрибутами элементаTABLE, рассмотрим некоторые из них:

align - задаёт положение таблицы в окне браузера

bgcolor - цвет фона таблицы

border - толщина внешней границы

bordercolor - цвет границ таблицы

cell"> - размер пустого пространства между границами и содержимым ячейки

width - ширина таблицы

height - высота таблицы

frame - задаёт отображаемые части внешней таблицы

Атрибуты для строк таблицы TR:
align - задаёт горизонтальное выравнивание текста

valign - задаёт вертикальное выравнивание текста

bgcolor - цвет фона строки

bordercolor - цвет рамки строки

Атрибуты для ячеек таблицы: Атрибуты для строк таблицы TR:

align - задаёт горизонтальное выравнивание текста

valign - задаёи вертикальное выравнивание текста

bgcolor - цвет фона ячейки

bordercolor - цвет рамки ячейки

Таблица






1
11

2
22

Получается такой документ: