Главная страница
qrcode

Книга научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо


НазваниеКнига научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо
Анкор1. HTML5 CSS3 i JavaScript Ischerpyvayuschee rukovod.pdf
Дата21.05.2017
Размер23.7 Mb.
Формат файлаpdf
Имя файла1_HTML5_CSS3_i_JavaScript_Ischerpyvayuschee_rukovod.pdf
оригинальный pdf просмотр
ТипДокументы
#20646
страница5 из 8
Каталог
1   2   3   4   5   6   7   8
Глава 4. Создание простой страницы (обзор Глава 5. Разметка текста Глава 6. Добавление ссылок Глава 7. Добавление изображений Глава 8. Разметка таблиц Глава 9. Формы Глава 10. Знакомство с HTML5
ГЛАВА СОЗДАНИЕ ПРОСТОЙ
СТРАНИЦЫ
В цервой части этой книги были представлены общие принципы разработки веб-страниц. Теперь, когда мы рассмотрели основные концепции, пришло время приступить к созданию реальной веб-страницы. Она будет простой, но даже самые сложные страницы построены на основе описанные здесь принципов.
В этой главе мы пошагово создадим простую веб-страницу, чтобы вы получили представление о разметке документа с помощью H TM L- тегов. Упражнения позволят вам одновременно практиковаться.
Я хочу, чтобы вы смогли:

Получить представление о том, как работает H TM разметка, а также познакомиться с элементами и атрибутами языка.

Увидеть, как браузеры интерпретируют H TM L-документы.

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

Знакомство с элементами и атрибутами

Пошаговая демонстрация разметки простой веб-страницы

Элементы, составляющие структуру документа

Основные элементы текста и изображений

Простая таблица стилей

Исправление ошибок веб-страниц
Веб-страница шаг за шагом
Вы рассмотрели H TM документ в главе 2, а теперь получите возможность создать свою собственную страницу и поупражняться с нею в браузере. В этой главе представлены пять основных шагов создания веб-страницы.
Шаг 1: Начальное наполнение страницы контентом. В качестве отправной точки мы добавим текстовый контент и посмотрим, что с ним делают браузеры.
65

Веб-страница шаг за шагом
Трудный путь верстки
HTML-кода
Я придерживаюсь метода обучения разметке документов по старинке, вручную. Нет лучшего способа по-настоящему понять, как работает разметка, чем ввести ее собственными руками, по одному тегу зараза затем открыть страницу в браузере. Чтобы развить умение правильной разметки документа, не требуется много времени.
И хотя потом вы, возможно, предпочтете использовать инструменты верстки веб­
страниц, понимание синтаксиса языка HTML позволит использовать эти средства более эффективно. Кроме того, выбудете довольны тем, что сможете взглянуть на исходный код файла и понять то, что вы видите. Также это имеет решающее значение для устранения ошибок неработающей страницы или тонкой настройки форматирования по умолчанию, которое выполняют веб-инструменты.
Профессиональные веб-раз­
работчики в основном вручную размечают контент, так как при этом они могут лучше контролировать код и принимать взвешенные решения о том, какие элементы использовать.
Шаг 2: Задание структуры документа. Вы познакомитесь с синтаксисом H TM элементов и элементами, которые задают структуру доку­
мента.
Шаг 3: Определение элементов текста. Вы опишете содержимое, используя соответствующие элементы текста, и узнаете, как правильно применять H TM L-элементы.
Шаг 4: Добавление изображений. Добавляя изображение на страницу, вы узнаете об атрибутах и пустых элементах.
Шаг 5: Изменение внешнего вида страницы с помощью таблицы стилей. Это упражнение сформирует представление о том, как, используя каскадные таблицы стилей, оформить содержимое страницы.
К концу этой главы у вас будет создан исходный документ для страницы, показанной на рис. Входе данной демонстрации мы будем часто проверять нашу работу в браузере — вероятно, чаще, чем вы бы это делали в реальной жизни. Это необходимо потому, что на начальном этапе изучения языка HTML полезно видеть причины и следствия каждого небольшого изменения в исходном файле.
БИСТРО "ЧЕРНЫЙ ГУСЬ"
Ресторан
Бистро "Черный гусь" предлагает непринужденные обеды и ужины в стильной атмосфере. Меню обновляется регулярно.
Обслуживание праздников и вечеринок
Вы развлекаетесь. мы займемся приготовлением Персонал бистро "Черный гусь" может обслуживать различные события от приготовления закусок для бридж-клуба до элегантных корпоративных вечеров по сбору средств.
М естоположение и часы работы
Рязань, ул. Электровольтная, 17; С понедельника по четверг с 11 до 21, в пятницу и субботу с 11 до полуночи
Рис. 4.1. В этой главе мы шаг за шагом запишем исходный код этой
веб-страницы
Часть II. Разметка HTML для структуризации
Запуск текстового редактора
Запуск текстового редактора
В этой главе и на протяжении всей книги, мы будем записывать H TM L- документы вручную, поэтому прежде всего необходимо запустить текстовый редактор.
Для этих целей годится текстовый редактор, доступный в составе операционной системы, например Блокнот (Notepad) (Windows) или TextEdit (OS X). Другие текстовые редакторы хороши до тех пор, пока вы можете сохранять обыкновенный текстовый документ (ASCII) в виде файла с расширением
.html Если у вас есть средства верстки веб-страниц WYSIWYG, такие как
Dreamweaver или SharePoint Designer, на данный момент забудьте о них. Я хочу, чтобы вы прочувствовали процесс разметки документа вручную (см. врезку Трудный путь верстки HTM L-кода»).
В данном разделе показано, как открыть новый документ в текстовых редакторах Блокнот (N otepad) и TextEdit. Даже если вы использовали эти программы прежде, бегло просмотрите некоторые специальные настройки, которые позволят легче выполнить упражнение. Мы начнем с редактора Блокнот (Notepad); пользователи компьютеров Мае могут пропустить этот раздел.
Создание нового документа в редакторе Блокнот (для пользователей Для создания нового документа в редакторе Блокнот (N otepad) в операционной системе Windows 8 (рис. 4.2) выполняются следующие шаги:
О Откройте начальный экран (установив указатель мыши в левом нижнем углу экрана и щелкнув мышью) и найдите на нем программу Блокнот (Notepad). Если там этот ярлык отсутствует, откройте список всех установленных программ, щелкнув правой кнопкой мыши по экрану и нажав кнопку Все приложения (All apps) в правом нижнем углу. Ярлык программы Блокнот (N otepad) находится в папке Стандартные
(Accessories).
© Щелкнув по нему, откройте новый документ. Вы готовы к вводу кода Далее мы отобразим расширения файлов. Этот шаг не требуется для создания H TM документов, но поможет с первого взгляда определить тип файла. В любом окне программы Проводник (Explorer) перейдите на вкладку Вид
(View) ив раскрывающемся списке Параметры
(O ptions) выберите пункт Изменить параметры папок и поиска
(Change folder and search О В открывшемся диалоговом окне Параметры папок (Folder and search options) перейдите на вкладку Вид (View).
© Сбросьте флажок Скрывать расширения для зарегистрированных типов файлов (H ide extension for known file types). Щелкните по кнопке
OK, чтобы сохранить изменения. Расширения файлов теперь будут отображаться.
ПРИМЕЧАНИЕ
В операционной системе
Windows 7 для открытия диалогового окна Параметры папок (Folder and search options) нажмите клавишу Alt, чтобы отобразить меню, аза тем выберите команду меню Параметры Параметры папок (Options => Folder options). В операционной системе Windows Vista эта команда называется Параметры папок и поиска (Folder and Search Глава 4. Создание простой страницы
Запуск текстового редактора — Щелкнув по ярлыку программы Блокнот, создайте новый документ Стандартные
Windows
т
Диспетчер задач
Pa,n’
:7Г
Командная строка
Щ WordPad
Компьютер
Блокнот
р
Отчеты средства переноса данны
(Pi Журнал Панель i
"*

управления
Записки
т
Проводник
1 — На начальном экране найдите текстовый редактор Блокнот — Откройте диалоговое окно Параметры папок, выбрав в окне программы Проводник команду меню Параметры =» Изменить параметры папок и поиска.

Общий доступ И
Обычим* тачки С одержимо»
О б м е т Структура
- Т М * Библиотек. Избрание»
• Загруаки
^ Недааиие месл
■ Рабочий стол
Л
Библиотеки Цв Видео
‘ Документа а Изобретения
J
Музмк»
т
4 — Перейдите на вкладку Вид.
Показат* Парам три или с. рмт» *
*
23
Й3м»иту» I
араметры папок параиетрн папок и поиска
Общие Вид
Поиск
Представление папок
Можно применить вид. выбранный для этой папки, например "Таблица" или "Значки, ко всем папкам этого типа
Применить к папкам
Сброс вида папок
Дополнительные параметры i l При вводе текста в режиме "Список"
О Автоматически вводить текст в поле поиска
(•) Выделять введенный элемент в списке
@ Скрывать защищенные системные Файлы (рекомен.
@ Скрывать конфликты слияния папок
Скрывать-пустые диски в папке "Компьютер"
Скрывать расширения для зарегистрированных тиг
, Скрытые файлы и папки) Не показывать скрытые Файлы папки и диски о Показывать скрытые Файлы, папки и диски Восстановить значения по умолчанию
О К Отмена Применить в т в ш ш в — Сбросьте флажок Скрывать расширения для зарегистрированных типов файлов. Щелкните по кнопке ОК, чтобы сохранить настройки.
Рис. 4.2. Создание нового документа в редакторе Блокнот и отображение расширений файлов
Создание нового документа в редакторе
TextEdit (для пользователей OS По умолчанию текстовый редактор TextEdit создает документы в формате форматированного текста, то есть такие документы имеют скрытые инструкции для форматирования текста — начертания полужирным шрифтом, настройки размера шрифта итак далее. H TM файлы должны быть простыми текстовыми документами, поэтому нужно изменить формат, как показано в следующем примере (рис. 4.3).
1. Чтобы найти редактор TextEdit в панке Приложения
(Applications), воспользуйтесь приложением Finder. Для запуска найденного щелкните два раза либо по имени приложения, либо по его значку. В редакторе TextEdit откроется новый документ. Если в верхней части окна документа отображается панель форматирования, включен режим форматированного текста. Вы можете изменить этот режим следующим образом. С помощью команды меню TextEdit => Настройки
(TextEdit => Pre­
ferences) откройте одноименное окно.
Часть II. Разметка HTML для структуризации
Запуск текстового редактора. Далее нужно настроить следующие параметры:

Установите переключатель в положение Простой текст (Plain На вкладке Открытие и сохранение (Open and Save) установите флажок Отображать файлы HTML в виде кода HTML, а не форматированного текста (Display HTM L files as HTM L code instead of form atted tex t) и сбросьте флажок Добавлять расширение .txt к именам файлов простого текста (Add ‘.tx t’ extension to plain text files).
5. После выполнения всех этих действий закройте окно Настройки
(Preferences).
6. При создании нового документа в программе TextEdit уже не будет отображаться панель форматирования. Документ можно конвертировать обратно в форматированный текст в любой момент, выбрав команду меню Формат => Конвертировать в форматированный
текст (Form at
Make Rich Text), если вы не используете программу TextEdit для верстки H T M L -файлов.
Панель в верхней части окна документа указывает, что документ открыт в режиме форматированного текста
У документа в формате простого текста нет панели. ; •• -L#.^ Ля Настройки Н о вы й документ Открытие и сохранение И сп оп ьауй те и * о Формат дм установки параметров открытого документа- ее ома тир о а ан н ы й текст В м б н т ь пор аам еру бумаги) Простойте кст А а амер ы окна (ас им вола х)
В ы сота
10 а Шрифт простого текста Шрифт форматированного теиста) Имен ять Изменит Свойства документа сохраняются только с файлами форматированного текста. 1 ы бери та Файл > П окааать свойства. чтобы имени т * параметры А в торс кое право Параметры П роеерат* правописание при яеоде текста Проверят грамматику И справлять ошибки автоматически П окаяат* линейку Детекторы данных В ер нут ь настройки по умолчанию См арт -и о лир о ад ми е ас та е ка ПС март кавычки См арт тира См арт -с с ы п к и Й Замена текста о
а
Н астрой к и
Н о вы й документ Открытие и сохранение
И р мот крыт и и файле Отображать файлы а виде кода, ан е форматированного текста Ч ь . . СО тоб ража ть файлы а айда кода. а неф о р матированного текста
П рис охранении файла Д обеалат* расширение к именам файлов простого текста Кодировка файла простого текста О ткры ти е файлов Сохранение файлов) Выбор параметров сохранения- файлов Т и п документа Стили кодировка Сохранять пусть им еста нас тр ан и ц а
В ер нут настройки по умолчанию iРис. 4.3. Запуск редактора TextEdit и выбор режима простого текста в окне Настройки

Глава 4. Создание простой страницы
Шаг 1: Добавление контента
С Допустимые имена файлов
Присваивая имена файлам, придерживайтесь следующих правили соглашений:
Используйте соответствующие суффиксы. Файлы HTML должны заканчиваться расширением .html некоторые серверы допускают использование расширения Графические файлы для веб-страниц долины быть помечены в соответствии со своим форматом .png, .gif или .jpg формат .jpeg также приемлем).
Никогда не используйте пробелы в именах файлов. Чтобы визуально отделить слова, используйте символ подчеркивания или тире. Например, vladimir_biografija.html или Избегайте специальных символов и кириллицы, таких как ?, %, #, /,:,
* и т. д. Имена файлов должны содержать только латинские буквы, цифры, знаки подчеркивания, тире и точки.
В зависимости от конфигурации сервера имена файлов могут быть чувствительны к регистру. Последовательное использование только строчных букв, даже когда в этом нет необходимости, позволит легко управлять именами ваших файлов.
Придерживайтесь коротких имен.
Короткие имена позволяют контролировать количество символов и размер файла. Если вы действительно должны дать файлу длинное, многословное имя, для улучшения восприятия вы можете отделить слова заглавными буквами, например DlinnoeNazvanieDocumenta.
html, или символами подчеркивания, например, dlinnoe_nazvanie_ Собственные соглашения. Полезно разработать последовательную схему именования для огромных сайтов. Например всегда использовать строчные символы и подчеркивания между словами. В дальнейшем при переходе по ссылке на этот файл вы сможете вспомнить, почему вы назвали его именно так ч Шаг 1: Добавление контента
Теперь, когда вы создали новый документ, пришло время ввода контен­
та. Веб-страницы всегда начинаются с этого.
Упражнение 4.1 поможет вам справиться со вводом исходного текста и сохранением документа в новой папке.
УПРАЖНЕНИЕ 4.1. ВВОД КОНТЕНТА
1. Введите текст главной страницы в новый документ в текстовом редакторе в том виде, в котором вы его здесь видите. Для повторения примера сохраните такие же пустые строки. Неотформатированный вариант текста для этой страницы доступен на диске, прилагающемся к книге, в файле Примеры \глава-04\Текст.Ы Бистро "Черный гусь"
Ресторан
Бистро "Черный гусь" предлагает непринужденные обеды и ужины в стильной атмосфере. Меню обновляется регулярно Обслуживание праздников и вечеринок
Вы развлекаетесь — мы займемся приготовлением. Персонал бистро "Черный гусь" может обслуживать различные события от приготовления закусок для бридж- клуба до элегантных корпоративных вечеров по сбору средств.
Местоположение и часы работы
Рязань, ул. Электровольтная, С понедельника по четверг с 11 до 21, в пятницу и субботу с 11 до полуночи. Выберите команду меню Файл Сохранить) или Файл Сохранить как (File => Save as), чтобы перейти в диалоговое окно Сохранить как (Save as) (рис. 4.4). Первое, что вы должны сделать — это создать новую папку, которая будет содержать все файлы для этого сайта, другими словами локальную корневую папку Чтобы создать новую папку, щелкните по кнопке сизо бражением папки в верхней части диалогового окна X: Щелкните по кнопке Новая папка (New Folder).
... “ Т ' ......
■Сохранение
ДО
§ ® • ■
ТА СО ■
Примат ' h Упорааачкпф •
Соцми* пату С Полог Пример*
Дат* измфкфмй*
»
1 г -

?м<
Сомрамип кай: Hot**
* П > ■
- . ■ • д Ату ми т м
: Ш Загрузи глааа-tt
1MJ
HHHMniOt
>. и ц и ..« и т А .лааа-М
я х я ч ил з
П « » ас Ц
А Программ Равочи» стел г яам-0!
«.W iQlJ
Палм с ф.1Ш|
Ca РабочиЛ с?ол jb гл та о и о и н ш
Пата<ф- I
I
_» ЬЛлчстеп. А гл ИХ Ч ГО г лам 11.013012 НО*
Пашикф. Б
у мама вилм k * лам Ш Ч 1*31
П»г»*а с
§
Му».м
1 Доаумаигм Ц глам-11 1I.0W0U & U
< ф, v pj
Иаобраиааииа w Иювражаиам v <
>
It
ТилфаЛл* (k« файлы
Сирыть расширим Ном лапиа
Р ис. 4.4. Сохранение файла index.html в новой папке с именем Часть II. Разметка HTML для структуризации
Шаг 1: Добавление контента
Назовите новую папку bistro и сохраните в ней текстовый файл с именем index.htm l. Пользователи операционной системы Windows должны выбрать пункт Все файлы) из списка Тип файла, чтобы избавиться от расширения .txt, которое добавляет к имени файла редактор Блокнот (Notepad). Чтобы файл был признан браузером в качестве веб-документа, его имя должно заканчиваться на .html. Дополнительные советы по присвоению файлам имен можно найти во врезке Допустимые имена файлов».
П редупреж дение. Для правильного отображения кириллических символов (то есть русского текста) необходимо в раскрывающемся списке Кодировка (Encoding) выбрать пункт UTF-8.
3. Взглянем на файл index.html в браузере. Запустите любой браузер я использую Firefox) и выберите команду меню Файл Открыть) или Файл Открыть файл. Перейдите к файлу index.html и выберите его, чтобы открыть в браузере.
Вы должны увидеть что-то похожее на ту страницу, что показана на рис. 4.5. Мы поговорим о результатах в следующем разделе.
НК
_ п +й «■ Примеры ава-04/indexhl СО
С
сэ
Бистро 'Черный гусь" Ресторан Бистро 'Черный гусь" предлагает непринужденные ооеды и ужины в стильной атмосфере Меню обновляется регулярно Обслуживание праздников и вечеринок Вы развлекаетесь мы займемся приготовлением Персонал бистро "Черный гусь" может обслуживать различные события от приготовления закусок для бридж-клуба до элегантных корпоративных вечеров по сбору средств Местоположение и часы работы Рязань, ул. Электровольтная 17; С понедельника по четверг с 11 до 21, в пятнилу н субботу с 11 до
ПОЛУНОЧИ
Р и с.
4.5. Первый вариант главной страницы, показанный в браузере
Резюме
Наш контент выглядит не слишком хорошо (рис. 4.5). Все слова в тексте оказались сдвинутыми вместе, а это отличается оттого, как выглядел текст в исходном документе. Из этого можно сделать некоторые выводы. Первое, что очевидно, — браузер игнорирует строки в исходном документе. Во врезке Что игнорируют браузеры» перечислены и другие виды данных, которые не отображаются в окне браузера.
Во-вторых, мы видим, что простого ввода некоторого контента и присвоения документу имени с расширением .html недостаточно. Хотя браузер отображает текст из файла, структура контента осталась неопределенной. И вот здесь наступает очередь языка HTML. Чтобы доба-
Что игнорируют браузеры
При просмотрев браузере часть информации в исходном документе игнорируется, в том числе:
Знаки табуляции и несколько пробелов. Когда браузер встречает знак табуляции или последовательность из нескольких пробелов, он отображает один пробел. Так что, если документ содержит такой, например, текст:
м ног о лет назад в браузере он отобразится так:
м ног ом ног о лет назад Переводы строк (разрывы или переносы строк.
Браузеры воспринимают переводы строк как пробелы, поэтому, исходя из вышеописанного пункта, переводы строк не влияют на форматирование страницы. Текст и элементы будут следовать непрерывно, пока в тексте документа не встретится новый блочный элемент, например, заголовок ( h i) или абзац р, или элемент перевода строки (Ьг).
Табуляция. Табуляция также воспринимается как пробелы между символами, и это значит, что она бесполезна.
Неопознанные элементы разметки.
Браузеры игнорируют любые теги, которые они не понимают, или те, что были введены с ошибками. В зависимости от элементов и браузера, это приводит к различным результатам.
Браузер может вообще ничего не отобразить или покажет содержимое тега так, как если бы это был обычный текст.
Текст в комментариях.
Браузеры не будут отображать текст между специальными тегами < ! — и — >, используемыми для обозначения комментариев. См. врезку Добавление скрытых комментариев далее в этой главе.
Глава 4. Создание простой страницы
Шаг 2: Структурирование документа вить структуру сначала к самому H T M L -документу (рассматривается в шаге 2), затем к содержимому страницы (шаг 3), мы будем использовать разметку Если браузер знает структуру контента, он сможет сделать отображаемые страницы более понятными.
Шаг 2: Структурирование документа
У насесть контент, который мы сохранили в H T M L -документе, теперь мы готовы приступить к его разметке.
HTML-элементы
Вернувшись к главе 2, вы увидите примеры H TM элементов с открывающим тегом, например р для абзаца, и закрывающим (р. Прежде чем начать добавлять теги к нашему документу, рассмотрим структуру H TM элемента и изучим некоторые важные термины. Общий вид H TM элемента представлен на рис. Элементы определяются тегами в исходном тексте. Тег состоит из имени элемента (как правило, это аббревиатура длинного имени элемента) заключенного в угловые скобки (< >). Браузер знает, что любой текст внутри угловых скобок является скрытыми не отображает его в своем окне.
Имя элемента появляется в открывающем теге (также называемом начальным тегом а затем в закрывающем (или конечном) теге после слеша ( /) . Закрывающий тег работает чем-то вроде выключателя для элемента. Будьте внимательны и не используйте подобный символ — обратный слеш в закрывающем теге (смотрите совет «Слеш против обратного слеша»).
Теги, добавленные к контенту, называются разметкой Важно отметить, что элемент состоит как из контента, таки из разметки (открывающий и закрывающий теги. Однако не все элементы содержат контент.
Открывающий тег
Контент (может быть текстом Закрывающий тег (начи- или другими элементами) нается с символа имя элемента Содержимое (контент)
Элемент
< h l> Бистро "Черный гусь"
< / h Рис. Структура HTM L-элемента

Часть II. Разметка HTML для структуризации
Элемент состоит из содержимого (контента) и его разметки
Шаг 2: Структурирование документа
Некоторые из них пустые по определению, такие, например, как элемент
img, используемый для добавления изображения на страницу. О пустых элементах мы поговорим в этой главе немного позже.
И еще один момент — использование прописных букв. В языке HTM L использование прописных букв в именах элементов не играет большой роли. Так, для браузера теги
, и
<
im g
> означают одно и тоже. Однако в языке XH TM L (более строгой версии H TM L) все имена элементов должны быть указаны строчными буквами, чтобы считаться допустимыми. Многим веб-разработчикам нравится упорядоченность более строгой разметки XHTM L, и они придерживаются написания строчными буквами, как и я в данной книге.
Базовая структура документа
На рис. 4.7 показан рекомендуемый упрощенный каркас документа на языке HTML5. Я говорю рекомендуемый потому, что единственным обязательным элементом в HTM L является тег
title. Ноя рекомендую, особенно новичкам, четко организовать документы с помощью надлежащей структурной разметки. И если вы верстаете страницы, используя XHTML, все перечисленные ниже элементы, кроме тега
meta, обязательно должны присутствовать, чтобы код был верным. Давайте посмотрим, что происходит на рис. О Яне хочу сбивать вас столку, но первая строка в примере — вовсе не элемент. Это объявление типа документа (также называемое объявление DOCTYPE), определяющее этот файл как документ на языке. Я расскажу подробнее об объявлениях типа документа в главе 10, а в рамках этого обсуждения достаточно сказать, что его добавление сообщает браузерам: документ необходимо интерпретировать в соответствии со спецификацией HTML5.
0 Весь документ заключен в элемент
html. Элемент
html называется корневым элементом, поскольку он содержит все элементы в документе и не может содержаться нив каком другом элементе. Он используется как для HTML, таки для X H TM документов Содержимое внутри элемента
html состоит из головы (раздел заголовка и тела Элемент
head раздел заголовка) содержит описательную информацию о документе, такую как заголовок, используемые таблицы стилей, сценарии и прочие метаданные.
О Элементы
meta, расположенные внутри элемента
head, предоставляют данные о самом документе. Элемент
meta можно использовать для предоставления самой разнообразной информации, нов данном случае он определяет кодировку набора символов (стандартизированный набор букв, цифр и символов, применяемую в документе. Яне хочу сейчас слишком углубляться в детали, но имейте ввиду, что существует множество веских причин для указания атрибута
charset в каждом документе, поэтому я включила его в минимальную структуру документа.
СОВЕТ
Слеш против обратного слеш а
В тегах и адресах используется наклонная черта
(слеш) (/). Слеш находится под знаком вопроса (?) на стандартной клавиатуре в английской раскладке.
Этот символ легко спутать с обратной наклонной чертой обратным слешем) (\), которая находится под символом вертикальной черты ( I ). Обратный слеш недопустим в именах тегов или адресах, так что будьте внимательны и не используйте его.
ш
Ш
V_____________________________ У
Глава 4. Создание простой страницы
Шаг 3: Определение текстовых элементов
ПРИМЕЧАНИЕ
До появления спецификации
HTML5 синтаксис, используемый для указания набора символов в элементе m e ta . был значительно сложнее. Если бы выписали документ на языке
HTML 4.01 или XHTML, элемент m e ta выглядел бы так:
У
1 1 2
У * * ^
^
УС М o n t e n t = ^ e x t / п cnij. f

c h a r s e t = U T F - 8 " Польза элемента Для каждого документа, элемент
title не только необходим, но и очень полезен. Заголовок документа — это то, что отображается в списке Закладок или в Избранном пользователя, а также на вкладках в браузере. Кроме того, описательные заголовки документа — ключевой инструмент повышения доступности, так как они — первое, что человек видит при использовании программ экранного доступа. Поисковые системы также в значительной степени зависят от заголовков документов. Поэтому важно обеспечить содержательные и описательные заголовки для всех ваших документов и избегать расплывчатых заголовков, таких как Добро пожаловать или Моя страница. Также можно ограничить длину заголовков документа, чтобы они могли уместиться в области заголовка браузера. Другим удачным приемом будет поместить вначале часть заголовка, содержащую более определенную информацию (например, расположить описание страницы перед названием компании, чтобы заголовок документа был виден, когда в окне браузера открыто сразу несколько вкладок Также в разделе заголовка обязателен элемент
title. В соответствии со спецификацией HTML, каждый документ должен содержать описательное название Наконец, элемент
body тело) содержит весь контент, который мы хотим отобразить в окне браузера.
Готовы ли вы добавить некоторую структуру к главной странице бистро Черный гусь»?
Откройте документ index.html и перейдите к упражнению 4.2.
©
<
1   2   3   4   5   6   7   8

перейти в каталог файлов


связь с админом