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