Занятие 1 (HTML)
advertisement
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>.
