Could all fall apart. In this article, you'll learn about a few of our
Первое знакомство с разметкой HTML5
Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего дается название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста.
<! DOCTYPE html >
<title>A Tiny HTML Document</title>
<p>Let's rock the browser, HTML5 style.</p>
Или, что то же самое:
<!DOCTYPE html>
<title> Крошечный документ HTML</title>
<p>Дадим встряску браузеру в стиле HTML5.</p>
Результат обработки этого документа браузером показан на рис. 1.1.
Рис. 1.1. Отображение простейшего HTML5 документа в браузере
Далее нам захочется облечь плотью этот скелетистый HTML5-документ. Большинство веб-разработчиков придерживается мнения, что использование традиционных разделов <head> и <body> полезно для облегчения восприятия документа, т. к. они четко разделяют информацию о странице (заголовок страницы) и само содержимое (основная часть страницы). Такая структура особенно полезна, когда к странице добавляются сценарии, таблицы стилей и метаэлементы, как показано в следующем листинге:
<!DOCTYPE html>
<head>
<title>Крошечный документ HTML</title>
</ head >
< body >
< p >Дадим встряску браузеру в стиле HTML 5.</ p >
</ body >
Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент <html>, как показано в следующем листинге:
|
|
|
<!DOCTYPE html>
<html>
<head>
<title> Крошечный документ HTML</title>
</head>
<body>
<p>Дадим встряску браузеру в стиле HTML5.</p>
</body>
</html>
Описание типа документа HTML5
В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:
<!DOCTYPE html>
Кодировка символов
Кодировка — это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.
Вот пример использования элемента <meta>:
<head>
<meta charset="utf-8">
<title> Крошечный документ HTML</title>
</head>
Полужирное и курсивное форматирование
Элемент <strong> следует использовать для выделения текста, имеющего важное значение, чтобы выделить его из остального текста.
|
|
|
А элемент <b> следует использовать для текста, который не более важен, чем остальной текст, но по каким-либо причинам должен выделяться из него. Таким текстом, среди прочего, могут быть ключевые слова, названия товаров и все прочее, что было бы выделено полужирным в традиционной печати.
Аналогично элемент <em> следует использовать для акцентирования текста, на который делается ударение; иными словами, текста, который произносился бы с ударением в устной речи.
А элемент <i> используется для форматирования текста, который по той или иной причине нужно выделить курсивом, но на который не делается никакого особого ударения. Это могут быть, среди прочего, иностранные слова, технические термины и любой текст, который бы выделялся курсивом в печати.
В следующем листинге приводится пример разметки, в которой все эти четыре элемента используются соответствующим образом:
<strong>Экстренное сообщение!</strong> В кондитерской <b>Ажурная</b> идет распродажа конфет <i>Птичье молоко</i>. Не мешкайте, потому что с уходом последней конфеты такой возможности больше не представится <em>никогда</em>.
|
|
|
В браузере этот текст будет выглядеть таким образом:
| Экстренное сообщение! В кондитерской Ажурная идет распродажа конфет Птичье молоко. Не мешкайте, потому что с уходом. последней конфеты такой возможности больше не представится никогда. |
Осмысление тегов <div> и <span>
Теги <div> и <span> похожи на пустые сосуды, которые вы сами и заполняете. Поскольку у них нет никаких свойств для визуализации, вы можете применять к ним CSS-стили, чтобы фрагменты внутри этих тегов выглядели так, как вам хочется. Тег <div> (предназначен для деления на фрагменты) определяет любой отдельный блок содержимого, как, например, абзац или заголовок. Однако вы также можете логически объединить любой набор таких элементов, как заголовок, несколько абзацев, маркированный список и т. д., в единственном блоке <div>. Тег <div> — замечательное средство разбивки веб-страницы на такие логические фрагменты, как баннер, нижний колонтитул, боковая панель и т. д. Впоследствии при использовании CSS вы сможете позиционировать любой из этих фрагментов в выбранное место вебстраницы, создавая сложную схему разметки.
Тег <span> применим к внутренним (inline) элементам страницы, то есть к словам, фразам, находящимся в пределах абзаца текста или оглавления. Его можно использовать точно так же, как и другие внутренние HTML-теги, например как <a> (чтобы добавить ссылку к фрагменту текста) или <strong> (чтобы выделить слово в абзаце полужирным шрифтом). Можно применять тег <span>, чтобы указать название компании, и затем использовать CSS, чтобы выделить это название другим шрифтом, цветом и т. д. Рассмотрим пример этих тегов в работе. К ним добавлены атрибуты id и class, часто используемые для применения стилей к фрагментам страницы.
|
|
|
<div id="footer">
<p>Copyright 2006, <span class="bizName">CosmoFarmer.com</span></p>
<p>Call customer service at 555-555-5501 for more information</p>
</div>
Дополнительные теги в HTML5
Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов. Придание HTML большей семантичности просто означает применение тегов, точно описывающих свое содержимое. Как уже упоминалось в данном разделе, вы можете воспользоваться тегом <h1> (заголовок 1), помещая в него текст, описывающий основное содержимое страницы. По аналогии с этим тег <code> четко дает понять, информация какого сорта в него помещена, — это программный код.
HTML5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. Тег <article> (статья), к примеру, применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Иными словами, «статью», такую как запись блога, товар в интернет-магазине или просто основной текст страницы. Точно так же, тег <header> (верхний колонтитул) является признаком верхнего колонтитула или баннера, верхней части страницы, которая обычно содержит логотип, навигацию, относящуюся ко всему сайту, заголовок страницы с подзаголовком и т. д.
Многие новые теги HTML5 предназначены для расширения возможностей обычного тега <div>. Для структурирования содержимого страницы часто используются и другие теги HTML5.
· Тег <section> (раздел) содержит группировку взаимосвязанного содержимого, например главу книги. Так, вы можете разбить содержимое главной страницы на три раздела: вводную информацию о сайте, контактную информацию и самые последние новости.
· Тег <aside> (отступление) предназначен для обозначения содержимого, относящегося к окружающему это тег содержимому. Например, пометки на полях в печатном журнале.
· Тег <footer> (нижний колонтитул) содержит информацию, которая обычно помещается в нижнем колонтитуле страницы, например сведения об авторских правах, другую правовую информацию, некоторые ссылки для навигации по сайту и т. д. Но на количество тегов <footer> на одной странице ограничений не накладывается, вы можете, допустим, поместить нижний колонтитул внутри тега <article>, чтобы хранить в нем информацию, относящуюся к статье, например сноски, ссылки или выписки.
· Тег <nav> (навигация) используется для обозначения содержимого в виде основных навигационных ссылок.
· Тег <figure> (рисунок) применяется для иллюстраций. Вы можете поместить в него тег <img>, а также еще один новый тег HTML5 — <figcaption>, использующийся для вывода пояснений к фотографии или иллюстрации, которая находится внутри тега <figure>.
Добавление таблицы стилей
Практически в каждой странице должным образом разработанного профессионального веб-сайта используются таблицы стилей. Для указания требуемой таблицы стилей используется элемент <link> в блоке <head> документа HTML5:
<head>
<meta charset="utf-8">
<title> Крошечный документ HTML</title>
<link href="styles.css" rel="stylesheet">
</head>
Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей — CSS, то в добавление атрибута type="text/css", который требовался ранее, больше нет надобности.
Конечный результат:
Если вы выполнили все вышеизложенные шаги, созданный вами документ HTML5 должен выглядеть подобным образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Крошечный документ HTML</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<p>Дадим встряску браузеру в стиле HTML5.</p>
</body>
</html>
Что такое стиль (CSS)
Определение стиля в CSS, устанавливающего внешний вид какого-либо элемента (фрагмента) веб-страницы, — это всего лишь правило, которое сообщает браузеру, что и каким образом форматировать: изменить цвет шрифта заголовка на синий, выделить фото красной рамкой, создать меню шириной 150 пикселов для списка гиперссылок. Если бы стиль мог говорить, он сказал бы: «Браузер, сделай, чтобы вот это выглядело так-то». Фактически определение стиля состоит из двух основных элементов: это сам элемент веб-страницы, который непосредственно подлежит форматированию браузером, — селектор, а также форматирующие команды — блок объявления. Селекторами могут быть заголовок, абзац текста, изображение и т. д. Блоки объявления могут, например, окрасить текст в синий цвет, добавить красную рамку (границу) вокруг абзаца, установить фотографию в центре страницы — возможности форматирования бесконечны.
Разумеется, CSS-стили не могут быть написаны на обычном языке, как, например, предыдущий абзац. У них есть свой собственный язык. В частности, чтобы выбрать стандартный цвет и размер шрифта для всех абзацев на веб-странице, нужно написать следующее:
p { color: red; font-size: 1.5em; }
Этот стиль говорит браузеру: «Сделай текст всех абзацев веб-страницы, помеченных тегом <p>, красным и установи размер шрифта равным полуторакратной высоте латинской буквы m (em — буква m, напечатанная шрифтом Cicero, — стандартная единица измерения в полиграфии, обычный размер шрифта текста в браузере, см. гл. 6). Любой стиль, даже самый простой, содержит несколько элементов (рис. 2.2). Он состоит из селектора, сообщающего браузеру, что именно форматировать, и блока объявления, в котором перечислены форматирующие команды, используемые браузером для стилизации фрагмента, определенного селектором.
Разговор об этих тегах не ограничится этим кратким введением. Они часто используются на тех веб-страницах, где широко применяется CSS.
Рис. 2 Пример описания стиля (или правила)
Селектор. Как уже было отмечено, селектор сообщает браузеру, к какому элементу или элементам веб-страницы применяется стиль: к заголовку, абзацу, изображению или гиперссылке. На рис. 2 селектор p обращается к тегу <p>, передавая браузеру, что все теги <p> нужно форматировать, используя объявления, указанные в данном стиле. Благодаря значительному разнообразию селекторов, предлагаемых языком CSS, и своему творческому потенциалу вы сможете мастерски форматировать веб-страницы (в следующей главе селекторы описаны более подробно).
Блок объявления стиля. Код, расположенный сразу за селектором, содержит все форматирующие команды, которые можно применить к этому селектору. Блок начинается с открывающей ({) и заканчивается закрывающей фигурной скобкой (}).
Объявление свойства. Между открывающей и закрывающей фигурными скобками блока объявления можно добавить одно или несколько определений или форматирующих команд. Каждое объявление имеет две части — свойство и значение свойства. Двоеточие отделяет имя свойства от его значения, и все объявление заканчивается точкой с запятой.
Свойство. CSS предлагает большой выбор команд форматирования, называемых свойствами. Свойство представляет собой слово или несколько написанных через дефис слов, определяющих конкретный стиль или стилевой эффект. У большинства свойств есть соответствующие, простые для понимания названия, такие как font-size, margin-top, background-color и т. д. (в переводе с английского: размер шрифта, верхний отступ, цвет фона). В следующих главах будет описано множество полезных свойств CSS. После имени свойства нужно добавить двоеточие, чтобы отделить его от значения.
Значение. Наконец, настал тот момент, когда вы можете задействовать свой творческий потенциал, присваивая значения CSS-свойствам: определяя фоновый цвет, например, синим, красным, фиолетовым, салатовым и т. д. Как будет описано в других главах, различные CSS-свойства требуют определенных типов значений — цвет (red или #FF0000), длина (18px, 200% или 5em), URL (images/background.gif), а также определенных ключевых слов (top, center, bottom).
Вам не обязательно описывать стиль на одной строке, как изображено на рис. 2 У стилей может быть множество форматирующих свойств, и есть возможность облегчить просмотр таблицы стилей путем разбивки объявлений на строки. Например, поместите селектор и открывающую скобку на одной строке, каждое объявление — далее на отдельных строках, а закрывающую фигурную скобку — отдельно на последней строке стиля. Это будет выглядеть следующим образом:
p {
color: red;
font-size: 1.5em;
}
вместо
p { color:red; font-size:1.5em; }
Любой браузер игнорирует символы пробела и табуляции, так что вы можете спокойно добавлять их, создавая хорошо читаемые стили CSS. Так, полезно сделать отступ при перечислении свойств табуляцией или несколькими пробелами для явного отделения селектора от блока объявления. И к тому же один пробел между двоеточием и значением свойства, конечно, необязателен, но он обеспечивает дополнительную удобочитаемость стилей. Фактически можно добавить любое количество пробелов там, где вам захочется. Например,
Лабораторная работа №1
«Модифицирование традиционной HTML-страницы»
Легче всего начать знакомство с новыми семантическими элементами, а также обучаться их применению для структурирования страницы на классическом HTMLдокументе и вставить в него некоторые облагоображивающие элементы HTML5. На рис. 2.1 показан первый пример, который вы можете попробовать реализовать.
Рис. 2.1. Эта HTML-страница имеет базовую структуру, подобную структуре документа. Все форматирование осуществляется с помощью связанной таблицы стилей.
Отформатировать страницу, показанную на рис. 2.1, можно несколькими разными способами. К счастью, в этом примере применены самые передовые подходы HTML, поэтому в разметке нет ни намека на средства форматирования. В ней нет ни элементов для полужирного или курсивного начертания, ни вставляемых в строку разметки стилей и определенно ничего похожего на такое уродство, как устаревший элемент <font>. Вместо этого документ аккуратно отформатирован посредством связи с внешней таблицей стилей.
В следующем листинге приводится сокращенная версия разметки. В ней жирным шрифтом выделены места, в которых документ привязывается к таблице стилей:
НЕ ЗАБЫВАЕМ КАК НАЧИЕМ ПИСАТЬ КОД В HTML 5.0 И КОДИРОВКУ !!!!
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apocalypse Now</title>
<link rel="stylesheet" href="ApocalypsePage_Original.css">
</head>
<body>
<div class="Header">
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</div>
<div class="Content">
<p><span class="LeadIn">Right now</span>, you're probably feeling pretty good. After all, life in
the developed world is comfortable<span class="style1">—</span>probably more comfortable than it's
been for the average human being throughout all of recorded history.</p>
<p>But don't get too smug. There's still plenty of horrific ways it
could all fall apart. In this article, you'll learn about a few of our
favorites.</p>
<h2>Mayan Doomsday</h2>
<p>Skeptics suggest that the Mayan calendar simply rolls to a new
Дата добавления: 2019-01-14; просмотров: 186; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!