Когда вы загружаете из WWW хоть какой документ, то его текст в окне вашего браузера отображается в отлично отформатированном, комфортном для просмотра виде. Это означает, что WEB странички представляют собой не обычный текст, а содержат также некую вспомогательную информацию для управления представлением документа в окне вашего браузера. Так как при разработке документа не понятно, на компьютере какого типа пользователь будет его просматривать, то WEB странички не могут готовиться и храниться в формате, разработанном для определенной компьютерной платформы, к примеру, в формате Microsoft Word для Windows ХР. Для того, чтоб пользователь, работающий на компьютере хоть какого типа, лицезрел документ, отформатированный соответствующим образом, употребляется разработанный специально для этого язык HTML.
Что все-таки представляет собой язык HTML?Если вы работаете с браузером , то изберите команду меню Вид - Просмотр HTML кода (View - Source). На дисплее появится окно с начальным кодом этой странички на языке HTML.
В либо довольно надавить CTRL+U
Вид WEB страничек в Интернет очень нередко изменяется. Но для нас на данный момент это не значительно.
HTML - HyperText Markup Language (Язык разметки гипертекста)HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собой достаточно обычный набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заглавия, абзацы, таблицы, списки-перечисления и так далее, но не задает определенные атрибуты форматирования. Определенный вид форматирования определяет сам браузер при чтении документа, и конкретно браузер обеспечивает лучшее отображение WEB документа на вашем экране.
Как ранее говорилось, создавать WEB странички можно при помощи особых программ-редакторов, автоматом генерирующих код HTML, работа с которыми не просит познания языка разметки. Но эти программки нередко ограничены в собственных способностях, содержат ошибки и часто делают нехороший HTML код, который работает не на всех платформах. Потому, если вы желаете серьезно освоить WEB дизайн и осознать принципы сотворения WEB документов, для вас не обойтись без познания основ языка HTML, тем паче, что создавать WEB странички на нем совершенно не тяжело. Может быть, это даже легче, чем освоить программку для сотворения HTML страничек.
Язык HTMLЯзык HTML существует в нескольких вариантах, либо спецификациях. Как и версии программных товаров, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Любая следующая спецификация представляет собой расширение и дополнение предшествующей. Мы будем использовать конструкции последней спецификации HTML 4.0, которые поддерживаются последними версиями большинства всераспространенных браузеров.
Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение HTML (.html), либо HTM (.htm). В документе HTML обыденный текст смешивается с элементами разметки, заключенными в угловые скобки < и >, к примеру, , , , . Такие элементы разметки именуются тегами. Теги бывают одиночными, открывающими и закрывающими и состоят из последующих вереницей в определенном порядке частей:
- левой угловой скобки .
Таким макаром, открывающий тег , стоящий сначала документа HTML и значащий его начало, состоит из имени HTML и двух угловых скобок < >, а тег , находящийся в конце WEB документа, не считая обозначенных частей содержит также знак слэш /, значащий закрывающий тег и указывающий на конец документа. Тег значит начало кода интегрированной в документ программы-сценария. Этот тег содержит, не считая имени script, атрибут language со значением "vbscript", значащий, что сценарий написан на языке vbscript.
В тегах могут употребляться только знаки латинского алфавита, а в значениях атрибутов - любые знаки. Если в качестве значений атрибута употребляются, к примеру, знаки кириллицы, то они обязаны быть заключены в кавычки, к примеру, name="Раздел 1".
Язык HTML не различает огромные и малые буковкы, так что теги , и эквивалентны. Но вот в 2010 году консорциум w3c, взявший на себя ответственность навести порядок в сфере спецификации HTML языка, в новейшей безотступно советует писать теги малеханькими знаками, и на другими словами весомые предпосылки. Потому дальше мы будем использовать написание тегов в нижнем регистре.
Теги как база htmlБольшая часть тегов являются парными: за открывающим тегом следует соответственный ему закрывающий тег, а меж ними содержится текст либо другие теги, к примеру:
Книжный Интернет-магазин Три Cтупеньки
В таких случаях два тега и часть документа, заключенная меж ними, образуют блок, именуемый элементом HTML. Некие теги, к примеру, , являются одиночными и для их закрывающий тег не применяется. Такие теги сами по для себя являются элементами HTML.
Большая часть тегов могут иметь один либо несколько атрибутов - характеристик, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Но атрибутов может и не быть совсем. Атрибут тега состоит из имени, к примеру, align, знака равенства=и значения, которое задается строчкой знаков, к примеру, "center": align="center". Значения атрибутов обычно заключаются в кавычки. Но если эти значения употребляют только знаки латинского алфавита, числа и дефисы, то кавычки можно опустить, к примеру: align=center. Но опускать кавычки категорически не рекомендуется в силу ряда обстоятельств связанных с предстоящей интеграцией HTML с JavaScript и языками. Потому вырабатывайте привычку сходу писать атрибуты в кавычках.
Структура HTML документаКаждый HTML документ имеет определенную структуру, которая смотрится последующим образом:
…
Структура HTML документа содержит последующие неотклонимые элементы:
- теги и , которые отмечают начало и конец документа;
- заголовок, ограниченный тегами и ;
- тело, ограниченное тегами ….
В заголовке, ограниченном тегами и , при помощи тегов … определяется заглавие документа, которое должно обрисовывать его содержимое и обычно содержит менее 5-6 слов. Это заглавие отображается браузерами в строке заголовка рабочего окна программки, а боты, составляющие индексы для поисковых машин, идентифицируют документ, используя его заглавие.
Не считая элемента …, заголовок может содержать элементы …, к примеру, , для указания инфы о документе. Открывающий тег включает пары имя=значение, описывающие характеристики документа, к примеру, тип документа, его шифровку, авторство, перечень ключевиков и так далее Эти данные употребляются также поисковиками при индексации документов.
HTML (HyperText Markup Language) - это специальный язык форматирования текстовых документов (его еще называют языком разметки документов - программа просмотра WWW документов). HTML представляет собой достаточно простой набор команд, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу отдельно подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа, как, например, Microsoft Word. Конкретный вид документа окончательно определяет только программа-браузер на Вашем компьютере. Необходимость именно такого подхода связана с разнородностью аппаратного и программного обеспечения компьютеров, подключенных к Интернет. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.
С точки зрения пользователя Windows, Web-страница – это просто файл типа *.htm или *.html, находящийся на сервере Интернет, в локальной сети или на жестком диске Вашей машины.
Запомните, что HTML не является языком программирования, он предназначен только для разметки документов. Т.е. по сути, создавая HTML страницу, вы просто редактируете текст при помощи тегов примерно так же, как и в обычном текстовом редакторе. Каждый тег имеет свое свойство, но все они заключаются между угловыми скобками "", например, , .
Все теги в HTML делятся на два типа – это парные и непарные. Парными считаются те, у которых открывающийся тег требует наличия закрывающегося тега. Закрывающиеся теги в html обозначаются слешем и пишутся так . Непарные же теги не требуют закрывающегося тега. Примером таких тегов являет тег переноса на следующую строку
. Так же существуют теги обязательные, которые должны обязательно использоваться на всех страницах, и необязательные, которые используются пожеланию.
Идентификатор конца абзаца.
- идентификатор перевода строки.
- идентификатор изображения горизонтальной линии.
Эти теги одиночные, т.е. непарные, они не требуют тегов с косой
чертой.
Установка равноширинного шрифта. В конце нужен тег .
Рассмотрим парные теги форматирования заголовков и подзаголовков
документа: , , , , , . При этом заголовки
будут выведены большими буквыми, причем размер букв у тега
будет самый большой, у меньше, у еще меньше и т.д.
Рассмотрим парные теги форматирования символов текста:
- идентификатор полужирного шрифта.
- идентификатор выделенного шрифта.
- идентификатор курсива.
- идентификатор подчеркивания.
- идентификатор перечеркивания.
- идентификатор равноширинного шрифта (телетайпного или курьера).
- задает увеличенный размер шрифта.
- задает уменьшенный размер шрифта.
- задает центрирование текста.
- задает нижний индекс.
Пример: x1+x2=x3
- задает верхний индекс.
Пример: Теорема Пифагора a2+b2=c2
Просмотр примера с тегами форматирования текстового потока.
Рассмотрим теги форматирования абзацев:
Выравнивание текста в абзаце по левому краю.
Выравнивание текста в абзаце по правому краю.
Выравнивание текста в абзаце по центру.
Полное выравнивание по обоим краям экрана. align - атрибут выравнивания. Рассмотрим теги списков. Они являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Броузер автоматически генерирует номера для каждого пункта в списке. - идентификатор упорядоченного списка. В конце . Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять специальный списочный значок (точка).
- - идентификатор неупорядоченного списка. В конце
Основная масса контента, представленного в интернете — это веб-страницы. Это исторически самый первый тип документов, предназначенных для размещения в виртуальном сетевом пространстве, но до сих пор сохранивший актуальность и практически не имеющий конкурирующих форматов. Какова структура веб-страниц? С помощью каких средств веб-разработки они создаются?
Что представляет собой Web-страница?«Перечислите основные элементы Web-страницы» - говорит нам экзаменатор на уроке информатики. Что мы сможем сказать ему в ответ? Прежде всего повествуем о том, что собой представляет веб-страница в принципе.
Согласно общепринятому в среде IT-специалистов определению, это документ, который предназначен для открытия в специализированной программе — браузере, и который содержит данные для отображения на экране компьютера с помощью соответствующего типа ПО различного полезного контента — текстов, ссылок, графики, видео, музыки и т. д. Web-страница — это текстовый документ. Соответствующие данные для браузера представляют собой буквы, цифры и специальные символы, используемые как элементы языка разметки — HTML. Именно с помощью него создатель веб-страницы «объясняет» браузеру, каким образом отображать на экране тот или иной контент.
Место и роль веб-страниц в структуре сайтовМожно ли сказать, что Web-страница — это основной компонент веб-сайта? Отчасти это верно. Однако, как мы отметили выше, веб-страница — это всего лишь текстовый документ. На сайте же, как правило, также располагаются картинки, видео и иные мультимедийные элементы. Веб-страница вместить их в себя не может, однако в своей структуре она может содержать ссылки на них. Таким образом, веб-страницу можно назвать основным компонентом сайта в аспекте главенствующей роли в отображении виртуального контента перед пользователями.
В редких случаях, конечно, рассматриваемый документ будет единственным компонентом сайта — если на нем по каким-то причинам не предусмотрено отображения графики, видео и иных мультимедийных элементов. В частности, самые первые сайты — когда языки разметки Web-страниц только появились, - не включали соответствующего контента. Перед глазами пользователя был только текст и ссылки.
Принцип задействования гипертекстаИтак, Web-страницей называется документ, составленный на языке HTML, с помощью которого осуществляется разметка гипертекста. Но что это за явление? Что такое гипертекст? Не углубляясь сильно в теорию, отметим, что это текст, который тем или иным образом позволяет получить быстрый доступ к другому — посредством ссылок. В обычной книге это невозможно — там «простой текст». Для получения доступа к нужной странице читатель должен совершить несколько перелистываний, до этого ознакомившись с содержанием или сносками. В режиме «гипертекста» основную часть работы совершает компьютер — за счет сведений, отражаемых в HTML-элементах страницы.
Если преподаватель информатики говорит нам: "Перечислите основные элементы Web-страницы", то мы совершенно корректным образом можем начать повествование о компонентах соответствующего документа, которые создаются с помощью языка разметки HTML. Поэтому для начала рассмотрим некоторые теоретические моменты, касающиеся HTML.
Структура языка HTML: тегиКаким образом браузер считывает нужные данные о веб-странице из документа, составленного на языке HTML? Очень просто.
Основные элементы данного языка — это теги. Они в большинстве случаев парные — есть открывающий, а есть закрывающий. Первые обозначаются с помощью только угловых скобок. Вторые — аналогично, но перед второй скобкой ставится слэш — символ /. Браузер умеет их распознавать, и потому без проблем отображает содержимое веб-страниц в соответствии с алгоритмами, создаваемыми разработчиком документа.
Открывающий тег пишется обычно большими буквами, закрывающий — маленькими. Это — стандарт, устоявшийся в среде IT-специалистов. Браузер, безусловно, распознает HTML-команду любыми буквами, но веб-разработчикам рекомендуется все же придерживаться отмеченной схемы написания тегов. Это облегчит, например, доработку веб-страницы другими специалистами.
АтрибутыДругие важнейшие элементы HTML-языка — атрибуты. С их помощью создатель веб-страницы может задавать свойства контента — например, высоту шрифта, его цвет, положение относительно страницы. То же самое касается картинок, видео и иных мультимедийных компонентов. Атрибуты пишутся в пределах открывающего тега.
СодержимоеМежду открывающим и закрывающим тегом располагается следующий ключевой компонент веб-страницы — содержимое. Это, собственно, тот самый контент, который должен отображаться перед пользователем на экране. Этом может быть текст, ссылка, картинка, видео или иной мультимедийный элемент.
Элементы веб-страниц«Так перечислите основные элементы Web-страницы, наконец!» - повторяет преподаватель. "С удовольствием," — отвечаем мы ему. Что же входит в структуру рассматриваемого типа документов? Условимся, что будем рассматривать данный аспект в именно контексте HTML-элементов веб-страницы. То есть их отображение в браузере — то, что пользователь видит на экране - нас будет интересовать в меньшей степени. Дело в том, что соответствующие HTML-алгоритмы, на основе которых программа отображает контент одинаково, могут быть разными. И в этом особенность языка HTML: нужное изображение на Web-странице можно вывести разными способами. При этом они могут быть как равнозначными с точки зрения трудозатрат создателя веб-страницы способами, так и предполагать разный объем усилий и времени на их осуществление.
Элементы веб-страниц: заголовокСтандартные элементы Web-страницы, как бы это удивительно ни звучало, представлены в очень небольшом количестве. По сути, их только два — заголовок и основная часть документа. Вместе с тем каждый из них может иметь достаточно сложную структуру.
Какова специфика заголовка? Располагается он в самой верхней части веб-страницы. В HTML-коде, который формирует заголовок, как правило, предполагается «шифрование» только текста, но при необходимости в соответствующем элементе можно также размещать небольшие графические вставки. И это, собственно, все, что можно сказать о заголовке. Казалось бы, его роль в структуре соответствующего документа незначительна. Но это не так. Заголовки веб-страниц очень значимы с точки зрения индексации сайтов в поисковых системах — Яндексе, Google. Данный элемент должен быть полностью релевантен содержанию веб-страницы, а также тематической специфике сайта.
Каким образом заголовок веб-страницы фиксируется с помощью языка HTML? Очень просто. Сначала пишется открывающий тег, который всегда выглядит как HEAD с угловыми скобками, затем — содержание заголовка, после — закрывающий тег. Пишутся они, разумеется, в самом верхней части веб-документа.
Заголовок веб-документа может включать ряд дополнительных элементов. Иногда формат Web-страницы может требовать отображения текста в конкретной кодировке. Как обеспечить соответствие веб-документа этому критерию? Очень просто. В структуре заголовка документа должны быть размещены HTML-алгоритмы, предписывающие браузеру использовать конкретную кодировку языка — например, кириллическую. Соответствующие команды размещаются в рамках тега META, который, так же как и другие, бывает открывающим и закрывающим.
Основная часть веб-страницыОсновная часть веб-документа открывается тегом BODY, закрывается же с помощью соответствующего элемента, включающего слэш. При этом между открывающим и закрывающим тегами может быть огромное количество дополнительных команд языка разметки гипертекста. Это связано с тем, что в основной части веб-страницы размещено ее полезное содержимое — тексты, ссылки, графика, видео, различные формы для заполнения.
Каждый из соответствующих видов контента имеет собственные теги. В структуре основной части веб-документа могут присутствовать HTML-команды, с помощью которых осуществляется также форматирование текста — например, придание шрифту определенного цвета, размера и иных свойств.
Рассмотрим то, какова специфика некоторых часто используемых HTML-тегов. Собственно, они же и формируют основные элементы веб-страницы.
Базовые HTML-тегиИтак, с целью подробного исследования того, что представляют собой элементы Web-страницы, изучим подробнее сущность базовых HTML-тегов. Некоторые из них мы уже привели выше — в частности те, с помощью которых браузер считывает заголовки веб-страниц и определяет, где располагается основная часть документа.
Достаточно распространен тег P. Он, как и другие аналогичные элементы языка разметки гипертекста, может быть открывающим и закрывающим. Данный тег позволяет форматировать отдельно взятый абзац документа. Можно, например, задавать для него определенный тип шрифта или его цвет. Однако это осуществляется с помощью дополнительного тега - FONT. При этом размещаться он будет внутри того, который обозначает пределы абзаца — это позволит не распространять HTML-команду, отражающую тип предпочтительного шрифта, на другие элементы веб-страницы.
С помощью тега TABLE создаются таблицы. При помощи соответствующих ему атрибутов можно определять необходимое количество столбцов и строк, задавать их ширину, специфику границ, размер и цвет шрифта текста в таблице.
Отвечает за обработку браузером картинок. В нем также можно размещать различные атрибуты, регулирующие размер картинки, ее положение на странице.
Ссылки на другие веб-документы или файлы указываются с помощью тега A. Как правило, внутри него располагаются атрибуты, которые обозначают тот факт, что в структуре веб-страницы — гиперссылка. При этом указывается документ, файл или сайт, на который она ведет.
Распространен такой тег, как FRAMESET. С его помощью можно разделить пространство веб-страницы на несколько областей — фреймов. В каждом из них можно на отдельные веб-документы. То есть фреймы позволяют корректно расположить на одном экране одновременно две и более страницы.
Рассказ о ключевых элементах веб-страниц и последующее повествование о средствах их форматирования с помощью языка HTML - примерно таким будет алгоритм нашего ответа на вопрос, который нам задал экзаменатор. Если он обратился к нам, сказав «перечислите основные элементы Web-страницы», то мы, используя соответствующую методологию, будем иметь все шансы раскрыть тему. То есть под термином «элементы» мы можем понимать ключевые компоненты структуры веб-документа, либо типы содержимого — текст, картинки, таблицы, фреймы, ссылки, которые веб-мастер формирует с помощью такого инструмента, как язык HTML.
Специфика инструментов веб-разработкиВ дополнение к сказанному мы можем пояснить, что тегов и атрибутов, предусмотренных стандартами HTML — огромное количество. Кроме HTML веб-разработчиками могут использоваться дополнительные средства форматирования гипертекстовых документов. Например, с помощью JavaScript можно создавать динамические Web-страницы — то есть те, в которых контент постоянно обновляется (как за счет действий самого пользователя, так и в соответствии с заранее прописанными в скриптах алгоритмами).
Полезно будет добавить, что веб-разработчик может задействовать в своей работе полноценные языки программирования, такие как, например, Perl, PHP, Java, Python, с помощью которых возможности работы с гипертекстовыми документами становятся еще шире. Необходимость в этом может быть связана с тем, что области применения веб-технологий сегодня — самые разные. Задачи, которые стоят перед современными разработчиками, могут быть достаточно сложными. Например, иногда требуется осуществить перевод Web-страниц, написанных на русском языке, на английский. В этом случае инструментарий разработчика будет самым разнообразным.
