Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML ( Основные сведения о языке программирования )

Содержание:

Введение:

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

Технология 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>.

Тег <section> - определяет раздел документа (смысловой или «логический»), вроде блока новостей, глав текста, вкладок в диалоговом окне и т.п. Допускается вкладывать в элемент <section> другие элементы <section>.

Полезно научиться отличать смысловые или логические разделы от структурных разделов. Логический раздел можно осмысленно назвать одним словом или сложноподчинённым словосочетанием: «программа обучения», «каталог», «список студентов», либо сложносочинённые словосочетания: «новости и галерея», «Программа обучения и табель успеваемости».

Структурный раздел назвать сложнее. Он обычно связан с его положением на странице («шапка», «подвал», «левая колонка»). Если раздел при анализе подобным образом соответствует последнему описанию - значит он структурный и <section> для него не подходит.

Например:

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

</section>

Раздел «Редактирование профиля» Здесь студент сможет управлять своими личными данными

</section>

Тег <nav> предназначен для создания логического раздела с основной навигацией (сокращение от английского «navigation»). Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.

Пример:

<nav>

Обучение, Библиотека, Вебинары.

</nav>

Не каждая группа ссылок на странице должна быть обёрнута в <nav>. Например, небольшой блок со вспомогательными ссылками в подвале сайта. Такой блок внутри тега <footer> не нужно дополнительно оборачивать в тег <nav>. Также, блок <nav> помимо ссылок может включать абзацы с текстом, заголовки, списки и другое содержание.

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

Тег article определяет независимый раздел. Данный тег, в отличие от <section>, можно убрать из одного места и вставить в другое (на другую страницу сайта или на другой сайт), и смысл и значение содержимого тега при этом останется прежним. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

Статья про HTML - теги на информационном ресурсе.

</article>

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

<aside>

Здесь блок с рекламой на сайте.

</aside>

Тег абзаца <P>. Абзац — отрезок письменной речи, состоящий из одного или нескольких предложений, зачастую объединённых общей мыслью. Это привычное нам определение. Параграф в HTML совсем другой. Параграфы в HTML — это всего лишь неразрывная последовательность фразовых элементов, то есть чисто структурная, а не смысловая сущность. Параграфы существуют даже без тега <p>. Тег <p> позволяет явно выделять параграфы, группируя элементы с фразовым типом содержимого. Это могут быть не только блоки текста, а, например, изображения, ссылки или поля ввода.

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

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

В парные теги можно вкладывать другие теги. Со вложенными тегами всегда нужно следить за правильным порядком их закрытия. Вложенный тег не может закрываться после родительского.

Тег <BR> извещает браузер о разрыве строки. Наилучший пример использования данного тега - форматированный адрес или любая другая последовательность строк, где браузер должен отображать их одну под другой. Например:

Виноградов Владислав<BR> ул. Чайковского 39А,<BR> 1 этаж, кабинет 110<BR>

Дополнительный атрибут позволит расширить возможности тега <BR>.

Данный параметр позволяет не просто выполнить перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тег <BR> для смещения текста ниже рисунка:

<p> На факультете управления прошла неделя психологии

<BR CLEAR=left> <img src="https://synergy.ru/assets/upload/news/2020/%D0%9D%D0%B0%20%D1%81%D0%B0%D0%B9%D1%82_%D0%BF%D1%81%D0%B8%D1%85%D0%BE%D0%BB%D0%BE%D0%B3%D0%B8%D1%8F.jpg" align=baseline> фото участников</p>.

Неразрывная строка <NOBR>. Если требуется, чтобы браузер автоматически переносил строку (хотя некоторые браузеры могут по умолчанию не переносить строку), то используются теги <NOBR> и </NOBR>. При использовании браузер не будет переносить строку даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно. Например: <NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было </NOBR>

Если требуется разбиение любой строки на две, но в строго определённом месте, то используется тег <WBR> в данном месте. Например: <NOBR> Тестируем теги NOBR WBR на практике в разных браузерах: Internet explorer, Mozilla firefox, Google Chrome, <WBR> Microsoft Edge, Opera, и смотрим на полученный результат. Там, где был использован тег WBR должен быть переход на следующую строку. </NOBR>. На данном примере отчётливо видно, что не все функции на практике работают в разных браузерах одинаково. В нашем примере троица Internet explorer, Microsoft edge, Mozilla firefox не перенесла текст в месте с тегом “<WBR>”. Google Chrome и Opera осуществили перенос в обозначенном тегом месте. Однако при просмотре тестовых страниц на мониторе с большим разрешением, где данный текст полностью умещается на экране - ни один из браузеров не осуществил перенос текста в указанном месте кода.

1. Результат в браузерах IE, Edge, Firefox.

2. Результат в браузерах Chrome, Opera.

Код:

<!DOCTYPE html>

<head>

<title>

Тестирование NOBR, WBR

</title>

</head>

<body>

<P>

<NOBR> Тестируем теги NOBR WBR на практике в разных браузерах: Internet explorer, Mozilla firefox, Google Chrome, Microsoft Edge, Opera, и смотрим<WBR> на полученный результат. Там, где был использован тег WBR должен быть переход на следующую строку. </NOBR>

</body>

</html>

Тег <pre> определяет заранее форматированный текст.

Такой текст отображается моноширинным шрифтом (обычно Courier) и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице отображается как один. Элемент <pre> позволяет обойти эту особенность и выводить текст со специальным форматированием, как требуется разработчику. Внутри тега <pre> разрешается использовать любые элементы кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.

Цитата <BLOCKQUOTE>. Данный тег предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тегом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например: Нурсултан Назарбаев досрочно сложил полномочия президента Казахстана. Об этом он сообщил сегодня в обращении к народу Казахстана: <P> <BLOCKQUOTE> Дорогие казахстанцы, соотечественники, соратники, члены партии «Нұр Отан»! Сегодня я обращаюсь к вам, как это делал всегда. <BR> Я принял непростое для себя решение – сложить с себя полномочия Президента Республики Казахстан. </BLOCKQUOTE>

«При отображении браузером данный текст будет выглядеть так:

Тег <meta> предоставляет метаданные о HTML документе. Метаданные не отображаются на странице, однако могут обрабатываться программами и служат для хранения информации о документе и для взаимосвязи документа с другими документами и системами.

Обычно мета элементы используются для определения описания страницы, автора документа, поисковых ключевых слов, даты последнего изменения и т. п. Метаданные могут использоваться браузерами (как отображать контент или перезагружать страницу), поисковыми системами (описание, ключевые слова) и другими веб-сервисами. Для задействования метаданных используются теги <meta> с разными атрибутами и их значениями. Вот некоторые из атрибутов: charset, content, http-equiv, name и scheme.

С помощью атрибута charset указывается кодировка текста HTML-страницы:

С помощью атрибута name и content можно указывать перечень ключевых слов для поисковых систем:

А также краткое описание страницы для поисковиков:

Лучше всегда указывать кодировку точно. Если этого не делать, браузер может неправильно угадать её, и вместо текста будут отображаться «иероглифы».

Самая распространённая современная кодировка — utf-8. Раньше часто использовали кодировку windows-1251, стандартную кодировку для кириллицы в Windows. Но сейчас это считается плохой практикой.

Теги <meta> должны всегда находиться внутри тега <head>.

Уровни заголовков <Hx>. В документах бывают заголовки разного уровня: Первый уровень заголовков (самый большой) обозначается цифрой 1, второй – 2, используются для разделения текста по структуре: на просто текст, заголовки частей текста, заголовки более высокого уровня, и т.д. Большинство браузеров поддерживает интерпретацию только шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет число "1". Синтаксис заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки любого другого уровня могут быть обозначены следующим образом:

<Hx> Заголовок x-го уровня </Hx>, x - цифра от 1 до 6, определяющая уровень заголовка.

В пятой версии HTML разрешили использовать собственную, независимую от остального документа, иерархию заголовков в тегах для создания смысловых разделов. Теперь на странице можно использовать несколько <section> или <article> со своими <h1>, <h2> и <h3>.

На практике выяснилось, что этот механизм скорее мешает, чем помогает, а браузеры и средства доступности не спешат его реализовывать. По данной причине Web-разработчики начали возвращаться к «старой» «сквозной» иерархии заголовков во всём документе.

1.6 Атрибуты тегов

У многих тегов могут быть так называемые атрибуты. Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки. Например, тег <img> позволяет добавить картинку в разметку. Сам по себе <img> не имеет смысла. Чтобы этот тег был действительно нам полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src:

Атрибут lang можно задавать любым тегам, если нужно уточнить, на каком языке написан текст внутри тега. Но если задать его тегу <html>, то действие атрибута распространится на весь документ целиком.

У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

<тег атрибут1="значение1" атрибут2="значение2">

Дополнительные параметры тега <P>:

<P ALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа. Вы можете центрировать все элементы документа в окне браузера. Для этого можно использовать тег <CENTER>.

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

а) перевод строки

б) символы табуляции (сдвиг на 8 символов вправо)

в) непропорциональный шрифт, устанавливаемый браузером.

Использование тегов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тегами <PRE> и </PRE>.

2. Списки в HTML.

Тегов для разметки списков в HTML несколько: для упорядоченных списков, неупорядоченных списков и списков описаний. Для неупорядоченного списка нет разницы на каком месте какой элемент списка.

Неупорядоченный список размечается тегом <ul> (сокращение от «unordered list»). Его используют, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

Непосредственно в теге <ul> могут находиться только теги <li> (сокращение от «list item»), которые обозначают элементы или пункты списка. Пунктов может быть неограниченное количество, но должно быть не менее одного. Приведём пример:

<ul>

<li>Кальмар</li>

<li>Лосось</li>

<li>Осетр</li>

</ul>

По умолчанию элементы <ul> отмечаются маркерами такого же цвета, как цвет текста. Также во время тестирования работы данного тега мною было замечено, что закрывающий тег </li> для одноуровневого списка не обязателен для каждого элемента списка, т.е. по примеру выше если убрать закрывающие теги, то результат не изменится:

Код:
<ul>

<li>Кальмар

<li>Лосось

<li>Осетр

</ul>

Тег <ol> - упорядоченный список (сокращение от «ordered list»). Как понятно из названия, здесь действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

Пункты упорядоченного списка тоже размечаются с помощью тега <li>. Пример кода:

<ol>

<li>Первое блюдо</li>

<li>Второе блюдо</li>

<li>Десерт</li>

</ol>

По умолчанию перед элементами <ol> ставится их порядковый номер (получается нумерованный список).

У тега <ol> имеется три атрибута: type, start и reversed. При помощи атрибута start можно задавать начальное число для списка, атрибут reversed меняет нумерацию на обратную.
Пример:

<li>Первое блюдо</li>

<li>Второе блюдо</li>

<li>Десерт</li>

</ol>

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

1: десятичное число;

a: буквы латинского алфавита в нижнем регистре;

A: буквы латинского алфавита в верхнем регистре;

i: римские цифры в нижнем регистре;

I: римские цифры в верхнем регистре.

Теги <ol> и <ul> можно вкладывать друг в друга и создавать многоуровневые списки. Количество уровней в списках не ограничено. Сперва необходимо создать список первого уровня, а затем между тегами <li> и </li> этого списка добавить ещё один список. При этом необходимо аккуратно закрывать все теги:

<ol>

<li>рулевое управление:

<ul>

<li>рулевые наконечники</li>
<li>маятник</li>

<li>рулевая трапеция</li>

</ul>

</li>

<li>подвеска</li>

<li>трансмиссия</li>

</ol>

.Doctype в HTML, объявление типа документа

Каждый HTML-документ начинается с декларации типа документа или «доктайпа». Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.

Для старой версии HTML Doctype выглядел так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

А для современной версии HTML уже намного проще:

<!DOCTYPE html>

Необходимо всегда добавлять декларацию <!DOCTYPE> в HTML документ, чтобы браузер знал, документ какого типа он получил.

Если эта декларация не используется или используется неправильно, браузер будет «думать», что пользователь точно не знает, какой тип страницы или документа создаёт, и переключится в режим "обратной совместимости", при котором вывод многих элементов может осуществляться совершенно не так, как должно быть по задумке web-мастера. Это может показаться жестом гибкости и всепрощения, но на практике приводит к случайным и непонятным результатам.

Декларация должна быть в точности такая, как в примере (включая написание заглавными буквами слова 'DOCTYPE'). В отличие от других тегов этот тег не закрывается.

Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Cссылка представляет собой участок текста, щёлкая на который, пользователь переходит на другую страницу, открывает изображение, начинает скачивать файл или перемещаться к какому-то месту на текущей странице. Ссылки делают набор документов связанным и структурированием, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.

Ссылки создаются с помощью тега <a> (сокращение от «anchor»). Адрес ссылки задаётся в формате URL с помощью атрибута href (сокращение от «hyper reference»). Например:

<a href=" http://my.megacampus.ru ">Megacampus</a>

Относительные адреса:

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

<a href="relative.html">Проба относительных ссылок в HTML</a>

Такой адрес называется относительным. В нём, в отличие от «обычных» адресов, нет адреса сайта! Чтобы перейти по относительному адресу, браузер должен его «расшифровать». Для этого он обычно использует положение текущей страницы. Например, в папке S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/ есть два файла:

c:/blog/

|-Untitled1.html // в браузере открыта эта страница

|-test Browser.html

В браузере открыта страница S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/Untitled1.html, и в ней есть ссылка с относительным адресом test Browser.html. Чтобы перейти по этой ссылке, браузер смотрит на расположение открытой страницы и заменяет в нём последнюю часть:

S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/~~Untitled1.html~~ + test Browser.html // заменяем последнюю часть

S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/ test Browser.html // открываем этот файл

Относительные адреса работают не только для файлов на компьютере, но и для страниц в сети. Если выложить два файла из примера в интернет (не меняя их взаимное расположение), то ссылка всё равно будет работать. Создадим для тестирования страницу relative.html с текстом: «Страница, на которую был переход по относительной ссылке». А в страницу Untitled1.html добавим относительную ссылку - <a href="relative.html">Проба относительных ссылок в HTML</a>. Проверяем результат:

Браузер при клике на ссылку перевёл на страницу “relative.html”.

Абсолютные адреса:

Относительные адреса отлично подходят, чтобы делать сайт на своём компьютере или создавать навигацию по страницам своего же сайта. Но если нужно сделать ссылку на другой сайт в интернете, то необходимо использовать уже «обычный» адрес.

Этот «обычный» или полный адрес называется абсолютным. Выглядит он, например, так:

http://my.megacampus.ru/student/up Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь.

https: — протокол

//my.megacampus.ru — имя сервера

/student/up.html — путь

Если в адресе нет имени сервера или протокола, то это относительный адрес:

http://my.megacampus.ru/student/up - абсолютный адрес

//my.megacampus.ru/student/up.html - относительный адрес

/student/up.html - относительный адрес

up.html - относительный адрес

В тексте главной страницы не хватает одной полезной ссылки — ссылки на курсы по вёрстке. Как раз для неё и пригодится абсолютный адрес.

Ccылка на файл:

Когда мы переходим по ссылкам, то попадаем на другие страницы или места на странице. Но при переходе по ссылке на файл браузер предложит его скачать. Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. Но в последнее время браузеры научились открывать PDF-файлы и многие другие. Для того, чтобы предотвратить открытие файлов прямо в браузере у тега <a> существует атрибут download, который поможет именно скачать файл.

<a href="file.pdf" download>Браузер скачает данный файл, а не откроет</a>

Ссылка-якорь

Зачастую страницы в интернете бывают длинными, это могут быть книги, инструкции, и как пример очень подходят учебные материалы Синергии. Чтобы работать с ними было удобно, хорошо бы добавить навигацию. Эта навигация не должна уводить читателя на другие страницы, а должна работать в пределах страницы со статьёй.

Для создания такой навигации используются ссылки-якоря. Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #, после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.

Пример адреса, состоящего

из одного якоря:

<a href="#part1">Глава 1</a>

При щелчке по такой ссылке браузер найдёт на странице элемент с соответствующим атрибутом id и прокрутит окно страницы к нему.

<section id="part1">Содержание первой главы</section>

При этом перезагрузки страницы не произойдёт.

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

Якоря отлично подойдут для создания оглавления, например:

<h3>Оглавление</h3>

<ul>

<li> <a href="#intro">Введение</a>

</li>

<li><a>о языке HTML</a></li>

<li><a>Основные положения</a></li>

<li><a>Структура языка</a></li>

<li><a>Теги языка</a></li>

</ul>

<h3 id="intro">Введение</h3>

У ссылок-якорей есть особенность: HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если пользователь нажимал ссылки внутри документа, а затем нажал на клавишу ”Back”, то он не перейдет на предыдущую ссылку, а вернется на ту часть документа, которую просматривал до этого (После нескольких нажатий “back”, пользователь будет перенаправлен на предыдущую страницу, если она предшествовала текущему перемещению по ссылке внутри текущей страницы). URL.

Графика внутри документа

Тег img, используется для добавления изображения на строницу. Он одиночный, то есть, не требует закрывающего тега. Тег <img> бесполезен без своего атрибута src, который указывает путь к картинке. Пример:

В HTML, чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Размеры в этих атрибутах задаются без единиц измерения px. Например:

В примере выше изображению задана ширина 200px и высота 100px.

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

Изображение-ссылка

Ссылки можно делать не только с помощью текста, но и с помощью изображений. Для этого в HTML присутствует возможность помещать изображения в ссылки:

Необходимо обернуть тег <img> в тег <a>. Например:

</a>

Часто ссылки-изображения используются в галереях, когда с уменьшенной версии изображения ставится ссылка на полноразмерную версию картинки или на отдельную страницу с этим изображением и подписью к нему.

Задание стандартных цветов. Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тег <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры::

Цвет фона документа:

Цвет простого текста документа:

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тег <HR>, вы можете разделить текст горизонтальной чертой.

Формат тега:

Параметры тега::

Толщина линии в пикселях.:

Ширина линии в пикселях или процентах от ширины окна броузера.: Расположение на экране (слева | по центру | справа).: По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

Добавление стилей в документ

6.1 Что такое CSS?

На начальных этапах развития сети интернет содержание и внешний вид страниц прописывались только в HTML. Но в последствии для работы над внешним видом страниц появился отдельный язык – CSS (расшифровывается как «каскадные таблицы стилей»). Необходимость в наличии отдельного инструмента для оформления документов возникла из-за того, что при совмещении оформления и наполнения сайта в одном инструменте теряется гибкость: код становится перегруженным, для того, чтобы что-то поменять в оформлении нужно править содержимое. Нет возможности переключаться между разными версиями оформления страницы, особенно если есть потребность поменять его кардинально, т.к. придётся переписывать очень много HTML-элементов. Именно поэтому было принято решение отказаться от размещения элементов оформления внутри атрибутов в HTML документе и разделить: разметка и содержимое страницы – это то, что относится к HTML, а всё что занимается стилями – относится к технологии CSS. Проще говоря: задача HTML – показать, какие элементы будут на странице, задача CSS – показать, как эти элементы будут на странице выглядеть. Слово «каскадные» в аббревиатуре CSS означает многоуровневые. Это значит, что одному и тому же элементу на странице может быть назначено сразу несколько стилей из разных источников. Какой именно стиль будет применён к элементу, решают правила приоритета.

Слово таблица в аббревиатуре означает, что CSS представляет собой набор стилей и их значений, которые можно свести в таблицу.

6.2. Работа с CSS

Документ CSS, так же, как и документ HTML представляет собой текстовый файл, для работы с которым можно использовать стандартные текстовые редакторы, но удобнее этим заниматься в продвинутых редакторах кода, таких, как Notepad++, PhpStorm, Atom или Stylyzer – специальный инструмент для работы с CSS.

Существует три основных способа подключения стилей CSS к телу документа HTML:

Атрибут Style – используется в элементах HTML для придания элементу стиля <p style="color:red; font-family:impact”>Абзац</p>
На данном примере мы покрасили посредством атрибута style Абзац в красный цвет и поменяли ему шрифт на “impact”.
Элемент Style – как правило его располагают внутри тега <head>. Использует CSS- селекторы для придания выбранным элементам документа HTML стиля:

<head>
<title> CSS</title>
<style>
P{ style="color:red; font-family:impact”}
</style>
</head>
В данном примере мы применили аналогичные стили CSS ко всем абзацам страницы.
Подключение стилей CSS с внешнего CSS-файла.
Для начала создаётся текстовый документ, например style.css, в нем так же укажем стили, как из предыдущего примера:
P{ style="color:red; font-family:impact”}
и сохраняем данный документ.
Теперь остаётся в теле главного документа подключить этот внешний CSS-файл внутри HTML-документа. Подключение производится с помощью элемента <link> с атрибутом rel=”stylesheet”. В элементе линк так же используется атрибут href с ссылкой на файл, который хотим подключить. В нашем случае документ HTML находится в той же папке, что и style.css, поэтому путь будет выглядеть так: href=”style.css”. Также в элементе link указывается атрибут type=”text/css”, который говорит о том, что подключается файл со стилями оформления CSS.

6.3 Синтаксис CSS

Синтаксис CSS - это просто набор селекторов, свойств и их значений.

Исключение, когда нам могут не понадобиться селекторы - это тогда, когда мы с вами указываем стили CSS с помощью атрибута style.

CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {

свойство: значение;

}

В CSS, как и в HTML присутствуют комментарии, для них используются символы /* и */. Вот пример CSS-правила из первой главы:

Список CSS-правил нельзя вкладывать друг в друга. Возможно, в новых версиях языка эту возможность добавят.

Заключение

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

В процессе написания данной курсовой работы я познакомилась с языком разметки HTML, а именно: со структурой HTML-страниц, научилась создавать простые статичные web-страницы и использовать базовые теги. Работать с файлами разных форматов и расширений для корректного отображения в браузере. Во время тестирования тегов, правила, изучения синтаксиса языков разметки CSS и HTML мною были опробованы различные бесплатные и платные инструменты: Notepad++, Atom, VisualStudio Code, Arachnophilia 5.5, PHPStorm, Stylizer. Хотя можно было ограничиться и 1 инструментом, но всё-же полезно было оценить интерфейс данных программ. Работа в специализированных редакторах была более удобной и понятной, нежели в стандартном текстовом редакторе.

Знания, полученные мною при написании данной курсовой работы, пригодятся мне в будущем на работе, мне следует ещё многое изучить, чтобы стать профессионалом в данном деле, но я буду и дальше изучать web-разработку на языке HTML и совершенствоваться как специалист.

Список использованной литературы:

1. Алленова Наталья: Самоучитель по html в формате html-книги, Ступеньки 1-13.

2. Мальчук Е.В. - HTML и CSS: Самоучитель, Москва, 2008, 408 с.

3. HTML теги URL: https://msiter.ru/references/html-reference (Дата обращения 20.02.20).

4. Основы html для начинающих на понятном языке URL: http://nesmelov.ru/html/osnovy-html.html (Дата обращения 14.02.20).

5. Первые Шаги - Учебник по Html для чайников URL: https://serblog.ru/demo/tutorial_html/steps/1step2.html (Дата обращения 28.02.19).

6. Что такое HTML и краткая история HTML URL: http://netagent.chat.ru/html/ul1.html (Дата обращения 09.02.20).

7. Рекомендации консорциума W3c к HTML 5 URL: https://www.w3.org/TR/2014/REC-html5-20141028/ (Дата обращения 25.02.20).

8. Basic Web Page Building(Создание базовой веб-страницы) - URL: https://www.arachnoid.com/arachnophilia/Documentation/BasicWebPageBuilding.html (Дата обращения 14.02.20).

9. Основы html для начинающих URL: http://webdesign-master.ru/blog/html-css/4.html (Дата обращения 18.02.20).

10. Основы html для начинающих. Урок 1 URL: http://sitesnulya.ru/osnovy-html-dlya-nachinayushhix-urok-1/ (Дата обращения 13.02.20).

11. Интерактивные онлайн курсы по HTML, CSS и Javascript URL: https://htmlacademy.ru/ (Дата обращения 03.02.20).

12. Рекомендации консорциума W3c к HTML 5 от 28 октября 2014г. URL: http://spec.piraruco.com/html5/index.htm (Дата обращения 28.02.20).

13. Быстрый старт в HTML для начинающих URL: https://webkyrs.info/category/bystryi-start-v-html-dlia-nachinaiushchikh (Дата обращения 02.03.20).