Лекция №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 практически все зависит от дескрипторов. Они служат для привлечения внимания к определенным словам в документе, тем самым давая браузеру понять, что нужно выделить, где отобразить графику и где находятся гиперссылки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

< HR >

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

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

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

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

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

Главная

Закажите сайт и займитесь бизнесом!

Данную фразу можно услышать и увидеть на многих сайтах, а это ведь не зря!

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

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

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

Важнейшими достоинствами HTML являются:

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

В этом сайте, я постаралась детально описать весь процесс создания собственного Web сайта, а именно публикации готового проекта в Internet с целью предоставления доступа к нему всем пользователям.

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

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 может находиться ряд других элементов. Нас в первую очередь интересует дескриптор , который определяет название документа. Текст, заключенный между дескрипторами и , отображается в верхней части окна программы (строка заголовка).

И, наконец, самая важная часть 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.

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

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

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

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

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

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

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

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

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

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

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


Дескриптор

Стиль



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



Курсив



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



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



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



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



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

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

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

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

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

.

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

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

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

Величина 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 и соответствующие им дескрипторы

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

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

  • (который расшифровывается как list item- элемент списка).

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

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

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

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

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

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

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

  • .

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

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

    При создании маркированных списков используются дескрипторы

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

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

    • Иванов60000Петров06000Сидоров00600Сергеев00060Васильев00006
    Создает таблицу обтекание текста вокруг таблицы BACKGROUND фоновый рисунок таблицы BGCOLOR фоновый цвет таблицы BORDER границы вокруг таблицы BORDERCOLOR цвет границ вокруг таблицы CELLPADDING отступ текста от границ ячеек CELLSPACING промежутки между ячейками FRAME выборочный показ границ вокруг таблицы HEIGHT высота таблицы RULES выборочный показ границ внутри таблицы WIDTH ширина таблицы Создает группу строк таблицы выравнивание текста ячеек по горизонтали BGCOLOR цвет фона ячеек CHAR выбор символов для выравнивания V выравнивание текста ячеек по вертикали BGCOLOR CHAR V
    - Создают ячейку данных или ячейку заголовка таблицы выравнивание текста ячейки по горизонтали

    7 BACKGROUND BGCOLOR CHAR COLSPAN HEIGHT NOWRAP ROWSPAN V WIDTH ACCESSKEY COLS DISABLED READONLY ROWS TABINDEX WRAP BGCOLOR CHAR V BGCOLOR CHAR V