HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
by Дан ила
1. ПОНЯТИЕ ТЕГА И АТРИБУТА Тег (иногда тэг, англ. tag) в HTML — элемент языка разметки гипертекста, более правильное название — дескриптор. Например, текст википедии, заключенный между начальным тегом <small> и конечным тегом </small> (от англ. small маленький) предписывает отображать его меньше основного текста. Теги используются в паре — открывающий, или начальный, и закрывающий, или конечный, или еще дополнительно возможно применение одиночного тега и тега пустого элемента. Например, тег отступа абзаца может оформлять абзац между <p> </p> , а может в одиночной форме до следующего первого попавшегося <p> .
1.1. У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности форматирования текста. Они записываются в виде пары имя-значение, причем нечисловое значение заключается в кавычки. Например, можно выделить фрагмент текста определенным шрифтом (тег <font> ), указав в этом теге название шрифта и желаемый размер: <font face=“Times, Arial, Courier” size=4> оформляемый текст </font> . Получим строку: оформляемый текст . Теги и их параметры нечувствительны к регистру. То есть <A HREF=“http://yahoo.com”> и <a href=“http://yahoo.com”> означают одно и то же. В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15.
2. ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами. <pre> </pre> — определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. <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> — выделение цитат курсивом <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> — создает отступы с обеих сторон текста.
3. СТРУКТУРА HTML-ДОКУМЕНТА Каждый HTML-документ обязан начинаться со строки декларации версии HTML <!DOCTYPE> , которая выглядит примерно так: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее. Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка ( <head> </head> ) и тела ( <body> </body> ) документа. Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация, апплеты Java и т.п. должны быть записаны в виде отдельных файлов. Web-страницы можно разделить на две группы: статические (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются; динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы). Для просмотра Web-страниц на экране нужна специальная программа — браузер. Со всеми современными версиями Windows поставляется браузер Internet Explorer. Многие пользователи выбирают Mozilla Firefox или Google Chrome.
4. -Гиперссылки Отличительной особенностью гипертекстовых и гипермедиадокументов являются активные ссылки на другие документы (гиперссылки). Ссылкой может быть как текст, так и рисунок. При наведении мыши на ссылку курсор принимает форму руки, щелкнув мышью можно открыть в окне браузера документ, связанный с этой ссылкой. Ссылка устанавливается с помощью парного тэга <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> — гиперссылка на метку другой страницы. Графические элементы <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.
5. Фон и текст Для того, чтобы задать фон таблицы, строки или даже отдельной ячейки, тэги <TABLE> , <TR> и <TD> имеют параметры BGCOLOR — задает цвет фона в виде названия или шестнадцатеричного кода (см. раздел про Кодирование Цвета) BACKGROUND — задает фон-рисунок, можно указать имя файла, путь к нему или URL. Для того, чтобы изменить цвет текста в ячейке, используют тэг <FONT>
6. Кодирование цвета в документе HTML Для представления цвета в HTML используется модель цвета RGB с выделением по байту на цвет
7. аблицы на 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> — определяет подпись таблицы
7.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=“#”> — устанавливает высоту ячейки в пикселах или процентах от высоты таблицы (ячейки одной строки не могут иметь разную высоту).
8. Списки список определений <dl> </dl> — создает список определений <dt> — определяет каждый из терминов списка <dd> — описывает каждое определение нумерованный список <ol> </ol> — создает нумерованный список <li> — определяет каждый элемент списка и присваивает номер неНУМЕРОВАННЫЙ СПИСОК <ul> </ul> — создает ненумерованный список <li> — предваряет каждый элемент списка и добавляет кружок или квадратик.
