Добавлен: 01.04.2023
Просмотров: 45
Скачиваний: 2
Также можно при помощи аттрибутов 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)
Также можно привязать поле ввода к «тегу», который мы рассмотрим позже:
<textarea name="Отзыв" cols="число_столбцов" rows="число_рядов"></textarea>
<br> <input type="submit" value="Отправить">
<input type="reset" value="Очистить">
И выглядит это вот так: (см. Приложение: рис. 4)
Несмотря на наличие возможности написать текст непосредственно в «теге» input, оптимизированным и более удобным вариантом является запись через «тег» label:
<input type="checkbox" id="Вариант1"><label for="Вариант1">Вариант</label><br>
Так как такая запись привяжет значение текста внутри «тега» input к значению аттрибута for в «теге» label. И позволяет им [текстом] манипулировать даже после того, как страница отобразилась в «веб-браузере».[13]
<object> - парный «тег», который помогает браузеру отобразить «нестандартный» объект. Обычно это объект требующий задуйствования некого модуля, например «флеш-приложение». «Тег» по функционалу очень схож с <!-- <embed> --> Также поддерживает аттрибуты width и height для задания ширины и высоты соответственно. <param> - парный «тег», который позволяет передать внедряемому в страницу элементу некий параметр и изменять его при взаимодействии.</param></object>
Например встроенные в страницу медиа, как видео и аудио элементы можно заставить начать автоматически проигрываться внутри "тега" object, при помощи кода "тега" <param> :
<param name="autoplay" value="true">
Также к мультимедиа как аудио и видео можно добавить управляющие элементы с помощью значения аттрибута name - controller, как показано на открывке кода ниже:
<param name="controller" value="true">
К примеру "тег" object может включить просмотр .PDF документа с помощью строки:
<object data="Файл.pdf" type="application/pdf" width="750" height="500">
</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 аудио:
<object data="Музыка.mp3" type="auduo/mpeg">
Остальные возможности:
Документы как уже рассмотренный PDF или MicroSoft Office Word файлы с помощью:
application/msword , application/pdf.
application/x-java-applet – позволит запустить небольшое приложение на языке Java (внимание, не JavaScript, - JavaScript – язык написанный для манипуляции структуры страницы на HTML, Java же – отдельный язык программирования) [15]
<q> - парный декорационный «тег», форматирующий текст внутри себя как цитату. От «тега» <!-- <blockquote> --> отличается тем, как он вставляет себя в страницу. В отличии от вышеупомянутого «тега», q не обрамляется переносом строки и отступом.
Благодаря этому может быть помещён посреди линии или блока обычного текста </q>
<s> - парный декорационный «тег», произошедший от английского «strikethrough» - перечёркнутый текст. </s>
<script> - Парный «тег» работает так же как в элементе <!-- <head> --> страницы. Только в <!-- <body> --> он может выполниться после тех, что указаны в «голове». Помимо просто написания текста внутри «тега», можно создать ссылку на код JavaScript аттрибутом src="#". </script>
<select> <!-- - парный «тег», создающий «выпадающий список» - форма выбора варианта, из нескольких предоставленных. Каждый элемент/вариант обрамляется --> <option value="#"> так </option> </select>.
Пример: (см. Приложение: рис. 5)
<span> - парный «тег», почти не имеющий роли. Выделяет элемент, которому нужно применить специфическое форматирование из допустим stylesheet .css файла. Моё личное мнение - легко заменим хорошей работой с созданием идентификаторов нужным «тегам», и форматированием их через вызов идентификаторов. </span>
<strong> -декоративный парный «тег», который сообщает браузеру, что элемент «важен», и его нужно «выделить». На практике мало чем отличается от «тега» <!-- <b> -->. </strong>[16]
<style> /* - как и в элементе <head> позволяет задать стиль странице/элементу с помощью CSS. В данном случае - прямо посреди html кода, без необходимости во внешних файлах. */ </style>
<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> <!-- - «тег» таблицы, ряды ограничиваются «тегом» <tr> а отдельные в них элементы - <td>. Например, этот код выводит таблицу, схожую со стандартной раскладкой домофонов. -->
<caption> <!-- парный «тег», Заглавляет таблицу --> Домофон </caption>
<!-- можно использовать парный «тег» <th> для заглавливания столбцов </th> -->[17]
<tr> <td>1</td> <td>2</td> <td>3</td> </tr>
<tr> <td>4</td> <td>5</td> <td>6</td> </tr>
<tr> <td>7</td> <td>8</td> <td>9</td> </tr>
<tr> <td>K</td> <td>0</td> <td>C</td> </tr>
</table>
Что на странице отобразится как: (см. Приложение: рис. 7 )
<textarea rows="число_рядов" cols="число_столбцов" name="имя_поля" > - парный «тег» создающий поле для ввода текста согласно параметрам числа рядов и столбцов. Размер самого поля пользователь может менять перетаскиванием нижнего правого угла курсором мышки.</textarea>
<u> - последний декоративный «тег», что мы рассмотрим. В переводе с английского underscore = подчёркивание, подчёркивает текст обрамлённый этим «тегом» </u>
И последняя группа «тегов», что мы рассмотрим позволяет нам создавать упорядоченные/пронумерованые (или индексированные алфавитом) и неупорядоченные списки.
Это парные теги <ol> для организованного </ol> и <ul> неупорядоченного </ul> списка. Оба содержат элементы в парных «тегах» <li> </li> - list item - с английского - предмет списка. [18]
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
</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>
<meta charset="utf-8">
<!-- здесь была бы ссылка на наш CSS файл или файл с нашим кодом JavaScript, например:
<link type=”text/css” rel=”stylesheet” href=”#”> -->
</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>
<textarea rows="6" cols="36" name="отзыв" placeholder="Напишите свои пожелания насчёт нашей страницы сюда... "></textarea> <br>
<input type="submit" value="Отправить">
</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. Пример:
<iframe width="600" height="340" src="https://www.youtube.com/embed/UAbVgab8ct8" allowfullscreen></iframe>
- этот код встроит видео с сайта www.youtube.com и с помощью аттрибута allowfullscreen, что в переводе с английского означает "разрешить полноэкранный режим" позволит нам раскрыть, расширить видео на весь экран.
"Тег" <audio>, тоже является парным и позволяет, как очевидно из названия самого "тега", встраивать аудио элементы в нашу страницу. Он также поддерживает аттрибуты для автоматического проигрывания медиа и элементов управления. Аттрибут Loop – с английского "кольцо", "закольцовывает" – зацикливает файл, заставляя его проигрываться "по-кругу". Аттрибут preload – "пред"-загрузка- позволяет сказать браузеру, что данный файл надо скачать,загрузить до того, как начнётся проигрывание. Этот "тег" также требует "источник" аудио – который помещается в непарный "тег" source:
<audio controls loop preload>
<source src="ссылка_на_аудио_файл.формат" type="audio/формат">[24]
Ваш браузер не поддерживает Audio "тег" <!-- текст отобразиться только в том случае, если браузер не может воспроизвести аудио файл или не "знаком" с "тегом" audio -->
</audio>
"Тег" video имеет такой же функционал и синтаксис, как и "тег" audio, только сделан он для отображения видео. Например:
<video controls loop preload>
<source src="https://www.youtube.com/embed/UAbVgab8ct8" type="video/mp4">
</video>
Давайте рассмотрим какие возможности для структурирования документов добавил нам HTML5. Документ или страница сайта может иметь примерно следующую структуру:
<html>
<head>
</head>
<body>
<header> Заглавная часть страницы </header>
<section> <!-- "секция" - часть страницы -->