Занятие 1 (HTML)

реклама
1
HTML. Введение.
HTML (HyperText Markup Language) - это язык разметки гипертекста. HTML представляет собой систему разметки веб-страниц и определяет, где и как в документе
отображать отдельные элементы текст, рисунки, ссылки и т.д. Т.е. при необходимости изменить, например текст (размер, цвет, наклон и т.д.) или вставить картинку в нужном месте добавляются специальные символы называемые тегами. Теги не отображаются браузерами. Вы будете видеть только результат, т.е. измененный текст. Теги заключаются в
угловые скобки. Например запись: текст означает, что текст, находящийся между тегами и
будет отображаться жирным начертанием. Аналогично с помощью тегов создаются списки, таблицы, добавляются изображения и другие элементы веб-страницы.
Исходный код самой веб-страницы является обычным текстовым документом, который можно написать в обычном Блокноте (Пуск/Все программы/Стандартные/Блокнот)
входящем в состав любой Windows подобной операционной системы и состоит всего из
двух основных компонентов:
 текст, который и надо набрать в окне браузера;
 теги, они добавляют рисунки, устанавливают ссылки, меняют вид текста и делают еще множество других полезных вещей.
Этот текстовый документ сохраняют с расширеним .html или .htm (большой разницы
нет) и получают готовую веб-страницу.
Таким образом, освоение HTML сводится к изучению основных тегов (их около двух
десятков) и правил их использования.
Для элементов разметки существуют правила их использования, которые установлены спецификацией HTML. Этот документ регламентирует порядок применения тегов, их
вложенность и принцип работы. Знание спецификации и ее соблюдение помогает избежать типичных ошибок и позволяет создать универсальный код, одинаково хорошо работающий на различных устройствах и в разных браузерах.
Полезный совет: Удобнее пользоваться при наборе кода не «Блокнотом» а более
продвинутой и к тому же бесплатной программой Notepad++. Функции программы те
же, но все более наглядней и удобнее например есть подсветка кода, т.е. теги, параметры тегов и текст отображаются разными цветами, при написании тега неправильно
сразу изменяется цвет.
Браузеры
Сам HTML-файл обычно размещается на сервере и для его просмотра необходима
специальная программа — браузер, например IE, Mozilla Firefox, Opera . В задачу браузера входит подключение к удаленному серверу, получение кода HTML и его интерпретация согласно спецификации. Иными словами, браузер преобразует HTML-документ в вебстраницу, которую мы и наблюдаем, когда работаем по Интернету. Заметим также, что
браузер вполне корректно работает и на локальном компьютере, это позволяет легко проверять работу созданных Вами HTML-документов. Для упрощения задачи мы будем работать с браузером IE, этот браузер есть у всех пользователей Windows т.к. он входит в
стандартный пакет установки операционной системы.
2
СОЗДАНИЕ ПЕРВОЙ WEB-СТРАНИЦЫ.
Полезный совет: Существует множество визуальных редакторов облегчающих создание HTML документов, например Dream Viewer, Word , различные конструкторы сайтов и т.д. Но для начала, если Вы действительно хотите сами разбираться, рекомендуется все таки освоить написание кода. Для этого существует несколько причин. Основные:
 Если вдруг что-то случиться Вы сможете самостоятельно, а главное оперативно (и бесплатно) устранить проблему.
 При необходимости самостоятельно внести коррективы в свой сайт (добавить или удалить дополнительные разделы, страницы).
 Почти все визуальные редакторы вносят в создаваемый документ избыточный код, что приводит к «утяжелению страницы» и как следствие увеличению времени загрузки, т.е. пользователь может просто не дождаться загрузки
страницы и уйти на другой сайт.
Не важно, чему посвящен ваш сайт футболу, автомобилям или аквариумным рыбкам,
без разницы на какую он тему, механизм всегда одинаков. Открываем программу Блокнот,
входящую в Windows (Пуск > Все программы > Стандартные > Блокнот) или Notepad++:
Листинг 1.
<html>
<head>
<title>Автомобили со всего мира</title>
</head>
<body>
Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете
много полезной и интересной информации.
</body>
</html>
Сохраняем этот файл на жестком диске (желательно завести отдельную папку, в которую вы будете складывать все файлы Вашего сайта) под именем index.html обязательно
с расширением .html или htm. Когда Ваш сайт будет размещен в интернете, то при наборе
в адресной строке браузера адреса сайта, например http://www.mysite.ru (или другого доменного имени), по умолчанию всегда открывается файл index.html . Теперь как обычно
два раза щелкаем левой кнопкой мыши по этому файлу и видим:
Рисунок 2.1
Вы создали свою первую HTML-страницу.
3
Обращаем внимание, на исходный код, слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их называют тегами (tags). Теги никогда не
отображаются при просмотре страницы - они служат для управления оформлением.
Тег <html> , который Вы видите в первой строке, означает, что наш текст действительно написан на языке HTML. Большинство тегов языка HTML — парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в первой строке стоит открывающий тег <html> , а в последней — закрывающий тег </html>. Все, что
расположено между ними, считается HTML-документом.
В языке HTML совершенно не имеет значения, строчными или прописными буквами
записаны теги. Можно написать </HTML> или <html> — для браузера это одно и то же.
В рассмотренном примере вы видите еще один тег — <body> . Этот тег тоже парный. Все, что расположено между ним и его закрывающим тегом </body>, считается "телом" документа и отображается на экране это то что видно при открытии страницы.
HTML-документы, помимо "тела", обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами <head> и
</head>. Между этими тегами пишется служебная информация необходимая для работы
браузера.
Между тегами <title> и </title> пишут то, что видно в заголовке окна браузера в данном случае у нас прописано <title> Автомобили со всего мира</title>.
Но это еще не всё, для нормального отображения Вашей страницы, браузеру необходимо сообщить ещё некоторую служебную информацию. Которая прописывается между
тегами <head> и </head> . То, что мы сейчас пропишем необходимо только браузеру, посетитель Вашего сайта этих строк кода не увидит. Поправьте Ваш код как в листинге 2.
Листинг 2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1251">
<title>Автомобили со всего мира</title>
<meta name="keywords" content="автомобили, легковые, гараж, автопутешествия">
<meta name="description" content="Все, что вы хотите знать про автомобили">
</head>
<body>
Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете
много полезной и интересной информации.
</body>
</html>
Коротко поясним что же мы добавили в код страницы. Первая строка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
4
Поясняет, что документ написан на языке HTML версии 4.01 наиболее стабильной на
сегодняшний день (есть и другие версии HTML, они не очень сильно отличаются). Обратите внимание на следующую строку:
<meta http-equiv="Content-Type" content="text/html; charset=windows1251">
эта строка поясняет в какой кодировке отображать страницу (их тоже много), в русскоязычном интернете наиболее предпочтительная windows-1251. Следующая строка:
<meta name="keywords" content="автомобили, легковые, гараж, автопутешествия">
Здесь в кавычках пишутся ключевые слова, по которым Ваш сайт будет отыскиваться поисковыми машинами, такими как Yandex, Google и т.д. Естественно тут необходимо
писать слова, применительно к своему сайту.
<meta name="description" content="Все, что вы хотите знать про автомобили">
То же самое что и ключевые слова, только здесь в кавычках указывают словосочетания и предложения, описание Вашего сайта которое будет видно в поисковиках. В настоящее время теги <meta name="keywords"> и <meta name="description"> не столь актуальны
как ранее, но все же рекомендуется их прописывать. Эти теги являются одиночными т.е.
их не нужно закрывать.
Вот теперь код Вашей первой страницы полностью готов и будет корректно отображаться любым браузером. Если Вы обновите вашу страницу, то увидите, что на экране
монитора ничего не изменилось.
ФОРМАТИРОВАНИЕ ТЕКСТА.
Для форматирования текта, необходимо открыть код в программе Блокнот и между
тегами <body> </body> (после первой ранее добавленной строчки) добавляем следующий
текст:
Листинг 3.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1251">
<title>Автомобили со всего мира</title>
<meta name="keywords" content="автомобили, легковые, гараж, автопутешествия">
<meta name="description" content="Все, что вы хотите знать про автомобили">
</head>
<body>
Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете
много полезной и интересной информации.
5
Нынешний год - пора обновления модельного ряда. Оно продолжится по меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный
SUV. Первая жертва: из прайс-листов вычеркнута - модель Sportcoupe 2000 года
рождения, с весны его заменит прямой наследник - CLC.
Компактный «спорткар» помимо нового имени получил обновленную внешность и
усовершенствованную механику. Он, как и Sportcoupe, создан на базе седана Скласса прошлого поколения. Производиться CLC будет на том же бразильском заводе, и цена, как у предшественника, будет довольно привлекательной - порядка
28 000 евро.
Переходя от Sportcoupe к CLC, мерседесовские инженеры усовершенствовали и
заменили более 1100 элементов. Из значимых изменений, которыми может похвастать CLC, отметим более «короткий» руль, значительно облегчающий управление,
современную информационную систему, спутниковый навигатор с картами на DVD и
на жестком диске. Внешне CLC можно узнать по новому дизайну передней части,
который роднит новинку с новым С-классом. Сзади изменился дизайн крышки багажника, обновилась форма фонарей.
Из двигателей CLC предлагает четыре четырехцилиндровых (три бензиновых и
дизель) мощностью от 122 до 184 л.с. и две V-образных бензиновых «шестерки» 204 и 272 л.с. Сильнее других изменился 1,8-литровый мотор, который устанавливается на версию CLC 200 Kompressor: его мощность поднялась на 20 сил (до
184 л.с), а расход на 100 км по сравнению с предыдущей модификацией сократился почти на 1 л. Серийно все двигатели агрегатируются с шестиступенчатой «механикой», но на версиях с четырехцилиндровым двигателем можно заказать и пятидиапазонный «автомат». Семидиапазонный 7G-Tronic будет доступен с моторами
V6. Оборудование салона достойно великой марки, причем все - от навигатора до
систем безопасности - основано исключительно на проверенных решениях. В салонах российских дилеров автомобиль появится во втором полугодии.
</body>
</html>
После этого необходимо сохранить измененный документ и обязательно обновить
страницу в браузере (клавиша F5), результат показан на рисунке 3.1.
Рисунок 3.1
6
В результате полностью не форматированный текст. Теперь необходимо его отформатировать. Это и называется гипертекстовой разметкой текста и для этого применяются
теги форматирования.
В HTML текст принято заключать в парные теги <p> </p> Открываем Блокнот и
каждый абзац всего текста заключаем в парные теги <p> </p> , т.е. каждый абзац должен
выглядеть вот так:
Листинг 3. 2
<p>Нынешний год - пора обновления модельного ряда. Оно продолжится по
меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута - модель Sportcoupe
2000 года рождения, с весны его заменит прямой наследник - CLC. </p>
В результате получаем следующий вид страницы:
Рисунок 3.2.
Т.е. для создания каждого нового абзаца используется тэги <p>, а для перехода на
новую строчку без создания абзаца - тэг <br> . Тэги <br> закрывать не нужно они называются одиночными.
Кроме того теги могут иметь атрибуты, которые могут иметь разное значение и придают определенный вид тексту отображаемому браузером. Вы наверное уже обратили
внимание, что наш набранный текст выравнен по левому краю. Это значение принято по
умолчанию, а полностью записывается вот так:
<p align=left>Выравнивание текста по левому краю</p>
<p align=right>Выравнивание текста по правому краю</p>
<p align=center>Выравнивание текста по центру</p>
<p align=justify>Текст, находящийся между этими элементами выравнивается
по ширине</p>
<p align=justify>Выравнивается по ширине</p>
7
По экспериментируйте с разными вариантами выравнивания текста и остановитесь
на том который Вам больше нравится:
Форматирование заголовков.
В HTML документах для создания заголовков используют парные тэги <hn></hn>,
где n – число от 1 до 6. Заключив текст между этими тэгами, вы получите заголовок определенного размера выделенного жирным цветом. Чем больше цифра – тем меньше размер
букв или цифр в заголовке, т.е. самые большие буквы (или цифры) будут у
<h1>Заголовок</h1>, самые маленькие у <h6>Заголовок</h6>
<h1>Заголовок</h1>
<h2>Заголовок</h2>
<h3>Заголовок</h3>
<h4>Заголовок</h4>
<h5>Заголовок</h5>
<h6>Заголовок</h6>
Выглядеть заголовки будут так:
Рисунок 4.1.
Раз уж мы решили что наша страничка посвящена автомобилям давайте придумаем
заголовок, например "Обзор автомобилей 2008 года" и заключим его в парные теги <h2>
</h2>.
Выравнивание заголовков осуществляется так же как абзацев через атрибут align и
значение этого атрибута "center" . Кстати значения атрибутов принято заключать в кавычки. Наш заголовок в коде должен выглядеть вот так:
Обзор автомобилей 2008 года.
8
А страничка должна иметь вот такой вид:
Рисунок 4.2.
Попробуйте применить разные значения тегов с разными значениями от 1 до 6 и понаблюдайте, как изменяется размер заголовков.
Форматирование текста
На разных сайтах по разному отображаются страницы. Текст сайтов бывает разного
цвета, размера, жирный, курсив, попадаются разные шрифты и т.д. Как Вы уже поняли
каждый вид отображения текста, задаётся соответствующими тегами. Эти теги определяяют браузеру в каком виде отображать текст.
Жирное начертание
Насыщенностью - называют увеличение толщины линий шрифта и соответственно
контраста. Обычно различают четыре вида насыщенности: светлое начертание, нормальное, полужирное и жирное. Однако с помощью HTML можно установить только нормальное и жирное начертание. Для установки текста жирного начертания применяется два
парных (открывающий и закрывающий) тега: <b> </b> и <strong> </strong>. В настоящее
время рекомендуется применять тег: <strong> </strong>.
<strong>Сильное выделение текста</strong>
Курсивное начертание
Курсивный шрифт представляет собой не просто наклон отдельных символов, для
некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный.
Курсив для текста определяют два тега: <i> </i> и <em> </em>.
<em>Курсивное начертание шрифта</em>
Следует отметить, что теги <b> и <strong>, также как <i> и <em> хотя и похожи по
своему действию, являются не совсем эквивалентными и заменяемыми. Первый тег <b> является тегом физической разметки и устанавливает жирное начертание текста, а тег
<strong> - является тегом логической разметки и выделяет помеченный текст. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось,
9
чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода
информации. Теоретически, если воспользоваться, например, речевым браузером, то
текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако
получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Поэтому при написании кода HTML-страницы рекомендуется применять теги:
<strong> </strong> и <em> </em>.
Скачать