HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - [6]

Шрифт
Интервал

Основные принципы создания Web-страниц. Язык HTML 5

Web-страницы выглядят зачастую очень пестро: разнокалиберные куски текста, таблицы, картинки, врезки, сноски и даже фильмы. Но описывается все это в виде обычного текста. Да-да, Web-страницы — суть текстовые файлы, которые можно создать с помощью хорошо знакомого нам редактора Блокнот, поставляемого в составе Windows! (Разумеется, подойдет любой аналогичный текстовый редактор.)

Для форматирования содержимого Web-страниц применяется особый язык — HTML (HyperText Markup Language, язык гипертекстовой разметки). С помощью команд — тегов — этого языка создают и абзацы текста, и заголовки, и врезки, и даже таблицы.

Первая версия языка HTML появилась очень давно, еще в 1992 году. С тех пор по Сети утекло немало гигабайт… HTML также не стоял на месте. В данный момент готовится к выходу окончательная спецификация новой версии HTML под номером 5, и многие Web-обозреватели уже поддерживают некоторые ее возможности. Ее-то мы и будем изучать.

Язык HTML и его теги

Изучать HTML лучше всего на примере. Так что давайте сразу же создадим нашу первую Web-страничку. Благо Windows уже содержит необходимый для этого инструмент — Блокнот.

НА ЗАМЕТКУ

Вообще, для создания Web-страниц существует множество специальных программ — Web-редакторов. Они позволяют работать с Web-страницами, даже не зная HTML, — как с документами Microsoft Word, просто набирая текст и форматируя его. Также они следят за правильностью расстановки тегов, помогут быстро создать сложный элемент Web-страницы и даже опубликовать готовый Web-сайт в Сети. К таким программам принадлежит, в частности, известный Web-редактор Adobe Dreamweaver. Однако мы пока что будем пользоваться простейшим текстовым редактором Блокнот. Это позволит нам лучше познакомиться с HTML.

Откроем Блокнот и наберем в нем текст (или, как говорят бывалые программисты, код), приведенный в листинге 1.1.

Листинг 1.1

Пример Web-страницы

Справочник по HTML

Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке

HTML.

Проверим набранный код на ошибки и сохраним в файл с именем 1.1.htm. Только сделаем при этом две важные вещи.

1. Сохраним HTML-код в кодировке UTF-8. Для этого в диалоговом окне сохранения файла Блокнота найдем раскрывающийся список Кодировка и выберем в нем пункт UTF-8.

2. Заключим имя файла в кавычки. Иначе Блокнот добавит к нему расширение txt, и наш файл получит имя 1.1.htm.txt.

Все, наша первая Web-страница готова! Теперь осталось открыть ее в Web-обозревателе и посмотреть на результат.

Мы можем использовать стандартно поставляемый в составе Windows Web- обозреватель Microsoft Internet Explorer. Но Internet Explorer на данный момент не поддерживает HTML 5; его поддержку обещают только в версии 9, которая пока находится в разработке. HTML 5 поддерживают последние версии Mozilla Firefox, Opera, Apple Safari и Google Chrome, поэтому предпочтительнее какая-либо из этих программ.

Откроем же Web-страницу в выбранном Web-обозревателе (автор выбрал Firefox) и посмотрим на нее (рис. 1.3).

Рис. 1.3. Наша первая Web-страница

Видите? Мы создали Web-страницу, содержащую большой "кричащий" заголовок,

абзац текста, который автоматически разбивается на строки и содержит фрагмент текста, выделенный полужирным шрифтом (аббревиатура "HTML"). И все это — в "голом" тексте, набранном в Блокноте!

Теперь посмотрим, что же мы такое написали в файле 1.1.htm. Пока что ограничимся небольшим фрагментом HTML-кода (листинг 1.2).

Листинг 1.2

Справочник по HTML

Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке HTML.

Здесь мы видим текст заголовка и абзаца. И еще странные слова, взятые в угловые скобки — символы < и >. Что это такое?

Это и есть теги HTML, о которых упоминалось ранее. Они превращают тот или иной фрагмент HTML-кода в определенный элемент Web-страницы: абзац, заголовок или текст, выделенный полужирным шрифтом.

Начнем с тегов

и

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

помечает начало фрагмента, на который распространяется действие тега, и называется открывающим. А тег

устанавливает конец "охватываемого" фрагмента и называется закрывающим. Что касается самого фрагмента, заключенного между открывающим и закрывающим тегами, то он называется содержимым тега. Именно к содержимому применяется действие тега.

Все теги HTML представляют собой символы < и >, внутри которых находится имя тега, определяющее назначение тега. Закрывающий тег должен иметь то же имя, что и открывающий; единственное отличие закрывающего тега — символ /, который ставится между символом < и именем тега.

Продолжить чтение
Еще от автора Владимир Александрович Дронов
Macromedia Flash Professional 8. Графика и анимация

Подробно, доступно и с юмором рассматривается создание современной интернет-графики и анимации с помощью пакета Macromedia Flash Professional 8. Описываются основные инструменты рисования и правки графики, использование слоев, образцов и библиотек, работа с текстом, импорт графики, видео и звука. Рассмотрен процесс производства фильмов стандартными, и весьма богатыми, средствами Flash. Также приводятся краткое описание встроенного языка программирования Flash — Action Script — и методика его применения для разработки интерактивных элементов.

Рекомендуем почитать
Технология редакционно-издательского процесса

Рассмотрен современный редакционно-издательский процесс и про–анализирована роль редактора на каждом из его этапов. Особое внимание уде–лено подготовке рукописи к изданию, анализу композиции и содержания произведения, редактированию нетекстовых элементов, таких как формулы, таблицы, иллюстрации. Даны характеристики аппарата книжных и жур–нальных изданий. Освещена тема взаимоотношений автора и редактора.Для студентов высших учебных заведений, получающих образование по направлениям (специальностям) «Книжное дело», «Издательское дело и редактирование», «Литературное творчество».

Перестройка в церковь

Слово «миссионер» привычно уже относить к католикам или протестантам, американцам или корейцам. Но вот перед нами книга, написанная миссионером Русской Православной Церкви. И это книга не о том, что было в былые века, а о том, как сегодня вести разговор о вере с тем, кто уже готов спрашивать о ней, но еще не готов с ней согласиться. И это книга не о чужих победах или поражениях, а о своих.Ее автор — профессор Московской Духовной Академии, который чаще читает лекции не в ней, а в светских университетах (в год с лекциями он посещает по сто городов мира)

Административное право России в вопросах и ответах

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

Общие основы педагогики

Непосредственной сдаче экзамена или зачета по любой учебной дисциплине всегда предшествует достаточно краткий период, когда студент должен сосредоточиться, систематизировать свои знания. Выражаясь компьютерным языком, он должен «вывести информацию из долговременной памяти в оперативную», сделать ее готовой к немедленному и эффективному использованию. Специфика периода подготовки к экзамену или зачету заключается в том, что студент уже ничего не изучает (для этого просто нет времени): он лишь вспоминает и систематизирует изученное.Содержание и структура пособия соответствуют требованиям Государственного образовательного стандарта высшего профессионального образования.Издание предназначено студентам педагогических вузов.

Концепции современного естествознания

В учебнике, написанном коллективом преподавателей РГПУ им. Герцена под руководством Л. А. Михайлова – декана факультета безопасности жизнедеятельности, лауреата премии Президента РФ, представлены новейшие концепции всех естественных наук: биологии, генетики, физики, химии, математики, информатики, биохимии, геологии, антропологии и других. В книге раскрываются социальные последствия новых научных открытий, даются современные технологии обучения в области концепций современного естествознания.Учебник полностью соответствует Государственному образовательному стандарту и имеет гриф УМО.

Экономика фирмы

Объектом изучения данного курса лекций является фирма как единая система, которая функционирует в условиях рыночной экономики. Рассматриваются организационно-правовые формы фирм, основные условия обеспечения экономической стабильности фирмы, принципы ее управления и организационная структура, порядок обеспечения кадрами, модель функционирования фирмы в рыночной среде. Описана комплексная система обеспечения ресурсами (трудовые ресурсы, основные и оборотные средства), система показателей для оценки эффективности их применения.Этот курс лекций предназначен для студентов, аспирантов и преподавателей экономических факультетов университетов и экономических вузов.