Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Пример html сайта: Шаблон сайта на чистом HTML. Готовый код сайта

Содержание

Примеры web-страниц на HTML — Учитель программирования.ру

Основные тегиТекстСсылкиФреймыТаблицыСпискиФормыИзображения

Пример 1. Структура документа HTML

<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY bgcolor=”teal” text=”aqua”>
Здесь расположен сам Web-документ.
<CENTER><h2><font color=”yellow”>Всем привет!</h2></CENTER></font><P>
<CENTER><font color=”red” size=4>Здравствуй, мир!</CENTER></font>
</BODY>
</HTML>

Пример 2. Структура простейших веб-страниц


<HTML>
<HEAD>
<TITLE>Поисковые системы Internet.</TITLE>
</HEAD><BODY bgcolor=”navy” text=”yellow”>
<big><i><U>Поисковые системы в Интернете</i></big></U></CENTER>
<hr color=”aqua”>
<font color=”white”>Ниже приведены некоторые популярные зарубежные
поисковые системы и отечественная система Rambler. Для поиска

информации используется окно Search, в которое вводится ключевое
слово и нажимается кнопка Search.<br></font>
Просмотрите примеры:
<a href=”altavist.HTM”>ALTAVIST.HTM</a>,
<a href=”EXCITE.HTM”>EXCITE.HTM</a>,
<a href=”YAHOO.HTM”>YAHOO.HTM</a>!
<hr color=”red”>
1.<IMG SRC=”altavist.gif”>
2.<IMG SRC=”yahoo.gif”>
3.<IMG SRC=”excite.gif”>
4.<IMG SRC=”lycos.gif”><P>
5.<IMG SRC=”infoseek.gif”>
6.<IMG SRC=”rambler.gif”><hr color=”lime”>
<tt><big><U><font color=”aqua”>Используйте поисковые системы для
поиска информации в Интернете!</tt></big></U></font>
</BODY>
</HTML>

Пример 3. Разметка веб-страницы


<HTML>
<HEAD>
<TITLE>Эхо Москвы.</TITLE>
</HEAD>
<BODY bgcolor=”purple” text=”lime” link=”yellow”>

<CENTER><u><font color=”yellow”>24 часа в сутки!</u></font><br>
Информация на любые темы!
<font color=”aqua”>Частота на УКВ 73,82 МГц или 91,2 МГц FM.<p></font>
<IMG SRC=”echomsk.gif” width=”403″ height=”263″><p>
<i><big><font color=”white”>Слушайте Эхо Москвы!
Остальное видимость!<br></i></big></font>
Адрес в Интернете:
<a href=”http://www.echo.msk.ru”>http://www.echo.msk.ru</a></CENTER>
</BODY>
</HTML>

Пример 4. Простой пример на HTML

<HTML>
<HEAD>
<TITLE>Упорядоченные и неупорядоченные списки</TITLE>
</HEAD>
<BODY BGCOLOR=”navy” text=”yellow”>
<h4><U>Неупорядоченный список</h4></U>
<UL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.

</UL>
<HR color=”lime”>
<h4><U>Упорядоченный нумерованный список</h4></U>
<OL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.
</OL>
</BODY>
</HTML>

”Пример



Списки определений


Списки определений имеют вид:

Название термина 1
Определение термина 1
Другое определение термина 1
Название термина 2
Определение термина 2
Другое определение термина 2
Название термина 3
Определение термина 3
Другое определение термина 3



Петров И.C., E-mail: [email protected]



”Пример

<HTML>
<HEAD>
<TITLE>Формы</TITLE></HEAD>
<BASE>
<BODY bgcolor=”silver”>
<FORM>
<CENTER><FONT size=6>Элементы диалога</font></center>
<HR color=”blue”>
<Н2>Элемент ISINDEX</h3>

<ISINDEX prompt=”Cтpoкa для ввода критерия поиска”>
<HR color=”blue”>
<Н2>Элементы INPUT</h3>
<h4> Ввод текстовой строки </h4>
<INPUT type=”text” size=50>
<h4> Ввод пароля </h4>
<INPUT type=”password”>
<h4> Флажки </h4>
<INPUT type=”checkbox” name=”F001″ checked>
<INPUT type=”checkbox” name=”F001″ checked>
<h4> Переключатели </h4>
<INPUT type=”radio” name=”S001″ vаluе=”Первый”>
<INPUT type=”radio” name=”S001″ value=”Второй”>
<INPUT type=”radio” name=”S001″ value=”Третий” checked>
<h4> Кнопка подтверждения ввода </h4>
<INPUT type=”submit” value=”Подтверждение”>
<h4> Кнопка с изображением </h4>
<INPUT type=”image” src=”lycos.gif”>
<h4> Кнопка очистки формы </h4>
<INPUT type=”reset” value=”0чистка”>
<h4> Файл </h4>
<INPUT type=”file” name=”photo” accept=”image/*”>
<HR color=”blue”>
<Н2>Элемент SELECT
<SELECT multiple>
<OPTION value=а>Первый
<OPTION value=Ь>Второй
<OPTION value=с>Третий
<OPTION value=d>Четвертый
</select></h3>
<HR color=”blue”>
<Н2>Элемент TEXTAREA
<TEXTAREA rows=5 cols=30>
Область для ввода текста
</textarea></h3>
<HR color=”blue”>
</FORM>
</BODY>
</HTML>

”Пример

<html>
<frameset cols=”33%,33%,*” frameborder=”2″>
<frame name=”one” src=”1.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”two” src=”2.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”three” src=”3.htm” frameborder=”2″ scrolling=”yes”>
<noframes> </noframes> </frameset>
</html>

”Пример

<html>
<frameset rows=”33%,33%,*” frameborder=”2″>

<frame name=”one” src=”1.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”two” src=”2.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”three” src=”3.htm” frameborder=”2″ scrolling=”yes”>
<noframes>
<!– For browsers that don’t support frames –>
</noframes>
</frameset>
</html>

”Пример

<html>
<frameset cols=”50%,*”, rows=”50%,*” frameborder=”2″>
<frame name=”one” src=”1.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”two” src=”2.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”three” src=”3.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”four” src=”4.htm” frameborder=”2″ scrolling=”yes”>
<noframes>
</noframes>
</frameset>
</html>

”Пример

<meta http-equiv=”refresh” content=”3; url=http://www.tigir.com”>

[spoiler title=”Пример 1. Вывод текста”]

Этот текст написан полужирным шрифтом.
Этот текст логически выделен тегом strong (может отображаться как обычный текст в некоторых браузерах или отображаться полужирным шрифтом). В некоторых браузерах действие аналогично действию тега b.
Этот текст отображается более крупным шрифтом (может отображаться обычным шрифтом в некоторых браузерах)
Этот текст логически выделен тегом em. В некоторых браузерах действие аналогично действию тега i.
Этот текст отображается курсивом.
Этот текст отображается более маленьким шрифтом.
Этот текст ниже , а этот выше уровня основного текста.


[/spoiler] [spoiler title=”Пример 2. Форматирование текста”]

<html>
<body>
<pre>
Это предварительно
отформатированный текст.
В нем сохраняются
все пробелы и пустые
строки, которые вы указали.
</pre>
<p>Тег pre хорошо использовать для отображения компьютерного кода.:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Вывод программного кода”] <html>
<body>
<code>Тег code предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера code как моноширинный текст уменьшенного размера.</code>
<br>
<kbd>Тег kbd используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере kbd моноширинным шрифтом.</kbd>
<br>
<tt>Текст, отмеченный тегом tt отображаетя моноширинным текстом. Этот тег относится к группе тегов физического форматирования.</tt>
<br>
<samp>Тег samp используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере samp с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.</samp>
<br>
<var>Тег var используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере var курсивным начертанием.</var>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Текст адреса”] <html>
<body>
<address>
Дональд Дак<br>
почтовый ящик 555<br>
Диснейленд<br>
США
</address>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Аббревиатуры”] <html>
<body>
<abbr title=”United Nations”>UN</abbr>
<br />
<acronym title=”World Wide Web”>WWW</acronym>
<p>Атрибут title используется для отображения текста, содержащегося в нем, при наведении курсора мыши на акроним или аббревиатуру.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 6. Цитаты”] <html>
<body>
Блок цитаты:
<blockquote>
Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата.
</blockquote>
<p><b>Браузер вставляет пустую строчку и отступы перед и после блока цитаты.</b></p>
Короткая цитата:
<q>Это короткая цитата</q>
<p><b>Элемент q никак не выделяется и отображается как обычный текст.</b></p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 7. Зачёркивание и подчёркивание”] <html>
<body>
<p>
Дюжина — это
<del>тринадцать</del>
<ins>двенадцать</ins>
единиц.
</p>
<p>
Большая часть браузеров перечеркивают удаленный текст и подчеркивают вставленный текст.
</p>
<p>
Старые браузеры могут отображать удаленный текст как простой текст.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 8. Параграфы”] <html>
<body>
<abbr title=”United Nations”>UN</abbr>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 9. Написание степеней и формул”] <html>
<head>
<title>Форматированиеhtml</title>
</head>
<body>
y=x<sup>2</sup>-уравнениепараболы.<br><br>
H<sub>2</sub>O-формулаводы.
</body>
</html>
[/spoiler] [spoiler title=”Пример 10. Заголовки”] <html>
<head>
<title>Форматированиеhtml</title>
</head>
<body>
<h2>Это заголовок первого уровня</h2>
<h3>Это заголовок второго уровня</h3>
<h4>Это заголовок третьего уровня</h4>
<h5″>Это заголовок четвертого уровня</h5>
<h5″>Это заголовок пятого уровня</h5>
<h6″>Это заголовок шестого уровня</h6>
Это просто текст
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Ссылка”]



Этот текст является ссылкой на примеры html.



А этот текст приведет вас на известный видеохостинг Youtube.



[/spoiler] [spoiler title=”Пример 2. Ссылка в изображении”]


Вы можете сделать изображение ссылкой:






[/spoiler] [spoiler title=”Пример 3. Открытие ссылки в новой вкладке”]

К примерам html

Если вы укажете атрибуту target значение “_blank”, ссылка откроется в новом окне браузера.



[/spoiler] [spoiler title=”Пример 4. Ссылка для отправки почты”]


Это ссылка на отправку почты:
[email protected]?subject=Привет%20тебе”>
Отправить письмо!


Внимание: Пробелы между словами должны быть заменены знаком «%20» , чтобы вы были уверены, что браузер будет правильно отображать ваш текст.



[/spoiler]

[spoiler title=”Пример 1. Несколько вертикальных фреймов”] <html>
<frameset cols=”25%,50%,25%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 2. Несколько горизонтальных фреймов”] <html>
<frameset rows=”25%,50%,25%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 3. Навигация по фреймам”] <html>
<frameset cols=”120,*”>
<frame src=”frame_contents.html”>
<frame src=”frame1.html”
name=”showframe”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 4. Iframe – построчные фреймы”] <html>
<body>
<iframe src=”examples_main.html”></iframe>
<p>Некоторые старые браузеры не поддерживают строчные фреймы.</p>
<p>В этом случае строчный фрейм не будет отображен в окне браузера.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Переход к месту во фрейме”] <html>
<frameset cols=”20%,80%”>
<frame src=”frame1.html”>
<frame src=”frame4.html#C10″>
</frameset>
</html>
[/spoiler]

[spoiler title=”Пример 1. Простая таблица”] <html>
<body>
<p>
Каждая таблица начинается с тега table.
Каждая строчка таблицы начинается с тега tr.
Каждая ячейка таблицы начинается с тега td.
</p>
<h5>Таблица из одной колонки:</h5>
<table border=”1″>
<tr>
<td>100</td>
</tr>
</table>
<h5>Одна строчка из трех колонок:</h5>
<table border=”1″>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h5>Две строчки по три колонки:</h5>
<table border=”1″>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Рамки таблицы”] <html>
<body>
<h5>Таблица с обычной рамкой:</h5>
<table border=”1″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h5>С широкой рамкой:</h5>
<table border=”8″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h5>С очень широкой рамкой:</h5>
<table border=”15″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Заголовки таблицы”] <html>
<body>
<h5>Заголовки таблицы:</h5>
<table border=”1″>
<tr>
<th>Имя</th>
<th>Телефон</th>
<th>Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h5>Вертикальные заголовки:</h5>
<table border=”1″>
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Таблица с заголовком”] <html>
<body>
<h5>
Эта таблица с широкой рамкой и названием
</h5>
<table border=”6″>
<caption>Название</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Ячейки на несколько колонок”] <html>
<body>
<h5>Ячейки состоит из двух колонок:</h5>
<table border=”1″>
<tr>
<th>Имя</th>
<th colspan=”2″>Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h5>Ячейка состоит из двух строк:</h5>
<table border=”1″>
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th rowspan=”2″>Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Простой список”] <html>
<body>
<h5>Неупорядоченный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Упорядоченный список”] <html>
<body>
<h5>Упорядоченный список:</h5>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Разные виды списков”] <html>
<body>
<h5>Значки списка в виде закрашенного круга:</h5>
<ul type=”disc”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
<h5>Значки списка в виде незакрашенного кругаCircle bullets list:</h5>
<ul type=”circle”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
<h5>Значки списка в виде закрашенного квадрата:</h5>
<ul type=”square”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Разные виды упорядоченных списков”] <html>
<body>
<h5>Нумерованный список:</h5>
<ol>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация заглавными буквами:</h5>
<ol type=”A”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация строчными буквами:</h5>
<ol type=”a”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация заглавными римскими цифрами:</h5>
<ol type=”I”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация строчными римскими цифрами:</h5>
<ol type=”i”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Вложенные списки”] <html>
<body>
<h5>Вложенный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Форма полей ввода”] <html>
<body>
<form action=””>
Имя:
<input type=”text” name=”firstname”>
<br>
Фамилия:
<input type=”text” name=”lastname”>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Форма ввода пароля”] <html>
<body>
<form action=””>
Имя пользователя (логин):
<input type=”text” name=”user”>
<br>
Пароль:
<input type=”password” name=”password”>
</form>
<p>
Помните, что когда вы вводите пароль, браузер показывает звездочки вместо символов.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Переключатель”] <html>
<body>
<form action=””>
Мужчина:
<input type=”radio” checked=”checked”
name=”Sex” value=”male”>
<br>
Женщина:
<input type=”radio”
name=”Sex” value=”female”>
</form>
<p>
Пользователь может выбрать только одно значение.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Выпадающий список”] <html>
<body>
<form action=””>
<select name=”cars”>
<option value=”volvo”>Вольво</option>
<option value=”saab”>Сааб</option>
<option value=”fiat”>Фиат</option>
<option value=”audi”>Ауди</option>
</select>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Поля ввода”] <html>
<body>
<form action=””>
<input type=”button” value=”Всем привет!”>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 6. Множественный переключатель и кнопка подтверждения”] <html>
<body>
<form name=”input” action=”html1.asp” method=”get”>
У меня есть мотоцикл:
<input type=”checkbox” name=”vehicle” value=”Bike” checked=”checked” />
<br />
У меня есть машина:
<input type=”checkbox” name=”vehicle” value=”Car” />
<br />
У меня есть аэроплан:
<input type=”checkbox” name=”vehicle” value=”Airplane” />
<br /><br />
<input type=”submit” value=”Подтвердить” />
</form>
<p>
Если вы нажмете на кпопку «Подвердить», вы отправите ваши данные на новую страницу, которая называется html1.asp.
</p>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Вывод изображений”] <html>
<body>
<p>
Вставка простого изображения:
<img src=”skype.jpeg”
width=”111″ height=”111″>
</p>
<p>
Двигающееся изображение (анимация):
<img src=”sun.gif”
width=”62″ height=”62″>
</p>
<p>
Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Фоновые изображения”] <html>
<body background=”skype.jpeg”>
<h3>Взгляните, мы вставили изображение, как фон!</h3>
<p>Можно вставлять изображения форматов gif, jpg/jpeg и png.</p>
<p>Если размеры изображения меньше страницы, оно будет повторяться пока не заполнит весь фон.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Всплывание изображений”] <html>
<body>
<p>
<img src =”skype.jpeg”
align =”left” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «left». Изображение «всплывает» влево по отношению к тексту.
</p><br /><br />
<p>
<img src =”skype.jpeg”
align =”right” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «right». Изображение «всплывает» вправо по отношению к тексту.
</p><br /><br />
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Изменения размера изображений”] <html>
<body>
<p>
<img src=”skype.jpeg”
width=”20″ height=”20″>
</p>
<p>
<img src=”skype.jpeg”
width=”45″ height=”45″>
</p>
<p>
<img src=”skype.jpeg”
width=”70″ height=”70″>
</p>
<p>
Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img.
</p>
</body>
</html>
[/spoiler]

Структура HTML-кода | Учебные курсы

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

Пример 1. Исходный код веб-страницы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h2>Заголовок</h2>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

<!DOCTYPE html>

Элемент <!DOCTYPE> (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К <!DOCTYPE> это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

<html>

Открывающий тег <html> определяет начало HTML-документа, внутри него хранится «голова» (<head>) и «тело» документа (<body>).

<head>

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента <title>. Внутри <head> могут располагаться следующие элементы: <base>, <link>, <meta>, <script>, <style> или <title>.

<meta charset="utf-8">

Элемент <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Элемент <title> определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент <title> является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в <title> быть не должно. Но допустимо добавлять разные текстовые символы, например, так: <title>Adobe™ Photoshop®</title>.

</head>

Закрывающий тег </head> показывает, что «голова» документа завершена.

<body>

«Тело» документа <body> предназначено для размещения элементов и содержимого веб-страницы.

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

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент <h2> представляет собой наиболее важный заголовок первого уровня, а элемент <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы <h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.

<!-- Комментарий -->

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Всё, что находится между этими тегами, отображаться на веб-странице не будет.

<p>Первый абзац.</p>

Элемент <p> определяет абзац текста.

<p>Второй абзац.</p>

Элемент <p> является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что «тело» документа завершено.

</html>

Последним элементом в коде всегда идёт закрывающий тег </html>.

20 самых красивых и творческих сайтов на HTML5

Новая технология HTML5 ввела множество новых и классных технологий и возможностей. С помощью которых можно создавать совершенно удивительные вещи. Так же эта технология помагает разработчикам создавать такие сайты, которые мы не видели нигде раньше.

Его мультимедийные возможности, позволяют нам сделать потрясающую анимацию с плавными переходами, а также просто вставлять музыку и видео, и делать с этими файлами практически всё.

Сегодня я представляю Вам несколько примеров таких сайтв, которые используют практически все возможности HTML5. Я уверен, что после просмотра вдохновение аж зашкалит 🙂 Наслаждайтесь.

Возможно Вам будут интересны вот эти подборки:

Интересный сайт сделанный с помощью HTML 5. Вам нужно добавить усы к видео на котором находятся разнообразные герои. Это как оказалось не очень и просто сделать 🙂

Необычный сайт. Это как бы история. Почему то этот сайт очень тесно связан с ИЕ9. Я так и не понял, возможно он продвигается с помощью этого браузера. В общем сайт очень крутой с классными историями и музыкой.

Наверное самые красивые иллюстрации на сайте Швейцарского часового. Очень красиво, просто сказочно. И естественно этот сайт сделан на самых новых технологиях HTML5 и JQuery.

Довольно необычный сайт с 3d графикой рок — певицы Бьёрк (Bjork). Красивые 3d элементы добавляют необыкновенную объёмность сайту, в общем нужно зайти и посмотреть.

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

Супер веб — сайт Джеймса Андерсона, который очень любит игру крикет, и таким образом сделал сайт — инфографику с красивой и «живой» статистикой игры.

Сайт популярных джинсов, который использует HTML5 видео, таким образом получилось всё довольно таки очень привлекательно, а главное такие сайты поддерживают абсолютно все браузеры.

Если Вы всё время мечтали научится играть на пианино, то не упустите свой шанс и попробуйте. Правда это довольно необычное пианино, но очень красивое и креативное 🙂

Наглядный пример использования Flash технологий в HTML5. Очень красиво, удобно, и конечно же очень развлекательно.

www.the-bea.st

Замечательный пример творческого сайта, который наглядно показывает все возможности HTML5. Прекрасная и качественная анимация и красивые иллюстрации.

Классный сайт на котором можно посмотреть разнообразные видео со всей планеты. И конечно же этот сайт отчётливо подчёркивает огромные возможности HTML5.

Это стильный цифровой комикс, воплощённый в жизнь с помощью HTML5. Этот сайт доставит огромное удовольствие поклонникам книги.

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

beta.theexpressiveweb.com

Классный справочник, который был создан компанией Adobe, в котором представлены разные полезности, например как CSS3 анимация и т.д.

Сайт, который показывает использование видео на сайте с помощью HTML5. Создатель видео Крис Молоко, он же и создал этот сайт со своими друзьями из Гугл.

Очень интересный пример использования видео через HTML5, это своеобразный пазл который нужно просто собрать 🙂 Попробуйте, Вам понравится.

Супер пример использования параллакса, HTML5 и JQuery в веб дизайне.

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

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

Это популярный сайт радиостанции, который использует технологии HTML5, JQuery и плавные переходы с красивой анимацией на CSS3.

Огромное спасибо speckyboy.com

Структура документа и веб-сайта — Изучение веб-разработки

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

Необходимые знания:Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

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

Заголовок (колонтитул)
Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
Навигационное меню
Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
Основное содержимое
Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!
Боковая панель
Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
Нижний колонтитул (футер)
Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

«Типичный веб-сайт» может быть структурирован примерно так:

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы. 

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?

В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их функциональности — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как «найти основную навигацию» или «найти основное содержимое». Как мы упоминали ранее в ходе курса, существует ряд последствий неиспользования правильной структуры элементов и семантики для правильной работы.

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

  • Заголовок: <header>.
  • Навигационное меню: <nav>.
  • Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
  • Боковая панель: <aside>, обычно располагается внутри <main>.
  • Нижний колонтитул: <footer>.

Активное обучение: исследование кода для нашего примера

Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Заголовок моей страницы</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    
    
  </head>

  <body>
    

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

    <nav>
      <ul>
        <li><a href="#">Домашняя страница</a></li>
        <li><a href="#">Наша команда</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>

       

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    
    <main>

      
      <article>
        <h3>Заголовок статьи</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h4>Подраздел</h4>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h4>Ещё один подраздел</h4>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      
      <aside>
        <h3>Связанные темы</h3>

        <ul>
          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
          <li><a href="#">Даже на севере Англии</a></li>
          <li><a href="#">Здесь не перестаёт дождь</a></li>
          <li><a href="#">Лаааадно...</a></li>
        </ul>
      </aside>

    </main>

    

    <footer>
      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
    </footer>

  </body>
</html>

Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут вам в этом. Мы не просим вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.

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

  • <main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице и размещайте прямо внутри <body>. В идеале он не должен быть вложен в другие элементы.
  • <article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
  • <section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
  • <aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
  • <header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings). 
  • <nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
  • <footer> представляет собой группу конечного контента для страницы.

Несемантические обёртки

Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы <div> и <span>. Вам следует использовать их с подходящим значением атрибута class или id, чтобы можно было легко получить к ним доступ.

<span> — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

<p>Пьяный Король возвратился в свою комнату в 01:00
и всё никак не мог войти в дверь: хмель мешал <span>[Примечание редактора: В этот момент
свет на сцене должен быть приглушён]</span>.</p>

В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.

<div> — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:

<div>
  <h3>Корзина</h3>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Итого: $237.89</p>
</div>

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и  <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

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

Перенос строки и горизонтальный разделитель

Два элемента, которые вы будете периодически использовать или захотите узнать о них: <br> и <hr>:

<br> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

<p>Жила-была девчушка Нелл,<br>
Любившая писать HTML:<br>
Её семантика ужасна была — <br>
Она и сама прочитать ничего не могла.</p>

Без элемента <br> абзац  разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

Жила-была девчушка Нелл,
Любившая писать HTML:
Её семантика ужасна была —
Она и сама прочитать ничего не могла.

<hr> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
<hr>
<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>

Будет выглядеть примерно так:

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

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: «Думаю, самое время вернуться к работе».

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

  1. Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
  2. Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?
  3. Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
  4. Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
  5. Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

Самостоятельная работа: создайте свою собственную карту сайта

Применить наш метод к своему сайту. О чем он будет?

Примечание: Сохраните свой код, он вам ещё понадобится.

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

  • Using HTML sections and outlines: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.

Начинаем работу с HTML + CSS

Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul>
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h2>My first styled page</h2>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы можете видеть, документ содержится между <html> и </html> тэгами. Между <head> and </head> находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе, все что находится внутри этого тэга за исключением текста между <!— и —>, являющегося комментариями, будлет выведено на экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги <li> начинают “элементы списка” (List Item). Тэг <p> является “параграфом”. А тэг <a> — “якорь” (Anchor), с помощью которого создаются гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.

  • Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
  • Элементы “h2” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги </li> и </p>, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.

Давайте предположим, что данная страница будет одной из страниц Веб сайта, состоящего из нескольких похожих страниц. Как мы и договорились, эта страница будет содержать ссылки на другие страницы нашего гипотетического сайта, уникальное содержимое и подпись.

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами <head> и </head>. Строки, которые надо добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
  2. свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
  3. и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

Список наверху HTML страницы представляет из себя навигацию по сайту. Множество сайтов имеют навигационное меню вверху страницы или по сторонам от содержимого. Наша страница тоже не будет исключением. Мы поместим меню слева, потому что это несколько привлекательнее, чем наверху.

Навигация уже на странице. Это список <ul> вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS, вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

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

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство ‘position: absolute’ говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными — те которые он уже посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

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

В HTML гиперссылки создаются тэгами <a> поэтому для указания цвета нам надо создать правило в CSS для “a”. Для того, чтобы различать посещенные и непосещенные ссылки, CSS предоставляет два “псевдо-класса” (:link и :visited). Они называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство ‘border-top’ для того чтобы добавить прерывистую линию над элементом <address> (строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

Теперь наше оформление закончено. Давайте вынесем таблицу стилей в отдельный файл, чтобы остальные файлы могли использовать ту же самую таблицу стилей, что и первый файл.

ШАГ 7: внешний CSS

Сейчас у нас есть HTML файл со встроенной таблицей стилей. Но если наш сайт будет разрастаться, возможно, нам потребуется множество страниц, использующих один и тот же стиль оформления. Есть метод получше, чем вставка таблицы в каждую страницу — мы можем вынести стили в отдельный файл, на который будут указывать все страницы.

Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню «Файл» в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из HTML в это новое окно. Не копируйте элементы разметки <style> и </style>. Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h2 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от <style> до </style> включительно и замените убранное элементом <link> как показано (строка 5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

Если вы сохраните файл и обновите его в браузере, то не должно произойти никаких изменений: страница по прежнему использует то же оформление что и в прошлый раз, но на этот раз оформление хранится во внешнем файле.

Конечный резульат

Следующий шаг — положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.

Табличная HTML верстка сайта: пример и применение

При таком типе вёрстки элементы сайта располагаются по ячейкам. Создаётся файл-шаблон с разметкой и используется как основа для всех остальных страниц. Фактически от файла к файлу меняется только основной контент. Шапка сайта, его низ и меню берутся из уже готового шаблона и обычно остаются неизменными.

Табличная вёрстка проста и во всех браузерах выглядит одинаково. Но состоящие из таблиц страницы много весят, медленно загружаются и содержат избыточный код. К тому же структура таблиц позволяет создать только строгий дизайн.

Вёрстка этого типа делается просто: в теле документа создаётся таблица (и ничего, кроме неё), в ячейки которой добавляется весь контент. Вёрстка потому и называется табличной, что вся страница состоит из таблиц, а вся выводимая информация находится внутри их ячеек. Даже область с основным содержимым страницы (например, со статьёй) — это всего лишь ячейка, текст из которой отображается на экране.

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

Теги для создания таблиц были рассмотрены в соответствующей статье. Ниже приведён пример их использования.

Итак, пример табличной вёрстки:

<!DOCTYPE html>
<html>
<head>
    <title>Табличная вёрстка</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>
</tr>
<tr>
<th>навигация</th>
<th>заголовок</th>
</tr>
<tr>
<td>
<ul>
<li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="index.html" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="index.html" title="Ссылка 3">Ссылка 3</a></li>
</ul>
</td>
<td>контент</td>
</tr>
<tr>
<td colspan=2>Низ сайта (баннеры, счетчики, информация)</td>
</tr>
</table>
</body>
</html>

Если поместить этот код в тело HTML-документа и открыть получившийся файл в браузере, то страница будет выглядеть так:

Вот и вся разметка. Для создания страниц вам остаётся только сделать копию файла и вместо отображаемых слов вставить свой контент. Так, копируя файлы и редактируя содержащийся в ячейках текст, вы можете создать сколь угодно большой веб-сайт с табличной вёрсткой.

Но взглянем на код с пояснениями.

<table border="1" cellpadding="0" cellspacing="0">
  • Тег <table> открывает таблицу.
  • Атрибут border задаёт толщину табличных рамок.
  • Cellspacing устанавливает расстояние между ячейками. В данном случае оно сделано нулевым, чтобы таблица не расползалась.
<th colspan=2>шапка сайта (логотип, слоган, телефон)</th>
  • <th> — открывающий тег ячейки заголовка таблицы. В отличие от других, текст в этой ячейке будет выровнен по центру и выделен полужирным.
  • Colspan — атрибут, значение которого определяет, сколько ячеек по горизонтали относительно других строк текущий элемент будет занимать.
  • </th> закрывает ячейку.
  • Текст между тегами <th> и </th> — это и есть содержимое ячейки, ради него всё и делалось.

</tr> — конец строки.

<th>навигация</th> <th>заголовок</th>

Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% — под основной контент.

<td>
<ul>
<li><a href="index.html" title="Ссылка 1">Ссылка 1</a></li>
<li><a href="index.html" title="Ссылка 2">Ссылка 2</a></li>
<li><a href="index.html" title="Ссылка 3">Ссылка 3</a></li>
</ul>

Вёрстка блока навигации. Создаю ячейку, занимающую 20% ширины таблицы. Внутри тегов <ul> </ul> расположен список ссылок. На его основе можно сделать меню сайта.

<tr><td colspan=2>Низ сайта (баннеры, счетчики, информация)</td></tr>

В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 делаю, чтобы низ сайта занимал по горизонтали сразу две ячейки, как шапка — эти части, в отличие от тела страницы, на блоки в моём случае делить не нужно.

Таким образом, для создания табличной вёрстки сайта, содержащего все основные элементы (шапку, низ, меню, контент страницы) понадобилась таблица, состоящая из четырёх строк и шести ячеек (строки головы и ног сайта содержат по одному элементу).

На современных сайтах практикуется блочная верстка, а таблицы уже вчерашний день.

Полезные ссылки:

Правильный «скелет» HTML-страницы для сайта, пример по стандарту HTML5

Структура HTML-документа определяет базовый «скелет» для будущего сайта, вариацию которого мы рассмотрим в данном материале. Код выполнен по стандарту HTML5 и кратко изложены основные тезисы элементов. Он подойдет как для начинающего верстальщика в целях разобраться, что собой представляет каркас страницы, так и профессионального вебмастера в качестве быстро используемого шаблона в своих работах.

Шаблон «скелета» HTML-страницы

Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:

<!DOCTYPE HTML>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
    <meta name="description" content="Описание страницы" />
    
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
    <link rel="icon" href="/img/favicon.png">
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      Шапка
      <nav>
        Навигация
      </nav>
    </header>

    <main>
      <section>
        <h2>Заголовок страницы</h2>
        Основная часть
      </section>
    </main>

    <aside>
      Боковая колонка (сайдбар)
    </aside>

    <footer>
      Подвал
    </footer>
  </body>
</html>

В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:

Теги и атрибуты

Разберем основные теги и атрибуты, примененные в примере:

  • <!DOCTYPE HTML> – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
  • <html lang=”ru”> – контейнер для всего содержимого страницы с указанием принадлежности сайта к конкретному языку.
  • <head> – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
    • <meta charset=”UTF-8″> – кодировка сайта.
    • <title> – название страницы. Придерживайтесь правильного заполнения тега Title.
    • <meta name=”description” content=”” /> – мета-описание документа. Опять же, существуют некоторые правила грамотного заполнения метаданных.
    • <link rel=”stylesheet” type=”text/css” href=”” /> – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
    • <link rel=”icon” href=””> – иконка сайта, отображаемая в браузере.
    • <script type=”text/javascript” src=””> – подключение внешней библиотеки JQuery последней версии.
    • <!–[if lt IE 9]><script src=””> – условие, при котором посетитель, зашедший с браузера Internet Explorer 9, получит поддержку новым тегам, описанным в HTML5.
  • <body> – тело документа, включающее теги, атрибуты, текст и изображения. Отображается в браузере.
    • <header> – шапка сайта.
    • <nav> – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.
    • <main> – основной контент документа.
    • <section> – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.
    • <h2> – заголовок страницы.
    • <aside> – боковая колонка, также именуемая как «сайдбар».
    • <footer> – подвал сайта.

Старайтесь верстать «чистый» код, без дополнительного мусора. Спасибо за внимание.