Книга научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо
 Скачать 23.7 Mb.
| Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
| Глава 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. © <  перейти в каталог файлов | Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |