Основная масса контента, представленного в интернете — это веб-страницы. Это исторически самый первый тип документов, предназначенных для размещения в виртуальном сетевом пространстве, но до сих пор сохранивший актуальность и практически не имеющий конкурирующих форматов. Какова структура веб-страниц? С помощью каких средств веб-разработки они создаются?
Что представляет собой 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-страниц, написанных на русском языке, на английский. В этом случае инструментарий разработчика будет самым разнообразным.
Когда вы загружаете из 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 и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.
Что такое HTML и CSS?HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.
Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.
При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.
Основные термины HTMLПеред началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.
ЭлементыЭлементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с до ) и абзацев (определены как
); в список можно включить элементы , , , и и многие другие.
Элементы идентифицируются с помощью угловых скобок , окружающих имя элемента. Таким образом, элемент будет выглядеть так:
ТегиДобавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.
Открывающий тег отмечает начало элемента. Он состоит из символа ; например, .
Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, .
Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег и закрывающий тег . Что находится между этими двумя тегами будет содержимым ссылки.
Так, теги ссылок будут выглядеть примерно так:
АтрибутыАтрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.
Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:
Shay Howe
Демонстрация основных терминов HTMLДанный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.
Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег
Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.
Настройка структуры документа HTMLHTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.
Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: , , и .
Объявление типа документа или находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто . После этого идёт элемент означающий начало документа.
Внутри элемент определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.
Всё видимое содержимое веб-страницы будет находиться в элементе . Структура типичного HTML-документа выглядит следующим образом:
Привет, мир! Привет, мир!
Это веб-страница.
Демонстрация структуры HTML-документаЭтот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент включает в себя заголовок через элемент и абзац текста через . Поскольку и заголовок и абзац вложены в элемент , они видны на веб-странице.
Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента и вложены и сдвинуты внутри элемента . Структура отступов для элементов продолжается с новыми добавленными элементами внутри и .
Самозакрывающиеся элементыВ предыдущем примере элемент был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. является одним из таких элементов. Содержимое элемента в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:
Приведённая структура, сделанная с помощью объявления типа документа и элементов , и , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.
Валидация кодаНезависимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.
На практикеВ качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!
Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.
Основные термины CSSВ дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.
СелекторыПри добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.
Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде или .
В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы
P { ... }
СвойстваКак только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам
P { color: ...; font-size: ...; }
ЗначенияПока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы
И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.
P { color: orange; font-size: 16px; }
Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.
Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.
Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения
Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.
Работа с селекторамиСелекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.
Селекторы типаСелекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы мы должны использовать селектор div . Следующий код показывает селектор типа для элементов , а также соответствующий HTML.
Div { ... }
... ...
КлассыКлассы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.
Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.
В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы и
Awesome { ... }
...
ИдентификаторыИдентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.
Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.
В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .
#shayhowe { ... }
...
Дополнительные селекторыСелекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.
Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.
Подключение CSSЧтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.
Другие варианты добавления CSSДругие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.
Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.
Внутри элемента применяется элемент , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.
В следующем примере HTML-документа элемент указывает на внешний стилевой файл.
Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.
Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.
На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.
Использование сброса CSSКаждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.
Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.
Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.
Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.
Кроссбраузерность и тестированиеКак упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта.
Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.
На практикеВернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.
Просматривая файл index.html в браузере мы можем видеть, что элементы и
Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .
Styles Conference
Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.
Рис. 1.04. Наш сайт Styles Conference со сбросом CSS
Демонстрация и исходный кодНиже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
РезюмеИтак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.
Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.
Напомним, что мы рассмотрели следующее:
- Разница между HTML и CSS.
- Знакомство с элементами HTML, тегами и атрибутами.
- Настройка структуры вашей первой веб-страницы.
- Знакомство с селекторами CSS, свойствами и значениями.
- Работа с селекторами CSS.
- Указатель на CSS из HTML.
- Важность CSS сброса.
Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.
Ресурсы и ссылки- Common HTML terms via Scripting Master
- CSS Terms & Definitions via Impressive Webs
- CSS Tools: Reset CSS via Eric Meyer
Идентификатор конца абзаца.
- идентификатор перевода строки.
- идентификатор изображения горизонтальной линии.
Эти теги одиночные, т.е. непарные, они не требуют тегов с косой
чертой.
Установка равноширинного шрифта. В конце нужен тег .
Рассмотрим парные теги форматирования заголовков и подзаголовков
документа: , , , , , . При этом заголовки
будут выведены большими буквыми, причем размер букв у тега
будет самый большой, у меньше, у еще меньше и т.д.
Рассмотрим парные теги форматирования символов текста:
- идентификатор полужирного шрифта.
- идентификатор выделенного шрифта.
- идентификатор курсива.
- идентификатор подчеркивания.
- идентификатор перечеркивания.
- идентификатор равноширинного шрифта (телетайпного или курьера).
- задает увеличенный размер шрифта.
- задает уменьшенный размер шрифта.
- задает центрирование текста.
- задает нижний индекс.
Пример: x1+x2=x3
- задает верхний индекс.
Пример: Теорема Пифагора a2+b2=c2
Просмотр примера с тегами форматирования текстового потока.
Рассмотрим теги форматирования абзацев:
Выравнивание текста в абзаце по левому краю.
Выравнивание текста в абзаце по правому краю.
Выравнивание текста в абзаце по центру.
Полное выравнивание по обоим краям экрана. align - атрибут выравнивания. Рассмотрим теги списков. Они являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Броузер автоматически генерирует номера для каждого пункта в списке. - идентификатор упорядоченного списка. В конце . Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять специальный списочный значок (точка).
- - идентификатор неупорядоченного списка. В конце
Создать качественную web-страницу непросто, для этого нужны не только навыки дизайнера для красивого и стильного оформления, но и опыт программирования. Сложность и объем программ, требуемых для создания того или иного сайта, зависят от множества факторов, таких как структура, цель, функциональность, обеспечение надежности и система защиты сайта от информационных атак со стороны информации-«прилипалы» (спам, мусор) и вирусов.
Web-технология (технология гипертекста) позволила связать всю совокупность опубликованных в Интернете документов в единую систему - WWW. Гипертекстовый документ содержит гиперссылки. Их обычно выделяют цветом и подчеркиванием. Гиперссылки позволяют пользователю немедленно перейти к нужному документу, независимо от места его физического расположения. Это существенно облегчает поиск информации в Интернете.
Использование гипертекстовой разбивки текстового документа в современных информационных системах во многом связано с тем, что гипертекст дает возможность создавать механизм нелинейного просмотра информации. В таких системах данные представляются не в виде непрерывного потока текстовой информации, а набором взаимосвязанных компонентов, переход по которым осуществляется с помощью гиперссылок.
Если говорить о создании документов HTML , то можно представить себе два способа их формирования.
Первый состоит в разметке существующего (или создаваемого) документа вручную. При этом автор или редактор добавляет в документ теги разметки. Эту работу можно выполнять в текстовом редакторе или редакторе HTML, имеющем специальные элементы управления для упрощения ввода тегов. В обоих этих случаях работа ведется средствами языка HTML, и человек, выполняющий эту работу, должен знать и уметь применять этот язык.
Принципы другого подхода можно понять на основе изучения работы текстовых процессоров. Информацию о форматировании документа также можно рассматривать как «разметку», добавляемую в форматируемый документ. Однако для использования текстового процессора не требуется никаких знаний о формате документа и «языке разметки»: изменения, отображаемые на экране, вносятся в документ автоматически. Такой принцип соответствия экранного изображения реальному получил название WYSIWYG (вайсевег) (от английского What You See Is What You Get (воч ю си ис воч ю гат) - Что видите, то и получаете).
Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете использовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться демонстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe: www.adobe.com.
Первый способ позволяет создавать более универсальные, более качественные и более разнообразные документы. Второй способ проще освоить, так как он не требует знания языка HTML. Однако в этом случае используются средства форматирования вместо средств описания, что может иногда приводить к нежелательным последствиям.
Итак, для создания web-страниц вам понадобится текстовый или web- редактор. Надо отметить, что все web-редакторы обязательно содержат и текстовый редактор, web-редакторов сейчас существует большое количество, но самыми мощными признаны три:
1. Macromedia Dreamweaver (макромедиа дримвиваф);
2. Allaire HomeSite (аллер хом сайт);
3. Microsoft FrontPage (майкрософт фонт пейдж).
Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете использовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться демонстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe (эдоби): www.adobe.com. С помощью браузера следует зайти на указанный сайт в раздел Downloads/Trial Downloads и выбрать Macromedia, HomeSite.
Можно воспользоваться русской версией FrontPage Express из локализованного Internet Explorer - это сокращенный вариант FrontPage, но очень удобен для начала. На русском языке также известен web-редактор Visual Workshop (http://www.snkey.net/ download /products /index.html).
Современные сервисы в Интернете предлагают готовые конструкторы сайтов. Рассмотрим их на примере конструктора сайтов «Мой сайт» (www.narod.yandex.ru). С его помощью можно получить место под свой сайт (домашнюю страницу) и за 5 мин создать свой web-сайт с картинками, фотографиями и пр.
Процесс конструирования сайта включает в себя три этапа:
1. вход в конструктор сайта;
2. регистрация, назначение имени сайта;
3. конструирование сайта с использованием заготовок.
Для создания рукотворного сайта, единственного в своем роде, требуются иные web-инструменты.
Помимо HTML и конструкторов сайтов можно пользоваться и другими средствами программирования web-страниц. Одним из средств программирования сайтов является CGI (си джи ай) (Common Gateway, комон гейтвай).
Принцип CGI прост и естественен: программа на стороне сервера принимает некие данные, обрабатывает их и выдает ответ в виде web-страницы. Это очень частое явление на сегодняшний день, и порой даже не подозреваешь, что имеешь дело не с обычной страницей, а с результатом работы CGI-скрипта (кода). Область использования CGI широка, а цели разнообразны. Язык программирования, на котором пишется скрипт, должен быть гибким и в то же время мощным, так как предстоит не только постоянная работа с файлами, но и с БД, ОС и web-сервером. Самыми подходящими языками для CGI-программирования являются Си (C++) и Perl. Последний наиболее часто используется для этих целей из-за своей простоты, надежности и широты возможностей.
Язык Си по праву считается универсальным и нашел свое место в среде CGI. Его применение естественно в родной стихии - Unix, на основе которой в большинстве случаев и строится web-узел.
Для CGI-программирования используется также язык C++, который подразумевает создание и уничтожение неких объектов, реализуемых через классы, - по сути пользовательских типов данных. Естественно создать, например, класс Guestbook или DataBaseEntry, который содержал бы необходимые переменные и функции. Стоит заметить, что почти все новые языки программирования (Java, JavaScript, Perl) содержат конструкции, схожие с конструкциями Си или же являющиеся их точными копиями. Поэтому рекомендуется сначала изучить именно этот фундаментальный язык.
Язык Perl уникален. Во-первых, в нем отсутствуют типы данных, что благоприятно воздействует на написание CGI-скриптов. Во- вторых, очень много конструкций взято из Си. Надо отметить, что в Perl часто используются регулярные выражения, похожие на те, что применяются в сценариях Unix Shell. Имеется удобный цикл foreach и красивые, по сути, модификаторы выражений. Perl располагает стандартной библиотекой, в которой есть функции поиска, работы с web-сервером, графикой и т.п. Из этого можно сделать вывод, что для программиста, знакомого с Unix, не составит труда изучить Perl. Для написания такой программы достаточно уметь работать с файлами из Perl и, немного, с переменными окружения web-сервера.
Процесс создания Web-документов сродни программированию и так же подвержен ошибкам. Независимо от того, каким способом создается документ, следует регулярно проверять его соответствие замыслу, просматривая его в различных браузерах. Для художественной оценки получающейся страницы следует обратиться к независимому мнению.
Вопросы для самоконтроля:
1. Что означает понятие HTML-документ?
2. Каковы преимущества этого вида документа?
3. Что означает понятие «тэг»?
4. Какие разновидности тэгов существуют?
5. Что входит в состав объектов управления тэгами?
www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm
http://dvo.sut.ru/libr/ite/i280levc/index.htm Ю.П. Левчук, Е.П. Охинченко, А.Д. Сотников, Т.А. Фоменко ИНФОРМАТИКА Часть 2 ИНТЕРНЕТ-ТЕХНОЛОГИИ
1. Web-страница (документ HTML) представляет собой:
а) текстовый файл с расширением.txt или.doc;
б) текстовый файл с расширением.htm или.html;
в) двоичный файл с расширением.com или.exe;
г) графический файл с расширением.gif или.jpg.
2. Для просмотра Web-страниц в Интернете используются программы:
а) Microsoft Word или Word Pad;
б) Microsoft Access или Microsoft Works;
в) Internet Explorer или NetScape Navigator;
г) HTMLPad или Front Page.
3. Тег – это:
а) инструкция браузеру, указывающая способ отображения текста ;
б) текст, в котором используются спецсимволы;
в) указатель на другой файл или объект;
г) фрагмент программы, включённой в состав web-страницы.
4. Гипертекст – это:
а) текст очень большого размера
б) текст, в котором используется шрифт большого размера
