Введение
В данной работе описан разработанный сайт на языке HTML.Чтобы разработать веб-сайт, необходимо продумать структуру узла и решить какая информация должна находиться на домашней странице и на других важных страницах, решить какой язык использовать для решения тех или иных проблем.. Обязательно определиться, для кого в первую очередь предназначен узел, какова главная цель и как часто будет обновляться материал.
С помощью текстового редактора или редактора веб-страниц необходимо создать страницы для узла (или хотя бы некоторые из них) и сохранить в виде HTML-файлов. Используя графический редактор, создать иллюстрации или использовать уже существующие.
Просмотреть готовые HTML-файлы посредством браузера. Проверить, грамотно ли набран текст, как функционируют ссылки, и обратить внимание на внешний вид графического материала. Повторять вышеуказанные действия до тех пор, пока узел не станет вполне приемлемым для публикации.
Теоретическая часть
HTML (HyperTextMarkupLanguage, язык разметки гипертекста) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ ее представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.[1].
Будучи универсальным средством, HTML вместе с протоколом передачи гипертекста (HypertextTransferProtocol - HTTP) позволяет решать задачи перевода документов между разными компьютерами, платформами и сетями, обеспечивая широкую доступность документов[2].
Основной конструкцией языка HTML является элемент. Элемент - это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая web-страница представляет собой ряд элементов. Одна из идей гипертекста - возможность вложения различных элементов.
Начальный или конечный маркер элемента называется тегом. Теги определяют границы действия элементов и отделяют элементы друг от друга.
Тег
Тег в HTML (языках семейства XML) — элемент языка разметки гипертекста. Текст, содержащийся между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге.[3]
Общий синтаксис написания тегов следующий:
- левой угловой скобки < (такой же, как символ «меньше чем»);
- необязательногослэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру;
- имени тега, например TITLE или PRE;
- необязательных атрибутов (тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами);
- правой угловой скобки > (такой же, как символ «больше чем»).
Примеры:
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...</тег>
Как видно из данного примера, теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Впрочем, есть теги без всяких дополнительных атрибутов. Условно атрибуты можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.
Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на рисунке 1.1 демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.
а
б
Рисунок 1.1. Вложение тегов, а — правильное, б — неверное.
Если связать открывающий и закрывающий тег между собой скобкой, как показано на рисунке 1.1, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (рисунок 1.1а). Любое пересечение условных скобок (рисунок 1.1б) говорит о том, что правильная последовательность тегов нарушена.
Атрибут
. У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности форматирования текста. Атрибут - параметр или свойства элемента. Это, по сути, переменная, которой может придаваться определенное значение в кавычках. Атрибуты расположены внутри начального тега и отделяются они пробелами.
Спецификация атрибута состоит из расположенных в следующем порядке элементов символов:
- имя атрибута, например WIDTH;
- знак равенства (=);
- значение атрибута, которое задается строкой символов, например "80".
Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя.
Можно также опустить кавычки для значений атрибутов, которые состоят только из следующих символов (обратитесь к технической концепции имени):
Таким образом, WTDTH=80 и ALIGN=СENTER - разрешенные сокращения для WIDTH—’80" и ALIGN="CENTER". Ссылка на URL, например HREF=foo.litni, допустима, однако, когда URL используется с атрибутами, он должен быть заковычен, например HREF="https://www.liut.fi/".
Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть <UL СОМРАСТ="СОМРАСТ"> можно сократить до <UL СОМРАСТ>.
Любые атрибуты нечувствительны к регистру, пишутся внутри открывающего тега и содержат имя и значение. В именах атрибутов нельзя использовать пробелы, кавычки, знак больше (>), слэш (/) и равно (=), а также любые символы не определенные в Юникоде. На практике, все имена атрибутов у тегов известны и вставлять «отсебятину» не имеет смысла. В значениях атрибутов допустимо писать текст и спецсимволы за исключением амперсанда (&), который должен заменяться на &.
Различают четыре разных способа написания атрибутов и их значений:
Пустой атрибут (логический, булев)
Этот атрибут не имеет значения, поведение тега определяет наличие этого атрибута. Если такой атрибут указан, подразумевается, что установлено значение «истина», а отсутствие атрибута означает «ложь». Само значение можно не указывать, достаточно написать один лишь атрибут. Также разрешается в качестве значения писать пустую строку или имя атрибута. Ниже показаны разные варианты с равнозначным результатом.
<inputdisabled>
<inputdisabled="">
<inputdisabled="disabled">
Значениябезкавычек
Значение пишется непосредственно после знака равно идущим вслед за именем атрибута. До и после знака равно можно вставлять любое количество пробелов или обойтись без них.
<img src=link.html alt=Картинка>
Здесь атрибутами являются src и alt, а после знака = идёт их значение без кавычек. Поскольку атрибуты разделяются между собой одним или несколькими пробелами, то при отсутствии кавычек легко допустить ошибку, когда браузер воспримет предлагаемое нами значение как атрибут.
<img src=link.html alt=Картинка в тексте>
Здесь значением атрибута alt будет слово «Картинка», остальные слова воспринимаются как неверные атрибуты.
Использование двойных кавычек
Значение берётся в двойные кавычки, обычно такая форма указывается для текста.
<inputtype="checkbox">
Использование одинарных кавычек
Вместо двойных кавычек также допустимо писать одинарные.
<inputtype='checkbox'>
Значения атрибутов разделяются между собой пробелом, поэтому если у вас в качестве значения указывается предложение, обязательно берите его в одинарные или двойные кавычки.
Кавычки внутри значений
Внутри значений атрибутов не разрешается применять те же кавычки, в которых взято само значение. Но допустимо сочетать разные типы кавычек между собой. Если внутри текста необходимы одинарные кавычки или апостроф, то сам текст следует взять в двойные кавычки.
<imgsrc="r.jpg" alt="ГородР'льех">
Соответственно, текст содержащий внутри двойные кавычки надо взять в одинарные.
<imgsrc='c.jpg' alt='Такой вид кладки называется "циклопическим"'>
Также вместо двойной кавычки в тексте можно использовать спецсимвол ", а вместо апострофа — '.
Структура HTML-документа
Структура html - документа состоит из трех пар тегов:
<html>
<head>
Заголовок документа
</head>
<body>
Тело документа
</body>
</html>
Для создания структуры документа и хранения служебной информации о нем предусмотрено много тегов.
Элементы, относящиеся к заголовку документа:
- HEAD определяет начало и конец заголовка докумс
- TITLE определяет имя всего документа, котеловке окна браузера;
- BASE определяет базовый адрес, от которого отсчитываются относительныелинки внутри документа;
- STYLE используется для вставки в документ таблицы стилей CSS;
- LINK описывает взаимосвязь документа с другими объектами;
- МЕТА используется для вставки метаданных.
Элементы, относящиеся к телу HTML-документа
Тело документа создается с помощью элемента BODY. Именно в теле документа содержится все то, что будет отображено на странице:
- текст, блоки текста;
- гиперссылки;
- списки;
- таблицы;
Атрибуты элемента BODY
TOPMARGIN - определяет ширину (в пикселах) верхнего и нижнего полей документа.
LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа.
BACKGROUND - определяет изображение для «заливки» фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.
BGCOLOR - определяет цвет фона документа.
TEXT - определяет цвет текста в документе.
LINK - определяет цвет гиперссылок в документе.
ALINK - определяет цвет подсветки гиперссылок в момент нажатия.
VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Практическая часть
Главная страница
