Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML (Что такое HTML)

Содержание:

Введение

Что такое 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параметры>,где параметры могут быть следующими:

WIDTH - задает ширину линии

SIZE - задает толщину линии.

NOSHADE - если этот параметр задан, линия не будет иметь тени.

Комментарии заключаются между последовательностями .

Заголовки

Для их создания используются теги <H1>...</H1>,...,<H6>...</H6>. Размер 1 соответствует самому крупному шрифту, размер 6 самому мелкому

Шрифты

Выделение курсивом осуществляется с помощью тега <I> (от слова Italic), а жирным шрифтом -- с помощью тега <B> (от слова Bold).

В HTML есть также понятие emphasis - обобщенное выделение. Оформляется оно с помощью тега <EM>...</EM>. Такое выделение - средство описания логической структуры документа. Обычно выделенный таким способом текст отображается курсивом.

Другим средством логического выделения можно считать тег <STRONG>...</STRONG>

Содержимое тега обычно отображается жирным шрифтом.

Изменить размеры и цвет шрифтов можно с помощью тега <FONT параметры>...</FONT>

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

**SIZE=``value или value''** - задает абсолютный или относительный размер шрифта. Относительный размер задается по отношению к базовому размеру. Диапазон принимаемых значений от одного до семи.

COLOR - указывает цвет для текста.

FACE - расширение Microsoft Internet Explorer и Netscape Navigator. Позволяет задать гарнитуру (или список гарнитур, из имеющихся в системе шрифтов будет выбран наиболее подходящий) для текста.

SIZE - задает размер шрифта.

Списки

Списки в HTML бывают трех типов: ненумерованные, нумерованные и так называемые списки терминов. Ненумерованный список оформляется с помощью блока

<UL>

<LI>элемент

<LI> элемент

</UL>

Нумерованный список отличается от ненумерованного тем, что около пунктов вместо жирных точек вставляются порядковые номера пунктов. Оформляется он в виде блока

<OL>

<LI>элемент

</OL>

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

глоссариев. Оформить такой список можно с помощью

блока

<DL>

<DT>Термин1<DD>Описание1

<DT>Термин2<DD>Описание2

</DL>

Гипертекстовые ссылки

Одной из самых мощных возможностей WWW является возможность организации гипертекстовых связей между документами.

Чтобы оформить какой-либо элемент документа в качестве гипертекстовой ссылки, достаточно лишь заключить его внутрь тега <A> (anchor). Полный синтаксис тега таков:

<Aпараметры>

</A>

где параметры могут быть следующими:

HREF - обязательный параметр, определяет или URL или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле HREF содержит имя файла в файловой системе Web-сервера.

NAME - если этот параметр указан, то ссылка никуда не ссылается. Неочевидно, но в этом случае тег <A> указывает именованную метку в документе, на которую потом можно будет сослаться используя символ # в параметре HREF.

target - параметр, указывающий имя окна или рамки в которой будет отображен документ. Если окна или рамки с таким именем не существует, будет открыто новое окно.

Верстка таблиц

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

Создается таблица с помощью конструкции

<TABLE параметры >

<CAPTION>Заголовок</CAPTION>

<TR параметры>

<TD параметры>

</TD>

.... </TR>

</TABLE>

Тег TABLE начинает описание таблицы и может иметь следующие параметры:

BORDER - определяет толщину рамки таблицы. Если указано нулевое значение то рамка не отображается. Если этот параметр не указан, его значение считается нулевым (рамка не отображается).

WIDTH, HEIGHT – указывает размеры таблицы, если они должны быть жестко заданы.

ALIGN - определяет, как должна быть выровнена таблица: справа (RIGHT), слева (LEFT) или в центре (CENTER) страницы.

CELLSPACING - число точек между отдельными ячейками в таблице.

CELLPADDING - число точек между рамкой и содержимым ячейки.

С помощью тега <TR параметры>...</TR> оформляются строки таблиц. Он может иметь следующие параметры:

ALIGN - используется для задания способа горизонтального форматирования данных внутри ячеек: они могут прижиматься к правому (RIGHT), левому (LEFT) краям или центрироваться (CENTER).

VALIGN - используется для задания способа вертикального форматирования данных внутри ячеек: они могут прижиматься к верхнему (TOP), нижнему (BOTTOM) краям, центрироваться (MIDDLE) или иметь общую базовую линию (BASELINE).

Конкретные ячейки задаются с помощью тега <TD параметры>...</TD>, где параметры могут быть следующими:

WIDTH - задает ширину ячейки.

COLSPAN - определяет, сколько колонок таблицы ячейка будет перекрывать.

ROWSPAN - определяет, сколько строк таблицы ячейка будет перекрывать.

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

BGCOLOR - параметр, поддерживаемый современными браузерами: указывает цвет фона ячейки в виде RGB-триплета или символьного имени.

Еще один тег для оформления ячеек таблиц - тег <TH>...</TH> - нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.

Если нужно задать заголовок ВСЕЙ таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр:

ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.

Рамки (фреймы)

Мощным визуальным средством являются так называемые рамки или фреймы (frames). С помощью рамок область отображения браузера может быть разделена на отдельные части, содержащие различные документы. При этом возможно задание связей между рамками так, что выбор ссылки в одной рамке может приводить к отображению запрошенного документа в другой. Это позволяет создавать очень удобные в использовании документы (при неправильном применении можно также создать и очень неудобные). Рамки на сегодняшний день поддерживаются в последних версиях таких браузеров, как Netscape Navigator (начиная с версии 2.0) и MS Internet Explorer (версии 3.0 и выше), но популярность применения рамок растет, и похоже, что вскоре к этим браузерам добавятся новые.

Рамки описываются в специальном HTML-документе, называемом Документом Описания Рамок. Этот документ содержит описание числа, размеров и положения рамок, а также URL-и их содержимого. Нельзя пытаться вписать содержимое рамок в описание, оно должно находиться в отдельных документах.

При описании рамок тег <BODY> заменяется на тег

<FRAMESETпараметры>

описания содержимого рамок

</FRAMESET>

Тег будет игнорироваться браузером, если перед ним встретятся любые теги, в обычном случае встречающиеся внутри тега <BODY>. Теги <FRAMESET> могут быть вложенными, что позволяет, как Читатель увидит далее, создавать очень сложные конструкции. Параметры тега <FRAMESET> могут быть следующими:

**ROWS=``x1,x2,... или x1%,x2%,... или x1,x2,...''** - этот параметр описывает рамки как строки различной высоты. Высоты рамок задаются списком разделенных запятыми значений. Высоты измеряются в точках, процентном отношении от общей высоты области отображения, либо как относительные величины. Сумма высот всех рамок должна быть равна высоте всей области отображения. Если этого не происходит, браузеры сами корректируют значения.

**COLS=``x1,x2,... или x1%,x2%,... или *''** - используется для описания рамок как столбцов различной ширины. Используется так же, как параметр ROWS.

Примеры:

<FRAMESET ROWS="3,">

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

<FRAMESET ROWS="100,*,50">

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

<FRAMESET COLS="70%,30%">

задаст две вертикальные рамки, причем первая (левая) будет иметь ширину 70% общей ширины области отображения, а вторая (правая) -- 30%.

Для задания содержимого рамки используется тег <FRAME параметры>. Параметры могут быть следующими:

SRC - указывает URL документа, который должен быть отображен в рамке. Если параметр не указан, рамка останется пустой.

NAME - значение этого параметра определяет имя для рамки. Впоследствии по этому имени на рамку можно будет сослаться с помощью параметра TARGET тега <A>.

SCROLLING - показывает, можно ли проматывать содержимое документа в рамке. Может принимать следующие значения:

YES - содержимое рамки МОЖЕТ проматываться.

NO - содержимое рамки НЕ может проматываться.

AUTO - браузер решает, отображать линейку прокрутки или нет (исходя из длины документа). Это значение иcпользуется по умолчанию.

NORESIZE - если этот параметр указан, пользователь не сможет изменить размеры рамки. По умолчанию пользователь МОЖЕТ изменять размеры отображаемых рамок (например, таская границу рамки указательным устройством).

MARGINWIPH - указывает на величину горизонтального отступа внутри рамки.

MARGINHEIGHT - указывает на величину вертикального отступа внутри рамки.соответствует примерно следующей раскладке рамок в области отображения:

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

<NOFRAMES>

Внутри него рекомендуется располагать ссылки на документы, не содержащие рамок.

Для организации связей между рамками разработчики предусмотрели параметр TARGET для тега <A>. Он также может применяться в тегах <BASE>, <AREA> и <FORM>.

Практическая часть

Разработка сайта посредством HTML

Итак, в качестве практической части была выбрана работа по созданию сайта на тему: «Япония»

Создание графических объектов

В первую очередь перед началом верстки гипертекста нужно продумать общий дизайн страниц, их количество, структуру, а также создать элементы графической оболочки сайта. Лучше всего подойдет Adobe Photoshop CS5.

Кнопки меню

или (кому как нравится)

Для новостной ленты:

Для части HEAD

Макет страницы

Также важно продумать макет структуры сайта. Макет нашего сайта будет выглядеть примерно так:

Верстка

Теперь можно приступать к верстке. Делаем главную страницу:

Главная страница:

<html>

<head >

<title> Добро пожаловать в Японию </title>

<MARQUEE DIRECTION=CENTER SCROLLAMOUNT= align=center><font color=black><B> Новостная строка</b></font></MARQUEE></td></tr></table>

</embed></head>

<body background="images\backdrop01.jpg" bgproperties="fixed" leftmargin="35"

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">

<H2>

Добро пожаловать в Японию</H2>

<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>

</TD>

</TR>

<TD ROWSPAN="2" COLSPAN="2" bgcolor=black valign=top align=justify><h3 align=center> Информация о сайте</h3>

<P align=justify><font size="+1"> &nbsp&nbsp&nbspСайт разработан с чисто демонстрационными целями.

<br><I>Япония</i> — развитая страна с очень высоким уровнем жизни.

В Японии одна из самых высоких ожидаемых продолжительностей жизни, в 2019 году она составляла 87,3 года</font></p></TD>

</TR>

<TR>

<br>

<h2>Автомобиль какой марки вы предпочитаете?</h2>

<form>

<option value="no">Выберите автобрэнд

<option value="Toyota">Toyota

<option value="Honda">Honda

<option value="Subaru">Subaru

<option value="Nissan">Nissan

<option value="Mitsubishi">Mitsubishi

</select>

</form>

<bg><BR><bR> <strong>Итоги опроса:<table width=70% cellspacing=6 height=20% >

<tr><td>Toyota</td><td> 40%</td></tr>

<tr><td>Honda</td><td> 10%</td></tr>

<tr><td>Subaru</td><td> 20%</td></tr>

<tr><td>Nissan</td><td> 10%</td></tr>

<tr><td>Mitsubishi</td><td> 20%</td></tr></TABLE></strong>

</TD></TR></TABLE><br><br><br><br><br>

<A href="http://www.japan.com"> japan.com</a>

<A href="http://www.google">google.com</a>

<br><br><br><br><br><p align=right> Desined by Dmitriy Malevaniy<br>Moscow 2020

<br>

</center>

</body>

</html>

Страница 2

<html>

<head>

<title> Добро пожаловать в японию </title></head>

<B> Новостная строка</b></font></MARQUEE></td></tr></table>

<body background="images\backdrop01.jpg" bgproperties="fixed" leftmargin="35"

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">

<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>

</TD>

</TR>

<h3 align=center>Регистрация пользователей</h3>

Фамилия<input type="text" size=35><br>

Имя&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" size=35><br>

Отчество<input type="text" size=35><br>

<br>Страна&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<option>Выбрать страну

<option value="Россия">Россия

<option value="Беларусь">Беларусь

<option value="Сша">Сша

<option value="Франция">Франция

<option value="Япония">Япония

</select>

</TD>

</TR>

<TR>

<br>

<form>

<option value="no">Выберите автобрэнд

<option value="Toyota">Toyota

<option value="Honda">Honda

<option value="Subaru">Subaru

<option value="Nissan">Nissan

<option value="Mitsubishi">Mitsubishi

</select>

</form>

<bg><BR><bR> <strong>Итоги опроса:<table width=70% cellspacing=6 height=20% >

<tr><td>Toyota</td><td> 40%</td></tr>

<tr><td>Honda</td><td> 10%</td></tr>

<tr><td>Subaru</td><td> 20%</td></tr>

<tr><td>Nissan</td><td> 10%</td></tr>

<tr><td>Mitsubishi</td><td> 20%</td></tr></TABLE></strong>

</TD></TR></TABLE>

<A href="http://www.japan.com"> japan.com</a>

<A href="http://www.google">google.com</a>

<br>

</center>

</body>

</html>

Страница 3

<html>

<head>

<title> Добро пожаловать </title>

<B> Новостная строка</b></font></MARQUEE></td></tr></table>

<body background="images\backdrop01.jpg" bgproperties="fixed" leftmargin="35"

rightmargin="35" text="yellow" link="lightgreen" alink="yellow" vlink="lightgreen">

</body>

<INPUT type="SUBMIT" VALUE="Войти"></FORM><a href="2.html"><h3 align=center>Регистрация</h3></a></TD>

</TD>

</TR>

<h2 align=center>Фотографии</h2>

</TR>

<TR>

<br>

<h2>Автомобиль какой марки вы предпочитаете?</h2>

<form>

<option value="no">Выберите

<option value="Toyota">Toyota

<option value="Honda">Honda

<option value="Subaru">Subaru

<option value="Nissan">Nissan

<option value="Mitsubishi">Mitsubishi

</select>

</form>

<bg><BR><bR> <strong>Итоги опроса:<table width=70% cellspacing=6 height=20% >

<tr><td>Toyota</td><td> 40%</td></tr>

<tr><td>Honda</td><td> 10%</td></tr>

<tr><td>Subaru</td><td> 20%</td></tr>

<tr><td>Nissan</td><td> 10%</td></tr>

<tr><td>Mitsubishi</td><td> 20%</td></tr></TABLE></strong>

</TD></TR></TABLE><br><br><br><br><br>

<A href="http://www.japan.com"> japan.com</a>

<A href="http://www.google">google.com</a>

<br>

</center></html>

Заключение

На сегодняшний день перспективы HTML продолжают расти. Консорциум всемирной паутины разрабатывает HTML версии 5. Первый вариант спецификации языка появился в Интернете 20 ноября 2007 года. Параллельно ведётся работа по дальнейшему развитию HTML под названием XHTML (англ.Extensible Hypertext Markup Language— «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка SGML, однако XHTML, в отличие от предшественника, основан наXML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума всемирной паутины26 января2000 года.

Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. ГруппойWHATWG(англ.Web Hypertext Application Technology Working Group) разрабатывается спецификацияWeb Applications1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов и т.д., которые не очень удачно вписываются в модель XHTML 2.

Список используемой информации

Чак Муссиано и Билл Кеннеди "HTML и XHTML. Подробное руководство" 6-е издание. Издательство: Символ-Плюс, 2008 г. "HTML и XHTML. Подробное руководство" - самая полная и современная книга по языкам HTML и XHTML, разъясняющая работу и взаимодействие каждого их элемента.
Роберт Агулар "HTML и CSS. Основа любого сайта " Издательство: Эксмо, 2010 г. Самый эффективный способ обучения программированию - самостоятельное выполнение практических заданий.
А. А. Дуванов "Web-конструирование. DHTML " Издательство: БХВ-Петербург,2003г.
Это книга серии `Web-конструирование`. Она пополняет навыки создания гипертекстовых страниц на базе `чистого` HTML правилами построения каскадных стилевых таблиц (CSS) и основами программирования сценариев на языке JavaScript.
. Айзекс "Dynamic HTML. Секреты создания интерактивных Web - страниц" Издательство : BHV,2001г. Книга посвящена технологии Dynamic HTML, предназначенной для создания интерактивных Web - страниц.
О. Н. Рева "Использование HTML, JavaScript и CSS. Руководство Web-дизайнера " Издательство: Эксмо, 2008 г.
Н.Комолова, Е.Яковлева "HTML. Самоучитель "2-е издание. Издательство:Питер,2011г.
Самоучитель содержит последовательное изложение процесса создания веб-страниц с помощью языка HTML.
Джейсон Кренфорд Тиге "DHTML и CSS для Internet "3-е издание. Издательство:НТПресс,2007г. В книге описывается использование современных Web-технологий - динамического HTML (DHTML) и каскадных таблиц стилей (CSS), используемых в Web-программировании для создания интерактивных динамических Web-узлов.
А. А. Дуванов "Web-конструирование. HTML " Издательство: БХВ-Петербург,2005г.
Эта книга для тех, кто хочет изучить язык HTML, основные правила web-дизайна, освоить способы конструирования гипертекстовых страниц в соответствии с современным уровнем развития этой области информационных технологий.

9. Гончаров А. Г65 Самоучитель HTML. — СПб.: Питер, 2002. — 240 с