Файл: Разработка сайта по интересам.pdf

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

Теги, размещаемые в заголовке, представлены в таблице 1

Таблица 1.

Тег	Атрибут и значение атрибута	Пояснение
<TITLE> </TITLE >		Внешний заголовок документа (титул), будет отображаться в заголовке окна браузера.
<META>		Представление дополнительной информации о документе
	Name="author" \| "keywords"	Определяет тип данных, например: автор или ключевые слова (для поисковых программ)
	Content="имя автора" \| "слово 1, слово 2…."	Содержание, например: имя автора или перечень ключевых слов.
<BASE>		Используется для разрешения относительных ссылок. Особенно полезна например, при переносе страницы в другой каталог.
	HREF="http://www.cpb.cpbgpu.edu/html"	Задаёт полный URL-адрес документа, аналогично заданию пути к файлу в команде DOS path.
<STYLE> </STYLE>		Определяет стиль страницы.
	Type="text/css"	Указывается, чтобы браузеры, не поддерживающие таблицы стилей, могли игнорировать этот тэг.
<LINK> </LINK>		Используется для создания связей между документами
	Rel="stylesheet"	Связываемый файл является таблицей стилей.
	Type="text/css"	Формат файла текстовый, а расширение *.css.
	Href="my.css"	Адрес файла с указанием пути.
<ISINDEX>		Используется для сообщения браузеру о том, что сервером поддерживается индексный поиск. В ответ на это браузер создаёт поле для ввода текста, по которому будет произведён поиск. Если вы не уверены, что на вашем сервере есть программы поиска, лучше этот тэг не использовать.
	Action="switch.exe"	Указывает программу поиска, которой передаётся введённая строка текста.
	Prompt="Подсказка"	Определяет подсказку, которая выводится вместо подсказки по умолчанию.

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

Таблица 2. Тэги для построения таблиц

Тэг	Пояснение
<TABLE> </TABLE >	Тэг-контейнер, в котором размещается содержимое таблицы.
<TR> </TR>	Тэг-контейнер, в который помещаются ячейки с их содержимым. Количество ячеек равно, в общем случае, количеству столбцов.
<TH> </TH>	Тэг-контейнер, который используется для описания ячеек с заголовком столбцов (строк) таблицы. Заголовок столбцов таблицы будет располагаться в первой строке, а заголовок строк – в левом столбце. Текст отображается полужирным шрифтом по центру ячейки.
<TD> </TD>	Тэг-контейнер, который используется для описания содержимого ячеек таблицы.
<CAPTION> </CAPTION>	Тэг-контейнер, в котором размещается заголовок (название) таблицы.

7. Инструменты программирования сайта

сайт гипертекстовый браузер заказ

Для создания нашего сайта был использован Notepad. Notepad прекрасно подходит для создания кода, поскольку никак не влияет на то, что мы пишем. Это даёт полный контроль над текстом. При использовании Notepad или иного простого текстового редактора только вы отвечаете за то, что написано.

Преимущества текстового редактора Notepad:

• Этот текстовой редактор предоставляется абсолютно бесплатно;

• Есть возможность отмены действия. Допустим: Вы исправили код, а он выдает ошибку. Вы не помните, что было до этого. Чтобы вернуть в обратное положение, Вам достаточно нажать "Правка"-"Отмена" или CTRL+Z до тех пор, пока Вас не устроит состояние заданного;

• Можете одновременно работать с другими файлами, что очень удобно;

• Присутствует подсветка синтаксиса (каждый вид элемента окрашен в свой цвет, так же можно кликнуть по открывающему тегу, в результате программа предоставит Вам закрывающий тег);

• Поддержка плагинов;

• Это основные достоинства. Прочие возможности и удобства узнаете в процессе работы.

Ниже приведен пример кодировки с помощью Notepad (рис. 10).

Рис. 10. Кодировка раздела

8.Заключение

HTML (HyperText Markup Language, язык гипертекстовой разметки) – специальные инструкции браузеру, с помощью которых создаются Веб-страницы.

Т.е. Web-страницы – это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (т.е. придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением.htm или.html.

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

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

"Вид" – "В виде HTML".

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

Что такое Веб-страница? По сути дела – это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в скобки). Т.е., исходя из вышеизложенного, Веб-страницы можно набрать в любом текстовом редакторе (Блокнот, WordPad, Word и т.д.). В этом случае абсолютно все надо набирать своими ручками. Основной плюс такого метода – код получается абсолютно минимизированным, т.е. "вес" такой html-страницы будет минимальным. К недостаткам следует отнести тот факт, что пользователь должен очень хорошо знать язык html-разметки, да и результаты своего труда нельзя будет сразу посмотреть. Поэтому таким методом создания Вэб-страниц практически никто не пользуется. Порекомендовать его можно разве что для создания простеньких Вэб-страничек если нет возможности использования специализированных программ.

9.Список литературы

Методические указания по языку HTML
Б.Лоусон, Р.Шарп. Изучаем HTML5. 2011г.
Брайан Хоган. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2012г.
Мэтью Мак-Дональд. HTML5. Недостающее руководство 2010г.
Бен Фрейн. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2014г.
http://htmlbook.ru/samhtml/vvedenie-v-html
http://zvirec.com/html_book.php
http://www.spb.prodaga-kofe.ru/
http://www.coffeelb.ru/
https://1coffee.ru/

10.Приложение

<head>

<title>Темная Кофейня</title>

</head>

<body>

<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>

</div>

<ul>

<li id="button1"><a href="главная.html" title="">Главная</a></li>

<li id="button2"><a href="история.html" title="">История кофе</a></li>

<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>

<li id="button5"><a href="заказать.html" title="">Заказать</a></li>

</ul>

</div>

</div>

<h3>Навигация</h3>

<ul>

<li><a href="главная.html"> На главную </a></li>

<li><li><a href="javascript:history.back();">Назад</a></li></li>

</ul>

</div>

</body>

</html>

Код страницы "История кофе"

<head>

<title>Темная Кофейня – История кофе</title>

</head>

<body>

<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>

</div>

<ul>

<li id="button1"><a href="главная.html" title="">Главная</a></li>

<li id="button2"><a href="история.html" title="">История кофе</a></li>

<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>

<li id="button5"><a href="заказать.html" title="">Заказать</a></li>

</ul>

</div>

<h4>История кофе</h4>

</div>

<h3>Навигация</h3>

<ul>

<li><a href="главная.html"> На главную </a></li>

<li><a href="javascript:history.back();">Назад</a></li>

</ul>

</div>

</body>

</html>

Код страницы "Сорта кофе"

<head>

<title>Темная Кофейня – Сорта кофе</title>

</head>

<body>

<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>

</div>

<ul>

<li id="button1"><a href="главная.html" title="">Главная</a></li>

<li id="button2"><a href="история.html" title="">История кофе</a></li>

<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>

<li id="button5"><a href="заказать.html" title="">Заказать</a></li>

</ul>

</div>

<h4>Сорта кофе</h4>

<br>

<br>

</div>

<h3>Навигация</h3>

<ul>

<li><a href="главная.html"> На главную </a></li>

<li><a href="javascript:history.back();">Назад</a></li>

</ul>

</div>

</body>

</html>

Код страницы "Цены"

<head>

<title>Темная Кофейня – Прайс лист</title>

</head>

<body>

<marquee behavior="alternate" scrollamount="10" style="color: #d79d41; font-size: 40px; font-weight: bolder; line-height: 150%">Горяченький русиано в Ваш дом!</marquee>

</div>

<ul>

<li id="button1"><a href="главная.html" title="">Главная</a></li>

<li id="button2"><a href="история.html" title="">История кофе</a></li>

<li id="button3"><a href="сортакофе.html" title="">Сорта кофе</a></li>