#Education.Sololearn.HTML

1.Введение:

1.1.Что такое HTML.

Аббревиатура HTML означает «HyperText Markup Language», или «язык гипертекстовой разметки».

В отличие от языков программирования (в т.ч. скриптовых), в которых с помощью сценариев программируются функции,

в языке разметки с помощью тегов программируется контент (содержимое)

Пример HTML-тега:

<p>Абзац текста </p>

Структура веб-страницы.

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

Веб-дизайн сегодня

HTML - структура,

CSS - оформление,

JavaScript - поведение.

PHP и похожие языки - серверная часть

CMS - управление контентом.

2.Структура простого HTML-документа.

Тег <html>

Хотя за годы существования HTML появилось много версий языка, основные его принципы остаются неизменными.

Структуру HTML-документа удобно рассмотреть на примере бутерброда. Подобно тому как бутерброд часто имеет два кусочка хлеба, у HTML-документа есть два тега: открывающий и закрывающий.

Между этими тегами, как начинка бутерброда между кусочками хлеба, помещается весь остальной код.

<html>

…

</html>

Тег <head>

За открывающим тегом следует заголовок документа, который определяется открывающими и закрывающими тегами head.

Заголовок (<head>) содержит все невизуальные элементы HTML-документа, которые управляют отображением страницы.

<html>

</html>

Тег <body>

За тегом заголовка head следует тег тела документа body.

В теге body заключаются все элементы, отвечающие за визуальное и структурное оформление документа.

Заголовки, параграфы, списки, цитаты, изображения, ссылки — это лишь некоторые элементы, которые могут помещаться между тегами body.

Структура простого HTML-документа:

<html>

<head>

</head>

<body>

</body>

</html>

1.3.Создаем первую HTML-страницу.

HTML - файл

HTML - файлы - обычные текстовые файлы, поэтому Вы можете создать свою первую веб-страницу в любом

текстовом редакторе

Существует множество хороших HTML - редакторов - выберите тот, который Вам больше по душе. Сейчас же давайте работать в

Notepad

HTML - файл

В текстовом редакторе давайте составим HTML - документ с простейшей структурой и добавим «Некоторый текст» в тело документа.

<html>

<head>

</head>

<body>

Некоторый текст.

</body>

</html

К примеру, наш файл мы назвали first.html.

Если файл открыть с помощью браузера, Вы увидите текст.

Тег <title>

Чтобы поместить заголовок страницы на вкладку браузера, нужно в блок документа head добавить элемент <title>:

<html>

<head>

<title>Первая страница</title>

</head>

<body>

Некоторый текст.

</body>

</html>

2.ОСНОВЫ HTML.

2.1.Параграфы.

Элемент <p>

Создать отдельный параграф текста очень просто: нужно всего лишь добавить открывающий и закрывающий теги <p> и </p>.

Браузеры автоматически добавят пустую строку перед параграфом и после него.

Перенос строки

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

Тег <br/> называют пустым HTML-элементом. Он не требует закрывающего тега.

Пример кода §2.1.

<html>

<head>

<title>Первая страница</title>

</head>

<body>

<p>Позволяет определить параграф

.</p>

<p>Ещё один параграф текста.</p>

<p>Здесь

<br/> добовляет перенос строки.

</p>

</body>

</html>

§2.2.Форматирование текста.

Элементы форматирования

В HTML используется ряд элементов для определения стиля текста.

Элементы форматирования были созданы для отображения разных стилей текста

Браузеры отображают <strong> как <b> и <em> как <i>.

Тем не менее, эти теги имеют различные функции: <b> и <i> обозначают текст жирным шрифтом и курсивом соответственно, тогда как <strong> и <em> указывают на важность текста.

Пример кода §2.2.

<html>

<head>

<title>Первая страница</title>

</head>

<body>

<p>Обычный текст</p>

<p>

<b>Текст жирным шрифтом

</b></p>

<p>

<big>Текст крупным шрифтом

</big></p>

<p>

<i>Текст курсивом

</i></p>

<p>

<small>Текст мелким шрифтом

</small></p>

<p>

<strong>Важный текст

</strong></p>

<p>

<sub>Подстрочный текст

</sub></p>

<p>

<sup>Надстрочный текст

</sup></p>

<p>

<ins>Вставленный текст(подчерк)

</ins></p>

<p>

<del>Удаленный текст(перечерк)

</del></p>

</body>

</html

Все эти теги, позволяют определить

измененный текст

в HTML-документе.

§2.3.Заголовки, линии, комментарии.

Заголовки в HTML - документе

В HTML используется 6 уровней заголовков, которые организованы по уровню важности:

<h1>, <h2>, <h3>, <h4>, <h5> и <h6>.

В нижеприведённом коде использованы все 6 заголовков.

Горизонтальные линии

Чтобы добавить в документ горизонтальную линию, используется тег <hr />.

Комментарии

Комментарии браузером не отображаются, но они помогают в составлении документа и дают возможность добавлять описания, делать заметки, напоминания и прочее.

Пример кода §2.3.

<html>

<head>

<title>Первая страница</title>

</head>

<body>

<h1>Заголовок 1-Самый большой</h1>

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

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

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

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

<h6>Заголовок 6-самый мелкий</h6>

<p>Параграф текста.</p>

<p>Параграф текста.</p>

</body>

</html>

Заголовки HTML-документа: h1 - самый крупный, h6 - самый маленький.

Комментария в окне браузера не видно.

В открывающем теге ставится восклицательный знак (!), а в закрывающем теге нет.

§2.4.Проект блога:Обо мне.

Пример кода §2.4.

§2.5.Элементы.

HTML - элементы

HTML - элементы - это строительные блоки любого HTML-документа.

HTML - элемент состоит из открывающего и закрывающего тегов, которые обрамляют его содержимое.

HTML - документ может состоять из вложенных друг в друга HTML-элементов. В приведённом ниже примере элемент <body> включает в себя теги <p>, тег <br /> и содержимое «Параграф текста».

Некоторые элементы очень короткие. Так как нельзя поместить содержимое внутрь тега переноса строки и так как нет открывающего и закрывающего тега переноса строки, то тег <br /> можно считать единым элементом.

Можно также сказать, что в языке HTML сценарии пишутся с помощью элементов внутри элементов.

Некоторые HTML-элементы (например, тег <br />) не требуют закрывающих тегов.

Пример кода §2.5.

<html>

<head>

<title>Первая страница</title>

</head>

<body>

<p>Параграф текста.</p>

<p>Здесь <br/>перенос строки.</p>

</body>

</html>

§2.6.Атрибуты.

Атрибуты содержат

дополнительную

информацию

об элементе или теге, а также изменяют их. Большинство атрибутов имеют значения; значение

изменяет

атрибут.

Этот текст выровнен по центру

</p>

В этом примере значение атрибута "center" указывает на то, что содержание элемента р должно быть выровнено по центру.

Атрибуты всегда пишутся в открывающем теге и имеют следующую парную структуру: name="value".

Единицы измерений в атрибутах

В качестве примера, давайте добавим в HTML-документ горизонтальную линию шириной в 50 пикселей.

Для этого нам понадобится атрибут ширины(width).

Ширина элемента также может быть определена в процентах:

Атрибут выравнивания

Атрибут выравнивания указывает на то, как текст будет выровнен в документе.

В приведённом ниже примере параграф текста будет выровнен по центру веб-страницы, а строка - по её правому краю.

<html>

<head>

<title>Атрибуты</title>

</head>

<body>

<p align="center">Параграф текста.<br />

<p align="right" />Строка текста.

</p>

</body>

</html>

Возможно, Вас мучает вопрос: а что, если применить противоречивые атрибуты в одном и том же элементе?

Некоторый текст.

</p>

Текст будет посередине, черта слева.

§2.7.Изображения.

Тег <img>

Тег <img> используется для вставки изображения. Он содержит только атрибуты и не требует закрывающего тега.

Ссылка на изображение (веб-адрес) добавляется с помощью атрибута src.

Синтаксис для добавления изображения выглядит следующим образом:

img - позволяет добавить графическое изображение.

Местоположение изображения.

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

Если у Вас, к примеру, фотография с названием "tree.jpg", которая находится в одной папке с HTML-файлом, код будет выглядеть следующим образом:

<html>

<head>

<title>Первая страница</title>

</head>

<body>

</body>

</html>

В случае, если изображение не может быть отображено, атрибут alt в качестве альтернативы должен содержать текст со словесным описанием изображения. Атрибут alt

обязателен

Изменение размера изображения

Для указания размера изображения используются атрибуты width и height.

Размер может быть указан в пикселях или процентах:

<html>

<head>

<title>Первая страница</title>

</head>

<body>

</body>

</html>

Загрузка изображений требует времени. Помните: использование изображений больших размеров может значительно замедлить загрузку Вашей страницы!

Рамка вокруг изображения

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

По умолчанию, если не задан атрибут border, Internet Explorer 9 и его предыдущие версии все-таки будут отображать рамку вокруг изображения.

Пример кода §2.7.

§2.8.Ссылки

Тег <a>

Ссылки — важные кирпичики любой веб-страницы. Вы можете прикрепить ссылки к тексту или изображению, чтобы пользователь при нажатии на них был перенаправлен на другую веб-страницу (или к другому файлу).

В синтаксисе HTML ссылки обозначаются с помощью тега <a>.

Атрибут href служит для указания самого адреса ссылки:

Чтобы сделать изображение ссылкой на другой документ, просто вставьте тег <img> в теги <a>.

Ваша первая ссылка

В примере внизу код содержит ссылку на сайт SoloLearn:

<a href="

http://www.sololearn.com

">Учиться надо весело</a>

При отображении в браузере текст «Учиться надо весело» будет представлен как ссылка:

Учиться надо весело

Нажав на «Учиться надо весело», Вы перейдёте на сайт

www.sololearn.com

Ссылки бывают абсолютными и относительными.

Атрибут target

Атрибут target указывает, где нужно открыть привязанный документ.

Задав атрибуту значение _blank, ссылка будет открываться в новом окне или новой вкладке:

<a href="

http://www.sololearn.com

" target="_blank">

Учиться надо весело

</a>

Посещенная ссылка выделена фиолетовым цветом и подчеркнута.

Пример кода §2.8.

§2.9.Создаем списки.

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

Нумерованный список начинается с тега <ol>, а каждый пункт указывается с помощью тега <li>.

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

Ненумерованный список начинается с тега <ul>.

(Пример кода пункт .... . В примере кода.

Пример кода §2.9.

<html>

<head>

<title>Первая страница</title>

</head>

<body>

<li>Красный</li>

<li>Синий</li>

<li>Зеленый</li>

</ol> или </ul>

</body>

</html>

<ol>

- Пункты списка будут автоматически пронумерованы.

<ul>

- Каждый пункт списка будет отмечен маркером

§2.10.Поект Блога. Мои навыки.

Пример кода §2.10.

§2.11.Таблицы.

Для добавления таблиц используется тег <table>.

Таблицы разделяются на строки при помощи тега <tr> (от англ. table row, или «строка таблицы»).

Строки таблицы разделяются на столбцы при помощи тега <td> (от англ. table data, или «данные таблицы»).

Ниже пример таблицы с одной строкой и тремя столбцами:

<table>

<tr>

</tr>

</table>

Теги <td> выступают в качестве контейнеров для содержимого таблицы.

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

Атрибуты border и colspan

С помощью атрибута border можно заключить таблицу в рамку:

Ячейка таблицы может охватывать два или более столбца:

<tr>

<td>Красный</td>

<td>Синий</td>

<td>Зеленый</td>

</tr>

<tr>

</tr>

</table>

Атрибут border не поддерживается в HTML5.

Пример кода §2.11.

§2.12.

Пример кода §2.12.

§2.13.

Пример кода §2.13.

СЛОВАРЬ HTML-ТЕГОВ

<p> - позволяет определить параграф.

<html> - корневой элемент HTML-документа.

<head> - Содержит информацию о HTML-документе: метаданные, сценарии и прочее.

<body> - Содержит тело HTML-документа.

<title> (in <head>) - содержит название HTML-документа.

<ol> - содержит нумерованный список

<ul> - содержит ненумерованный список

<table> - позволяет добавить таблицу

<tr> - позволяет определить строку таблицы

<td> - позволяет определить ячейку таблицы

<a> - позволяет добавить гиперссылку