Изучение синтаксиса и основных операторов HTML и CSS

Вид работы:

Курсовая работа (т)
Предмет:

Информационное обеспечение, программирование
Язык:

Русский
,
Формат файла:
MS Word

24,06 Кб
Опубликовано:

2016-01-12

Все курсовые работы по информационному обеспечению

Скачать курсовую работу Читать текст online Заказать курсовую
*Помощь в написании! Посмотреть все курсовые работы

Вы можете узнать стоимость помощи в написании студенческой работы.

Изучение синтаксиса и основных операторов HTML и CSS

Реферат

Ключевые слова: HTML, CSS.

Объект исследования: Язык гипертекстовой разметки HTML и таблица стилей CSS.

Предмет исследования: Создание сайта при помощи HTML и CSS.

Методы исследования: Изучение синтаксиса и основных операторов HTML и CSS.

Цель курсовой работы: Изучить HTML и CSS, дать основные понятия об этих языках, создать на основе полученных знаний сайт.

Выводы: Был изучен язык HTML и CSS, создан на основе полученных знаний сайт.

Введение

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

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

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

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

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

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

1.HTML- язык гипертекстовых документов

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

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

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

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

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

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

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

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...тело документа... </HTML>

Заголовочная часть документа <HEAD>

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Не желательно размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа.

Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

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

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

Комментарии

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

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

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа <BODY>

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

где x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа

Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг <CENTER>. Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна

Тэг преформатирования <PRE>

Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

-перевод строки

-символы табуляции (сдвиг на 8 символов вправо)

-непропорциональный шрифт, устанавливаемый броузером

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тэгами <PRE> и </PRE>.

Разрыв строки <BR>

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

Дополнительный параметр позволяет расширить вохможности тэга <BR>.

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна броузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка.

Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место.

Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов.

.4 Тэги списков

Существует три основных вида списков в HTML-документе:

-пронуменрованный

-непронуменрованный

-список описаний

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

Пронумерованные списки

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

Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Например:

<OL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL>

oПрограммирование

oАлгоритмизация

oПроектирование

Тэг <OL> может иметь параметры:

где:

Вид счетчика:

¾A - большие латинские буквы (A,B,C...)

¾a - маленькие латинские буквы (a,b,c...)

¾I - большие римские цифры (I,II,III...)

¾i - маленькие римские цифры (i,ii,iii...)

¾1 - обычные цифры (1,2,3...) =n

Число, с которого начинается отсчет

Например:

<OL TYPE=I START=15> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL>

XV.Программирование

XVI.Алгоритмизация

XVII.Проектирование

Непронумерованные списки.

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

Пронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

<UL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL>

¾Программирование

¾Алгоритмизация

¾Проектирование

Тэг <UL> может иметь параметр:

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:

<UL TYPE=square> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL>

§Программирование

§Алгоритмизация

§Проектирование

Вложенные списки

Дадим пример вложенных списков:

<HTML> <HEAD> <TITLE> Список сотрудников </TITLE> </HEAD> <BODY> <H2> Список сотрудников нашей фирмы </H2> <H3> Составлено : 30 июля 2012 года </H3> Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P> Список может быть использован только в служебных целях. <P> <OL> <LI> Дирекция <UL> <LI> Иванов И.И. <LI> Петров К.В. </UL> <LI> Отдел маркетинга <UL> <LI> Варшавская Е.Л. <LI> Самсонов Д.М. </UL> </OL> </BODY> </HTML>

Вот, что вы увидите на экране броузера:

Элемент списка <LI>

Тэг <LI> может иметь параметры:

в зависимости от того, в списке какого вида находится данный элемент.

Вид маркера (см. <UL>) или счетчика (см.OL) =n

Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

Например:

Список определений

Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>. Например:

<DL> <DT> <B> Отдел маркетинга </B> <DD> Данный отдел занимается продвижением продуктов и услуг <DT> <B> Финансовый отдел </B> <DD> Данный отдел занимается всеми финансовыми операциями <DT> <B> Отдел кадров </B> <DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д. </DL>

1.5 Гипертекстовые ссылки

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

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

Ссылки можно использовать как для перемещения по документу, так и для перемещения от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого. использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:

method://machine-name/path/foo.php

Следующий пример представляет собой вызов HTML-документа index.php с сервера www.kino-dom.tv с использованием HTTP протокола: ://www.kino-dom.tv/index.php

Uniform Resource Locator имеет следующий формат: ://servername:port/pathname#anchor

Опишем каждый из компонентов URL:

METHOD

Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы: :

чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/tony/index.php - отобажает файл index.php из каталога /home/tony на пользовательской машине :

доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: #"justify">запрос файла с анонимного FTP-сервера. Например: ftp://Tony_J/directory/filename :

активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@gsu.by - активизирует сессию посылки сообщения пользователю info на машине gsu.by, если броузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слэшей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента) :

обращение к службе telnet :

вызов службы новостей, если броузер ее поддерживает. Например: news:relcom.www.support

Необязательный параметр, описывающий полное сетевое имя машины. Например:

www.gsu.by - полное сетевое имя сервера нашего университета.

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

Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: ://www.gsu.by/cgi-win/handle.exe

В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.gsu.by. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слэши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL закагчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.php).

#ANCHOR

Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство броузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна броузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тэга NAME, как это будет описано далее.

Структура ссылок в HTML-документе

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

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-броузером. Обычно этот текст отображается подчеркнутым и выделенным синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается броузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

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

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

¾bold (жирный)

¾italic (наклонный)

¾mono spaced (type writer - с использованием фиксированных шрифтов)

Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями.

Дополнительные стили:

¾big (юольшой)

¾small (маленький)

¾sub (подстрочник)

¾sup (надстрочник)

Размер шрифта <FONT SIZE>

Вы можете изменять размер шрифта при помощи тэга:

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга:

Цвет шрифта <FONT SIZE>

Вы можете изменить цвет шрифта при помощи тэга:

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатиричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

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

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

Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.

Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь.

1.7Практическое освоение CSS

Информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр - HREF= «URL» - указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу - в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются - или полный URL («#"justify">Второй вариант, при котором описание стилей располагается в коде Webстранички, внутри тега <BODY>, в теге <STYLE type="text/css">... </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания броузеру использовать CSS.

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

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

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}

Где НАЗВАНИЕ_ЭЛЕМЕНТА - имя HTMLтега (H1, P, TD, A и т. д.), а параметры в фигурных скобках - список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.

Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега <P>...</P>, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа. реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно - для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.

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

Пример:с {font-weight: bold; text-align: center}

- описание стиля для класса b-с

Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).

<P CLASS="b-с">Текст параграфа</P>

параграфу присвоен стиль класса b-с.

<TD CLASS="b-c">текст</TD>

- ячейке таблицы присвоен стиль класса b-c.

Содержащийся в ячейке текст будет отображаться согласно описанию класса.

Таким образом, вы можете присвоить описанный стиль любым текстовым элементам страниц. Обратите внимание, что при написании названия классов необходимо соблюдать регистр символов, согласно тому, как вы назвали класс в описании стиля!

Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько - это уже класс.

.8Свойства элементов

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

Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.

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

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

Еще один из интересных вариантов применения CSS скрывается за, казалось бы, простой возможностью: вы можете указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать один слой текста на другой и получать весьма интересные и привлекательные результаты.

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

Создадим новый html-файл и составим описание стилей для трех объектов:

<HEAD>

<STYLE type="text/css">{font-family: Verdana; font-size: 70pt; font-weight: bold;}

.z1 { color: silver; margin-top: 100px; margin-left: 70px;}

.z2 {color: navy; margin-top: -118px; margin-left: 68px;}

</STYLE>

</HEAD>

В этом описании мы присвоили <BODY> (впрочем, это мог быть практически любой другой тег) размер, шрифт и начертание - в таком стиле будут отображаться все элементы страницы. Это было сделано лишь ради стремления уменьшить размер файла странички, вместо этого можно было описать эти параметры дважды: для каждого из классов z. Далее мы описываем два стиля, которые отличаются цветом и размером отступов вокруг них: нижний слой описывается стилем z1, а верхний - z2. Используя отрицательные значения отступов и подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий...

<DIV>

</BODY>

Откроем Web-редактор и создадим файл с будущим названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа <P>, который будет использоваться на всех страничках нашего сайта:

P {family: Times New Roman, serif;: #000000;left: 15%;right: 15%;top: 1pt;bottom: 1pt;indent: 1cm;align: justify;

}

Внутри описания стиля для удобства форматирования вы можете использовать любое количество пробелов и переносов строк - при чтении стиля броузер просто отбросит все лишние пробелы.

В этом стиле мы задали, что параграфы <P> на всех страничках, которые используют это описание, будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен, другим шрифтом, но из этого семейства (serif). Цвет шрифта мы установили черный, выравнивание - полное (по обеим сторонам). Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью: по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не очень удобно, так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал, который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать. В стиле параграфа, который мы создали, установлены боковые отступы в 15 % ширины окна и вертикальные отступы в 1 пункт - так текст статьи будет гораздо читабельнее.

Cоздадим так же стиль для заголовков статей:

H2 {family: Verdana, Arial Cyr, Arial;weight: bold;size: 14pt;: black;left: 20%;top: 1cm;-align: left;

}

Все заголовки наших страниц, оформленные тегом <H2>, будут отображаться жирным шрифтом Verdana или, если этот шрифт не установлен, шрифтом Arial. Размер заголовка мы установим равным 14 пунктам, цвет черный, отступ слева равен 20 % ширины страницы, а отступ сверху - 1 см. Заголовок будет выравниваться относительно левого края страницы.

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

Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:

Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр HREF="URL" в нашем случае будет просто именем нашего файла стилей (styles.css).

2.Структура сайта

Сайт представляет собой несколько html страниц, связанных между собой гиперссылками + использование CSS. Также используются ссылки на сторонние ресурсы.

Тема сайта - Сайт фанатов творчества американской писательницы Джудит Рамелт .

Имеются 5 разделов:

¾Главная

¾Биография

¾Галерея

¾Новости

¾Книги

Раздел Главная - стартовая страница, на которой содержится информация о разделах (Рисунок 2)

Рисунок 2 - Главная страница

Раздел Туркменский блюда - страница (рис 1.2)

Рисунок 1.2

В раздел Галерея национальный блюда находятся изображения (рис 1.3)

Рисунок 1.3

В разделе Новости Туркменский кухня, касающиеся творчества (рис 1.4)

Рисунок 1.4

.2 Технология разработки web-сайта

- Создание страницы в блокноте

Описание всех примечательных кодов (html, css)

Заключение

сайт html алгоритм программный

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

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

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

Список использованных источников

1Лещев, Д. Создание интерактивного web-сайта / Д. Лещев. - Спб.: Питер, 2003. - 544 с.

2Холмогоров, В. Основы веб-мастерства: Учебный курс: 2-е издание / В. Холмогоров - Спб.: Питер, 2003. - 467 с.

Кузнецов И. Анимация для интернета: Краткий курс / И. Кузнецов - Спб.: Питер, 2003. - 496 с.

Гончаров, А. Ю.Самоучитель Html /А.Ю. Гончаров. - Спб.: Питер, 2001. - 382 с. Федорчук, А. В.

Как создаются web-сайты: Краткий курс / А. В. Федорчук. - Спб.: Питер, 2001. - 427 с.

Приложение

Исходный код сайта

<html>

<style>.ask

{style: italic; <!-с фуксом отличается -->-size: 10pt; <!-выброчны блюда-->

font-family: Arial, sans-serif;: green; <!-каждому соответствует-->

}

</style>

<head>

<title> Имя блюда </title>

<style>

#navbar {: 0;: 0;style-type: none;: 130px;

}

#navbar li {left: 10px solid #666;bottom: 1px solid #666;

}

#navbar a {color: #949494;: #fff;: 5px;decoration: none;weight: bold;left: 5px solid #33ADFF;: block;

}

#navbar a:hover {color: #f90;left: 5px solid #3333FF;

}img{: 10px solid #dddddd; : 0 15px 15px 0;

webkit-transition: all linear 0.3s;

moz-transition: all linear 0.3s;

ms-transition: all linear 0.3s;

o-transition: all linear 0.3s;: all linear 0.3s;: 0.5;

}

:hover img {: 1;: 10px solid #afd3dc;

}

</style>

</head>

<body background=images/fon1.jpg="fixed"size: 100% 100%

<td colspan=3 =5%=5%=center ="color:#000000"> <big> <b>ishimizin ustunligi

</b>

</big>

</td>

<tr>

</td>

<big>

</big>

</td>

</tr>

<tr>

<td height=30%=5%

<li><A HREF="page1.html" >Главно</A></li>

<li><A HREF="page2.html" >Оделно 1</A></li>

<li><A HREF="page3.html" >Оделний пункт 2</A></li>

<li><A HREF="page4.html" >рецепт</A></li>

<li><A HREF="page5.html" >Разные блюда</A></li>

<li><A HREF="podl.html" >Разные фкус</A></li>

<li><A HREF="Norm.html" >Отличается вид</A></li>

</ul>

</td>

<center><b><h1> Рецепты некоторых национальных туркменских блюда ©</h1></b></center></p>

<span>

В национальной кухне туркмен за годы Советской власти произошли значительные изменения.</a>

<p>

сахар, различные рыбные, мясные и овощные консервы.Рацион питания стал значительно богаче. Но по-прежнему свои любимые блюда туркмены готовят из мяса, муки и молочных продуктов:</p>

<LI> В современной туркменской кухне уже стали применяться сочетания мяса с другими продуктами: мясо-мучные, мясо-крупяные, мясо-овощные.</LI>

<LI> Так, пловы называются «аш», бешбармак - «гулак» (у текинцев - «белке», йомудов - «куртук»).</LI>

<LI> Из всех среднеазиатских кухонь только туркменская в ряде районов, особенно примыкающих к Каспийскому морю, широко применяет рыбу в своем рационе,

а у огурджалинцев она занимает даже центральное место в кухне.</LI>

</br><p>

font-family: Arial, sans-serif;

color: green;

}

</style>

<p>

<h3>В современной туркменской кухне уже стали применяться сочетания мяса с другими продуктами: мясо-мучные, мясо-крупяные, мясо-овощные!</h3>

<span>

</td>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

> </td>

</tr>

<td align=center colspan=3

> Электронный адрес

<A href=Bahbit94@mail.ru>Bahbit//Bahbit94@mail.ru</A>

</td>

</body>

}.html

<html>

<head>

<title> Etmeli ishimiz </title>

<style>

#navbar {: 0;: 0;style-type: none;: 130px;

}

#navbar li {left: 10px solid #666;bottom: 1px solid #666;

}

#navbar a {color: #949494;: #fff;: 5px;decoration: none;weight: bold;left: 5px solid #33ADFF;: block;

}

#navbar a:hover {color: #f90;left: 5px solid #3333FF;

}

</style>

</head>

<body background=images/fon1.jpg="fixed"size: 100% 100%

туркменский национальный блюда

</b>

</big>

</td>

<tr>

</td>

<big>

</big>

</td>

</tr>

<tr>

<td height=30%=5%

<li><A HREF="page1.html" >Главно</A></li>

<li><A HREF="page2.html" >Оделно 1</A></li>

<li><A HREF="page3.html" >Оделни пункт 2</A></li>

<li><A HREF="page4.html" >рецепт</A></li>

<li><A HREF="page5.html" >разные Блюды</A></li>

<li><A HREF="podl.html" >разный фкус</A></li>

<li><A HREF="Norm.html" >отличает вид</A></li>

</ul>

</td>

<span>

Хотя у туркмен все блюда, имеют собственные туркменские названия. Например, плов называется «аш», манты - «берек», бешбармак - «дограма». </span>

<p>

пернатой дичи (фазанов, куропаток, перепелок). </p>

<LI> Национальной туркменской сладостью является особое блюдо типа халвы.</LI>

<LI> Способ приготовления мяса туркменами-текинцами основан на комбинировании различных условий сушки.</LI>

<LI> Овощей едят мало, в основном редьку, помидоры, тыкву, морковь, маш.</LI>

</br><p>

}

</style>

<p>

<h3> Кстати, его добавляют не только в мясные но и в рыбные блюда. Из бахчевых культур используются дыни, арбузы! </h3>

<span>

</td>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<td height=40%=5%

> </td>

</tr>

<td align=center colspan=3

> Электронный адрес

<A href=Bahbit94@mail.ru>Bahbit //Bahbit94@mail.ru</A>

</td>

</body>.html

<html>

<head>

<title> Etmeli </title>

<style>

#navbar {: 0;: 0;style-type: none;: 130px;

}

#navbar li {left: 10px solid #666;bottom: 1px solid #666;

}

#navbar a {color: #949494;: #fff;: 5px;decoration: none;weight: bold;left: 5px solid #33ADFF;: block;

}

#navbar a:hover {color: #f90;left: 5px solid #3333FF;

}

</style>

</head>

<body background=images/fon1.jpg="fixed"size: 100% 100%

туркменский национальный блюда

</b>

</big>

</td>

<tr>

</td>

<big>

</big>

</td>

</tr>

<tr>

<td height=30%=5%

<li><A HREF="page1.html" >Главно</A></li>

<li><A HREF="page2.html" >оделный 1</A></li>

<li><A HREF="page3.html" >оделный пункт 2</A></li>

<li><A HREF="page4.html" >рецепт</A></li>

<li><A HREF="page5.html" >разные блюды</A></li>

<li><A HREF="podl.html" >разный фкус</A></li>

<li><A HREF="Norm.html" >отличает вид</A></li>

</ul>

</td>

<center><b><h1> Сымый популярный фукусный блюда:</h1></b></center></p>

<ol>

<LI><p>

</ol>

</td>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<td height=60%=5%

> </td>

</tr>

<td align=center colspan=3

> Электронный адрес

<A href=Bahbit94a@mail.ru>Bahbit//Bahbit94a@mail.ru</A>

</td>

</body>

Технология разработки web-сайта

<HTML>

<HEAD>

<TITLE> МатематикаКнига </TITLE>

</HEAD>

<H3 ALIGN = RIGHT> ОАО "ИНФОРМКнига" </H3>

<H1 ALIGN = CENTER> <FONT COLOR = "#804040"> Добро пожаловать!</FONT> </H1>

<H3 ALIGN = CENTER> Вам нужна срочная поддержка при организации собственного бизнеса? </H3>

<H3 ALIGN = CENTER>Вы столкнулись с проблемами в производстве?</H3>

<H3 ALIGN = CENTER>Вы хотите узнать о новинках первыми?</H3>

<P> Экономика <P> Электронный бизнес <P>

<P> Информация, которую мы Вам предоставляем, самая достоверная и актуальная! </P>

<H2> Контактная информация </H2>

<P> Телефон: (095) 345-67-89 </P>

<P> Почтовый адрес: 12-6, ул.Знаний, Москва, 123456 </P>

</BODY>

</HTML>

Создание страницы в блокноте

<HTML> <HEAD> <TITLE> Учебный сайт</TITLE> <META "Учебный сайт"> </HEAD> <BODY <BR> <BR> <H1> <center> Учебный сайт</center> </H1> <BR> <BR> <BR> <TABLE <TR <TD Я - совсем крутой программист</TD> </TD> </TR> <TR> <TD> <TD <TD>

</TD> </TR> <TR <TD Музыка на все времена</FONT> </A> </TD> <TD Наш адрес:

</TD> </TR> </TABLE> </BODY> </HTML>

Описание всех примечательных кодов (html, css)

·<!DOCTYPE> <#"justify">A

·<a> <#"justify">B

·<b> <#"justify">C

·<canvas> <#"justify">D

·<datalist> <#"justify">E

·<em> <#"justify">F

·<fieldset> <#"justify">H

·<h1> <#"justify">I

·<i> <#"justify">K

·<kbd> <#"justify">L

·<label> <#"justify">M

·<main> <#"justify">N

·<nav> <#"justify">O

·<object> <#"justify">P

·<p> <#"justify">Q

·<q> <#"justify">R

·<rp> <#"justify">S

·<s> <#"justify">T

·<table> <#"justify">U

·<u> <#"justify">V

·<var> <#"justify">W

·<wbr> <#"justify">X

Изучение синтаксиса и основных операторов HTML и CSS

Изучение синтаксиса и основных операторов HTML и CSS

Похожие работы на - Изучение синтаксиса и основных операторов HTML и CSS