Файл: Языки гипертекстовой разметки (Практическое применение языка HTML).pdf

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 26.06.2023

Просмотров: 137

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Первоначально была создана папка под названием "htdocs", в которую были помещены все документы, связанные с созданием сайта.

Далее была создана таблица из 3 строк и 3 столбцов всего 9 ячеек. Для точной разметки таблицы были использованы теги width и height в теги <table> и <td> таблицы, при этом размеры ячеек таблицы были введены не в пикселях, а в процентах в целях избежания дополнительного описания процедуры адаптации сайта под различное разрешение экрана у посещающих данный сайт пользователей.

В теге <table> была установлена высота и ширину равная 100%. В теге <td> указаны проценты от размера таблицы, а также цвет строк, используя тег bgcolor, чтобы таблица была видна.

Далее во 2 ячейке таблицы размещено название страницы «Языки гипертекстовой разметки», и сразу задан размер шрифта посредством тегов <h2> </h2>, в 8 ячейке, которая является в нашей странице центральной, использован шрифт, определяемый тегами <h3></h3>, и находится определение гипертекстового документа.

Далее на сайт были добавлены картинки в ячейки 1 и 3, визуально указывающие, о чем данный сайт, Для вставки картинок использовался тег <img src="имя.jpg">. Чтобы картинки смогли отобразиться на создаваемом сайте, файлы с ними были помещены в папку сайта htdocs под именами HTML_logo (1).JPG и html-1.JPG.

Далее, чтобы дать имя создаваемому сайту, название сайта « Языки гипертекстовой разметки» было помещено между тегами <title> и </title>. Следует отметить, что данный заголовок сайта невидим в рабочей области, а нужен для поисковых систем Интернета.

Остальные ячейки сайта были заполнены следующим содержимым

4 ячейка – Гипертекст: сущность;

5 ячейка - HTML - язык гипертекстовой разметки документа;

6 ячейка – Гипертекст: функции;

7 ячейка - SGML и XML;

9 ячейка - XHTML WML.

В итоге первая страница сайта имеет следующий вид (рисунок 2.1).

Рисунок 2.1. Первая страница сайта «Языки гипертекстовой разметки»

Далее была создана вторая страница сайта «Гипертекст: сущность», код которой представлен в Приложении 5 и сохранен под именем site-1.html в папке для файлов сайта htdocs. На данную страницу сайта сделана ссылка из первой страницы посредством следующего тега:

<a href="site-1.html" >Гипертекст: сущность</a>.

При создании данной страницы были использованы теги выравнивания текста align="left" и align="justifу".

На рисунке 2.2. представлена вторая страница создаваемого сайта.


Рисунок 2.2. Вторая страница сайта «Языки гипертекстовой разметки»

Далее подобным образом была создана третья страница сайта «Гипертекст: функции» (рисунок 2.3), код которой представлен в Приложении 6 и сохранен под именем site-2.html в папке для файлов сайта htdocs. На данную страницу сайта сделана ссылка из первой страницы посредством следующего тега:

<a href="site-2.html" >Гипертекст: функции</a>.

В ячейках 5, 7 и 9 находятся ссылки, которые переводят пользователя на созданные сайты иных разработчиков, посвященные соответственно следующим языкам SGML, XML, HTML, XHTML и WML. Для этого были использованы соответсвенно следующие теги:

<a href="http://ru.html.net/tutorials/html/" >HTML - язык гипертекстовой разметки документа</a>

<a href="http://nknaromanova.narod.ru/sgml.htm" >SGML и XML <a>

<a href="https://htmlweb.ru/html/xhtml.php">XHTML </a>

<a href="https://htmlweb.ru/html/wml.php">WML </a></center>.

Рисунок 2.3. Третья страница сайта «Языки гипертекстовой разметки»

В итоге код главной страницы созданного сайта получил следующий вид (Рисунок 2.4):

Рисунок 2.4. HTML-код сайта «Языки гипертекстовой разметки»

В папке htdocs содержаться следующие файлы:

- index1.html

- HTML_logo (1).JPG

- html-1.JPG.

- site-1.html

- site-2.html.

По итогам второй главы работы можно сделать следующие выводы:

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

- как правило, теги используются парами, состоящими из открывающего <имя_тега> и закрывающего </имя_тега> тегов, которые иначе называют контейнером. Основными тегами, используемыми HTML, являются html, head, body. Тегом html определяется все содержание документа. Внутри head размещается служебная информация, которая не видна на открытой веб-странице, необходимая браузеру для корректной интерпретации html документа и поиске браузерами. Вся информация, которая отображается на веб-странице, помещается между закрывающим и открывающим тегами body;

- для создания HTML-сайта необходимы браузер и текстовый редактор. В данной работе использован браузер Google Chrome и текстовый редактор Notepad, посредством которого создан сайт из семи страниц под названием «Языки гипертекстовой разметки». Для его создания использована табличная верстка. Все документы, связанные с созданием сайта, сохранены в папке "htdocs". Две страницы, на которые имеются ссылки на главной странице сайта, созданы самостоятельно, остальные ссылки на сайте перенаправляют пользователя на созданные сайты иных разработчиков, посвященные соответственно SGML, XML, HTML, XHTML и WML.


ЗАКЛЮЧЕНИЕ

Гипертекст – это совокупность обычных фрагментов текста, связь между которыми реализуется посредством ссылок, встроенных в информационную систему, что позволяет пользователям осуществлять переход от одного текстового фрагмента к другому по их выбору. Основное преимущество гипертекста состоит в нелинейности повествования, которая позволяет создавать сразу несколько линейных последовательностей в изучении материала, что позволяет, не изучая всю предоставленную информацию, выбирать нужную, что позволяет сэкономить много времени.

Язык разметки документов – это набор специальных инструкций, называемых тегами, предназначенных для формирования в документах какой-либо структуры и определения отношений между различными элементами этой структуры.

SGML - обобщенный метаязык, позволяющего строить системы логической и структурной разметки любых разновидностей текстов и не несущий информации о внешнем виде документа;

HTML – широко используемый стандартизированный язык разметки документов в Интернете. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора. Существует восемь версий языка HTML. HTML до его 5-ой версии определялся как приложение SGML. Спецификации HTML5 формулируются в терминах DOM;

XML - это метаязык, определяющий другие языки разметки для специфических целей, предназначен для хранения структурированных данных и для обмена информацией между программами;

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

WML – язык разметки для работы в Интернет беспроводных устройствах (WAP), основанный на XML. WML используется для описания контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.

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

Как правило, теги используются парами, состоящими из открывающего <имя_тега> и закрывающего </имя_тега> тегов, которые иначе называют контейнером. Основными тегами, используемыми HTML, являются html, head, body. Тегом html определяется все содержание документа. Внутри head размещается служебная информация, которая не видна на открытой веб-странице, необходимая браузеру для корректной интерпретации html документа и поиске браузерами. Вся информация, которая отображается на веб-странице, помещается между закрывающим и открывающим тегами body.


Для создания HTML-сайта необходимы браузер и текстовый редактор. В данной работе использован браузер Google Chrome и текстовый редактор Notepad, посредством которого создан сайт из семи страниц под названием «Языки гипертекстовой разметки». Для его создания использована табличная верстка. Все документы, связанные с созданием сайта, сохранены в папке "htdocs". Две страницы, на которые имеются ссылки на главной странице сайта, созданы самостоятельно, остальные ссылки на сайте перенаправляют пользователя на созданные сайты иных разработчиков, посвященные соответственно SGML, XML, HTML, XHTML и WML.

.

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

  1. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – 608с.
  2. Гипертекст — что это такое. URL: http://ktonanovenkogo.ru/voprosy-i-otvety/gipertekst-chto-eto-takoe.html (Дата доступа 01.12.2017)
  3. Гипертекст. Что это такое? URL: http://www.brightweb.ru/interesting/43.html (Дата доступа 01.12.2017)
  4. Дакетт Дж. HTML и CSS. Разработка и дизайн веб-сайтов. – М.: Эксмо, 2013. - 480с.
  5. История гипертекста. URL: http://inf.1september.ru/articlef.php?ID=200700905 (Дата доступа 01.12.2017)
  6. Как создать простой HTML сайт. URL: http://kapon.com.ua/beginning.php (Дата доступа 05.12.2017)
  7. Костюк К.Н. Книга в новой медийной среде / К.Н. Костюк. - М.: Директ-Медиа, 2015. – 432с.
  8. Ллойд Йен. Создай свой веб-сайт с помощью HTML и CSS. – СПб.: Питер, 2013. - 416с.
  9. Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста / Б. Лоусон, Р. Шарп. – СПб.: Питер, 2012. – 304с.
  10. Мак-Дональд М. Создание Web-сайта. Недостающее руководство. – 3-е изд.: Пер с англ. – СПб.: БХВ-Петербург, 2013. – 624с.
  11. Номейн А. HTML-шпаргалка. – М.: Издательские решения, 2017. – 26с.
  12. Робинс Дж. HTML5, CSS3 и JavaScript. Исчерпывающее руководство. – М.: Эксмо, 2014. – 528с.
  13. Руднев В. Энциклопедический словарь культуры XX века / В. Руднев. – М.: Азбука, 2017. – 864с.
  14. Русаков М. Создание сайта от начала и до конца. – 2014. – 172с.
  15. Теодор Нельсон создаёт технологию гипертекста. URL: http://vikent.ru/enc/676/ (Дата доступа 03.12.2017)
  16. Тим Бернерс-Ли. Да пребудет с нами Веб! / Тим Бернерс-Ли // Журнал «В мире науки», 2011 г. - №2. – С.78-95
  17. Учебник HTML. URL: http://ru.html.net/tutorials/html/ (Дата доступа 03.12.2017)
  18. Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрейн. – СПб.: Питер, 2014. – 304с.
  19. Фримен Элизабет, Фримен Эрик. Изучаем HTML, XHTML и CSS. – СПб: Питер, 2016. – 720с.
  20. Хеник Б. HTML и CSS. Путь к совершенству / Бен Хеник. СПб.: Питер, 2011. – 336с.
  21. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения / Б. Хоган. – СПб.: Питер, 2014. – 320с.
  22. Языки разметки. SGML и XML URL: http://nknaromanova.narod.ru/sgml.htm (Дата доступа 02.12.2017)
  23. Языки разметки гипертекста и программирования скриптов URL: http://www.hi-edu.ru/e-books/xbook081/01/part-008.htm (Дата доступа 02.12.2017)
  24. WML – Язык разметки для мобильных телефонов(WAP) URL: https://htmlweb.ru/html/wml.php (Дата доступа 02.12.2017)
  25. XHTML. URL: https://htmlweb.ru/html/xhtml.php (Дата доступа 02.12.2017)

ПРИЛОЖЕНИЕ 1

Преимущества и недостатки языка XML

Преимущества

Недостатки

-человеко-ориентированный - одновременно понятный и человеку и компьютеру;

- избыточный синтаксис;

- поддерживает Юникод;

- размер XML документа существенно больше бинарного представления тех же данных (в 10 раз);

- в формате XML могут быть описаны основные структуры данных -записи, списки и деревья;

- размер XML документа существенно больше, чем в альтернативных текстовых форматах передачи данных;

- самодокументируемый - описывает структуру и имена полей также как и значения полей;

- снижение эффективности приложения ввиду возрастания стоимости хранения, обработки и передачи данных.

- непротиворечивый - имеет строго определенный синтаксис;

- не содержит встроенной в язык поддержки типов данных;

- находит широкое применение для хранения и обработки документов он-лайн и офф-лайн:

- иерархическая модель данных, предлагаемая XML, ограничена по сравнению с реляционной моделью и объектно-ориентированными графами

- подходит для описания любых типов документов;

- не зависит от платформы;

- не накладывает требований на расположение символов на строке

ПРИЛОЖЕНИЕ 2

Документ XML

<?xml version="1.0" encoding="UTF-8"?>

<recipe type="dessert">

<recipename cuisine="american" servings="1">Ice Cream Sundae</recipename>

<ingredlist>

<listitem><quantity units="cups">0.5</quantity>

<itemdescription>vanilla ice cream</itemdescription></listitem>

<listitem><quantity units="tablespoons">3</quantity>

<itemdescription>chocolate syrup or chocolate fudge</itemdescription></listitem>

<listitem><quantity units="tablespoons">1</quantity>

<itemdescription>nuts</itemdescription></listitem>

<listitem><quantity units="each">1</quantity>

<itemdescription>cherry</itemdescription></listitem>

</ingredlist>

<utensils>

<listitem><quantity units="each">1</quantity>

<utensilname>bowl</utensilname></listitem>

<listitem><quantity units="each">1</quantity>

<utensilname>spoons</utensilname></listitem>

<listitem><quantity units="each">1</quantity>

<utensilname>ice cream scoop</utensilname></listitem>

</utensils>

<directions>

<step>Using ice cream scoop, place vanilla ice cream into bowl.</step>

<step>Drizzle chocolate syrup or chocolate fudge over the ice cream.</step>

<step>Sprinkle nuts over the mound of chocolate and ice cream.</step>

<step>Place cherry on top of mound with stem pointing upward.</step>