1. Теги формирования текста
1.1. Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами.
1.1.1. <pre> </pre> — определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.
1.1.2. <h1> </h1> — самый большой заголовок <h2> </h2> … <h5> </h5> — заголовки промежуточных размеров <h6> </h6> — самый маленький заголовок <p> </p> — новый параграф <p align=“?”> </p> — выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center <b> </b> — жирный текст (не рекомендованный) <i> </i> — наклонный текст (не рекомендованный) <kbd> </kbd> — текст, имитирующий стиль печатной машинки (рекомендованный) <var> </var> — название переменных отображается курсивом <cite> </cite> — выделение цитат курсивом
1.1.3. <address> </address> — отображается курсивом в виде отдельного абзаца <em> </em> — наклонный текст (воспринимается поисковыми роботами как выделение) <strong> </strong> — жирный текст (воспринимается поисковыми роботами, как особо сильное выделение) <font size=“?”> </font> — устанавливает размер текста в пределах от 1 до 7. <font color=“?”> </font> — устанавливает цвет текста, используя значение цвета в виде RRGGBB. <font face=“?”> </font> — устанавливает начертание (название) шрифта <div align=“?”> </div> — важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей <br> — вставляет перевод строки. <nobr> — запрещает перевод строки. <wbr> — указывает где разбивать строку для переноса при необходимости. <blockquote> </blockquote> — создает отступы с обеих сторон текста.
2. Графические элементы
2.1. <img src=“name”> — добавляет изображение в HTML документ <img src=“name” align=“?”> — выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle <img src=“name” border=“?”> — устанавливает толщину рамки вокруг изображения <img src=“name” vspase=“?”> — устанавливает поля сверху и снизу <img src=“name” hspase=“?”> — устанавливает поля с боков <img src=“name” alt=“?”> — всплывающая подсказка при наведении на изображение <hr> — добавляет в HTML документ горизонтальную линию. <hr size=“?”> — устанавливает высоту (толщину) линии <hr width=“?”> — устанавливает ширину линии, можно указать ширину в пикселах или процентах. <hr noshade> — создает линию без тени. <hr color=“?”> — задает линии определенный цвет. Значение RRGGBB.
3. Таблицы
3.1. Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки. Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок. Ниже приведен код простейшей таблицы <BODY> <TABLE BORDER="1"> <TR><TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> </BODY> и вид окна браузера Таблица начинается тэгом <TABLE> (от английского table — таблица) и заканчивается парным ему тэгом <TABLE> Параметр BORDER тэга <TABLE> обозначает ширину рамки таблицы. Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тэгом <TR> (от английского table row — строка таблицы) и заканчивается парным ему тэгом </TR> Ячейки в строке описываются слева направо. Каждая ячейка начинается тэгом <TD> (от английского table data — данные таблицы) и заканчивается парным ему тэгом </TD> . В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы). <table> </table> — создает таблицу. <tr> </tr> — определяет строку в таблице. <td> </td> — определяет отдельную ячейку в таблице. <th> </th> — определяет заголовок таблицы (нормальная ячейка с центрованным жирным текстом) <caption> </caption> — определяет подпись таблицы
3.1.1. Атрибуты таблицы
3.1.1.1. <table border=“#”> — задает толщину рамки таблицы. <table cellspacing=“#”> — задает расстояние между ячейками таблицы. <table cellpadding=“#”> — задает расстояние между содержимым ячейки и ее рамкой. <table width=“#”> — устанавливает ширину таблицы в пикселах или процентах от ширины документа. <table height=“#”> — устанавливает высоту таблицы в пикселах или процентах от высоты документа. <tr align=“?”> или <td align=“?”> — устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. <tr valign=“?”> или <td valign=“?”> — устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. <td colspan=“#”> — указывает количество столбцов, которое объединено в одной ячейке. (по умолчанию=1) <td rowspan=“#”> — указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1) <td nowrap> — не позволяет программе просмотра делать перевод строки в ячейке таблицы. <td width=“#”> — устанавливает ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину). <td height=“#”> — устанавливает высоту ячейки в пикселах или процентах от высоты таблицы (ячейки одной строки не могут иметь разную высоту).
4. Списки
4.1. <dl> </dl>— создает список определений <dt>— определяет каждый из терминов списка <dd>— описывает каждое определение
4.1.1. нумерованный список
4.1.1.1. <ol> </ol> — создает нумерованный список <li> — определяет каждый элемент списка и присваивает номер
4.1.2. ненумерованный список
4.1.2.1. <ul> </ul> — создает ненумерованный список <li> — предваряет каждый элемент списка и добавляет кружок или квадратик.
5. Гиперссылки
5.1. Отличительной особенностью гипертекстовых и гипермедиадокументов являются активные ссылки на другие документы (гиперссылки). Ссылкой может быть как текст, так и рисунок. При наведении мыши на ссылку курсор принимает форму руки, щелкнув мышью можно открыть в окне браузера документ, связанный с этой ссылкой. Ссылка устанавливается с помощью парного тэга <A> (от английского anchor — якорь). Тэг имеет параметр HREF , который указывает адрес документа. Ссылкой является вся информация, расположенная между открывающим <A> и закрывающим </A> тэгами. Язык HTML позволяет делать ссылки внутри страницы, а также в любую часть этой же или любой другой страницы. Для этого в нужном месте надо установить «якорь» — тэг <A> с параметром NAME , который задает имя или метку. <a href=“URL”> </a> — гиперссылка на другой сайт. <a href=“NAME”> </a> — гиперссылка на другую страницу. <a href=“mailto:MAIL”> </a> — гиперссылка вызова почтовой программы для написания письма по указанному адресу. <a href=“#name”> </a> — гиперссылка на метку текущей страницы. <a name=“name”> </a> — отмечает часть текста, как метку для гиперссылок на странице. <a href=“NAME#name”> </a> — гиперссылка на метку другой страницы.
6. Понятие тега и атрибутика
6.1. У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности форматирования текста. Они записываются в виде пары имя-значение, причем нечисловое значение заключается в кавычки.
6.1.1. Например, можно выделить фрагмент текста определенным шрифтом тег <font>, указав в этом теге название шрифта и желаемый размер: <font face=“Times, Arial, Courier” size=4> оформляемый текст </font> . Получим строку: оформляемый текст .
6.2. Теги и их параметры нечувствительны к регистру. То есть <A HREF=“http://yahoo.com”>и <a href=“http://yahoo.com”> означают одно и то же.
6.3. Дополнительно возможно применение одного тега и тега пустого элемента
6.3.1. Пример пустого элемента: <HR> </HR> — разрыв текста без сохранения отступов, но вы можете использовать специальную форму записи тега, используя меньшее число символов: <HR/>
6.4. Теги используются в паре -открывающий, или начальный, и закрывающий, или конечный, или еще дополнительно возможно применение одиночного тега и тега пустого элемента.
6.4.1. Например, тег отступа абзаца может оформлять абзац между <p> </p>, а может в одиночной форме до следующего первого попавшегося <p>
7. Кодирование цвета в документе HTML
7.1. Названия цветов
7.1.1. white — белый black — черный red — красный green — зеленый blue — синий
7.2. Шестнадцатеричные коды
7.2.1. Другой способ задать цвет — указать его код в формате RGB. Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи). Первая пара обозначает яркость красного (R — red), вторая и третья — яркости зеленого (G — green) и синего (B — blue) в этом цвете. Всего такая форма записи позволяет задать более 16 миллионов разных цветов (режим True Color — истинный цвет), однако возможно, что не все они могут быть реализованы на экране монитора.
7.2.1.1. Примеры цветов в шестнадцатеричном формате: #FFFFFF — белый #000000 — черный #FF0000 — красный #00FF00 — зеленый #0000FF — синий
8. Фон и текс
8.1. Для того, чтобы задать фон таблицы, строки или даже отдельной ячейки, тэги <TABLE> <TR> <TD> имеют параметры:
8.1.1. BGCOLOR
8.1.1.1. — задает цвет фона в виде названия или шестнадцатеричного кода (см. раздел про Кодирование Цвета)
8.1.2. BACKGROUND
8.1.2.1. — задает фон-рисунок, можно указать имя файла, путь к нему или URL. Для того, чтобы изменить цвет текста в ячейке, используют тэг <FONT>
9. СТРУКТУРА HTML-ДОКУМЕНТА
9.1. Каждый HTML-документ обязан начинаться со строки декларации версии HTML <!DOCTYPE> ,которая выглядит примерно так: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
9.1.1. Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head> </head>) и тела ( <body> </body> ) документа.
9.2. Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация, апплеты Java и т.п. должны быть записаны в виде отдельных файлов.
9.2.1. статические
9.2.1.1. (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются;
9.2.2. динамические
9.2.2.1. динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).