Файл: Структура HTML-документа.pdf

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

История его начинается с конца 1980-х годов, когда возникла необходимость обмениваться множеством различных документов при помощи сети Интернет. Необходимо было придумать способ демонстрации документов и информации о их местонахождении. В 1989 году сотрудником CERN Тим Бернерс Ли предложил проект, известный как Всемирная паутина (англ. World Wide Web). Целью данного проекта была демонстрация гипертекстовых документов, связанных между собой гиперссылками. Для создания данного проекта Тимом Бернерсом Ли и его коллегами были изобретены идентификаторы URI, URL, протокол HTTP и язык HTML. В основу языка HTML был положен другой ранее созданный язык – SGML, который предусматривал установку связи между документами с помощью гиперссылок. Этот же человек создал браузер, первую программу для просмотра HTML документов.

В данной работе я рассмотрю основные методы программирования на языке HTML и разработаю собственный веб сайт.

Объект исследования: язык программирования HTML

Цель работы: изучение языка программирования HTML.

Задачи:

Рассмотреть основы программирования на языке HTML и рассмотреть процесс создания сайта;
Создать веб-сайт

Структура данной работы: введение, глава 1, глава 2, заключение, список литературы и приложения №1, №2.

Глава 1. Основы программирования

1.1 Как же выглядит язык HTML и из чего он состоит?

В качестве примера как же выглядит язык HTML, лучшем представлением являются первые упражнения по изучению данного языка.

В данном примере необходимо создать документ формата HTML с выводом текста «Hello, it’s my first page!». Решаются подобные задания просто, для создания документа формата HTML нам понадобиться простой блокнот и минимальный набор «тегов» для создания данного документа. И так открыв блокнот и записав в него следующее:

<html>

<head>

<title> My first step </title>

</head>

<body>

Hello, it's my first page!

<br>

Welcome!

</body>

</html>

Своей записью в блокноте мы создаем html документ, после записи нам необходимо сохранить файл блокнота с расширением .html и открыть получившийся файл в браузере. В результате наших манипуляций мы получаем простую веб-страничку с текстом, который мы задали.

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

Элементы

Элемент – это конструкция языка HTML, содержащая данные. HTML включает в себя различные типы элементов, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения и т. д. Конструкция <title> My first page </title> представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть – <title> – называется открывающим тегом (англ. tag). Далее идет содержание элемента, которое в данном случае состоит из слов «My first page!». И наконец, </title> является закрывающим тегом. Как видно, название элемента (title) присутствует и в открывающем, и в закрывающем теге. Регистр символов в названии элемента не имеет значения. Однако в соответствии с соглашениями, принятыми большинством разработчиков, в примерах данной книги названия элементов записаны в верхнем регистре. Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ слеш /. Для некоторых типов элементов допускается отсутствие закрывающего тега (например, элемент P, указывающий начало абзаца). Существуют также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке. [1]

1.2 Атрибуты

Элементы могут содержать параметры, называемые атрибутами. Атрибуты могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например:

Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor (имеющего тип %Color) в элементе BODY приведет к тому, что цвет фона страницы станет красным. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки необязательны. В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например:

В приведенном примере устанавливаются красный цвет фона страницы и синий цвет основного текста. При установке значений нескольких атрибутов порядок их записи не имеет значения. Важно отметить, что регистр, в котором записываются названия атрибутов, также не имеет значения. Однако для повышения читабельности HTML-кода названия атрибутов обычно записываются в нижнем регистре (как в приведенных выше и ниже примерах). Существует любопытная разновидность атрибутов – булевы атрибуты. Для них возможны только два значения: ИСТИНА и ЛОЖЬ. По умолчанию эти атрибуты имеют значение ЛОЖЬ. Чтобы присвоить им истинное значение, достаточно просто указать имя этого атрибута, не присваивая ему никакого значения. Ниже приведен пример, в котором устанавливаются истинные значения двух атрибутов HTML-элемента INPUT:

<INPUT readonly disabled>. [1]

1.3 Вложенные элементы

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

<I>Курсив<B>-Полужирный курсив-</B>Курсив</I>

При обработке приведенного HTML-кода получится страница:

Рис. 1.1. Применение вложенных элементов

На приведенном рисунке видно, как действие внешнего (или родительского) элемента I (задание курсива) дополняет действие внутреннего элемента B (задание полужирного начертания шрифта). При использовании вложенности следует помнить, что вложенные элементы должны закрываться до того, как будут закрыты внешние элементы. Так, следующий пример является неверным:

<I> Неправильное закрытие <B> внутреннего элемента </I> до закрытия внешнего </B>. [1]

Блочные и встроенные элементы

Различают также блочные и встроенные элементы (иногда их называют элементами уровня блока и элементами уровня текста). Основным отличием блочных элементов является форматирование их браузером как обособленной части документа. Блочные элементы задаются парными тегами и могут содержать вложенные блочные или встроенные элементы и, естественно, текст. Встроенные элементы обычно находятся прямо в тексте и могут иметь содержимое или не иметь его. Примерами встроенных элементов могут служить приведенные ранее элементы B и I, а также элементы перевода строки, изображения и т. д. В отличие от блочных элементов, встроенные элементы могут содержать только текст или вложенные встроенные элементы. [1]

Каскадные таблицы стилей (CSS)

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

относящиеся ко всем страницам сайта, редактируя один-единственный документ таблицы стилей. Они в некоторой степени поддерживаются всеми современными браузерами. [2]

Структура HTML-документа

HTML-документ состоит из трех частей, в которых описывается следующая информация:

Данные о версии используемого HTML;

Заголовок документа; <head>

Тело документа. <body>

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

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

Итак, полноценный HTML-документ должен содержать все три указанные элемента структуры или хотя бы два последних элемента. [3]

Глава 2. Практическая часть

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

2.1 Создание сайта

Итак, что нужно для создания сайта?

Можно много рассказывать о различных редакторах как графических типа Photoshop, так и текстовых которые используются для создания сайта, но так как у нас ограниченное количество страниц курсовой то я возьму текстовый редактор под названием Sublime Text и начну создание своего сайта.

Sublime Text - это кроссплатформерный многофункциональный текстовый редактор с набором инструментов для маркировки и выделения фрагментов кода. Необходим он для упрощения создания исходников на различных языках программирования. Главное его преимущество - это маркировка кода для более понятного восприятия.

Sublime Text

HTML документ с содержанием нашего контента будет выглядеть так:

Содержание HTML документа:

И так познакомимся поближе с содержанием:

Элемент <!DOCTYPE html> и атрибут <html lang="en"> обозначает тип данного документа и язык на котором написан контент.

Далее тег <head> открывает нам возможность написать заголовок сайта как в нашем примере «Hi Synergy», заголовки используются поисковыми системами для получения описания сайта, ключевых слов и других данных. Основная задача тега — это хранения других элементов, цель которых — помочь браузеру в работе с данными. В нашем примере тегом <link> мы подключаем для использования на нашей страничке файл CSS.

После закрытия тега <head> открывается тег <body>. Внутри данного блока располагается содержание веб страницы, а именно текст, изображение, скрипты и прочее. Тегом <div> мы открываем отдельный блок где будет располагаться наш контент задаем ему класс container что бы в последствии обратится именно к этому боку в таблице стилей CSS <div class="container">

Далее мы расположим логотип нашего сайта: <img src="img/logob.png" alt="Synergy" где img src="img/logob.png мы описываем вставку изображения и путь к нему. А атрибутом alt мы пишем текст на случай пропажи изображения или отключения отображения в браузере.

Тегом <nav> мы создадим меню нашего сайта: <nav> <ul class="menu"> <li> <a href="#">Home</a> и прочие пункты.

Далее мы напишем простой текст но уже в другом блоке div <div class="titles">

<div class="ti1">Hello, synergy teacher!

Для обращения в CSS укажем класс class="titles"

И в заключении создадим блок в виде кнопки: