Лекції по HTML

Оглавление
1.doc (3 стр.)
Скачать
  1   2   3

8 класс

Введение в язык HTML

Лекция №1: Введение в язык HTML (12 часов)

Тема 1: Введение в язык HTML (1 час)

План

1. Понятие о HTML

2. Понятие о гипертексте

3. Понятие о html-файле

4. Понятие о тегах языка html

5. Структурные теги

6. Создание шаблона HTML-документа и первой Web-страницы
1. Понятие о HTML

HTML расшифровывается как HyperText Markup Language, или язык гипертекстовой разметки.

Важно понять, что HTML это не язык программирования – а язык разметки текста. Он позволяет определить внешний вид документа. Если обычные языки программирования используются для написания программ (алгоритмов), предназначенных для выполнения определенных задач, то язык разметки HTML используется для представления документа в определенном виде.

^ 2. Понятие о гипертексте

Гипертекст (hypertext) – это особый текст, в котором есть ссылка на другую Web-страницу или документ. В данном случае приставка гипер означает более чем или сверх, так как вы видите перед собой нечто большее, чем просто текст. В большинстве браузеров гипертекст (или гиперссылка) обычно подчеркивается и выделяется другим цветом, в отличие от остального текста. Если щелкнуть на гипертексте, то его цвет изменится. Щелчок на гиперссылке приводит к тому, что Web-браузер запрашивает документ, на который указывает ссылка, а затем загружает его в окно браузера. Таким образом, благодаря гипертексту Web-страница приобретает свойство интерактивности.

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

^ 3. Понятие о html-файле

Для разработки html-файлов нужен всего лишь текстовый редактор. Запомните, что, хотя html-страницы и представляют собой файлы с расширением .htm или .html, на самом деле это обычные текстовые файлы формата ASCII. Для того чтобы создать html-страницу, необходимо воспользоваться командой Файл – Сохранить как и сохранить файл в текстовом формате и добавить к его имени расширение .htm или .html, в зависимости от используемой операционной системы.

Лучше всего для упорядочения html-файлов создать на жестком диске специальный каталог (или папку) для хранения Web-страниц. Это особенно важно в случае, если мы собираемся создать несколько взаимосвязанных страниц. Необходимо для начала определить структуру расположения файлов на жестком диске. Для создания простого Web-сервера, как правило, нужно иметь несколько текстовых и графических файлов и, возможно, пару файлов мультимедиа. Создавая Web-сервер, содержащий относительно небольшое количество страниц и изображений, можно сохранить все файлы в одном каталоге. Если же файлов много, следует разместить их в нескольких папках.

^ 4. Понятие о тегах языка html

Как мы уже говорили язык разметки позволяет определить внешний вид документа. Для этого в текст документа вставляются специальные коды, или дескрипторы (tags). Причем сделать это можно с помощью программы Блокнот или другого текстового процессора. И вообще, при создании Web-страниц вам придется делать многое из того, к чему вы привыкли, работая в текстовом процессоре, например, выделять текст полужирным шрифтом или преобразовывать отдельные фразы в заголовки.

Итак, что же такое дескриптор? Дескриптор – это основной элемент кодирования, принятый в стандарте HTML. В HTML практически все зависит от дескрипторов. Они служат для привлечения внимания к определенным словам в документе, тем самым давая браузеру понять, что нужно выделить, где отобразить графику и где находятся гиперссылки.

Дескрипторы заключается в угловые скобки (< >). Например, дескриптором абзаца является

, а дескриптором горизонтальной линии - <НР>. Дескрипторы можно записывать как прописными, так и строчными буквами. Однако запись дескрипторов прописными буквами значительно облегчает зрительное восприятие текста.

Существует два типа дескрипторов: контейнеры и одиночные дескрипторы. Контейнер – это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) дескрипторов. Начальный дескриптор имеет вид , а конечный . Контейнеры предназначены для хранения некоторой информации, например текста или других дескрипторов. Поэтому между начальным и конечным дескрипторами заключено содержимое контейнера. Например, элемент, представляющий собой заголовок первого уровня заключается между дескрипторами

и

:

Мой первый HTML-документ!



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

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

^ 5. Структурные теги

Познакомимся с основными дескрипторами, определяющими структуру Web-страницы.

Дескрипторы элемента HTML ( ) являются самыми внешними, т.е. заключают в себе весь остальной текст и другие дескрипторы. Начальный дескриптор, , – это первое, что вы должны набрать. А конечный дескриптор, , обозначает окончание документа. Большинство браузеров не воспринимает текст, находящийся за пределами этих двух дескрипторов.

У HTML-документа есть "голова" (заголовок) и "тело" (основная часть).

В любом HTML-документе элемент HEAD предшествует основной части (или телу) Web-страницы. Содержимое элемента HEAD заключено между дескрипторами и . Этот текст представляет собой общую информацию о файле и не отображается в самом документе. В дескрипторе HEAD может находиться ряд других элементов. Нас в первую очередь интересует дескриптор </b>, который определяет название документа. Текст, заключенный между дескрипторами <b><TITLE></b> и <b>, отображается в верхней части окна программы (строка заголовка).

И, наконец, самая важная часть HTML-документа – элемент BODY, который заключается между парой дескрипторов и . Этот элемент является самым важным потому, что в него включен весь отображаемый на странице текст, изображения и мультимедиа либо ссылки на них. Описание элемента BODY следует сразу за описанием элемента HEAD.

^ 6. Создание шаблона HTML-документа и первой Web-страницы

Откройте Блокнот и введите следующий текст:




Название Web-страницы



Содержимое Web-страницы: тест, графика, ссылки и т.д.



Сохраните файл в своей папке под именем template.html.

Теперь создайте новый документ и загрузите в него созданный нами шаблон. Затем воспользуйтесь командой ^ Сохранить как, чтобы присвоить имя новой странице.

Замените текст, заключенным между дескрипторами и на "Моя первая Web-страница!". Теперь замените текст между дескрипторами и на следующий:

Это моя первая Web-страница!






Окончательный вариант вашего файла должен иметь следующий вид:




Моя первая Web-страница!




Это моя первая Web-страница!







Сохраните файл в вашей папке присвоив ему имя first.html.

Тема 2: Основная часть Web-страницы (1 час)

План

1. Использование заголовков

2. Символы разрыва абзаца и разрыва строк. Выравнивание абзацев и заголовков

3. Использование дескриптора


4. Форматирование текста с помощью стилей

5. Добавление линий и комментариев
Основная часть всех Web-страниц определяется с помощью элемента BODY, начальный и конечный дескрипторы которого указывают на начало и окончание информации. Контейнер BODY не используется только в одном случае – в документе с фреймами (frameset), где его заменяет контейнер FRAMESET.

^ 1. Использование заголовков

Обычно разработчики HTML-кодов начинают с того, что создают заголовки. Существует шесть уровней заголовков и каждому из них соответствует свой размер шрифта. С помощью заголовков различных уровней можно создать четкую иерархическую структуру документа. Здесь используется тот же принцип, что и в книгоиздании, где заголовки глав выделяются крупным шрифтом, заголовки разделов – более мелким, заголовки подразделов – еще более мелким и т.д.

Стандарт HTML поддерживает шесть уровней заголовков, которые определяются с помощью контейнеров: Н1, Н2, …, Н6. Для каждого уровня заголовков установлены стандартные размеры шрифтов.

^ 2. Символы разрыва абзаца и разрыва строк

Дескрипторы

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

Дескриптор

используется для вставки символа разрыва абзаца. Вставляя данный дескриптор мы тем самым даем браузеру команду завершить текущий абзац и вставить пустую строку перед следующим абзацем.

Дескриптор
используется для вставки символа разрыва строки. Вставляя данный дескриптор мы даем браузеру команду завершить текущую строку и перейти на следующую.

^ Выравнивание абзацев и заголовков

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

Для дескриптора заголовка используется следующий синтаксис:



где n – уровень заголовка;

выравнивание – параметр, который может принимать одно из следующих значений: LEFT, RIGHT, CENTER.

Для дескриптора абзаца используется следующий синтаксис:

<Р ALIGN=выравнивание>

^ 3. Использование дескриптора



Если вы хотите поместить на Web-страницу информацию, которая уже содержится в некотором документе (но не в HTML-коде), то нет никакой необходимости тратить время на повторный набор всего документа. Вместо этого можно воспользоваться контейнером отформатированного текста
. Этот контейнер позволяет сохранить форматирование текста таким, каким оно было при наборе. Кроме того, пробелы внутри текста интерпретируются в точном соответствии с их расположением в текстовом редакторе.

^ Форматирование цитат

Дескриптор
предназначен для длинных цитат, и позволяет сделать отступ в строке.

В контейнер
можно включать другие дескриптор, например текстовые стили или разрывы строк.

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

^ 4. Форматирование текста с помощью стилей

В HTML предусмотрено несколько способов форматирования текста. Это явное (или абсолютное) форматирование с помощью физических стилей и неявное (или относительное) форматирование с помощью логических стилей, и наконец, изменение размера шрифта.

Дескрипторы физических стилей являются абсолютными, это значит, что текст, выделенный физическим стилем, во всех браузерах отображается одинаково. А логические стили, в отличие от физических, можно назвать относительными. Это означает, что в различных браузерах они отображаются по-разному.

^ Таблица – Дескрипторы физических стилей

Дескриптор

Стиль



Полужирный шрифт



Курсив



Моноширный шрифт, как у пишущей машинки



Подчеркивание



Подстрочный текст



Надстрочный текст



Перечеркивание


^ Изменение размера шрифта

С помощью элемента FONT можно определить размер и цвет шрифта. Атрибут SIZE позволяет указать абсолютный размер шрифта (он может принимать значения от 1 до 7) или относительный, по отношению к размеру шрифта, используемого в основной части страницы (он может принимать значения от -4 до +4). При этом используется следующий синтаксис:



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

Для изменения цвета шрифта используется атрибут COLOR, при этом используется следующий синтаксис:

.

^ 5. Добавление линий и комментариев

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

^ Таблица – Атрибуты дескриптора


Дескриптор

Стиль

SIZE

Определяет толщину горизонтальной линии

WIDTH

Определяет длину горизонтальной линии

ALIGN

Определяет способ выравнивания линии

NOSHADE

Определяет черную линию без эффекта гравировки


Величина SIZE измеряется в пикселях.

Величина WIDTH может измеряться как в процентах так и в пикселях, поэтому для атрибута WIDTH используются два варианта синтаксиса:





.


Атрибут ALIGN может принимать значения LEFT, RIGHT или CENTER. Его нужно использовать в сочетании с атрибутом WIDTH, иначе линия протянется вдоль всего экрана:


.


Для атрибута NOSHADE используется следующий синтаксис:


.


Добавление комментариев

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

Для комментариев используется следующий синтаксис:

.

Практическое задание

Откройте файл first.html и сохраните его под именем second.html.

Измените его в соответствии с приведенным ниже листингом:




Это моя первая Web-страница!




Я изучаю HTML







Изменим размер и цвет шрифта







Данный абзац будет выровнен по центру, в отличие от основных абзацев документа, которые выровнены по левому краю







Сохраните документ и откройте его в окне браузера.

Тема 3: Создание таблиц (1 час)

План

1. Начальный этап создания кода таблиц

2. Создание строк и столбцов таблицы

3. Выбор типа таблицы

4. Выравнивание данных в ячейках таблицы по горизонтали и вертикали

5. Окрашивание таблиц и рамок
^ 1. Начальный этап создания кода таблиц

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

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

Прежде чем приступить к созданию таблиц, необходимо понять структуру кода, который для этого используется. Код таблицы в HTML содержится в контейнере TABLE. Прежде чем создавать HTML-код таблицы, вы должны определить максимальное количество содержащихся в ней строк и столбцов. Затем, по мере написания кода, вы будете определять ячейки одну за одной. Ячейки определяются слева направо по строкам и сверху вниз.

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


^ 2. Создание строк и столбцов таблицы

Чтобы описать таблицу, нужно указать количество строк и столбцов, а также их расположение.

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

Дескрипторы и определяют заголовки таблицы.

Дескрипторы и определяют содержание ячейки.

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

^ 3. Выбор типа таблицы

Прежде чем переходить к описанию ячеек, нужно определить некоторые общие характеристики таблицы. К ним относятся ширина таблицы, интервалы внутри ячейки, интервалы между ячейками и т.д.

Одной из таких общих характеристик является рамка, т.е. граница, отделяющая таблицу от остальной части документа. Для этого используется атрибут BORDER=n, где n – ширина рамки в пикселях. Атрибут BORDER помещается в дескриптор . Если выбрать значение 0 или вообще опустить данный атрибут, то будет создана таблица без рамки.

Для определения ширины таблицы используется атрибут WIDTH, также помещенный в дескриптор
. Значение ширины указывается либо в процентах, либо в пикселях, и заключается в кавычки.

С помощью атрибута COLS, помещенного в дескриптор
, можно определить количество столбцов таблицы:

.

И, наконец, для определения интервалов в таблице используются атрибуты CELLSPACING и CELLPADDING, помещенные в дескриптор
. Атрибут CELLSPACING определяет расстояние между ячейками в пикселях (стандартное значение равно 2).

Атрибут CELLPADDING определяет расстояние в пикселях между содержимым ячейки и ее границами (стандартное расстояние равно 1).

^ 4. Выравнивание данных в ячейках таблицы по горизонтали и вертикали

Атрибут ALIGN позволяет выровнять содержимое ячеек и может принимать значение CENTER, JUSTIFY, CHAR, RIGHT, LEFT.

Если присвоить атрибуту ALIGN значение JUSTIFY, то текстовое содержимое ячейки будет выровнено по ширине.

Если присвоить атрибуту ALIGN значение CHAR, то содержимое ячейки будет выравниваться относительно символа, заданного с помощью атрибута CHAR. Например, запись ALIGN="char" CHAR="," можно использовать для выравнивания натуральных чисел по разделителю дробной части.

^ Выравнивание данных в ячейках таблицы по вертикали

Атрибут VALIGN может использоваться в контейнере ,
, . С его помощью можно выровнять текст по верхней или нижней границе ячейки, а также отцентрировать по вертикали. Атрибут VALIGN может принимать следующие значения: TOP, MIDDLE, BOTTOM.

Добавление подписей к таблицам

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

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





Помимо атрибута BOTTOM, в контейнере CAPTION можно использовать атрибуты TOP, LEFT, RIGHT.

^ 5. Окрашивание таблиц и рамок

К таблице можно добавить фон, цвет которого отличается от цвета остальной части Web-страницы. Можно также окрасить строки или отдельные ячейки, чтобы выделить их на фоне остальной таблицы.

Для этого используется атрибут BGCOLOR дескриптора
Это подпись
.

Значением атрибута BGCOLOR может быть как шестнадцатеричное число (в формате #rrggbb), так и текст.



С помощью дескриптора
и атрибутов BORDERCOLOR и BORDERLIGHT можно изменить цвет рамки таблицы. Атрибут BORDER должен быть помещен в дескриптор
. Чтобы изменить цвет рамки внутри таблицы, нужно использовать атрибуты BORDERCOLOR и BORDERLIGHT в дескрипторе или
.

Значение атрибута BORDERCOLOR влияет на верхнюю часть рамки трехмерной таблицы, а величина BORDERLIGHT – на нижнюю (т.е. на тень). С помощью этих атрибутов можно модифицировать стандартные атрибуты представления рамок трехмерных таблиц.

^ Практическое задание

Создайте HTML-код следующей таблицы

Фамилия

дни недели

понедельник

вторник

среда

четверг

пятница

Иванов

6

0

0

0

0

Петров

0

6

0

0

0

Сидоров

0

0

6

0

0

Сергеев

0

0

0

6

0

Васильев

0

0

0

0

6





Создание таблицы

















































































































Тема 4: Создание списков (1 час)

План

1. Списки как инструмент структурирования. Типы списков

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

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

4. Списки определений

5. Вложение и комбинирование списков
^ 1. Списки как инструмент структурирования. Типы списков

Списки – это очень мощное средство структурирования документа. С их помощью можно обеспечить четкую и ясную подачу материала. В HTML предусмотрены возможности создания привлекательных и в то же время функциональных списков.

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

^Таблица – Типы списков HTML и соответствующие им дескрипторы
Фамилия дни недели
понедельник вторник среда четверг пятница
Иванов 6 0 0 0 0
Петров 0 6 0 0 0
Сидоров 0 0 6 0 0
Сергеев 0 0 0 6 0
Васильев 0 0 0 0 6

Дескриптор

Тип списка



Упорядоченный (нумерованный) список



Неупорядоченный список (маркированный)



Список определений



Список элементов меню (используется редко)



Список элементов каталогов (используется редко)


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

Упорядоченные и нумерованные списки – это одно и то же. Эти термины являются взаимозаменяемыми. Нумерованный список создается с помощью контейнера
    . Каждый элемент списка определяется внутри этого контейнера с помощью дескриптора
  1. (который расшифровывается как list item- элемент списка).

    По умолчанию элементы списка нумеруются с помощью обычных арабских цифр. Но можно сделать так, чтобы для нумерации использовались буквы алфавита (строчные или прописные) или римские цифры. Стиль форматирования списка определяется с помощью следующего синтаксиса:



      Параметр тип может принимать значения, приведенные в таблице

      ^ Таблица – Типы нумерации упорядоченных списков в HTML

      Тип

      Стиль

      1

      Стандартный способ нумерации с помощью арабских цифр

      а

      Строчные буквы алфавита

      А

      Прописные буквы алфавита

      i

      Строчные римские цифры

      I

      Прописные римские цифры


      Способ нумерации можно изменить и в середине списка. Для этого соответствующий элемент списка нужно определить следующим образом:



    1. Нумерацию списка с помощью цифр или букв можно начать с любой цифры или буквы. Для этого используется атрибут START.Чтобы начать нумерацию с некоторой буквы или римской цифры, воспользуйтесь атрибутами TYPE и START. Синтаксис этой процедуры выглядит следующим образом:



        Параметр значение – это число.

        Для изменения схемы нумерации внутри списка используется атрибут VALUE дескриптора
      1. .

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

        Самым распространенным типом списка является неупорядоченный или маркированный список. В таких списках напротив каждого элемента неупорядоченного списка находится маркер (bullet), который может иметь вид, например, большого черного кружка или квадратика.

        При создании маркированных списков используются дескрипторы
          и
        . Как и в нумерованных списках, все элементы маркированных списков определяются с помощью дескриптора
      2. .

        Чтобы изменить тип маркера для всего списка, воспользуйтесь синтаксисом
          , а для одного элемента списка –
        • , где параметр тип – это одно из значений, приведенных в таблице

          ^ Таблица – типы маркеров для маркированных списков

          Тип

          Рекомендуемый внешний вид (зависит от браузера)

          Disk

          Заполненный кружок

          Square

          Заполненный квадратик

          Circle

          Незаполненный кружок


          ^ 4. Списки определений

          Списки определений чем-то напоминают толковые словари, так как каждому термину соответствует абзац определения, расположенный с отступом. Это средство незаменимо в том случае, если нужно создать список элементов с их подробным описанием (например, для каталогов розничных товаров или недвижимости).

          Список определений (definition list) содержится в контейнере
          .
          Элементы списка определений создаются с использованием дескрипторов
          и
          , с помощью которых отмечаются термин и его определение соответственно.

          ^ 5. Вложение и комбинирование списков

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

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




          Вложение списков





          Вложенные списки






          Как приготовить эликсир молодости





          1. Взять равные части следующих элементов:



            • Крокодиловы слезы

            • От мертвого осла уши

            • Дырку от бублика



          2. Все перемешать и растолочь в порошок

          3. Порошок залить спиртом

          4. Полученную жидкость перелить в бутылку

          5. Закопать бутылку в саду

          6. Выкопать ровно через 1 год

          7. Выбросить бутылку в море и не морочить себе голову!








          © lib.rushkolnik.ru
          При копировании укажите ссылку.
          обратиться к администрации