Веб страница html представляет собой. Создание веб страницы

Создать качественную 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 (майкрософт фонт пейдж).

Можно воспользоваться русской версией 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. Гипертекст – это:

а) текст очень большого размера

б) текст, в котором используется шрифт большого размера

Основная масса контента, представленного в интернете — это веб-страницы. Это исторически самый первый тип документов, предназначенных для размещения в виртуальном сетевом пространстве, но до сих пор сохранивший актуальность и практически не имеющий конкурирующих форматов. Какова структура веб-страниц? С помощью каких средств веб-разработки они создаются?

Что представляет собой 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-страниц, написанных на русском языке, на английский. В этом случае инструментарий разработчика будет самым разнообразным.

HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклиппов и музыки. Для просмотра Web-страниц можно использовать, например, MicroSoft Internet Explorer или NetScape Navigator, или Opera (просмотрщик или броузер). Язык HTML позволяет: 1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете; 2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка). Существуют три основных способа создания Web-страниц (или документов HTML): 1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим. Технология этого способа создания Web-страницы такова: В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer. 2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др. 3) Использование редактора Word-97, где создается текст документа, который затем конвертируется в HTML-формат. Рассмотрим основные понятия языка HTML. 1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов. 2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например: . Конечный тег всегда снабжается косой чертой: . 3. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому. 4. Фрейм - область гипертекстового документа со своими полосами прокрутки. 5. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы. 6. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей. 7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента. UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании). Рассмотрим общую структуру типичного простейшего документа HTML: Комментарий Название документа Здесь расположен текст самого документа HTML. Просмотр простейшего документа HTML Дадим пояснения указанным тегам документа HTML. или - Комментарий к документу. Он игнорируется броузером. Комментарий не является обязательным и может отсутствовать. - идентификатор всего блока HTML-команд. - идентификатор заголовка документа HTML. - идентификатор заголовка окна просмотра. <META> - этот непарный тег применяется для указания подробной информации о документе. <BODY> - идентификатор HTML-команд документа для просмотра. Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру основную информацию для идентификации и организации документа. Все указанные теги - парные, то есть каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой буквы, так и с большой. <u>Рассмотрим теги форматирования текстового потока: </u> <P>Идентификатор конца абзаца. <BR> - идентификатор перевода строки. <HR> - идентификатор изображения горизонтальной линии. Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой. <PRE>Установка равноширинного шрифта. В конце нужен тег </PRE>. Рассмотрим парные теги форматирования заголовков и подзаголовков документа: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. При этом заголовки будут выведены большими буквыми, причем размер букв у тега <H1> будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д. Рассмотрим парные теги форматирования символов текста: <B> - идентификатор полужирного шрифта. <strong> - идентификатор выделенного шрифта. <i> - идентификатор курсива. <U> - идентификатор подчеркивания. <s> - идентификатор перечеркивания. <tt> - идентификатор равноширинного шрифта (телетайпного или курьера). <big> - задает увеличенный размер шрифта. <small> - задает уменьшенный размер шрифта. <CENTER> - задает центрирование текста. <sub> - задает нижний индекс. Пример: x<sub>1</sub>+x<sub>2</sub>=x<sub>3</sub> <sup> - задает верхний индекс. Пример: Теорема Пифагора a<sup>2</sup>+b<sup>2</sup>=c<sup>2 Просмотр примера с тегами форматирования текстового потока. <u>Рассмотрим теги форматирования абзацев: </u> <p align=left>Выравнивание текста в абзаце по левому краю. <p align=right>Выравнивание текста в абзаце по правому краю. <p align=center>Выравнивание текста в абзаце по центру. <p align=justify>Полное выравнивание по обоим краям экрана. align - атрибут выравнивания. <u>Рассмотрим теги списков. </u> Они являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Броузер автоматически генерирует номера для каждого пункта в списке. <OL> - идентификатор упорядоченного списка. В конце </OL>. Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять специальный списочный значок (точка). <UL> - идентификатор неупорядоченного списка. В конце </UL>. Отдельные элементы в упорядоченном и неупорядоченном списках помечают одиночным тегом <LI>, а элементы в списках определений <DL> тегами <DT> для термина и <DD> для значения термина. <LI> - идентификатор элемента в упорядоченном и неупорядоченном списке. Конечный тег </LI> может быть опущен. Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний. <DL> - идентификатор списка определений. В конце </DL>. <DT> - идентификатор термина в списке определений. <DD> - идентификатор значений термина в списке определений. Списки определений имеют вид: <DL> <DT> название термина 1 <DD> определение термина 1 <DD> другое определение термина 1 ..... </DL> Применение тегов списков изложено в Примерах 4 и 5. Просмотр примера с тегами списков. <u>Некоторые важнейшие теги HTML </u> <BODY bgcolor="teal" text="aqua" link="red"> - задает цвет текста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link). Задают еще alink="" и vlink="" -цвета активной и посещенной ссылки. <BODY background="back.jpg"> - задает фоновый рисунок (обои) на Web- странице в файле back.jpg. <BODY background="/windows/tartan.bmp"> - фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла. <font color="yellow" size=5> - задает цвет символов текста (атрибут color) и их размер (атрибут size). В конце нужен тег </font>. <hr color="lime"> - задает цвет горизонтальной линии. <hr color="red" size=3 width=220 align=center> - атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселах; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо). <img src='/browsers/veb-stranica-html-predstavlyaet-soboi-sozdanie-veb-stranicy.html' loading=lazy> - вставка графического изображения в виде файла lycos.gif. Есть и анимационные gif-файлы. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp. <p>Что такое web страница ? Это документ, написанный на языке разметки гипертекста (<span>HTML </span>), который можно просмотреть с помощью браузера. Доступ к веб-странице осуществляется путем ввода URL-адреса .</p> <p>Веб-страница может содержать текст, графику и гиперссылки на другие страницы и файлы.</p> <h2>Как открыть веб-страницу</h2> <p>Для просмотра веб-страницы требуется браузер (<span>например, Internet Explorer , Edge , Safari , Firefox или Chrome </span>). В браузере можно открыть веб-страницу, указав в адресной строке URL-адрес . Например, введя «<span>https://www.computerhope.com/esd.htm </span>», вы откроете страницу ESD Computer Hope .</p> <p>Если вы не знаете URL-адреса сайта, который хотите посетить, можно использовать поисковую систему, чтобы найти веб-страницу или воспользоваться поиском по сайту.</p> <h3>Когда была создана первая веб-страница?</h3> <p>Первая веб-страница была создана в <span>CERN Тимом Бернерсом-Ли </span> 6 августа 1991 года. Перед тем, вы можете посетить и просмотреть первый сайт и первую веб-страницу по адресу http://info.cern.ch/ .</p> <h3>В чем разница между сайтом и веб-страницей?</h3> <p>Сайт — это место, содержащее более одной веб-страницы. Например, наш ресурс является сайтом, который включает в себя тысячи различных веб-страниц, включая ту, которую вы сейчас читаете:<br><br> В приведенном выше примере URL-адреса «url.htm» — веб-страница, это всегда последняя часть URL-адреса . Для URL , которые не имеют окончаний .htm , .html , .php , .cgi , .pl или другого расширения файла, сервер загружает веб-страницу index.htm по умолчанию. Например, для URL-адреса страницы контактов нет веб-страницы. В этом случае загружается индексный файл по умолчанию из каталога /contact .</p> <h3>Примеры веб-страницы</h3> <p>Мы уже упоминали, что для просмотра web страниц используются браузеры. Веб-страница состоит из нескольких элементов, включая CSS , изображения и JavaScript . Тело веб-страницы создается с использованием HTML . Этот код может быть создан с использованием HTML-редактора, написан человеком или сгенерирован с использованием серверных скриптов. Обычно веб-страница, созданная человеком, заканчивается расширением .htm или .html . Например, эта страница имеет имя файла «<span>webpage.htm </span>». Страницы, сгенерированные скриптом, могут заканчиваться на .cgi , .php , .pl и т.д.</p> <h3>Какие элементы содержит веб-страница?</h3> <p>Ниже приведена разбивка основных элементов, чтобы веб-дизайнеры могли понять, какова логическая <span>структура web страницы </span>:<br></p> <ol><li>Название сайта, логотип или название компании почти всегда находятся в верхнем левом углу каждой веб-страницы. Также неплохо использовать слоган или краткое описание страницы, чтобы дать новым посетителям представление о сайте. Этот элемент веб-страницы обычно является ссылкой, которая ведет на главную страницу;</li> <li>Панель поиска позволяет посетителям быстро найти веб-страницу. Она должна присутствовать на каждой странице;</li> <li>Панель или меню навигации обычно находится в верхней или левой части каждой веб-страницы. Она и должна включать в себя ссылки на каждый из основных разделов сайта;</li> <li>Рекламные баннеры могут отображаться в разных местах на веб-странице. Обычно они отображаются в верхней, левой, правой или нижней части веб-страницы или включены в основной контент;</li> <li>Социальные кнопки позволяют посетителям делиться ссылкой на веб-страницу на сайтах социальных сетей;</li> <li>В созданных web страницах хлебные крошки помогают посетителю понять, где он находится, а также перейти к другим разделам сайта;</li> <li>Заголовок должен находиться в верхней части каждой веб-страницы. Он создается с использованием HTML-тега <h1>.</li> <li>Начальный абзац является одним из наиболее важных элементов веб-страницы. Он должен заинтересовать посетителя ознакомиться с содержимым веб-страницы. Один из способов привлечь внимание посетителей — вставить изображение рядом с начальным абзацем;</li> <li>Каждая веб-страница должна быть разбита на заголовки более низкого уровня, которые позволяют посетителю легко просматривать контент и находить на странице то, что ему наиболее интересно. При создании веб-страницы это можно сделать с помощью HTML-тегов <h2> … <h6>;</li> <li>Хорошая идея — предоставить посетителям ссылку или кнопку, перенаправляющую на форму обратной связи, чтобы они могли сообщить, была ли полезна им данная веб-страница или нет;</li> <li>Дополнительная информация и инструменты, такие как кнопка для вывода страницы на печать, также могут быть полезны для пользователей;</li> <li>Футер должен включать в себя дополнительную информацию, которая важна для компании или сайта. А также ссылки на другие веб-страницы;</li> <li>Копирайт и любое юридическое или конфиденциальное уведомление также должны быть размещены на всех веб-страницах. В основах проектирования web страниц этот элемент не только может ссылаться на соответствующую юридическую информацию. Он также указывает, что посетители достигли конца веб-страницы;</li> <li>Кнопка «Вверх страницы » может помочь посетителям быстро вернуться к верхней части веб-страницы, чтобы получить доступ к ссылкам меню.</li> </ol><h3>Что пользователи могут сделать на веб-странице?</h3> <p>На большинстве веб-странице есть интересные гиперссылки, по которым вы переходите, чтобы найти дополнительную информацию. Также можно слушать музыку, смотреть видео, совершать покупки, общаться и многое другое.</p> <p>Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.</p><h2>Что такое HTML и CSS?</h2><p>HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.</p><p>Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.</p><p>При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.</p><h2>Основные термины HTML</h2><p>Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.</p><h3>Элементы</h3><p>Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6> ) и абзацев (определены как <p> ); в список можно включить элементы <a> , <div> , , <span><strong> и <em> и многие другие.</p><p>Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:</p><h3>Теги</h3><p>Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.</p><p>Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div> .</p><p>Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div> .</p><p>Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a> и закрывающий тег </a> . Что находится между этими двумя тегами будет содержимым ссылки.</p><p>Так, теги ссылок будут выглядеть примерно так:</p><p> <a>...</a> </p><h3>Атрибуты</h3><p>Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.</p><p>Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a> с атрибутом href будет выглядеть следующим образом:</p><p> Shay Howe </p><h3>Демонстрация основных терминов HTML</h3><p>Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега <a> и закрывающего тега </a> охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.</p><p>Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег</p><p>Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.</p><h2>Настройка структуры документа HTML</h2><p>HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.</p><p>Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html> , <html> , <head> и <body> .</p><p>Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html> . После этого идёт элемент <html> означающий начало документа.</p><p>Внутри <html> элемент <head> определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента <head> не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.</p><p>Всё видимое содержимое веб-страницы будет находиться в элементе <body> . Структура типичного HTML-документа выглядит следующим образом:</p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Привет, мир!

Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р> . Поскольку и заголовок и абзац вложены в элемент <body> , они видны на веб-странице.</p><p>Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html> . Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body> .</p><h3>Самозакрывающиеся элементы</h3><p>В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html> , <head> и <body> , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.</p><h3>Валидация кода</h3><p>Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.</p><h2>На практике</h2><p>В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.</p><h2>Основные термины CSS</h2><p>В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.</p><h3>Селекторы</h3><p>При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.</p><p>Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р> .</p><p>В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <span><p>P { ... } </p><h3>Свойства</h3><p>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам <span><p>P { color: ...; font-size: ...; } </p><h3>Значения</h3><p>Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p >И устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.</p><p>P { color: orange; font-size: 16px; } </p><p>Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.</p><p>Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения</p><p>Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.</p><h2>Работа с селекторами</h2><p>Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.</p><h3>Селекторы типа</h3><p>Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div . Следующий код показывает селектор типа для элементов <div> , а также соответствующий HTML.</p><p>Div { ... } </p><p> <div>...</div> <div>...</div> </p><h3>Классы</h3><p>Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.</p><p>Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.</p><p>В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы <div> и <span><p>Awesome { ... } </p><p> <div class="awesome">...</div> </p><h3>Идентификаторы</h3><p>Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.</p><p>Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.</p><p>В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id . Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe .</p><p> #shayhowe { ... } </p><p> <div id="shayhowe">...</div> </p><h3>Дополнительные селекторы</h3><p>Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.</p><p>Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.</p><h2>Подключение CSS</h2><p>Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head> применяется элемент <link> , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.</p><p>В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.</p><p>Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.</p><p>На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.</p><h2>Использование сброса CSS</h2><p>Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.</p><p>Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.</p><p>Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.</p><p>Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.</p><h3>Кроссбраузерность и тестирование</h3><p>Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта.</p><p>Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.</p><h2>На практике</h2><p>Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.</p><ol><li>Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.</li><li>Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.</li><p>Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p>Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.</p><p> /* 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; }</p><li>Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head> , сразу после элемента <title> .</li><li>Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet .</li><p>Мы также включим ссылку на наш файл main.css используя атрибут href . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href , который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>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

Категории

Популярное