Файл: Основы программирования на языке HTML (Что такое HTML).pdf
Добавлен: 01.04.2023
Просмотров: 42
Скачиваний: 2
Введение
Что такое HTML?
С появлением локальных сетей, подключением таких сетей к Интернет, созданием внутрикорпоративных, сетей, появляется возможность с любого рабочего места организации получить доступ к информационному ресурсу сети.
Технология World Wide Web, в переводе Всемирная паутина получила столь широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип жми на то, что интересно, лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки - имеют возможность раскрыться новым документом, развивающим это понятие. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде –гипертекстовыми документами. Для описания этих документов используется специальный язык - язык описания гипертекстовых документов или HTML (англ. вариант Hyper Text Markup Language).
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.
Для разработки данной информационной системы выбраны фирмы специализирующиеся на оказании услуг мобильной связи. Посредством данной системы пользователь может получить информацию о тарифных планах, роуминге, телефонах и аксессуарах к ним, а так же дополнительных услугах предоставляемых данными фирмами.
верстка язык html
Теоретическая часть
HTML как явление нашей жизни Hyper Text Markup Language (язык разметки гипертекста) давно перестал быть просто языком программирования. Понятие HTML включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и многое другое. Человек, изучивший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире значит не так уж и мало. Гипертекст как нельзя лучше подходит для включения элементов мультимедиа в традиционные документы. Практически, именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие
информационные системы, выполненные в виде наборов HTML-страниц, не требуют разработки специальных программных средств, так как все необходимые инструменты для работы с данными (Web-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. При таком подходе от пользователя требуется выполнить только ту работу, которая непосредственно относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связи между ними. Неохваченными остались только технические проблемы, такие, как получение видеоизображений, качественного звука, тиражирование дисков и т, д. HTML является основой моды в Интернете. Все, что обсуждается на страницах виртуальных журналов в Сети, в телевизионных передачах, посвященных Интернету, так или иначе связано с языком разметки гипертекста: красивые рисунки, интерактивность Web-страниц, битва двух фирм-производителей браузеров (Microsoft и Netscape), бизнес, игры, и многое, многое другое. Пользователь, игнорирующий Интернет, добровольно обрекает себя на отлучение от целого мира. HTML как основа создания Web-страниц имеет прямое отношение и к новому направлению изобразительного искусства — Web-дизайну. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще разместить все это в Сети, продумать связи между Web-страницами, чтобы все двигалось, откликалось на действия пользователя, поражало воображение неискушенных клиентов, а у приверженцев Сети вызывало желание создать что-нибудь свое, оригинальное в этой области. Способ создания гипертекста обеспечивает его абсолютную платформенную независимость. Создавая Web-страницы на компьютере, который работает под управлением Windows, вы можете не сомневаться, что администратор сервера сможет использовать ваши файлы на компьютере, работающем под управлением UNIX или другой операционной системы. Одной из основных особенностей HTML является принцип, по которому не только допускается вложение одних элементов в другие, но и декларируется необходимость такого вложения. Это отличает HTML от многих других языков, в которых теоретически можно написать код без вложенных конструкций. В данном случае, это невозможно изначально. Каждый элемент допускает непосредственное вложение только ряда элементов, которые, в свою очередь, допускают вложение других, разрешенных для них, и т. д. Таким способом формируется не только общая структура гипертекста, но и создаются разнообразные визуальные эффекты. Все элементы языка можно условно разделить на три группы. К первой относятся элементы, которые создают структуру гипертекстового документа. Использование таких элементов — необходимая формальность, которой нельзя пренебрегать. Ко второй группе можно отнести элементы, создающие эффекты форматирования. Их использование диктуется конкретными требованиями к документу, фантазией и компетенцией разработчика, К третьей группе относятся элементы, которые позволяют управлять программными средствами, установленными и работающими на компьютере-клиенте. Часто такие элементы создаются автоматически, когда разработчик использует для вставки некоторого объекта в документ гипертекстовый редактор или подобную программу. Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Прежде чем начинать создание собственных HTML-документов, полезно познакомиться с программами, необходимыми для просмотра таких документов — браузерами. Последние используются не только как средство просмотра, но и как почтовые программы, а также как средство загрузки файлов посредством FTP. Нам потребуется изучить две основные функции браузеров: просмотр Web-страниц и редактирование их содержимого (элементов HTML). Несмотря на то, что в мире создано немало программ для просмотра HTML-документов и даже специализированных редакторов, выбор пользователя всегда ограничен. Это объясняется прежде всего тем, что в гипертекстовую технологию постоянно вносятся дополнения, и программы перестают удовлетворять последним требованиям. Однако в настоящее время пользователи выбирают продукцию одной из двух фирм: Microsoft и Netscape. Именно им удалось найти решения, завоевавшие всеобщее признание. А тот факт, что обе фирмы постоянно изыскивают возможности реализовывать в своих программах поддержку нововведений конкурента, является причиной быстрого развития гипертекста. Пользователи в этой ситуации только выигрывают, получая в свое распоряжение все новые и новые, самые современные программные продукты. Средства просмотра HTML-кода дают возможность сохранить документ и даже модифицировать его. Команда Файл > Править в Microsoft Front Page позволяет подключить гипертекстовый редактор, который выбран в окне свойств обозревателя. Команда Вид > В виде HTML открывает выбранную страницу в Блокноте.
Редактирование страниц в режиме источника очень удобно, так как можно сразу увидеть результат внесенных изменений: после модификации страницы ее надо сохранить в текстовом редакторе, а затем в браузере щелкнуть на кнопке Обновить. Часто при просмотре страниц возникает проблема со шрифтами. Если шрифт на странице слишком мелкий или, наоборот, неоправданно крупный, вид документа легко исправить. Используйте команду Вид > Размер шрифта, чтобы изменить размер шрифта на время просмотра. Буквы можно как уменьшить, так и увеличить, При этом на странице сохраняются пропорции различных шрифтов и заголовков. Основные инструменты для настройки браузера собраны в окне Свойства обозревателя, которое активизируется одноименной командой меню Сервис. На просмотр HTML-страниц влияют несколько параметров. На вкладке Общие имеются кнопки Цвета, Шрифты, Языки и Оформление, с помощью которых можно установить режимы воспроизведения страниц. В браузере назначаются для использования по умолчанию два шрифта: пропорциональный и моноширинный. Два разных типа шрифта необходимы для прорисовки данных из соответствующих элементов HTML. Какие именно шрифты надо применять, выбирает пользователь. Важен также и выбор кодировки: для русскоязычных документов применяют Windows-1251 или КОИ-8. Можно выбрать и цвета, которыми будут раскрашены текст, пройденные и неиспользованные гиперссылки. На этой вкладке можно получить доступ к параметрам настройки кэша. Эти параметры позволяют просмотреть содержимое папок кэша (кнопка Настройка в группе Временные файлы Интернета) и скопировать оттуда необходимые файлы, которые были загружены из Сети. При необходимости файлы временного хранения можно стереть, освободив место на диске. На вкладке Дополнительно можно установить режим, при котором на странице не будут воспроизводиться рисунки или мультимедийные компоненты. На вкладке Программы можно выбрать приложения, которые будут использоваться по умолчанию совместно с браузером (HTML-редактор, программа электронной почты и др.). Первая версия HTML была разработана в начале 90-х годов Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в те времена ни для браузера, ни для самого языка еще не нашлось достойного применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Начало широкому использованию гипертекста дала версия 2.0, которая появилась в июне 1994 года. Это был момент начала роста популярности WWW по всему миру. Элементы, включенные в версию 2, в большинстве своем используются и по сей день. В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д.) при помощи элементов языка. Под эту версию разрабатывались и браузеры. Но этот проект оказался тупиковым и не получил дальнейшего распространения. В 1996 году появился HTML версии 3.2. Это было новаторское решение, достаточно упомянуть, что в спецификацию языка были введены фреймы, которые стали теперь весьма популярными у разработчиков Web-страниц. Даже сейчас на основе этой спецификации можно реализовывать очень неплохие дизайнерские решения. Практически все современные браузеры стопроцентно поддерживают версию 3.2, поэтому у авторов не возникают сомнения по поводу работоспособности заявленных элементов. Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум), компании-производители браузеров создавали собственные элементы (расширения). Впоследствии некоторые из этих элементов, после получения всеобщего признания, включались в спецификацию
следующей версии языка. Интересно, например, что новаторское решение фреймы, — которое так полюбилось многим разработчикам, не было включено спецификацию 3.2. Но браузеры поддерживали фреймы, и многие книги, посвященные HTML, содержали описания фреймов без упоминания о том, что это нестандартные элементы. И это было правильно, потому что фреймы стали стандартные де-факто. В версию языка 4 они уже были включены на полном основании. И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами, в версии 3.2 не сыграли той роли, которую были при званы сыграть. Это объяснялось тем, что браузеры различных версий по-разному интерпретировали программы на языках Java, JavaScript, Visual Basic (VBScript. В результате не удавалось получить достаточно надежно работающий код, и данные языки использовались любителями HTML в основном для экспериментов. Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был достигнут определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определенной версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевид но, что на программиста ложится обязанность тестирования страниц на все; популярных в настоящее время браузерах. Кроме того, актуальной остается проблема использования старых или не очень популярных программ. Лидерами «браузеростроения» по праву считаются компании Microsoft и Netscape, но ведь существуют еще и другие фирмы... В результате использование всех возможностей Dynamic HTML стало yдeлoм программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных Web-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код. Если рассмотреть исходные тексты различных Web-страниц, то можно легко увидеть схожесть их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами, и изучать его надо не по официальным первоисточникам, а на практике, обращаясь к последним разработкам ведущих фирм и специалистов. Число случаев, когда допустим только начальный тег (часть элементов не имеют конечного вообще), невелико, и они специально оговариваются. Для имен тегов можно использовать как прописные, так и строчные буквы латинского алфавита. Некоторые пользователи записывают начальные теги прописными буквами, а конечные теги — строчными. Это помогает разобраться в исходном тексте Web-страницы. Главной проблемой при описании и изучении HTML является определение набора атрибутов и их значений, допустимых для каждого из элементов. Очень часто можно столкнуться с ситуацией, когда некий хорошо известный атрибут не использовался в каком-нибудь элементе, а потом вдруг его использование стало давать эффект при просмотре страницы в новом браузере. Поддержка дополнительных атрибутов — скорее дело совершенствования браузеров, а не языка. Изначально в HTML было введено меньше возможностей для форматирования текста, чем в обычные текстовые редакторы. В результате авторам гипертекстовых документов приходилось прибегать к различным ухищрениям, чтобы придать тексту заданный вид. Сейчас положение изменилось, но все дополнительные возможности осуществляются за счет применения таблиц стилей. Например, только с помощью свойства text-indent можно задать величину отступа первой строки абзаца. Списки (list) были введены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. В структуру гиперссылок заложена возможность создания сложных текстовых документов, доступных через Интернет. Предполагается, что такие документы будут состоять из многих HTML-страниц с перекрестными ссылками. Чтобы пользователь мог эффективно управлять документом, браузер должен оптимизировать работу с отдельными страницами, например, загружать страницы, которые могут понадобиться пользователю, в фоновом режиме. Для этого необходимо снабдить страницы информацией о назначении ссылок. Существует ряд элементов, работоспособность которых невозможно гарантировать Их появление обусловлено несколькими причинами. Во-первых, неработающие элементы появляются в результате изменений, вносимых в язык при создание новых версий. Новые броузеры не выводят никаких сообщений об устаревши* элементах и игнорируют их при форматировании Web-страниц. Во-вторых, бессмысленность некоторых элементов заключается в том, что результаты форматирования (например изменения атрибутов шрифта) никак не проявляются на экране. Все эффекты, ожидаемые от подобных элементов, можно с успехом получить при помощи других, более популярных. Я думаю, что любой разработчик должен учитывать тот факт, что его Web-страницы будут просматривать при помощи разных программ. Поэтому он должен быть уверен, что документ будет выглядеть так же, как в оригинале. Строго говоря, понятие версии языка HTML является в достаточной степени условным. Формально на текущий момент существует определенная спецификация языка, но фактически каждый броузер поддерживает свою интерпретацию версии. Элементы, объявленные устаревшими, продолжают использоваться, а фирмы-разработчики стараются вводить в обиход новые, оригинальные элементы. Сложилась парадоксальная ситуация: спецификация языка как стандарт де-факто разрабатывается в одной организации (в W3 Consortium), а браузеры — в других (фирмах-разработчиках программного обеспечения). Таким образом, версия языка — это, скорее, временное понятие. Можно говорить о состоянии этой области знания только применительно к определенному отрезку времени, то есть периоду декларирования и использования определенной версии HTML. Предполагается, что форма должна содержать определенное число элементов управления: поля ввода, переключатели, кнопки, флажки и т. д. Каждый элемент управления создается при помощи одного из элементов HTML. Для таких элементов предусмотрены атрибуты, влияющие на работу формы. Большинство элементов формы может принимать определенные значения. Например, для поля ввода это может быть текст, а для переключателя — номер элемента который выбран пользователем. Для доступа к этим значениям со стороны про граммы необходимо использование атрибута. Многие авторы заинтересованы в том, чтобы их страницы имели современный вид, были многофункциональными и динамичными. Для преодоления ограничений HTML применяются разные средства: апплеты, объекты, каскадные таблицы стилей. Но самым популярным приемом является использование сценариев. Сценарий — это программный код, который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. При создании достаточно крупных сайтов автор всегда должен стараться выполнить ряд требований: загрузка страниц должна происходить по возможности быстро, любая страница должна выглядеть одинаково при просмотре в различны> программах, пользователь должен легко разобраться, какая информация есть ш сайте и как ее найти. Потом HTML и браузеры были усовершенствованы, и начался бум графики. Разработчики считали своим долгом расположить на своих страницах как можно больше двигающегося, прыгающего и мигающего. Поначалу все это было очень интересно, но со временем «зритель» начал уставать. Кроме того, романтические настроения стали уступать меркантильным соображениям: все больше организаций стали обзаводиться собственными рекламными страницами. В моду вошли фреймы: левую часть окна отводили для набора ссылок, которые служили путеводителем по сайту — своеобразным меню. Одновременно вверху и внизу каждой страницы размещали «горизонтальное меню» — набор команд в виде ссылок или рисунков. Такая компоновка страницы оказалась вполне рациональной, но в последнее время от нее отказываются. Если задаться вопросом, сложно или легко включать в HTML-документы мультимедийные источники данных, то ответ на этот вопрос будет двояким. С одно£ стороны, сделать это совсем нетрудно, а с другой стороны, внедрение мультимедийных файлов влечет за собой ряд проблем. Браузеры не имеют встроенные средств для воспроизведения таких файлов, но они могут использовать установленное на компьютере клиента программное обеспечение. В том случае, если компьютер оборудован звуковой платой и колонками, если установлен драйвер звуковой платы и если установлена программа для воспроизведения звуковых файлов, мы сможем прослушать содержимое файла. Во всех этих «если» и заключается вторая, негативная сторона вопроса. Нельзя дать гарантию, что у всех пользователей, просматривающих ваши HTML-документы, будет необходимое оборудование и программное обеспечение. Рисунки стали неотъемлемой частью HTML-документов, поэтому просто невозможно не рассмотреть вопросы применения графики в гипертексте. Тема, с точки зрения дизайна, поистине необъятная, но, к счастью, с практической стороны дело обстоит намного проще. Так же, как и в случае с гипертекстовыми редакторами, в этой области мы сталкиваемся с большим количеством программных средств, призванных облегчить жизнь (а точнее процесс рисования) авторам Web-страниц. Самым распространенным форматом графических файлов для HTML-документов является GIF (Graphic Interchange Format). Для кодирования цвета в нем используется 8 бит, то есть допускается 256 различных цветов или столько же градаций серого. Наборы цветов (палитры) могут быть различными. Один GIF-файл может содержать несколько изображений, позволяющих создавать движущиеся или изменяющиеся образы. В этом случае требуется согласование палитр различных изображений, составляющих один файл. К фоновому рисунку HTML-документа, безусловно, предъявляется ряд требований. В зависимости от того, какой вид хочет придать своей странице автор, выбирается направление конструирования фона. До недавнего времени классическим решением было создание бледно-серого фона с таким же бледным, но рельефным рисунком. Здесь очень многое зависит от художника, но современные графические редакторы позволяют создавать похожие эффекты и автоматически. Такой' фон не должен ощутимо снижать контрастность страницы и мешать чтению текста. В последнее время в моде на фоновые рисунки произошли изменения. Все чаще можно встретить белый фон. Белый цвет вне конкуренции, и тут не надо что-либо объяснять.
Структура HTML-документов
Web-страницы описываются на специальном языке, называемом HTML (Hyper Text Markup Language язык разметки гипертекстовой информации), который позволяет осуществлять простое форматирование текста, вставку графики, а также составление таблиц и цветовое оформление документов.
Будучи подмножеством языка SGML, HTML имеет теговую структуру. Это означает, что в тексте встречаются команды, изменяющие интерпретацию информации.
Теги записываются в угловых скобках и могут содержать дополнительные параметры. Большинство тегов располагается в виде ``скобок'' вокруг текста (как теги <I> и </I> вокруг слова ``курсивом'' в приведенном выше примере). Благодаря этому свойству, теги можно подразделить на открывающие и закрывающие. Не у всех тегов существуют соответствующие им закрывающие, такие теги иногда называют ``пустыми''(empty). Общую структуру открывающего тега можно записать так:
<NNNNN Name="Value" .....>
Соответствующий закрывающий тег будет иметь вид
</NNNNN>
Теги HTML
Заглавные теги
<HTML> (соответственно, в конец документа, закрывающего тега </HTML>; никогда не забывайте закрывать скобки!). Заголовок HTML-файла находится в обязательной секции <HEAD>, которая должна находиться в самом начале, то есть сразу после тега <HTML>. Оформляется заголовок с помощью тега <TITLE>.
BACKGROUND - позволяет задать фоновую картинку для документа. Картинка будет размножена (tiled) и покроет всю видимую площадь области отображения окна программы просмотра.
TEXT - задает цвет текста документа. Цвет задается так же как и для параметра BGCOLOR.
LINK - задает цвет для текста и рамок изображений в активных зонах документа, содержащих ссылки (anchors).
VLINK - (Visited LINKs color) задает цвет для ранее выбранных ссылок.
ALINK - (Active LINKs color) задает цвет для ссылок в момент выбора.
Форматирующие теги
Для того чтобы вставить ``насильный'' перевод строки, необходимо воспользоваться тегом <BR> . Если вам необходимо сделать так, чтобы в определенном месте текст НЕ МОГ быть разорван, напишите в этом месте тег <NOBR>
Для разбивки текста на параграфы используется тег <Pпараметры>ТЕКСТ<P> Тег <P> имеет один параметр ALIGN, указывающий на способ выравнивания текста внутри параграфа: текст может быть выровнен по правому (RIGHT), левому (LEFT) краям или отцентрирован (CENTER). Если параметр опущен, текст выравнивается по левому краю.
Чтобы отцентрировать параграф можно также пользоваться тегом
<CENTER>...</CENTER>
Еще одним способом разделения текста на части можно назвать горизонтальную линию. Линия является элементом языка HTML и вставляется в текст посредством тега<HRпараметры>,где параметры могут быть следующими: