В век цифровых технологий и массовой компьютеризации, интернет стал неотъемлемой частью нашей жизни, а web-программирование и дизайн престижной и востребованной профессией. Ведь интернет не может существовать сам по себе и кто-то должен создавать интернет страницы, каждый день и даже каждый час обновлять web-сайты, чтобы пользователю всегда была доступна актуальная и проверенная информация в понятной для него форме. Таким образом, вопрос web-программирования и дизайна является очень актуальным.
Термин HTML (Hyper Text Markup Language) означает «язык маркировки гипертекстов». Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML — своеобразная противоположность сложным языкам программирования, известным только специалистам.
HTML давно перестал быть просто гипертекстовой разметки. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.
HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства — WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.
Поэтому тема моей работы связана с созданием web-сайта на языке гипертекстовой разметки HTML и программами, с помощью которых можно написать web-страницы. К своей работе я прикрепляю web-сайт как пример что можно создать, зная язык гипертекстовой разметки HTML.
Курсовой работы; Во-вторых, рассмотреть и изучить понятия: «гипертекстовая ...
... время исчисляется многими миллионами страниц. В связи с этим развитием информационных технологий, сетей, а также информационных систем получили широкое распространение гипертекстовая технология, языки гипертекстовой разметки, в частности HTML. Информационные системы при этом рассматриваются ...
Объект — веб-сайт. Предмет — создание сайта на языке HTML.
Цель работы — изучение языка гипертекстовой разметки HTML и CSS.
Задачи:
- Ш Раскрыть основные сведения о языке;;
- Ш Изучить Web-технологию и языки HTML и CSS и их возможности в Web-дизайне;
Ш Рассмотреть процесс создания сайта/
1. Теоритическая часть
1.1 История и версии HTML
Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день.
В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.
В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.
Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум ),компании-производители браузеров создавали собственные элементы (расширения).
Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение — фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.
И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript).
В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.
Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт — программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации).
Анализ новых требований международного стандарта ISO 14001 версии ...
... сертификацию на соответствие ISO 14001 версии 2004 года, что возможно сделать только до опубликования версии стандарта 2015 года (т.е. ориентировочно до октября 2015 года) и далее планомерно внедрять ... СЭМ в организации; В новой версии ISO 14001 расширены требования непосредственно к охране окружающей среды, что было "слабым" элементов в предыдущей версии, в которой звучало только обязательство ...
Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время браузерах.
В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.
1.2 Гипертекст
Уже достаточно много времени затрачено на то, чтобы научиться при помощи HTML и браузера выводить на экран тексты.
Но это просто тексты . Используя мощный текстовый процессор, такой, как Microsoft Word, сверстать объявление, письмо брошюру и небольшую книгу можно гораздо быстрее, и результат будет лучшего качества.
При этом не надо писать программы, вникать во все тонкости многочисленных тегов и их атрибутов. Работая в Worde, практически не надо думать ни о чем, кроме содержания собственного произведения. Разнообразный оформительский инструментарий имеет интуитивно-понятный интерфейс и многочисленную библиотеку шрифтов, линий, значков, рамочек, орнаментов, фигур, картиночек и других полезных «штучек», которые делают текст на экране и бумаге приятным для глаза. При условии, конечно, что вы не лишены вкуса и чувства меры.
Так почему же во всем мире разразился настоящий бум HTML-программирования? Сбывается мечта А.П.Ершова: программирование становится второй грамотностью, народным увлечением.
Главных причин популярности HTML три. Вот они в порядке возрастания важности.
HTML-программирование очень простое. В нем нет традиционных алгоритмических структур, таких, как развилка, цикл, процедура. Оно линейно в своей основе. (Отступлением от этого тезиса являются ссылки. С их помощью можно организовать ветвление и процедурный вызов. Об этом будет рассказано ниже. Однако, эти средства слишком примитивны для серьезного сопоставления с аналогичными структурами языков типа Си или Паскаль.)
Многие авторы учебников даже стесняются называть HTML-тексты программами. Работу HTML-проектировщика они называют разметкой текста. На самом деле, в этом названии заключена методическая ошибка. Ведь оно (название) предполагает такой порядок работы:
берется обычный текст
и размечается, то есть, на него накладывается сетка из тегов так, чтобы браузер смог показать строчки текста на экране.
Однако, хорошие гипертекстовые документы при таком подходе получить гораздо сложнее, чем в случае когда, структура HTML-документа планируется еще до написания текстов. Ведь гипертекст устроен принципиально иначе (см. третью причину).
Переносимость.
Если, работая в Word’e, вы создаете документ для собственного потребления, у вас нет проблем. Нет проблем и тогда, когда вы посылаете свою работу в мир как печатную копию. Если же ваш партнер, издатель или коллега просит прислать электронную версию — начинаются проблемы.
Для того чтобы документ появился на экране у абонента, необходимо, чтобы его компьютер и операционная система (платформа) позволяли запустить ваш любимый редактор.
Лингвистические особенности текстов служебных документов
... документа. 1.2. Экстралингвистические особенности документа 1. Точность и ясность. Основным требованием к содержанию документа является его максимальная точность и понятность (ясность). Точность изложения предполагает однозначность понимания содержания, изложенного в документе. Адекватность восприятия текста и автором документа, и ...
Для того чтобы документ загрузился в Word, крайне желательно совпадение версий этого продукта у вас и вашего коллеги.
Для того чтобы текст на экране не выглядел как древненорвежский манускрипт, необходимо, чтобы ваш партнер имел на своем компьютере шрифты, которые были использованы при создании вашего текста.
Но даже, если все эти условия выполнены, все равно мало шансов на то, что ваш товарищ увидит текст неискаженным (картинки вылезают из рамок, границы страниц плывут по тексту).
Это происходит потому, что ваш Word и Word вашего партнера настроены по-разному.
После того, как по телефону (или электронной почте) редакторы будут настроены одинаково, текст все равно может выглядеть по-разному уже по причинам, известным только фирме Microsoft.
непереносимостью
переносимым
Переносимость HTML-документа достигается за счет того, что пересылается не экранное изображение, а программа. А изображение строит браузер, выполняя команды этой программы. Правда, и здесь не все гладко. Разные браузеры могут работать немного по-разному.
HTML-документ — это гипертекст.
Обычный текст имеет линейную структуру. И хотя пользователь может читать любые его страницы и строчки, листая документ на экране или в бумажной книге, автор предполагает, что текст читается по порядку. Сначала первая страница, потом вторая и так далее.
Первый этюд к гипертексту
Некоторое нарушение линейности обычной книги вносят сноски, ссылки на другие страницы и ссылки на другую литературу.
Предполагается, что пользователь может прервать линейное чтение в месте ссылки, посмотреть другую часть читаемого текста или даже совсем другой текст, а затем продолжить чтение с места прерывания.
Второй этюд к гипертексту
Из массы линейной текстовой продукции выделяются словари, справочники, энциклопедии. Физически текст устроен линейно: за страницей 10 обязательно следует страница 11, а за сотой — сто первая. Однако, предполагается, что читатель обращается к книге для справки, а не читает ее всю подряд от корки до корки.
сепулькация
Третий этюд к гипертексту
В век бурных компьютерных технологий как-то не хочется вручную копаться в большом словаре. Почему бы эту рутину не поручить «железному» другу с «мягкой» душой? Вгоним словарь в «железо» и настроим «душу». Щелкнул мышкой по нужному слову — получил результат: нужный раздел книги на экране.
Последний этюд к гипертексту
Возможности компьютера рождают принципиально новую идею: почему бы изначально не проектировать текст в расчете на возможность чтения не попорядку, а по контексту. Такой подход позволяет разным пользователям просматривать текст ориентируясь, на свои вкусы, уровень владения темой и поставленные задачи.
Структура компьютерной книги становится существенно нелинейной, она даже перестает быть иерархической, а скорее напоминает спутанную рыболовную сеть или порцию спагетти, опрокинутую на пол.
Для навигации по такой сети предусматривается простой способ: те фрагменты документа, которые имеют переходы на другие его части, каким-то образом выделены. Простое интерфейсное действие на такой ссылке (нажатие на Enter или мышиный щелчок) перебрасывают пользователя в другой информационный узел.
Разработка ASP.NET приложения с нестандартными WEB – элементами управления
... В данной курсовой работе описана разработка ASP.NET приложения с использованием технологии ... страницы ASP.NET двух файлов: файла разметки (.aspx) с дескрипторами HTML и дескрипторами элементов ... одного элемента или всех элементов из семейства Contents ... синтаксическая корректность исходного текста. Скомпилированный в ... HTML имя равным значению. AppendToLog – добавляет строку в конец записи журнала веб ...
1.3 Структура WEB-страницы
Заготовка типичной WEB-страницы:
- <HTML>
- <HEAD>
- <TITLE>
- Структура WEB-страницы </title>
- <STYLE>
- H2 {font-family: Arbat;}CODE { font-family: Arial;} </style>
- <META http-equiv. = ”Content-Type” content = “text/html;
- chariest = windows-1251″>
- <META name = “Author” content = “”>
- <META name = “Keywords” content = “ HTML, document, element”>
- </head>
- <BODY bgcolor = #FFFFFF>
- <!- Комментарий к страницы -!>
- <A name = “top></a>
- Переход к <A href = “#bottom”>
- конец </a>
- документа <P>
- Переход к <A href = “#S001”>
- <B>
- ссылке 1 </b></a><P>
- <P>
- <HR>
- <H1>
- Заголовок 1 </h1>
- <H2>
- Заголовок 2 </h2>
- <H3>
- Заголовок 3 </h3>
- <H3>
- Заголовок 4 </h4>
- <H3>
- Заголовок 5 </h5>
- <H3>
- Заголовок 6 </h6>
- <HR>
- Здесь расположена <B>
- ссылка 1 </b><A name = “S001”></a>
- <HR>
- <P>
- Здесь должен располагаться оригинальный текст WEB-страницы
<HR>
- <A name = “bottom”></a><P>
- Переход в <A href = “#top”>начало</a>
- документа
</body>
- </html>
— Если рассмотреть исходные тексты различных WEB-страниц, то можно легко увидеть схожесть их структуры. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальном и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами.
Рассмотрим основные элементы HTML.
<HTML></ HTML>
- Означает документ на языке HTML. Я уже упоминал о том, что одним из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и коечным тегами должна находится вся WEB — страница. В принципе этот элемент. Он имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом </html>
- оканчиваются все документы в формате HTML.
<HEAD></HEAD >
«Реконструкция центрального теплового пункта содержит (59) ...
... этого необходимо: 1.Осуществить расчет принципиальной тепловой схемы и выбор оборудования. 2.Предусмотреть автоматизацию оборудования ИТП в объеме требований СП Предусмотреть установку автоматизированной системы ... воды Центральный тепловой пункт Центральный тепловой пункт (в последующем ЦТП) является одним из элементов тепловой сети, расположенной в поселениях городского типа. Он выступает в ...
— Область заголовка Web — страницы, её первая часть. HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты IANG, DIR, должен включать элемент TITLE и допускает вложение элементов BASE, META, LINK, OBJECT, SCARIPT, STULE.
<TITLE></TITLE>
— Элемент для размещения заголовка Web — страницы. Строка текста , расположенного внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска в WWW. Эта строка должна достаточно точно отражать назначение документа.
<STYLE></STYLE >
— Элемент для описания стиля некоторых элементов Web — страницы. В файле Strukt. Htm назначены шрифты для элементов h2, code. Для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента style не обязательно, но желательно. Этот элемент введён сравнительно недавно, без него немыслима работа в приложениях World, Excel.
<META>
— Элемент содержит служебную информацию, которая не отражается при просмотре Web- страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент Meta содержит два основных атрибута, первый из которых определяет тип данных, а второй — содержание. Вот несколько примеров meta — данных:
Дата, обозначающая срок годности документа:
Name — “Expires” content = “Дата”
Адрес электронной почты:
Name = “Reply — to” content = “ Имя @ Адрес “
Name = “Author” content = “ Имя автора”
Набор ключевых слов для поиска:
Name = “Keywords” content = “слово 1, слово 2, слово 3…”
Краткое описание содержания Web- страницы:
Name = “Description” content = “Содержание страницы”
Описание типа и характеристик Web — страницы:
Name = “Content — Type” content = “ Описание страницы”
Указание приложения, в котором была создана Web — страница:
Name = “Generator” content = “Название HTML — редактора”
Атрибут Name используется приложением — клиентом для получения дополнительной информации о Web — страницах и их упорядочения. Его часто заменяют атрибутом http — equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.
Элемент META может содержать URL. Шаблон атрибута таков:
URL = “http: // адрес”
<BODY></ BODY >
— Этот элемент заключает в себе гипертекст, который определяет собственно Web — страницу. Конечный тег этого элемента надо искать в конце HTML-файла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Атрибут, определяющий фон страницы, является одним из самых важных для дизайна.
background = “Путь к файлу”
Более простое оформление фона сводится к заданию его цвета:
bgcolor = “#RRGGBB”
Цвета фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего. Оба приведенных выше атрибута не являются альтернативными и часто используются совместно: если по каким-либо причинам не может быть найден рисунок фона, используется цвет.
WEB-дизайн и программы для создания web-страниц
... современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, предназначен для создания в документах ... (WWW) и Web-дизайн Всемирная паутина ... а также относящиеся к XML технологии, такие как пространство имен XML, ... векторной графики на веб-странице (диаграмм, отдельных элементов интерфейса) в виде текста ...
Поскольку фон станицы может изменятся, необходимо иметь возможность подбирать соответственный цвет текста. Для этого имеются следующей атрибут:
text = “#RRGGBB”
Для задания цвета текста гиперссылок используются следующие атрибуты:
link = “#RRGGBB”
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink = “#RRGGBB”
Можно также указать изменение цвета для последней выбранный пользователем гиперссылки:
Alink = “#RRGGBB”
<!- Комментарий -!>
— В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле — не исключение. Текст, введений внутри этого элемента, игнорируется браузером. Эти элементы могут располагаться в любом месте WEB-страницы. Признаком комментария служит восклицательный знак, а текст комментария должен обрамляться двойным дефисом. Например:
- <!- Комментарий -!>
- <H1><
- H1>
— Элемент заголовка. Существует шесть уровней заголовка, которые обозначаются H1…H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков могут использовать атрибуты, задающие выравнивание влево, по центру или вправо:
align = “left”
align = “center”
align = “right
<HR>
- Горизонтальная линия — очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части.
Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Этот элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
align = “left”
align = “center”
align = “right
align = “justify
Можно задать толщину линии:
Size = толщина в пикселях
Можно управлять длиной линии:
width = длина в пикселях
width = длина в процентах
Можно выбрать цвет:
color = “цвет”
<A></A>
— HTML-документ может быть очень большим, и в этом случае нужно иметь возможность быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки. Шаблон для создания меток таков:
- <A name = “>Произвольный текст</a>
— В данном случае данной строке документа присваивается имя, и, следовательно, в другой части документа или даже на другом документе может быть создана гиперссылка, приводящая в эту точку. Для перехода внутри документа можно использовать следующую конструкцию:
- <P>Переход к <A href = “#метка”>метке</a></p>
- Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
Читая эту работу, вы, конечно, уже достаточно много поработали со ссылками и понимаете, что это такое на практике.
Технологии анализа данных (Text Mining, Data Mining)
... текстов и определения качества контента. Вестник пермского университета 2011. УДК 004.912 2. А.А. Барсегян, М.С. Куприянов, В.В. Степаненко, И.И. Холод: Технологии анализа данных. Data Mining, Visual Mining, Text Mining, ... алгоритмы Data Mining. Решением этой проблемы занимаются методы анализа неструктурированного текста (Text Mining). Определение Text Mining: Обнаружение знаний в тексте - ...
Вы поняли, что:
- гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием;
- мышиный курсор на ссылке меняет свою форму и превращается в указующий перст;
- для перехода по ссылке необходимо щелкнуть по ней мышкой;
для возврата из ссылки необходимо использовать навигационную кнопку браузера » Назад » («Back «).
Если ссылки образуют вложенную цепочку, то кнопки » Назад » («Back «) и «Вперед «(«Forward «) можно использовать для движения по пройденному ссылочному пути в обе стороны. Они работают как традиционные операции «откатка» и «накатка» в большинстве прикладных программ.
В нижеприведенном примере используется цепочка вложенных ссылок. Совершите небольшое путешествие. Сначала, щелкая ссылки, доберитесь до текста, в котором ссылок уже нет. Затем, пользуясь навигационными кнопками браузера, «прогуляйтесь» по пройденному пути вперед и назад.
Ссылки могут уводить не только в разные документы, но загружать на экран разные фрагменты одного и того же текста. В последнем случае навигационные средства браузера работают также.
<BASE>
- Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускать начальную часть адреса в ссылках документа. Для использования этого элемента необходимо использовать следующую конструкцию:
- <BASE href =”http:// компьютер/путь 1”>
Фрагмент адреса путь1 не является обязательным. При формировании полного адреса он будет отброшен. Если в тексте документа встретится относительная ссылка
путь 2/имя документа. Htm “ >Видимый текст ссылки</a>,
то она будет соответствовать URL
http: // компьютер/путь 2/имя документа. Htm
В том случае, когда надо задать базовый адрес для локального диска (например, D), должна быть использована такая конструкция:
- <BASE href =file://D:\путь\>
- Тогда при указании относительной ссылки можно будет задавать не только имя файла, но и имена папок, в которых он находится.
В выражении абсолютной ссылки можно также опустить указание на схему доступа (file://) В этом случае будет учитываться только левая часть абсолютной ссылки до первого левого символа “\”, то есть имя локального диска.
Правила синтаксиса
внутри него,
Существуют группы элементов, которые используются совместно. К ним относятся элементы для создания таблиц, списков, фреймов. В этом случае порядок вложения элементов определяется логикой создания того или иного объекта на странице. Таблицы и фреймы часто используются для того, чтобы разместить детали страницы (рисунки, текст и др.) в определённом порядке. Например, располагая рисунок внутри ячейки таблицы, можно добиться определённого его положения.
Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определённых элементов.
Общая характеристика зданий, их конструктивные элементы и схемы
... случаях оказываются весьма трудоёмкими. Новые типы пространственных конструкций, например т. н. структурные конструкции из прокатных профилей на болтовых соединениях, отличаются как ... высокопрочного кирпича, армокаменных и т. н. комплексных конструкций (каменных конструкций, усиленных стальной арматурой или железобетонными элементами) позволяет значительно увеличить несущую способность зданий с ...
Например, есть два абзаца (первый в зелёной рамке) и таблица:
- <P style = “border: 3px solid green”>
- Текст абзаца 1</p>
- <TABLE>…</ table>
- <P>
- Текст абзаца 2 </p>
- Таблица в данном случае — независимый элемент. Её можно, например, выравнивать независимо от остального текста.
Можно использовать другой код:
- <P style = “border: 3px solid green “>Текст абзаца 1
<TABLE>…</table>
- <P>
- текст абзаца 2</p>
- Исчез конечный тег первого абзаца. Теперь таблица является частью первого абзаца, и зелёная рамка будет охватывать таблицу и текст.
И наоборот, элемент P может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев P.
Элемент —
Некоторые элементы не имеют конечного тега. Элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом и без него. Элемент абзаца P может иметь конечный тег , но если тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент P, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и др.
внутри начального тега.
1.4 Таблицы стилей
Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными.
С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).
В завершение разговора об уровнях CSS следует добавить, что переход от одного уровня к другому, в основном, сопровождался некоторыми видоизменениями в структуре и в правилах стилевого оформления, технологическими дополнениями, а также попытками систематизировать применение CSS.
Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.
Способы определения таблиц стилей
Как уже было сказано, любая таблица стилей CSS должна быть интерпретирована браузером для того, чтобы правила CSS, обозначенные для конкретных элементов электронного документа, вступили в силу.
Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:
ссылка на внешний файл.
<LINK REL=»stylesheet» TYPE=»text/css» HREF=»style.css»>
- Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS.
Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела head HTML-документа;
- внедрение в документ.
<STYLE TYPE=»text/CS3″>
- <! —
BODY { font-family: Arial, Helvetica; }
INPUT { background-color: ICECECE; }
- >
- </STYLE>
- Данная конструкция также должна присутствовать в разделе head. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS);
- включение в теговые конструкции.
<Р ALIGN=»justify» STYLE=»color: 1000000; font-family: Verdana;»> Текст параграфа…
В этом случае задано отдельное правило для конкретного параграфа. Также можно присваивать отдельному HTML-элементу определенный класс стилевого шаблона:
- <TABLE>
- <TR>
- <TD CLASS=»header»X/TD>
- <TD CLASS=»text»X/TD>
- </TR>
- </TABLE>
Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ):
- <STYLE TYPE=»text/css»>
- <! —
- header { font-weight: bold;
- color: gray;
- }
- text { color: black;
- font-size: llpx;
- }
- >
- </STYLE>
- В данном случае текст табличной ячейки класса .header будет отображаться жирным начертанием и серым цветом, а ячейки класса . text -обычным начертанием, черным цветом и размером шрифта 11 пикселов;
- импортирование.
<STYLE TYPE-«text/css»>
- <! —
@import: url(style.ess);
- >
- </STYLE>
- Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1).
Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTML-элементов — отдельные конструкции либо в теге <style>, либо в кодовых конструкциях самих тегов.
Листинг. Совмещение различных способов определения стилевого шаблона CSS
<HTML> <HEAD>
- <Т1ТLЕ>Совмещение различных способов определения CSS</TITLE>
- <LINK REL=»stylesheet» TYPE=»text/css» HREF=»style . css»>
- <STYLE TYPE=»text/css»>
- <! —
P { text-align: justify; color: green; }
- title { color: blue;
- font-weight: bold;
- font-size: 16px;
- } — >
- </STYLE>
- </HEAD>
- <BODY BGCOLOR=»#FFFFFF» TEXT=»black» LINK=»|OOFFOO» ALINK=»IOOFFOO» VLINK=»blue»>
- <FONT CLASS=»title»>Cnocoбы определения шаблонов CSS</FONT>
- Ниже перечислены существующие способы определения стилевых шаблонов CSS, даны характеристики каждого способа, приведены примеры их использования.
<UL>
- <LI>Ссылка на внешний файл
< LI >Внедрение в документ
< LI >Включение в теговые конструкции
< LI >Импортирование
</UL>
- </BODY>
- </HTML>
- Также следует сказать, что использование каждого способа определения стилевых шаблонов CSS может быть связано с некоторыми минусами.
В случае ошибки интерпретации HTML-кода браузером, плохой связи с сервером и пр. внешний файл CSS может не загрузиться, вследствие чего стиль для нужных элементов HTML не будет переопределен.
Если внешний файл CSS включает слишком большое количество стилевых шаблонов (что отражается на конечном размере файла), то существует вероятность того, что браузер не сумеет полностью интерпретировать файл CSS или вообще исчерпает лимит времени по загрузке данных. В первом случае стили для части элементов не будут переопределены (браузер успеет «обнаружить» только те правила, которые размещены в верхней части CSS-файла).
Во втором случае все элементы страницы останутся без изменения, загрузившись по умолчанию.
При использовании способа включения стиля в сам документ наличие слишком большого количества шаблонов CSS заметно увеличит конечный размер HTML-страницы, что скажется на времени загрузки документа в браузере.
При сочетании различных способов определения стилевых шаблонов следует учитывать особенности браузеров. К примеру, Netscape «плохо относится» к использованию символа нижнего подчеркивания ( _ ) в указании классов для элементов HTML (.news_titie, ._about и т. д.).
Также ряд браузеров (и Netscape в том числе) не подключает стилевой шаблон класса, присвоенного ячейке таблицы <то>/<тн>: конструкция <то CLASS=»text»>TeKCT</TD> выведет текст по умолчанию, a <tdxfont CLASS=»text»>TeKCT</FONT></TD> отобразит текст заданным стилем.
1.5 Запись шаблона CSS
Любое правило таблицы стилей CSS состоит из селектора и определения шаблона.
Селектор выступает в роли указателя стилевого правила для определенного HTML-элемента или внутреннего класса (идентификатора).
Определение шаблона — это описание стилевых правил для обозначенных элементов HTML. Правила чередуются через точку с запятой и заключаются в фигурные скобки.
НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }
В данном примере селектором является элемент заголовка нз, для шаблона которого следует такое определение: цвет — синий, шрифт — Tahoma, либо Verdana, либо Arial.
Как видно из примера, для одного селектора приведено описание, содержащее два правила — по цвету заголовка и наименованию гарнитуры. Это говорит о том, что CSS позволяет группировать несколько стилевых правил для одного селектора в рамках единого описания шаблона.
Сравнив запись вида:
- НЗ { color: blue; }
НЗ { font-family: Tahoma, Verdana, Arial; }
И
НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }
можно сделать вывод о том, что группировка правил по селектору позволяет, во-первых, экономить размер CSS-файла, во-вторых — систематизировать структуру описания шаблона.
Другой особенностью таблиц стилей CSS является свойство наследования стилевых правил для нескольких селекторов одновременно, например:
- TD, ТН, Р, DIV { text-align: justify;
- color: gray: font-size: Юрх;
- }
Такая запись назначает единый стиль отображения текстовой информации для элементов ячейки таблицы (<то>, <тн>
- , а также параграфов (<р>
- и блоков (<div>
- , а именно: выравнивания — по ширине, цвет — серый, размер шрифта — 10 пикселов.
Селекторы
В качестве селектора CSS могут выступать:
элементы HTML.
BODY { color: orange; }
В этом случае весь текст в пределах раздела body будет оранжевым. При добавлении, например, таблицы назначение стилевого шаблона пропадет для текста внутри ячеек;
классы. Использование классов позволяет переопределять стиль как для конкретного элемента, так и для любого элемента, которому присвоен данный класс. Наименование класса начинается с точки и обычно пишется строчными буквами (допускается использование латинских букв и цифр, но наличие специальных символов, нижних подчеркиваний и прочих нестандартных элементов не рекомендуется).
- red { color: red; }
В этом случае любой элемент HTML, позволяющий менять цвет, будет отображаться красным, если ему присвоить класс . red:
- <FONT CLASS=»red»>TeKCT красным цветом</ГОЫТ>
ИЛИ
<HR CLASS=»red»>
Если мы дополним селектор класса наименованием конкретного HTML-элемента, то действие стилевого правила будет распространяться только на данный элемент:
- HR.red { color: red; }
При указании классов стилевого шаблона следует внимательно следить за тем, поддерживает ли HTML-элемент присваемый типереопределения стиля. Например, запись вида:
- HR { text-align: justify; }
будет бессмысленной, т. к. горизонтальный разделитель относится к области структурного форматирования и не может содержать текст, который, согласно стилевому правилу, следует растянуть по ширине;
- идентификаторы.
fblack { background-color: black; }
Например, присвоив данный идентификатор тегу то, мы получим ячейку таблицы, залитую черным цветом:
- <TD 1П=»Ыас1<«>Ячейка черного цвета</ТО>
— Сравнив функции селектора класса и идентификатора, можно задаться вполне закономерным вопросом — чем же отличаются эти селекторы? Действительно, формат определения селектора обоих типов аналогичен по структуре и присвоению HTML-элементам. Однако селектор идентификатора часто применяется для задания уникального имени элементу, который задействован в программном сценарии (скрипте).
В отличие от него, селектор класса ограничивается, в основном, применением в стилевых шаблонах.
В заключение необходимо обратить особое внимание на невозможность сочетания селекторов различных типов. Нельзя одновременно переопределить стиль для стандартного элемента HTML и для него же, но по конкретному классу/идентификатору.
Псевдоклассы
Псевдоклассами называют определенные условия форматирования HTML-элемента, в соответствии с которыми браузер подставляет необходимые стилевые правила отображения данных. При этом в исходной структуре электронного документа такие классы не присутствуют, они создаются в процессе интерпретации HTML-кода браузером.
В основном, псевдоклассы предназначены для задания различных типов форматирования по нескольким разновидностям элементов. Рассмотрим функциональность псевдоклассов на примере гиперссылок.
Согласно спецификации HTML и стандарту CSS, гиперссылка может принимать четыре состояния: непосещенная ссылка (link), посещенная ссылка (visited), активная ссылка (active) и ссылка при наведении курсора мыши (hover).
Первые три СОСТОЯНИЯ (link, visited, active) обычно прописываются в теге <body> HTML-документа (уровень CSS 1).
Четвертое состояние (hover) относится к уровню CSS 2 и подразумевает изменение цвета ссылки при наведении на нее курсора мыши пользователя (событие работает в браузерах Internet Explorer 4 и выше, Opera 5 и выше, Netscape 6 и выше, Mozilla 1.0; браузеры более ранних версий, а также некоторые не особенно распространенные браузеры не поддерживают состояние hover).
Эти состояния и будут являться псевдоклассами при записи правил отображения гиперссылок в стилевом шаблоне:
- A:link { color: blue; }
A:active { text-decoration: underline; }
A:visited { color: gray; }
A:hover { color: orange; }
В данном случае все присутствующие в электронном документе гиперссылки будут отображаться в соответствии с заданным стилевым правилом. Однако часто возникает необходимость визуально выделить одни ссылки относительно других. Для этого наряду с псевдоклассами используются обычные селекторы классов:
- A:active.red { color: red;
- } A:hover.red { color: blue;
- } A:active.white { color: white;
- } A:hover.white { color: black;
- }
Применение таблиц стилей CSS
Прежде всего следует отметить, что при определении стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контейнер <в> (<strong>
- , а в CSS — конструкция font-weight: bold;
- (для элемента или селектора).
Для выделения текста подчеркиванием в HTML предусмотрен тег <и>, а в CSS используется запись вида text-decoration: underline;
- И Т. Д.
В рамках данной книги, посвященной применению языка разметки HTML, сложно рассказать обо всех свойствах переопределения стиля с помощью CSS. Поэтому мы остановимся лишь на некоторых аспектах использования каскадных таблиц стилей, а именно: на форматировании текста, структурном форматировании и организации пользовательских форм.
CSS в форматировании текста
CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста (подчеркивание, курсив, жирное начертание, выбор гарнитуры и размер шрифта), с помощью средств CSS возможно изменять такие параметры, как межбуквенный и межстрочный интервал, тип регистра (строчные и прописные буквы) и многое другое.
2. Практическая часть
2.1 Создание и описание сайта
Главная страница — прямо по центру главной страницы расположены все последние новости про мобильные устройства и технологии.
HTML код:
- <section id=»middle»>
- <div class=»mainside»>
- <div class=»content»>
- <article class=»post»>
- <img class=»poster» src=»Адрес файла с картинкой» alt=»» />
- <h3 class=»title»><a href=»Ссылка на страницу»>Заголовок</a></h3>
- <div class=»text»>Текст…</div>
- <div class=»more»><a href=»Ссылка на страницу»>Читать дальше</a></div>
- <div class=»clr»></div>
- </article>
CSS код:
- #middle {background: #fafafa;
- Определяет цвет фона.
border: solid 2px #1a9ad0;
- Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
border-top: none;
- border-radius: 0px 0px 20px 20px;
- Устанавливает радиус скругления уголков рамки.}
- mainside {background: #fafafa;
- Определяет цвет фона.
border-radius: 0px 0px 0px 20px;
- Устанавливает радиус скругления уголков рамки.
border-right: solid 2px #1a9ad0;
- Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
margin-right: 300px;
- Устанавливает величину отступа от каждого края.
padding: 20px 0px;
- Устанавливает значение полей вокруг содержимого элемента.}
- content {width: 660px;
- Устанавливает ширину блочных или заменяемых элементов.
float: left;
- Выравнивает элемент по левому краю.
padding: 0 10px;
- Устанавливает значение полей вокруг содержимого элемента.}
- post {border-bottom: solid 2px #1a9ad0;
- Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
margin-bottom: 20px;
- Устанавливает величину отступа от каждого края.
padding-bottom: 10px;
- Устанавливает значение полей вокруг содержимого элемента.}
- post .poster {float: left;
- Выравнивает элемент по левому краю.
border: solid 2px #1a9ad0;
- Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
padding: 3px;
- Устанавливает значение полей вокруг содержимого элемента.
margin: 0 10px 10px 0;
- Устанавливает величину отступа от каждого края.
width: 205px;
- Устанавливает ширину блочных или заменяемых элементов.
height: 145px; — Устанавливает высоту блочных или заменяемых элементов}
- post .title {color: #1a9ad0;
- font-size: 16px;
- Определяет размер шрифта.
font-weight: bold;
- Устанавливает насыщенность шрифта. bold — полужирное начертание.
margin: 0 10px;
- Устанавливает величину отступа от каждого края.}
- post .text {margin: 10px;
- Устанавливает величину отступа от каждого края.
color: #888888;
- Определяет цвет текста.
font-size: 16px;
- Определяет размер шрифта.
font-family: Tahoma;
- Устанавливает семейство шрифта.}
- post .text a {text-decoration: underline;
- Устанавливает подчеркнутый текст.}
- post .more {text-align: right;
- padding: 5px;
- Устанавливает значение полей вокруг содержимого элемента.
margin: 5px;
- Устанавливает величину отступа от каждого края.
float: right;
- Выравнивает элемент по правому краю.}
- post .more a {background: #2aaae0;
- Определяет цвет фона.
display: inline-block;
- line-height: 20px;
- height: 20px; — Устанавливает высоту блочных или заменяемых элементов
padding: 2px 10px;
- Устанавливает значение полей вокруг содержимого элемента.
text-decoration: none;
- Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
color: #fff;
- Определяет цвет текста.
font-size: 12px;
- Определяет размер шрифта.
font-weight: bold;
- Устанавливает насыщенность шрифта. bold — полужирное начертание.
border: solid 1px #1a9ad0;
- Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
border-radius: 2px;
- Устанавливает радиус скругления уголков рамки.
float: right;
- Выравнивает элемент по правому краю.}
- post .more a:hover {background: #5ac0f0;} — Определяет цвет фона.
Справа на главной странице расположен меню сайта и три самых популярных новостей:
Новости — здесь пользователи могут прочитать о самых свежих новостях мобильных телефонов и смартфонов.
Цены — здесь пользователи могут узнать цены на мобильные устройства в Ташкенте.
Полезное — здесь расположены полезные статьи о мобильных устройствах.
Приложения — здесь расположена информация про самые популярные приложения для мобильных устройств.
HTML код:
- <aside class=»sidebar»>
- <nav class=»side_menu»>
- <ul><li><a href=»index.html «>НОВОСТИ</a></li>
- <li><a href=»index6.html «>ПРИЛОЖЕНИЯ</a></li>
- <li><a href=»index4.html «>ЦЕНЫ</a></li>
- <li><a href=»index5.html «>ПОЛЕЗНОЕ</a></li></ul></nav>
- <div class=»block»>
- <div class=»title»>Самое популярное</div>
- <div class=»text»>
- <a href=»novosti008.html «>Qualcomm может разработать обновлённую версию Snapdragon 810 специально для Samsung</a><br></br>
- <a href=»novosti007.html «>LG удалось продать 59,6 миллиона смартфонов за 2014 год</a><br></br>
- <a href=»novosti001.html «>Слухи о веб-версии WhatsApp оказались правдой</a><br></br>
- </div></div>
CSS код:
- sidebar {margin-right: -290px;
- Устанавливает величину отступа от правого края.
width: 275px;
- Устанавливает ширину блочных или заменяемых элементов.
padding: 0 5px;
- Устанавливает значение полей вокруг содержимого элемента.
float: right;
- Выравнивает элемент по правому краю.}
- side_menu {border-bottom: solid 2px #1a9ad0;
- margin-bottom: 10px;
- Устанавливает величину отступа от каждого края.}
- side_menu ul {padding-bottom: 10px;
- Устанавливает значение полей вокруг содержимого элемента.
overflow: hidden;
- Отображается только область внутри элемента, остальное будет скрыто.}
- side_menu ul li {float: left; — Выравнивает элемент по левому краю,
margin-bottom: 10px;
- Устанавливает величину отступа от каждого края.}
- side_menu ul li:nth-last-child(2n+1) {margin-left: 4px;
- Устанавливает величину отступа от каждого края.}
- side_menu ul li a {background: #2aaae0;
- Определяет цвет фона.
display: inline-block;
- Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. компьютерный сайт гипертекстовый
line-height: 25px;
- Устанавливает межстрочный интервал текста, отсчет ведется от базовой линии шрифта.
height: 30px; — Устанавливает высоту блочных или заменяемых элементов
padding: 0 10px;
- Устанавливает значение полей вокруг содержимого элемента.
width: 112px;
- Устанавливает ширину блочных или заменяемых элементов.
text-decoration: none;
- Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
color: #fff;
- Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
font-size: 10px;
- Определяет размер шрифта.
font-weight: bold;
- Устанавливает насыщенность шрифта. bold — полужирное начертание.
border: solid 1px #1a9ad0;
- Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
border-radius: 10px;
- Устанавливает радиус скругления уголков рамки.}
- side_menu ul li:nth-last-child(2n+1) a {border-radius: 10px;
- Устанавливает радиус скругления уголков рамки.}
- side_menu ul li a:hover {background: #5ac0f0;
- Определяет цвет фона.}
- block {margin-bottom: 25px;
- Устанавливает величину отступа от каждого края.
padding: 5px;
- Устанавливает значение полей вокруг содержимого элемента.}
- block .title {padding-left: 0 10px;
- Устанавливает значение полей вокруг содержимого элемента.
font-weight: bold;
- Устанавливает насыщенность шрифта. bold — полужирное начертание.
font-size: 14px;
- Определяет размер шрифта.}
- block .text {margin-top: 5px;
- Устанавливает величину отступа от каждого края.
font-size: 12px;
- Определяет размер шрифта.}
Cверху слева расположен логотип сайта и слоган
HTML код:
- <header id=»header»>
- <h1 class=»logotype»>
- <a href=»/»>Всё о мобильной технике и технологиях</a></h1>
- <div class=»clr»></div></header>
CSS код:
- logotype {float: left;} — Выравнивает элемент по левому краю;
- logotype a {background: url(../images/logo.png) no-repeat;
- Устанавливает фоновое изображение. / Устанавливает одно фоновое изображение в элементе без его повторений,;
- padding: 30px 0 0 30px;
- Устанавливает значение полей вокруг содержимого элемента.
display: block;
- Элемент показывается как блочный.
min-height: 5px;
- Задает минимальную высоту.
min-width: 115px;
- Устанавливает минимальную ширину.
font-size: 14px;
- Определяет размер шрифта.
text-decoration: none;
- Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
