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

ВВЕДЕНИЕ

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

World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц.

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

Также в данной работе рассмотрены основы языка программирования Web-страниц - HTML, который является общепринятым стандартом WWW.

Собственно, появление html и ознаменовало появление интернета в том виде, в котором мы его знаем сейчас, приведя к началу бурного роста сети и количества сайтов в ней. HTML - это сокращение от англ. "HyperText Markup Language", что в переводе на русский означает "язык гипертекстовой разметки". HTML - это стандартный язык, который и по сей день используется для создания веб-страниц, размещаемых в интернете.

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

Это даст нам возможность ознакомиться со структурой Web-страницы и приемами ее правильного оформления.

Объектом исследования является - веб-сайт.

Предметом исследования - программирование сайта на языке HTML.

Цель работы - изучение языка программирования HTML.

Задачи:

• Раскрыть основные сведения о языке;
• Рассмотреть процесс создания сайта;
• Создать веб-сайт на основе разработанного алгоритма.

Структура: работа состоит из введения, трех глав, заключения и списка использованной литературы.

Основные сведения о языке html

1.1. Понятие языка html

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы.

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

Рис. 1. Структура HTML - это язык разметки гипертекста

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

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

По сути интернет - это одно целое гипертекстовое пространство. Но сам по себе гипертекст мало на что способен даже в плане передачи информации. Представьте себе Русский язык без знаков препинания. Без этого он станет намного менее богатым, не правда ли? Гипертекст также нуждается в своих знаках препинания, т.е. в разметке. Взять, к примеру, абзац выше. На самом деле выглядит всё так:

<blockquote>

<p>Гипертекст представляется набором текстов,

содержащих узлы перехода между ними, которые

позволяют избирать читаемые сведения или

последовательность чтения. Общеизвестным и

ярко выраженным примером гипертекста служат

веб-страницы.<br>

<cite>Wikia, раздел <q>Наука</q>.

<a hreflang="ru" target="_blank" title="Определение

гипертекста"

href="http://ru.science.wikia.com/wiki/гипертекст"

rel="nofollow">Гипертекст</a>.

</cite>

</p>

</blockquote>

Просматриваем мы гипертекст при помощи специальных программ - обозревателей сети интернет. Самые популярные программы:

1. Mozilla Firefox
2. Internet Explorer
3. Opera
4. Google Chrome

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

Так вот я решил немного подправить ситуацию. HTML - это не просто текст какой-то там разметки. Это труд сотен или даже тысяч программистов, развивающих этот язык. HTML - это часть консорциума W3C, организации, развивающей среду web. Цель консорциума - привести все к единому знаменателю, что в свою очередь обеспечит стабильность и быстрое развитие всего интернета. Цель более чем благородная, не так ли?

W3C выпустил ряд важных документов, являющихся основой всего web'а - это спецификации (что-то вроде ГОСТ). Спецификация определяет правила, которым необходимо следовать при разработке сайтов и web-приложений. Необходимо хотя бы потому, что люди, писавшие правила, намного лучше меня и вас разбираются в языке гипертекстовой разметки. Они его развивают, а мы всего лишь используем.

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

1.2. Разработка Web-сайта

Создавать свой сайт можно разными способами. Самый простой - установить cms (систему управления контентом) и через неё редактировать сайт прямо на хостинге. В этом случае никаких программ не нужно. Однако у cms есть свои недостатки, и нередко возникает необходимость всё же создать сайт или страничку самостоятельно, чтобы потом закачать на хостинг. Какие программы для этого нужны?

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

Html-редакторы бывают двух видов - визуальные и невизуальные (текстовые). Невизуальные помогают редактировать текст, проверять теги и т. д., но всё равно код в них нужно печатать вручную. Удобнее визуальные редакторы, имеющие помимо режима редактирования html-кода визуальный режим. В визуальном режиме вы можете видеть страничку примерно так, как она должна выглядеть в браузере и можете редактировать её не путём вписывания кода, а вставлять картинки, таблицы, форматировать текст и т. п., удобным образом при помощи нажатия кнопок. Чтобы сделать страничку в визуальном редакторе, не обязательно знать язык html в совершенстве.

Визуальных редакторов html (т. е. программ для создания сайта) довольно много, как платных, так и бесплатных, как совсем простых, так и более сложных. К сожалению, не у всех разработчиков хватает сил и желания развивать и поддерживать свои творения, поэтому некоторые редакторы, например, NVU и Quanta Plus, претендовавшие на то, чтобы заменить известные платные редакторы, на настоящий момент фактически заморожены в своём развитии.

Известные бесплатные визуальные редакторы для создания сайтов на сегодняшний день:

Kompozer - редактор, который годится как для начинающих, так и для профессионалов. Существуют его версии для Windows и Linux.

Amaya - два в одном, редактор страниц и одновременно браузер, который одобрен W3C, он правильно поддерживает все стандарты для html.

SeaMonkey - набор программ для работы в интернете, включающий браузер, почтовую программу, IRC-чат и редактор страниц. Создан на основе продуктов Mozilla.

BlueGriffon - считается преемником более раннего редактора NVU, развитие которого заглохло несколько лет назад.

Бесплатно можно скачать также Microsoft SharePoint Designer 2007

Набор платных визуальных редакторов достаточно велик. Среди них можно выделить такие, как CoffeeCup HTML Editor, Namo WebEditor, RapidWeaver, Web Builder и др. Однако наиболее популярными уже долгое время являются редактор Dreamweaver и линейка редакторов от Microsoft.

Dreamweaver - визуальный редактор, многие годы удерживающий заслуженное лидерство среди программ для создания сайтов. Изначально был разработан и долгое время развивался компанией Macromedia, а затем купившей её компанией Adobe, которая ради Dreamweaver отказалась от дальнейшего развития собственного html-редактора Adobe GoLive. Сейчас Dreamweaver входит в набор продуктов Adobe Creative Suite, представляющий комплексное решение для создания веб-сайтов. Впрочем, его вполне можно использовать и отдельно.

Популярными программами для создания сайтов также являются визуальные редакторы от Microsoft. Долгое время многие вебмастера пользовались для создания сайтов редактором FrontPage, но затем Microsoft прекратила его поддержку, предложив взамен две новых программы - Microsoft Expression Web (считается основным html-редактором от Microsoft) и Microsoft SharePoint Designer, который в большей мере можно считать преемником FrontPage.

Microsoft Expression Web является частью Microsoft Expression Studio - комплекса программ для разработки сайтов.

Microsoft SharePoint Designer является частью Microsoft SharePoint - комплекса программ для организации совместной работы (в т. ч. через интернет, поэтому включает мощные средства для создания сайтов). Последней версией является SharePoint Designer 2016, на сайте Microsoft можно скачать пробную версию программы.

А SharePoint Designer 2007 Microsoft сделала полностью бесплатным, его можно скачать на сайте Microsoft.

• 1. Основные положения HTML и структура документа

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа, регистр при вводе текста не важен:

<TITLE> Заголовок документа </TITLE> или <title> Заголовок документа </title>.

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

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

Будучи подмножеством языка SGML, HTML имеет теговую структуру. Это означает, что в тексте встречаются команды, изменяющие интерпретацию информации.

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.