HTML как основа интернет

технологий

Hyper Text Markup Language — язык разметки гипертекста

Тим Бернерс-Ли, основатель World Wide Web Consortium (W3C)
считается родоначальником стандарта HTML 4.0, принятого в
декабре 1997 года.

Мы будем говорить о «чистом» HTML как языке разметки страниц,

не затрагивая динамические HTML и мультимедиа-объекты.
Для разметки в HTML используются ограничители с
идентификатором, называемые тегами, например, <b>
- придающий содержимому полужирное начертание.
Большинство тегов должны быть закрыты после
содержимого, то есть для того, чтобы задать
полужирное начертание текста, нужно сделать
следующее:
<b>ваш текст</b>

закрывающий тег отличается от открывающего

наличием слеша.
Простое форматирование

для выделения абзацев используется тег <p>,

который не обязательно закрывать с помощью
</p>, но для особо тупых браузеров можно,
мало ли что там установлено у пользователя…

<br> или перенос строки может заменять тег

<p> там, где это уместно
Тег <div> является тегом-контейнером,
служащим для выделения фрагментов
документа. Отвечает главным образом за
стили.

В HTML применяется принцип иерархии стилей

– теги структурных элементов ставятся выше
тегов текстового оформления.

То есть, например, <p><b>ваш текст</b></p>

 Выравнивание текста

<div align="center">текст</div>
<div align="left">текст</div>
<div align="right">текст</div>
<div align="justify">текст</div>
В наборе тегов HTML имеется шесть типов заголовков:

<h1> текст </h1>

<h2> текст </h2>
<h3> текст </h3>
<h4> текст </h4>
<h5> текст </h5>
<h6> текст </h6>
Выделение текста и цитата

<font size="+2">текст</font>

<blockquote><font size=+1 color=gray>

выделяемый текст</font></blockquote>
Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB -
например #008000 - зелёный цвет, либо используя
константы цвета - green
Существует обширный перечень цветов HTML, однако чем
сложнее цвет, тем выше вероятность, что браузер не будет
корректно его отображать.
Основные теги HTML
<b> </b> - Полужирный текст
<i> </i> - Наклонный текст
<u> </u> - Подчеркнутый текст
<strike> </strike> - Перечеркнутый
<s> </s> - Перечеркнутый (второй вариант, от
первого ничем не отличается – такой же
ненужный)
<tt> </tt> - моноширинный шрифт, и он давно не
в моде.
<small> </small> - Малый
<big> </big>- Большой (если вы забыли
заголовочные теги)
- Верхний индекс
- Нижний индекс
Цвет и шрифт задаются через атрибуты face и color

<font face="arial">Эта строчка будет написана с

помощью шрифта Arial</font>

<font color="#0000FF">этот текст синий</font>

фотографии

<img src="foto.jpg">
тег <img> не требует закрывающего тега!
<img src="foto.jpg" align="left"> - фото слева от текста
<img src="foto.jpg" align="right"> - фото справа от
текста
<img src="foto.jpg" align="top"> - текст выше фото
<img src="foto.jpg" align="bottom"> - текст ниже фото
<img src="foto.jpg" align="middle"> - и, соответственно,
текст посередине
<img src="foto.jpg" vspace="15"> - Атрибут vspace задаёт
расстояние по вертикали от рисунка до текста, в
данном случае мы задали расстояние в 15 пикселей

<img src="foto.jpg" hspace="25"> - Расстояние по

горизонтали соответственно

<img src="foto.jpg" width="180"> - Ширина

непосредственно самого изображения
<img src="foto.jpg" height="240"> - Высота изображения.
Если атрибуты width и height не использовать, то
ширина и высота изображения по умолчанию будет
равна реальным её размерам, без каких либо
искажений.
<img src="foto.jpg" border="5">- Бордюр, рамка вокруг
изображения и её толщина в пикселях.
<img src="foto.jpg" border="5" bordercolor="#008000 ">
- bordercolor - это цвет рамки.
<img src="foto.jpg" alt="описание"> -Атрибут alt - это
описание изображения. Если навести курсор на наше
фото и подержать его там несколько секунд,
выскочит надпись -foto
<img src="foto.jpg" title="описание"> - альтернатива
alt в данном случае.
ссылки

<a href="primer.html">anchor</a>

У каждой ссылки есть якорь (anchor), то есть

выделяемое слово и тело ссылки – то есть
адресация.

<a style="color: #FF9314;"

href="http://kommersant.ru/daily">«Коммерса
нтъ»</a>

<a href="primer3.html" target="_blank">открыть

в новом окне</a>
Таблицы – самое неприятное, что есть в HTML, поэтому в
сети существует масса онлайн-генераторов таблиц, по
большей части – кривых.

<table> Создает таблицу.

<tbody> Предназначен для хранения одной или нескольких
строк таблицы.
<td> Предназначен для создания одной ячейки таблицы.
<tfoot> Предназначен для хранения одной или нескольких
строк, которые представлены внизу таблицы.
<th> Создает одну ячейку таблицы, которая обозначается как
заголовочная.
<thead> Предназначен для хранения одной или нескольких
строк, которые представлены вверху таблицы.
<tr> Служит контейнером для создания строки таблицы.
Атрибут cellspacing Задает расстояние между внешними
границами ячеек. Если установлен атрибут border, толщина
границы принимается в расчет.

Атрибут cellpadding Определяет расстояние между границей

ячейки и ее содержимым. Этот атрибут добавляет пустое
пространство к ячейке, увеличивая тем самым ее размеры.

Без cellpadding текст в таблице «налипает» на рамку, снижая тем

самым его восприятие. Добавление же cellpadding позволяет
улучшить читабельность текста. При отсутствии границ особого
значения этот атрибут не имеет, но может помочь, когда
требуется установить пустой промежуток между ячейками.
Пример таблицы:
<table class="table_gor" border="0" cellpadding="5" cellspacing="0"
width="100%">
<tr>
<td style="background: #FF9314; border-bottom: solid #ccc 1px;"
align="center" width="80%"><b>столбец 1</b></td>
<td style="background: #FF9314; border-bottom: solid #ccc
1px;"><b>столбец 2</b></td>
</tr>
<tr>
<td style="background: #FF9314; border-bottom: solid #ccc 1px;">1
строка 1 столбца</td>
<td style="background: #FF9314; border-bottom: solid #ccc 1px;">1
строка 2 столбца</td>
</tr>
</table>
И сама эта таблица…
спецсимволы

&lt; - будет значить что в этом месте текста нужно

поставить знак <
спецсимвол &gt; обозначит символ >

спецсимволы начинают писаться со знака &-

амперсант этот знак указывает браузеру, что далее
будет идти имя спецсимвола и воспринимать его
следует не как текст, а как команду

Для знака & тоже есть свой спецсимвол - &amp;

спецсимволы
&nbsp; - это неразрывный пробел. Дело в том, что
когда Вы пишите текст в блокноте или html
редакторе "простых" пробелов между словами можно
поставить сколь угодно много, но вот при чтении
страницы браузером все они "удаляются" и между
словами на странице будет не более одного пробела.

тег <hr> рисует в окне горизонтальную линию, не

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

align -выравнивание с одним из трёх значений (center,

left, right) может быть применен, если задана длина
линии атрибут width в пикселях или процентах. Так
же можно задать толщину линии атрибут - size, цвет
атрибут - color, и при необходимости отключить тень
линии noshade

Другими словами – в HTML может быть реализована

масса параметров, даже если дело идет о такой
ерунде, как черта в браузере
Пример страницы html
<html>
<head>
<title>Горизонтальная линия</title>
</head>
<body>
Это просто линия по умолчанию: &lt;hr&gt;
<hr>
Это линия без тени: &lt;hr noshade &gt;
<hr noshade>
Это линия окрашенная в красный цвет: &lt;hr color="#ff0000"&gt;
<hr color="#ff0000">
Линия длиной 250 пикселей: &lt;hr width="250"&gt;
<hr width="250">
Линия длиной 250 и толщиной 5 пикселей: &lt;hr width="250"
size="5"&gt;
<hr width="250" size="5">
Линия длиной 500, толщиной 50, синяя: &lt;hr width="500" size="50"
color="#0000ff"&gt;
<hr width="500" size="50" color="#0000ff">
Примеры выравнивания:
<hr align="left" width="250" size="5">
<hr align="center" width="250" size="5">
<hr align="right" width="250" size="5">
<hr>
</body>
</html>
Чтобы создать HTML-документ, нужно сохранить его в
блокноте как файл с именем index.html
файл будет открываться любым браузером…
Только лучше не этим…
Для работы с HTML-кодом мы будем пользоваться
редактором Notepad++

скачать его можно здесь: notepad-plus-plus.org

Бегущая строка
Тег <marquee> заставляет текст помещённый в него двигаться в
том или ином направлении, проще говоря делает его бегущей
строкой. Бегущая строка имеет ряд настроек скроллинга

behavior - определяет тип скроллинга, может иметь следующие

значения:
alternate - колебательные движения от края к краю
scroll - прокручивание текста. текст будет выходить за рамки
экрана и снова появляться с противоположной его стороны
slide - прокручивание текста c остановкой.
scrollamount - скорость бегущей строки от 1 до 10.
loop задает количество прокруток бегущей строки.
Бегущая строка

direction - направление движения текста. значения:

up - вверх,
down - вниз,
left - влево,
right - вправо.
bgcolor - цвет фона бегущей строки,
height - высота строки,
width - ширина строки.
Пример бегущей строки:
<marquee loop="infinite" scrollamount="5" height="25"
bgcolor="transparent"><span style="Arial;"><span
style="color: red;"> Содержимое бегущей
строки</span></span></marquee>
список
список задаётся тегом <ul>. Любой список
состоит из элементов, "пунктов", каждый
элемент в свою очередь задаётся тегом <li>
после которого собственно и идёт текст
нужного нам "пункта". Для тега <li>
закрывающий тег </li> необязателен.
Вместе данные теги приобретают следующий
вид:
<ul>
<li> Пункт первый..
<li> Пункт второй..
<li> Пункт третий..
</ul>
Логическое форматирование текста
Тег <abbr> Выделяет в тексте аббревиатуру. Браузерами обычно
подчеркивается пунктирной линией.
Тег <acronym> Данный тег выделяет в тексте акроним.
Акроним это почти то же самое что и аббревиатура, только
образованная из начальных букв, слов или словосочетаний,
произносимая как единое слово, а не побуквенно.
Тег <address> Указывает автора документа и его адрес. Обычно
отображается курсивом. Предназначен для поисковых систем
для сбора информации об авторе, его адресе и прочей
информации.
Тег <cite> Выделяет в тексте цитату или сноску на другой
документ. Обычно браузеры отображают её курсивом.
Тег <q> Выделяет в тексте цитату. В отличие от тега <cite>
цитата обозначенная тегом <q> автоматически берётся
браузерами в кавычки.
HTML5 — новая открытая платформа, предназначенная
для создания веб-приложений использующих аудио,
видео, графику, анимацию и многое другое.
Дополнительные теги HTML5

<aside> Определяет блок сбоку от контента для размещения

рубрик, ссылок на архив, меток и другой информации. Такой
блок, как правило, называется «сайдбар» или «боковая панель».
<bdi> указывает фрагмент текста, который должен быть
изолирован от изменения направления вывода текста. Такое
поведение важно для текстов, одновременно содержащих разные
языки, читающихся слева направо и справа налево.
<canvas> Создает область, в которой при помощи JavaScript можно
рисовать разные объекты, выводить изображения,
трансформировать их и менять свойства. При помощи тега
<canvas> можно создавать рисунки, анимацию, игры и др.
<details> используется для хранения информации, которую можно
скрыть или показать по требованию пользователя. По умолчанию
содержимое тега не отображается, для изменения статуса
применяется атрибут open.
<details open="open">Текст</details>
<datalist> Создает список вариантов, которые можно выбирать при
наборе в текстовом поле. Изначально этот список скрыт и
становится доступным при получении полем фокуса или наборе
текста.
<wbr> указывает браузеру место, где допускается делать перенос
строки в тексте, если этого требует ширина родительского
элемента.
<body><p>Самое длинное слово из химии</p><p class="word">
метоксихлор <wbr> диэтиламино <wbr> метил <wbr> бутил <wbr>
амино <wbr> акридин </p></body>
Дополнительные строчные теги

<select> создает раскрывающийся список

<var> выделяет переменные в программном коде
<object> сообщает как загружать виджет-объекты не
распознаваемые браузером
Нестандартные теги (работают не во всех версиях HTML и браузеров)

<bgsound> Определяет музыкальный файл, который будет

проигрываться на веб-странице.
<blink> Устанавливает мигание текста.
<comment> Добавляет комментарий в код документа.
<multicol> Задает количество колонок, ширину и расстояние
между колонками в многоколоночном тексте.
<nobr> Уведомляет браузер отображать текст без переносов.
<noembed> предназначен для отображения информации на веб-
странице, если браузер не поддерживает работу с плагинами.
<plaintext> Отображает содержимое контейнера «как есть».
<spacer> Создает пустое пространство по вертикали или
горизонтали.
Веб-приложения размещаемые на сайте из сторонних
сервисов называются виджетами (widget) и
встраиваются с помощью embed-кода

Для embed-кода характерна определенная доля

кастомизации (customization), то есть индивидуальной
настройки. Как правило это размеры виджета, его
фоновый цвет + (в случае с особо продвинутыми
сервисами) настройки адаптивного отображения.
Для проверки HTML-оформления можно
воспользоваться сервисом
http://xhtml.ru/instr/html_editor/

Для дальнейших практических занятий вам

понадобится ваш блог в сервисе blogger.com и блог на
платформе tumblr.com

В текущем семестре мы будем оформлять текст в HTML

(1) а также верстать блог с типовым дизайном и
активным меню (2).