Файл: Основы программирования на языке HTML (О языке html).pdf

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

Технология World Wide Web, в переводе Всемирная паутина получила столь широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип «жми на то, что интересно», лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки - имеют возможность раскрыться новым документом, развивающим это понятие. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде –гипертекстовыми документами. Для описания этих документов используется специальный язык - язык описания гипертекстовых документов или HTML (англ. вариант Hyper Text Markup Language).

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

Интернет стал неотъемлемой частью нашей жизни, а web-разработка и дизайн престижной и востребованной профессией. Современный интернет не может существовать сам по себе, и кто-то должен создавать интернет страницы, каждый день и даже каждый час обновлять web-сайты, чтобы пользователю всегда была доступна актуальная и проверенная информация в понятной для него форме. Отдельно хочется отметить, что дизайн и внешний вид сайта(интерфейс) являются очень важной частью современной web-разработки, например, на очень популярных ресурсах незначительное или значимое изменение интерфейса может привести к бурной реакции со стороны пользователей. Известны очень нашумевшие своими неудачными попытками смены дизайна примеры: vk.com, kinopoisk.ru. Таким образом, вопрос web-разработки и дизайна является очень актуальным. Поэтому тема моей работы связана с созданием web-сайта на языке программирования HTML и программами, с помощью которых можно написать web-страницы. К своей работе я прикрепляю web-сайт как пример что можно создать, зная язык программирования HTML.

Объект - веб-сайт. Предмет - программирование сайта на языке HTML.

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

Задачи:

 Раскрыть основные сведения о языке;

 Рассмотреть процесс создания сайта;

 Создать веб-сайт на основе разработанного алгоритма.

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

1. Основные сведения о языке программирования

1.1 О языке html

Первое, с чего следует начать, что, не смотря на название данной работы «Основы программирования на языке HTML», языком именно программирования HTML называть не совсем корректно. HTML являет собой «язык гипертекстовой разметки», он предназначен для разметки текстовых документов (т.е. для форматирования текста).

Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB.

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

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

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

. Теги, определяющие, как будет отображаться WEB-браузером тело документа в целом.

. Теги, описывающие общие свойства документа, такие как заголовок или автор документа.

Основным преимуществом HTML заключается в том, что документ может быть просмотрен на WEB-браузерах различных типов и на различных платформах.

1.2 Инструменты для создания Web сайта

Документы могут быть созданы при помощи любого стандартного текстового редактора или специализированных HTML-редакторов, таких как Atom, PHPStorm, Arachnophilia, Netapad++, Visual Studio Code и конвертеров. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий конкретного разработчика.

Например, HTML редакторы, такие, как "Dreamweaver" компании Adobe, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство стандартных(бесплатных) средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML, которые позже можно просмотреть в любом браузере.

1.3 Основные положения

Все теги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Теги бывают парными и одиночными. Парные теги могут содержать текст и другие теги. У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег. Для примера приведем теги заголовка, определяющие текст, находящийся внутри стартового и завершающего тега и описывающий заголовок документа, регистр при вводе текста не важен:

<TITLE> Заголовок документа </TITLE> или <title> Заголовок документа </title>.

Завершающий тег выглядит также, как стартовый, и отличается от него прямым слешем / перед текстом внутри угловых скобок. В данном примере тег <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тег </TITLE> - о завершении текста заголовка.

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

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

1.4 Структура документа

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом <HTML>. Данный тег сообщает WEB-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML>

...тело документа...

</HTML>

Заголовочная часть страницы <HEAD>. Тег заголовочной части страницы должен быть использован сразу после тега <HTML>, перед тегом <BODY> и более нигде в теле страницы. Данный тег представляет собой общее описание документа. Не стоит размещать какой-либо текст внутри тега <HEAD>. Стартовый тег <HEAD> помещается непосредственно перед тегом <TITLE> и другими тегами, описывающими документ, например стили CSS подключаются внутри тега <HEAD>(О стилях CSS позднее) обычно внутри данного тега(но это необязательно). а завершающий тег для заголовочной части </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>

<HEAD>

<TITLE>Основы HTML</TITLE>

</HEAD>

Заголовок документа <TITLE>. Большинство WEB-браузеров отображают содержимое тега <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тегами <TITLE> и </TITLE>, размещается внутри <HEAD>-тегов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

Тег <Body> - Основное тело HTML документа, где размещается весь контент. Этот элемент обязателен к использованию и используется на странице один раз. Он должен начинаться сразу же после закрывающего тега <head> и заканчиваться непосредственно перед закрывающем тегом <html>.

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

Вводную часть страницы, которую чаще называют «шапкой», описывает тег <header>. Аналогично ему, заключительную часть страницы, или «подвал», описывает тег <footer>.

Body

header

Первый сайт студента

main

Nav

Навигация

Section

Добро пожаловать на первый сайт

Абзац 2

Section

Раздел 2

footer

Подвал сайта «Университет 2019».

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

Пунктиром выделен особый тег <body>.
Синей рамкой выделяются поточные теги, которыми обычно размечают крупные структурные блоки страниц, например, <main>, <header>, <footer>.
Фиолетовой рамкой выделяются теги для создания смысловых разделов, например, <section> и <nav>.
Оранжевой рамкой выделяются заголовочные теги, например, <h1>.
Розовой рамкой выделяются поточные теги, которыми обычно размечают непосредственно текстовые элементы, например, <p>.

Стоит заметить, что в спецификации больше типов, но пока, а ограничился только теми тегами, которые будут описаны позднее.

Это шапка сайта, здесь может разместиться меню, оглавление, настройки

</header>

<main>

Здесь основной учебный контент для конкретной страницы.

</main>

Университет Университет 2019г.

</footer>

Обычно на странице появляется по одному тегу <header> и <footer>, но их может быть и больше.

Тег <header> — это не только шапка сайта с логотипом и меню, он может использоваться, например, и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй <header> называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.

С тегом <footer> ситуация аналогичная. Уже всем стало привычно, что это подвал сайта, с копирайтами, контактной информацией и так далее. Но <footer> может использоваться и в других разделах сайта. Например, внутри статьи в «подвале» можно разместить дополнительную информацию: данные об авторе, дополнительные ссылки и так далее.

1.5 Теги тела документа

Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Начнём изучение тегов с крупных блоков главной страницы.

Тело документа <BODY>. Тело документа должно находиться между тегами <BODY> и </BODY>. Все теги, расположенные между <body> </body> - непосредственное содержание документа. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация документа.

Тег <main> Он выделяет основное содержание страницы, которое не повторяется на других страницах. Спецификация не допускает использование на одной странице более одного тега <main>, если у них нет специального атрибута hidden. Этот атрибут добавляется HTML-элементу, например, в одностраничных приложениях (Single Page Application), чтобы менять содержимое страницы, делая видимым тот или иной <main> в разных состояниях приложения. Атрибут hidden указывает браузеру, что элемент не должен отображаться и использоваться в момент, когда отображается и используется содержимое другого <main>. Также тег <main> не может быть вложен в элементы <article>, <aside>, <footer>, <header> или <nav>.