48014

Форматирование HTML-документа

Лекция

Информатика, кибернетика и программирование

P P Элемент абзаца Вместе с элементом P можно использовать атрибут выравнивания lign: lign= left выравнивание по левому краю;lign= center выравнивание по центру;lign= right выравнивание по правому краю;lign= justify выравнивание по ширине; BR Элемент обеспечивающий принудительный переход на новую строку. NORB norb Этот элемент по своему действию является прямой противоположностью предыдущему. Этот элемент требует наличия конечного тега. CENTER center Элемент для центрирования текста а точнее любого содержимого рисунка таблицы...

Русский

2013-12-06

97.5 KB

0 чел.

Лекционно-практическое занятие

Форматирование HTML-документа.

<P></P> Элемент абзаца

Вместе с элементом P можно использовать атрибут выравнивания align:

align="left" - выравнивание по левому краю;
align="center" - выравнивание по центру;
align="right" - выравнивание по правому краю;
align="justify" - выравнивание по ширине;

<BR>
Элемент, обеспечивающий принудительный переход на новую строку.

<NORB> </norb>
Этот элемент по своему действию является прямой противоположностью предыдущему. Текст, заключённый между его тегами, будет выведен в одну строку.

<BLOCKQUOTE></blockquote>
Обозначение цитаты. Этот элемент требует наличия конечного тега. Текст не претерпивает никаких изменений, но абзац распологается с отступом.

<CENTER> </center>
Элемент для центрирования текста, а точнее, любого содержимого (рисунка, таблицы, списка и т.д.).

<DIV> </div>
Элемент, похожий на предыдущий. Он позволяет выравнивать содержимое по левому краю, по центру или по правому краю. Для этого стартовый тег должен содержать соответствующий атрибут:

align="left" - выравнивание по левому краю;
align="center"
- выравнивание по центру;
align="right"
- выравнивание по правому краю;

<H1></h1>
Элемент заголовка.

<HR>
Элемент создающий горизонтальную линию.

Элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

align="left"
align="center"
align="right"

Можно задать толщину линии:

size="Толщина в пикселях"

Можно управлять длиной линии:

width="Длина в пикселах"
width="Длина в процентах"

Можно выбирать цвет:

color="Цвет"


Таблица цветов:

FFF
 FFF

CCC
 CCC

999
 999

666
 666

333
 333

000
 000

FFC
 C00

FF9
 900

FF6
 600

FF3
 300

99C
 C00

CC9
 900

FFC
 C33

FFC
 C66

FF9
 966

FF6
 633

CC3
 300

CC0
 033

CCF
 F00

CCF
 F33

333
 300

666
 600

999
 900

CCC
 C00

FFF
 F00

CC9
 933

CC6
 633

330
 000

660
 000

990
 000

CC0
 000

FF0
 000

FF3
 366

FF0
 033

99F
 F00

CCF
 F66

99C
 C33

666
 633

999
 933

CCC
 C33

FFF
 F33

996
 600

993
 300

663
 333

993
 333

CC3
 333

FF3
 333

CC3
 366

FF6
 699

FF0
 066

66F
 F00

99F
 F66

66C
 C33

669
 900

999
 966

CCC
 C66

FFF
 F66

996
 633

663
 300

996
 666

CC6
 666

FF6
 666

990
 033

CC3
 399

FF6
 6CC

FF0
 099

33F
 F00

66F
 F33

339
 900

66C
 C00

99F
 F33

CCC
 C99

FFF
 F99

CC9
 966

CC6
 600

CC9
 999

FF9
 999

FF3
 399

CC0
 066

990
 066

FF3
 3CC

FF0
 0CC

00C
 C00

33C
 C00

336
 600

669
 933

99C
 C66

CCF
 F99

FFF
 FCC

FFC
 C99

FF9
 933

FFC
 CCC

FF9
 9CC

CC6
 699

993
 366

660
 033

CC0
 099

330
 033

33C
 C33

66C
 C66

00F
 F00

33F
 F33

66F
 F66

99F
 F99

CCF
 FCC

CC9
 9CC

996
 699

993
 399

990
 099

663
 366

660
 066

006
 600

336
 633

009
 900

339
 933

669
 966

99C
 C99

FFC
 CFF

FF9
 9FF

FF6
 6FF

FF3
 3FF

FF0
 0FF

CC6
 6CC

CC3
 3CC

003
 300

00C
 C33

006
 633

339
 966

66C
 C99

99F
 FCC

CCF
 FFF

339
 9FF

99C
 CFF

CCC
 CFF

CC9
 9FF

996
 6CC

663
 399

330
 066

990
 0CC

CC0
 0CC

00F
 F33

33F
 F66

009
 933

00C
 C66

33F
 F99

99F
 FFF

99C
 CCC

006
 6CC

669
 9CC

999
 9FF

999
 9CC

993
 3FF

660
 0CC

660
 099

CC3
 3FF

CC0
 0FF

00F
 F66

66F
 F99

33C
 C66

009
 966

66F
 FFF

66C
 CCC

669
 999

003
 366

336
 699

666
 6FF

666
 6CC

666
 699

330
 099

993
 3CC

CC6
 6FF

990
 0FF

00F
 F99

66F
 FCC

33C
 C99

33F
 FFF

33C
 CCC

339
 999

336
 666

006
 699

003
 399

333
 3FF

333
 3CC

333
 399

333
 366

663
 3CC

996
 6FF

660
 0FF

00F
 FCC

33F
 FCC

00F
 FFF

00C
 CCC

009
 999

006
 666

003
 333

339
 9CC

336
 6CC

000
 0FF

000
 0CC

000
 099

000
 066

000
 033

663
 3FF

330
 0FF

00C
 C99

009
 9CC

33C
 CFF

66C
 CFF

669
 9FF

336
 6FF

003
 3CC

330
 0CC

00C
 CFF

009
 9FF

006
 6FF

003
 3FF

Для простоты в HTML определены 16 стандартных цветов, которые вместе с их шестнадцатиричными кодами приведены ниже.

black = "#000000"

green = "#008000"

silver = "#C0C0C0"

lime = "#00FF00"

gray = "#808080"

olive = "#808000"

white = "#FFFFFF"

yellow = "#FFFF00"

maroon = "#800000"

navy = "#000080"

red = "#FF0000"

blue = "#0000FF"

purple = "#800080"

teal = "#008080"

fuchsia = "#FF00FF"

aqua = "#00FFFF"


Форматирование текста

<B> </b>Выделение текста полужирным шрифтом.

<BIG> </big>Увеличенный размер шрифта.

<SMALL> </small>Уменьшенный размер шрифта.

<I> </i>Выделение текста курсивом.

<STRIKE> </strike>Элемент, создающий перечёркнутое начертание текста. Его можно заменять более простым: <S></s>.

<U> </u>Подчеркнутое начертание текста.

<SUB> </sub>Элемент, создающий эффект нижнегоиндекса.
<SUP> </sup>Элемент, создающий эффект верхнего индекса.
<BASEFONT>Элемент, определяющий базовый (основной) размер шрифта. Внутри элемента необходимо указать атрибут:

size="Базовый размер шрифта"

Величина атрибуа может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT (см. ниже), который позволяет задавать отно<FONT> </font>
Определение типа, размера и цвета шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов. Например, абсолютный размер шрифта задаётся при помощи
size (размер):

size="Абсолютный размер шрифта"

Этот атрибут может принимать значения от 1 до 7. Разрем шрифта может задаваться относительно базавого:

size="+число"
size="-число"

При назначении величины для size необходимо учитывать величину базового размера. Обе они в сумме должны соответствовать одному из абсолютных размеров. Так, для базового размера, равного 3, относительный размер может находиться в пределах от -2 до +4. Если величина выходит за допустимый предел, то используется или шрифт размера 7, или шрифт размера 1.

Атрибут face (вид) позволяет задавать тип шрифта.

face="Название шрифта"

сительный размер шрифта.

Элемент FONT может с успехом заменять элементы заголовка H1...H6. Для последних, например, не предусмотрена возможность указания цвета букв. Чтобы заголовок, созданный на основе элемента FONT, хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, B, I и т.д.


Логическое форматирование текста

<ABBR> </abbr>
Тэг отмечает свой текст как аббревиатуру (ABBReviatuon).

<ACRONYM> </acronym>
Этот тэг, также, как и тэг <ABBR>, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы, т.е. произносимые слова состоящие из аббревиатур.

<CITE> </cite>
Этот тэг используется для отметки цитат или названий книг и статей, ссылок на другие источники и т.д. Браузерами такой текст обычно выводится курсивом.

<CODE> </code>
Этот тэг отмечает свой текст как небольшой фрагмент программного кода. Как правило, отображается моноширинным шрифтом.

<DEL> </del>
Тег отмечает свой текст как удалённый. Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Текст, помеченный этим тэгом обычно отображается перечёркнутым текстом.

<DFN> </dfn>
Отмечает свой текстовый фрагмент как определение (DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он встречается в тексте в первый раз.

<INS> </ins>
Отмечает свой текст как всавку (INSertion).Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии.

<EM>
Тэг (EMphasis - выделение, подчёркивание) используется для выделения важных фрагментов текста. Браузеры обычно отражают такой текст курсивом. Применение этого тэга предпочтительние применения тэга физического форматирования
<I>.

<STRONG>
Этот тег  также используется для выделения важных фрагментов текста. Браузеры обычно отражают такой текст полужирным шрифтом. Применение этого тэга предпочтительние применения тэга физического форматирования
<B>. Тэгом <STRONG> обычно размечают более важные фрагменты текста, чем те, что размечены тэгом <EM>.


Организация ссылок

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

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

Текстовые указатели по умолчанию выделяются подчёркиванием. Хотя данные настройки могут быть изменены.

пример

<A href="html_04_01.php">Ссылка на эту же страницу</a>

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

Пример графического указателя ссылки:

<A href="html_04_01.php"><IMG src="picture.gif"></a>

Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определения местоположения файлов выполняется с учётом местоположения документа, в котором имеется такая ссылка.

Тэг <A>.

Этот тэг имеет параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным. Этот тэг является контейнером, поэтому необходимо указывать закрывающий тэг </a>:

<A href="URL-адрес">текст ссылки</a>

Д/з Внутренние ссылки


 

А также другие работы, которые могут Вас заинтересовать

71719. ОПРЕДЕЛЕНИЕ ПОКАЗАТЕЛЕЙ ПЛАСТИЧНОСТИ 179 KB
  В качестве показателей пластичности используется два предела: нижний влажность грунта на границе раскатывания WP когда в грунте такое количество воды что он находится на границе перехода из пластичного состояния в твердого; верхний влажность грунта на границе текучести WL на границе...
71720. ОПРЕДЕЛЕНИЯ ПЛОТНОСТИ СЛОЖЕНИЯ И ВОДОПРОНИЦАЕМОСТИ ПЕСЧАНЫХ ГРУНТОВ 150.5 KB
  От плотности сложения песка зависят его строительные свойства, в том числе статическая и динамическая устойчивость, деформативность, водопроницаемость и т.д. Так, например, если песок в рыхлом состоянии, то он может быть использован в качестве основания только после его уплотнения или скрепления.
71721. Физические основы низкочастотной электротерапии 203 KB
  Раздражение электрическим током определенного характера и силы у большей части органов и тканей вызывает такую же реакцию, как и естественное возбуждение. Кроме того, это воздействие можно строго дозировать как по силе, так и по времени. Это широко используется в физиологии и медицине.
71722. Физические основы высокочастотных электрических методов, применяемых в медицине 320.5 KB
  На опыте убедиться в эффективности действия электрического поля ультравысокой частоты и высокочастотного магнитного поля на хорошо проводящие электролит и плохо проводящие дистиллированная вода структуры. Действие магнитного поля на движущийся заряд.
71723. Физические свойства ЭКГ 430.5 KB
  Задача электрокардиографии заключается в том чтобы оценить работу сердца электрические процессы в сердце по биопотенциалам регистрируемым с поверхности тела человека. Эти импульсы возникают в проводящей системе сердца которая состоит из синусного узла атриовентрикулярного узла и пучка Гиса.
71724. Физические основы электропроводности биологических тканей при постоянном токе. Лечебный электрофорез и гальванизация 239 KB
  Изучить физические основы применения постоянного электрического тока с лечебной целью. Чем объясняется нарушение закона Ома при прохождении постоянного тока через биологическую ткань С чем связывают первичное действие постоянного тока Почему у анода и катода возбудимость клетки разная.
71725. Изучение импеданса живой биологической ткани 201 KB
  Изучить зависимость импеданса биологической ткани от частоты переменного тока. Определить сдвиг фаз между силой тока и напряжением при прохождении переменного тока через живую ткань. Вопросы входного контроля Что такое электрический ток Что является носителями тока в проводниках...
71726. Определение динамического коэффициента вязкости. Определение коэффициента поверхностного натяжения 465 KB
  Какие режимы течения жидкости существуют Объясните возникновение силы внутреннего трения. Напишите уравнение Ньютона для течения вязкой жидкости. Как зависит вязкость жидкости от температуры Что такое ньютоновские и неньютоновские жидкости Запишите формулу Пуазейля проанализируйте ее.
71727. Изучение поля электрического диполя 887.5 KB
  Цель работы: исследовать поле модели электрического диполя. Основные понятия теории электрического диполя Электрическим диполем называется система состоящая из двух равных по величине но противоположных по знаку точечных зарядов расположенных на расстоянии друг от друга.