Добавлен: 01.04.2023
Просмотров: 42
Скачиваний: 2
Введение
1. Основы программирования на языке HTML
Что такое HyperText Markup Language?
При посещении страниц в интернете, у некоторых из Вас, они возможно иногда отображаются «сломанными», например: (рис.1). Почему же такое происходит? Где все эти красивые рамки и блоки, куда исчезла архитектура страницы?
Когда страницы выглядят так ( рис.1 ) – это значит, что Ваш «браузер» не смог загрузить информацию из файлов CSS, привязанных к странице, и нам виден её «скелет» - а именно, HTML код.
«HyperText Markup Language» дословно можно перевести как «Язык разметки ГиперТекста» - это основа всех сайтов/страниц в сети интернет. Он определяет содержание страницы на её самом базовом уровне.
Рассмотрим структуру документа HTML. Он [документ] состоит из «тегов», их аргумен[1]тов и сожержимого. Например, каждый документ будет содержать такие «теги», как <html>, <head> и <body>.
2. "Теги"
<html> - «Тег» сообщающий «браузеру», что дальше [в нём] следует код на языке HTML. Этот «тег» является «двойным», что означает, что на странице также будет присутствовать «тег» </html> - закрывающий первый. «Двойные» или парные «теги» можно представить как скобки, так как за открывающим, далее на странице всегда будет следовать закрывающий.
«Теги» <head> и <body> тоже являются парными, они (в переводе с английского) соответственно представляют «голову» и «тело» документа. Так называемая «голова» содержит информацию и «связи» которые понадобятся «браузеру» для корректного отображения страницы. Например: такую информацию, как ссылку на .CSS (Cascading Style Sheet) документ, который придаёт странице её визуально и эстетически приятный вид. «Тег» «тела» же обрамляет содержимое страницы, хранит в себе все остальные её элементы – текст, ссылки, изображения и иные мультимедиа. [2]
2.1. «Тег» <head>
«Тег» <head> содержит в себе метаданные страницы, которые определяют название документа, стили и «скрипты» - исполняемые кусочки кода других языков встроенные в страницу, какой набор символов/какую кодировку использует сайт и многое другое.
Элементы «тега» <head>:
<title> - парный элемент. </title> - от английского «title = название», очевидно, определяет наименование документа для «веб-браузера». Помогает SEO (Search Engine Optimization – Оптимизации поисковых «движков», таких как Google, Yahoo, Yandex, Seznam, Nigma, DuckDuckGo и множества других, так как часто содержит в себе «выжимку» содержания страницы.). Если "тег" названия <title> будет в себе содержать специфические символи как Кириллицу или Иероглифы - рекоммендуется поставить его после указания кодировки страницы, как например тега <meta charset="utf-8>, который мы рассмотрим позже.
<style> - элемент определяет «стиль» страницы. Является парным. </style>. Содержит в себе по сути своей код CSS- Cascading style sheet, определяющий многие параметры отображения. От формата – размера, положения, декораций («жирность», курсив, подчёркнутость или прочерк, сам шрифт или иногда при отсутствии указанного в системе пользователя – альтернативные варианты.) текста, до цвета/градиента самих элементов или из «рамок-границ» (и так же формата таковых: рамка сплошная, точками или прочерками и т.д). [3]
<link> - в переводе с английского «ссылка», элемент ссылающийся чаще всего на внешние связи страницы, не парный элемент, и, пожалуй, первый, где мы расмотрим аргументы «тега».
Часто в коде страниц в интернете можно встретить его записть в формате:
<link type="text/css" rel="stylesheet" href="style.css">
Давайте разбёрем всё по порядку: type аргумент указывает тип документа, на который ссылается, не является необходимым, но помогает оптимизации страницы. rel (relation) – аргумент определяющий (как видно из перевода с английского "relation" = отношение) взаимосвязь, опять же отношение между этим документом и целевым документом «тега». HRef (Hypertext REFerence) – Гипертекстовая ссылка, ссылается на код находящийся на другой странице/в другом документе, в данном случае на файл style формата .css находящийся на сервере в той же директории (папке, в данном случае), что и .html документ.
Также "тегом" link к странице можно привязать "значок" - "иконку" - 16 на 16 пикселей (рекоммендовано) изображение формата ico или png.
Пример кода:
<link rel="icon" type="image/png" href="Иконка.png">
или
<link rel="icon" href="Иконка.ico"> для файла формата ico.[4]
<meta> - не парный элемент со множеством функций. Например определить какой набор символов используется страницей, для того, чтобы «веб-браузер» мог её корректно отобразить.
Пример: <meta charset="UTF-8"> или <meta charset="ASCII"> - «посоветует» «веб-браузеру» использовать при отображении данной страницы кодировки UTF-8 = 8-bit Unicode Transformation Format (восьми-битный Формат Трансформации Юникод – международный формат, ставший стандартом в современных версиях) или ASCII = American Standard Code for Information Interchange = Стандартная Американская кодировка для обмена информации, является устаревшей (из-за ограничения объёма информации на символ – семибитный формат позволяет всего 2 в 7-ой степени = 128 символов, которые помимо алфавита в нижнем и ВЕРХНЕМ регистре (26*2=52) должен включать символы как пробел, пунктуация (запятая, точка, вопросительный и восклицательный знаки, дефис и подчеркивание, поцент и многие другие), даже технические как «конец строки» или «конец файла»), но всё ещё популярной, так как содержит в себе большинство необходимых элементов для отображения текста на английском языке. Для отображения Кириллицы и языков, чей алфавит отличается от английского или имеет специальные символы, была придумана кодировка UTF-8 (её новшество заключается в варьируемой длине кодировки символов).
Также «тег» может описывать страницу для «внешнего мира» и поисковых систем:
Происходит это посредтвом аттрибута: name которому присваивается значение в зависимости от того, что мы хотим указать.[5]
Просто описать страницу:
<meta name="description" content="Описание Страницы">
Добавить к ней ключевые слова для SEOптимизации:
<meta name="keywords" content="HTML,CSS,Набор ключевых слов для поисковых систем,JavaScript">
Или просто указать авторство:
<meta name="author" content="Имя Автора страницы/«контента»">
Также этот «тег» может помочь сделать сайт более «адаптивным». Поскольку интернет в современном мире доступен на множестве разных устройств, нам почти невозможно предсказать все варианты отображения нашей «веб-страницы» в браузере без данных о размере экрана/окна устройства пользователя. Это делается с помощью ключевого слова аттрибута name: viewport, спуцифицируя в аттрибуте content то, как должны измениться параметры в зависимости от размеров экрана/окна:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script> - является парным элементом. </script>. – Позволяет определить «сниппеты» - «кусочки» (отрывки) кода JS – JavaScript, который должен быть исполнен со стороны того, кто посетил сайт в «веб-браузере». Текст внутри этого элемента является кодом на JavaScript, язык который в спектр этой курсовой работы не входит. Перейдём к следующему элементу: [6]
<base> - не парный элемент указывающий в своём аттрибуте href ссылку на «базовую» директорию (папку), в которой находится большинство контента необходимого для отображения страницы. Позволяет упростить и сократить все нижеупомянутые (после этого «тега», все находящиеся в «теге» <body>) в документе ссылки. Например:
<base href="https://www.НашСайт.Домен/директория/" target="_blank">
Позволит нам позже вместо (допустим для вызова картинка):
<img scr="https://www.НашСайт.Домен/директория/картинка.формат">
Указать сокращение:
<img scr="картинка.формат">, так как значение аргумента href в <base> уже берётся как начало ссылки на файл.
Итак, мы рассотрели элементы «тега» <head>, но перед тем, как перейти к «тегу» <body>, я хочу превести пример среднестатистического элемента <head>, но сначала хочу рассказать о комментариях: в синтаксе html коментарии выделяются
<!-- так -->. Что же, приступим к файлу:
<!DOCTYPE html> <!—эта строчка позволяет менее стабильным версиям браузеров понять, что текст/документ что они дальше будут читать является написанным на HMTL языке -->
<html>
<head>[7]
<title> Название Страницы </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="Набор ключевых слов">
<link rel="stylesheet" href="файл-стилизирования-страницы.css">
</head>
<body> … </body>
</html>
2.2. «Тег» <body>
Настала пора разобрать парный «тег» <body> и его элементы.
Мной были выбраны самые часто используемые, пройдёмся по их списку в алфавитном порядке:
<a href="#"> парный «тег» </a> превращает все обрамляемые им элементы в ссылку на значение аттрибута href. Может включать в себя несколько элементов, и быть как текстом/параграфом так и картонкой/кнопкой или группой таковых. Также может сслаться на элемент на странице (для быстрой прокрутки/перехода к таковому), Делается это посредством присвоения желаемому элементу «имени» и создании ссылки на это «имя», пример:[8]
<a name="#ссылка_приведёт_к_этому_элементу">…</a> <!-- элемент к которому мы хотим вернуться/перейти. -->
<a href="#ссылка_приведёт_к_этому_элементу">…</a> <!-- нажатие на любой элемент внутри этого «тега» приведёт нас к вышеупомянотому элементу -->
Также к «тегу» <a> можно добавить аттрибут target с присвоенным значением _blank , что с английского переведётся как цель/«пустышка» соответственно, («пустышка» в данном случае – это пустая новая вкладка «веб-браузера».
Для удобства, к этому «тегу» можно дописать аттрибут title, значение которого будет описанием ссылки, и будет отоброжаться при наведении на неё курсором мышки.
<abbr> - является парным «тегом», происходит от английского abbreviation – аббривиатура, использующийся для создания «подсказок-расшифровок» для аббривиатур. Сама подсказка/расшифровка записывается в аттрибут этого «тега» - title. Например:
<abbr title="HyperText Markup Language">HTML</abbr> или
<abbr title="Cascade StyleSheet">CSS</abbr>
<b> декорационный двойной «тег» и пожалуй, один из простейших элементов форматирования текста, весь текст, что обрамляет этот элемент будет жирным </b>
<blockquote> двойной тег, текст внутри этого элемента будет иметь специальное отображение, как цитата </blockquote>[9]
<br>Иногда нужно, чтобы текст был перенесён на новою строку, вне зависимости от ширины окна/экрана.
<br>Этот «тег» переносит всё, что написанно после него на новую строку.
<br>«Тег» является непарным и не имеет аттрибутов. Происходит от английского "break" - перерыв/прерывание, часто называется "line break" = «конец линии» не дословно.
<button> создаёт кнопку, и текст внутри тега будет на кнопке, так же поддерживаются изображения. Является парным. Помимо текста можно вставить картинку. </button>
<div> Этот парный «тег» является для сайта фактически «кирпичиком, которыми построен дом [сайт]», так как он определяет раздел/секцию страницы сайта. Он автоматически обрамляет себя в переносы строки при стандартном форматировании.</div>
Следующий «тег» представляет собой скорее группу «тегов»:
<dl> <!-- этот парный «тег» представляет собой список описаний -->
<dt> Бу́ква</dt> <!-- Термин -->
<dd>графический символ фонетической письменности.</dd> <!-- Определение термина -->
<dt>Пример</dt> <!-- Другой термин -->
<dd>Описание примера</dd> <!-- и его соответствующее описание -->[10]
</dl> <!-- конец списка с определениями -->
Вот так это выглядит на практике: (см. Приложение: рис. 2)
<em> - парный «тег» выделяющий текст, на которй нужно сделать «ударение» - Emphasis, проявляется в зависимости от браузера по разному, обычно просто курсивом. </em>
<embed> - парный «тег», вставляющий/внедряющий объектов вроде «флеш-программ» или звуко/видео файлов. Используется для модулей, которые «веб-браузер» самостоятельно не распознаёт. </embed>
«Теги» форматирования размера текста, парные:
<h1> Заголовков </h1> <h2> Заголовков </h2> <h3> Заголовков </h3>
<h4> Заголовков </h4> <h5> Заголовков </h5> <!-- примерное отображение -->
<hr> «Тег» является непарным, на своём месте создаёт горизонтальную линию,
Её внешний вид зависит от настроек «веб-браузера». Обрамляет себя переносами строки.
Пример:
<i> - декорационный «тег» произошел от английского «italic» , что означает курсив. Этот «тег» парный, и как ожидалось весь текст, что этот «тег» обрамляет становится курсивом. </i>
<img src="Картинка.Формат" alt="Ой, что-то пошло не так! Тут должно быть изображение!"> - непарный «тег», вставляет в HTML документ изображение. [11]
Посмотрев на аттрибуты найдёт src указывающий адресс изображения и аттрибут alt , который содержит в себе текст, что отобразится в том случае, если картинка не сможет отобразиться по какой-либо причине.