Главная-Строительство-Создание web страницы с помощью html. Создание Web-страницы с помощью языка HTML

Создание web страницы с помощью html. Создание Web-страницы с помощью языка HTML

Язык разметки гипертекстовых страниц (HTML - Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте http://www.3w.org/. В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.

На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут, как входить, так и не входить в состав действующей спецификации HTML.

Информации о тегах HTML Compendium (краткое руководство по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров.

Документы HTML являются обычными текстовыми ASCII-файлами. Это означает, что для их создания можно использовать любой текстовый редактор, даже с минимальными возможностями. Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту. Редакторы HTML отличаются от авторского WYSIWYG-инструментария (рассматриваемого далее) тем, что требуют знания правил составления HTML вручную, редакторы лишь упрощают и ускоряют этот процесс.

Пользователям Windows определенно следует проверить HomeSite, мощный и недорогой редактор HTML компании Allaire Corporation. В нем имеются средства для выделения цветами синтаксических конструкций HTML, функция FTP, контроль синтаксиса и правописания, многофайловый поиск и замещение. Кроме того, он содержит специальные команды и шаблоны для создания более сложных элементов (фреймов, сценариев JavaScript и DHTML).

При работе на компьютерах Macintosh обращают внимание на BBEdit, коммерческий HTML-редактор компании Bare Bones Software, Inc. Он действительно имеет вес среди Web-разработчиков для компьютеров Macintosh. В его состав входят удобные и быстрые HTML-инструменты, многофайловый поиск и замена, встроенная FTP-функция, поддержка 13 языков программирования, построитель таблиц, контроль синтаксиса HTML и еще множество функций.

Последние годы характеризуются резким ростом рынка авторских инструментов. HTML-редакторы класса WYSIWYG (What You See Is What You Get - что видишь, то и получишь) имеют графические интерфейсы, которые делают написание HTML больше похожим на программу редактирования текстов или разметки страницы. Первоначальной целью этих программ было освобождение пользователей от тегов HTML, наподобие того, как программы разметки страниц защищают разработчика от набора команд языка PostScript. Сегодня их значимость возросла, так как они повышают эффективность и уровень автоматизации производства документов, обеспечивая в то же время доступ к исходному тексту HTML.

Наиболее популярными в настоящее время WYSIWYG-редакторами являются: Macromedia DreamWeaver, Golive CyberStudio (только для компьютеров Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.

Документ HTML содержит текст (содержимое страницы) и встроенные теги - инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок - head и тело - body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержим документа (то, что выводится в окне браузера).

Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег будет работать так же, как . Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

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

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

В некоторых случаях конечный тег не обязателен, и браузер определяет конец тега из контекста. Чаще всего опускают конечный тег <р> (абзац). Браузеры раньше поддерживали этот тег без соответствующего завершения, поэтому многие авторы Web привыкли использовать краткую форму. Это разрешено не всем тегам, и не все браузеры прощают их отсутствие. Поэтому, если есть сомнения, включите в текст закрывающий тег. Это особенно важно, когда в документе вы используете каскадные таблицы стилей.

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

) и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как и .

Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных). Правила записи значения следующие:

  • - если значение представляет собой одно слово или число и состоит только из букв (a-z), цифр (0-9) и специальных символов (точка <.>
  • - если значение содержит несколько слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы "://". Также кавычки необходимы при задании значений цветов с использованием формата "#rrggbb".

Если вы не уверены, стоит ли использовать кавычки, используйте их всегда для всех значений.

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

Часто встречающейся ошибкой является перекрытие тегов. Хотя часть браузеров отображают содержимое, отмеченное таким образом, многие не разрешают нарушать правило, поэтому важно размешать теги правильно. Следующий пример показывает неверное вложение тегов (заметьте, что тег <В> закрывается перед закрытием ):

The weather is gorgeoustoday - данная информация, игнорируемая браузерами.

Информация, игнорируемая браузерами. Ниже приводится информация, содержащаяся в документе HTML, включая, определенные теги, которая будет игнорироваться при просмотре браузерами. В ее состав входят:

  • - разрывы строк. Символы конца строк в документе HTML игнорируются. Текст и элементы будут переноситься до тех пор, пока в потоке текста документа не встретится тег
  • - символы табуляции и множественные пробелы. Когда браузер встречает в документе HTML символ табуляции и несколько последовательных символов пробела, он выводит только один пробел. Таким образом, если документ содержит: "far, far away", браузер выведет "far, far away". Дополнительные пробелы можно добавить в текстовый поток, используя символ неразрывного пробела (Snbsp;). Кроме того, все пробелы выводятся, если текст является форматированным (находится в тегах
  • - множественные
  • - нераспознаваемые теги. Если браузер не понимает тег или тот был неверно задан, то браузер его просто игнорирует. В зависимости от тега и браузера это может привести к различным результатам. Либо браузер ничего не выведет, или он может отобразить содержимое тега как обычный текст;
  • - текст в комментариях. Браузеры не выводят текст между специальными элементами

Введение

1. Основные сведения

1.1 О языке html

1.2 Создание web сайта

1.3 Основные положения

1.4 Структура документа

1.5 Тэги тела документа

1.6 Список базовых тэгов html

2. Дополнительные сведения

2.1 Тэги списков

2.3 Графика внутри документа

2.4 Добавление стилей в документ

2.5 Специальные тэги html

2.6 Html формы

2.7 Html фреймы

2.8 Html таблицы

2.9 Оптимизация графики для web

2.10 Основы css

3. Описание создания сайта

3.1 Подготовка

3.2 Создание главной страницы

3.3 Создание второй страницы

3.4 Создание страницы с описанием города

3.5 Страница с фотографиями

3.6 Страница с программами

3.7 Страница с благодарностями

Заключение

Список использованной литературы

Введение

Эта дипломная работа посвящена языку HTML. С помощью этого языка создаются файлы с расширением *.htmи *.html, являющиеся Web-страницами. Из них состоят сайты сети Интернет.

К дипломной работе прикреплён сайт, как пример того, что можно создать при помощи языка HTML.

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

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

1.1 О языке HTML

Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

В большинстве случаев автор документа строго определяет внешний вид документа. В случае HTML читатель, основываясь на возможностях WEB-броузера, может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку. Пользователи некоторых WEB-броузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.

HTML-тэги могут быть условно разделены на две категории:

1. Тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.

2. Тэги, описывающие общие свойства документа, такие как заголовок или автор документа.

Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

1.2 Создание Webсайта

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

Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

Заголовок документа

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

Некоторые тэги, такие, как

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

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

Заголовок документа

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

И
. Более подробно о тэгах 
Будет написано ниже.
 
Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом . Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:
 
Тело документа...
 
Заголовочная часть документа . Тэг заголовочной части документа должен быть использован сразу после тэга  и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга . Стартовый тэг  помещается непосредственно перед тэгом  и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:</p> <p><TITLE>Список сотрудников
 
Внимание! Технически, стартовые и завершающие тэги типа ,  и  необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.
 
Заголовок документа . Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и , размещается внутри -тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.


Разработка Web-сайтов с использованием языка разметки гипертекста HTML

 
Web-страницы и Web-сайты


Web-страницы.
 Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.


Основными достоинствами Web-страниц являются:

- малый информационный объем;

- возможность просмотра в различных операционных системах.


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


Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").


Web-сайты.
 Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.


Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.


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


Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).


Контрольные вопросы



1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?


2. Каким образом Web-страницы объединяются в Web-сайты?


Структура Web-страницы


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


Заголовок Web-страницы заключается в контейнер  и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.


Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером
).


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


Название страницы помещается в контейнер  и при просмотре отображается в верхней строке окна браузера.


Отображаемое в браузере содержание страницы помещается в контейнер  (рис. 6.26):





<ТITLE>Компьютер





Компьютер и ПО









Рис. 6.26. Заготовка Web-страницы "Компьютер"


Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.


Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.


Контрольные вопросы



1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?



6.10. Практическое задание. Создать заготовку Web-страницы "Компьютер" и просмотреть ее в браузере.


Форматирование текста на Web-странице


Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.


Заголовки.
 Размеры шрифтов заголовков задаются парами тэгов от <Н1> (самый крупный) до <Н6> (самый мелкий).


Шрифт.
 Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).


Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.


Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".


Выравнивание текста.
 Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".


Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:




<Н1 ALIGN="center">Компьютер и ПО




Горизонтальная линия.
 Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга 
.


Абзацы.
 Разделение текста на абзацы производится с помощью контейнера <Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.


Домашняя страница сайта.
 На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Компьютер" текст, разбитый на абзацы с различным выравниванием:


<Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. 

<Р ALIGN= "right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.


Таким образом, домашняя страница сайта "Компьютер" будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):




<Н1 ALIGN="center">

Компьютер и ПО








<Р ALIGN="left">Ha этом сайте...

<Р ALIGN ="right"> Терминологический словарь

...





Рис. 6.27. Web-страница "Компьютер" с отформатированным текстом


Контрольные вопросы



1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?


Задания для самостоятельного выполнения



6.11. Практическое задание. Создать Web-страницу "Компьютер" с отформатированным текстом и просмотреть ее в браузере.


Вставка изображений в Web-страницы


На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.


Вставка изображений.
 Для вставки изображения используется тэг  с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:




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




Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:




Положение рисунка относительно текста.
 Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).


На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):







Рис. 6.28. Вставка изображения в Web-страницу "Компьютер"


Вставка альтернативного текста.
 Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.


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




Контрольные вопросы



1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?


Задания для самостоятельного выполнения



6.12. Практическое задание. Вставить в Web-страницу "Компьютер" изображение и просмотреть ее в браузере.


Гиперссылки на Web-страницах





Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:



Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:


<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки


Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.


  • к просмотру изображения в браузере:
    
<А HREF="picture.jpg">Изображение
  • к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
    
<А HREF="sound.wav">Звук
  • к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
    
<А HREF="Apxив.ziр">Скачать файл
    • 

Панель навигации по сайту.
 Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:






<ТITLЕ>Заголовок страницы





 


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


Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.


Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:


<Р ALIGN="center">

[<А HREF="software . htm">Программы]   

[Словарь]   

[Комплектующие]  

[Aнкетa] 




Гиперссылка на адрес электронной почты.
 Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер 
, который задает стиль абзаца, принятый для указания адреса:




<А HREF="mailto:[email protected]">E-mail:

[email protected]




Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому
 будет указан заданный в ссылке адрес.


Итак, созданная домашняя страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).





Рис. 6.29. Готовая домашняя страница сайта "Компьютер"


Контрольные вопросы



1. Какой тэг и его атрибуты используются для создания гиперссылок?


Задания для самостоятельного выполнения



6.13. Практическое задание. Создать Web-страницу "Компьютер", содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.


Списки на Web-страницах


Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
  • нумерованные списки, когда элементы списка идентифицируются с помощью чисел;

  • маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);

  • списки определений, позволяющие составлять перечни определений в так называемой словарной форме.
    • 

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


Нумерованные списки.
 Нумерованный список располагается внутри контейнера  
  •  
       можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.:
      


        
< LI >Системные программы
        
< LI >Прикладные программы
        
< LI >Системы программирования
        

      

      Маркированные списки.
 Маркированный список располагается внутри контейнера , а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга 
         можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
        


          
< LI >текстовые редакторы;
          
< LI >графические редакторы;
          
< LI >электронные таблицы;
          
< LI >системы управления базами- данных.
          

        

        На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.
        

        Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).
        

        Список определений.
 Список определений располагается внутри контейнера 
        /
        . Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами 
         и определений, которые следуют за одинарными тэгами 
        .
        

        Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):
        


        
Процессор
        

        Центральное устройство компьютера, производящее обработку информации в двоичном коде.
        
Оперативная память
        

        Устройство, в котором хранятся программы и данные.
        

        

        Контрольные вопросы

        

        1. Какие тэги используются для создания нумерованных списков? Маркированных списков?
        

        Задания для самостоятельного выполнения

        

        6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.
        

        6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.
        


        Перед тем, как мы начнём наше путешествие по урокам создания сайтов на 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, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.
        Настройка структуры документа HTML
        HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.
        Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: 
, 
, 
 и 
.
        Объявление типа документа или 
 находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто 
. После этого идёт элемент 
 означающий начало документа.
        Внутри 
 элемент 
 определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента 
 не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.
        Всё видимое содержимое веб-страницы будет находиться в элементе 
. Структура типичного HTML-документа выглядит следующим образом:
         

 
 
 Привет, мир!
 
 
 
        Привет, мир!
        
 
        Это веб-страница.
        
 

 
        Демонстрация структуры 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
    

    Для реализации функционала различной направленности, web-программисты “пишут” сайты, используя соответствующий языки веб-разметки
, с целью максимально расширить интерактивные возможности веб-ресурса. Мы не будем глубоко забираться в дебри web-терминологии, но лишь поможем вам разобраться в основных моментах написания кода сайта, которые могут всплыть в процессе обсуждения проекта и при его дальнейшей реализации.
    
 
    HTML
    
 
    HTML
 - это один из самых старых языков web-программирования, появившийся еще на заре развития Интернета, и зарекомендовавший себя как один из самых простых и надежных способов web-программирования. HTML расшифровывается как Hyper Text Markup Language – Язык Разметки Гипертекста. Сайты, созданные по технологии HTML в большинстве своем являются набором статических страниц, не требующих наличия базы данных.
    
 
    Технология HTML может подойти для создания небольших, легких сайтов в несколько страничек, функционал которых не требует интерактивности и динамики.
    
 
    Как и любая технология, стандарт HTML не стоит на месте, и сегодня в среду веб-проектирования входит новый стандарт, носящий название HTML5. Данная технология очень молодая, но предоставляет большие возможности в плане создания сайтов, и позволяет реализовать новый, ранее невозможный, функционал. Хотя технология HTML5 еще не до конца вошла в сферу web-разработки, и еще далеко не все Интернет-браузеры ее поддерживают, программисты студии сайт, учитывают влияние HTML5 на дальнейшее развитие Интернет-технологий в будущем, и создают сайты, используя самые прогрессивные технологии web-программирования.
    
 
    PHP
    
 
    PHP
 является серверным языком программирования и осуществляет связь сайта с сервером и его базой данных. Сам по себе язык PHP за создание сайта не отвечает, и если взглянуть на код страницы такого ресурса, мы увидим все тот же HTML, только с вкраплениями PHP кода.
    
 
    В сайтах на PHP часть кода, написанная на HTML, отвечает за внешний вид и вывод информации, а PHP в свою очередь за динамику и интерактивность функционала. Благодаря своей простоте, гибкости и скорости выполнения операций, язык PHP является одним из самых популярных стандартов, в веб-разработке.
    
 
    В разработке преобладающей части сайтов, созданных студией сайт, была использована технология PHP, т.к. связь сайта с базой данных, по средством PHP кода является неотъемлемым условием, при создании динамичных, многофункциональных Интернет-ресурсов.
    
 
    FLASH
    
 
    По сути, сама технология флеш
 не является языком web-программирования, но используется для визуализации элементов, написанные на языке XML.
    
 
    Создание сайта по технологии flash сложный и трудоемкий процесс, но результат стоит, затраченных на него сил и средств. Flash-элементы, позволяют сделать ваш сайт ярким и интерактивным. Живые, динамические страницы оставят неизгладимое впечатление о вашем ресурсе у посетителей, и положительный образ о вашем сайте надолго останется в умах зачарованных пользователей. Имидж же компании от использования в на своем ресурсе технологии flash, только выиграет, так как элементы сделанные на flash не из дешевых и считаются люксовым.
    
 
    Но во всем как говориться нужно, знать меру, и создание flash-сайтов не исключение. Flash-блоки значительно тяжелее стандартных web-элементов и поэтому на их подгрузгу требуется больше времени. А пользователи сети, как правило, ждать не любят. Поэтому, доверяйте создание своего flash сайта профессионалам, которые оптимизируют его для максимально продуктивной работы.
    
 
    WAP
    
 
    WAP
 (Wireless Application Protocol
) – это технология позволяющая получать доступ к ресурсам Интернета прямо с мобильного устройства.
    
 
    Основным отличием WAP-сайта от обычного Интернет-ресурса, является, то что WAP-сайт “заточен” под просмотр на небольших дисплеях телефонов и коммуникаторов, в связи с чем к разработке WAP-сайта предъявляется рад требований и стандартов, направленных на облегчение веса страницы WAP-портала и оптимизации содержимого сайта именно под просмотр в WAP-браузере телефона.
    
 
    Сайты, написанные под WAP имеют свой язык разметки, адоптированный именно под обмен информацией с WAP-браузером. И если обычные сайт, предназначенные для просмотра с компьютера в большинстве своем написаны на языках html
, php
, Perl
, или xml
, то для создания WAP-сайтов используется стандарт WML (Wireless Markup Language
). Помимо всего прочего при разработке WAP-ресурсов используется свой формат изображений - WBMP, позволяющий максимально облегчить WAP-страницу.
    
 
    В связи с постоянным ростом рынка мобильных устройств, развиваются и стандарты передачи данных, между всемирной сетью и мобильными устройствами, поэтому специалисты web-студии сайт не прекращают отслеживать нововведения в данной отрасли создания сайтов и в разработке WAP-сайтов всегда используют самые прогрессивные методы и передовые технологии.
    
 
    ASP
    
 
    ASP
 (Active Server Pages
) - это открытая среда разработки web-приложений, которая позволяет комбинировать язык HTML, скрипты, и ActiveX серверные компоненты, с целью создать динамические и мощные web-решения для бизнеса. ASP-страницы это страницы, содержащие в себе скрипты, исполняемые на стороне сервера.
    
 
    Perl
    
 
    Perl
 (Practical Extraction and Report Languge
) - универсальный, интерпретируемый язык web-программирования, используемый для написания cgi-скриптов и cgi-программ, выполняемых на стороне сервера и позволяющих автоматизировать работу сайта. Perl - это одна из наиболее удобных и распространённых сред для создания динамических web-страниц, хотя и вытесняемое в последнее время более новыми Интернет-технологиями. Формат Perl является прекрасным средством для взаимодействия с web-серверами через CGI (общий интерфейс взаимодействия
). В настоящее время язык Perl теряет позиции по отношению к своему функциональному аналогу - PHP.
    
 
    C+
    
 
    С, С++
 - широко распространённые языки веб-программирования, используемые для написания cgi-скриптов. В настоящее время поддерживаются большинством серверов. Скрипты, написанные на C+ необходимо компилировать на стороне сервера.
    
 
    SSI
    
 
    SSI
 (Server Side Include
) - технология позволяющая собирать web-страницу из нескольких скриптов или файлов в единое, функциональное целое. SSI позволяет включить в web-страницу информацию на сервере, недоступную средствами HTML. По сути SSI – это своеобразный аналог инклудов в PHP. Позволяет внедрять в код сайта общие для каждой, или группы страниц элементы, позволяющих осуществлять редактирование каждой страницы через один только файл. SSI директивы поддерживаются .shtml
, .htm
 и .html
 и прописываются в файле.htaccess.
    • Похожие публикации:
    
    © 2024, brkm.ru - Наука и техника. Технологии. Строительство. Интересное