Этот справочник следует просматривать в Internet Explorer 4.0 и выше. Гостевая Полиграфа

Краткий справочник по HTML, написанный на HTML

Типа введение
Фон
Цвет элементов
Стандартные параметры
Текст
Бегущая строка
Списки
Картинки
Таблицы
Гиперссылки
Фреймы
Приятные фишки
Размеры баннеров
Это полезно знать
help.zip
Архив этого файла

1. С чего начинается Родина

Броузер (браузер) - программа для просмотра html-файлов.
Тэг - средство разметки html-файла. Воспринимается броузером как команда.
Атрибуты тэга - дополнительные параметры для уточнения вида того или иного элемента (например, ширина таблицы, цвет, толщина линеек и пр.).

Есть специализированные программы для упрощения html-редактирования: FrontPage, Netscape Composer, даже Word применим для простейшего веб-программирования. Однако использование всех этих программ делает веб-дизайн шаблонным и зачастую дает различный результат при просмотре разными броузерами. Используйте стандартный Notepad.exe (Блокнот) и вы сможете воплотить любую нестандартную идею. Поверьте, это не так сложно.

С чего начать

Каждый тэг, будучи открыт, должен быть закрыт (за некоторым исключением, об этом ниже)

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

Пример.
- так выглядит начало того файла, который вы сейчас смотрите.

После этого начинается полезная (чаще бесполезная) информация, которой автор сайта хочет поделиться с миром.

К оглавлению


Фон

Фон можно покрасить в любой
цвет либо залить фоновой картинкой.

Синтаксис.
Фон (как сплошной, так и фактурный) можно задать как для всего окна в целом, так и для ячеек таблицы.

Синтаксис.

К оглавлению


Цвет элементов

Цвет описывается 2 способами: либо это стандартный базовый цвет, который соответствует английскому названию цвета (например, белый - white, красный - red и т.д.),
либо символом # и 6 символами (от 0 до f), обозначающими составлющие RGB. Например: #54c7ff, где 54 - Red, c7 - Green, ff - Blue. Фотошоп 5.5 показывает раскладку RGB для Web.

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

Синтаксис.

К оглавлению


Стандартные параметры

К ним относятся: ширина (width), высота (height), размер (size), рамка (border), расположение относительно других элементов (align). Эти величины задаются, в основном, в пикселах. Иногда в процентах (для таблиц и линеек).

Пример для линеек

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



Тэг "hr" (горизонтальная линия) закрывать необязательно.

К оглавлению


Teкст

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

Синтаксис.

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

Спецсимволы

К оглавлению


Бегущая строка*

Синтаксис.

* Не работает в Netscape Comm.

К оглавлению


Список

Пронумерованные строки с обратным отступом.

Синтаксис.
Выглядит это так:

  1. 1 строка
  2. 2 строка
  3. ...
Если использовать не OL, а UL - в начале строки будут не цифры, а крупные точки (ненумерованный список).
  • 1 строка
  • 2 строка
  • ...

К оглавлению


Картинки

Формат картинок для использования в Интернете - .jpg или .gif. Каждый формат имеет свои плюсы и минусы, разобраться с которыми вам поможет личный опыт и эксперименты.

Синтаксис.

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

Пример.

Вот как это выглядит:
Эту надпись увидит даже слепой

К оглавлению


Гиперссылки

Синтаксис.

В качестве адреса для ссылки может использоваться:

Ссылкой может быть слово, несколько слов, картинка, причем для картинки следует задать нулевую рамку (border=0). Ссылки (стандартно) выделяются синим цветом и подчеркиванием (как изменить цвет ссылок - см. раздел "Цвет фона и элементов".

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

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

К оглавлению


Таблицы

Основной тэг - table, который имеет множество атрибутов, в том числе
стандартных.
где cellpadding - отступ от рамки внутри таблицы, cellspacing - внешний отступ.

После описания свойств таблицы идет сама таблица, состоящая как минимум из 1 строки и 1 ячейки.
Следите за тем, чтобы все тэги строк и ячеек были закрыты.

Для каждой ячейки можно задать собственные свойства (ширину, высоту, цвет фона, заливку фоновой картинкой)

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

Пример

А вот как это выглядит:
1
2 3
4 5

К оглавлению


Фреймы

Существует способ разделить окно броузера на несколько частей с помощью фреймов, которые показывают одновременно 2 или 3 html-файла, обрезая их определенным образом.

Синтаксис

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

Чтобы ссылка открылась не во фрейме, а во все окно, пишите

К оглавлению


Приятные фишки

Которыми нельзя злоупотреблять! Этим грешат многие начинающие ... веб-дизайнеры.

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

Добавить в избранное

Добавить в избранное...И сделать домашней стр.

Цвет ячейки таблицы, меняющийся от положения мышки (вне ячейки, над ячейкой)
Ссылка, открывающаяся в новом окне с заданными размерами

К оглавлению


Баннеры

Стандартные размеры, в пикселах
470 x 60
468 x 60
234 x 60
120 x 60
100 x 100
200 x 55
230 x 33
88 x 31

К оглавлению


Это полезно знать

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

Комментарий

Не меняйте произвольно размеры картинки, регулируя параметры "width" и "height" - качество теряется сразу. Ширина и высота должны совпадать с реальными размерами, определяемыми в Фотошопе.

Для имен файлов всегда используйте только маленькие буквы. В Интернете регистр букв - важный параметр. Скажем, Index.html - не одно и то же, что index.html или INDEX.html.

К оглавлению