1_Структура_HTML_документа_Форматироване_

Август 12, 2022

Главная
Информатика
1_Структура_HTML_документа_Форматироване_

Содержание

2. Проектирование и разработка Web-сайтов Веб-сайт — это совокупность логически связанной гипертекстовой информации, оформленной в виде отдельных
3. HTML HTML позволяет формировать на странице сайта текстовые блоки, включать в них изображения, организовывать таблицы, управлять
4. HTML HTML-документом называется файл, содержащий код HTML. Одной из основных функциональных особенностей, характерных именно для данного
5. Браузер Браузер – специальная клиентская программа, предназначенная для просмотра содержимого web-узлов и отображения документов HTML. Браузеры
6. На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++, который можно найти по адресу
8. Структура HTML-документа
9. Теги Директивы HTML называются тегами. Теги заключаются в угловые скобки. Большинство тегов – парные. Закрывающий тег
10. Теги Синтаксис записи тега в совокупности с его атрибутом: Значения атрибутов заключаются в прямые кавычки ’’’’.
11. Структура HTML документа
12. Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype
14. Пример HTML-страницы: Моя первая страница Простейший пример HTML-страницы, содержащий обязательные теги
16. Пример цветной HTML-страницы: Моя первая страница Простейший пример HTML-страницы, содержащий обязательные теги с отображением голубого текста
18. Комментарии Комментарии открываются символьной последовательностью, начинающейся с от-крывающей угловой скобки, восклицатель-ного знака и двух знаков тире
19. Цветовые спецификации Определить тот или иной цвет при создании web-страницы можно двумя методами: посредством задания специальных
20. Цветовые спецификации Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом ставится символ , далее следует
21. Форматирование текста
22. Escape-последовательности Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут
23. Escape-последовательности
24. Тег стандартного абзаца Текст, заключенный в абзац Аргументы ALIGN: right – выравнивание текста по правому краю;
25. Абзац Браузеры, которые интерпретируют мягкие переносы, должны обеспечить следующую семантику: если строка прекращается в месте мягкого
26. Авторское форматирование Я думал, сердце позабыло Способность легкую страдать, Я говорил: тому, что было, Уж не
27. Разрывы строк Для того, чтобы внутри тестового блока браузер отобразил перевод строки, например, для отделения одного
28. Разрывы строк Некоторые браузеры переносят строки самостоятельно, причем разрывают строку в том месте, где она выходит
29. Шрифты Элемент определяет свойства шрифта. Синтаксис записи тега : текст
30. Шрифты Значением атрибута face является название шрифта, который используется для отображения текста, заключенного в теги .
31. Шрифты Атрибут size указывает на размер шрифта. Параметр этого атрибута может быть описан либо абсолютной, либо
32. Шрифты Очевидно, что при использовании тега любой из его атрибутов может быть опущен.
33. Изменение основного шрифта По умолчанию текстовое содержимое документа отображается основным шрифтом, заданным в начальных установках браузера.
34. Задание цвета фона Цвет фона всего документа определяется атрибутом bgcolor тега .
35. Цвет текста Для определения цвета шрифта можно пользоваться одним из 3 способов: назначить цвет символов всего
36. Элементы стиля шрифтов Выделение текста полужирным шрифтом Выделение курсивным шрифтом Выделение текста подчеркиванием Моноширинный текст Уменьшение
37. Фразеологические элементы Фразеологический элемент не указывает точного способа отображения текста, а лишь определяет, что содержимое элемента
38. Оформление цитат Текст длинной цитаты Задает отображение длинных цитат отдельным текстовым блоком. Содержимое элемента выводится с
39. Создаем блочную цитату They went in single file, running like hounds on a strong scent, and
40. Элемент Используется для размещения в документе контактной информации. Элемент представляет собой блок, содержимое которого отображается курсивом
41. Атрибуты тега Общий формат записи тега со всеми допустимыми атрибутами имеет вид: text=”значение2” link=”значение3” vlink=”значение4” alink=”значение5”>
42. Атрибуты тега Атрибут background позволяет поместить на web-страницу фоновый рисунок, записав в качестве параметра атрибута URL
43. Атрибуты тега Атрибут text позволяет задать цвет текста для всего документа в целом. Однако он может
44. Атрибуты тега Атрибут link задает цвет, которым отображается непосещенная гиперссылка, то есть ссылка, к которой посетитель
45. Атрибуты тега Пример использования тега со всеми допустимыми атрибутами: bgcolor="#000000" text="#FFFFFF" link="#008000" vlink="#800080" alink="#FF0000"> Тело документа
46. Применение многоязычного текста Указание языка, на котором составлен документ или его фрагмент выполняется атрибутом lang. В
47. Направление чтения текста Задается атрибутом dir, принимающим значения: ltr – слева направо, rtl – справа налево.
48. Разделы, заголовки и горизонтальные линии
49. Разделы Формат задания раздела: HTML-код или текст или HTML-код или текст Разделы используются для задания параметров
50. Заголовки Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают ориентироваться в содержимом документа. Спецификация
51. Заголовки Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег , где n — целое
52. Заголовки Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6
53. Заголовки По умолчанию заголовки выравниваются по левому краю страницы. Заголовки как блоковые элементы отделяются от текста
54. Горизонтальные линии Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Горизонтальная линия –
56. Скачать презентацию

Слайд 2

Проектирование и разработка Web-сайтов
Веб-сайт — это совокупность логически связанной гипертекстовой информации,

оформленной в виде отдельных страниц и доступной в сети Интернет, другими словами, Веб-сайт — это совокупность программных, информационных, а также медийных средств, логически связанных между собой.
Web-страницы или гипертекстовые документы представляют собой текст, в котором содержатся специальные команды, называемые тегами (tags). Эти теги обеспечивают форматирование элементов страницы и позволяют размещать на ней графические объекты, рисунки, гиперссылки и т.д.
Для подготовки Веб-страниц к публикации в Интернете применяется специальный "язык гипертекстовой разметки" –
HTML (Hyper Text Markup Language).
Разметка гипертекста указывает браузеру, в каком виде информация должна выводиться на экран.
HTML не является языком программирования, он только управляет расположением информации в окне браузера.

Слайд 3

HTML
HTML позволяет формировать на странице сайта текстовые блоки, включать в

них изображения, организовывать таблицы, управлять отображением цвета документа и текста, добавлять в дизайн сайта звуковое сопровождение, организовывать гиперссылки с контекстным переходом в другие разделы сервера или обращаться к иным ресурсам Сети и компоновать все эти элементы между собой. Файлы, содержащие гипертекстовый код, имеют расширение .htm или .html.

Слайд 4

HTML
HTML-документом называется файл, содержащий код HTML.
Одной из основных

функциональных особенностей, характерных именно для данного языка, благодаря которой он и получил свое название, является гиперссылка.
Гиперссылка (Hyperlink) – базовый функциональный элемент html-документа, представляющий собой реализацию динамической связи какого-либо объекта данной web-страницы с контекстным содержимым другого документа.
HTML – язык не транслируемый, но интерпретируемый. Это означает, что для исполнения готового кода его не нужно компилировать, встроенный в специальное программное обеспечение, предназначенное для просмотра web-страниц, интерпретатор «компилирует» код непосредственно в процессе открытия документа. При этом, обнаружив в тексте ошибку, такая программа не выдает соответствующего предупреждения (если страница не содержит встроенных скриптов Java), а попросту игнорирует всю «ошибочную» строку.

Слайд 5

Браузер
Браузер – специальная клиентская программа, предназначенная для просмотра содержимого web-узлов

и отображения документов HTML. Браузеры содержат встроенный транслятор языка разметки гипертекста, компилирующий html-код в процессе открытия web-страницы.
Существует несколько классов броузеров, различающихся в основном спектром реализуемых ими возможностей. Два основных класса – это броузеры, поддерживающие и не поддерживающие отображение графических элементов web-страниц. Большинство современных броузеров относятся к первому классу. Наиболее распространены среди пользователей Интернета браузеры Mozilla Firefox, Opera, Internet Explorer, Chrome.

Слайд 6

На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++, который

можно найти по адресу http://notepad-plus-plus.org/.
К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем будем ориентироваться именно на этот текстовый редактор.
Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code. Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.

Слайд 7

Слайд 8

Структура HTML-документа

Слайд 9

Теги
Директивы HTML называются тегами. Теги заключаются в угловые скобки. Большинство

тегов – парные. Закрывающий тег отличается от открывающего наличием символа /. Синтаксис записи тега:
<ТЕГ> обрабатываемое значение
Теги допускают вложение друг в друга. Все объекты не заключенные в угловые скобки, воспринимаются как текстовые элементы.
HTML не чувствителен к регистру, однако рекомендуется применять при написании тегов заглавный регистр для улучшения читаемости кода.
Тег – это команда html, указывающая интерпретатору брaузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение. Это значение называется атрибутом тега. Тег может иметь атрибут или не иметь его. Тег верхнего уровня не имеет атрибутов.

Слайд 10

Теги
Синтаксис записи тега в совокупности с его атрибутом:
<ТЕГ имя_атрибута_1=”значение” …

имя_атрибута_n=”значение”>
Значения атрибутов заключаются в прямые кавычки ’’’’. Если внутри атрибута тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве внутренних кавычек рекомендуется использовать одинарные. Такое выражение выглядит следующим образом:
<ТЕГ имя_атрибута_1=”значение_1; ’значение2’; значение3”>
Спецификация языка позволяет опускать кавычки в следующих видах атрибутов:
атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например цифр.
атрибуты, состоящие только из цифр от 0 до 9.
атрибуты, обозначающие промежутки времени.
Например, запись атрибутов border=”1” или align=”center” допустимо представить в виде border=1 или align=center.

Слайд 11

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

Слайд 12

Для создания документа HTML5 нам нужны в первую очередь два элемента:

DOCTYPE и html. Элемент doctype или Document Type Declaration сообщает веб-браузеру тип документа.
указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.
А элемент html между своим открывающим и закрывающим тегами содержит все содержимое документа.
Основная часть документа html, фактически все, что увидим в своем браузере при загрузке веб-страницы, располагается между тегами и . Здесь размещаются большинство элементов html.
Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования. Рассмотрим базовые элементы HTML, их предназначение и использование.
Элемент head и метаданные веб-страницы
Одним из первых элементов html-документа является элемент head, задача которого состоит в установке метаданных страницы и ряда сопроводительной информации. Метаданные содержат информацию о html-документе.
Заголовок
Для установки заголовка документа, который отображается на вкладке браузера, используется элемент title

Слайд 13

Слайд 14

Пример HTML-страницы:

Моя первая страница

Простейший пример HTML-страницы, содержащий
обязательные теги

Слайд 15

Слайд 16

Пример цветной HTML-страницы:

Моя первая страница

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

Слайд 17

Слайд 18

Комментарии
Комментарии открываются символьной последовательностью, начинающейся с от-крывающей угловой скобки, восклицатель-ного

знака и двух знаков тире
.
Формат комментария:

Слайд 19

Цветовые спецификации
Определить тот или иной цвет при создании web-страницы можно

двумя методами: посредством задания специальных цветовых меток, обозначающий названия цветов словами, или с помощью шестнадцатеричного цифрового кода, заменяющего эти метки.
Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту, теоретические основы которого были разработаны ученым-физиком Г.Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешивания всего лишь трех красок: красной, зеленой и синей.

Слайд 20

Цветовые спецификации
Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом

ставится символ <#>, далее следует набор из шести знаков в шестнадцатеричной системе счисления.

Для передачи цветов в html предпочтительнее пользоваться шест-надцатеричным цифровым кодом.

Слайд 21

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

Слайд 22

Escape-последовательности
Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения

элементов кода HTML. Это могут быть угловые скобки, прямые кавычки и т.д. Т.е. необходимо, чтобы символы отображались как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Поэтому существуют escape-последовательности, или их еще называют «нотации символьных объектов». Они начинаются символом «&» и заканчиваются «;», а между ними размещается сама команда, записываемая в строчном регистре.

Слайд 23

Escape-последовательности

Слайд 24

Тег стандартного абзаца

Текст, заключенный в абзац

Аргументы ALIGN:
right – выравнивание текста

по правому краю;
left – выравнивание текста по левому краю;
center – выравнивание текста по центру;
justify – выравнивание текста по ширине.
Если при использовании тега

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

Текст

Слайд 25

Абзац
Браузеры, которые интерпретируют
мягкие переносы, должны
обеспечить следующую семантику:
если строка прекращается в

месте
мягкого переноса, в конце первой
cтроки должны отображаться
символ переноса.

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

Слайд 26

Авторское форматирование


Я думал, 
	 сердце позабыло
			 Способность 
				 легкую страдать,
Я говорил:

тому, что было,
Уж не бывать!
Уж не бывать!
Прошли восторги,
и печали,
И легковерные мечты.....
Но вот опять
затрепетали
Пред мощной
властью красоты.

Слайд 27

Разрывы строк
Для того, чтобы внутри тестового блока браузер отобразил перевод

строки, например, для отделения одного абзаца от другого, в конце строки следует поместить тег
. Следующее слово, встречающееся за данным тегом, будет перенесено на новую строку. Возможно использование нескольких тегов
подряд для задания последовательности из нескольких пустых строк.
Команда
не имеет закрывающего тега.
Иногда тег
содержит атрибут clear, который может принимать одно из трех значений: left, right, all. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом clear:

Слайд 28

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

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

Слайд 29

Шрифты
Элемент определяет свойства шрифта.
Синтаксис записи тега :

текст

Слайд 30

Шрифты
Значением атрибута face является название шрифта, который используется для отображения

текста, заключенного в теги . Если, например, вместо параметра "значение1" в приведенном примере вы подставите "Arial", помеченный тегом , текст будет отображаться именно этим шрифтом. В атрибуте face в качестве значений допустимо указывать несколько гарнитур шрифтов, разделяя их запятой. Для отображения текста браузер применит одну из перечисленных гарнитур, имя которой первой совпадает с имеющимся в его распоряжении набором гарнитур.

Слайд 31

Шрифты
Атрибут size указывает на размер шрифта. Параметр этого атрибута может

быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или -1), — это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого браузером по умолчанию (12pt).
Так, запись говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа. Кроме того, размер шрифта можно записывать целыми числами от 1до 7. В этих единицах основному шрифту, используемому по умолчанию, присваивается размер 3. Самый мелкий шрифт имеет размер 1, самый крупный – 7. Каждый шрифт в шкале «1-7» на 20% больше или меньше размера основного шрифта.
Атрибут color определяет цвет шрифта и подставляется либо цифровым кодом, либо символьной меткой.

Слайд 32

Шрифты
Очевидно, что при использовании тега любой из его атрибутов может

быть опущен.

Слайд 33

Изменение основного шрифта
По умолчанию текстовое содержимое документа отображается основным шрифтом,

заданным в начальных установках браузера. Обычно основной шрифт имеет размер 3 и гарнитуру Times New Roman. Для изменения свойств основного шрифта предназначен одиночный тег , который имеет атрибуты size, color и face.

Слайд 34

Задание цвета фона
Цвет фона всего документа определяется атрибутом bgcolor

тега .

Слайд 35

Цвет текста
Для определения цвета шрифта можно пользоваться одним из

3 способов:
назначить цвет символов всего документа с помощью атрибута text тега

если в документе определен основной шрифт с помощью тега , можно дополнить этот элемент атрибутом color

для текстовых фрагментов цвет задается с помощью атрибута color в тегах , при этом такое задание цвета отменяет действие атрибута text тега

Слайд 36

Элементы стиля шрифтов
Выделение текста полужирным шрифтом
Выделение курсивным шрифтом

Выделение текста подчеркиванием
Моноширинный текст
Уменьшение размера шрифта на 10-20% относительно текущего размера шрифта
Увеличение размера шрифта на 10-20% относительно текущего размера шрифта
~~Зачеркнутый текст~~
~~Зачеркнутый текст~~
_{Нижний индекс}
^{Верхний индекс}
Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:
<В>Текст, выделенный жирным курсивным шрифтом

Слайд 37

Фразеологические элементы
Фразеологический элемент не указывает точного способа отображения текста, а

лишь определяет, что содержимое элемента несет определенную смысловую нагрузку и должно быть каким-то образом выделено относительно обычного текста.
Элемент акцентирования. Большинство браузеров воспринимают его как выделение текста курсивом.
Элемент акцентирования. Этот элемент обычно интерпретируется браузерами как выделение полужирным шрифтом.
Термин и его определение. Отображается курсивом.
“Текст, набранный с клавиатуры”. Отображается шрифтом Courier.
Задание переменной или ее значения. Содержимое выводится курсивом.

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

Воспроизведение буквенных символов. Указывает, что текст является образцом.
Элемент аббревиатуры. В содержимом располагается сокращенное название аббревиатуры. Расшифровка термина появляется в виде всплывающей подсказки, текст которой задается значением атрибута title. Содержимое ACRONUM появляется обычным текстом. Назначение ACRONUM состоит в подготовке информации для поисковых серверов по расшифровке аббревиатур.

Слайд 38

Оформление цитат

Текст длинной цитаты

Задает отображение длинных цитат отдельным

текстовым блоком. Содержимое элемента выводится с небольшим отступом от левого и правого краев страницы (по умолчанию отступ равен 40px). Перед цитатой и после нее браузер оставляет по одной пустой строке. Атрибут cite предназначен для указания URL-адреса цитируемого документа. Этот атрибут не влияет на отображение цитаты и носит справочный характер.
Текст короткой цитаты
Тег применяется для форматирования коротких цитат. Содержимое элемента отображается без разрыва строки.
Текст цитаты
Цитаты, оформленные с помощью этого элемента, выделяются курсивным шрифтом.

Слайд 39

Создаем блочную цитату

They went in single file, running like hounds on

a
strong scent, and an eager light was in their eyes.
Nearly due west the broad swath of the marching Orcs
tramped its ugly slot; the sweet glass of Rohan has
been bruised and blackened as they passed.

Слайд 40

Элемент

Используется для размещения в документе контактной информации. Элемент представляет

собой блок, содержимое которого отображается курсивом и внутрь которого можно помещать другие элементы, например, разрывы строк, рисунки, гиперссылки и т.д., но нельзя вставлять блоки (разделы, списки, абзацы).
Формат элемента:

Содержимое

Пример:

Екатерина Семенова

Ведущий менеджер
Телефон 123-123-123
realiz@kdk.com

Слайд 41

Атрибуты тега
Общий формат записи тега со всеми

допустимыми атрибутами имеет вид:
text=”значение2” link=”значение3”
vlink=”значение4” alink=”значение5”>
тело документа HTML

Слайд 42

Атрибуты тега
Атрибут background позволяет поместить на web-страницу фоновый

рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например, "http://www.server.ru/images/имя_файла.gif"),
либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, "../images/имя_файла.gif”).
Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне браузера.

Слайд 43

Атрибуты тега
Атрибут text позволяет задать цвет текста для

всего документа в целом. Однако он может быть изменен в определенном участке текста путем использования команды с атрибутом color.
Атрибут bgcolor используется для задания фонового цвета всему документу. Атрибуты bgcolor и background не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницы цветом, назначенным в атрибуте bgcolor, поверх которой размещается изображение, заданное атрибутом background.

Слайд 44

Атрибуты тега
Атрибут link задает цвет, которым отображается непосещенная

гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение "blue" (#0000FF). В свою очередь, атрибут vlink указывает на цвет посещенной ссылки, значение которой по умолчанию – "purple" (#800080).
Атрибут alink определяет цвет гиперссылки в момент нажатия. По умолчанию данный атрибут также имеет значение "purple".

Слайд 45

Атрибуты тега
Пример использования тега со всеми допустимыми атрибутами:

background="http://www.myserver.com/1mages/back.jpg"
bgcolor="#000000" text="#FFFFFF" link="#008000"
vlink="#800080" alink="#FF0000">
Тело документа HTML

Слайд 46

Применение многоязычного текста
Указание языка, на котором составлен документ или его

фрагмент выполняется атрибутом lang. В качестве значения этого атрибута представляется код языка (en – английский, en–US – английский США, de – немецкий, ru – русский, ua – украинский).
Пример:
– документ составлен на немецком языке,
– цитата на украинском.

Слайд 47

Направление чтения текста
Задается атрибутом dir, принимающим значения:
ltr –

слева направо,
rtl – справа налево.
Атрибут задается для текстов на арабском языке или иврите.

Слайд 48

Разделы, заголовки и горизонтальные линии

Слайд 49

Разделы
Формат задания раздела:

HTML-код или текст

или

HTML-код или текст

Разделы используются для

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

и отличаются тем, что при использовании тега

браузер производит перенос раздела на новую строку и перед ним автоматически устанавливается пустая строка. При использовании тега переноса не возникает.

Слайд 50

Заголовки
Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают

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

Слайд 51

Заголовки
Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег

<Нn>, где n — целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды:
<Нn аlign="параметр">
Текст заголовка

Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений:
right – позиционирование заголовка по правой границе документа;
left – позиционирование заголовка по левой границе документа;
center – позиционирование заголовка по центру документа.

Слайд 52

Заголовки
Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Слайд 53

Заголовки
По умолчанию заголовки выравниваются по левому краю страницы.
Заголовки как

блоковые элементы отделяются от текста пустыми строками.
Пример:
<Н1 align=”center”>
ДОБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!

Слайд 54

Горизонтальные линии
Чтобы визуально отделить часть объектов документа от других,

применяются горизонтальные линии. Горизонтальная линия – это графический элемент, имеющий длину, толщину и цвет. Для создания таких линий в HTML используется непарный тег

(сокращение от Horizontal Ruler). В спецификации HTML для отображения вертикальных линий не предусмотрено специальных тегов.
Формат создание стандартной линии (по умолчанию стандартная линия занимает всю ширину окна браузера, а её толщина составляет 2px, верхняя часть линии несколько темнее нижней):

Формат сплошной темной линии без тени:

1_Структура_HTML_документа_Форматироване_

Содержание

Проектирование и разработка Web-сайтов Веб-сайт — это совокупность логически связанной гипертекстовой информации,

HTML HTML позволяет формировать на странице сайта текстовые блоки, включать в

HTML HTML-документом называется файл, содержащий код HTML. Одной из основных

Браузер Браузер – специальная клиентская программа, предназначенная для просмотра содержимого web-узлов

На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++, который

Структура HTML-документа

Теги Директивы HTML называются тегами. Теги заключаются в угловые скобки. Большинство

Теги Синтаксис записи тега в совокупности с его атрибутом:<ТЕГ имя_атрибута_1=”значение” …

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

Для создания документа HTML5 нам нужны в первую очередь два элемента:

Пример HTML-страницы: Моя первая страница

Пример цветной HTML-страницы: Моя первая страница

Комментарии Комментарии открываются символьной последовательностью, начинающейся с от-крывающей угловой скобки, восклицатель-ного

Цветовые спецификации Определить тот или иной цвет при создании web-страницы можно

Цветовые спецификации Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом

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

Escape-последовательности Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения

Escape-последовательности

Тег стандартного абзаца Текст, заключенный в абзац Аргументы ALIGN: right – выравнивание текста

Абзац Браузеры, которые интерпретируютмягкие переносы, должныобеспечить следующую семантику:если строка прекращается в

Авторское форматированиеЯ думал, сердце позабыло Способность легкую страдать,Я говорил:

Разрывы строк Для того, чтобы внутри тестового блока браузер отобразил перевод

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

ШрифтыЭлемент определяет свойства шрифта.Синтаксис записи тега :текст

Шрифты Значением атрибута face является название шрифта, который используется для отображения

Шрифты Атрибут size указывает на размер шрифта. Параметр этого атрибута может

Шрифты Очевидно, что при использовании тега любой из его атрибутов может

Изменение основного шрифта По умолчанию текстовое содержимое документа отображается основным шрифтом,

Задание цвета фона Цвет фона всего документа определяется атрибутом bgcolor

Цвет текста Для определения цвета шрифта можно пользоваться одним из

Элементы стиля шрифтов Выделение текста полужирным шрифтом Выделение курсивным шрифтом

Фразеологические элементы Фразеологический элемент не указывает точного способа отображения текста, а

Оформление цитат Текст длинной цитаты Задает отображение длинных цитат отдельным

Создаем блочную цитату They went in single file, running like hounds on

Элемент Используется для размещения в документе контактной информации. Элемент представляет

Атрибуты тега Общий формат записи тега со всеми

Атрибуты тега Атрибут background позволяет поместить на web-страницу фоновый

Атрибуты тега Атрибут text позволяет задать цвет текста для

Атрибуты тега Атрибут link задает цвет, которым отображается непосещенная

Атрибуты тега Пример использования тега со всеми допустимыми атрибутами:

Применение многоязычного текста Указание языка, на котором составлен документ или его

Направление чтения текста Задается атрибутом dir, принимающим значения: ltr –