рефераты конспекты курсовые дипломные лекции шпоры
- Раздел Программирование
- /
- Структура HTML-документа
Реферат Курсовая Конспект
Структура HTML-документа
Структура HTML-документа - раздел Программирование, 1 Структура Html-Документа 2 Форматирование Текста С Помощью Html...
1 Структура HTML-документа
2 Форматирование текста с помощью HTML
2.1 Задание полей на Web-странице
2.2 Задание цвета на Web-странице
2.3 Выравнивание текста на Web-странице
2.4 Задание заголовков HTML-документа
2.5 Задание размера шрифта
2.6 Задание шрифта по имени
2.7 Физическое форматирование символов
2.8 Логическое форматирование символов
2.9 Вставка специальных символов
2.10 Выделение текста горизонтальной линией
Пример №1
Пример №2
Пример №3
Введение
Для подготовки Web-документа используется язык разметки гипертекста HTML (HyperText Markup Language). Как это следует из названия, HTML не является алгоритмическим языком программирования, а, как язык разметки, обладает средствами представления текста и изображений на экране в виде Web-страницы. HTML также позволяет работать с гипертекстовыми ссылками, с помощью которых осуществляется доступ к другим Web-страницам.
Стандарт HTML создан и поддерживается некомерческой международной организацией W3C (World Wide Web Consortium).
Для создания документа на языке HTML необходимо пользоваться текстовыми редакторами, работающими с простым текстом, т.е. таким текстом, который не содержит служебной информации. Такими редакторами являются, например, NotePad (Блокнот) или FAR.
После того, как с помощью текстового редактора HTML-документ создан, он должен быть сохранен на диске в виде файла с расширением .htm. Это позволит после щелчка мыши по этому файлу запустить браузер, который осуществит формирование Web-страницы в соответствии с данным HTML-документом. Можно поступить по-другому. Сначала запустить браузер, а затем в его поле адреса (Address) указать путь к файлу с данным HTML-документом.
Браузером (browser) называется программа, которая путем интерпретации HTML-документа, осуществляет формирование Web-страницы на экране, а также взаимодействует с Web-серверами. Примерами браузеров (приведены в порядке популярности) могут служить такие программы, как Microsoft Internet Explorer (MIE), Mozilla Firebox, Apple Safari, Netscape Navigator, Opera и др.
С помощью HTML можно создавать только статические Web-страницы. Для создания динамических страниц необходимо совместное использование HTML с такими языками, как JavaScript, PHP и др.
Структура HTML-документа
Примером одиночного тэга служит тэг перевода на новую строку: <BR> (браузерами не обрабатываются символы текстовых редакторов перевода каретки… В HTML-документе в наименованиях тэгов и их параметров, а также в словах,… HTML-документ имеет следующую базовую структуру, которая состоит из заголовка HTML-документа и тела HTML-документа: …Форматирование текста с помощью HTML
Задание полей на Web-странице
Для задания левого, правого, верхнего и нижнего поля документа на Web-странице используются соответственно параметры LEFTMARGIN, RIGHTMARGIN, TOPMARGIN и BOTTOMMARGIN тэга <BODY>. Значение каждого поля указывается в пикселях. Например, верхнее поле размером 50 пикселей задается так:
<BODY TOPMARGIN="50" >
Задание цвета на Web-странице
Когда браузер выводит на экран текст, то в качестве цвета текста и цвета фона он использует значения, заданные по умолчанию (в примере 1 цвет текста - черный, а цвет фона - светло-серый). Однако в HTML есть средства для задания и изменения как цвета текста, так и цвета фона. Для этого используются соответственно параметры TEXT и BGCOLOR тэга <BODY>.
Если необходимо указать некоторый цвет только для части текста, то используется параметр COLOR тэга <FONT>.
В HTML есть два способа задания значения цвета.
В первом способе значение цвета задаются с помощью трех составляющих цветов в виде численного значения #RrGgBb, где:
Rr - две 16-ричние цифры, задающие компоненту красного цвета;
Gg - две 16-ричние цифры, задающие компоненту зеленого цвета;
Bb - две 16-ричние цифры, задающие компоненту синего цвета.
Значение компоненты каждого цвета может меняться от 0 до FFh, т.е. от 0 до 255. Например, значение #FF0000 задает ярко-красный цвет, #00AA00 - темно-зеленый, #С0С0С0 - серебристый. Таким способом можно задать более 16 млн (2 24) цветов.
Вторым способом можно задать только 16 основных значений цвета в виде символических (английских) названий. В таблице 1 приведены эти цвета, их символические названия и численные значения в виде #RrGgBb.
Таблица 1Цвет Символическое название Численное значение
Морской волны Aqua #00FFFF
Черный Black #000000
Голубой Blue #0000FF
Малиновый Futsia #FF00FF
Серый Gray #808080
Зеленый Green #008000
Ярко-зеленый Lime 00FF00
Темно-красный Maroon #800000
Темно-синий Navi #000080
Оливковый Olive #808000
Пурпурный Purple #800080
Красный Red #FF0000
Серебренный Silver #C0C0C0
Темной морской волны Teal #008080
Белый White #FFFFFF
Желтый Yellow #FFFF00
Образцы задания цвета на Web-странице средствами HTML приведены в примере № 2 Оглавление
Выравнивание текста на Web-странице
Каждый параграф текста может быть выравнен по левому краю, по правому краю, по обеим краям (по ширине) или по центру экрана. Для этого используется… left: параграф выравнен по левому краю; right: параграф выравнен по правому краю;Адание заголовков HTML-документа
Шрифты заголовков разных уровней отличаются друг от друга и от основного текста размером и другими особенностями, заданными по умолчанию в… Цвет заголовков задается или параметром TEXT тэга <BODY>, если параметр… Заголовки могут быть выравнены, так же как и параграфы, с помощью параметра ALIGN. По умолчанию для заголовков задано…Адание шрифта по имени
Поскольку неизвестно, какой тип шрифтов использует браузер на стороне пользователя, можно с помощью параметра FACE тэга <FONT> явным образом… В одном параметре FACE можно указать несколько типов шрифтов, которые…Физическое форматирование символов
В HTML предусмотрено несколько тэгов-контейнеров для физического форматирования символов. Эти тэги определяют внешний вид символов явным образом в… <B> . . . </B>: выделяет текст жирным шрифтом; <I> . . .</I>: выделяет текст наклонным шрифтом (курсивом);Логическое форматирование символов
Тэги логического форматирования символов в отличие от тэгов физического форматирования указывают участки текста, различаемые по смысловому… <CITE> . . . </CITE>: цитата; <EM> . . . </EM>(emphasis - ударение): текст, имеющий большое значение;Вставка специальных символов
В HTML предусмотрено четыре специальных символов, предназначенных для служебных целей (для выделения тэгов и значений их параметров). Это символы… Таблица 3Символ ЗаменаВыделение текста горизонтальной линией
При оформлении Web-страниц часто используется такой прием, как разделение параграфов текста горизонтальной линией. Для того, чтобы вставить в HTML-документ горизонтальную разделительную линию… ALIGN - определяет выравнивание линии и имеет такие значения:Введение
Каскадные листы (таблицы) стилей CSS (Cascading Style Sheets) также как и язык HTML разработаны консорциумом W3C и тоже служат целям представления документов на Web-страницах. CSS не являются частью HTML, но имеется возможность их подключения в HTML-документ для совместного использования.
Каскадные листы стилей, не выполняя всех функций языка HTML, обладают расширенными возможностями при форматировании текста. Поэтому одним из современных требований на разработку Web-сайтов является рекомендация использования CSS вместо тэгов HTML везде, где это возможно.
Формат CSS
Каскадные листы стилей имеют следующий формат: CSS-идентификатор {свойство1:значение; свойство2:значение; . . .}Свойства задания полей документа
Поля HTML-документа могут быть заданы с помощью следующих свойств CSS, которые указывают размер :
margin-left - левого поля;
margin-right - правого поля;
margin-top - верхнего поля;
margin-bottom - нижнего поля.
Размер всех полей может быть задан с помощью одной из следующих единиц измерения (если единица измерения не задана, то предполагается, что она задана в пикселях):
pt - в пунктах (1/72 дюйма);
px - в пикселях;
mm - в мм;
cm - в см;
in - в дюймах;
% - в процентах размера родителя.
Например, CSS
P{margin-left:2сm}
задает размер левого поля всех параграфов текста равным 2 см.
Отметим, что в случае, когда для одного и того же свойства тэга с помощью HTML и CSS задаются разные значения, приоритет отдается CSS. Например, при следующем задании верхнего поля документа:
<BODY TOPMARGIN="100" STYLE="margin-top:50px">
верхнее поле будет иметь размер 50 пикселей. Оглавление
Свойства текста
Для задания параметров текста на Web-страницах используются следующие свойства CSS:
text-align - задание горизонтального выравнивания шрифта;
text-indent - задание отступа первой строки параграфа;
text-decoration - задание декоративного выделения текста;
word-spacing - задание расстояния между словами в тексте;
letter-spacing - задание расстояния между символами в слове.
Свойство text-align
Горизонтальное выравнивание текста на Web-страницах осуществляется с помощью свойства text-align, которе имеет следующие значения:
left - по левому краю экрана;
right - по правому краю экрана;
justify: текст выравнен по обеим краям (если длина текста больше длины строки экрана);
center - по центру экрана.
Свойство text-indent
С помощью свойства text-indent задается величина отступа первой строки параграфа (единицы измерения - те же, что и в пункте 1.1). Значение по умолчанию 0. Оглавление
Свойство text-decoration
Помимо указания разных цветов и разных параметров шрифтов для выделения фрагментов текста может быть также использовано свойство text-decoration, которое может принимать следующие значения:
none - декоративное выделение текста не используется;
underline - подчеркивание (линия снизу);
overline - надчеркивание(линия сверху);
line-through - перечеркивание.
Свойство word-spacing
Свойство word-spacing указывает расстояние между словами в тексте и может иметь следующие значения:
normal - стандартное расстояние;
величина (см. пункт 1.1).
Свойство letter-spacing
Свойство letter-spacing указывает расстояние между символами в слове и может принимать следующие значения:
normal - стандартное расстояние;
величина (см. пункт 1.1).
Например, CSS
.big_space{letter-spacing:5mm}
задает для всех тэгов класс текста "big_space" с увеличенным расстоянием между буквами.
Свойство writing-mode
Свойство writing-mode задает направление строк текста: горизонтальное или вертикальное и может принимать следующие значения: lr-tb - задает обычное горизонтальное расположение строк текста; текст пишется… tb-rl текст пишется сверху вниз и справа налево.Свойство задания цвета
Для задания цвета на Web-страницах используется свойство color . Имеется три возможности задания значения цвета (первые две такие же, как в HTML –
с помощью английских названий;
с помощью значения #RrGgBb;
с помощью значения #RGB.
Третий вариант задания цвета отличается тем, что значения компонентов цветов изменяются в пределах от 0 до 16.
Свойства задания шрифтов
Для задания параметров шрифтов на Web-страницах используются следующие свойства CSS:
font-style - задание стиля шрифта;
font-weight - задание жирности шрифта;
font-variant - задание вида строчных букв;
font-size - задание размера шрифта;
font-family - задание семейства шрифтов.
Свойство font-style
Свойство font-style имеет следующие значения:
normal - обычный;
italic - наклонный (курсив).
Свойство font-weight
Свойство font-weight имеет следующие значения:
normal - обычный;
bold - полужирный.
Оглавление
Свойство font-variant
Свойство font-variant имеет следующие значения:
normal - обычный;
small-caps - делает строчные буквы заглавными, но меньшего размера.
Свойство font-size
Размер шрифта с помощью свойства font-size может задаваться:
в физических единицах: pt, px, mm, cm, in, % (см. пункт 1.1);
в условных единицах: xx-small, x-small, small, medium, large, x-large,xx-large;
в относительных единицах:smaller, larger.
Свойство font-family
Свойство font-family задает типы шрифтов по их наименованию также, как это делается в HTML с помощью параметра FACE тэга <FONT>
P{font-family:"Arial Cyr, Arial, HelvDL"}
По умолчанию задается семейство шрифтов Times.
Свойство вертикального выравнивания
Для вертикаьного выравнивания текста используется свойство vertical-align , которое может иметь следующие значения: baseline - выравнивание базовой линии элемента по базовой линии родителя; sub - превращает текст в нижний индекс;Способы задания CSS в HTML-документе
CSS не только расширяет возможности HTML, но и делает форматирование текста единообразным как для отдельно взятого документа, так и для группы документов, имеющих общее назначение. В зависимости от того, насколько общим будет использование тех или иных каскадных листов стилей, применяется один из трех возможных способов использования CSS в HTML-документе:
внешнее задание CSS;
внутреннее задание CSS;
встроенное задание CSS.
Внешнее задание CSS
При внешнем задании каскадные листы стилей формируются в соответствии с описанными выше правилами в виде отдельного файла, так же как и HTML-документ, с помощью простого текстового редактора. В качестве расширения файла для удобства пользователей лучше указать .css, хотя можно задавать и другие расширения.
Например, следующий файл с именем my.css
H1{text-align:center; color:#D0D; font: italic small-caps 0.7in tahoma}
P{text-indent:1.5cm; color:#000080;font-size:large}
содержит каскадные листы стилей, которые задают:
параметры заголовка первого уровня (его выравнивание, цвет и вид шрифта);
параметры параграфа, которые являются общими для HTML-документов (отступ абзаца, цвет и размер шрифта);
Отметим, что при описании параметров заголовка использована сокращенная форма задания свойств шрифта font: italic small-caps 0.5in tahoma вместо обычной font-style:italic; font-variant:small-caps; font-size:0.5in; font-family: tahoma. В этом случае необходимо придерживаться заданного порядка указания значений свойств.
Подключение созданного файла CSS к HTML-документу осуществляется с помощью одиночного тэга <LINK>, который размещается в области заголовка HTML-документа, т.е. между тэгами <HEAD> и </HEAD>. Тэг <LINK> содержит следующие параметры:
REL;
TYPE;
HREF.
Поскольку к HTML-документу подключается файл с каскадными листами стилей, то в качестве значения параметра REL необходимо указать STYLESHEET, в качестве значения параметра TYPE - "text/css". Так как это значение берется браузером по умолчанию, параметр TYPE в тэге <LINK> можно не приводить. В качестве значения параметра HREF необходимо указать путь к файлу, содержащему CSS.
В примере №1 приведен HTML-документ, в котором, наряду с другими способами, показано внешнее задание CSS в HTML-документе. В этом примере в качестве внешнего файла, содержащего CSS, используется описанный выше файл my.css.
Внутренее задание CSS
При внутреннем задании каскадные листы стилей описываются так же, как и при внешнем, но оформляются не в виде внешнего файла, а задаются непосредственно в области заголовка HTML-документа внутри тэга-контейнера <STYLE> . . . </STYLE>.
В примере №1 показано внутреннее задание трех каскадных листов стилей:
один описывает для тэга P класс текста с небольшими наклонными темно-зелеными буквами ("P.green");
другой - задает класс текста с вертикальными строками без указания тэга (".vert");
третий задает разреженный текст с помощью идентификатора тэга ("#razr").
Если в качестве CSS-идентификатора задан HTML-идентификатор с классом или только класс, то в тэге, который использует данный класс, необходимо указывать параметр CLASS, задающий имя класса, например:
<P CLASS="green">
Отметим, что для тэга с указанием класса наследуются все свойства тэга кроме тех, что описаны в свойствах класса. В вышеприведенном примере наследуется такое свойство параграфа, как отступ, а изменяются цвет, стиль и размер шрифта (по умолчанию задан стиль normal).
Встроеное задание CSS
При встроенном задании свойства каскадных листов стилей указываются прямо в тэге после параметра STYLE. Единственное отличие в синтаксисе описания CSS заключается в том, что свойства CSS и их значения берутся не в фигурные скобки, а в двойные кавычки.
При встроенном задании CSS, а также при описании CSS без указания тэга удобно использовать тэг-контейнер <SPAN>. . . <SPAN>, который с помощью параметра CLASS может быть использован для указания диапазонов действия указанного класса.
В примере (№1) приведен HTML-документ, в котором показано три способа задания CSS в HTML-документе: внешнего, внутреннего и встроенного.
Пример 1
<HTML>
<HEAD>
<TITLE> Использование CSS в HTML-документе </TITLE>
<LINK REL= STYLESHEET HREF="my.css">
<STYLE>
P.green{color:#008000; font-style:italic;font-size:16pt}
.vert{color:#006060; font:large; writing-mode:tb-rl}
#razr{letter-spacing:2.5mm}
</STYLE>
</HEAD>
<BODY>
<H1> Параметры заголовка заданы внешним СSS </H1>
<P CLASS="green"> Параметры этого параграфа заданы с помощью внутреннего использования CSS (класс "green" тэга P).
<P> Свойства абзаца, цвета и размера шрифта этого параграфа наследуются из внешнего CSS.
<CENTER>
<SPAN CLASS="vert"> Вертикальный текст: класс vert </SPAN>
</CENTER>
<P ID="razr"><SPAN STYLE="color:red; font-size:1cm"> В </SPAN>
строенное и внутреннее задание CSS.
</BODY>
</HTML>Оглавление
Индивидуальные задания
Произвольный текстовый документ (реферат, сообщение, объявление и др.) представить с помощью HTML и CSS в виде Web-страницы, которая должна содержать:
заголовок;
текст, разбитый на параграфы;
отдельные фрагменты текста (предложения, слова или символы) должны быть согласно таблицы 1 заданы:
с помошью внешнего задания CSS;
с помошью внутреннего задания CSS;
с помошью встроенного задания CSS;
с использованием классов (не менее трех).
В таблице 1 для каждого варианта и для каждого вида задания CSS приведены значения свойств CSS или названия свойств CSS. В последнем случае значение для указанного свойства выбирается студентом произвольно.
Таблица 1№ Свойства CSS
Внешнее задание CSS Внутренне задание CSS Встроенное задание CSS
1 margin-left, word-spacing color, italic, font-family font-size, overline
2 small-caps, color margin-left, center, bold word-spacing, italic
3 justify, bold letter-spacing, underline, color font-family, right
4 margin-left, center font-family, bold, color word-spacing, line-through
5 justify, color margin-left, letter-spacing, font-size small-caps, italic
6 margin-left, letter-spacing color, bold, font-family font-size, underline
7 line-through, font-size margin-left, center, bold word-spacing, color
8 justify, overline word-spacing, smallcaps, color font-family, right
9 margin-left, right fond-size, italic, color word-spacing, underline
10 right, color margin-left, line-through, font-size small-caps, tb-rl
11 margin-left, italic font-size, word-spacing, font-family overline, color
12 margin-left, small-caps color, bold, word-spacing center, italic
13 bold, letter-spacing justify, color, right font-family, underline
14 center, font-family margin-left, color, line-through word-spacing, bold
15 color, tb-rl justify, margin-left, italic small-caps, font-size
16 letter-spacing, color margin-left, font-family, underline font-size, bold
17 font-size, margin-left line-through, bold, color word-spacing, center
18 overline, word-spacing justify, small-caps, right font-family, color
19 right, fond-size tb-rl, color, underline word-spacing, italic
20 color, margin-left right, font-size, bold small-caps, line-through
Оглавление
– Конец работы –
Используемые теги: структура, HTML-документа0.051
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Структура HTML-документа
Что будем делать с полученным материалом:
Если этот материал оказался полезным для Вас, Вы можете сохранить его на свою страничку в социальных сетях:
| Твитнуть |
Хотите получать на электронную почту самые свежие новости?
Подпишитесь на Нашу рассылку
Реклама
Информация в виде рефератов, конспектов, лекций, курсовых и дипломных работ имеют своего автора, которому принадлежат права. Поэтому, прежде чем использовать какую либо информацию с этого сайта, убедитесь, что этим Вы не нарушаете чье либо право.
© copyright 1999 - 2024 allRefs.net. Все права защищены. Страница сгенерирована за: 0.122 сек.
Новости и инфо для студентов