Страница 1
|
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Название сайта</title>
</head>
<body>
<table
border="1"
align="center"
rules="rows"
>
<tr>
<td>
<!--ШАПКА САЙТА-->
<table
border="1"
background="images/168.png"
bgcolor="#7FFFD4"
cellpadding="10"
>
<tr>
<th>
<h2>Название сайта (организации)</h2>
<h4>Описание сайта</h4>
</th>
</tr>
</table>
<!--ОСНОВНОЙ КОНТЕНТ-->
<table
border="1"
bgcolor="#e6e6fa"
cellpadding="10"
>
<tr>
<td
rowspan="2"
>
<h3>Страница 1</h3>
<p>
Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.</p>
<p>Почему я решил его сделать?
За те 3 месяца, пока разбирался в
сайтостроении и создавал этот ресурс обнаружилось,
что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание
А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали больше всего
времени.</p>
</td>
<!--САЙДБАР-->
<td bgcolor="#e6e6fa">
<h4>Меню</h4>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span>Страница</span></a>
</p>
<p>
<a href="">
<img src="http://trueimages. ru/img/00/06/f4fffdb5.png">
<span>Cтраница 1</span;></a>
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span>Страница 2</span></a>
</p>
</td>
</tr>
<tr>
<td
bgcolor="#e6e6fa"
align="center">
<h4>Дополнительная информация</h4>
<p>Текст дополнительной информации</p>
</td>
</tr>
</table>
<!--ПОДВАЛ-->
<table
border="1"
bgcolor="#7FFFD4"
cellpadding="10"
>
<tr>
<th>
<h4>Подвал</h4>
</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
ru/img/00/06/f4fffdb5.png">
<span>Cтраница 1</span;></a>
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span>Страница 2</span></a>
</p>
</td>
</tr>
<tr>
<td
bgcolor="#e6e6fa"
align="center">
<h4>Дополнительная информация</h4>
<p>Текст дополнительной информации</p>
</td>
</tr>
</table>
<!--ПОДВАЛ-->
<table
border="1"
bgcolor="#7FFFD4"
cellpadding="10"
>
<tr>
<th>
<h4>Подвал</h4>
</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Добавьте в закладки постоянную ссылку.Простой пример HTML документа — Учебник по основам HTML
Как устроен HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h2>Привет!</h2>
<P> Это простейший пример HTML-документа. </P>
<P> Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе. </P>
</body>
</html>
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах.
Поэтому наш пример вполне мог бы выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<h2>Привет!</h2>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается «тэг»).
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/».
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки
<html> … </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> … </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<title> … </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> … </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<h2> … </h2> — <H6> … </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> … </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:
<h2 ALIGN=CENTER>Выравнивание заголовка по центру</h2>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
Подытожим все, что мы знаем, с помощью примера 2:
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<h2 ALIGN=CENTER>Привет!</h2>
<h3>Это чуть более сложный пример HTML-документа</h3>
<P ALIGN=CENTER>но и по центру</P>
<P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца.
В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
Учебник HTML 5. Статья «Создание первой страницы»
В этом учебнике для создания HTML файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.
Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows
, вы можете впоследствии выбрать, что вам ближе. Рассмотрим, как вы будете создавать свой первый HTML файл с использованием программы Notepad++.Шаг 1: Откройте текстовый редактор
Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.
Перед Вами откроется основное окно программы:
Рис. 2 Текстовый редактор Notepad++.Шаг 2: Напишите несколько HTML тегов
Запишите в редактор следующий HTML код:
<!DOCTYPE html> <!-- декларация сообщает, что в этом документе используется пятая версия HTML --> <html> <!-- корневой элемент HTML документа (все остальные элементы должны быть его потомками) --> <head> <title>Моя первая страница</title> <!-- обеспечивает название для документа --> </head> <body> <!-- описывает видимое содержимое страницы --> <h3> Это заголовок </h3> <!-- описывает заголовок второго уровня --> <p>Это параграф.</p> <!-- определяет параграф (абзац) --> </body> </html> <!--закрывающий элемент (после него не должно быть каких-либо элементов) -->
Давайте разберем по частям, что мы сделали в этом примере:
- Объявили декларацию <!DOCTYPE html>, которая определяет тип документа и сообщает браузеру, что необходимо интерпретировать код на языке HTML 5.
- Добавили элементы <html> и </html>, которые определяют границы нашего HTML кода. Обращаю Ваше внимание, что после закрывающего тега </html> не должно быть никаких элементов.
- В заголовочной части (от слова голова) нашего документа (между тегами <head> и </head>) мы разместили элементы <title> и </title>, которые определяют наименование нашей страницы — «Моя первая страница». Наименование страницы, которое вы указали отображается на вкладке любого браузера.
- В теле нашей страницы, элементы <body> и </body> мы разместили заголовок второго уровня (<h3>) и абзац (<p>). Еще раз обращаю Ваше внимание, что видимое содержимое страницы помещается между тегами <body> и </body>.
В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом.
В HTML для создания комментариев в вашем коде используется специальный тег <!— .
.. —>, текст внутри такого элемента не отображается браузером. Подробно использование комментариев мы рассмотрим далее в учебнике в статье «Комментарии и якоря».
Код HTML нашего примера в редакторе Notepad++:
Рис. 3 Пример создания HTML документа.Шаг 3: Сохраните HTML страницу
Чтобы сохранить файл на вашем компьютере как HTML документ выберите в редакторе Файл > Сохранить как (либо сочетание Ctrl-Alt-S).
Вы можете не искать в списке тип файла, а сразу указать название файла с разрешением html. Назовите файл «index.html» и файл автоматически сохранится как HTML документ в кодировке UTF-8.
Допускается выбрать любое понравившееся вам имя документа, на данном этапе обучения это не имеет значения. Справочно: заглавные страницы сайтов, как правило, называют index.*. Это связано с тем, что отсутствует необходимость изменять конфигурацию файла веб-сервера, установленную по умолчанию.
После того как Вы сохранили ваш текстовый документ как HTML файл, редактор начинает выделять весь HTML код цветом (визуализация кода) — это одно из основных достоиноств текстовых редакторов
Окно сохранения в редакторе Notepad++:
Рис.
4 Сохранение текстового файла как HTML документ.Шаг 4: Просмотр HTML страницы в браузере
Откройте Ваш сохраненный файл в браузере, результат должен выглядеть следующим образом:
Рис. 5 Пример отображения HTML документа в браузере.Если у вас некорректно отображается содержимое страницы, попробуйте изменить настройки кодировки Вашего браузера, необходимо указать, чтобы браузер проводил автоматически определение кодировки.
При создании собственного сайта в заголовочной части страницы необходимо обязательно указывать кодировку символов для текущего документа (подробнее об этом вы узнаете в конце учебника в статье «Метаданные в HTML»).
Изменение настройки кодировки в браузере Chrome:
Рис. 6 Пример настройки кодировки в браузере Chrome.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив с текстовым файлом:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 1.
Подсказка: используйте для первого заголовка на странице, тег заголовка первого уровня.
Обращаю Ваше внимание, что готовые практические примеры будут доступны для открытия в новом окне, но старайтесь выполнять их самостоятельно. Подглядеть код готовой страницы можно, используя инструменты разработчика, как правило, в любом браузере достаточно кликнуть правой кнопкой по странице и нажать на просмотр кода страницы, либо элемента:
Фрагмент страницы примера в инструментах разрабочика браузера Chrome.Кодировка
HTML | Коды символов и символы HTML
Все коды символов HTML текстовых шрифтов и символов из & # 0; на & # 65535; .
Нажмите на символ, чтобы получить HTML-код:
* Проверьте, поддерживается ли символ в браузере Android.
Специальные коды HTML
| Char | Цифровой код | Наименование код | Описание |
|---|---|---|---|
| & # 09; | горизонтальный язычок | ||
| & # 10; | перевод строки | ||
| & # 13; | возврат каретки / введите | ||
| & # 160; | & nbsp; | неразрывное пространство |
Обычные коды символов HTML
| Char | Цифровой код | Наименование код | Описание |
|---|---|---|---|
| & # 32; | площадь | ||
| ! | & # 33; | восклицательный знак | |
| « | & # 34; | & quot; | двойная кавычка |
| # | & # 35; | номер | |
| $ | & # 36; | доллар | |
| % | & # 37; | процентов | |
| и | & # 38; | & amp; | амперсанд |
| ‘ | & # 39; | & apos; | одинарная цитата |
| ( | & # 40; | левая скобка | |
| ) | & # 41; | правая скобка | |
| * | & # 42; | звездочка | |
| + | & # 43; | плюс | |
| , | & # 44; | запятая | |
| – | & # 45; | минус | |
. | & # 46; | период | |
| / | & # 47; | слэш | |
| 0 | & # 48; | ноль | |
| 1 | & # 49; | одна | |
| 2 | & # 50; | два | |
| 3 | & # 51; | три | |
| 4 | & # 52; | четыре | |
| 5 | & # 53; | пять | |
| 6 | & # 54; | шесть | |
| 7 | & # 55; | семь | |
| 8 | & # 56; | восемь | |
| 9 | & # 57; | девять | |
| : | & # 58; | толстой кишки | |
| ; | & # 59; | точка с запятой | |
| < | & # 60; | & lt; | менее |
| = | & # 61; | знак равенства | |
| > | & # 62; | & gt; | больше |
| ? | & # 63; | вопросительный знак | |
| @ | & # 64; | у знака | |
| А | & # 65; | ||
| B | & # 66; | ||
| С | & # 67; | ||
| Д | & # 68; | ||
| E | & # 69; | ||
| F | & # 70; | ||
| G | & # 71; |
HTML 5. 2: 4.10. Формы
2: 4.10. Формы 4.10. Формы
4.10.1. Введение
Этот раздел не является нормативным.
Форма — это компонент веб-страницы, который имеет элементы управления формой, такие как текстовые поля, кнопки, флажки, элементы управления диапазоном или палитры цветов. Пользователь может взаимодействовать с такой формой, предоставляя данные которые затем могут быть отправлены на сервер для дальнейшей обработки (например, для возврата результатов поиска или расчет). Во многих случаях сценарии на стороне клиента не требуются, хотя API доступен, поэтому что скрипты могут улучшить взаимодействие с пользователем или использовать формы для других целей, кроме отправки данных к серверу.
Написание формы состоит из нескольких шагов, которые можно выполнять в любом порядке: запись пользователя
интерфейс, реализация обработки на стороне сервера и настройка пользовательского интерфейса для
общаться с сервером.
4.10.1.1. Написание пользовательского интерфейса формы
Этот раздел не является нормативным.
Для целей этого краткого введения мы создадим форму заказа пиццы.
Любая форма начинается с элемента form , внутри которого размещаются элементы управления.Наиболее
элементы управления представлены входным элементом , который по умолчанию предоставляет однострочный
текстовое поле. Для маркировки элемента управления используется элемент label ; текст метки и
Сам элемент управления находится внутри метки элемента . Каждая область в форме обычно представлена
используя элемент div . Собирая все вместе, можно спросить имя клиента:
<форма>
Чтобы позволить пользователю выбирать размер пиццы, мы можем использовать набор переключателей.Радио-кнопки
также используйте элемент input , на этот раз с атрибутом типа со значением radio .
Чтобы переключатели работали как группа, они
дано общее имя с использованием атрибута name . Чтобы сгруппировать партию
элементов управления вместе, таких как, в данном случае, переключатели, можно использовать элемент fieldset . Название такой группы элементов управления дается первым элементом
в наборе полей , который должен быть элементом легенды .
<форма>
Изменения по сравнению с предыдущим шагом выделяются.
Для сбора начинки мы можем использовать флажки. В них используется входной элемент с атрибутом типа со значением флажок :
<форма>
Пиццерия, для которой пишется эта форма, всегда ошибается, поэтому ей нужен способ
связаться с заказчиком.
Для этого мы можем использовать элементы управления формы специально для телефона.
номера ( вводит элементы с их атрибутом типа , установленным на тел. ) и адреса электронной почты
( вводит элементов с их атрибутом типа , установленным на электронная почта ):
<форма>
Мы можем использовать элемент input с его атрибутом type , установленным на time , чтобы запросить время доставки.
Многие
у этих элементов управления формы есть атрибуты, позволяющие точно контролировать, какие значения могут быть указаны; в этом
В этом случае особый интерес представляют три атрибута: мин. , макс. и этап . Они устанавливают
минимальное время, максимальное время и интервал между допустимыми значениями (в секундах). Этот
пиццерия работает только с 11:00 до 21:00 и не обещает ничего лучше 15 минут.
приращения, которые мы можем разметить следующим образом:
<форма>