Представление текста в браузере
Поможем в ✍️ написании учебной работы
Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

ВВЕДЕНИЕ

 

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

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

Профессиональные программисты и web - разработчики для создания сайтов используют различные алгоритмические языки, такие как JavaScript, Java, PHP, Python, Ruby, Perl. Дополнительно используются языки C, C++, SQL.

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

Можно создать сайт, используя паттерны (шаблоны) сайтов. В этом случае разработка сводиться к занесению контента в готовые формы. Благодаря этому значительно сокращается время создания авторского сайта, появляется возможность использования апробированных решений и схем размещения графической информации, уменьшается вероятности появления ошибок кодирования. Однако шаблон редко отвечает всем пожеланиям автора сайта. Обычно требуется определённая корректировка, порой незначительная, которая, по мнению автора, улучшает сайт.

Коррекция сайта возможна при изменении кода, с помощью которого он написан. Так как шаблоны предназначены для широкой аудитории, скорее всего, он будет написан с помощью языков HTML (язык гипертекстовой разметки) или CSS (каскадные таблицы стилей). Они могут также содержать вставленные фрагменты кода, написанные на языке JavaScript.

CSS используются для описания внешнего вида документа, написанного языком разметки. CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML или XHTML (расширяемый язык гипертекстовой разметки). XHTML разработан на основе языка XML (язык разметки). Он расширяет возможности HTM, но используется реже.

Большинство веб-страниц содержат описание разметки на языке HTML. В настоящее время актуальной версией является язык HTML5. Цель данного методического ознакомить студентов с гипертекстовой разметкой на основе HTML5. В некоторых случаях для оформления документов будут использованы элементы CSS.

Глоссарий

Бра́узер (Веб-обозреватель, Web browser) — специальная программа, предназначенная для просмотра веб-сайтов. (Internet Explorer, Microsoft Edge, Google Chrom, Yandex, Opera, Mozilla Firefox, Safari).

Гиперте́кст (hypertext) — термин, обозначающий систему из текстовых страниц, имеющих перекрёстные ссылки.

HTML (HyperText Markup Language — «язык гипертекстовой разметки») - стандартизированный язык разметки документов в сети интернет.

HTTP (HyperText Transfer Protocol - «протокол передачи гипертекста») - протокол передачи данных (изначально - в виде гипертекстовых документов, в настоящий момент для передачи произвольных данных).

HTTPS (HyperText Transfer Protocol Secure- «протокол передачи гипертекста с шифрованием») — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности.

MIME (Multipurpose Internet Mail Extensions — «многоцелевые расширения интернет-почты») - спецификация для кодирования информации и форматирования сообщений таким образом, чтобы их можно было пересылать по Интернету. Например, text/html, text/css, image/jpeg, audio/mp3, video/mp4, application/javascript.

URl (Uniform Resource Locator, «единый указатель ресурса») - единообразный локатор (определитель местонахождения) ресурса в сети или компьютере. Например, URl университета:

https://kosygin-rgu.ru/

Структура документ HTML

 

HTML-документ — это обычный текстовый документ, поэтому он может быть создан в простом текстовом редакторе (Например, в Блокноте Microsoft Windows). HTML-документ должен иметь расширение .html.

Гипертекстовый документ из дерева HTML-элементов и текста. HTML – элемент – называется тегом. Тег это символьная переменная заключённая в ломаные скобки, Например <Имя_тега>. Теги бывают начальными и конечными тегами. Большинству тегов требуется конечный тег, но не всегда. Форма начального и конечного тегов следующая:

<Имя_тега> … </Имя_тега>

Название начального и конечного тега совпадают, только перед конечным тегом располагается косая черта (слеш).Теги могут иметь атрибуты, которые задаются в теле начального тега

<Имя_тега имя_атрибута=”Объект” Значение=”Название”>

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

Теги могут вкладываться друг в друга, например,

< Имя_тега1 >< Имя_тега 2> Текст </ Имя_тега 2></ Имя_тега 1>

Следует соблюдать порядок закрывающих тегов – сначала закрываются внутренние теги, затем внешние.

Примечание  В HTML5 имеются около 100 тегов. Знать можно только основные. Назначение других тегов всегда можно посмотреть в справочнике. Краткий справочник основных тегов праведен в конце данного методического указания.

HTML-документ интерпретируется в браузере - программе просмотра Web-страниц. Распространенными браузерами являются Yandex, Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

Браузер просматривает HTML-документ, выстраивая его структуру (DOM) и отображая в соответствии с инструкциями, включёнными в теги файла. Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая такие элементы как заголовки, текст, таблицы, изображения, аудио, видео и т.д. Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала.

Современные версии браузеров правильно интерпретируют гипертекстовые документы, созданные с помощью HTML5. Упрощённая схема HTML–документа (дерево тегов) показана на рис. 1

Рис. 1

Корневым тегом дерева является тег html. Он является предком для всех остальных тегов. Теги head и body предки для нижерасположенных тегов. Сами эти теги – потомки тега html. Теги одного уровня, такие как head и body, являются сестринскими элементами. Дочерний тег — элемент, непосредственно подчинённый другому тегу, расположенному на один уровень выше. В этом случае верхний тег является родительским по отношению к дочернему.

Базовый HTML5-документ имеет вид

<! DOCTYPE html >

<html>

<head>

  <title> Заголовок документа <?/title>

<meta charset="UTF-8">

</ head >

< body >

       Контент документа

</ body >

</ html >

 

Декларация !DOCTYPE является первой и отвечает за корректное отображение веб-страницы браузером.

Примечание (Можно пропустить).

В HTML 5 не требуется обязательного объявления DOCTYPE. Если документ создаётся на основе XML то он может включать декларацию XML

<? xml version =”1.0” encoding =” UTF -8”?>

encoding указывает на тип кодирования символов (юникод, 8 бит).

Описание документа, созданного в XHTML гораздо сложнее:

<!DOCTYPE html PUBLIC”-//W3C//DTD 1.0 Transitional //EN

http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd>

<html xmlns=http://www.w3.org/1999/xhtml xml:lang=”en” lang=”en”>

Здесь определяет тип документа, дается ссылка на интернет ресурс, в котором описаны спецификации и теги языка XHTML , указывается язык текста,

Как было указано выше, тег html является корневым элементом документа. Все остальные элементы содержатся внутри тегов < html >...</ html >. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и не обрабатывается. Для элемента доступны некоторые атрибуты, которые будут описаны в случае необходимости.

Раздел <head>...</head> содержит техническую информацию о странице, которая включает заголовок, описание, ключевые слова, кодировку и т.д. Введённая в нем информация не отображается в окне браузера, однако содержит данные, указывающие, как следует обрабатывать страницу.

Тег <title> является обязательным тегом раздела <head> . Текст, размещённый внутри этого тега, отображается в строке заголовка браузера. Длина заголовка должна быть не более 60 символов.

<meta>- это необязательный тег раздела <head>. Он не имеет конечного тега! С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>.

В примере, приведенном выше, <meta> указывает на тип кодировки символов.

Если хотите указать себя, как автора документа, то

<meta name=”autor” content=”Фамилия Имя”

Раздел <body> … </ body > предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

В HTML можно размещать комментарии для разъяснения кода. Комментарий в HTML-коде задаётся так:

<!-- текст комментария -->

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

Конструкция комментария часто использовать для временного отключения кода. Временно удалять часть кода, а потом его восстанавливать не удобно. Проще закомментировать его (напечатав специальные знаки комментария), а потом раскомментировать (стереть специальные знаки) - это самое лучшее решение.

Комментарии можно использовать в любом месте страницы, кроме тега < title > — внутри него они не работают.

Примеры вывода текста

 

HTML документ, демонстрирующий теги:

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Book</title>

<meta charset="utf-8">
<meta name="description" content="Обложка книги">
<meta name="keywords" content="Роберт Стивенсон, Остров сокровищ">

<title></title>
</head>

<body>

<div align="center"><h3>Роберт Льюис Стивенсон</h3></div><br />
<div align="center"><h2>Остров Сокровищ</h2></div><br />
<div align="center"><hr /><h3>Лабиринт, 2018</h3></div>

</body>
</html>
</html>

 

Задание 2.

Скопируйте выше приведённый текст в Блокнот и сохраните файл с расширением .html. Запустите файл. В результате на экране монитора должен появится текст (рис. 3).

Рис. 3

Выравнивание текста осуществляется с помощью атрибута align. Другие значения атрибута align – это “left” (влево), “right” (вправо), “justify’ (равномерно).

Для того, чтобы сделать текст цветным, скорректируем раздел <body> так

<body>
 
    <div style="color:#ff0000" align="center"><h3 >Роберт Льюис Стивенсон</h3></div><br />
  <div style="color:#00ff00" align="center"><h2 >Остров Сокровищ</h2></div><br />
  <div style="color:#0000ff" align="center"><hr /><h3 >Лабиринт, 2018</h3></div>
   
</body>

Цвет устанавливается шестнадцатеричным числом с цветовой схемой RGB. Каждый из базовых цветов может принимать значения от 0 до 255 или в шеснадцетиричной нотации (#rr,#gg,#bb) от #00 до #ff. Например, #ffffff – белый цвет, а #000000 - чёрный. В старой версии интернет документов цвет может быть указан триадой как #fff.

Цвет можно указывать и словами, зная английское название цветов.

Изменённый HTML файл раскрасит текст (рис. 4).

Рис. 4

Для примера воспользуемся некоторыми элементами CSS для оформления текста.. Создадим вокруг текста цветной фон. Кроме того сделаем темнее текст названия произведения (#00с000).

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Book</title>
<meta charset="utf-8">
<meta name="description" content="Обложка книги">
<meta name="keywords" content="Роберт Стивенсон, Остров сокровищ">
<title>Рамка вокруг текста</title>
<style >
div {
  width: 40%; height: 15%;
  background: #ffcc00;
  outline: #000000;
  display: inline-block;
   }
</style>
</head>
<body>
 
<div style="color:#ff0000" align="center"><h3>Роберт Льюис Стивенсон</h3></div><br />
<div style="color:#00с000" align="center"><h2>Остров Сокровищ</h2></div><br />
<div style="color:#0000ff" align="center"><hr /><h3>Лабиринт, 2018</h3></div>
 
</body>
</html>

Параметры оформления в стиле CSS располагаются в разделе <style>. Параметры ширины (width) и высоты (height) могут быть в пикселях (px) или в процентах от размеров экрана. Средство background задаёт цвет фона, а outline устанавливает цвет, стиль и толщину внешней границы. Результат запуска HTML документа показана на рис. 5.

Рис. 5

Задание 3

Наберите и сохраните HTML документ, представленный ниже. Запустите его.

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
<title>Выравнивание слоя по центру</title>
<style>
.center {
width: 200px; /* Ширина элемента в пикселах */
padding: 10px; /* Поля вокруг текста */
margin: auto; /* Выравниваем по центру */
background: #fc0; /* Цвет фона */
}
</style>
 </head>
 <body>
<div class="center"><h3 style="color:#ff0000" align="center">Роберт Льюис Стивенсон</h3><br />
<h2 style="color:#00с000" align="center">Остров Сокровищ</h2><br /><hr />
<h3 style="color:#0000ff" align="center">Лабиринт, 2018</h3>
</div>
 </body>
</html>

 

В разделе <style> описан класс .center, который используется для форматирования раздела <div>. В документе показана нестандартная форма комментариев, в стиле языка С - /* */. Браузер все равно воспринимает их как комментарии.


 






























































HTML редакторы

 

С помощью программы Блокнот в принципе можно создать любой гипертекстовый документ. Однако существую специальные редакторы HTML, в которых набирать гипертекст гораздо удобнее. Наиболее популярные редакторы гипертекста Notepad++, Brackets, Coffecup, NoteTab, Eclipse, HTML-Online, BlueGriffon, Emacs и Atom. Указанные редакторы либо бесплатны, либо имеют бесплатные версии.

Из перечисленных выше можно выбрать любой редактор. В данном пособии будем использовать программу CoffeeCup Free HTML Editor. Скачать бесплатную версию программы можно на сайте

https://www.coffeecup.com/free-editor/

После скачивания (zip файл) программу нужно разархивировать и установить. После установки на рабочем столе появится значок (рис. 6)

Рис. 6

При первом запуске программы необходимо настроить её на русский язык. Для этого в меню Tools- Preferences - Customization - Modify Highlighting... - Charset - Russian - ОК.

Стартовое окно в программе имеет вид (рис. 7)

Рис. 7

Если нажать кнопку New Blank Page (новая страница), то на экране монитора будет шаблон для создания HTML документа (рис. 8)

Рис. 8

В шаблон нужно внести некоторые изменения, например, в теге <html> заменить английский язык на русский, например:

<html lang=”ru”>

Строку <meta name=”generator”> можно убрать, если Вы не хотите указывать программу, использованную для разработки документа.

В теге <meta name="description" content="… ">после слова content в кавычках следует описать содержимое страницы, а в теге <meta name="keywords" content=" …"> ключевые слова через запятую. Ключевые слова используются в интернет поисковыми машинами. Есть шанс, что когда-нибудь поисковой запрос изобразит заголовок Вашего документа на чьем-то компьютере для ссылки.

Как помним в документе имеется один раздел < body >. Первый раздел < body > в примере закоментирован и браузером не рассматривается. Если его разкоментировать (удалить <!- - и - ->), то второй <body>, расположенный ниже, надо будет убрать.

В первом <body> приведены инструкции в стиле CSS, для оформления документа. Их можно использовать не изменяя или изменить цвет фона, указать URl файла фонового рисунка.

Закрашенный серым цветом фрагмент – это обращение к скрипту, написанном на JavaScript. Его можно удалить, если вы не пользуетесь скриптами.

Для создания собственного HTML документа целесообразно щёлкнуть на закладке Code в левой стороне экрана. Тогда в левом столбце появится список всех тегов (рис. 9).

Рис. 9

Любой тег будет перенесён в документ (в место, указанное курсором), если по тегу дважды щёлкнуть мышью.

При наборе тегов выпадает дополнительное меню, позволяющие выбирать необходимые атрибуты, ускоряя набор.

Задание 4

Очистите рабочее окно редактора CoffeeCup Free HTML Editor. Скопируйте текст HTML из параграфа 7 в рабочее окно. Имейте ввиду то, двойные кавычки в текстовых редакторах (исключая Блокнот) отличаются от кавычек в HTML. Кавычки в HTML прямые ("), а в текстовых редакторах изогнутые (“). В документе, скопированном HTML редактор все кавычки необходимо перебить! Теперь текст в рабочем окне можно редактировать, добавлять теги, изменять текст и т.д.

Проверить внесённые изменения можно без сохранения файла. В закладке меню Tools можно выбрать Test With Default Browser (рис. 10) или просто на клавиши Ctrl+F9 одновременно. Можно найти и альтернативный браузер, выбрав Aditional Browser в закладке Tools.

 

Рис. 10

Сохраните файл с расширением .html.

 

Таблицы

 

Тег <table> … </ table> служит контейнером для создания таблиц. Другие теги для создания таблицы это:<caption> - заголовок таблицы, <th> - ячейка заголовка таблицы, <tr> - строки таблицы, <td> - ячейки, <border> граница ячеек и всей таблицы.

В теге <table> ширина таблицы задаётся атрибутом width. По умолчанию таблица занимает всю ширину или width : 100%.

Фиксированную ширину таблицы можно задать и в пикселях. В этом случае таблица становится «жёсткой», не изменяемой от разрешения экрана. При низком разрешении таблица будет большой, высоком - маленькой. Например:

<table width: 600px >

Сразу за тегом <table> следует тег <caption>.

<table>

<caption> Перечень изделий </caption>

Ячейки заголовка таблицы описываются после заголовка

<tr>

<th> № п/п </th>

<th> Наименование </th>

<th> Количесто </th>

<th> Цена за ед. товара </th>

<th> Стоимость </th>

</tr>

Две строки таблицы в качестве примера

<tr>

<td> 1 </td>

<td> Термос </td>

<td> 2 </td>

<td> 300 </td>

<td> 600 </td>

</tr>

<tr>

<td> 2 </td>

<td> Электрочайник </td>

<td> 3 </td>

<td> 900 <td>

<td> 2700 </td>

</tr>

Тег <th> предназначен для ячейки заголовка, а <td> - тела таблицы.

Выравнивание текста по горизонтали внутри отдельной ячейки можноь задать атрибутами left (влево), rigth (вправо), center (по центру), justify (равномерно). Аналогично выравнивание по вертикали осуществляться атрибутами top (в верх), bottom (в низ), middle (по средине), baseline (линии выравниваются по высоте во всех горизонтальных ячейках одинаково).

 

Полный вариант документа HTL с таблицей

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Сб, 19 янв 2019 01:22:50 GMT">
<meta name="description" content="Пример таблицы">
<meta name="keywords" content="Table, goods">
<title></title>
</head>
<body>
 <table width: 600px >
<caption> <h3>Перечень изделий</h3> </caption>
<tr>
     <th> № п/п </th>
     <th> Наименование </th>
     <th> Количесто </th>
     <th> Цена за ед. товара </th>
     <th> Стоимость </th>
   </tr>
<tr>
   <td align=center> 1 </td>
     <td align=center> Термос </td>
     <td align=center> 2 </td>
     <td align=center> 300 </td>
     <td align=center> 600 </td>
   </tr>
   <tr>
     <td align=center> 2 </td>
     <td align=center> Электрочайник </td>
     <td align=center> 3 </td>
     <td align=center> 900 </td>
     <td align=center> 2700 </td>
   </tr>
 </table>
</body>
 </html>

Задание 5

Перенесите текст HTML документа с таблицей в CoffeeCup Free HTML Editor. Нажмите Ctrl + F9 и проанализируйте таблицу

По умолчанию таблица и ячейки не имеют границ. Их можно задать с помощью атрибута border . Установите границу шириной 1px, изменив тег <table> в тексте документа в самом редакторе.

<table width: 600px border="1px">

Проверьте изменения в CoffeeCup Free HTML Editor

 

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

Задание 6

Скопируйте HTML документ в редактор и нажмите Ctrl+F9. Проанализируйте полученную таблицу.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Сб, 19 янв 2019 01:22:50 GMT">
<meta name="description" content="Пример таблицы">
<meta name="keywords" content="Table, goods">
<title></title>
</head>
<body>
 <table width: 600px border="1px">
<colgroup>
<col span="2" style="background-color:Khaki">
<col style="background-color:LightCyan">
</colgroup>
<tr>
<th>Город</th>
<th>Улица</th>
<th>Дом </th>
</tr>
<tr>
<td>Воронеж</td>
<td>Улица Генерала Лизюкова</td>
<td align="center">27</td>
</tr>
<tr>
<td>Кондапога</td>
<td>Бумажников </td>
<td align="center"> 1</td>
</tr>
</table>
</body>
</html>

Скопируйте ниже приведённый текст в редактор и нажмите Ctrl+F9. Проанализируйте результат.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Ср, 23 янв 2019 15:18:12 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>

</head>
<body>
<table width: 600px border="3px">
<caption> <h3>Перечень ячеек</h3> </caption>
<tr>
   <th>Столбец 1</th>
   <th>Столбец 2</th>
   <th>Столбец 3</th>
   </tr>
  <tr>
<td>Ячейка 1.1</td>
<td>Ячейка 1.2</td>
<td>Ячейка 1.3</td>
</tr>
  <tr>
<td colspan="2" style ="text-align: right">Ячейка 2.1</td>
<td>Ячейка 2.2</td>
</tr>
</body>
</html>

Здесь первая и вторая ячейка нижней строки таблицы объединены, и текст сдвинут вправо.

Примечание. Разделы таблицы можно группировать с помощью тегов <thead>, <tfoot>, <tbody>. Теги должны располагаться именно в таком порядке, после тегов <table>, <caption>, <colgroup>. Тег <thead> создает группу строк для заголовков, а тег <tfoot> - строки итогов в таблице. Соответсвенно <tbody> группирует основное содержание таблицы.

Если не копировать текст и методического указания, а набирать <table >, <tr >, <td >, то после набора < CoffeeCup Free HTML Editor предложит список тегов для дальнейшего ввода. Аналогично и после ввода пробела после имени тега, редактор предложит ряд атрибутов. Если, например, выбрать атрибут <style>, то после ввода букв редактор покажет атрибуты, которые можно использовать для стиля оформления. Описание всех атрибутов потребовало бы очень много места. К счастью назначение атрибутов можно понять по их названию. Например используя соответствующие атрибуты, можно задать цвет шрифта и цвет фона, установить ширину и цвет границы, задать выравнивание текста и т.д.

11.Тег <a> - anchor (якорь). Создание ссылок

 

Тег < a ></ a > определяет ссылки. HTML ссылки связывают между собой миллиарды web-страниц и миллионы сайтов. Без ссылок нет интернета. В HTML документе могут быть ссылки, указывающие на связь,:

l Внутри документа;

l С другим документам сайта на том же компьютере;

l С другим документом в сети интернет.

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

<p id=”lebel”>

Внутри документа обратится к метке можно с помощью тега

<a href=”#lebel”>

Обязательным параметром тега<a>является атрибут href, который задаёт адрес метки.

Например, для ссылки на файлы, в том числе и лежащих на других сайтах, используются URl (единый указатель ресурсов). В общем виде URl имеющий следующий формат:

метод доступа://имя сервера:порт/путь

Метод доступа - это file , http , https , ftp , mailto, и др. Методы http , https , ftp используются для ссылок на внешние сайты. http и https - стандартные протоколы интернета, ftp - протокол передачи файлов.

Ссылка на внешний сайт

<a href=”http://site/index.html”> </a>

Внешний HTML документ может быть запущенным в новом окне и в старом, в окне документа. За это отвечает атрибут target. Если target ="_ blank", то открывается новое окно, например,

<a href=”http://site/index.html” target=”_blank”> </a>

Для открытия документа в старом окне target ="_ self ", в полноэкранном размере target ="_ top "

Если в адресе имя сервера не указано, то ссылка считается локальной, т.е. она относится к документу на том компьютере, на которой находится исходный HTML-документ.

<p><a href="page2.html">Переходим на документ page2.html в той же папке, где расположен исходный документ</a>/p>

<p><a href="/page3.html">Переходим на документ page3.html в папке, где расположенной папки с исходным документ</a>/p>

<p><a href=”/c:/images/page4.html"> На текущем компьютере переходим на документ page4.html, путь к которому указан от корневой папки компьютера </a></p>

Для ссылки на документ на локальном сайте можно использовать протокол file.

<p><a href="file:/C:/Users/p001/Desktop/HTML5/A4.html/" target="_blank"> Обращение к документу A4.html</a></p>

Примечание Существуют специальные ссылки, позволяющие вызвать программу электронной почты (mailto :), набрать телефонный номер (tel :), вызвать по скайпу (skype :) и т.д.



































































































Вставка изображений

 

Тег < img > служит для представления изображений в браузере. Тег < img > не имеет конечного тега! Обязательными атрибутами тега являются src и alt. Значением src является абсолютный или относительный путь к изображению. Атрибут alt - это резервный контент. Если по каким либо причинам изображение не может быть показано, то выводится просто текст, указанный атрибутом alt.

<img src=”image.png” alt=”Изображение не может быть выведено”>

Без задания размеров изображение отображается на странице в реальном размере, как в исходном файле. Отредактировать размеры изображения можно с помощью атрибутов width и height. Ширина и высота задаётся в пикселях или %.

<img src="/C:/Users/p001/HTML5/flowers.png" alt="Цветы" width: 200px heght: 300px>

Изображения в интернет могут иметь следующие форматы: jpeg , gif , png , apng , svg , bmp , ico. Файлы gif и anpg могут содержать элементы анимации.

Иногда на изображении необходимо выделить область, нажав на которую, будет осуществлён переход на метку в самом документе или вызван файл из интернета. Для создания активной области используются теги <map> и <area>.

Тег <map> служит для представления графического изображения в виде карты с активными областями. Тег <map> должен быть связан с тегом <img> посредством имени

<img scr="flowers.png" usename="#карта_цветы">

<map name="карта_цветы">

<area атрибуты>

</map>

 

Для описания активной области используется тег <area>. Он не имеет закрывающего тега. На одном рисунке может быть несколько активных областей. Выделенная область может быть в виде прямоугольника, круга, многоугольника.

Активная область - прямоугольник 100х100 с верхним левым углом в точке 400, 3. В случае попадания в активную область в новом окне вызывается статья из википедии «Лист».

<area shape="rect" coords="400, 3, 500, 103" href="https://ru.wikipedia.org/wiki/Лист" alt=”Статья Лист" target="_blank">

Активная область - окружность радиусом 40 с центром в 450, 50.

<area shape="circle" coords="450, 50, 40" href="https://ru.wikipedia.org/wiki/Стебель" alt="Статья Стебель" target="_blank">

Активная область многоугольник с углами в указанных точках.

<area shape="poly" coords="190,1,240,90,140,90,190,13" href="https://ru.wikipedia.org/wiki/Цветок" alt="Статья цветок" target="_blank">

 

Задание 7

С помощью CoffeeCup Free HTML Editor создайте HTML документ, при запуске которого загрузится файл изображения. Задайте на изображении активные зоны, при нажатии на которых откроется новое окно и в него загрузится статья из википедии.

Внедрение Аудио

 

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

<audio src="music_file.mp3" сontrols autoplay loop>

Здесь music _ file . mp 3 звуковой фай, атрибут с ontrols выводит элементы управления воспроизведением(кнопку Play, полосу прокрутки).

Атрибут autoplay указывает, что воспроизведение звукового файла начнётся сразу после загрузки HTML-документа.

Многократное проигрывание файла задаёт атрибут loop.

Тег <muted> отключает звук, но не останавливает проигрывания файла

В интернет используются звуковые файлы с различными расширениями - mp 3, mp 4, webm , wav , ogg vorbis. К сожалению ни один из популярных браузеров не воспроизводит файлы всех форматов. Есть вероятность, что на каком-либо компьютере в сети звуковой файл воспроизводится не будет.

Для доступности контента максимально широкой аудитории рекомендуется включать несколько источников звука, представленных с использованием атрибута src элемента < source >. Одновременно можно добавить резервный контент с тегом <a> для браузеров, которые не поддерживают элемент <audio>.

<audio controls>

<source src=”name.ogg” type=”audio/ogg”>

<source src=”name.mp3” type=”audio/mpeg”>

<source src=”name.webm” type=”audio/webm”>

<a href=”/c:/User/p001/sounds/name.wav>

</audio>

 

Примечание Для воспроизведения звуковых файлов используются аудио кодеки. Они нужны для сжатия звуковой информации для уменьшения объёма и увеличение скорости передачи. Наиболее распространённые аудио кодеки: MP3, ACC, Ogg Vorbis. Большинство аудиокодеков - это программы, которые взаимодействуют с аудиоплеером. Имеются и аппаратные аудиокодеки, устанавливаемые на материнскую плату или звуковую карту.Если на компьютере нет требуемого звуковым файлом аудио кодека, файл воспроизводится не будет.Возможно потребуется установка нового кодека.

Задание 6

Создайте HTML документ с вызовом звукового файла.

Примечание. Чтобы услышать звук надо подключить колонки или наушники ☺

Внедрение Видео

 

Тег <video> атрибутами очень похож на тег < img >, а проблемой с кодеками на тег <audio>. Дополнительным значимым атрибутом является атрибут poster, который указывает на местонахождения файла изображения, который загружается в окно как заполнитель перед началом воспроизведения видео.

<video src=”/moves/cinderalla.ogv” heght=”480” poster=”mainimg.jpg” type=”video/ogg codecs=’theora, vorbis’”>

Ваш браузер не поддерживает элемент <code>video</code>

</video>

Если на компьютере отсутствует указанный кодек, будет выведен только текст.

В теге<video> можно использовать атрибуты autoplay , loop , muted.

Любой видеофайл является файловым контейнером. В нем хранятся в аудио- и видеодорожки, титры, субтитры и др.

Приложение . К популярным форматам видеоконтейнеров относятся следующие:

1.Ogg (.ogv, .oga, .ogx, .ogg)- контейнер. для видеокодека Theora и аудио -Vorbis. Работает в Firefox, Chrome и Opera. MIME-тип: video/ogg.

2.MPEG 4 (.mp4) - контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео для всех устройств, таких как iPhone, Android. MIME-тип: video/mp4.

3.WebM (.webm) - контейнер видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm.

4.Audio Video Interleave (.avi) - предназначен для записи звука и изображений, соответствующих спецификации RIFF. MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo.

Matroska (.mkv) - видеоконтейнер, который может содержать видео в формате H.264, VP8 или Theora.MIME-тип: video/x-matroska, audio/x-matroska .

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

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

Формат видео файла Видео кодек Аудио кодек
.mp4 H.264 ACC
.ogg/.ogv Theora Vorbis
.webm VP8 Vorbis

 

К сожалению файлы с популярным расширением .avi в HTML5 не поддерживаются. Их надо преобразовать с помощью одного из конверторов, типа Movavi или Online-convert. Конвертор Online-convert работает в интернете и его устанавливать не нужно.

Для размещения видео на сайте необходимо выполнить следующие действия.

Декодируйте видео файл конвертором c соответствующими видео- и аудио кодеками:

Файл A / V Кодеки
.mp4 H.264 / ACC
.webm VP8 / Vorbis
.ogv Theora / Vorbis

 

Создадим файл .htaccess с содержанием

AddType video/ogg ogv
 AddType video/mp4 mp4
 AddType video/webm webm

Файл должен быть расположен в той папке, где и HTML документ.

<video controls height="538" poster="/examples/media/film.png" preload="none">
<source src="/examples/media/film.mp4" type="video/mp4">
<source src="/examples/media/film.webm" type="video/webm">
<source src="/examples/media/film.ogv" type="video/ogg">
</video>

Тег <video> со всем содержимым можно обернуть в контейнер (например, <div>), а в теге контейнера указать размеры окна видеоплейера и его положение на странице.








Введение ролика с YouTube

 

На YouTube находятся миллионы видеороликов и можно воспользоваться ими для украшения Вашего сайта (Не забутьте об авторских правах!).Выберите понравившиеся видео на YouTube. Нажмите на надпись Поделиться (рис. 11).

Рис. 11

В выпавшем окне выберите значок <> (Встроить) (рис. 12).

 

Рис. 12

Выделите текст, заключенныq в теге <iframe> … </iframee> (рис. 13) и, вместе с ограничивающими тегами, вставьте его в HTML документ в раздел <body>.

 

Рис. 13

Текст HTML документа приведён ниже.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Сб, 19 янв 2019 01:22:50 GMT">
<meta name="description" content="Видео с YouTube">
<meta name="keywords" content="Video">
<title>Exemple Video</title>
</head>
<body>
<iframe height="315" src="https://www.youtube.com/embed/4n8mrWEOJ_s"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</video>
</body>
</html>

 

Тег <iframe> … </iframe> создаёт встроенный фрейм (рамку), загружая в текущий HTML документ другой документ. В данном случае видеоролик.

Задание 7

Создайте HTML документ с видеороликом из YouTube.


















Background фон

Border           граница

Line                строка

Padding        отступ

 

 

Задание 8

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

Доменное имя и хостинг

 

Создание HTML документов и связанных сними файлов, сборка и отладка сайта возможна как на персональном компьютере, так и удалённом сервере. Сайт, созданный на персональном компьютере, можно использовать даже при отсутствии сети интернет, например для презентации контента сайта.Тогда все материала сайта для мобильности лучше сохранить на флешке или на облачном ресурсе, как Яндекс-диск или Google-диск.

Когда персональный компьютер постоянно подключён к интернет, возникает мысль разместить разработанный веб-сайт физически на жёстком диске компьютера и сделать его доступным для других интернет-пользователей. Такое решение в принципе возможно, но надо иметь в виду следующее. Каждый сайт создаётся для привлечения как можно большего количество пользователей. В результате интернет трафик компьютера будет очень большой. Это потребует: подключение компьютера к интернету с помощью выделенного оптического канала, увеличение мощности и скорости работы компьютера, установки специальных серверных программ. И надо быть готовым к увеличению платы за интернет и электричество.

Реализация данной идеи является сложной задачей. Гораздо проще воспользоваться размещением веб-сайт на удалённом сервере. Это и есть хостинг. Хотя хостинг обычно платный, использование его гораздо экономичнее, чем создание домашнего веб-сервера.

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

Названия могут совпадать, только если они принадлежат различным доменным зонам. Обычно доменная зона для сайтов Российской Федерации –это . ru для названий на латинице или .рф для названий на кириллице.

Самый простой способ регистрации доменных имён в России – это использование сайта https :// www . reg . ru / .

На страницу сайта надо внести название сайта и выбрать доменную зону. Например, Вы хотите зарегистрировать название сайта как mojgraphdesign в доменной зоне . ru (рис. 15).

Рис. 15

Название надо проверить, нажав на клавишу Подобрать.

Сайт регистрации показывает, что данное название может быть выбрано (рис. 16). Стоимость регистрации 199 рублей на 1 год.

Рис. 16

Сайт предлагает и другие названия для сайта (рис. 17).

Рис.17

Если нажать на клавишу Зарегистрировать (рис. 18), откроется страница оплаты. После оплаты доменное имя будет зарегистрировано.

Рис. 18

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

В разделе Хостинг и серверы сайта reg . ru можно заказать платный хостинг с выбранными параметрами (рис. 19).

Рис. 19

Обратите внимание: на сайте указана стоимость хостинга за один месяц.

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

Если Вы решили выбрать для хостинга reg.ru, то необходимо зарегистрироваться (рис. 20).

Рис. 20

После регистрации надо через личный кабинет осуществить вход в «Панель управления хостингом» (ISP Manager). Для размещения сайта на сервере хоста следует выбрать в панели навигации (слева) Главное -> Менеджер файлов. В рабочей области (справа) надо найти папку www и открыть её. В ней должна быть папка с вашим доменным именем. Если её нет, то такую папку надо создать. В этой папке и будет размещаться Ваш сайт. Файлы в доменную папку переносятся с помощью меню Закачать. Скорее всего, Ваш сайт помимо файлов будет содержать и папки, например, как показано на рис. 21.

Рис. 21

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

Примечание Такой вариант переноса файлов не является эффективным. Лучше присоединится к хосту как ftp-серверу (если вы знаете, что это такое) и скопировать файлы и папки с помощью ftp-клиента. В качестве последнего можно использовать Total Commander, FAR или FileZilla.

С помощью ISP Manager можно просматривать, редактировать, архивировать, удалять файлы.

По завершении процесса надо закрыть reg.ru . Для проверки введите в браузере доменное имя. Должен открыться Ваш сайт.

Много сайтов предлагают услуги хостинга. Их можно найти в интернете. Например, очень популярный сайт Hoster.ru. Он так же позволяет зарегистрировать доменное имя. Сайт предоставляет бесплатный тестовый период в течение 10 дней. Он также имеет конструктор сайтов с большим количеством шаблонов. О конструкторах сайтов поговорим ниже.

Конструктор WIX

 

Конструктор WIX расположен по адресу. После регистрации на сайте, WIX просит заявить о своих намерениях (рис. 29).

https://ru.wix.com/

Рис. 29

Советуем Вам Просмотреть рекомендации. Они помогут создать сайт. Можно стазу выбрать шаблон, или продолжить отвечать на вопросы. Во втором случае выбираем:

· Портфолио графического дизайнера

· Пропустить

· Дизайн

· Ваш адрес (можно пропустить)

· Укажите стиль

· Выберите шаблон сайта

· Нажмите кнопку, расположенную справа внизу и преступайте к редактированию

Опубликуйте сайт с предложенным доменным именем.

Если у Вас есть зарегистрированный домен, подключите его.

Конструктор WordPress

 

Конструктор WordPress ещё один популярный конструктор сайтов. Для нахождения конструктора необходимо внести в поисковик интернета

https://ru.wordpress.com

Как и в случае с WIX на WordPress надо зарегистрироваться.

Шаблоны находятся в разделе Настройки -> Темы .

С помощью конструктора внесите изменения в шаблон. Сохраните сайт.

 

Задание 10.

Создайте окончательный вариант Вашего авторского сайта с помощью конструктора WIX или WordPress. Просмотрите HTML код.

 


Краткий справочник по тегам

 

СХЕМА ДОКУМЕНТА

<DOCTYPE> Тип документа
<html> HTML документ
<head> Информация страницы
<body> Содержание страницы

 

КОМЕНТАРИЙ

<!-- … --> Текст комментария

 

ИНФОРМАЦИЯ О СТРАНИЦЕ

<base> Базовое имя пути для URL
<meta> Мета данные
<title> Название документа
<link> Связь с документом
<style> Стиль
<script> Скрипт

 

СТРУКТУРА ДОКУМЕНТА

<header>  Верхний колонтитул  
<footer>  Нижний колонтитул  
<nav> Блок навигации  
<main> Основное содержимое документа  
<div> Раздел  
<section> Универсальный раздел документа  
<article> Статья  
<h1>, …, <h6> Заголовок  
<span> Внутренний раздел  
<p> Абзац  
<br /> Разрыв строки  
<hr /> Горизонтальная линия  

 

ССЫЛКИ

<a href=” ”> Ссылка на страницу
<a href=”mailto”> Ссылка на эл. почту
<a href=”name”> Якорь (метка)
<a href=”#name”> Ссылка на якорь

РАЗМЕТКА ТЕКСТА

<b> Полужирный шрифт 
<strong> Текст, требующий внимание
<em> Курсив
<blockquote> Длинные цитаты
<q> Короткие цитаты
<abbr> Аббревиатура
<acronym> Акроним
<address> Адрес
<pre> Отформатированный текст
<mark> Выделение жёлтым
<dfn> Определение
<code> Код
<cite> Цитирование
<del> Удаленный текст
<ins> Вставленный текст
<small> Уменьшенное начертание шрифта
<sub> Нижний индекс
<sup> Верхний индекс
<bdo> Направление текста

 

СПИСОК

<ol> Упорядоченный список
<ul> Неупорядоченный список
<li> Элемент списка
<dl> Список определений
<dt> Термин определений
<dd> Описание элемента

 

ФОРМЫ

<form> Форма
<fieldset> Набор полей
<legend> Заголовок группы
<table> Связь метки и элемента
<input> Выпадающий список
<select> Группа операций
<optgroup> Контейнер группы
<option> Пункт опции
<textarea> Поле для текста
<button> Кнопка

 

ТАБЛИЦЫ

<table> Таблица
<caption> Заголовок таблицы
<thead> Верх таблицы
<tbody> Тело таблицы
<tfoot> Низ таблицы
<colgroup> Группа колонок
<col> Колонка
<tr> Строка таблицы
<th> Ячейка загаловка
<td> Ячейка таблицы

 

ИЗОБРАЖЕНИЯ

<img> Изображение
<map> Карта изображения
<area> Активная область карты

 

СТАНДАРТНЫЕ СИМВОЛЫ

&#34 Кавычка "
&#38 Амперсанд &
&#60 Меньше <
&#62 Больше >
&#64 Коммерческое эт @
&#128 Евро ?
&#149 Пуля •
&#153 Товарный знак ®
&#160 Неразрывный пробел
&#163 Фунт стерлингов £
&#169 Копирайт ©

 

ОБЪЕКТЫ

<object> Объекты
<param> Параметр

 

Интернет источники

1. https://html5book.ru/html-html5/

2. http://htmlbook.ru/samcss/vvedenie-v-css

3. http://ab-w.net/



ВВЕДЕНИЕ

 

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

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

Профессиональные программисты и web - разработчики для создания сайтов используют различные алгоритмические языки, такие как JavaScript, Java, PHP, Python, Ruby, Perl. Дополнительно используются языки C, C++, SQL.

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

Можно создать сайт, используя паттерны (шаблоны) сайтов. В этом случае разработка сводиться к занесению контента в готовые формы. Благодаря этому значительно сокращается время создания авторского сайта, появляется возможность использования апробированных решений и схем размещения графической информации, уменьшается вероятности появления ошибок кодирования. Однако шаблон редко отвечает всем пожеланиям автора сайта. Обычно требуется определённая корректировка, порой незначительная, которая, по мнению автора, улучшает сайт.

Коррекция сайта возможна при изменении кода, с помощью которого он написан. Так как шаблоны предназначены для широкой аудитории, скорее всего, он будет написан с помощью языков HTML (язык гипертекстовой разметки) или CSS (каскадные таблицы стилей). Они могут также содержать вставленные фрагменты кода, написанные на языке JavaScript.

CSS используются для описания внешнего вида документа, написанного языком разметки. CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML или XHTML (расширяемый язык гипертекстовой разметки). XHTML разработан на основе языка XML (язык разметки). Он расширяет возможности HTM, но используется реже.

Большинство веб-страниц содержат описание разметки на языке HTML. В настоящее время актуальной версией является язык HTML5. Цель данного методического ознакомить студентов с гипертекстовой разметкой на основе HTML5. В некоторых случаях для оформления документов будут использованы элементы CSS.

Глоссарий

Бра́узер (Веб-обозреватель, Web browser) — специальная программа, предназначенная для просмотра веб-сайтов. (Internet Explorer, Microsoft Edge, Google Chrom, Yandex, Opera, Mozilla Firefox, Safari).

Гиперте́кст (hypertext) — термин, обозначающий систему из текстовых страниц, имеющих перекрёстные ссылки.

HTML (HyperText Markup Language — «язык гипертекстовой разметки») - стандартизированный язык разметки документов в сети интернет.

HTTP (HyperText Transfer Protocol - «протокол передачи гипертекста») - протокол передачи данных (изначально - в виде гипертекстовых документов, в настоящий момент для передачи произвольных данных).

HTTPS (HyperText Transfer Protocol Secure- «протокол передачи гипертекста с шифрованием») — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности.

MIME (Multipurpose Internet Mail Extensions — «многоцелевые расширения интернет-почты») - спецификация для кодирования информации и форматирования сообщений таким образом, чтобы их можно было пересылать по Интернету. Например, text/html, text/css, image/jpeg, audio/mp3, video/mp4, application/javascript.

URl (Uniform Resource Locator, «единый указатель ресурса») - единообразный локатор (определитель местонахождения) ресурса в сети или компьютере. Например, URl университета:

https://kosygin-rgu.ru/

Структура документ HTML

 

HTML-документ — это обычный текстовый документ, поэтому он может быть создан в простом текстовом редакторе (Например, в Блокноте Microsoft Windows). HTML-документ должен иметь расширение .html.

Гипертекстовый документ из дерева HTML-элементов и текста. HTML – элемент – называется тегом. Тег это символьная переменная заключённая в ломаные скобки, Например <Имя_тега>. Теги бывают начальными и конечными тегами. Большинству тегов требуется конечный тег, но не всегда. Форма начального и конечного тегов следующая:

<Имя_тега> … </Имя_тега>

Название начального и конечного тега совпадают, только перед конечным тегом располагается косая черта (слеш).Теги могут иметь атрибуты, которые задаются в теле начального тега

<Имя_тега имя_атрибута=”Объект” Значение=”Название”>

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

Теги могут вкладываться друг в друга, например,

< Имя_тега1 >< Имя_тега 2> Текст </ Имя_тега 2></ Имя_тега 1>

Следует соблюдать порядок закрывающих тегов – сначала закрываются внутренние теги, затем внешние.

Примечание  В HTML5 имеются около 100 тегов. Знать можно только основные. Назначение других тегов всегда можно посмотреть в справочнике. Краткий справочник основных тегов праведен в конце данного методического указания.

HTML-документ интерпретируется в браузере - программе просмотра Web-страниц. Распространенными браузерами являются Yandex, Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

Браузер просматривает HTML-документ, выстраивая его структуру (DOM) и отображая в соответствии с инструкциями, включёнными в теги файла. Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая такие элементы как заголовки, текст, таблицы, изображения, аудио, видео и т.д. Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала.

Современные версии браузеров правильно интерпретируют гипертекстовые документы, созданные с помощью HTML5. Упрощённая схема HTML–документа (дерево тегов) показана на рис. 1

Рис. 1

Корневым тегом дерева является тег html. Он является предком для всех остальных тегов. Теги head и body предки для нижерасположенных тегов. Сами эти теги – потомки тега html. Теги одного уровня, такие как head и body, являются сестринскими элементами. Дочерний тег — элемент, непосредственно подчинённый другому тегу, расположенному на один уровень выше. В этом случае верхний тег является родительским по отношению к дочернему.

Базовый HTML5-документ имеет вид

<! DOCTYPE html >

<html>

<head>

  <title> Заголовок документа <?/title>

<meta charset="UTF-8">

</ head >

< body >

       Контент документа

</ body >

</ html >

 

Декларация !DOCTYPE является первой и отвечает за корректное отображение веб-страницы браузером.

Примечание (Можно пропустить).

В HTML 5 не требуется обязательного объявления DOCTYPE. Если документ создаётся на основе XML то он может включать декларацию XML

<? xml version =”1.0” encoding =” UTF -8”?>

encoding указывает на тип кодирования символов (юникод, 8 бит).

Описание документа, созданного в XHTML гораздо сложнее:

<!DOCTYPE html PUBLIC”-//W3C//DTD 1.0 Transitional //EN

http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd>

<html xmlns=http://www.w3.org/1999/xhtml xml:lang=”en” lang=”en”>

Здесь определяет тип документа, дается ссылка на интернет ресурс, в котором описаны спецификации и теги языка XHTML , указывается язык текста,

Как было указано выше, тег html является корневым элементом документа. Все остальные элементы содержатся внутри тегов < html >...</ html >. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и не обрабатывается. Для элемента доступны некоторые атрибуты, которые будут описаны в случае необходимости.

Раздел <head>...</head> содержит техническую информацию о странице, которая включает заголовок, описание, ключевые слова, кодировку и т.д. Введённая в нем информация не отображается в окне браузера, однако содержит данные, указывающие, как следует обрабатывать страницу.

Тег <title> является обязательным тегом раздела <head> . Текст, размещённый внутри этого тега, отображается в строке заголовка браузера. Длина заголовка должна быть не более 60 символов.

<meta>- это необязательный тег раздела <head>. Он не имеет конечного тега! С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>.

В примере, приведенном выше, <meta> указывает на тип кодировки символов.

Если хотите указать себя, как автора документа, то

<meta name=”autor” content=”Фамилия Имя”

Раздел <body> … </ body > предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

В HTML можно размещать комментарии для разъяснения кода. Комментарий в HTML-коде задаётся так:

<!-- текст комментария -->

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

Конструкция комментария часто использовать для временного отключения кода. Временно удалять часть кода, а потом его восстанавливать не удобно. Проще закомментировать его (напечатав специальные знаки комментария), а потом раскомментировать (стереть специальные знаки) - это самое лучшее решение.

Комментарии можно использовать в любом месте страницы, кроме тега < title > — внутри него они не работают.

Представление текста в браузере

 

Текст в браузере можно показать по разному, в зависимости от того, в какие теги он заключён. В таблице 1 показаны варианты использования тегов заголовков, параграфов (абзацев) и перечислений.

В левом столбце таблицы 1 приведены примеры HTML документов. Если сохранить HTML документ с расширением .html., а потом его запустить, то браузер изобразит текст согласно использованным тегам. В правом столбце показан результат воспроизведения HTML документа в окне браузера.

В примерах использованы теги:

<h1>, … <h6> - заголовки;

<p> - абзац;

<ul> - неупорядоченный список;

<ol> - нумерованный список

<li> - позиция в списке.

Таблица 1

HTML документ Отображение в браузере
<!DOCTYPE html> <html> <body>   <h1>Это заголовок</h1>   <p>Это абзац</p>   </body> </html>   Это заголовок Это абзац  
<!DOCTYPE html> <html> <body>   <h1> Это заголовок 1</h1> <h2> Это заголовок 2</h2> <h3> Это заголовок 3</h3> <h4> Это заголовок 4</h4> <h5> Это заголовок 5</h5> <h6> Это заголовок 6</h6>   </body> </html>   Это заголовок 1 Это заголовок 2 Это заголовок 3 Это заголовок 4 Это заголовок 5 Это заголовок 6  
<!DOCTYPE html> <html> <body>   <p>Это первый абзац.</p> <p>Это второй абзац.</p>   </body> </html>   Это первый абзац. Это второй абзац.  
<!DOCTYPE html> <html> <body>   <h2>Ненумерованный список</h2>   <ul> <li>Кот</li> <li>Собака</li> <li>Хомячок</li> <li>Морская свинка</li> </ul>    <h2>Нумерованный текст</h2>   <ol> <li>Кот</li> <li>Собака</li> <li>Хомячок</li> <li>Морская свинка</li> </ol>   </body> </html>   Ненумерованный список
  • Кот
  • Собака
  • Хомячок
  • Морская свинка
Нумерованный текст 1. Кот 2. Собака 3. Хомячок 4. Морская свинка 1.  

 

Задание 1.

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

1.Запустите программу Блокнот .

2.Наберите в нем HTML текст одного из примеров (или скопируйте из методических указаний прямо в Блокнот).

3.Сохраните файл (Сохранить как) с расширением .html (рис. 2)

Рис. 2

4.Запустите сохранённый файл

5.В Блокноте замените текст в файле HTML на любой другой и повторите выше описанные действия.

Дата: 2019-04-23, просмотров: 163.