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

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

Содержание:

Введение

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>, который мы рассмотрим позже.

Часто в коде страниц в интернете можно встретить его записть в формате:

Давайте разбёрем всё по порядку: type аргумент указывает тип документа, на который ссылается, не является необходимым, но помогает оптимизации страницы. rel (relation) – аргумент определяющий (как видно из перевода с английского "relation" = отношение) взаимосвязь, опять же отношение между этим документом и целевым документом «тега». HRef (Hypertext REFerence) – Гипертекстовая ссылка, ссылается на код находящийся на другой странице/в другом документе, в данном случае на файл style формата .css находящийся на сервере в той же директории (папке, в данном случае), что и .html документ.

Также "тегом" link к странице можно привязать "значок" - "иконку" - 16 на 16 пикселей (рекоммендовано) изображение формата ico или png.

Пример кода:

или

Пример: <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]

Просто описать страницу:

Добавить к ней ключевые слова для SEOптимизации:

Или просто указать авторство:

Также этот «тег» может помочь сделать сайт более «адаптивным». Поскольку интернет в современном мире доступен на множестве разных устройств, нам почти невозможно предсказать все варианты отображения нашей «веб-страницы» в браузере без данных о размере экрана/окна устройства пользователя. Это делается с помощью ключевого слова аттрибута name: viewport, спуцифицируя в аттрибуте content то, как должны измениться параметры в зависимости от размеров экрана/окна:

<base> - не парный элемент указывающий в своём аттрибуте href ссылку на «базовую» директорию (папку), в которой находится большинство контента необходимого для отображения страницы. Позволяет упростить и сократить все нижеупомянутые (после этого «тега», все находящиеся в «теге» <body>) в документе ссылки. Например:

Позволит нам позже вместо (допустим для вызова картинка):

Указать сокращение:

<img scr="картинка.формат">, так как значение аргумента href в <base> уже берётся как начало ссылки на файл.

Итак, мы рассотрели элементы «тега» <head>, но перед тем, как перейти к «тегу» <body>, я хочу превести пример среднестатистического элемента <head>, но сначала хочу рассказать о комментариях: в синтаксе html коментарии выделяются

. Что же, приступим к файлу:

<!DOCTYPE html> <!—эта строчка позволяет менее стабильным версиям браузеров понять, что текст/документ что они дальше будут читать является написанным на HMTL языке -->

<html>

<head>^[7]

<title> Название Страницы </title>

</head>

</html>

2.2. «Тег» <body>

Настала пора разобрать парный «тег» <body> и его элементы.

Мной были выбраны самые часто используемые, пройдёмся по их списку в алфавитном порядке:

<a href="#"> парный «тег» </a> превращает все обрамляемые им элементы в ссылку на значение аттрибута href. Может включать в себя несколько элементов, и быть как текстом/параграфом так и картонкой/кнопкой или группой таковых. Также может сслаться на элемент на странице (для быстрой прокрутки/перехода к таковому), Делается это посредством присвоения желаемому элементу «имени» и создании ссылки на это «имя», пример:^[8]

Также к «тегу» <a> можно добавить аттрибут target с присвоенным значением _blank , что с английского переведётся как цель/«пустышка» соответственно, («пустышка» в данном случае – это пустая новая вкладка «веб-браузера».

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

<abbr> - является парным «тегом», происходит от английского abbreviation – аббривиатура, использующийся для создания «подсказок-расшифровок» для аббривиатур. Сама подсказка/расшифровка записывается в аттрибут этого «тега» - title. Например:

<abbr title="HyperText Markup Language">HTML</abbr> или

<b> декорационный двойной «тег» и пожалуй, один из простейших элементов форматирования текста, весь текст, что обрамляет этот элемент будет жирным </b>

<blockquote> двойной тег, текст внутри этого элемента будет иметь специальное отображение, как цитата </blockquote>^[9]

<br>Иногда нужно, чтобы текст был перенесён на новою строку, вне зависимости от ширины окна/экрана.

<br>Этот «тег» переносит всё, что написанно после него на новую строку.

<br>«Тег» является непарным и не имеет аттрибутов. Происходит от английского "break" - перерыв/прерывание, часто называется "line break" = «конец линии» не дословно.

<button> создаёт кнопку, и текст внутри тега будет на кнопке, так же поддерживаются изображения. Является парным. Помимо текста можно вставить картинку. </button>

<div> Этот парный «тег» является для сайта фактически «кирпичиком, которыми построен дом [сайт]», так как он определяет раздел/секцию страницы сайта. Он автоматически обрамляет себя в переносы строки при стандартном форматировании.</div>

Следующий «тег» представляет собой скорее группу «тегов»:

<dd>графический символ фонетической письменности.</dd>

<dt>Пример</dt>

<dd>Описание примера</dd> ^[10]

</dl>

Вот так это выглядит на практике: (см. Приложение: рис. 2)

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

«Теги» форматирования размера текста, парные:

<h1> Заголовков </h1> <h2> Заголовков </h2> <h3> Заголовков </h3>

<h4> Заголовков </h4> <h5> Заголовков </h5>

<hr> «Тег» является непарным, на своём месте создаёт горизонтальную линию,

Её внешний вид зависит от настроек «веб-браузера». Обрамляет себя переносами строки.

Пример:

<i> - декорационный «тег» произошел от английского «italic» , что означает курсив. Этот «тег» парный, и как ожидалось весь текст, что этот «тег» обрамляет становится курсивом. </i>

<img src="Картинка.Формат" alt="Ой, что-то пошло не так! Тут должно быть изображение!"> - непарный «тег», вставляет в HTML документ изображение. ^[11]

Посмотрев на аттрибуты найдёт src указывающий адресс изображения и аттрибут alt , который содержит в себе текст, что отобразится в том случае, если картинка не сможет отобразиться по какой-либо причине.

Также можно при помощи аттрибутов width и height указать ширину и высоту изображения соответсвтенно.

<input> - непарный «тег», обозначающий поле ввода, будь то текст или меню выбора

Тип ввода специфицируется значением аттрибута type.

Например:

Текст = <input type="text" size="размер" name="имя"> - создаст поле ввода текста, позволяющее ввести до (размер) число символов, и присвающее этому вводу идентификатор (имя).

Выбор одного:

<input type="radio" name="имя" value="значение"> Вариант <br>

<input type="radio" name="имя" value="второе_значение"> Вариант2 <br>

Такое оформление предоставит выбор одного из двух (в данном случае) вариантов. Аттрибут value используется для идентификации варианта ответа. Отображается это так: (см. Приложение: рис.3.1)^[12]

Или при необходимости выделить более одного варианта, используется тип checkbox («коробка для галочки»):

<input type="checkbox" name="имя" value="значение"> Вариант <br>

<input type="checkbox" name="имя" value="второе_значение"> Вариант2 <br>

И выглядит следующим образом: (см. Приложение: рис.3.2)

Также можно привязать поле ввода к «тегу», который мы рассмотрим позже:

И выглядит это вот так: (см. Приложение: рис. 4)

Несмотря на наличие возможности написать текст непосредственно в «теге» input, оптимизированным и более удобным вариантом является запись через «тег» label:

<input type="checkbox" id="Вариант1"><label for="Вариант1">Вариант</label><br>

Так как такая запись привяжет значение текста внутри «тега» input к значению аттрибута for в «теге» label. И позволяет им [текстом] манипулировать даже после того, как страница отобразилась в «веб-браузере».^[13]

Например встроенные в страницу медиа, как видео и аудио элементы можно заставить начать автоматически проигрываться внутри "тега" object, при помощи кода "тега" <param> :

Также к мультимедиа как аудио и видео можно добавить управляющие элементы с помощью значения аттрибута name - controller, как показано на открывке кода ниже:

К примеру "тег" object может включить просмотр .PDF документа с помощью строки:

</object>

Этот код встроит в страницу файл PDF и придаст элементу, что его содержит размеры: ширина 750 пикселей и высота 500 пикселей. ^[14]

Сам "тег" object своим аттрибутом type поддерживает множество значений, а следовательно и типов файлов, которые мы можем встроить:

Связанные с изображениями:

image/png , image/jpeg , image/gif , image/svg+xml – позволят встроить файлы с изображениями соответствующего формата.

Связанные с видео:

video/mp4 , video/x-msvideo , video/x-msv-wmv , video/quicktime – позволяет встроить видео файлы соответствующего кодеку формата.

Или mp3 аудио:

Остальные возможности:

Документы как уже рассмотренный PDF или MicroSoft Office Word файлы с помощью:

application/msword , application/pdf.

application/x-java-applet – позволит запустить небольшое приложение на языке Java (внимание, не JavaScript, - JavaScript – язык написанный для манипуляции структуры страницы на HTML, Java же – отдельный язык программирования) ^[15]

<q> - парный декорационный «тег», форматирующий текст внутри себя как цитату. От «тега»  отличается тем, как он вставляет себя в страницу. В отличии от вышеупомянутого «тега», q не обрамляется переносом строки и отступом.

Благодаря этому может быть помещён посреди линии или блока обычного текста </q>

<s> - парный декорационный «тег», произошедший от английского «strikethrough» - перечёркнутый ~~текст~~. </s>

<select>  <option value="#"> так </option> </select>.

Пример: (см. Приложение: рис. 5)

<span> - парный «тег», почти не имеющий роли. Выделяет элемент, которому нужно применить специфическое форматирование из допустим stylesheet .css файла. Моё личное мнение - легко заменим хорошей работой с созданием идентификаторов нужным «тегам», и форматированием их через вызов идентификаторов. </span>

<strong> -декоративный парный «тег», который сообщает браузеру, что элемент «важен», и его нужно «выделить». На практике мало чем отличается от «тега» . </strong>^[16]

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

С<sub>2</sub>Н<sub>5</sub>(OH)

Отобразится как: (см. Приложение: рис. 6.1)

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

X<sup>2</sup>*X<sup>5</sup>=X<sup>7</sup>

Отобразится как: (см. Приложение: рис. 6.2)

<table>

<caption>  Домофон </caption>

^[17]

</table>

Что на странице отобразится как: (см. Приложение: рис. 7 )

<textarea rows="число_рядов" cols="число_столбцов" name="имя_поля" > - парный «тег» создающий поле для ввода текста согласно параметрам числа рядов и столбцов. Размер самого поля пользователь может менять перетаскиванием нижнего правого угла курсором мышки.</textarea>

<u> - последний декоративный «тег», что мы рассмотрим. В переводе с английского underscore = подчёркивание, подчёркивает текст обрамлённый этим «тегом» </u>

И последняя группа «тегов», что мы рассмотрим позволяет нам создавать упорядоченные/пронумерованые (или индексированные алфавитом) и неупорядоченные списки.

Это парные теги <ol> для организованного </ol> и <ul> неупорядоченного </ul> списка. Оба содержат элементы в парных «тегах» <li> </li> - list item - с английского - предмет списка. ^[18]

<ul>

</ul>

Выведет на экран: (см. Приложение: рис. 8.1 )

Но с организованным списком всё становится интереснее:

Аттрибут type в «теге» <ol> при значении:

- "1" - [единица] нумерация будет производиться форматом 1,2,3,4... .

- "I" - будет производить нумерацию римскими цифрами (I,II,III,IV...).

- "i" - будет производить нумерацию римскими цифрами нижнего регистра (i,ii,iii,iv...).

- "a" - будет производить нумерацию латиницей нижнего регистра (a,b,c,d...).

- "A" - будет производить нумерацию латиницей верхнего регистра (A,B,C,D...).

Как показанно на примере: (см. Приложение: рис 8.2 )^[19]

3. Практика

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

<!DOCTYPE html>

<html>

<head>

<title> Название «веб-страницы» </title>

<!-- здесь была бы ссылка на наш CSS файл или файл с нашим кодом JavaScript, например:

</head>

<body>

<hr> <h1> Добро пожаловать </h1>

<h2> на наш первый сайт на языке HTML </h2>

<hr> ^[20]

<p> Эта страница была написанна полностью на языке HTML, к сожалению, из-за отсутствия стилизирования на <u>CSS</u> и программируемых блоков кода <u>JavaScript</u>, функционал нашего сайта сильно ограничен. </p>

<hr> <div> Мы можем добавить ссылки на популярные сайты, например: </div>

<ul>

<li>

<a href="http://www.google.com" target="_blank" title="Нажмите, чтобы перейти на страницу Google" > Google</a></li>

<li>

<a href="http://my.megacampus.ru" target="_blank" title="Нажмите, чтобы перейти на сайт MegaCampus" >MegaCampus</a></li>

<li>

<a href="http://www.facebook.com" target="_blank" title="Нажмите, чтобы перейти на сайт FaceBook" >FaceBook</a></li>

</ul>

<hr>^[21]

<label for="отзыв"> Ваш отзыв: </label> <br>

</body> </html>

4. HTML5

В 2014 году было выпущенно обновление для языка HTML, его пятая крупная ревизия. Она одновременно и упростила написание страниц на языке HTML и в связи с растущей потребностью в мультимедиа элементах, таких как видео, аудио и изображения, было решено оптимизоровать и добавить функционал позволяющий проще встраивать такие элементы в страницы "веб-сайтов". Так как раньше для этого требовались "плаг-ин'ы" – plug-in, расширения для "веб-браузеров" позволяющие им взаимодействовать с мультимедиа контентом, но эти расширения, как Adobe Flash Player или Adobe Shockwave Player, например, часто замедляли и работу браузера, и скорость загрузки страниц содержащих поддерживаемые элементы.

Отличия HTML5.

Одним из отличий HTML5 от HTML4 ("обычной/стандартной версии" языка HTML) является добавление парных "тегов" делящих "тег" <body> на "заголовок","статью" и "конец страницы" – header, article, footer "теги" соответственно.^[22]

В зависимости от отображения в браузере, новый "тег" <details> позволяет нам создавать "скрытые", или скорее "свёрнутые" элементы, которые при нажатии ^[23]

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

Парный "тег" <iframe> позволяет встраивать внешние ресурсы, как например другие страницы сети интернет. Этот "тег" также можно форматировать с помощью "ширины и высоты" – width/height. Пример:

- этот код встроит видео с сайта www.youtube.com и с помощью аттрибута allowfullscreen, что в переводе с английского означает "разрешить полноэкранный режим" позволит нам раскрыть, расширить видео на весь экран.

"Тег" <audio>, тоже является парным и позволяет, как очевидно из названия самого "тега", встраивать аудио элементы в нашу страницу. Он также поддерживает аттрибуты для автоматического проигрывания медиа и элементов управления. Аттрибут Loop – с английского "кольцо", "закольцовывает" – зацикливает файл, заставляя его проигрываться "по-кругу". Аттрибут preload – "пред"-загрузка- позволяет сказать браузеру, что данный файл надо скачать,загрузить до того, как начнётся проигрывание. Этот "тег" также требует "источник" аудио – который помещается в непарный "тег" source:

<source src="ссылка_на_аудио_файл.формат" type="audio/формат">^[24]

Ваш браузер не поддерживает Audio "тег"

</audio>

"Тег" video имеет такой же функционал и синтаксис, как и "тег" audio, только сделан он для отображения видео. Например:

</video>

Давайте рассмотрим какие возможности для структурирования документов добавил нам HTML5. Документ или страница сайта может иметь примерно следующую структуру:

<html>

<head>

</head>

<body>

<header> Заглавная часть страницы </header>

<article> Контент </article> <!-- "статьи", их может быть несколько и одной секции. Так же как и "тег" "тела" body может содержать ^[25]

несколько "тегов" секий. -->

</section>

<footer> Концовка страницы, т.н. "подвал". </footer>

</body>

</html>

Заключение

Список литературы

(Даты обращения: 10.10.2019 - 14.12.2019 ).

Сайт https://www.w3schools.com/ - самый крупный сайт по веб-разработке в мире. Использовался в качестве справочного материала по языку HTML.

Сайт https://www.codecademy.com/learn/learn-html - использовался для дополнения знаний по написанию страниц на HTML. Содержит курс изучения языка HTML.

Сайт http://htmlbook.ru/html - использовался как справочный материал по "тегам" языка HTML.

Сайт https://webref.ru/html - использовался как справочный материал по "тегам" языка HTML.

Все изображения в приложении были получены мной функцией "захвата экрана" и перенесены в этот документ.

Единственная страница не написанная мной - рис. 1 - пример сайта MegaCampus. Само изображение было получено мной.

Приложение:

рис.1