38032

Структура HTML-документа. Создание элементарной WEB-страницы

Лабораторная работа

Информатика, кибернетика и программирование

Для работы с этими текстами был создан специальный протокол HTTP Hyper Text Trnsfer Protocol были обозначены основные элементы языка разметки HTML. Язык HTML развился из стандартного обобщенного языка описания документов SGML и является его производной созданной для разметки текстовых документов. Существуют разные суждения о том считать HTML языком программирования или нет. С точки зрения программистов он имеет достаточно простой синтаксис и довольно легок в изучении но с другой стороны для простого пользователя иногда постижение...

Русский

2013-09-25

502 KB

24 чел.

Введение

Практически с появлением первых компьютеров возникла проблема передачи информации между ними. И способы были найдены - это различные носители и кабельный способ. Были написаны программы, позволяющие передавать и получать данные и, практически сразу, возникла вторая проблема - проблема совместимости, т.е. как заставить два и более компьютера, соединенных кабелем, работать в локальной сети. В 1999 году мировая общественность отметила 30-ти летие Intrnet. Официальным днем рождения сети Intrnet считается 2 января 1969 года, когда Управление перспективных исследований Министерства обороны США ARPA (Advanced Research Project Agency) начало работу над проектом связи оборонных компьютеров.

И только много позже - в 1989 году выпускник Оксфордского университета, бакалавр в области физики - сотрудник Европейского центра ядерных исследований (CERN) Тим Бернес-Ли разработал и всерьез приступил к созданию информационной службы World Wide Web. Он написал приложение клиент/сервер (браузер). В основу всей системы легло понятие гипертекста, т.е. множества отдельных текстов, имеющих ссылки друг на друга. Для работы с этими текстами был создан специальный протокол HTTP - Hyper Text Transfer Protocol, были обозначены основные элементы языка разметки HTML. Эта технология дала огромный толчок в развитии сети, и сеть стала действительно интернациональной сетью.

Язык HTML развился из стандартного обобщенного языка описания документов SGML и является его производной, созданной для разметки текстовых документов. Существуют разные суждения о том - считать HTML языком программирования или нет. С точки зрения программистов он имеет достаточно простой синтаксис и довольно легок в изучении, но с другой стороны - для простого пользователя иногда постижение языка HTML может представляться затруднительным.

World Wide Web стремительно развивается, программное обеспечение для сети устаревает и обновляется в виде всевозможных заплаток и дополнений, а с ними развивается и сам язык HTML. Язык HTML находит применение все чаще в областях, где раньше не применялся, он перестает быть только лишь исключительно языком описания Web-страниц. Microsoft уже в операционную систему Windows'98 внедрила интеграцию с World Wide Web, что сильно меняет взаимодействие пользователя с операционной системой. Пользователь, работающий в локальных, становящихся все более популярными intranet-сетях, теперь имеет возможность получать доступ к сетевой информации, используя браузер, а не диспетчер файлов, поскольку WEB-браузер может отображать не только документы, поддерживающие HTML, а еще и, например,  содержимое папок или таблицы Excel.

Более того - поддержка таких технологий Internet, как сценарии, потоковая загрузка аудио-видео, Java, уже начиная с  Windows'98,  встроена в саму операционную систему. Пользовательский интерфейс теперь по желанию может быть настроен так, что все ярлыки станут ссылками, переходы по ним могут осуществляться одним щелчком, рабочий стол и папки могут быть представлены в виде WEB-страниц, с возможностью корректировать код, и, тем самым, настраивать их внешний вид. Внешний вид папки может быть настроен при помощи редактора шаблонов или ручками отредактировать файлы Folder.htt и Webview.css при помощи Notepad.

Разработчиками создаются интерактивные модули, интегрируемые в HTML, языки программирования и средства поддержания баз данных, которые также могут быть внедрены в исходный код HTML, язык расширяется для предоставления средств управления внешним видом и возможностями текста и графики. Если раньше, сразу после появления настольных персональных компьютеров, основной упор в работе делался на их персональность (т.е. человек решал свои задачи, набирал тексты и распечатывал их и т.д.), то сейчас все больше времени стало уделяться интерактивному взаимодействию.

Стиль работы меняется, меняются и средства доступа к содержимому. Язык HTML уже изначально создавался как платформо-независимый язык. Новые технологии применяются практически везде, и довольно скоро пространство World Wide Web перестанет быть достоянием лишь пользователей настольных PC.  Уже сейчас некоторые пользователи активно пользуются голосовыми браузерами для незрячих или браузерами, использующими азбуку Бройля, зачастую, содержимое выводится не на монитор компьютера, а в телевизор, когда применяются приставки с выходом в сеть или на телетайп и пр.

Основные понятия

Гипертекст - это текст, в котором имеются ссылки для автоматического перехода на другие тексты - гиперссылки, а язык HTML (Hyper Text Marcup Language) - это независимый от платформ язык разметки текста. Документы, размеченные при помощи этого языка, визуализируются браузерами. Браузер [browser] - программа для просмотра выложенных в Сеть страничек, является интерпретатором (т.е. "обработчиком команд") HTML.  Браузеров существует больше тридцати видов, но основных, наиболее часто используемых, три - Internet Explorer, Mozilla, Opera.

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

Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags)  (команды языка HTML) и их атрибутов (свойства, дополнения, которые позволяют несколько расширить возможности тега). Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер.

Внимание! Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть».

Как и в любом другом языке программирования, операторы (теги) не могут быть записаны хаотично, они должны располагаться в определенном порядке следования. Этот порядок определяет структура документа. HTML подразумевает некую стандартизированную структуру построения программы (HTML– документа) (см. рис. 1). Она описывает даже не последовательность команд, а очередность следования ряда блоков, которые содержат непосредственно программный код.

Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html.

Пример 1.

<html>

<head>

<title>Моя первая домашняя страничка </title>

</head>

<body bgcolor="aqua">

основной код

</body>

</html>

Лаборатораная работа №1.  «Структура HTML-документа. Создание элементарной WEB-страницы»

Цель работы: изучение работы тегов, которые являются обязательными в web-документе, и теги несущие информацию для браузера. Создание простейшей странички о себе  «Резюме».

<html>т</html> - границы HTML - программы.

<head>т</head> - заголовок HTML - программы. Необязательный элемент программы. 

Теги заголовка HTML - программы:

<title>т</title> - название WEB - страницы не более 64 символов. Обязательный элемент заголовка. Обычно показывается в заголовке окна броузера.

<meta > - описание одного свойства данной программы - информация для броузера, отображающего WEB - страницу. Атрибуты:

http-equiv="" - определяет тип свойства, 

value="" - определяет свойство. Значения: document - документ;

content=";" - задает значения свойства, 

url="" - задает URL - адрес программы для свойства, 

name="" - дополнительное описание свойства. Если его нет, то совпадает с http-equtv. Возможные значения: author - автор программы, author-corporate - фирма-разработчик программы, keywords - ключ для поиска, description - описание программы.

Примеры часто используемых вариантов значений:

http-equiv="Content-Type" content="text/html; charset=iso-8859-1" - программа содержит текст и коды HTML в кодировке iso-8859-1. 

http-equiv="Content-Ianguage" content="en" - программа на английском языке. 

http-equiv="refresh" content="60" url = "... " - страницу с указанным адресом загрузить через 60 секунд. 

http-equiv="refresh" content="60" - текущую страницу перезагружать через каждые 60 секунд. 

name="Keywords" content="список ключевых слов" - список для поиска по ключу данного документа поисковыми системами. 

name="Description" content="краткое описание" - аннотация - список для индексации документа поисковыми системами, примерно, 200 - 300 символов. Обычно в "поисковиках" выводится под названием документа или всплывает, если задержать курсор мыши на названии. 

<body>т</body> - текст (тело) WEB - документа.

Атрибуты: 

bgcolor="" - цвет фона документа, 

background="" - URL - адрес файла  фонового рисунка. Окно полностью заполняется изображением, как кафельной плиткой, начиная с верхнего левого угла; 

text="" - цвет текста, 

alink="" - цвет активной ссылки, 

link="" - цвет не просмотренной ссылки, 

vlink="" - цвет просмотренной ссылки, 

topmargin="" - граница верхнего поля, 

leftmargin="" - граница левого поля, 

bgproperties=fixed - фоновое изображение не прокручивается вместе с текстом, 

<address>т</address>  - сведения об авторе страницы, дата создания и обновления. Текст обычно выделяется курсивом. 

<!--т-- > - комментарий в программе для отладки программы, который не будет виден читателю.

&nbsp  - обозначает пустое место.

 

Не все теги есть во всех броузерах. Броузер пропускает теги, которые в нем не реализованы, и просто печатает текст размещенный в их контейнере. 

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

Приступим. Включите компьютер и откройте окно блокнота. Напечатайте там следующий текст:

<html>

<head>

<title>Моя первая страничка </title>

</head>

<body bgcolor="aqua">

Ура! Поздравьте меня! Все получилось! Я умею создавать Интернет-странички!

</body>

</html>

 

Далее нужно этот файл правильно сохранить. Зайдите в меню «файл», затем «сохранить как», а теперь  в строке «имя файла» напишите «1.html».  Внимание: не забудьте сохранить его в своей папке и запомнить путь к ней! Теперь закройте файл и найдите его в своей папке. Он должен иметь ярлычок вида . Щелкните по нему два раза левой кнопкой мыши. Он должен запуститься в программе-браузере InternetExplorer. У вас получится такая страница:

Теперь мы хотим ее немного изменить, например,  сделать фон станицы желтым. Для этого проделаем следующие действия. Зайдите в «вид»-«просмотр HTML кода» (как показано на рисунке).

И у вас откроется окно блокнота. В строке <body bgcolor="aqua"> мы поменяем слово aqua  на yellow. Затем зайдем в «файл» и нажмем «сохранить». Далее в окне браузера нажмите кнопку «обновить» или клавишу на клавиатуре F5. Фон должен стать желтым.

Это была ваша тренировочная задача. Теперь напишем резюме о себе, тем самым научимся правильно писать резюме для работодателя и отточим свои навыки в создании HTML-страничек.

Откройте новую страницу в блокноте и наберите текст (данные писать о себе!):

<html>

<head>

<title>Резюме </title>

</head>

<body>

Медведева Наталья Михайловна<br><br>

Тел. 8-927-513-69-79 (моб.) <br>

8(8442)46-16-60 (дом.) <br><br>

e-mail: natasha_medvedeva@volsu.ru<br><br>

Цель: доцент Волгоградского Государственного Университета<br><br>

Образование: Волгоградский Государственный Университет, математический факультет (2002г.), специальность: математика, специализация: математический анализ<br><br>

Дополнительное образование: 2002 – дополнительная специальность: «преподаватель математи-ки» <br>

2005- аспирантура ВолГУ по специальности «01.01.01 – математический анализ» <br><br>

Опыт работы: 2002 – 2003 <br>

ассистент кафедры математического анализа и теории функций

<br>

2003-2007 <br>

ассистент кафедры информатики и экспериментальной математики<br>

2002 – до наст. времени <br>

ст. преп кафедры информатики и экспериментальной математики<br><br>

Знания и навыки: Английский, немецкий – со словарем<br>

Компьютер: Microsoft Office (Word, Excel, PowerPoint, Access,VBA), HTML, C, Lisp, бейсик. <br><br>

Дополнительные сведения: Род. 10.07.1980 (г.Камышин Волгоградской области) <br>

Замужем<br>

Ответственна, коммуникабельна, целеустремленна, легко обучаюсь и адаптируюсь к новому. <br>

Увлечения: шитье, вязание, лепка, поэзия, проза, цветоводство, психология, кулинария. <br><br>

Рекомендации: гр. Д-061, тел. 46-02-03

</body>

</html>

Сохраните его как «rez.html».

Таким образом, у вас получилось две отдельных странички. Осталось выполнить задание с листанием, чтобы они открывались одна после другой с заданным интервалом времени. Для этого нам достаточно дописать по одной строке в оба файла, сохранить их, обновить и подождать 5 секунд.

У вас есть в файле rez.html такой кусок, в самом начале.

<html>

<head>

<title>Резюме </title>

</head>

<body>

Теперь добавим в него следующую строку:

<META HTTP-EQUIV="Refresh" content="5 URL=1.html">

И у вас должно получиться так:

<html>

<head>

<title>Резюме </title>

<META HTTP-EQUIV="Refresh" content="5 URL=1.html">

</head>

<body>

Остальное в этом файле оставить без изменений.

Задание: 

1) Проделайте аналогичные действия с файлом «1.html», вставив строку

<META HTTP-EQUIV="refresh" CONTENT="5 url=rez.html">

2)Потренируйтесь менять интервалы времени смены страниц.

3)Задайте другой фон у своего резюме.

4)Запишите в файл «1.html» остальные атрибуты тега <meta> и заполните их своими данными.

Примеры:

<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=Windows-1251">

<META Name="copyright" Content="Алленова Наталья">

<META NAME="author" CONTENT="Алленова Наталья Email: seagull@pisem.net">

<META NAME="keywords" CONTENT="графика, хтмл, для, начинающий, начинающих, чайников">

<META NAME="description" CONTENT="Основы хтмл (html) для чайников. Просто, доступно.">

Атрибут content может содержать 50-200 слов, в зависимости от конкретной поисковой системы (чем короче описание, тем, очевидно, лучше).  Вторым элементом <meta> в нашей программе является список ключевых слов, которые поисковый робот будет ассоциировать с вашим сайтом. Если пользователь введет какое-то из них в поле поиска, то, скорее всего, ссылка на сайт появится среди результатов.

Есть такое правило: в данном элементе должны быть атрибуты content, а также name или http-equiv. Два последних вместе нельзя использовать.

<meta name="author" content-''Владимир Борисов">

<meta name="copyright" content="&copy; 2002 Pupkin Ltd">

4)Сдайте вашу работу преподавателю.


 

А также другие работы, которые могут Вас заинтересовать

84543. Регуляція діяльності серця. Міогенні та місцеві нервові механізми регуляції діяльності серця 40.8 KB
  Міогенні та місцеві нервові механізми регуляції діяльності серця. Баланс притоку та відтоку крові притік крові до серця по венозних судинах; відтік – за рахунок активного вигнання крові шлуночками серця; 2. Рівний хвилинний об’єм крові ХОК правого та лівого відділів серця; 3.
84544. Місцеві міогенні механізми регуляції серцевої діяльності 48.71 KB
  Залежність ССС від вихідної довжини КМЦ. Залежність ССС від опору вигнанню рівня артеріального тиску. Залежність ССС від ЧСС. Тому суть цього механізму можна викласти так: чим більше крові притікає до серця під час діастоли тим більша вихідна довжина КМЦ тим більша ССС СО.
84545. Характер і механізми впливів симпатичних нервів на діяльність серця. Роль симпатичних рефлексів в регуляції серцевої діяльності 44.58 KB
  Характер впливів симпатичної нервової системи на серце: позитивний інотропний вплив посилює силу серцевих скорочень; позитивний хронотропний вплив посилює ЧСС; позитивний дромотропний вплив посилює швидкість проведення збудження по елементам провідної системи серця особливо по передсердношлуночковому вузлу структурам провідної системи шлуночків; позитивний батмотропний вплив збільшення збудливості. Медіатор норадреналін взаємодіє переважно з βадренорецепторами оскільки αадренорецепторів тут майже немає при цьому...
84546. Характер і механізми впливів парасимпатичних нервів на діяльність серця. Роль парасимпатичних рефлексів в регуляції серцевої діяльності 44.78 KB
  Механізм впливів блукаючого нерва на серце пов’язаний із дією медіатора ацетилхоліну на мхолінорецептори КМЦ типових і атипових. В результаті підвищується проникність мембран КМЦ для йонів калію – посилення виходу йонів із клітини за градієнтом концентрації що в свою чергу веде до: розвитку гіперполяризації мембран КМЦ; найбільше цей ефект виражений в клітинах з низьким вихідним рівнем мембранного потенціалу найбільше в вузлах АКМЦ: пазуховопередсердному та передсердношлуночковому де МПС = –60мВ; менше – в КМЦ передсердь; найменше –...
84547. Гуморальна регуляція діяльності серця. Залежність діяльності серця від зміни йонного складу крові 44.41 KB
  Залежність діяльності серця від зміни концентрації йонів в плазмі крові. Найбільше клінічне значення має вплив йонів калію. При гіпокаліємії зниження концентрації йонів калію в плазмі крові нижче 1ммоль л розвиваються різноманітні електрофізіологічні зміни в КМЦ. Характер змін в КМЦ залежить від того що переважає: втрата йонів калію клітинами чи міжклітинною рідиною.
84548. Особливості структури і функції різних відділів кровоносних судин у гемодинаміці. Основний закон гемодинаміки 52.71 KB
  При такому підході видно що кровоносна система є замкненою системою в яку послідовно входять два насоси і судини легень і паралельно – судини решти областей. Судини у системі крові виконують роль шляхів транспорту. Рух крові по судинам описує основний закон гемодинаміки: де Р1 – тиск крові на початку судини Р2 – в кінці судини R тиск який здійснює судина току крові Q – об’ємна швидкість кровотоку об’єм який проходить через поперечний переріз судини за одиницю часу. Отже рівняння можна прочитати так: об’єм крові що проходить...
84549. Значення в’язкості крові для гемодинаміки. Особливості структури та функції різних відділів судинної системи 44 KB
  В’язкість крові залежить від таких 2ох факторів. Від зміни лінійної швидкості руху крові. В’язкість крові складає 45 – 50 умовних одиниць а плазми – 17 – 23 гривні.
84550. Лінійна і об’ємна швидкості руху крові у різних ділянках судинного русла. Фактори, що впливають на їх величину 41.83 KB
  Об’ємна швидкість руху крові – той об’єм крові котрий проходить через поперечний переріз судини за одиницю часу. Замкнута система кровообігу може нормально функціонувати лише при умові що об’ємна швидкість кровотоку в будьякій ділянці однакова. Лінійна швидкість руху крові – швидкість руху частинок крові відносно стінок судини. Оскількм ХОК в різних ділянках однаковий лінійна швидкість кровотоку визначається площею поперечного перерізу.
84551. Кров’яний тиск і його зміни у різних відділах судинного русла 41.24 KB
  Головним фактором який впливає на формування кров’яного тиску є ЗПОзагальний периферичний опір – сумарний опір всіх судин великого кола кровообігу. Він забезпечує падіння тиску крові з 100 в аорті до 0 мм рт. Оцінити внесок судин різних областей в його створення можна по падінню тиску ΔР крові на рівні цих судин так як ΔР = Q R а Q в даний момент часу однаковий в будьякій ділянці судинної системи аорта всі артеріоли всі капіляри всі венули і т. Загальне зниження тиску на ділянці аорта – нижня порожниста вена складає 100 мм.