Документ взят из кэша поисковой машины. Адрес оригинального документа : http://kodomo.fbb.msu.ru/FBB/year_09/term1/Help_html.doc
Дата изменения: Wed Sep 30 19:17:18 2009
Дата индексирования: Tue Oct 2 10:27:06 2012
Кодировка: koi8-r

HTML-минимум

I. Общая стандартная структура HTML-файла


Начальный тег
Название страницы
Заголовок
Diplodocus






Тело страницы



Конечный тег

Тело страницы - это то, что будет видно в окне браузера; название страницы
(то, что между и ) будет отображаться наверху окна (на
синем фоне).
Файл должен иметь расширение htm или html.

II. Основные понятия и правила синтаксиса

1. Элемент - это text ,
где TAG (тег) - слово, определяющий тип элемента,
attr1, attr2 - атрибуты тега (свойства данного
элемента),
value1, value2 - значения атрибутов,
открывающее элемент выражение (ограниченное знаками < и
>) называется (начальным) тегом
- так называемый "конечный тег" (указывает на
конец элемента)
Пример: поисковая система Yandex
здесь "A" - слово, определяющее элемент, "href" - атрибут,
"http://www.yandex.ru" - значение
атрибута). Число атрибутов может быть разным - от 0 (часто) до
десятков (редко).
2. Существуют теги, не требующие конечного тега.
3. Элементы могут (и часто должны) быть вложены друг в друга - в текст
элемента могут входить
другие элементы.
Как правило, наличие атрибутов не обязательно, исключения - ,
и .

III. Минимальный набор тегов и атрибутов, используемых в теле (между
и )

1. <А>... - гиперссылка (и не только, но нам понадобится только в этом
качестве).
Шаблон гиперссылки на другой HTML-файл: текст для щелчка.
Пример: Ссылка на другой файл
а если файл находится в директории My_dir, то
1.
2. - элемент, вставляющий картинку в HTML-страницу, не имеет
конечного тега.

Обязательный атрибут - src, другие атрибуты - border, width, height.
Пример: ; картинка, записанная в файле
mypicture.gif, появится на странице.
3. Теги для оформления текста
1.

...

,

...

,

...

- заголовки, подзаголовки,
подподзаголовки. Это (необязательная) часть содержимого страницы, не
путать с (обязательным) заголовком html-файла (тег HEAD). Текст этих
элементов отображается специальными крупными и жирными шрифтами,
отделяется от остального текста и т.д. Атрибут - align.
2. ., ., ... - соответственно, полужирный,
курсивный, подчеркнутый шрифты.
3. ..., ... - соответственно, крупный и мелкий
шрифты
4.

- абзац, атрибут - align. Конечный тег не обязателен.
5.

- горизонтальная линия, не имеет конечного тега, атрибуты -
align, size, width, color.
6.
- переход на новую строку. Элемент не имеет конечного тега.
7. ., . - соответственно, верхний и нижний
индексы. Например, 2n выглядит в браузере как 2n,
H2O - как H2O.
8. ,
    .
- списки (ненумерованный и нумерованный).
9.
  • - пункт списка, конечный тег не обязателен.
    10. 
    ...
    - преформатированный текст. Текст этого элемента будет
    в окне браузера выглядеть точно так же, как в текстовом редакторе:
    буквы одинаковой ширины, границы строк там, где вы их поставили. Для
    обычного текста то и другое неверно.
    11. ... - шрифт красного цвета. Аналогично
    включаются другие цвета, см. ниже. Элемент FONT имеет и другие
    атрибуты (size, face, ...), но пользоваться ими без крайней нужды не
    стоит.
    4. ... - таблица, часто используемый прием для разметки
    веб-страницы
    |Пример части HTML-документа, |Как должно быть понятно из примера, |
    |задающей таблицу: |
    ...
    - это таблица, |
    | |... - ряд (строка) таблицы, |
    | | - ячейка таблицы |
    | |(это тот самый случай, когда вложенность элементов |
    | |угодно; ячеек в одной строке - тоже (в разумных |
    | |Все три элемента (TABLE, TR, TD) имеют атрибут |
    | |bgcolor (цвет фона, см. ниже "управление цветом"), |
    | |то есть можно задавать фон сразу всей таблицы, а |
    | |Элементы TR и TD имеют атрибуты align (со |
    | |("bottom", "middle", "top"). Как легко |
    | |догадаться, первый определяет выравнивание |
    |
    ...
    Левая ячейка первой |обязательна). Разумеется, строк может быть сколько |
    |строки    		Правая ячейка первой |пределах). |
    |строки
    Левая ячейка второй |можно - отдельных строк или ячеек. |
    |строки    		Правая ячейка второй |значениями "left", "center", "right") и valign |
    |строки
    |содержимого ячеек по горизонтали, а второй - по |
    | |вертикали. Если их не задать (ни для |


    ряда, ни для ячейки), то эффект будет как от align="left"
    valign="middle" (так называемое "значение по умолчанию"). Ширина и
    высота ячеек обычно определяется автоматически. Однако ширину часто
    удобно задать явно, добавив в атрибут width. Значения этого
    атрибута могут быть двоякого рода - просто число (например, width=300)
    означает абсолютную ширину в пикселях, а процент (width=30%) - часть
    общей ширины таблицы в процентах.
    Наконец, TABLE имеет атрибут border. Значение border=0 используется
    по умолчанию и означает "невидимую" таблицу (без видимых границ ячеек);
    border=1 даст тоненькие границы, border=5 - толстенькие.
    Надо понимать, что содержимым одной ячейки может быть практически
    что угодно, в том числе и другая таблица, то есть элемент TABLE вполне
    может быть вложен в элемент TD.

    IV. Управление цветом

    Цвет можно задавать двумя способами:
    1-ый - словами, примеры: color="red", bgcolor="yellow";
    2-ой (и более правильный) - RGB-кодом. В этом случае любой цвет
    представляется как комбинация красного (R), зеленого (G) и синего (B)
    цветов, взятых в определенных пропорциях. Доля каждого цвета
    представляется двухразрядным шестнадцатеричным числом ( от 00 до FF).
    Чем больше число, тем больше доля данного цвета.
    Примеры: bgcolor="#FF0000" (красный фон), bgcolor="#FFFFFF"(белый фон),
    bgcolor="#000000" (черный фон).
    Рекомендуется явно задавать основной цвет шрифта и фон всей страницы, для
    этого у тега BODY есть атрибуты text и bgcolor. То есть вместо лучше
    писать
    (в данном случае - черный текст на белом фоне).


    Где узнать про HTML больше?
    Для текущих потребностей хватит краткого онлайн-учебника:

    http://ermak.cs.nstu.ru/internet&pc/htmlcsstutorial/index.html
    или
    http://html.manual.ru/
    Таблица кодов цветов
    http://ermak.cs.nstu.ru/internet&pc/htmlcsstutorial/107.html
    Таблица спец.символов HTML
    http://html.manual.ru/book/info/specialchars.php