Файл: Системы программирования (Сравнение концепций WEB: WEB 1.0, WEB 2.0, WEB 3.0, WEB 4.0).pdf

<main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице, и размещайте прямо внутри <body>. В идеале, он не должен быть вложен в другие элементы.
<article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
<section> подобен <article>, но больше подходит для сгруппирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или <section> на несколько <article>.
<aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т.д.).
<header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
<nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и/или название сайта или компании. Вторичные ссылки и т.д. не входят в навигацию.
<footer> представляет собой группу конечного контента для страницы.

Язык HTML — это язык гипертекстовой разметки, отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

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

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

2.1. Размещение и оформление текста

Разбивка на абзацы

Чтобы разместить определенный текст на странице, текст может быть заготовлен заранее, тогда добавляются требуемые теги, или же Интернет-страница должна быть в виде шаблона, текст можно ввести в него с клавиатуры или скопировать через буфер обмена. Когда мы в тексте прописываем абзац, в браузере это игнорируются, поэтому каждый абзац обрамляется парой тегов: <P> (в начале) и </P> (в конце),так как этот тег закрывающийся, тогда между абзацами автоматически оставляется небольшой отступ.

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

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

Полезным также является тег <WBR>, определяющий «скрытый» разрыв строки, т.е перенос текста на новую строку выполняется в данном месте только в том случае, если это необходимо ( а именно, оказавшись в середине строки, которая не выходит за правый край окна, тег <WBR> никакого влияния на размещение текста не оказывает).[7]

Выравнивается с помощью атрибута ALIGN, если по умолчанию то будет слева, ALIGN записывается внутри тега <P>: < P ALIGN =… >, где можно записать одно из следующих значений:

CENTER - центрировать

RIGHT – выровнять по правому краю

LEFT – выровнять по левому краю

JUSTIFY – выравнивание по формату (по левому и правому краям одновременно).

При использовании данного атрибута в конце абзаца нужно обязательно записать закрывающий тег </P>.

Пример:

<TITLE> Абзацы</TITLE>

</HEAD>

</BODY>

<P> По умолчанию- левый край. </P>

<P ALIGN=CENTER> Значение CENTER <BR> разрыв строки. <BR> </P>

<P ALIGN=RIGHT> Значение RIGHT — выравнивание по правому краю. </P>

<P ALIGN=LEFT> Значение LEFT — выравнивание по левому краю.</P>

<P ALIGN=JUSTIFY> Значение JUSTIFY –выравнивание по ширине </P>

</BODY> </HTML>

Рис. 2. Разбивка на абзацы.

Текстовый блок

В случае необходимости указания специальных свойств отдельному фрагменту текста используется тег <DIV>. Изменение свойств осуществляется посредством назначения выбранному фрагменту текста стиля CSS, например:

<DIV STYLE=''COLOR: RED;''> Фрагмент текста, набранный серым цветом. </DIV>

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

Для этого тега возможно использование атрибута типа выравнивания ALIGN.[18]

Заголовки и подзаголовки

В HTML чтобы объявить текст заголовком или подзаголовком ( задав для него крупный и жирный шрифт, чем для остального текста), достаточно заключить абзац в тег <H*>...</H*>, где записаны звездочки записывается цифры от 1 до 6 (если тег открыт к примеру с цифрой 3 , то и закрывается он с той же цифрой). При 1-это задает шрифт наибольшего размера, 2-чуть меньше и т. д. до 6. Так же можно указать выравнивание, по умолчанию будет стоять по левому краю. Чтобы выровнять, можно воспользоваться атрибутом ALIGN и записать в составе открывающего тега <H*>.

Пример:

<H1 ALIGN=CENTER> Заголовок по центру (H1)</H1>

<H3 ALIGN= RIGHT > (Н3) по правому краю </H3>

<H5 ALIGN=LEFT> (Н5) по левому краю </H5>

<H6 > (Н6) по левому краю </H6>

Изменение атрибутов шрифта: вид, размер символов, цвет.

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

1)Чтобы установить желаемый цвет текста COLOR= ''[цвет]'', для установки желаемого цвета используется словесное обозначение( White,Black,Green), также используется цифровой код(#FFFFFF,#000000,#008000), или же значение RGB(Red,Green,Blue) (255 250 250, 000, 0 128 0).

Таблица 2

Названия цветов

Цвет

Значение RGB

Символьная метка

Цифровой код

Белый

Черный

Зеленый

Светло-зеленый

Серый

Светло-серый

Желтый

Темно-бордовый

Синий

Темно-синий

Голубой

Изумрудный

Красный

Пурпурный

Розовый

Оливковый

255 255 255

000

0 128 0

0 255 0

128 128 128

192 192 192

255 255 0

128 0 0

0 0 255

0 0 128

0 255 255

0 128 128

255 0 0

128 0 128

255 0 255

128 128 0

White

Black

Green

Lime

Gray

Silver

Yellow

Maroon

Blue

Navy

Aqua

Teal

Red

Purple

Fuchsia

Olive

#FFFFFF

#000000

#008000

#00FF00

#808080

#C0C0C0

#FFFF00

#800000

#0000FF

#000080

#00FFFF

#008080

#FF0000

#800080

#FF00FF

#808000

- 1. Для того чтобы уменьшить или увеличить размер шрифта используется атрибут SIZE=[цифра], указывается размер шрифта в неких ''абсолютных'' единицах (от 1 до 7, по умолчанию 3).

Таблица 3

Список размеров

Значение атрибута	SIZE Размер символов в пикселях
1	9
2	10
3	12
4	14
5	18
6	24
7	36

Также может предаваться знаком ''+'' или ''-'', указывающим, что требуется увеличить или уменьшить величину шрифта на заданное количество условных единиц относительно текущего размера (например, <FONT SIZE=-2> ... </FONT>).

3) Стиль шрифта текста, отображаемого на экране- атрибут FACE=''[название шрифта]'', где в качестве значения указывается название желаемого шрифта, например: <FONT FACE = ''Courier New''>...</FONT>.

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

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

Пример действия атрибута FACE и COLOR:

<FONT FACE=''Arial Cyr'' COLOR=BLUE> ШРИФТ </FONT>

<FONT FACE=''Times new Roman Cyr'' COLOR= #008000> РАЗНОГО </FONT>

<FONT FACE=''Courier New Cyr'' COLOR= «0 255 255» > НАЧЕРТАНИЯ И ЦВЕТА </FONT> </P>

Пример действия атрибута SIZE:

Результат на экране:

шРИФт

Помимо атрибута SIZE, который находится в теге <FONT> для увеличения или уменьшения размера шрифта можно использовать и специальные теги <BIG>...</BIG> отвечающий за увеличение или <SMALL>...</SMALL>, соответственно за уменьшение, размер заключенного в них текста на одну ''условную единицу''. Эти контейнеры вкладывать друг в друга несколько раз, то можно увеличить/уменьшить шрифт на несколько ''условных единиц''.

Таблица 4

Увеличение текста с помощью тега <BIG>

Использование <FONT>	Использование <BIG>
<FONT SIZE=+1>Текст </FONT>	<BIG>Текст </BIG>
<FONT SIZE=+3>Текст</FONT>	<BIG><BIG><BIG>Текст </BIG></BIG></BIG>
<FONT SIZE=+1>Текст<FONT SIZE=+2>Разного</FONT>размера</FONT>	<BIG>Текст <BIG>разного </BIG>размера </BIG>

Аналогична применению работа тега <SMALL> в теге <FONT> атрибута SIZE с отрицательными значениями.

Управление начертанием текста

Управление параметрами текста используется простой способ. В фрагментах текста произвольной длины или отдельных слов, можно использовать специальные теги для делаемого начертания - полужирное, курсивное, подчеркнутое или ''зачеркнутое'' используя соответственные теги <B>...</B>, <I>...</I>, <U>...</U> и <S>...</S>.

Использование подчеркивания в HTML-документе нежелательно, чтобы пользователь не путал такой текст с гиперссылками.[1]

А для получения нижних индексов или верхних используются теги <SUB>…</SUB> и <SUP>…</SUP>. Эти теги могут быть, как вложены в текст абзаца, так и, наоборот, содержать в себе один или несколько абзацев. Также их можно комбинироваться друг с другом для получения ''смешанных'' начертаний.

Пример:

<FONT SIZE=4> <B> Полужирный </B>, <I> курсив </I>, <B> <I> полужирный курсив </B> </I>, <BR> <U> подчеркнутый </U>, <S> «зачеркнутый»</S>, <SUB> нижний </SUB> и <SUP> верхний </SUP> индексы

</FONT> </P>

Рис.3 Начертание текста

Последовательность записи тегов в конце всей получаемой конструкции должна быть обратной по отношению к ее началу.[7]

Для вставки изображения в документ HTML используется тег <IMG>, как вставляется показано ниже:

Элемент IMG

Под графическим изображением подразумевают: схемы, рисунки, графические объекты и карты изображений в форматах JPEG, GIF (включая прозрачные и анимированные), PNG.

Элемент IMG не имеет конечного тэга.[17]

Тег <IMG> имеет следующие атрибуты:

Атрибут: Src

Атрибут этот является важным параметром. Указывает адрес (URL-адрес) до графического файла, или же название самого графического файла(если HTML документ находится в той же папке с графическим файлом) с расширением (поддерживаются *.jpg, *.gif, *.png).

Атрибут: Width

Определяет ширину изображения в пикселях.

Атрибут: Height

Определяет высоту изображения в пикселях.

Обязательно задаются значения параметров «width» и «heght», резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это просто плохо смотрится. [17]

Смотрите также файлы

Себестоимость продукции и методика ее определения, на примере реально существующей организации (Понятие и виды себестоимости продукции).pdf

Виды кредитных операций и кредитов (На примере АО «Альфа-банк»).pdf

Сравнительный анализ теорий конкуренции.pdf

История развития программирования в России.pdf

Назначение и структура системы защиты информации коммерческого предприятия (Понятие «информационная безопасность», проблемы, задачи).pdf

Файл: Системы программирования (Сравнение концепций WEB: WEB 1.0, WEB 2.0, WEB 3.0, WEB 4.0).pdf

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

2.1. Размещение и оформление текста

Смотрите также файлы

Информация

Списки файлов

Дополнительно