Файл: Основы программирования на языке HTML.pdf

Скачать файл
Заказать решение

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

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

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

Добавлен: 02.04.2023

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

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

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

СОДЕРЖАНИЕ

Введение

Заключение

Используемая литература

Введение

HTML (от англ. Hyper Text Markup Language) – это стандартизированный язык разметки документов в сети интернет, который является одним из инструментов, используемых для создания Web-страниц и интерпретируемый приложениями называемыми браузерами. Браузер (от английского Web browser) — программное обеспечение для открытия веб-сайтов, то есть для запроса веб-страниц, преимущественно из сети Интернет, их обработки, вывода и перехода с одной страницы на другую. Полученный в результате интерпретации браузером текст выводится на экран монитора компьютера или мобильного устройства в удобном для человека виде. Документы имеют стандартное расширение .html или .htm.

Попросту, HTML – это язык с помощью которого можно сообщить браузеру информацию о том какие элементы есть на веб-странице и какую смысловую нагрузку они несут. За отсутствием сложного синтаксиса, является своеобразной альтернативой сложным высокоуровневым языкам программирования, при этом, не являясь языком программирования как таковым.

Под словом "разметка" обозначается общий свод правил для отображения информации, которые не отображаются пользователю вместе с документом, но устанавливают: как должен выглядеть текст и те или иные объекты на веб-странице. Например, пользователю может потребоваться, чтобы какое-либо слово выводилось курсивом или в подчеркнутом виде, выделить отдельный абзац особым отличающимся шрифтом или оформить заголовок уменьшенным размером шрифта, таким образом, Web-мастер устанавливает структуру документа, положение и внешний вид объектов на странице (текст, таблицы, картинки и т.д.).

Цель курсовой работы – изучить теоретический материал по тематике курсовой работы – основы программирования на языке HTML. Актуальность темы определена тем, что на сегодняшний день HTML остается самым универсальным средством, применяемым для разметки гипертекста и дальнейшей публикации его в сети Интернет.

  1. Из истории HTML

Язык HTML была разработан британским ученым Тимом Бенерс-Ли приблизительно в 1986-1991 годах. Изначально, HTML создавался для форматирования научной и технической документации, приспособленный для использования людьми, не являющимися специалистами в области вёрстки и содержал в себе минимальный пакет возможностей. Но в то время для языка не нашлось достойного применения и в 1993 году появился HTML+, однако и эта версия также осталась практически неиспользуемой. Начало широкого использования гипертекста было положено версией HTML 2.0, появившейся в июне 1994 года. Это был год роста популярности сети интернет по всему миру. Возможности и функции, включенные в версию 2, по большей части используются и в нынешнем времени. Создатели языка уже на тот момент понимали, что в будущем времени из языка локальной разметки текста, HTML эволюционирует в основное средство создания динамических веб-страниц. С разработкой версии HTML 2.0, были выяснены основные функции, которые могут потребоваться сайтам, появились стандартные теги. Если версию нельзя считать кардинально отличающейся от первой, то следующая версия стала абсолютным прорывом. Спустя год, была выпущена Версия 3.0 HTML, создатели включили интересные новинки: добавление математических формул и различных символов, вставка рисунков обтекаемых текстом, теги, примечания и многое другое. Но этот проект так же оказался не востребованным и не получил дальнейшего развития. Стоит отметить, что изначально авторами была заложена идея, в том, что HTML должен размечать лишь структуру документа и не должен содержать в себе непосредственно, параметры графических стилей элементов в браузере. Результатом же работы над следующей версией – 3.2 стало появление самостоятельной системы CSS (Cascading Style Sheets) – каскадных таблиц стилей, код которой не противоречил основам HTML. Теперь CSS можно подключать к разметке HTML и визуально оформлять гипертекстовые страницы. В ходе работы над версией 3.2, спецификацию языка стала иметь уникальный синтаксис, спецификации, были добавлены фреймы, изображения и некоторые другие важные теги, которые стали теперь весьма популярны у Web-мастеров. Даже сейчас на основе этой спецификации можно реализовать функциональные и привлекательные дизайнерские проекты. Практически все современные браузеры поддерживают версию 3.2, поэтому можно быть уверенным в работоспособности всех элементов и в нынешнем времени. Но передовое на тот момент решение – фреймы, не были включены в спецификацию 3.2. Браузеры поддерживали фреймы и многие обучающие книги, посвященные HTML, содержали описание фреймов, не упоминая тот факт, что этот элемент является нестандартным. В последствии, фреймы стали практическим стандартом языка HTML. В версию 4 они уже были включены на полном основании.

Официальная спецификация HTML 4 вышла в свет в 1997 году. Разработчики избавили свое детище от тех ненужных элементов, которые с появлением CSS стали устаревшими и дискредитировали основополагающую идею отделения разметки структуры от визуализации. Из-за таких мелочей никто не стал бы выпускать новую версию, поэтому основным достижением HTML 4.0 можно считать появление объектной модели страницы, элементами которой теперь можно было управлять посредством скриптовых языков программирования, исполняемых браузерами. Самым популярным таким языком на данный момент является JavaScript. В это время уже стало понятно, что дальнейшее развитие HTML будет осуществляться за счет скрипт - программирования. Это оказалось наиболее эффективным, чем вводить в язык все новые и новые элементы. Популярные в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно точно могли интерпретировать программный код, в соответствии с установленными стандартами. Популяризация скрипт программирования, не является решением всех проблем и возлагает на разработчиков определенные обязанности, в качестве примера можно отметить, что так как многие скрипты начинаются с определения версии браузера, чтобы в последствии использовать тот или иной фрагмент кода, необходимо каждый раз производить тестирование веб-страниц на разных популярных браузерах.

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

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

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

  1. Основные возможности языка

Гипертекст – термин, описывающий метод взаимосвязи одних данных с другими. В качестве примера, можно привести все действующие сайты, интернет энциклопедии, сети компьютеров и прочие ресурсы, в которых можно осуществить переход с одной страницы на другую. Каждый из нас неоднократно занимался изучением материалов на Википедии. Размещенные в ней статьи — ярчайший пример гипертекстов. В каждой статье выделены какие-либо термины/понятия/даты/фамилии ученых. Нажав на них, мы можем перейти на статью, которая уже посвящена им. Также мы можем встретить гипертекст, зайдя на любой другой сайт.

Еще одно понятие гипертекста — это документ, который составлен с помощью языка разметки (HTML или любого другого). Гипертекстовый документ составляется из особых отметок, тегов. Именно теги обозначают, где находится гиперссылка. В дальнейшем браузер принимает команду, что нужно перейти на другую ссылку с помощью выбранного тега. Именно этот принцип разрыва линейности текста на странице и стал наиболее существенным в развитии. Само название «гипертекст» подразумевает текст очень больших размеров. Ведь весь интернет можно представить, без преувеличения, как один бесконечный «рулон» текста, который собран из отдельных фрагментов, связанных между собой гиперссылками (узлами).

Документ, выполненный в формате HTML, называется:

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

Как было описано выше, такие страницы обычно имеют расширение .htm или .html.

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

Массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое – называется веб-узлом или веб-сайтом.

Каждая HTML-страница имеет свой уникальный URL-адрес в сети Интернет. О чем речь пойдет в следующем разделе.

  1. URL-адрес

Uniform Resource Locator – индивидуальный указатель определенного ресурса в сети интернет. Под ресурсом можно понимать сайт, отдельный документ или изображение.

Начинается URL – адрес с указания протокола HTTP (HyperText Transfer Protocol – протокол передачи гипертекста).

Стандартный URL в сети Интернет имеет вид:

http://www.наименованиесайта.домен/имя файлав

Структуру адреса URL можно определить следующими пунктами:

  • Метод доступа к ресурсу, он же именуется сетевым протоколом;
  • Авторизация для доступа;
  • Хост – DNS адрес, прописываемый как IP адрес;
  • Порт – обязательный атрибут при указании IP адреса;
  • Путь – информация о методе получения доступа;
  • Параметр – данные о файле внутри ресурса.

Разберем пример URL адреса личного кабинета студента Синергии

http://my.megacampus.ru/student/up

  1. Структура HTML-документа

    1. Обозначения

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

Пример: элемент, содержащий текст, ограничивается и обозначается начальным тегом <P> и закрывающим тегом </p>. Т.е. текст вложен между тегами как в контейнер. В примере показано вложение элементов. Тег <Font> вложен внутрь тега <P>, поэтому закрывающий тег </font> должен быть установлен перед </p>. Тег <P> в моем случае указывает на то, что текст необходимо выделить отдельным абзацем, а тег <Font> указан для оформления формата шрифта и его выделения красным цветом.

<P> <font color="red"> Текст будет вынесен в отдельный абзац и выделен красным цветом шрифта.</font> </p>

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

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

Атрибут - свойства элемента, дающие дополнительные возможности для форматирования текста. Теги имеют свои настройки, регулировать которые можно при помощи атрибутов, указывая диапазон настроек отдельно в каждом из тегов. Атрибуты позволяют сделать более разнообразной внешний вид информации, добавляемой с помощью одинаковых тегов. Каждому атрибуту присваивается значение, и следуя синтаксису, не забывать указывать знаки равенства, кавычки и иные символы согласно спецификации. Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре. Атрибуты вписываются в начальный тег и разделяются пробелами. Пример:

<P align="center"> Этот текст будет выровнен по центру экрана </p>

Пользователю будет отображен текст, выровненный по центру экрана:

Этот текст будет выровнен по центру экрана.

В Таблице 1 приведена структура стандартного веб-документа:

Таблица 1

<HTML>

Этот тег указывает на начало HTML-документа

<HEAD>

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

<TITLE>Структура веб-страницы</title>

Указывает имя документа (интернет-страницы), которое отображается в окне браузера.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

Этот тег несет второстепенную информацию и не отображается в экране для пользователя. В теге описывается кодировка веб-сайта. В указанном виде данный тег можно всегда вставлять на свою страничку, тогда браузером по умолчанию будет использована стандартная кодировка 1250, которая является наиболее популярной на данный момент.

<META name="Author" content="Ivanov Ivan">

Имя создателя веб-страницы.

<META name="Keywords" content="WWW, программирование, документ, веб-страница, формат">

Набор основных слов для поиска. Ранее, указанные подобным образом пользователем слова, поисковые машины использовали для выборки сайтов по актуальности запроса.

</head>

Конец элемента со служебными настройками.

<BODY bgcolor="green">

Начало собственно, содержимого веб-страницы. В тег <BODY> можно добавить атрибут bgcolor, для того чтобы задать цвет фона своей веб-странички. В данном случае зеленый. Если не использовать данный атрибут, то для фона страницы автоматически будет применен белый цвет. В элементе BODY необходимо размещать все, что хочется увидеть на странице.

<H2> На этом месте будет отображен заголовок страницы </h2>

<H2> </h2> Обозначение заголовка

<P> На этом месте будет отображен текст из первого абзаца </p>

<P> </p> Обозначение абзаца.

<P> На этом месте будет отображен текст второго абзаца </p>

</body>

Конец содержимого веб-страницы.

</html>

Обозначает конец HTML-документа.
    1. Форматирование данных на странице

В Таблице 2 приведена примеры стандартного форматирования веб-документа

Смотрите также файлы