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

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

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

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

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

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

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

< HR >

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

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

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

В общих чертах, дескрипторы — это некие атрибуты объектов, для которых определено соответствующее поведение. При доступе к ним происходит получение, установка или удаление указанных атрибутов из словаря. Говоря простым языком, это особые ключевые слова, определяющие поведение объекта, его свойства или структуру. В статье будет рассмотрено несколько вариантов дескрипторов. Это позволит более точно понять их суть и предназначение.

HTML

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

Как правило, специфика языка определяет наличие открывающего дескриптора и закрывающего. Все, что между ними, подвержено изменению.

Дескриптор может иметь атрибуты, то есть определённые свойства. Их синтаксис выглядит так: имя атрибута = его значение.

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

Архитектура х86

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

• Смещение. Может сдвинуть процедуру кода.
• Селектор. Отражает своего рода метку, куда должна перейти процедура.
• Количество параметров.
• Права доступа.

Java

В Java EE имеется понятие дескриптора развёртывания. Он определяет то, каким образом будет развёрнут сервлет. По сути, это конфигурационный файл, содержащий настройки, свойства и требования к аппаратной части.

В веб-приложениях такой файл по правилам должен называться web.xml и располагаться в определённой папке.

Файловые дескрипторы

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

Операционная система Windows позволяет обратиться к дескриптору с помощью функции CreateFile. Его можно в дальнейшем использовать при работе с требуемым файлом.

В Unix системах для файлового дескриптора используется цифровые обозначения. 0 — стандартный ввод процесса терминала, 1 — его вывод, 2 — поток диагностики. Помимо числовых представлений можно использовать символические константы, определённые спецификацией.

Дескриптор окна

После того как в системе создаётся любое окно, ему присваивается определённый дескриптор. Типы данных применяемых в нем — HWND. Программисту, при создании приложения, нужно правильно использовать их для обращения к

Программа может получить дескриптор, обратившись к помощи функции FindWindow. Она по имени класса или объекта окна сможет его найти и вернуть значение дескриптора.

Чтобы проверить, правильно ли прошла идентификация, стоит использовать функцию IsWindow.

Ошибка номер 1400

Данная проблема часто встречается в семействе операционных систем Windows. При её появлении вместе с ней может быть и краткое описание — недопустимый дескриптор окна. А может встречаться и такая формулировка - «Error_invalid_window_handle» или 0х578.

Как бороться и что значит неверный дескриптор? В зависимости от контекста объекта, нужно принимать разные меры.

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

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

Ещё один надёжный способ быстро восстановить работоспособность системы — сделать её откат с помощью стандартных инструментов. После использования «Восстановления системы», она вернётся к последней действующей резервной копии, при условии что она была ранее создана.

Когда может возникнуть ошибка

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

Заключение

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

А также стало ясно, что это — неверный дескриптор. Как оказалось, это распространённая проблема в среде Windows, в большинстве случаев решаемая простыми манипуляциями.

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

» html для новичков

» Главная страница

» html для новичков

Основные Тэги (Дескрипторы) языка html

По традиции всех классических руководств по HTML мы приводим самый простой гипертекстовый документ.

Здесь размещен заголовок первого уровня

Добро пожаловать в Internet!

Первый и последний параграф.

В этом примере мы использовали следующие термины гипертекста (так называемые тэги):

Название документа

Это не правило, и даже не закон, это факт:

Любой документ HTML имеет название.

По названию вашего документа HTML другие обозреватели могут найти информацию. Место для названия всегда определено – оно находится вверху экрана, и отдельно от содержимого документа. Максимальная длина названия – 40 символов.

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

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

Следующие тэги присущи непосредственному форматированию:

Параграф.

Обрыв строки.

Заголовки и подзаголовки

Язык HTML позволяет вам работать с шестью уровнями заголовков. Первый заголовок – самый главный. На него обращается особое внимание. Остальные заголовки могут быть оформлены, например, жирным шрифтом или прописными буквами.

В HTML первый заголовок обозначается как

:

Текст

Под n понимается уровень заголовка, то есть, числа 1, 2, 3, 4, 5 или 6.

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

Списки подразделяются на ненумерованные:

Элемент списка

нумерованные:

Элемент списка

c описаниями:

Собака (элемент)

Друг человека (описание элемента)

и вложенные:

Примус

Другой примус

Выделение текста

Текст в документе HTML может быть выделен одним из следующих способов:

- цитата

- программный код

- определение

- логический акцент

- ввод с клавиатуры

- сообщения компьютера

- сильный акцент

- переменные

Один большой параграф

В HTML разбиение на строки не принципиально. Это означает, что вы можете разбить строки вашего документа в любом его месте. Связано это с тем, что в гипертекстовом документе идущие подряд отбивки превращаются в одну. Но! Если отбивка сделана после тэга

То она учитывается. Если какой-нибудь тэг игнорируется, то отбивка также учитывается. В остальных случаях обозреватель будет пропускать отбивки.

HTML позволяет вам связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием.

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

¦ наберите

¦ введите HREF=”filename”>

¦ наберите тэг

Bob

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

Bob

Если вы хотите указать полное имя файла, то вам необходимо использовать синтаксис UNIX.

protocol: //hostport/path

Предварительное форматирование текста

Тэг

Позволяет сформировать текст, оформленный моноширинным шрифтом.

 
Используйте этот тэг для оформления листингов программ.
 
Расширенные цитаты
 
Тэг 
 позволяет вам включить цитату в уединенный объект.

 
Тэг 
 позволяет сформировать информацию об авторе документа HTML.

 
Принудительный перевод строки
 
Тэг 
 переводит только одну строку, то есть, без дополнительного пробела.
 
Горизонтальные разделители
 
Тэг 
 формирует горизонтальную линию по всей ширине окна.

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

 
Здесь image_URL есть указатель на файл картинки, синтаксис которого совпадает с синтаксисом ссылки HTML.
В
дипломном проекте в качестве программного
инструментария для заполнения статического
контента был использован язык
гипертекстовой разметки HTML.
HTML
(Hyper Text Markup Language - язык гипертекстовой
разметки) представляет собой компьютерный
язык программирования, предназначенный
для разработки Web-страниц, или, другими
словами, документов HTML. Язык HTML – это
коллекция управляющих символов –
дескрипторов, с помощью которых можно
добавлять и форматировать элементы
документа. Для настройки внешнего вида
и функционирования элемента страницы
устанавливаются его атрибуты.
Обозреватели
распознают дескрипторы языка HTML и
преобразуют код документа в Web-страницу,
отображаемую в окне обозревателя.
Приложения обозревателей разрабатываются
с учетом мировых стандартов языка HTML,
благодаря чему Web-страницы выглядят
одинаково, независимо от того, в окне
какого обозревателя они отображаются.
Вопросами
стандартизации языка HTML занимается
организация World Wide Web Consortium (W3C). Несмотря
на необходимость обеспечить полную
программную и аппаратную независимость
Web-страниц, в полной мере реализовать
эти принципы довольно сложно. Одна из
проблем состоит в том, что работа над
языком продолжается. Появляются новые
версии HTML, предоставляющие дополнительные
возможности для разработчиков Web-страниц.
Существует
множество специализированных
HTML-редакторов, которые можно условно
разделить на два типа:
визуальные
 редакторы HTML,
 то есть редакторы типа WYSIWIG
 (например, Microsoft
 FrontPage,
 Macromedia
 Dreamveawer,
 Netscape
 Navigator
 Gold
 и др.). При работе в этих программах
 пользователь имеет дело с графическими
 образами элементов HTML,
 а не с кодом документа. Кстати, существуют
 конверторы текстовых документов,
 подготовленных в Word
 и Word
 Perfect,
 в формат HTML-файлов;
редакторы
 собственно HTML-текстов,
 позволяющие автоматизировать набор и
 редактирование кода (например, HomeSite,
 HotDog,
 Ken
 Nesbitt
 Web
 Editor
 и многие другие). Эти программы дают
 возможность пользователю быстро и
 легко вставлять в документы элементы
 HTML,
 проверять синтаксис команд, выполнять
 запуск и отладку страницы, не покидая
 окна редактора. Вообще работа в таких
 редакторах напоминает работу в
 интерактивной среде программирования
 типа Delphi
 или Visual
 Basic.
Кроме
перечисленных двух категории, существуют
программы, объединяющие в себе черты
текстовых и визуальных HTML-редакторов
к таким программам относится HotMetal
разработки компании SoftQuad
Sofware.
Функции
современных HTML-редакторов очень
разнообразны: некоторые из них, например,
обеспечивают формирование только
отдельных страничек, другие, наоборот,
применяются для проектирования целых
Web-узлов с последующей загрузкой их на
удаленные серверы в Internet. Сегодня трудно
провести границу между профессиональными
HTML-редакторами и теми, что предназначены
для любительского Web-творчества.
При
использовании каждого элемента важно
знать, какие элементы могут располагаться
внутри него, и внутри каких элементов
может находиться он сам. Так, взаимное
расположение элементов HTML, HEAD, TITLE и BODY
должно быть стандартным на любой
странице, правда, в тех случаях, когда
не используются фреймы. Если же страница
представляет собой документ планировки
фреймов (подробнее об этом в разделе
«Фрей мы» главы 3), то вместо элемента
BODY используется элемент FRAMESET.
Существуют
группы элементов, которые используются
совместно. К ним относятся элементы для
создания таблиц, списков, фреймов. В
этом случае порядок вложения элементов
определяется логикой создания того или
иного объекта на странице: тут надо
помнить несложные правила конструирования.
Таблицы и фреймы часто используются
для того, чтобы поместить детали страницы
(рисунки, текст и т. д.) в определенном
порядке. Например, располагая рисунок
внутри ячейки таблицы, можно добиться
определенного его положения. В таких
случаях вложенность элементов определяется
разработчиком Web-страницы, и многое
зависит от его фантазии и умения.
Большое
количество элементов, которые используются
для форматирования текста, допускают
самые разнообразные варианты вложения.
И сами они обязательно должны располагаться
внутри определенных элементов. Здесь
надо руководствоваться здравым смыслом:
каждый элемент выполняет заданную
функцию и имеет определенную область
действия.
В
приведенном ниже примере есть два абзаца
(первый в зеленой рамке) и таблица:
<Р
style="border: Зрх solid дгееп">Текст
абзаца 1

. . . 
<Р>
Текст абзаца 2
Таблица
в данном случае - независимый элемент.
Ее можно, например, выравнивать независимо
от остального текста.
Можно
использовать другой код:
<Р
style="border: Зрх solid дгееп">Текст
абзаца 1

. . . 
<Р>
Текст абзаца 2
Исчез
конечный тег первого абзаца. Теперь
таблица является частью первого абзаца,
и зеленая рамка будет охватывать таблицу
и текст.
И
наоборот, элемент Р может находиться
внутри таблицы: например, один элемент
ячейки TD может содержать несколько
абзацев Р.
Нарушение
правил вложения - одна из наиболее
распространенных ошибок при создании
Web-страниц. Чтобы избежать таких ошибок,
надо пользоваться редакторами гипертекста,
которые автоматически контролируют
выполнение правил синтаксиса. Ниже
приведена строка, содержащая типичную
ошибку вложенных элементов:
<Н1>Заголовок
1 <Н2> Заголовок 2 

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

Некоторые элементы не имеют конечного теги. Очевидно, что элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом или без него. Самым ярким примером служит элемент абзаца Р. Он может иметь конечный тег, но если этот тег не задан, то при знаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент Р, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и т. д. Таким образом, полезная информация одного элемента должна находиться либо между начальным и конечным тегами данного элемента, либо между начальным тегом данного и начальным тегом следующего элемента. Любой произвольный текст, введенный на страницу, воспринимается браузером как подлежащий выводу на экран и, следовательно, форматированию в соответствии с окружающими этот текст элементами. При этом не учитывается разбиение текста на строки, полученное в текстовом редакторе. Теоретически, всю Web-страницу можно уместить в одной длинной строке. Символы конца строки, введенные, например, в Блокноте, могут помочь чтению кода HTML, но не отображаются браузером. Последний, при выводе страницы на экран, может оборвать строку в соответствии с расстановкой элементов Hn, P или BR, а в остальных случаях он форматирует абзацы произвольно, в зависимости от объема текста, размера шрифта и текущего размера окна. Поэтому Web-страницы надо компоновать таким способом, чтобы их вид кардинально не изменялся для разных режимов разрешения монитора, размера экрана, размера окна браузера, а также для полноэкранного или оконного режимов. Очень важным правилом, которое не имеет исключений, является размещение атрибутов элемента внутри начального тега .

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

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

Документ состоит из 2 частей:

заголовка (Head).

документа (Body).

При написании команд HTML не имеет значение, какими буквами – строчными или прописными Вы пишете команды.

Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).

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

Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег будет работать так же, как . Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL. Общую схема документа показана на рисунке 1.1.

Рисунок 1.1. Общая схема документа в формате HTML

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

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

Результат: Моя первая Web-страница.

Конечный тег имеет то же имя, что и начальный, но перед ним стоит слэш (/). Его можно рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

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

Запишем пример простейшего документа:

<ТIТLЕ>Пример HTML-страницы

<ВОDY>Это простая страница, иллюстрирующая структуру описания на языке HTML.

Тег

Ричард Бах

Единственная

Мы прошли долгий путь, правда?

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

В окне браузера будет выводиться как показано на рисунке 1.4.

Рисунок 1.4. Разбиение на абзацы.

8 класс

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

Тема 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-страницы: тест , графика, ссылки и т.д.

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

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

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

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

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

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

Тема 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 может измеряться как в процентах так и в пикселях, поэтому для атрибута WIDTH используются два варианта синтаксиса:

.
Атрибут ALIGN может принимать значения LEFT, RIGHT или CENTER. Его нужно использовать в сочетании с атрибутом WIDTH, иначе линия протянется вдоль всего экрана:
.
Для атрибута NOSHADE используется следующий синтаксис:
.
Добавление комментариев
В исходный код Web-страницы можно добавлять комментарии, которые не будут видны посетителям вашего сервера. Они предназначены для того, чтобы в случае необходимости вы легко могли разобраться в собственном коде.
Для комментариев используется следующий синтаксис:
.
Практическое задание
Откройте файл first.html и сохраните его под именем second.html.
Измените его в соответствии с приведенным ниже листингом:
 
 
 
 
 
 
Я изучаю 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), который может иметь вид, например, большого черного кружка или квадратика.
При создании маркированных списков используются дескрипторы 

 и 

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

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

, а для одного элемента списка – 

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


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

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

, с помощью которых отмечаются термин
 и его определение
соответственно. 
^
 5. Вложение и комбинирование списков

При желании можно комбинировать различные типы списков, а также вкладывать их друг в друга независимо от того, к одному или к разным типам они относятся.
В следующем листинге приведен пример использования вложения маркированного списка в нумерованный.
 
 
 
 
 
Вложенные списки
 
Как приготовить эликсир молодости
 
Взять равные части следующих элементов:
 
Крокодиловы слезы
 
От мертвого осла уши
 
Дырку от бублика
 
Все перемешать и растолочь в порошок
 
Порошок залить спиртом
 
Полученную жидкость перелить в бутылку
 
Закопать бутылку в саду
 
Выкопать ровно через 1 год
 
Выбросить бутылку в море и не морочить себе голову!



                        
                    
                    
                    
 

                    

                        

                            
Рекомендуем статьи по теме
                            

                                                                     

                                        

                                            
 Как добавить номер в черный список на Android-смартфоне
                                    
                                                                     

                                        

                                            
 Принципы построения быстрых ацп Максимальная частота ацп
                                    
                                                                     

                                        

                                            
 Посмертные поиски Найти могилу – способы поиска
                                    
                                


                            
                        
                    
                    

                        

                            
                        
                        
 Комментарий
                            

                                
 Ваше имя 
                                
 Ваш e-mail 
                            
                            
 Комментировать
                                
Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности и правилами сайта, изложенными в пользовательском соглашении
                            
  
                    

                
                
            
            

                
Присоединяйтесь к нашим сообществам в социальных сетях
                

                    
 
                    
 
                    
 
                    
 
                    
 
                
            
            

            
                

    
Получайте первыми самые полезные советы наших экспертов, читайте эксклюзивные материалы и анонсы и никакого спама
    

        
  
        
Нажимая кнопку «Подписаться», я соглашаюсь с Политикой конфиденциальности данных
    
            


            
                
            

        
    
    


        
            

            

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

                
                
                

                    
Популярное
                    

             
  Обзор неубиваемых телефонов IP68 с мощными аккумуляторами: флагманы и не только
             
  Настройка почты Rambler – версия для ПК и для смартфона
             
  Что делать, если приложение удалено из Google Play market
    



                
            
            

                

                    

    
 
    
 
    
 
    
 
    
 

                
                

    
Получайте первыми самые полезные советы наших экспертов, читайте эксклюзивные материалы и анонсы и никакого спама
    

        
  
        
Нажимая кнопку «Подписаться», я соглашаюсь с Политикой конфиденциальности данных
    
    
            
        
        

    



Фамилия
дни недели
понедельник
вторник
среда
четверг
пятница
Иванов
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