Лабораторная работа №2: Язык разметки гипертекста html. Структура web-сайта



Скачать 275.76 Kb.
Дата16.12.2016
Размер275.76 Kb.
Просмотров383
Скачиваний0
ТипЛабораторная работа

Лабораторная работа №2: Язык разметки гипертекста HTML. Структура web-сайта

Введение


Влияние информационных технологий и интернета на современное общество трудно переоценить. Интернет является как средой общения между людьми, так и местом сосредоточения огромного массива знаний. Подавляющая часть информации в интернете размещена в виде сайтов. Сами сайты состоят из отдельных веб-страниц, представляющих собой текстовые документы, написанные на языке HTML (HyperText Markup Language).

Эта работа и последующие предназначены для ознакомления с основными принципами функционирования глобальной сети Internet и с основами языка HTML версии 5.

Информацию, хранимую на компьютере, можно разбить на две группы: данные и программы. Данные создаются и изменяются с помощью программ. Практикум, который на данный момент Вы читаете, является документом Word и относится к данным, а сам Word – к программам. Большинство офисных программ, таких как, например, Word, Excel, позволяют одновременно, и просматривать содержимое документа и редактировать, внося изменения в него. А в отношении web-страниц ситуация иная:


  • для создания и редактирования применяются обычные текстовые редакторы, такие как Блокнот и WordPad, специализированные редакторы Notepad++, PSPad и среды разработки приложений NetBeans, Macromedia Dreamweaver;

  • для просмотра же используются программы, называемые браузерами (Google Chrome, Firefox, Opera, Яндекс.Браузер).

Сами web-страницы объединены в сайты. В состав сайтов помимо web-страниц могут также входить графические файлы (изображения), Javascript- и CSS-файлы. Множество таких сайтов образуют глобальную сеть Интернет. Размещаются сайты на серверах, представляющих собой высокопроизводительные компьютеры с соответствующим программным обеспечением. Сайту на сервере выделяется папка для хранения его файлов. Такая папка называется корневой папкой сайта. В больших сайтах внутри корневой папки размещаются другие дополнительные папки, например, images для хранения графических и CSS-файлов.

Как же с браузера получают доступ к сайтам, ведь и браузеры и сайты находятся на разных компьютерах? Для решения данной задачи в сетях применяется технология «клиент-сервер». Клиентом называется компьютер или программа, отправляющая на сервер запросы на предоставление ей каких либо услуг. Сервер – также либо компьютер, либо программа, принимающая запросы от клиента, обрабатывающая эти запросы и отправляющая обратно клиенту результаты обработки запроса.

В сети клиентами и серверами являются два компьютера (рис. 1.1) и две программы: браузер (клиент) и web-сервер. Браузер отправляет свой запрос серверу на получение какой-либо страницы с сайта. Web-сервер, получив запрос, на своем компьютере находит папку запрошенного сайта, извлекает из нее затребованный файл и отправляет его браузеру. Web-сервер, таким образом, является посредником между браузером и сайтом.

Рис. 1.0.. Клиент-серверная архитектура интернета

При обращении через браузер на какой-либо сайт следует указывать имя требуемого документа, как например:

http://www.altaev-aa.narod.ru/OLiGS1Z/1.html

В данном случае запрашивается файл 1.html, находящийся в папке OLiGS1Z. Возможны варианты запроса без указания названия требуемого файла, как например:



http://www.altaev-aa.narod.ru/OLiGS1Z

В таких случаях web-сервер в папке ищет файл по умолчанию, имеющий имя index.html. Такой файл называется главной страницей сайта. Посетители, как правило, не зная названий файлов, входящих в состав сайта, предпочитают использовать лишь адрес сайта и, соответственно, попадают на страницу index.html. Таким образом, файл index.html необходим в структуре сайта, ведь именно с него посетители начинают «серфинг» по всему сайту. Главной странице веб-дизайнеры, как правило, уделяют большое внимание, размещая на нем заставки с элементами флэш-анимации, логотип компании, тематику сайта, сведения о компании, о предоставляемых товарах или услугах, контакты. Одним из важных требований является возможность перехода с главной страницы на второстепенные страницы сайта. Для этого применяются гиперссылки.

При выполнении работ данного практикума клиент-серверное взаимодействие применяться не будет, т.е. и сайт и браузер будут находиться на одном компьютере и не будет запущена программа-посредник (web-сервер).

Теория. Основные разделы документа HTML


Цель работы: Научиться создавать файлы web-документов. Изучить основные теги web-страницы.

HTML– hypertext markup language (язык гипертекстовой разметки) обеспечивает одно из основных свойств Интернет – возможность перехода с одной страницы на другую, независимо от того, на каком Web-узле эти страницы расположены. Html-страница представляет собой отформатированный определенным образом текстовый файл. Она состоит из набора инструкций (тегов или дескрипторов), указывающих браузеру, как следует отображать прилагаемый текст и изображения. Браузер знает, с каким типом страницы он имеет дело, поскольку первая строка кода начинается тегом , а последняя заканчивается тегом . Большинство html-тегов парные (их называют контейнерами), а непарные представлены лишь одним элементом.

Как было сказано во введении для создания web-страниц применяется язык гипертекстовой разметки HTML. Данный язык представляет собой набор тегов. Теги (их также называют дескрипторами) являются инструкциями для браузера, указывающими как ему следует отображать содержимое web-страницы в своем окне. Большинство HTML-тегов парные (их называют контейнерами), непарные теги представлены лишь одним элементом.

Рассмотрим пример простой HTML-страницы1.







</b><b>Название</b> <b>страницы</b><b>





Заголовок



<p>Текст параграфа.p>

body>

html>

В данном случае теги html, head, title, body, h1 и p - контейнеры и лишь тег DOCTYPE является одиночным. В парных тегах первый носит название открывающего тега, второй – закрывающего. Предназначения тегов следующие:



  • DOCTYPE указывает тип документа;

  • текст между и описывает HTML документ;

  • текст между и содержит информацию о документе;

  • текст между и предоставляет название документа;

  • текст между и описывает видимое содержимое страницы;

  • текст между

    и

    описывает заголовок;

  • Текст между
    и
    представляет отдельный абзац.

Некоторые теги необязательны. Например, предыдущий пример можно свести к виду:

Название страницы

Заголовок




Текст параграфа.

Чтобы сделать код HTML-страницы более удобочитаемым, можно по своему усмотрению использовать символы возврата каретки2, пробела, табуляции:



<p>Текст параграфа.p>

или


<p> Текст параграфа. p>

или


<p>

Текст параграфа.

p>

или


<p>

Текст

параграфа.

p>

Все четыре приведенных варианта будут отображены в окне браузера одинаково.

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



Этот текст

браузер не отобразит

-->

HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу для изменения его характеристик. Атрибуты состоят из имени и значения, разделенных знаком равно (=). Например, или title="Это всплывающая подсказка!". Атрибуты указываются только для открывающего тега и никогда для закрывающего. Примеры применения атрибутов:



>Заголовок




Текст параграфа.

По умолчанию слово «Заголовок» было бы выведено в окне браузера в черном цвете, но с помощью атрибута style это слово окрашивается синим.

Некоторые атрибуты являются глобальными, так как они применимы ко всем тегам. Примеры глобальных атрибутов:


  • style - применяется для определения стиля элемента с помощью правил CSS;

  • title - создаёт текстовую подсказку, всплывающую при наведении курсора мыши на элемент;

  • id - присваивает имя элементу.

Подготовительная часть


С помощью поисковых машин Интернета (Google, Яндекси т.п.) найдите сайт разработчика текстового редактора PSPad. Скачайте3 дистрибутив редактора и инсталлируйте его на своем компьютере. Также рекомендуется с данного сайта скачать русификатор, который следует распаковать в папку Lang.

На рабочем столе создайте папку lab. Данная папка будет являться аналогом создаваемого Вами сайта. В ней Вы будете размещать HTML-страницы, графические и css файлы, которые будут Вами создаваться при выполнении этой и других последующих работ.

При разработке сайтов применяют одну из двух версий HTML: версию 4.01 или версию 5. Браузеру необходимо подсказать какая версия была использована при создании HTML-страницы. С этой целью в странице первым размещается одиночный тег , указывающий на версию HTML:


  • версия 4.01

  • версия 5

В этой и в других лабораторных работах применяется HTML5. Обе версии отличаются друг от друга присутствием или, напротив, отсутствием некоторых дескрипторов (тегов) или их атрибутов. Некоторые теги версии 4.01 в 5-й версии объявлены нежелательными и, взамен, появились новые. О том, допустимо ли использовать те или иные теги и атрибуты, выясняйте с помощью поисковых систем интернета (Google, Yandex и т.д.), набрав поисковое выражение в виде: HTML5 [название тега или атрибута]. Имеются специализированные сайты, посвященные разработке web-сайтов. Например: http://www.w3schools.com/. На англоязычных web-ресурсах применяйте переводчики4.

Выполнение задания начинайте с создания HTML-страницы, для чего запускайте PSPad и в его окне выполняйте команду Файл/Новый. Затем следует выбрать вкладку Из шаблона, папку HTML и тип шаблона HTML5. После создания страницы в строке меню редактора следует щелкнуть по кнопке "Формат" и выбрать формат документа "UTF-8". Измените язык всего документа, поменяв значение атрибута lang тега html:



<html lang='ru'>

Сохраните свой файл в папку lab под именем lab[номер_лаб_работы]_[номер_варианта].html. Например, для варианта 11 файл будет иметь имя lab2_11.html.

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

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

После того как задание будет Вами выполнено, создайте иконку своего сайта. Для этого в paint’е создайте рисунок размером 16×16 пкс и нарисуйте кистью первую букву своей фамилии.

Сохраните файл в формате png под именем favicon в папку lab. В HTML-документах ваших заданий измените соответствующий тег6



Проверьте в браузере7, как отображается иконка у HTML-документов.

Варианты выбираются по последней цифре зачетной книжки, задания приведены в разделе Варианты.

Порядок выполнения задания


  1. Открыть редактор PSPad.

  2. Создайте HTML-документ согласно указаниям.

PSPad позволяет упростить ввод тегов, используя клавиши автодополнения кода CTRL+пробел. Например, Вам необходимо ввести тег h1 с текстом:

Вариант, тема

. Для этого следует ввести первый символ этого тега h и нажать CTRL+пробел. Впоявившемся окне

выберите h1.Между появившейся парой тегов h1 введите текст Вариант, тема.





  1. Сохраните документ.

  2. Перейдите с помощью проводника8 в папку lab и откройте в браузере страницу.

  3. Измените цвет фона страницы на желтый.

Подсказка. Воспользуйтесь помощью PSPad’а, для чего на любом свободном месте Вашей web-страницы наберите английское b и нажмите CTRL+пробел. Выберите тег body и в окне атрибутов этого тега найдите тот, который отвечает за изменение цвета фона. Для этого атрибута выберите значение «yellow». При закрытии окна атрибутов в коде Вашей web-страницы появится дополнительная пара тэгов body с требуемым Вам атрибутом. Выделите этот атрибут вместе с его значением и скопируйте. После чего Вам необходимо убрать теги body, так как они лишние. Для этого используйте комбинацию CTRL+Z, позволяющую отменить последние изменения. Страница должна вернуться к предыдущему состоянию. Вставьте скопированный атрибут в тег body Вашей web-страницы.

  1. Файл сохраните9 и проверьте его в браузере10, нажав клавишу F5 или щелкнув по кнопке Обновить.

Пример обновленной страницы:




  1. Проверьте свою страницу на валидность.

Пояснение. Язык HTML в ходе истории своего развития претерпел ряд изменений. В HTML добавлялись новые теги и, напротив, некоторые теги объявлялись устаревшими (deprecated). При создании HTML-страницы следует избегать применения устаревших тегов. Следует учитывать также то обстоятельство, что в версиях 4.01 и 5 языка HTML списки устаревших тегов несколько различны. При всем при этом браузеры все же могут верно отображать страницы, имеющие ошибочный HTML-код. Для проверки HTML-страницы на корректность её кода используются валидаторы, например http://validator.w3.org/nu/. Зайдя на этот сайт, проверьте свою страницу на валидность.

Пример проверки приведен на рис.1.2.

Если помимо надписи «Document checking completed.», появившейся при щелчке по кнопке Check, другие сообщения отсутствуют, то это означает, что проверенная страница не имеет ошибок. Рассматриваемый нами валидатор Nu Html Checker недопустимые теги выделяет красным фоном.


  1. На проверку отправьте последний вариант этого файла. Для этого Вам следует создать архив11 всей папки и полученный архив отправить на проверку.

Рис. 1.. Страница валидатора


Варианты


  1. Новый Год

  2. Домашние животные

  3. Творчество Аллы Пугачевой

  4. Школьные годы чудесные

  5. Китай

  6. Байкал

  7. Москва

  8. Интернет

  9. Лето

  10. Киберспорт

Web-ресурсы





  1. W3Schools Online Web Tutorials (http://www.w3schools.com/)

  2. Самоучитель HTML5 (http://htmlbook.ru/samhtml5/)

1 Данный пример проверять не следует.

2 Указанный символ вводится в текст нажатием на клавишу "Enter"

3 В целях безопасности дистрибутив редактора скачивайте именно с сайта разработчика, а не с торрент-сайтов.

4 Например: www.translate.ru

Google имеет неплохой переводчик: https://translate.google.ru



5 Если в окне браузера Ваша страница отобразилась некорректно: вместо читабельного текста видны различные символы, то поэкспериментируйте с кодировкой. Например, укажите «charset=windows-1251»и, соответственно, в меню Формат выберите ANSI.

6 Следует убрать слеш перед словом favicon

7 Браузеры, поддерживающие формат png у иконок: Firefox, Google Chrome. IE поддерживает лишь формат ico.

8 Пуск, Компьютер

9 CTRL+S

10 Для быстрого переключения окон PSPad’а и браузера используйте горячие клавиши ALT+Tab

11 Рекомендуемые форматы архива: zip или rar


Поделитесь с Вашими друзьями:


База данных защищена авторским правом ©nethash.ru 2017
обратиться к администрации

войти | регистрация
    Главная страница


загрузить материал