Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML (Единицы измерения в HTML)

Содержание:

1. Вступление

HTML (от англ. Hyper Text Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.

Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

2. Ступени развития HTML

HTML 2.0 - Стандарт был утвержден в ноябре 1944 г. организацией IETF (Internet Engineering Task Force ). В нем были расширены возможности предыдущей версии языка и он получил широкое распространение как у профессионалов, так и любителей.

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

HTML 3.2 (кодовое наименование проекта: “Wilbur”) – Был опубликован и начал широко использоваться с мая 1996 г., получил официальное утвержден в 1997 г. Получил популярность из-за совместимости с HTML 2.0.

HTML 4.0 (кодовое наименование проекта: “Cougar ”) – последняя версия языка. В нем реализованы многие распространенные концепции Web -дизайна и приняты некоторые средства HTML 3.2. Самым значительным отличием HTML 4.0 от предыдущих версий является кодировка Unicode , тег “ Object”, позволяющий работать с мультимедиа ( в т.ч. с видеоклипами и звуком) и др.

HTML5 вводит несколько новых элементов и атрибутов, которые отражают типичное использование разметки на современных веб-сайтах. Некоторые из них — семантические замены для использования универсальных блочных (<div>) и строчных (<span>) элементов, например, <nav> (блок навигации по сайту), <footer>(обычно относится к нижней части страницы или последней строке HTML кода) или <audio> и <video> вместо <object>

3. Представление о языке гипертекстовой разметки HTML

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Opera, Google Chrome, Mozilla Firefox, Internet Explorer или другими браузерами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается всеми браузерами.

Поскольку HTML-документы записываются в ASCI I-формате, то для ее создания может использован любой текстовый редактор.

Обычно HTML-документ - это файл с расширением.html или. htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.

В WEB редакторах типа WordPress, Joomla и т.п. не обязательно вникать в программный код создаваемых страниц, редакторы сами расставляют теги, поэтому пользователь таких программ может не знать языка разметки гипертекста HTML.

Знание HTML необходимо по пяти причинам.

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

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

В-третьих, HTML непрерывно развивается, поэтому программы типа MS FrontPage все время отстают от новейших возможностей языка.

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

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

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

1) на данном сайте, то есть в папке, содержащей все htm-файлы, графику, звук, анимацию, видеофильмы, программы;

2) вне сайта в других в папках на данном компьютере;

3) в системе World Wide Web, то есть на других Web-серверах;

4) в Internet на серверах других типов(FTP, Gopher).

Применение механизма гипертекстовых ссылок создает всемирное единое информационное пространство, из которого сотрудники торговой фирмы получают нужные им сведения. Стандарт HTML, как и все другие стандарты, имеющие отношение к Web, разрабатывается под эгидой консорциума World Wide Web Consortium (W3C). Спецификации стандартов и проекты новых предложений можно найти по адресу http://www.w3.org. Самая последняя разработка рабочей группы по HTML в W3C - рабочий проект HTML 4.0. Кроме HTML, Web-мастера используют и другие языки, например, Java (Ява), Perl, Си.

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

4. Синтаксис и теги HTML

Общий синтаксис написания тегов следующий

<имя_тега атрибут1="значение" арибут2="значение">

<имя_тега атрибут1="значение" арибут2="значение">…</имя_тега>

Таким образом, теги бывают двух видов:

•одиночные (одиночный тег используется самостоятельно)

•парные (парный тег может включать внутри себя другие теги или текст)

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

Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:

Ниже представлен код Web-страницы который выполнен на языке HTML и на этом примере разберем его структуру

<! DOCTYPE HTML "-//W3C//DTD HTML4.01 Transitional//en">
<html>
<head>
<titlе>Структура web документа</title>
<meta html-equiv="Content-Type"Content="text/html;charset=windows-1251">
<meta name="Keywords" content="soft">
<meta name="discription" content="soft">
</head>
<body bgcolor = #FFFFFF>
<a name ="list"></a>

Переход в <a href="#list1">Конец документа</a> <p>

Переход к <a href="#list2"><b>первая ссылка <b></a></p>

<НR>

<Н1>Заголовок 1</h1>

<Н2>Заголовок 2</h2>

<НЗ>Заголовок 3</h3>

<Н4>Заголовок 4</h4>

<Н5>Заголовок 5</h5>

<Н6>Заголовок 6</h6>

<НR>

Здесь расположена <b>первая ссылка </b><а name =" list2"></a>

<НR>

<р>Здесь должен располагаться<br> основной текст web страницы. <br>

<НR>

<а name="list1"</a><p>

Переход в <а href ="#list">Начало документа</a>

</body>

</html>

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

<HTМL> </html>

Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все подобные документы.

<HEАD> </head>

Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.

<TITLЕ> </title>

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

<МЕТА>

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

<BОDY><body>

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

Один из самых полезных атрибутов данного тега, который оказывает свое влияние на дизайн страницы это:

background="путь к файлу фона"

Более простое оформление фона сводится к заданию его цвета:

bgcolor="#FFFFFF"

Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов (rbg).

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

text=" #RRGGBB"

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

link="#RRGGBB"

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

Tiling "#RRGGBB"

5. Заголовки HTML

<Н1></H1>

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

<Н1>Заголовок</H1>

<Н2>Заголовок</H2>

<Н3>Заголовок</H3>

<Н4>Заголовок</H4>

<Н5>Заголовок</H5>

<Н6>Заголовок</H6>

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

align="left" align="center" align="right"

Для создания нового абзаца используется тэг <P>, а для перехода на новую строчку без создания абзаца - тэг <BR> т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если не использовать в тэге <P> элемент ALIGN, которым может задаваться выравнивание абзаца:

<Р ALIGN=LEFT>По левому краю</P>

<Р ALIGN=CENTER>По центру</P>

<Р ALIGN=RIGHT>По правому краю</P>

<Р ALIGN=JUSTIFY>Текст, находящийся между этими элементами выравнивается по ширине</P>

<НR>

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

align="left" align="center" align="right" align="justify"

<А> </а>

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

<а name="метка">Произвольный текст</a>

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

Для вставки изображений (картинки) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега):

<IМG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

6. Списки HTML

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

<UL> <LI> </uI>

Самым распространенным является ненумерованный список (unordered list). Он представлен ниже:

<UI>
<Ll> Пункт 1 списка
<Ll> Пункт 2 списка
<Ll> Пункт 3 списка
</uI>

Элемент UL является своеобразным выделением списка. Он позволяет разделять один список от другого. Элемент LI обозначает каждый из пунктов.

7. Адреса в HTML

Абсолютный и относительный пути

Описание относительных и абсолютных путей в HTML.

Адреса в HTML могут указывать путь: на сайт, страницу сайта или файл расположенный на сайте. Обычно адрес HTML выступает в качестве значений у атрибутов, тега a (ссылки) или img (изображения):
<a href="http://имя_Сайта"> — адрес сайта,
<a href="http://имя_Сайта/stranitsa.html"> — адрес страницы сайта,
<img src="http://имя_Сайта/file.jpg"> — адрес файла изображения расположенного на сайте.

Где в качестве имя_Сайта, выступает название сайта, например comp-doma.ru

Адреса в языке HTML бывают трёх видов:

1. Адрес сайта,

2. Абсолютный адрес (абсолютный путь к странице или файлу),

3. Относительный адрес (относительный путь к странице или файлу).

Адрес сайта

Адрес сайта в HTML это просто имя сайта c приставкой http://, например:

http://ya.ru — Яндекс

http://google.ru — Гугл

http://vk.com — Вконтакте и т.д.

Абсолютный адрес

Абсолютный адрес — это абсолютный путь к странице или файлу. Абсолютный адрес начинается с адреса сайта, на котором находится страница или файл.

Примеры абсолютных адресов (абсолютных путей):

<a href="http://имя_Сайта/about.html"> — абсолютный адрес страницы about.html, сайта имя_Сайта

<a href="http://имя_Сайта/service/online.html"> — абсолютный адрес страницы online.html, находящейся в папке service, сайта имя_Сайта

<a href="http://имя_Сайта/product/soft/editor.html"> — абсолютный адрес страницы editor.html, находящейся в папке soft, сама папка soft находится в папке product, сайта имя_Сайта

Точкой отсчета абсолютного адреса является адрес сайта, на котором расположена страница или файл.

Относительный адрес

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

Допустим в папке product находится страница list.html, её абсолютный адрес выглядит следующим образом:

http://имя_Сайта/product/list.html — страница list.html расположена в папке product

Есть еще одна страница, чей абсолютный адрес выглядит следующим образом:

http://имя_Сайта/about.html — страница about.html находится в корне (на одном уровне с главным файлом index.html) сайта.

На странице list.html нужно поставить ссылку, которая будет ссылаться на страницу about.html находящуюся на том же сайте. Сослаться на неё можно двумя способами:

1. <a href="http://имя_Сайта/about.html"> — используя абсолютный путь,

2. <a href="../about.html"> — используя относительный путь.

Символ ../ означает, что нужно подняться на одну папку вверх (на один уровень),

Символ ../../ означает, что нужно подняться на две папки вверх (на два уровня).

Если страница list.html тоже будет находится в корне сайта:

http://имя_Сайта/list.html, то для того чтобы сослаться на страницу about.html, нужно будет в HTML-документе list.html прописать следующий код:

<a href="about.html"> — относительный путь.

Далее, если страница list.html будет находится в папке soft:

http://имСайта/product/soft/list.html, то для того чтобы сослаться на страницу about.html, нужно будет в HTML-документ файла list.html прописать следующий код:

<a href="../../about.html"> — т.е. два раза подняться вверх по папкам.

Чтобы сослаться на страницу online.html, которая находится по адресу:

http://имя_Сайта/service/online.html, нужно в HTML-документе файла list.html, который находится по адресу:

http://имя_Сайта/product/soft/list.html, прописать следующий код:

<a href="../../service/online.html"> — два раза подняться вверх по папкам, затем "зайти" в папку service и написать имя файла online.html

Точкой отсчета относительного адреса является то место, где находится ссылающаяся страница.

Также, в качестве точки отсчета относительного адреса может выступать корень сайта /, пример:

<a href="/about.html">

<a href="/service/online.html">

Разница между абсолютным и относительным путями

Рассмотрим различия между абсолютным и относительным путями:

Точка отсчета абсолютного адреса начинается с адреса сайта, точка отсчета относительного адреса начинается с места где находится страница, которая хочет сослаться на другую страницу или файл.

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

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

8. HTML цвета и способы их указания

В языке HTML, существует два способа указать цвет:
1. С помощью имени цвета,
2. С помощью системы RGB, где цвета заданы в шестнадцатеричном формате.

8.1 Имя цвета

Имя цвета в HTML указывается английскими словами, например red или green. Имя цвета выступает в качестве значения атрибута HTML-тега. Имён цветов очень много, в этой статье мы рассмотрим лишь основные из них.

Обычно для задания цвета, в языке HTML используют два атрибута:

1. Атрибут color="имя_цвета" — цвет текста,
2. Атрибут bgcolor="имя_цвета" — цвет фона.

Примеры использования цветовых атрибутов:
color="red" — назначаем тексту красный цвет,
bgcolor="green" — назначаем фону зелёный цвет.

Таблица основных имён цветов HTML:

Имя цвета

Его вид

Перевод

white

Белый

ivory

Слоновая кость

silver

Серебряный

gray

Серый

black

Чёрный

maroon

Тёмно-бордовый

red

Красный

orange

Оранжевый

gold

Золотой

yellow

Жёлтый

olive

Оливковый

lime

Лайм

green

Зелёный

aqua

Морская волна

blue

Синий

navy

Нави

teal

Бирюзовый

fuchsia

Фуксиновый

purple

Пурпурный

8.2 Шестнадцатеричная система счисления

В повседневной жизни мы пользуемся десятичной системой счисления от 0 до 9. Программисты и дизайнеры часто используют шестнадцатеричную систему счисления от 0 до 15, где:

10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

Практически каждый цвет и оттенок, видимый нашему зрению можно записать в шестнадцатеричной системе, например красный цвет red (красный) в шестнадцатеричной системе будет равен ff0000

color="red" — красный цвет, по имени,
color="#ff0000" — красный цвет, в шестнадцатеричной системе счисления.

В языке HTML, перед шестнадцатеричным числом, в значении атрибута ставят знак решётки #

RGB

Перед тем как начать указывать цвета в HTML с помощью шестнадцатеричной системы счисления, для начала нужно узнать о таком понятии как RGB

RGB — это сокращение от слов Red Green Blue (Красный Зелёный Синий).

Цвет в HTML, записанный в шестнадцатеричной системе состоит из трех блоков чисел 00 00 00, где каждый блок отвечает за один из цветов RGB, первый блок за красный цвет, второй за зелёный цвет, третий за синий цвет. Числа могут варьироваться от 00 до ff.

Где, ff — это 255 в десятичной системе счисления.

Схема RGB:
Red — от 00 до ff
Green — от 00 до ff
Blue — от 00 до ff

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

Если хотим получить красный цвет, то пишем ff0000, зелёный цвет 00ff00, синий цвет 0000ff. Например, если хотим получить тёмно красный цвет, то нужно уменьшить первый блок чисел и вместоff (который равен в десятичной системе счисления 255), записать например 96 (который равен в десятичной системе счисления 150).

Приведём для наглядности, примеры цветов и их шестнадцатеричный код:

Цвет

Его вид

Шестнадцатеричный код

Красный

#ff0000

Тёмно-красный

#960000

Зелёный

#00ff00

Тёмно-зелёный

#009600

Синий

#0000ff

Тёмно-синий

#000096

Белый

#ffffff

Чёрный

#000000

9. Единицы измерения в HTML

В языке разметки HTML, существует два вида единиц измерений, это пиксели px и % проценты.

Примеры использования:

height="100px" — высота элемента 100 пикселей,

width="50%" — ширина элемента 50 процентов.

Экран монитора состоит из мельчайших точек, называемых пикселями. Современные мониторы (ноутбуков и компютеров) имеют чаще всего размер экрана (разрешение экрана) величиной в 1366x768, которое означает, что ширина экрана составляет 1366 пикселей, а его высота 768 пикселей.

Относительный и абсолютный размеры

Пиксели — это абсолютный размер,

Проценты — это относительный размер.

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

Допустим разрешение экрана составляет 1366x768, друг под другом создали две таблицы и назначили первой таблице, ширину в 1366px (пикселей):

<table width="1366px">

а второй таблице, ширину в 100% (процентов):

<table width="100%">

Обе таблицы, займут всю ширину экрана. В пикселях, ширина обеих таблиц будет равна 1366px

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

Абсолютный размер всегда остаётся неизменным, а относительный меняется в зависимости от внешней среды.

10. Создание таблиц в HTML

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

Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием переформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что текст внутри пары тегов <PRE> и </PRE> выводится моноширинным шрифтом, и все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2.

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

Любая таблица создается по следующей схеме:

<ОТКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>
<ОТКРЫВАЮЩИЙ ТЕГ РЯДА>
<ОТКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
Текст, картинки или таблицы
<ЗАКРЫВАЮЩИЙ ТЕГ ЯЧЕЙКИ>
<ЗАКРЫВАЮЩИЙ ТЕГ РЯДА>
</ЗАКРЫВАЮЩИЙ ТЕГ ТАБЛИЦЫ>

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

10.1 Правила создания таблиц

Рассмотрим обязательные правила создания таблиц.

• Соблюдение порядка тегов <TABLE>, <TR> и <TD> Сначала открываем таблицу, затем открываем ряд, затем открываем и закрываем несколько ячеек, затем закрываем ряд и в конце закрываем таблицу. Несоблюдение этой последовательности может привести к непредсказуемым результатам.

• Всегда закрываем тег <TABLE> в конце таблицы

Если не закрыть тег <TABLE> в конце таблицы, то в большинстве браузеров это приведет к непредсказуемым результатам и некоторые браузеры и обозреватели вообще не отобразят содержимое таблицы на экране.

• Количество ячеек во всех рядах таблицы должно быть одинаковым.

Даже если вы не хотите ничего писать в одной из ячеек ряда таблицы, просто вставьте ячейку без содержимого вот так <TD>&nbsp;</TD>. Комбинация символов '&nbsp;' означает пустой символ. Если не вставить абсолютно ничего в ячейку, то в браузере Internet Explorer не будет этой ячейки и, например, при использовании параметра BGCOLOR тега <TD>, не увидим фона ячейки.

• Писать каждый тег таблицы с новой строки.

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

<TABLE>
<TR>
<TD> ... </TD>
<TD> ... </TD>
<TD> ... </TD>
</TR>
<TR>
<TD> ... </TD>
<TD> ... </TD>
<TD> ... </TD>
</TR>
</TABLE>

10.2 Простая таблица

Наименование

Цвет

Количество

Фломастер

Зелёный

5

Карандаш

Жёлтый

7

Посмотрим на прокомментированный HTML код, который создает эту таблицу:

<TABLE> открывающий тег таблицы
<TR> открывающий тег ряда 1
<TD> Наименование </TD> открывающий и закрывающий теги ячейки 1
<TD>Цвет</TD> открывающий и закрывающий теги ячейки 2
<TD> Количество </TD> открывающий и закрывающий теги ячейки 3
</TR> закрывающий тег ряда 1
<TR>
<TD> Фломастер </TD>
<TD> Зелёный </TD>
<TD>5</TD>
</TR>
<TR>
<TD> Карандаш </TD>
<TD> Жёлтый </TD>
<TD>7</TD>
</TR>
</TABLE> закрывающий тег таблицы

Открывающим и закрывающим тегами таблицы являются теги <TABLE> и </TABLE>, открывающим и закрывающим тегами ряда являются теги <TR> и </TR>, а открывающим и закрывающим тегами ячейки (колонки) таблицы являются теги <TD> и </TD> Как видно из комментария к примеру в первой строке открывается таблица, а во второй строке открывается первый ряд таблицы. Далее идут три строки, представляющие три ячейки таблицы. В каждой строке открывается ячейка таблицы, затем идет содержание этой ячейки и в конце ячейка закрывается. В шестой строке HTML кода закрывается первый ряд таблицы. Затем все повторяется еще два раза - открытие ряда (7 строка), три ячейки с содержимым (8-10 строки), закрытие ряда (11 строка) и т.д. В последней строке HTML кода таблица закрывается.

11. HTML- редакторы

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

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

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

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.

DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" (записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

HomeSite 4.0

Следующий редактор - HomeSite 4 - для создания страниц вручную, т.е. для знатоков HTML. Получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, Google Phrome, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если загрузить чужой HTML-код, то HomeSite все перепишет по-своему.

Еще одна отличительная особенность HomeSite - это его "склейка" с Dreamweaver. HomeSite обладает кнопкой "Dreamweaver", а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для корректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page v2.

12. Заключение

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть можно выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

13. Список литературы

1. А. Гончаров "Самоучитель HTML"

2. А. Матросов, А. Сергеев, М. Чаунин "HTML 4.0 в подлиннике"

3. Айзекс С. "Dynamic HTML"

4. Байенс Дж. "Примочки программирования в WEB"

5. Бурсов М.В. и др. "Основы работы с HTML-редактором Dreamweaver. Учебно-методическое пособие"

6. Велихов В. "Справочник по HTML 4.0"

7. Э. Фримен, Э. Фримен. Изучаем HTML, XHTML и CSS

8. Мархвида И.В. Создание Web-страниц. HTML. CSS. JavaScript

9. Роббинс Д. HTML5. Карманный справочник, 5-е изд.

10. Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов

11. Суздалев Д. Справочник HTML

12. Бен Хеник HTML и CSS. Путь к совершенству