 |
CSS 3. Использование каскадных таблиц стилей при оформлении Web-страниц.
|
|
|
|
HTML 5. Основы синтаксиса и семантики. Форматирование текста, списков.
CSS 3. Использование каскадных таблиц стилей при оформлении Web-страниц.
1. HTML 5.
Первая строка любого HTML-документа начинается с DOCTYPE (Document Type Declaration – определение типа документа). DOCTYPE выполняет две функции: во первых он помогает валидаторам определять какие правила применять при проверки валидности кода, во вторых он заставляет браузеры перейти в режим соответсвия стандартам (Обратите внимание, что DOCTYPE нечувствителен к регистру). До появления выглядело следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd">
Однако теперь, когда у нас есть HTML5, определение типа документа выглядит так:
<!DOCTYPE html>
2. Создайте документ, согласно структуре, приведенному в примере 1:
<!DOCTYPE html>
<html>
<head>
<title> Настольный теннис </title>
</head>
<body>
Моя первая Web-страница о настольном теннисе будет написана с использованием стандарта разметки написания гипертекстовых страниц HTML 5.
С 28 октября 2014 года Консорциум Всемирной паутины официально рекомендует при создании использовать HTML5, который является языком для структурирования содержимого всемирной паутины.
</body>
</html>
где <HTML> и </HTML> - теги HTML- документа
<HEAD> и </HEAD> - теги секции заголовка
<TITLE> и </TITLE> - благодаря наличию данного тега в заголовке окна браузера будет выведено не имя файла, а заголовок, который отражает содержание HTML- документа
<BODY> и </BODY> - теги секции тела документа
Примечание: Согласно стандарту НТМL4.1 вводили <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www. w3. org/TR/xhtmll/DTD/xhtmll- strict. dtd" >
|
|
|
Сохраните документ c именем Nast.html (в меню "Файл" команда "Сохранить"). Перейдите в окно браузера и выберите в меню "Вид" команду "Обновить".
Проанализируйте произошедшие изменения в отображении документа.
3. HTML 5. Кодировка сообщает браузерам и валидаторам, какой набор символов использовать при отображении веб-страницы. Если в HTML-документе кодировка не объявлена, то браузер сначала попытается определить ее через заголовок ответа вашего HTTP-сервера (в частности, заголовок Content-iype). Кодировка, заданная в заголовке ответа, предпочтительнее, нежели указанная в документе, поэтому заголовки — основной способ предоставления такой информации. Однако существует возможность контролировать, какие заголовки будет отправлять ваш сервер, — для этого необходимо объявить кодировку в HTML-документе. Это оптимальный вариант. Если кодировка не определена ни в документе, ни в ответе заголовка, то браузер попробует выбрать ее сам, что может не соответствовать потребностям сайта.
Для задания кодировки в своем документе поместите внутри элемента head элемент meta и укажите в нем такой набор символов: <meta charset="UTF-8" /> (или windows-1251)
Windows-1251 – набор символов и кодировка, являющаяся стандартной 8-битной кодировкой для всех русских версий Microsoft Windows. Пользуется довольно большой популярностью. Windows-1251 выгодно отличается от других 8‑битных кириллических кодировок (таких как CP866, KOI8-R и ISO 8859-5) наличием практически всех символов, использующихся в русской типографике для обычного текста; она также содержит все символы для близких к русскому языку языков: украинского, белорусского, сербского и болгарского.
UTF-8 – в настоящее время распространённая кодировка, реализующая представление Юникода, совместимое с 8-битным кодированием текста. Нашла широкое применение в операционных системах и веб-пространстве. Текст, состоящий только из символов Юникода с номерами меньше 128, при записи в UTF-8 превращается в обычный текст ASCII. Остальные символы Юникода изображаются последовательностями длиной от 2 до 6 байт.
|
|
|
Unicode (UTF-8) представляет собой универсальную кодировку, удовлетворяющую потребностям большинства веб разработчиков, большинство современных веб-платформ по-умолчанию работают именно на ней.
Примечание: Согласно стандарту НТМL4.1 вводили <meta http-equiv="Content-Type" content="text/html; charset»UTF-8" />
4. HTML 5. Для определения основного языка веб-страницы добавьте в открывающий тег элемента html атрибут lang и присвойте ему значение: <html lang="ru">
В HTML5 (как и в любой другой из предыдущих версий) необязательно объявлять основной язык документа. Однако это хорошая практика.
5. Рассмотрим более подробно теги тела HTML-документа.
Теги тела документа предназначены для управления отображением информации в программе просмотра Web-страницы пользователем. Создание тела документа начинается с написания тега < BODY >. Тег < BODY > имеет атрибуты:
- атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Откройте Nast.htmlи для него установите фон, который находится в файле image.gif (данный рисунок может быть произвольным) с помощью записи:
<ВОDY ВАСКGROUND="image.gif"> - данная запись используется в том случае, если сам файл image.gif находится в папке, где храниться Ваш файл Nast.html. В случае если файл находиться в другой папке, например с именем «Фон» на Вашем диске Z, то необходимо указать полный путь нахождения файла, а именно: <ВОDY ВАСКGROUND="Z:\ФОН\image.gif">Сохраните документ в Nast.html (не закрывайте его) и выберите команду " Обновить " для его просмотра в браузере. Проанализируйте произошедшие изменения в отображении документа.
- атрибутBGCOLOR =#ХХХХХХ – описывает цвет фона;- атрибутТЕХТ=#ХХХХХХ - описывает цвет текста;- атрибутVLINK =#ХХХХХХ - описывает цвет пройденных гипертекстовых ссылок; - атрибутLINK =#ХХХХХХ - описывает цвет гипертекстовой ссылки. Строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды представлены в приложении А.- Создайте копию файла Nast.html и присвойте ему имя Nast_zvet_fon.html Введите в тег <BODY> атрибуты BАСКGROUND и ТЕХТ, а также присвойте им произвольные значения, например:- <ВОDY ВАСКGROUND=00FFFF;ТЕХТ=#000080>Сохраните документ (не закрывайте его) и выберите команду " Обновить " для его просмотра в браузере. Проанализируйте произошедшие изменения в отображении документа.
|
|
|
Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN = определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.
Задайте левое поле = 20 пикселов в Nast_zvet_fon.html
Сохраните документ, просмотрите результат.
! В дальнейшем всегда после проведенных изменений документ нужно сохранять, а просмотр в броузере начинать с обновления загрузки документа с помощью кнопки "Обновить" на панели инструментов или нажатием клавиши F5.
Теги заголовков
5.1. Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>.
Введите в тело документа Nast.html строки заголовка:
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8" />
<TITLE> Настольный теннис </TITLE>
</HEAD>
<BODY>
<H1> Приветствую Вас на web-страничке о настольном теннисе</H1>
<H3> Виды соревнований </H3>
<H3> Участники соревнований </H3>
<H4> Правила игры </H4>
</BODY>
</HTML>
С тегами заголовков H1-H6 напрямую связан появившийся в html5 новый элемент – HGROUP. Давайте рассмотрим типичный пример, когда в шапке сайта размещён заголовок. Очень часто в заголовке наряду с H1 используется H2, H3, H4 и т.д., и это очень распространённый случай. Заголовок H2, как правило, выводится меньшим размером шрифта, но при этом является такой же составляющей частью заголовка, как и заголовок H1. Иными словами, общий заголовок представляет собой нечто целое и неразделимое, что нельзя разбить на две части.
|
|
|
Внесите изменения в предыдущий пример вставив теги в один общий элемент hgroup.
<hgroup>
<H1> Приветствую Вас на web-страничке о настольном теннисе</H1>
<H3> Виды соревнований </H3>
<H3> Участники соревнований </H3>
<H4> Правила игры </H4>
</hgroup>
Отображаться такой комплексный заголовок будет традиционно, но с точки зрения логической структуры представляет собой единый элемент.
5.2. Рассмотрим атрибуты, которые используются при создании заголовков.
5.2.1. Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. Далее приведены возможные значения атрибута АLIGN:
- АLIGN=justify - выравнивание по ширине;
- АLIGN=left - выравнивание по левому краю. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить;
- АLIGN=right - выравнивание по правому краю;
- АLIGN=center – выравнивание по центру.
Например: <H1 align=center>Приветствую Вас на web-страничке о настольном теннисе</H1>
Установите выравнивание первого и второго заголовка по центру, третьего - по левому краю, четвертого – по правому краю.
Теги форматирования
Тег < P > применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках. При просмотре в браузере новый абзац будет отделен от предыдущего пустой строкой
Данный пример показывает, как отображаются параграфы:
<!DOCTYPE html>
<html>
<HEAD>
<meta charset="UTF-8" />
</HEAD>
<body>
<p>Это параграф 1.</p>
<p>Это параграф 2.</p>
<p>Это параграф 3.</p>
</body>
</html>
Для переноса внутри параграфа используется тег < ВR >, который выполняет принудительный перенос строки.
<!DOCTYPE html>
<html>
<HEAD>
<meta charset="UTF-8" />
</HEAD>
<body>
<p>Это <br>пара<br>граф с переносами строк</p>
</body>
</html>
5.1. Откройте в режиме редактирования HTML-кода документ Nast.html (вменю браузера "Вид" команда "Просмотр HTML-кода") и введите следующую запись в область тела документа:
<P>Вот уже более 40 лет настольный теннис остается главной и самой распространенной спортивной дисциплиной на планете. Большинство специалистов считает, что настольный теннис появился в Англии, как разновидность Королевского Тенниса. Возможно, что настольный теннис возник в США, Индии или Южной Африке (предполагается, что в последних двух странах в настольный теннис начали играть командированные туда Британские офицеры). Скорее всего, настольный теннис появился во второй половине XIX века. Тогда не было определенных правил. Мячи делались из нитей, книги, расставленные на столе, были сеткой, а куски толстого картона являлись ракетками.
|
|
|
Просмотрите результат
Для создания абзацного отступа используется неразрывный пробел, который записывается следующим образом:  
<P>    Вот уже более 40 лет настольный теннис остается и т.д.
Просмотрите результат. Если есть необходимость в большем отступе, то данную запись делают несколько раз.
5.2. Введите изменения в данный текст:
<P>    Вот уже более 40 лет настольный теннис остается главной и самой распространенной спортивной дисциплиной на планете. <P>    Большинство специалистов считает, что настольный теннис появился в Англии, как разновидность Королевского Тенниса. <ВR> Возможно, что настольный теннис возник в США, Индии или Южной Африке (предполагается, что в последних двух странах в настольный теннис начали играть командированные туда Британские офицеры). Скорее всего, настольный теннис появился во второй половине XIX века. Тогда не было определенных правил. Мячи делались из нитей, книги, расставленные на столе, были сеткой, а куски толстого картона являлись ракетками.
Сохраните документ и просмотрите результат работы.
6. Просмотрите документ в броузере, изменяя настройку отображения шрифтов (меню Вид – Размер шрифта – Самый крупный, Средний, Самый мелкий и Мелкий).
7. Теги < ВIG > и < SMALL > — используются для изменения размеров шрифта
Текст, расположенный между тегами <ВIG></ВIG> или <SMALL> </SMALL>, будет, соответственно, больше или меньше стандартного. Проверьте работу данных тегов.
8. Верхние и нижние индексы устанавливают с помощью тегов < SUР > и < SUВ > можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги < SUР > и < SUВ > с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.
9. Изменение начертания и гарнитуры шрифта
Курсив, полужирный текст, подчеркивание, и их различные комбинации делает страницу более интересной.
Примените: для первого заголовка полужирный текст – тег <B> и </B>
для второго заголовка курсив текст – тег <I> и </I>
для третьего заголовка установите полужирный + курсив
для четвертого – подчеркивание <U>...</U>
Например: <H1 align=center><B> Приветствую Вас на web-страничке о настольном теннисе </B> </H1>
10. Ещё один интересный атрибут html5 – contenteditable. Он заставляет элемент вести себя иначе и быть редактируемым со стороны пользователя.
<p contenteditable>А вы видели когда-нибудь редактируемый абзац?</р>
Атрибут может принимать любое из двух значений: true или false.
По умолчанию используется значение true, т.е. если вы определите элемент просто с атрибутом contenteditable, это будет то же самое, что и с явно заданным значением true. Для того, чтобы элемент не был редактируемым, либо нужно совсем не упоминать атрибут contenteditable, либо указать его значение в виде false.
<p contenteditable="false">Этот текст нельзя редактировать </р>
11. Новый тег mark выделяет текстовый фрагмент или отдельные слова. Тег mark не имеет атрибутов, он просто помечает текст путём его выделения.
Осуществите выделение текста:
<P>    Вот уже более <mark>40 лет настольный теннис остается главной и самой распространенной спортивной дисциплиной </mark> на планете. <P>    Большинство специалистов считает, что < mark>настольный теннис появился в Англии</mark>, как разновидность Королевского Тенниса. <ВR> Возможно, что настольный теннис возник в США, Индии или Южной Африке (предполагается, что в последних двух странах в настольный теннис начали играть командированные туда Британские офицеры). Скорее всего, <mark>настольный теннис появился во второй половине XIX века </mark>. Тогда не было определенных правил. Мячи делались из нитей, книги, расставленные на столе, были сеткой, а куски толстого картона являлись ракетками.
12. Элемент под названием details. Дело в том, что он способен создавать одну из самых распространённых конструкций, а именно раскрывающийся блок. С помощью details создаётся фрагмент, часть содержания которого по умолчанию скрыта от пользователя. При нажатии на заголовок скрытая часть расправляется и демонстрируется пользователю. При создании таких конструкций совместно с details используется другой элемент – summary. Именно он и определяет заголовок, остальная часть блока до конца тега details будет скрыта и появится только после нажатия на заголовок.
Внесите изменения вы предыдущий текст:
<details>
<summary>
Версии возникновения настольного тенниса
</summary>
Возможно, что настольный теннис возник в США, Индии или Южной Африке (предполагается, что в последних двух странах в настольный теннис начали играть командированные туда Британские офицеры). Скорее всего, <mark>настольный теннис появился во второй половине XIX века </mark>. Тогда не было определенных правил. Мячи делались из нитей, книги, расставленные на столе, были сеткой, а куски толстого картона являлись ракетками.
</details>
Если говорить о возможном применении, то такие конструкции удобно использовать, скажем, на страницах задач или загадок. Формулировка условия может быть вложена в заголовок с помощью summary, а в оставшейся части опубликован ответ. Таким образом, по умолчанию на такой странице пользователь увидит лишь одни задания, но если ему будет интересно сверить свой ответ с правильным, достаточно щёлкнуть на заголовок. Применение может быть самым разнообразным. Например, мы можем оставить в качестве заголовков названия стихотворений, при щелчке на котором будет раскрываться полный текст. Если в случае с загадками объём текста в заголовке явно превышает остальное содержимое под тегом details, то в случае стихотворениями дело обстоит как раз наоборот.
У details есть очень важный атрибут – open, позволяющий отображать фрагмент в изначально раскрытом состоянии.
Лабораторная работа 1.2
|
|
|
