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

Текст = <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>