Последнее обновление: 28.10.2008 17:18:03

HTML 4.1 - в примерах

Данный туториал предназначен прежде всего для новичков в сайто-строительстве. Этот туториал поможет вам быстро войти в курс HTML а также послужит справочным пособием по некоторым элементам языка. Прототипом к данному руководству служила работа Владимира Дригалкина. Но т.к. то руководство уже устарело, я решился написать подобное, но современное. Что из этого вышло судить только вам. Я надеюсь что мой труд не прошел зря, и данное руководство вам поможет. Удачи!

1. С чего начинать?

Для начала Вам нужно выбрать редактор. Cyщecтвyeт двa типa peдaктopoв: WYSIWYG - What-You-See-Is What-You-Get (Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм.

Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep:

Macromedia Home Site - trial.
NVU или Nvu Portable & KompoZer Portable (можно установить на флешку, и носить всегда с собой) - free.

Все вопросы по использованию этих программ ищите в интернете. Также читайте HELP файлы. Тут я вам помочь не смогу.

Ecли хотите научиться paбoтaть c HTML-кoдoм нaпpямyю, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь:

Notepad++ или Portable Notepad++ (можно установить на флешку, и носить всегда с собой).

Home Site (Очень удобно писать быстро код, и тут-же смотреть результат в окне просмотра).

Блокнот (notepad.exe). Писать конечно можно, но неудобно. Нет подсветки, и все очень мрачно...

Лично я выбрал Notepad++, которым заменил стандартный notepad.exe.
Notepad++ умеет подсвечивать: C, C++, Java, C#, XML, HTML, PHP, CSS, Javascript, ASP, VB/VBS, SQL, Perl, Python, Ruby и еще много разных языков программирования. В отличии от остальных конкурентов, Notepad++ имеет такие преимущества:

Подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования
WYSIWYG (печатаешь и получаешь то, что видишь на экране)
Настраиваемый пользователем режим подсветки синтаксиса
Авто-завершение набираемого слова
Одновременная работа с множеством документов
Одновременный просмотр нескольких документов
Поддержка регулярных выражений Поиска/Замены
Полная поддержка перетягивания фрагментов текста
Динамическое изменение окон просмотра
Автоматическое определение состояния файла
Увеличение и уменьшение
Поддержка большого количества языков
Заметки
Выделение скобок при редактировании текста
Запись макроса и его выполнение

Всю инфу + мануал читайте здесь: http://notepad-plus.sourceforge.net

Так-же я юзаю HomeSite 4.5.2. Особенно удобно набирать HTML вручную, и смотреть тут-же результат. Еще там удобные кнопки. Т.е. работать можно в полуавтоматическом режиме (не WYSIWYG).

С чего же начинать? Во-первых попробуйте сделать следующее...

1) Создайте папку (к примеру MyFirstHTML). Поместите туда любой графический файл (к примеру файл myPhoto.jpg).
2) Откройте Notepad++ (или Блокнот) и скопируйте в него:


<!-- Это коментарий, он не виден браузеру-->
<!-- На следующей строке вы видите начало HTML документа -->
<!DOCtype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <!-- на следующей строке вы видите место для заголовка -->
  
<title>Здесь текст вашего заголовока</title>
  <!-- на следующей строке вы видите место где задается кодировка документа -->
  <meta http-equiv="Content-type" content="text/html; 
charset=windows-1251">
</head>
<body>
<!-- На следующей строке мы вставляем картинку, центруем ее, и вдобавок еще и ставим на нее ссылку (на почту) -->
<div align="center"><a href="mailto:email@email.com"><img src="myPhoto.jpg" alt="Моя 
фотография" width="" height="" border="0"/></a></div>
</body>
</html>

Примечание: Мои комментарии даны в таком виде:

Сохраните документ как HTML файл (например, index.html), положите его в папку MyFirstHTML и запустите. Вы создали первую свою страницу. Поздравляю!

Теперь расскажу немного о ТЕГах (знаках, распологающихся в угловых скобках). Большинство тегов имеют открывающийся элемент <> и закрывающийся </>. Между ними и находяться коды, которые распознает Браузер (Inernet Explorer, Mozilla Firefox, Opera, итд). HTML-документ всегда начинаться с указания служебного заголовка:


<!DOCtype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Далее идет блок парных тегов:

<html></html>

Дальше идет заголовок:

<head></head>

Между этими тегами должен находиться текст заголовка:

<title>Здесь текст вашего заголовока</title>

Между этими тегами должна находиться и информация о кодировке страницы:

<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

Также между тегами <head></head> может размещается другая служебная информация, ссылка на CSS файл, ссылка на JS файл, и прочее. Только после того как закрывается </head>, мы переходим к блоку <body></body>. В блоке <body></body> и находится вся информация которая должна быть отображена на HTML странице.

Внутри блока <body> на данный момент находится лишь фотография <img src="myPhoto.jpg" alt="Моя фотография" width="" height="" border="0"/>, которую мы отцентровали <div align="center"> и повесили на нее ссылку <a href="mailto:email@email.com">. У тега img также имеются атрибуты: width="" и height="", в которых соответственно задается ширина и высота изображения. Пример: <img src="myPhoto.jpg" alt="Моя фотография" width="600" height="450" border="0"/>. Если возможно, то всегда указывайте эти атрибуты. Если изображение будет слишком тяжелым чтобы моментально загрузиться, то пользователь увидит рамку, где будет постепенно загружаться изображение. Т.е. пользователь будет ждать до конца загрузки. Если этих атрибутов не будет, то пользователь может не дождаться загрузки, и покинуть вашу страницу. Атрибут border="0" указывает на отсутствие у изображения рамки. Т.к. у нас есть ссылка, в теле которой находится изображение, то без атрибута border="0" у нас отобразится некрасивая рамка голубого цвета. Чтобы ее не было, мы ставим border="0".

<div align="center"><a href="mailto:email@email.com"><img src="myPhoto.jpg" alt="Моя 
фотография" width="" height="" border="0"/></a></div>

Как вы видите, все теги находятся друг в друге. Нужно тщательно следить, чтобы все теги имели правильную вложенность.
Правильный пример: <p><b><img src="file.jpg"/></b></p>
Неправильный пример: <p><b><img src="file.jpg"/></p></b>

Подробную информацию о тегах смотрите в разделе Список елементов HTML. <-- здесь поставить ссылку на список элементов, когда он будет

2. Текст:

Большинство HTML документов имеют заголовок. Для его создания используют теги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера. <h1></h1> - самый крупный заголовок. <h6></h1> - самый мелкий заголовок. В таблице стилей можно явно указать размер заголовков, вплоть до полного отличия от нормы, когда H6 станет крупней чем H1.

Вот как выглядят стандартные заголовки:

<h1>Заголовок H1</h1>

<h2>Заголовок H2</h2>

<h3>Заголовок H3</h3>

<h4>Заголовок H4</h4>

<h5>Заголовок H5</h5>

<h6>Заголовок H6</h6>

Заголовки имеют блочный вид. Т.е. заголовок если используется, то на всей строке сразу. Заголовки могут иметь атрибуты: style="Это атрибут задания стилей"; align="Это атрибут выравнивания"; title="Это атрибут всплывающей подсказки". Используются они соответственно примерно так:

<h1 style="color:#dd0000;font-size:15px;font-face:Tahoma;" align="center" title="Всплывающая подсказка">Некий заголовок</h1>

Этих атрибутов хватит чтобы сделать заголовок любого вида.

Для создания нового абзаца используется тег <p> (Параграф - им можно обрамлять предложения. Строки в предложении можно отделять тегом <br/>. Четкая семантика кода позволит вам явно видеть код, а также позволит поисковику более четче индексировать вашу страничку). Тег <p> парный, что означает обязательное наличие в конце закрывающего тега </p> Для перехода на новую строчку без создания абзаца - тег <br/>. Обратите внимание что у тега <br/> нет напарника. Поэтому мы закрыли его слешом. Тег <br/> чаще всего остается как есть, но иногда он может иметь такой вид: <br clear="all"/> - что означает "создать разрыв строки, использовать всю строку для разрыва".

Параграф <p></p> - является блочным тегом. Т.е. его атрибуты способны не только влиять на внешний вид, но и на перемещение в пространстве.

Параграф может быть таким:

<p align="left">Ориентируем по левому краю</p>

<p align="center">Ориентируем по центру</p>

<p align="right">Ориентируем по правому краю</p>

<div style="width:200px;"><p align="justify">Текст, находящийся между этими элементами выравнивается по ширине. Текст, находящийся между этими элементами выравнивается по ширине. Текст, находящийся между этими элементами выравнивается по ширине.</p></div>

Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тегами:

<b>Жирный текст</b>
<em>Курсив</em>
<ins>Подчеркнутый</ins>
~~<s>Перечеркнутый</s>~~
Обычный текст ^{<sup>Верхний индекс</sup>}
Обычный текст _{<sub>Нижний индекс</sub>}

Любой текст может быть выделен определенным размером. Например:

Вот это словосочетание постоянно должно увеличиваться! Вот это слово-сочетание (Код: <span style="font-size:15px;">Вот это словосочетание</span>) постоянно должно увеличиваться! Вот это словосочетание (Код: <span style="font-size:20px;">Вот это словосочетание</span>) постоянно должно увеличиваться! Вот это словосочетание (Код: <span style="font-size:25px;">Вот это словосочетание</span>) постоянно должно увеличиваться! Вот это словосочетание (Код: <span style="font-size:30px;">Вот это словосочетание</span>) постоянно должно увеличиваться! Вот это словосочетание (Код: <span style="font-size:35px;">Вот это словосочетание</span>) постоянно должно увеличиваться!

Почти для любого тега можно задать цвет. Это можно сделать вставив в атрибут style="" значение цвета. Например: <span style="color:#FF0000;">Красный текст</span>

Аналогично значению color существует и значение background. Значение background задает цвет фона. Закрасить также можно почти все теги. Например: <span style="background:#C0C0C0;">Серебристый фон</span>.

3. Цвет и фон:

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

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

Пример базовых цветов вы видите ниже:


	Black = "#000000"		Green = "#008000"
	Silver = "#C0C0C0"		Lime = "#00FF00"
	Gray = "#808080"		Olive = "#808000"
	White = "#FFFFFF"		Yellow = "#FFFF00"
	Maroon = "#800000"		Navy = "#000080"
	Red = "#FF0000"		Blue = "#0000FF"
	Purple = "#800080"		Teal = "#008080"
	Fuchsia = "#FF00FF"		Aqua = "#00FFFF"

Фон страницы можно задать как в CSS файле (body {background:#C0C0C0;}) так и непосредственно в теге <body>: <body syle="background:#C0C0C0;}">. Устаревший атрибут bgcolor="#C0C0C0" я вам использовать НЕ рекомендую!

Фоном помимо цвета может быть и картинка. Установить ее можно так-же в CSS: body {background:#C0C0C0 url(/images/bg.gif);} так и в теге Body: <body syle="background:#C0C0C0 url(/images/bg.gif);}">. Здесь мы видим указание цвета, и фоновой картинки. Если по каким-либо причинам фоновая картинка не будет найдена, то установится заданый цвет. Подстраховаться не помешает.

В качестве фоновой картинки можно использовать JPG, GIF и PNG файлы. JPG не поддерживает прозрачность. GIF и PNG прозрачность поддерживают. При строительстве сайта рекомендую в корневой папке сразу создать папку images. В нее кладите все изображения и картинки. Расположение советую вести от корня сайта: /images/bg.gif. Не рекомендую писать так: "http://www.site.ru/images/bg.gif" или так "../../images/bg.gif" (при переделке сайта вы столкнетесь с трудностями которые будет не легко преодолеть).

4. Изображения:

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

<img src="http://www.konyakov.ru/i/pdf.gif" align="left" border="0" width="33" height="39" hspace="0" vspace="0" alt="Описание картинки" title="Всплывающий текст"/>

Результатом выполнения кода из примера, будет появление картинки:

Рассмотрим атрибуты тега <img> более подробно:

src — Здесь указывается путь от корня сайта к картинке (картинкой может быть файл JPG, GIF или PNG формата). Обязательный параметр
align — Выравниваение. Выравнять можно по левому краю (left), по правому краю (right), по центру изображения (middle). Если картинка находится в параграфе, и для нее указан атрибут align="", то текст будет обтекать картинку в зависимости от выравнивания. Если атрибут не указан, то текст будет находится ниже изображения. Не обязательный параметр
border — Рамка. Если изображение является частью ссылки, то без указания border="0" вокруг появится некрасивая синяя рамка. Чтобы ее небыло нужно ставить border="0" или заранее в CSS файле указать: img {border:none;} img a{border:none;} Не обязательный но желательный параметр
width — Ширина изображения в пикселях. Этот атрибут не обязательный, но желательный для использования. Если изображение имеет большой вес, и у него есть атрибуты width и height, то при загрузке пользователь увидит контур изображения, и дождется полной загрузки. Без этого пользователь может не догадаться что это изображение и может покинуть страницу
height — Высота изображения в пикселях. Этот атрибут не обязательный, но желательный для использования (см. width)
hspace — Горизонтальный отступ изображения в пикселях. Не обязательный параметр
vspace — Вертикальный отступ изображения в пикселях. Не обязательный парамет
alt - Альтернативный текст. Если у пользователя запрещено отображение картинок, то вместо изображения он увидит ваш текст. Этот параметр не обязательный, но желательный. Поисковые системы любят этот параметр
title — Текст всплывающей подсказки. Можно задать любой текст, дабы пояснить посетителю смысл изображения (атрибут title кстати может использовать почти для всех тегов HTML). Не обязательный параметр

5. Ссылки:

Создание обычной гипперссылки:

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

<a href="http://www.site.ru/" target="_blank" title="Описание ссылки (всплывающая подсказка)">Текст ссылки</a>

Рассмотрим атрибуты тега <a> более подробно:

href — Адрес сайта или файла в Интернете. Может быть абсолютным: "http://www.site.ru/index.php" или относительным: "/index.php". Обязательный параметр
target — Определяет в каком окне открыть гиперссылку. Для внутренних ссылок сайта этот параметр можно не использовать, а для внешних рекомендую использовать открытие в новом окне: target="_blank"
title — Текст всплывающей подсказки
name — Атрибут якоря (anchor). Нуже для перемещения внутри документа. Можно задать ссылку вида: <a href="#bottom">Вниз</a>, а в конце документа поставить якорь: <a name="bottom">Низ</a>. При нажатии на ссылку "Вниз" вы переместитесь в конец документа
rel — Данный атрибут полезен для поисковика. Если стоит rel="nofollow", то поисковик Google не будет индексировать данную ссылку. Этот атрибут полезен для ссылок на чужие сайты или страницы. Если этого атрибута нет, то Google проиндексирует ссылку

Создание графический файла в роли ссылки:

Гиперссылкой можно сделать и любой графический файл, поддерживающийся Браузером (будь то JPG, GIF или PNG). Для этого мы сначала печатаем код ссылки, и внутри тега <a> печатаем код картинки. Все, графическая ссылка готова. Не забудте указать параметр border="0" в ссылке! Пример:

<a href="http://www.konyakov.ru/" target="_blank" title="Описание ссылки (всплывающая подсказка)"><img src="http://www.konyakov.ru/i/pdf.gif" border="0" width="33" height="39" alt="Описание картинки" title="Всплывающий текст"/></a>

Результатом выполнения кода будет это:

Создание ссылки на E-mail:

Принцип создания ссылки на емейл тот-же что и у обычных ссылок. Но здесь вместо "http://" вы должны указать слово "mailto:". Пример:

<a href="mailto:email@email.ru" target="_blank" title="Описание ссылки (всплывающая подсказка)">email@email.ru</a>

В эру повального спама, я НЕ рекомендую вам указывать свой емейл в открытом виде. Советую шифровать любые емейлы специальной программой. Я лично использую Easy HTML To Any Script Converter (если не работает ссылка разработчика, то скачать ее можно здесь).

В зашифрованом виде мой емейл к примеру будет выглядеть так:

<script type="text/javascript" language="javascript">
var nkr="mai";
var svt="lto:";
var uwt='konyakov'+'%40'+'gmail'+'.'+'com';
var qwk=uwt.replace(/%40/ig, '@');
document.write('<a h'+'ref="'+nkr+svt+uwt+'">'+qwk+'</a>');
</script>

Результатом выполнения кода будет это:

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

<script type="text/javascript" language="javascript">
var nkr="mai";
var svt="lto:";
var uwt='konyakov'+'%40'+'gmail'+'.'+'com';
var qwk=uwt.replace(/%40/ig, '@');
document.write('<a hre'+'f="'+nkr+svt+uwt+'?subject=Заголовок &Body=Текст сообщения &cc=copy-email@email.ru &bcc=hidden-copy-email@email.ru">'+qwk+'</a>');
</script>

Результатом выполнения кода будет это:

Якоря (Anchors):

Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки:

Ссылка на якорь внутри документа имеет следующий вид:

<a href="#anchor-name">Ссылка на якорь внутри документа</a>

А так выглядит ссылка на якорь другого сайта:

<a href="http://www.site.ru/index.php#anchor-name">Ссылка на якорь другого сайта</a>

Сам-же якорь имеет такой вид:

<a name="anchor-name">Якорь</a>

Ссылки и цвет:

При наведении курсора на ссылку, она может менять свой цвет. Это делается для наглядности. Так-же можно задать цвет активной и посещенной ссылки. Все это задается в CSS коде (Раньше это задавалось в теге <body>. Сейчас этот метод устарел, и использовать его НЕ рекомендуется). Пример:


a {color:#0056A3;text-decoration:none;}

a:hover {color:#027EC7;text-decoration:none;}

a:active {color:#DD0000;text-decoration:none;}

a:visited {color:#944B8B;text-decoration:underline;}

Рассмотрим CSS-код тега <a> более подробно:

a — Здесь имеется ввиду не нажатая ни разу ссылка (цвет и отсутствие нижнего подчеркивания)
a:hover — Здесь имеется ввиду внешний вид ссылки при наведении на нее курсора (цвет и отсутствие нижнего подчеркивания)
a:active — Здесь имеется ввиду внешний вид ссылки при щелчке по ней (цвет и отсутствие нижнего подчеркивания)
a:visited — Здесь имеется ввиду посещенная ссылка (цвет и наличие нижнего подчеркивания)

6. Стили:

CSS — Cascading Style Sheets (Каскадные таблицы стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. CSS-файл позволяет раз и навсегда задать внешний вид странички. Если все сделать правильно, то можно редизайнить-страницу без правки HTML кода, правя лишь CSS. Самая последняя версия это — CSS3. Но т.к. она поддерживается лишь новейшими версиями браузеров, то еще долго стандартом ДЕ-факто останется CSS1 и CSS2.

Директива подключения CSS файла должна находится внутри тега <head></head>


<link rel="stylesheet" href="/style.css" type="text/css"/>

<link rel="alternate" href="/rss.php" type="application/rss+xml" title="RSS"/>

Рассмотрим подробнее директивы подлючения CSS более подробно:

rel="stylesheet" — Этой директивой мы подключим CSS файл "/style.css"
rel="alternate" — Этой директивой мы сообщаем браузеру то, что у сайта есть RSS лента "/rss.php"

Можно также использовать теги <style></style> для задания стилей, но я считаю что наиболее удобно и правильно включать отдельный файл стилей.

Пример CSS файла (скопируйте и вставьте код в блокнот и сохраните его как "style.css" файл):


body {

  background: #fefefe;

  color: #262626;

}



a {

  color: #3F62AD;

}



a:hover {

  color: #95ABD9;

}



p {

  font-size: 100%;

  font-family: Tahoma;

}



img {

  border: none;

}



img.a {

  border: none;

}

Первое время советую вам поизучать CSS файлы других сайтов (заходите на сайт, отображаете его в виде HTML, копируете ссылку на CSS файл, вставляете ее в адресную строку браузера, и изучаете). Также советую вам обзавестись полезной программой Free CSS Toolbox (если не работает ссылка разработчика, то скачать ее можно здесь). Данная программа позволяет выявить ошибки CSS-синтаксиса, привести весь код к очень структурированому и красивому виду. С этой программой можно писать валидный код! Именно поэтому я ее использую.

Стили можно задавать для каждого тега отдельно. Если вам нужно добавить какой-то стиль в одном месте на сайте, то не обязательно добавлять отдельную директиву в CSS файл. Можно в тег непосредственно добавить атрибут style="". Например так:


<h3 align="center" style="font-family:Verdana;font-size:110%;color:#ff0000;">ТЕКСТ</h3>

Результат выполнения:

<h3 align="center" style="font-family:Verdana;font-size:110%;color:#ff0000;">ТЕКСТ</h3>

Таблица свойств CSS:

Атрибут	Свойство
Свойства шрифта
font-family	Задает имя шрифта: font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size	Задает размер шрифта. Можно использовать %, px, em, pt: font-size: 15%; font-size: 15px; font-size: 1.5em; font-size: 15pt; font-size: larger; font-size: smaller; font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large;
font-weight	Задает толщину: font-weight: normal; font-weight: bolder; font-weight: lighter; font-weight: lighter;
font-style	Задает наклон текста: font-style: italic; font-style: oblique;
Свойства текста
text-decoration	Задает подчеркнутость текста: text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink;
text-align	Задает выравнивание: text-align: left; text-align: right; text-align: center; text-align: justify;
float	Задает привязку по краям: float: left; float: right;
border	Задает рамку: border:1px solid #333333; border-left:1px solid #333333; border-right:1px dashed #333333; border-top:1px dotted #333333; border-bottom:1px solid #333333;
letter-spacing	Задает пространство между буквами: letter-spacing: normal; letter-spacing: 2px;
line-height	Задает высоту линии текста: line-height: normal; line-height: 10px;
text-indent	Задает "красную линию" (отступ в параграфе): text-indent: 25px;
text-transform	Трансформация букв (перевод в верхний и нижний регистр соотвественно): text-transform: uppercase; text-transform: lowercase
word-spacing	Задает расстояние между словами: word-spacing: normal; word-spacing: 100px;
Цвет и фон:
color	Задает цвет шрифта: color: #262626;
background	Задает цвет фона: background: #c0c0c0;
Границы и оступы:
margin	Создает оступы margin: Верх Право Низ Лево; margin: 10px 10px 10px 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;

Мой вам совет: Поиграйтесь с параметрами и посмотрите какой код что делает!

7. Мета-теги:

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

Мета теги делятся на две группы: name и HTTP-EQUIV. Мета теги типа name содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин. Например: Robots, Description, Keywords, Author, Copyright. Мета теги типа HTTP-EQUIV влияют на формирование заголовка документа и определяют режим его обработки.

Подробнее об мета-тегах можно прочитать здесь (если не работает ссылка, то прочитать статью можно здесь)

Наиболее используемые МЕТА-теги:

Назначение	Описание
Description	Мета тег Description - служит для краткого описания странички. Он используется поисковыми машинами для индексации и в качестве краткой аннотации при ссылке в ответе на запрос. И именно по содержанию этого тега пользователь поисковой системы будет оценивать, соответствует ваш сайт его ожиданиям или нет. Если тег Description отсутствует, то в качестве описания поисковые машины используют первую строку текста или отрывок из текста с найденным ключевым словом. Желательно чтобы длина описания не превосходила 80 символов. Пример: <meta name="description" content="Описание странички"/>
Keywords	Мета тег Keywords используется поисковыми машинами для оценки релевантности. Слова, содержащиеся в теге Keywords, рассматриваются поисковыми машинами как рекомендация, но иногда именно этой капли не хватает, чтоб перевесить чашу. При формировании списка ключевых слов для мета тега Keywords необходимо использовать слова, содержащиеся в тексте документа. Слова, не содержащиеся в тексте, можно использовать в очень небольших количествах, два - три слова. Вставлять их надо в конец списка. Ключевые слова не должны повторятся в теге Keywords, в крайнем случае, не более двух раз. В мета теге Keywords имеет смысл использовать не более 10 слов, большее количество релевантности не увеличит. В Большинстве случаев поисковые машины находят ключевые слова, стоящие во множественном числе (cats), даже если поиск задан в единственном числе (cat). Поэтому рекомендуется в тег Keywords заносить английские существительные во множественном числе. Роботы некоторых поисковых машин не переходят к новой строке при анализе мета тега Keywords, поэтому не рекомендуется разбивать его на несколько строк. Пример: <meta name="keywords" content="слова, слова, слова"/>

Генератор Мета-тегов:

8. Таблицы:

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

Мы же поговорим об таблицах для "табличных" данных:


<!-- Стили добавляются внутрь HEAD тега -->
<style type="text/css">

  .str1 {text-align:center;background:#e3e3e3;font-family:Tahoma;font-size:12px;}

  .str2 {text-align:center;background:#cccccc;font-family:Tahoma;font-size:12px;}

  .str3 {text-align:center;background:#bcbcbc;font-family:Tahoma;font-size:12px;}

</style>
<!-- Таблица должна быть внутри тега BODY -->
<table cellpadding="0" cellspacing="0" border="1" width="500" 
height="500">
<tr>
 <td class="str1">Колонка 
1<br/>Строка 1</td>
 <td class="str1">Колонка 
1<br/>Строка 2</td>
 <td class="str1">Колонка 
1<br/>Строка 3</td>
</tr>
<tr>
 <td 
class="str2">Колонка 2<br/>Строка 1</td>
 <td 
class="str2">Колонка 2<br/>Строка 2</td>
 <td 
class="str2">Колонка 2<br/>Строка 
3</td>
</tr>
<tr>
 <td class="str3">Колонка 
3<br/>Строка 1</td>
 <td class="str3">Колонка 
3<br/>Строка 2</td>
 <td class="str3">Колонка 
3<br/>Строка 
3</td>
</tr>
</table>

Результат выполнения этого кода будет следующим:

Строка 1 Колонка 1	Строка 1 Колонка 2	Строка 1 Колонка 3
Строка 2 Колонка 1	Строка 2 Колонка 2	Строка 2 Колонка 3
Строка 3 Колонка 1	Строка 3 Колонка 2	Строка 3 Колонка 3

Генератор таблиц:

9.Списки:

Списки довольно таки часто приходится использовать в работе. Посему нужно уметь пользоваться ими. Существуют нумерованые и ненумерованые списки.

Нумерованые списки:

type — вид счетчика:
  1 — обычные цифры
  A — большие латинские буквы
  a — маленькие латинские буквы
  I — большие римские цифры
  i — маленькие римские цифры
start — устанавливает число, с которого будет начинатся отсчет:

HTML-код:	Результат:
`<ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol>`	Первый Второй Третий Четвертый Пятый
`<ol type="1" start="2"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol>`	Первый Второй Третий Четвертый Пятый
`<ol type="A" start="3"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol>`	Первый Второй Третий Четвертый Пятый
`<ol type="a" start="4"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol>`	Первый Второй Третий Четвертый Пятый
`<ol type="I" start="5"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol>`	Первый Второй Третий Четвертый Пятый
`<ol type="i" start="6"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ol>`	Первый Второй Третий Четвертый Пятый

Ненумерованые списки:

HTML-код:	Результат:
`<ul type="disc"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ul>`	Первый Второй Третий Четвертый Пятый
`<ul type="circle"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ul>`	Первый Второй Третий Четвертый Пятый
`<ul type="square"> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> </ul>`	Первый Второй Третий Четвертый Пятый

Списки определений:

С помощью списка определений можно отлично упорядочить неупорядоченый список.

HTML-код:	Результат:
`<dl> <dt>Определение</dt> <dd>Значение</dd> <dd>Значение</dd> <dd>Значение</dd> <dd>Значение</dd> </dl>`	Определение Значение Значение Значение Значение

10. Формы:

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

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

Формы размещаются между тегами <form></form>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег <form> может содержать следующие атрибуты:

Атрибут	Пояснение
action="uri"	Задает агента для обработки формы. Например, значением может быть URI HTTP (для передачи формы в программу) или mailto URI (для отправки формы по электронной почте).
method="get\|post"	Определяет метод HTTP, используемый для передачи набора данных формы. Возможные значения (с учетом регистра) - "get" (по умолчанию) и "post". Подробнее см. в разделе об отправке формы.
enctype="content-type"	Этот атрибут задает тип содержимого, используемый для отправки формы на сервер (если для метода используется значение "post"). По умолчанию для этого атрибута используется значение "application/x-www-form-urlencoded". С элементом input, type="file" должно использоваться значение "multipart/form-data".
accept-charset="список наборов символов"	Этот атрибут задает список кодировок символов для ввода данных, которые должны приниматься обрабатывающим эту форму сервером. Значением является разделенный пробелами и/или запятыми список значений charset. Сервер должен интерпретировать этот список как список исключающих или, то есть он должен принимать любую кодировку для загруженного объекта. По умолчанию значением этого атрибута является зарезервированная строка "UNKNOWN". Агенты пользователей могут интерпретировать это значение как кодировку символов, используемую для передачи документа, содержащего этот элемент FORM.
accept="content-type-list"	Этот атрибут определяет разделенным запятыми список типов содержимого, которые должен корректно обрабатывать сервер, обрабатывающий форму. Агенты пользователей могут использовать эту информацию для отфильтровывания отвечающих спецификации файлов при предложении пользователю выбора файлов для отправки на сервере (если в элементе input указано type="file").

HTML-код формы:

<form action="http://somesite.com/prog/adduser" method="post">
    <p>
    <label for="firstname">Имя: </label> <input type="text" id="firstname"><BR>
    <label for="lastname">Фамилия: </label> <input type="text" id="lastname"><BR>
    <label for="email">Адрес электронной почты: </label> <input type="text" id="email"><BR>
    <input type="radio" name="sex" value="Male"> Мужской<BR>
    <input type="radio" name="sex" value="Female"> Женский<BR>
    <input type="submit" value="Отправить"> <input type="reset">
    </p>
 </form>

Результатом выполнения кода будет это:

Атрибут тега <input/>	Пояснение
type="text"	Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах). Определяет окно шириной 20 символов для ввода текста (размер окошка) + создает ограничение по вводу меньше или равно 10 символов. По умолчанию в окне находится текст "Any text", который пользователь может изменить: `<input type="text" size="20" maxlength="10" name="User" value="Any text" />` Пример:
type="password"	Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов: `<input type="password" name="PW" size="20" maxlength="10" />` Пример:
type="radio"	Радиокнопка. Может содержать дополнительный атрибут "checked" (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка: `<form><input type="radio" name="question" value="yes" checked/> <label for="radio">Да</label> <input type="radio" name="question" value="no"/> <label for="radio">Нет</label> <input type="radio" name="question" value="possible"/> <label for="radio">Затрудняюсь ответить</label></form>` Пример: Да Нет Затрудняюсь ответить Определяет группу из трех радиокнопок, подписанных "ДА", "НЕТ" и "ЗАТРУДНЯЮСЬ ОТВЕТИТЬ". Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная "question=yes". Если пользователь отметит другую кнопку, обработчику будет передана переменная question со значением No или Possible.
type="checkbox"	Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут "checked" (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов: `<form><input type="checkbox" name="comp" value="print" checked/> <label for="checkbox">Принтер</label> <input type="checkbox" name="comp" value="scan" checked/> <label for="checkbox">Сканер</label> <input type="checkbox" name="comp" value="copy"/> <label for="checkbox">Копир</label></form>` Пример: Принтер Сканер Копир Определяет группу из четырех квадратов. Первоначально помечены первый и второй квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: "comp=print" и "comp=scan".
type="hidden"	Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. В век компьютерных преступлений этот элемент полезен тем, что он предотвращает попытки злоумышленников некорректно использовать форму. `<input type="hidden" name="version" value="6315970B85237B2F36153566495F963C"/>`
type="submit"	Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику: `<input type="submit" value="Отправить"/>` Пример:
type="reset"	Определяет кнопку, при нажатии на которую очищаються поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name: `<input type="reset" value="Cбросить"/>` Пример:

Формы могут содержать поля для ввода большого текста <textarea>:

Тег	Пояснение
<textarea>	Атрибут "name" определяет имя, под которым содержимое окна будет передано обработчику. Атрибут "rows" устанавливает высоту окна в строках. Атрибут "cols" устанавливает ширину окна в символах. Текст, размещенный между тегами <textarea></textarea>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть: <textarea name="anytext" rows="8" cols="50">Атрибут "name" определяет имя, под которым содержимое окна будет передано обработчику. Атрибут "rows" устанавливает высоту окна в строках. Атрибут "cols" устанавливает ширину окна в символах. Текст, размещенный между тегами <textarea></textarea>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть </textarea> Пример: Атрибут "name" определяет имя, под которым содержимое окна будет передано обработчику. Атрибут "rows" устанавливает высоту окна в строках. Атрибут "cols" устанавливает ширину окна в символах. Текст, размещенный между тегами <textarea></textarea>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
<select>	Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тегом <select> (содержит обязательный атрибут "name", определяющий имя меню) и завершается закрывающимся </select>. Между ними находятся теги <option>, определяющие элемент меню. Обязательный атрибут "value" устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <option> может включать атрибут "selected", показывающий, что данный элемент выбран/отмечен по умолчанию: `<select name="anytext"> <option value="op_1" selected> текст 1 <option value="op_2"> текст 2 <option value="op_n"> текст n </select>` Пример:
<select multiple>	Тег <select> может также содержать атрибут "multiple", присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню <select multiple> в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом size=число: `<select name="anytext" multiple> <option value="op_1" selected> текст 1 <option value="op_2"> текст 2 <option value="op_n"> текст n </select>` Пример:

11. Список элементов HTML:

Базовые елементы:

Заголовок	`<h#></h#>`	Cтандарт определяет 6 уровней
Заголовок с выравниванием	`<h# align="left\|center\|right"></h#>`	Выравниваение заголовка
Слой	`<div></div>`	Слой, наиболее гибкий элемент HTML4!
Слой с выравниванием	`<div ALIGN="left\|center\|right"></div>`	Выравнивание слоя
Цитата	`<blockquote></blockquote>`	Обычно выделяется отступом
Усиление курсивом	`<em></em>`	Усиление текста курсивом. Полезно для поисковиков
Усиление полужирным	`<strong></strong>`	Усиление текста полужирным. Полезно для поисковиков
Цитата	`<cite></cite>`	Мало используется
Код	`<code></code>`	Для листингов кода
Пример вывода	`<samp></samp>`	Мало используется
Ввод с клавиатуры	`<kbd></kbd>`	Мало используется
Переменная	`<var></var>`	Мало используется
Определение	`<dfn></dfn>`	Мало используется
Адрес автора	`<address></address>`	Мало используется
Большой шрифт	`<big></big>`	Мало используется
Маленький шрифт	`<small></small>`	Мало используется

Внешний вид:

Полужирный	`<b></b>`	Выделение текста полужирным
Курсив	`<i></i>`	Выделение текста курсивом
Подчеркнутый	`<ins></ins>`	Выделение текста подчеркиванием
Подчеркнутый	`<u></u>`	Выделение текста подчеркиванием. Часто не поддерживается
Перечеркнутый	`<s></s>`	~~Выделение текста перечеркиванием~~
Перечеркнутый	`<strike></strike>`	~~Выделение текста перечеркиванием. Часто не поддерживается~~
Верхний индекс	`<sup></sup>`	Верхний индекс в формулах: м²
Нижний индекс	`<sub></sub>`	Нижний индекс в формулах: H₂O
Печатная машинка	`<tt></tt>`	`Изображается как шрифт фиксированой ширины`
Форматированый	`<pre></pre>`	Сохранить формат текста как есть
Центрировать	`<div align="center"></div>`	Задается как align="" атрибут тега DIV
Задаем размер шрифта	`<span style="font-size:13px;"></span>`	Задается как style="" атрибут
Задаем цвет шрифта	`<span style="color:#777777;"></span>`	Задается как style="" атрибут
Задаем сам шрифт	`<span style="font-family:verdana;"></span>`	Задается как style="" атрибут

Ссылки и графика:

Ссылка	`<a href="url"></a>`	Пример: <a href="http://www.konyakov.ru/">www.konyakov.ru</a>
Ссылка на якорь в ином документе	`<a href="url#***"></a>`	Пример: <a href="http://www.konyakov.ru/index.php#first">Ссылка на якорь в ином документе</a>
Ссылка на якорь в том-же документе	`<a href="#***"></a>`	Пример: <a href="#first">Ссылка на якорь в том-же документе</a>
На другое окно	`<a href="url" target="***\|_blank\|_self\|_parent\|_top"></a>`	Пример: <a href="http://www.konyakov.ru/" target="_blank">Ссылка откроется в новом окне</a>
Установить якорь	`<a name="***"></a>`	Пример: <a name="anhor">Установили якорь "anhor"</a>
Отношение	`<a rel="***"></a>`	Например параметр rel="nofollow" исключает индексацию ссылки у поисковика Google
Графика	`<img src="url"/>`	Пример: <img src="http://www.konyakov.ru/i/pdf.gif"/>
Выравнивание	`<img src="url" align="top\|bottom\|middle\|left\|right>`
Альтернативный текст изображения	`<img src="url" alt="***">`	Выводимый текст если картинка не отображается)
Размеры	`<img src="url" width="#" height="#">`	В пикселях
Рамка	`<img src="url" border="#">`	В пикселях
Отступы	`<img src="url" hspace="#" vspace="#">`	В пикселях
Обновить	`<meta http-equiv="refresh" content="20; url=http://www.konyakov.ru">`	Обновить страницу. Можно использовать для редиректа
Включить объект	`<embed src="url">`	Вставить объект на страницу
Размер объекта	`<embed src="url" width="#" height="#">`	Задаем ширину и высоту объекта

Разделители:

Параграф	`<p></p>`	Этим тегом обрамляется параграф текста. Обазательно использование как открывающего так и закрывающего тега
Выравнивание	`<p align="left\|center\|right"> </p>`	Выравнивание параграфа текста по леву, центру и праву
Разрыв строки	`<br/>`	Разрыв строки. Перевод строки на новую строку
Разрыв строки (очисть всю строку)	`<br clear="all"/>`	Разрыв строки. При использовании создает разрыв во всю строку. Т.е. переносит все на новую строку
Горизонтальный разделитель	`<hr/>`	Создает горизонтальную разделительную линию
Выравнивание горизонтального разделителя	`<hr align="left\|right\|center">`	Выравнивает горизонтальную разделительную линию
Ширина горизонтального разделителя	`<hr style="width:300px;"`	В пикселях
Высота горизонтального разделителя	`<hr style="height:5px;"`	В пикселях
Ширина горизонтального разделителя	`<hr style="width:33%;"`	В процентах

Списки:

Неупорядоченный	`<ul><li></li></ul>`	`<li>каждый элемент</li>`
Тип метки	`<ul type="disc\|circle\|square"></ul>`	(для всего списка)
`<li type="disc\|circle\|square"></li>`	(этот и последующие)
Нумерованый	`<ol><li></li></ol>`	(`<li></li>`
Тип нумерации	`<ol type="A\|a\|I\|i\|1">`	(для всего списка)
`<li type="A\|a\|I\|i\|1">`	этот
Первый номер	`<ol start="#">`	(для всего списка)

Специальные символы:

ANSI-код	Символ
!	!
"	"
#	#
$	$
%	%
&	&
'	'
(	(
)	)
*	*
+	+
,	,
-	-
.	.
/	/
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
:	:
;	;
<	<
=	=
>	>
?	?
@	@
A	A
B	B
C	C
D	D
E	E
F	F
G	G
H	H
I	I
J	J
K	K
L	L
M	M
N	N
O	O
P	P
Q	Q
R	R
S	S
T	T
U	U
V	V
W	W
X	X
Y	Y
Z	Z
[	[
\	\
]	]
^	^
_	_
`	`
a	a
b	b
c	c
d	d
e	e
f	f
g	g
h	h
i	i
j	j
k	k
l	l
m	m
n	n
o	o
p	p
q	q
r	r
s	s
t	t
u	u
v	v
w	w
x	x
y	y
z	z
{	{
\|	\|
}	}
~	~
А	А
Б	Б
В	В
Г	Г
Д	Д
Е	Е
Ж	Ж
З	З
И	И
Й	Й
К	К
Л	Л
М	М
Н	Н
О	О
П	П
Р	Р
С	С
Т	Т
У	У
Ф	Ф
Х	Х
Ц	Ц
Ч	Ч
Ш	Ш
Щ	Щ
Ъ	Ъ
Ы	Ы
Ь	Ь
Э	Э
Ю	Ю
Я	Я
а	а
б	б
в	в
г	г
д	д
е	е
ж	ж
з	з
и	и
й	й
к	к
л	л
м	м
н	н
о	о
п	п
р	р
с	с
т	т
у	у
ф	ф
х	х
ц	ц
ч	ч
ш	ш
щ	щ
ъ	ъ
ы	ы
ь	ь
э	э
ю	ю
я	я
ё	ё
←	←
↑	↑
→	→
↓	↓
↔	↔
↕	↕

PHP скрипт, для печати всех ANSI кодов мира:


<?php

//for для печати кодов ANSI



for ($i = 1; ; $i++) {

    if ($i > 99999) {

        break;

    }

    echo ("&#$i;\n");

}

?>

Формы:

Определить форму	`<form action="url" method="get\|post"></form>`
Посылка файла	`<form enctype="multipart/form-data"></form>`
Поле ввода	`<input type="text\|password\|checkbox\|radio\|image\|hidden\|submit\|reset">`
Имя поля	`<input name="***">`
Значение поля	`<input value="***">`
Отмечен	`<input checked>`	checkboxes и radio boxes
Размер поля	`<input size="#">`	В символах
Максимальная длина	`<input maxlength="#">`	В символах
Список вариантов	`<select></select>`
Имя списка	`<select name="***"></select>`
Число вариантов	`<select size=?></select>`
Множественний выбор	`<select multiple>`	Можно выбрать больше одного
Опция	`<option>`	Элемент который может быть выбран
Опция по умолчанию	`<option selected>`
Ввод текста, размер	`<textarea rows="#" cols="#"></textarea>`
Имя текста	`<textarea name="***"></textarea>`

Таблицы:

Определить таблицу	`<table></table>`
Окантовка таблицы	`<table border=?></table>`
Расстояние между ячейками	`<table cellspasing="#">`
Дополнение ячеек	`<table cellpadding="#">`
Желаемая ширина	`<table width="#">`	В пикселях
Ширина в процентах	`<table width="%">`	Проценты от ширины страницы
Строка таблицы	`<tr></tr>`
Выравнивание	`<tr align="left\|center\|middle\|bottom\|right">`
Ячейка таблицы	`<td></td>`	Должна быть внутри строки
Выравнивание	`<td align="left\|center\|middle\|bottom\|right">`
Без перевода строки	`<td nowrap>`
Растягивание по колонке	`<td colspan="#">`
Растягивание по строке	`<td rowspan="#">`
Желаемая ширина	`<td width="#">`	В пикселях
Ширина в процентах	`<td width="%">`	Проценты от ширины страницы
Цвет ячейки	`<td style="background:#$$$$$$">`
Заголовок таблицы	`<th></th>`	Как данные, но жирный шрифт и центровка
Выравнивание	`<th align="left\|center\|middle\|bottom\|right">`
Без перевода строки	`<th nowrap>`
Растягивание по колонке	`<th colspan="#">`
Растягивание по строке	`<th rowspan="#">`
Желаемая ширина	`<th width="#">`	В пикселях
Ширина в процентах	`<th width="%">`	Проценты ширины таблицы
Цвет ячейки	`<th style="background:#$$$$$$">`
Заглавие таблицы	`<caption></caption>`
Выравнивание	`<caption align="top\|bottom">`	Сверху/снизу таблицы

Фреймы:

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

Язык Javascript:

Вставка внешнего скрипта в страничку <script type="text/javascript" language="javascript" src="url"></script>

Разное:

Комментарий	`<!-- Комментарий -->`	Игнорируется браузером
Пролог HTML 4.0	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">`
Метаинформация	`<meta>`	Должно быть в заголовке
Стили	`<style type="text/css">#css-code{}</style>`	Желательно быть в заголовке
Скрипт	`<script>//js,php,vb-code</script>`	Желательно быть в заголовке

Приложение: RGB-цвета

Название цвета	R	G	B
alicemblue	F0	F8	FF
antiquewhite	FA	EB	D7
aqua	00	FF	FF
aquamarine	7F	FF	D4
azure	F0	FF	FF
beige	F5	F5	DC
bisque	FF	E4	C4
black	00	00	00
blanchedalmond	FF	EB	CD
blue	00	00	FF
blueviolet	8A	2B	E2
brown	A5	2A	2A
burlywood	DE	B8	87
cadetblue	5F	9E	A0
chartreuse	7F	FF	00
chocolate	D2	69	1E
coral	FF	7F	50
cornflowerblue	64	95	ED
cornsilk	FF	F8	DC
crimson	DC	14	3C
cyan	00	FF	FF
darkblue	00	00	8B
darkcyan	00	8B	8B
darkgoldenrod	B8	86	0B
darkgray	A9	A9	A9
darkgreen	00	64	00
darkkhaki	BD	B7	6B
darkmagenta	8B	00	8b
darkolivegreen	55	6B	2F
darkorange	FF	8C	00
darkochid	99	32	CC
darkred	8B	00	00
darksalmon	E9	96	7A
darkseagreen	8F	BC	8F
darkslateblue	48	3D	8B
darkslategray	2F	4F	4F
darkturquoise	00	CE	D1
darkviolet	94	00	D3
deeppink	FF	14	93
deepskyblue	00	BF	FF
dimgray	69	69	69
dodgerblue	1E	90	FF
firebrick	B2	22	22
floralwhite	FF	FA	F0
forestgreen	22	8B	22
fushsia	FF	00	FF
gainsboro	DC	DC	DC
ghostwhite	F8	F8	FF
gold	FF	D7	00
goldenrod	DA	A5	20
gray	80	80	80
green	00	80	00
greenyellow	AD	FF	2F
honeydew	F0	FF	F0
hotpink	FF	69	B4
indiandred	CD	5C	5C
indigo	4B	00	82
ivory	FF	FF	F0
khaki	F0	E6	8C
lavender	E6	E6	FA
lavenderblush	FF	F0	F5
lawngreen	7C	FC	00
lemonchiffon	FF	FA	CD
ligtblue	AD	D8	E6
lightcoral	F0	80	80
lightcyan	E0	FF	FF
lightgoldenrodyellow	FA	FA	D2
lightgreen	90	EE	90
lightgrey	D3	D3	D3
lightpink	FF	B6	C1

Название цвета	R	G	B
lightsalmon	FF	A0	7A
lightseagreen	20	B2	AA
lightscyblue	87	CE	FA
lightslategray	77	88	99
lightsteelblue	B0	C4	DE
lightyellow	FF	FF	E0
lime	00	FF	00
limegreen	32	CD	32
linen	FA	F0	E6
magenta	FF	00	FF
maroon	80	00	00
mediumaquamarine	66	CD	AA
mediumblue	00	00	CD
mediumorchid	BA	55	D3
mediumpurple	93	70	DB
mediumseagreen	3C	B3	71
mediumslateblue	7B	68	EE
mediumspringgreen	00	FA	9A
mediumturquoise	48	D1	CC
medium violetred	C7	15	85
midnightblue	19	19	70
mintcream	F5	FF	FA
mistyrose	FF	E4	E1
moccasin	FF	E4	B5
navajowhite	FF	DE	AD
navy	00	00	80
oldlace	FD	F5	E6
olive	80	80	00
olivedrab	6B	8E	23
orange	FF	A5	00
orengered	FF	45	00
orchid	DA	70	D6
palegoldenrod	EE	E8	AA
palegreen	98	FB	98
paleturquose	AF	EE	EE
palevioletred	DB	70	93
papayawhop	FF	EF	D5
peachpuff	FF	DA	B9
peru	CD	85	3F
pink	FF	C0	CB
plum	DD	A0	DD
powderblue	B0	E0	E6
purple	80	00	80
red	FF	00	00
rosybrown	BC	8F	8F
royalblue	41	69	E1
saddlebrown	8B	45	13
salmon	FA	80	72
sandybrown	F4	A4	60
seagreen	2E	8B	57
seashell	FF	F5	EE
sienna	A0	52	2D
silver	C0	C0	C0
skyblue	87	CE	EB
slateblue	6A	5A	CD
slategray	70	80	80
snow	FF	FA	FA
springgreen	00	FF	7F
steelblue	46	82	B4
tan	D2	B4	8C
teal	00	80	80
thistle	D8	BF	D8
tomato	FF	63	47
turquose	40	E0	D0
violet	EE	82	EE
wheat	F5	DE	B3
white	FF	FF	FF
whitesmoke	F5	F5	F5
yellow	FF	FF	00
yellowgreen	9A	CD	32

Приложение: Спецсимволы

Вид	Код	Описание
Различные знаки
¡	¡	перевернутый восклицательный знак
¢	¢	цент
£	£	фунт стерлингов
¤	¤	денежная единица
¥	¥	иена или юань
¦	¦	разорванная вертикальная черта
§	§	параграф
¨	¨	diaeresis = spacing diaeresis
©	©	знак copyright
ª	ª	feminine ordinal indicator
«	«	левая двойная угловая скобка
¬	¬	знак отрицания
		место возможного переноса
™		торговая марка
®	®	знак зарегистрированной торговой марки
¯	¯	macron = spacing macron = overline = APL overbar
°	°	градус
±	±	плюс-минус
²	²	верхний индекс "два" - "квадрат"
³	³	верхний индекс "три" - "куб"
´	´	acute accent = spacing acute
µ	µ	микро
¶	¶	pilcrow sign = paragraph sign
·	·	middle dot = Georgian comma = Greek middle dot
¸	¸	cedilla = spacing cedilla
¹	¹	верхний индекс "один"
º	º	masculine ordinal indicator
»	»	правая двойная угловая скобка
¼	¼	дробь - одна четверть
½	½	дробь - одна вторая
¾	¾	дробь - три четверти
¿	¿	перевернутый вопросительный знак
Латинский и греческий алфавит
À	À	latin capital letter A with grave = latin capital letter A grave
Á	Á	latin capital letter A with acute
Â	Â	latin capital letter A with circumflex
Ã	Ã	latin capital letter A with tilde
Ä	Ä	latin capital letter A with diaeresis
Å	Å	latin capital letter A with ring above = latin capital letter A ring
Æ	Æ	latin capital letter AE = latin capital ligature AE
Ç	Ç	latin capital letter C with cedilla
È	È	latin capital letter E with grave
É	É	latin capital letter E with acute
Ê	Ê	latin capital letter E with circumflex
Ë	Ë	latin capital letter E with diaeresis
Ì	Ì	latin capital letter I with grave
Í	Í	latin capital letter I with acute
Î	Î	latin capital letter I with circumflex
Ï	Ï	latin capital letter I with diaeresis
Ð	Ð	latin capital letter ETH
Ñ	Ñ	latin capital letter N with tilde
Ò	Ò	latin capital letter O with grave
Ó	Ó	latin capital letter O with acute
Ô	Ô	latin capital letter O with circumflex
Õ	Õ	latin capital letter O with tilde
Ö	Ö	latin capital letter O with diaeresis
×	×	знак умножения
Ø	Ø	latin capital letter O with stroke = latin capital letter O slash
Ù	Ù	latin capital letter U with grave
Ú	Ú	latin capital letter U with acute
Û	Û	latin capital letter U with circumflex
Ü	Ü	latin capital letter U with diaeresis
Ý	Ý	latin capital letter Y with acute
Þ	Þ	latin capital letter THORN
ß	ß	latin small letter sharp s = ess-zed
à	à	latin small letter a with grave = latin small letter a grave
á	á	latin small letter a with acute
â	â	latin small letter a with circumflex
ã	ã	latin small letter a with tilde
ä	ä	latin small letter a with diaeresis
å	å	latin small letter a with ring above = latin small letter a ring
æ	æ	latin small letter ae = latin small ligature ae
ç	ç	latin small letter c with cedilla
è	è	latin small letter e with grave
é	é	latin small letter e with acute
ê	ê	latin small letter e with circumflex
ë	ë	latin small letter e with diaeresis
ì	ì	latin small letter i with grave
í	í	latin small letter i with acute
î	î	latin small letter i with circumflex
ï	ï	latin small letter i with diaeresis
ð	ð	latin small letter eth
ñ	ñ	latin small letter n with tilde
ò	ò	latin small letter o with grave
ó	ó	latin small letter o with acute
ô	ô	latin small letter o with circumflex
õ	õ	latin small letter o with tilde
ö	ö	latin small letter o with diaeresis
÷	÷	знак деления
ø	ø	latin small letter o with stroke, = latin small letter o slash
ù	ù	latin small letter u with grave
ú	ú	latin small letter u with acute
û	û	latin small letter u with circumflex
ü	ü	latin small letter u with diaeresis
ý	ý	latin small letter y with acute
þ	þ	latin small letter thorn
ÿ	ÿ	latin small letter y with diaeresis
Α	Α	греческая заглавная буква альфа
Β	Β	греческая заглавная буква бета
Γ	Γ	греческая заглавная буква гамма
Δ	Δ	греческая заглавная буква дельта
Ε	Ε	греческая заглавная буква эпсилон
Ζ	Ζ	греческая заглавная буква дзета
Η	Η	греческая заглавная буква эта
Θ	Θ	греческая заглавная буква тета
Ι	Ι	греческая заглавная буква иота
Κ	Κ	греческая заглавная буква каппа
Λ	Λ	греческая заглавная буква лямбда
Μ	Μ	греческая заглавная буква мю
Ν	Ν	греческая заглавная буква ню
Ξ	Ξ	греческая заглавная буква кси
Ο	Ο	греческая заглавная буква омикрон
Π	Π	греческая заглавная буква пи
Ρ	Ρ	греческая заглавная буква ро
Σ	Σ	греческая заглавная буква сигма
Τ	Τ	греческая заглавная буква тау
Υ	Υ	греческая заглавная буква ипсилон
Φ	Φ	греческая заглавная буква фи
Χ	Χ	греческая заглавная буква хи
Ψ	Ψ	греческая заглавная буква пси
Ω	Ω	греческая заглавная буква омега
α	α	греческая строчная буква альфа
β	β	греческая строчная буква бета
γ	γ	греческая строчная буква гамма
δ	δ	греческая строчная буква дельта
ε	ε	греческая строчная буква эпсилон
ζ	ζ	греческая строчная буква дзета
η	η	греческая строчная буква эта
θ	θ	греческая строчная буква тета
ι	ι	греческая строчная буква иота
κ	κ	греческая строчная буква каппа
λ	λ	греческая строчная буква лямбда
μ	μ	греческая строчная буква мю
ν	ν	греческая строчная буква ню
ξ	ξ	греческая строчная буква кси
ο	ο	греческая строчная буква омикрон
π	π	греческая строчная буква пи
ρ	ρ	греческая строчная буква ро
ς	ς	греческая строчная буква сигма (final)
σ	σ	греческая строчная буква сигма
τ	τ	греческая строчная буква тау
υ	υ	греческая строчная буква ипсилон
φ	φ	греческая строчная буква фи
χ	χ	греческая строчная буква хи
ψ	ψ	греческая строчная буква пси
ω	ω	греческая строчная буква омега
Знаки пунктуации
•	•	bullet - маленький черный кружок
…	…	многоточие ...
′	′	одиночный штрих - минуты и футы
″	″	двойной штрих - секунды и дюймы
‾	‾	надчеркивание
⁄	⁄	косая дробная черта
Стрелки
←	←	стрелка влево
↑	↑	стрелка вверх
→	→	стрелка вправо
↓	↓	стрелка вниз
↔	↔	стрелка влево-вправо
Математические операторы
ƒ	ƒ	latin small f with hook = знак функции = florin
∂	∂	частный дифференциал
∏	∏	произведение последовательности - знак произведения
∑	∑	сумма последовательности
−	−	минус
√	√	квадратный корень
∞	∞	бесконечность
∩	∩	пересечение - cap
∫	∫	интеграл
≈	≈	почти равно - асимптотически стремится
≠	≠	не равно
≡	≡	тождественно
≤	≤	меньше либо равно
≥	≥	больше либо равно
Прочие символы
◊	◊	lozenge
♠	♠	черный знак масти "пики"
♣	♣	черный знак масти "трефы" - shamrock
♥	♥	черный знак масти "червы" - valentine
"	"	двойная кавычка - APL quote
&	&	ampersand
<	<	знак "меньше"
>	>	знак "больше"
Œ	Œ	латинская заглавная лигатура OE
œ	œ	латинская строчная лигатура oe
Š	Š	latin capital letter S with caron
š	š	latin small letter s with caron
Ÿ	Ÿ	latin capital letter Y with diaeresis
ˆ	ˆ	modifier letter circumflex accent
˜	˜	small tilde
‌	‌	zero width non-joiner
‍	‍	zero width joiner
–	–	en dash
—	—	em dash
‘	‘	левая одиночная кавычка
’	’	правая одиночная кавычка
‚	‚	нижняя одиночная кавычка
“	“	левая двойная кавычка
”	”	правая двойная кавычка
„	„	нижняя двойная кавычка
†	†	кинжал (крест)
‡	‡	двойной кинжал (крест)
‰	‰	промилле
‹	‹	левая угловая одиночная кавычка
›	›	правая угловая одиночная кавычка
€	€	валюта евро

Приложение: Новые окна

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


<script type="text/javascript" language="javascript">

  timeout = 0;

  function Start(URL, WIDTH, HEIGHT) {

  windowprops = "width=" + (WIDTH+2) + ",height=" + (HEIGHT+2);

  text = "<html><head><title>Photo</title></head><body bgcolor='#dddddd' style='padding: 1px; margin: 0'";

  if (timeout != 0) text +=" onLoad=\"setTimeout('window.close()', " + timeout*1000 + ");\"";

  text += "><div align=center><a href='javascript:top.window.close();'><img src='" + URL + "' border='0'>";

  if (timeout != 0) text +="<br/><span style='Tahoma, helvetica' size='-1'>Preview closes after " + timeout + " seconds.</span>";

  text += "</a></div></body></html>";

  preview = window.open("", "preview", windowprops);

  preview.document.open();

  preview.document.write(text);

  preview.document.close();

  }

  //функция открытия нового окна с большой фотографией

  //работает в: FF,IE,NN,Opera

  //пример: <a href="javascript:Start('big_img.png', 600, 400)";><img src="small_img.png" alt=""/></a>

</script>

Пример использования этой функции:


<a href="javascript:Start('big_img.png', 600, 400)";><img src="small_img.png" alt=""/></a>

Где:
big_img.png - это большая картинка,
small_img.png - это маленькая картинка,
600, 400 это ширина и высота большой картинки.

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


<?php

$size = getimagesize ("/full/putch/to/image/file/big_img.png");

echo "<a href=\"javascript:Start('/putch-from_site-root-directory/small_img.png', {$size[0]},{$size[1]})\";><img
 src=\"/putch-from_site-root-directory/small_img.png\" alt=\"Alternative text\" title=\"Title text\" style=\"border:none;\"/></a>\n";

?>

Где:
/full/putch/to/image/file/big_img.png - это путь от корня вебсервера до большой картинки,
/putch-from_site-root-directory/small_img.png - это путь от корня сайта до маленькой картинки,
$size[0], $size[1] это определение ширины и высоты большой картинки.

После использования этого php кода, на экран покажется та-же картинка, только вот размеры выставили не вы, а за вас это сделал PHP скрипт. Удобно вобщем.

Приложение: Советы Web-мастеру

Управление кодом сайтов:

Код сайтов должен соответствовать существующим стандартам. Т.е. плавный переход от HTML к строгому xHTML коду. Не должно быть тегов-сирот (тегов, не имеющих закрывающего брата). Все непарные теги должны иметь закрывающий слеш. Например:



	<meta name="keywords" content="Текст"/>
	<img src="image.gif" alt="Описание картинки">
	<input class="input" maxlength="40" name="email" type="text" value="Any text"/>
	<br clear="all"/>
	<br/>
	<hr/>

К каждой картинке необходимо добавлять атрибут alt="". Пример:


<img src="cartoon.gif" alt="описание картинки"/>

Заголовок каждой страницы должен обрамляться заголовком вида <h1>Заголовок</h1>. Все это сильно увеличивает индексируемость страницы и повышает релевантность. Все это нужно для правильного продвижения сайта!

Теги пишутся исключительно в нижнем регистре. Т.е. <h1></h1>; <p></p>; <b></b> и т.д. Все атрибуты обрамляются "двойной кавычкой". Например: <p style="asdf"></p>; <td width="100"></td>; <hr width="500"/>, и т.д.

Категорически не допускается использование конвертированного из WORD кода!

Все атрибуты стилей должны быть вынесены в CSS файл. Использование вымирающих атрибутов вроде <font color="red"></font> и этом роде (!) категорически нежелательно!!

Правила вложенности тегов должны соблюдаться. Т.е. недопустимы (!) следующие примеры:



	<li>текст<li>текст<li>текст
	<p>текст<p>текст<p>текст
	<p>текст <b>текст</p></b>

Т.е. не допускается хаос в коде. Все HTML теги должны быть в нижнем регистре. Желательно соблюдать отступы у вложенных тегов. Также желателен перевод каретки в HTML коде (нажатие Enter). Все это облегчает и увеличивает скорость работы.

Обязательно нужно поддерживать красоту и изящность кода. Пожалейте себя и других!

Использование новых технологий приветствуется, но необходимо тестировать страницы как минимум в двух браузерах. Это IE и Mozilla Firefox.

Желательно меньше использовать таблиц. Таблицы нужны для табличных данных, и не более. Использовать таблицы для дизайна - не желетально. Для дизайна желательно использование слоев (DIV'ы). Слои легче индексируются поисковиками и намного гибче таблиц. Также желательно использовать альтернативные атрибуты тегов. Например:



	<script type="text/javascript" language="javascript" src="script.js"> </script>
	<a href="http://www.site.ru" target="_blank" rel="nofollow">Site</a>

Ссылки на внешние ресурсы обязательно должны иметь атрибут target="_blank". Также все ссылки на внешние сайты должны экранироваться тегом и атрибутом rel="nofollow". Также все внешние ссылки должны иметь атрибут target="_blank". Пример:



	<noindex><a href="http://www.any-partner-site.ru" target="_blank" rel="nofollow">www.any-partner-site.ru</a></noindex>

Резюмирую эту часть скажу: Необходимо любить свои сайты. Нужно приучаться делать правильный (валидный) и красивый код - сразу. Если видите неправильный код - переделайте! В дальнейшем будет легче ориентироваться в страницах, коде и работе в целом!

Управление файлами:

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

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

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

Резюме:

Необходимо "Бережно с любовью" обращаться с файлами, сайтами и остальной работой. HTML-кодинг дело не сложное, но требующее внимательности, усидчивости и аккуратности.

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

Название страницы:
Кодировка:
Имя автора:
E-Mail:
Описание документа:
Ключевые слова: (через запятую)