HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык размет...
1. ЯЗЫК HTML
1.1. Привет, мир!!! - Mozilla Firefox Закладки Справка Привет, Поздравление миру Привет, мир! Я так рад тебя видеть этим замечательным утром. Это так прекрасно - жить, что у меня нет сил тебе передать это. Впрочем, если жизнь действительно замечательна, то ты должен лучше всек меня понимать. Мир, дай тебе Бог Свое благословение! Будь здоров, мир! Не болей! Готово
1.1.1. Здесь мы уже воспользовались двумя тегами форматирования текста:
1.1.2. <h1>
1.1.2.1. обрамляет текст, выделяемый как заголовок первого уровня (самый крупный);
1.1.3. <p>
1.1.3.1. обрамляет параграф обычного текста.
1.1.4. Форматирование текста в HTML может происходить двумя путями: через теги и их атрибуты или через использование таблиц стилей CSS. Второй путь во многих случаях удобнее, но исторически он появился позже. На этом занятии мы научимся классическому языку разметки HTML, без использования CSS.
1.2. Напомним, что гипертекстом называется документ, содержащий гиперссылки — активные ссылки на другие документы на локальном компьютере или в Интернете, щелкнув по которым можно перейти к связанному документу.
1.3. Язык HTML использует специальные команды (они называются тэги) для разметки Web-страницы, то есть для размещения на ней текста, таблиц, рисунков, списков и т.п. Браузер, читая такой файл, обрабатывает эти команды и выводит страницы на экран. Поэтому одну и ту же Web-страницу разные браузеры могут выводить на экран по-разному.
1.4. Из предыдущего занятия мы поняли что такое гипертекст и как в целом выглядит документ в формате HTML. При интерпретации как сырой текст это выглядит так:
1.4.1. IDOCTYPE HTMLPUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"
1.4.2. "http://www. w3.org/TR/xhtm11/DTD/xhtml1-transitional. dtd"> <html>
1.4.3. <head>
1.4.4. <meta http: equiv="Content-Type" content="text/html; charset=windows-1251"> <meta http-equiv="content-language" content="ru"> <title>Привет, мир!!!</title>
1.4.5. </head> <body>
1.4.6. <h1>Поздравление миру</h1> <p>Привет, мир! Я так рад тебя видеть этим замечательным утром. Этотак прекрасно жить, что у меня нет силтебе передать это. Впрочем, если жизнь действительно замечательна, то ты должен лучше всехменя понимать. Мир, дай тебе Бог Свое благословение! Будь здоров, мир! Не болей!</p>
1.4.7. </body> </ht </html>
1.5. Если вставить этот текст в блокнот и сохранить как 1.html, то при открытии браузером этот документ будет выглядеть так:
2. ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА
2.1. Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами.
2.1.1. <pre> </pre>
2.1.1.1. — определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег
2.1.2. <pre>
2.1.2.1. позволяет обойти эту особенность и отображать текст как требуется разработчику.
2.1.3. <h1> </h1>
2.1.3.1. — самый большой заголовок
2.1.4. <h2> </h2>
2.1.5. …
2.1.6. <h5> </h5>
2.1.6.1. — заголовки промежуточных размеров
2.1.7. <h6> </h6>
2.1.7.1. — самый маленький заголовок
2.1.8. <p> </p>
2.1.8.1. — новый параграф
2.1.9. <p align=“?”> </p>
2.1.9.1. — выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center
2.1.10. <b> </b>
2.1.10.1. — жирный текст (не рекомендованный)
2.1.11. <i> </i>
2.1.11.1. — наклонный текст (не рекомендованный)
2.1.12. <kbd> </kbd>
2.1.12.1. — текст, имитирующий стиль печатной машинки (рекомендованный)
2.1.13. <var> </var>
2.1.13.1. — название переменных отображается курсивом
2.1.14. <cite> </cite>
2.1.14.1. — выделение цитат курсивом
2.1.15. <address> </address>
2.1.15.1. — отображается курсивом в виде отдельного абзаца
2.1.16. <em> </em>
2.1.16.1. — наклонный текст (воспринимается поисковыми роботами как выделение)
2.1.17. <strong> </strong>
2.1.17.1. — жирный текст (воспринимается поисковыми роботами, как особо сильное выделение)
2.1.18. <font size=“?”> </font>
2.1.18.1. — устанавливает размер текста в пределах от 1 до 7.
2.1.19. <font color=“?”> </font>
2.1.19.1. — устанавливает цвет текста, используя значение цвета в виде RRGGBB.
2.1.20. <font face=“?”> </font>
2.1.20.1. — устанавливает начертание (название) шрифта
2.1.21. <div align=“?”> </div>
2.1.21.1. — важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
2.1.22. <br>
2.1.22.1. — вставляет перевод строки.
2.1.23. <nobr>
2.1.23.1. — запрещает перевод строки.
2.1.24. <wbr>
2.1.24.1. — указывает где разбивать строку для переноса при необходимости.
2.1.25. <blockquote> </blockquote>
2.1.25.1. — создает отступы с обеих сторон текста.
3. Гиперссылки
3.1. Отличительной особенностью гипертекстовых и гипермедиадокументов являются активные ссылки на другие документы (гиперссылки). Ссылкой может быть как текст, так и рисунок. При наведении мыши на ссылку курсор принимает форму руки, щелкнув мышью можно открыть в окне браузера документ, связанный с этой ссылкой.
3.1.1. Ссылка устанавливается с помощью парного тэга <A> (от английского anchor — якорь). Тэг имеет параметр HREF , который указывает адрес документа. Ссылкой является вся информация, расположенная между открывающим <A> и закрывающим </A> тэгами.
3.2. Язык HTML позволяет делать ссылки внутри страницы, а также в любую часть этой же или любой другой страницы. Для этого в нужном месте надо установить «якорь» — тэг <A> с параметром NAME , который задает имя или метку.
3.3. <a href=“URL”> </a>
3.3.1. — гиперссылка на другой сайт.
3.4. <a href=“NAME”> </a>
3.4.1. — гиперссылка на другую страницу.
3.5. <a href=“mailto:MAIL”> </a>
3.5.1. — гиперссылка вызова почтовой программы для написания письма по указанному адресу.
3.6. <a href=“#name”> </a>
3.6.1. — гиперссылка на метку текущей страницы.
3.7. <a name=“name”> </a>
3.7.1. — отмечает часть текста, как метку для гиперссылок на странице.
3.8. <a href=“NAME#name”> </a>
3.8.1. — гиперссылка на метку другой страницы.
4. Таблицы
4.1. Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки. Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок. Ниже приведен код простейшей таблицы:
4.1.1. <BODY>
4.1.2. <TABLE BORDER="1">
4.1.3. <TR><TD>Таблица из одной строки</TD>
4.1.4. <TD>из трех столбцов</TD>
4.1.5. <TD>без указания ширины таблицы и ячеек.</TD> </TR>
4.1.6. </TABLE>
4.1.7. </BODY>
4.2. Атрибуты таблицы
4.2.1. <table border=“#”>
4.2.1.1. — задает толщину рамки таблицы.
4.2.2. <table cellspacing=“#”>
4.2.2.1. — задает расстояние между ячейками таблицы.
4.2.3. <table cellpadding=“#”>
4.2.3.1. — задает расстояние между содержимым ячейки и ее рамкой.
4.2.4. <table width=“#”>
4.2.4.1. — устанавливает ширину таблицы в пикселах или процентах от ширины документа.
4.2.5. <table height=“#”>
4.2.5.1. — устанавливает высоту таблицы в пикселах или процентах от высоты документа.
4.2.6. <tr align=“?”>
4.2.6.1. или
4.2.7. <td align=“?”>
4.2.7.1. — устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
4.2.8. <tr valign=“?”>
4.2.8.1. или
4.2.9. <td valign=“?”>
4.2.9.1. — устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
4.2.10. <td colspan=“#”>
4.2.10.1. — указывает количество столбцов, которое объединено в одной ячейке. (по умолчанию=1)
4.2.11. <td rowspan=“#”>
4.2.11.1. — указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1)
4.2.12. <td nowrap>
4.2.12.1. — не позволяет программе просмотра делать перевод строки в ячейке таблицы.
4.2.13. <td width=“#”>
4.2.13.1. — устанавливает ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину).
4.2.14. <td height=“#”>
4.2.14.1. — устанавливает высоту ячейки в пикселах или процентах от высоты таблицы (ячейки одной строки не могут иметь разную высоту).
4.3. Таблица начинается тэгом <TABLE> (от английского table — таблица) и заканчивается парным ему тэгом <TABLE> . Параметр BORDER тэга <TABLE> обозначает ширину рамки таблицы. Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тэгом <TR> (от английского table row — строка таблицы) и заканчивается парным ему тэгом </TR> . Ячейки в строке описываются слева направо. Каждая ячейка начинается тэгом <TD> (от английского table data — данные таблицы) и заканчивается парным ему тэгом </TD> . В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).
4.3.1. <table> </table>
4.3.1.1. — создает таблицу.
4.3.2. <tr> </tr>
4.3.2.1. — определяет строку в таблице.
4.3.3. <td> </td>
4.3.3.1. — определяет отдельную ячейку в таблице.
4.3.4. <th> </th>
4.3.4.1. — определяет заголовок таблицы (нормальная ячейка с центрованным жирным текстом)
4.3.5. <caption> </caption>
4.3.5.1. — определяет подпись таблицы
5. Графические элементы
5.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.
6. Структура HTML документа.
6.1. Каждый HTML-документ обязан начинаться со строки декларации версии HTML <!DOCTYPE> , которая выглядит примерно так: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
6.2. Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка ( <head> </head> ) и тела ( <body> </body> ) документа.
6.3. Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация, апплеты Java и т.п. должны быть записаны в виде отдельных файлов. Web-страницы можно разделить на две группы:
6.3.1. динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).
6.3.2. статические (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются
7. ПОНЯТИЕ ТЕГА И АТРИБУТА
7.1. Тег (иногда тэг, англ. tag) в HTML — элемент языка разметки гипертекста, более правильное название — дескриптор. Например, текст википедии, заключенный между начальным тегом <small> и конечным тегом </small> (от англ. small маленький) предписывает отображать его меньше основного текста.
7.2. У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности форматирования текста. Они записываются в виде пары имя-значение, причем нечисловое значение заключается в кавычки:
7.3. Например, можно выделить фрагмент текста определенным шрифтом (тег)
7.4. <font>
7.5. указав в этом теге название шрифта и желаемый размер:
7.6. <font face=“Times, Arial, Courier” size=4>
7.6.1. оформляемый текст
7.7. </font>
7.8. Получим строку: оформляемый текст .
7.9. Теги и их параметры нечувствительны к регистру. То есть
7.10. <A HREF=“http://yahoo.com”>
7.11. <a href=“http://yahoo.com”>
7.11.1. означают одно и то же.
7.12. Теги используются в паре — открывающий, или начальный, и закрывающий, или конечный, или еще дополнительно возможно применение одиночного тега и тега пустого элемента. Например, тег отступа абзаца может оформлять абзац между
7.13. <p> </p>
7.14. , а может в одиночной форме до следующего первого попавшегося
7.15. <p>
7.16. Пример пустого элемента:
7.17. <HR> </HR>
7.17.1. — разрыв текста без сохранения отступов, но вы можете использовать специальную форму записи тега, используя меньшее число символов:
7.18. <HR/>
8. Списки
8.1. список определений
8.1.1. <dl> </dl>
8.1.1.1. — создает список определений
8.1.2. <dt>
8.1.2.1. — определяет каждый из терминов списка
8.1.3. <dd>
8.1.3.1. — описывает каждое определение
8.2. нумерованный список
8.2.1. <ol> </ol>
8.2.1.1. — создает нумерованный список
8.2.2. <li>
8.2.2.1. — определяет каждый элемент списка и присваивает номер
8.3. неНУМЕРОВАННЫЙ СПИСОК
8.3.1. <ul> </ul>
8.3.1.1. — создает ненумерованный список
8.3.2. <li>
8.3.2.1. — предваряет каждый элемент списка и добавляет кружок или квадратик.
9. Фон и текст
9.1. Для того, чтобы задать фон таблицы, строки или даже отдельной ячейки, тэги <TABLE> , <TR> и <TD> имеют параметры
9.1.1. BGCOLOR — задает цвет фона в виде названия или шестнадцатеричного кода (см. раздел про Кодирование Цвета)
9.1.2. BACKGROUND — задает фон-рисунок, можно указать имя файла, путь к нему или URL.
9.1.3. Для того, чтобы изменить цвет текста в ячейке, используют тэг <FONT> . Например, код
9.1.3.1. <TABLE BORDER="1" BGCOLOR="green"> <TR HEIGHT="30" BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD> </TR> <TR> <TD BACKGROUND="web.jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE>
10. Кодирование цвета в документе HTML
10.1. Для представления цвета в HTML используется модель цвета RGB с выделением по байту на цвет
10.2. Названия цветов
10.2.1. Цвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода. Многие цвета имеют (английские) имена и эти названия понимают браузеры. Например, white — белый black — черный red — красный green — зеленый blue — синий
10.3. Шестнадцатеричные коды
10.3.1. Другой способ задать цвет — указать его код в формате RGB. Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи). Первая пара обозначает яркость красного (R — red), вторая и третья — яркости зеленого (G — green) и синего (B — blue) в этом цвете. Всего такая форма записи позволяет задать более 16 миллионов разных цветов (режим True Color — истинный цвет), однако возможно, что не все они могут быть реализованы на экране монитора. Примеры цветов в шестнадцатеричном формате: #FFFFFF — белый #000000 — черный #FF0000 — красный #00FF00 — зеленый #0000FF — синий