Основы html. Форматирование

Сентябрь 3, 2022

Главная
Алгебра
Основы html. Форматирование

Содержание

2. Основы HTML Язык HTML (Hyper-Text Markup Language) - язык гипертекстовой разметки - основное средство создания страниц
3. Инструменты создания web-документа Текстовый редактор. Браузер для просмотра результатов. Валидатор — это программа для анализа HTML-
4. Инструменты создания web-документа HTML-редакторы бывают двух видов: Кодовые редакторы. HTML-документ можно создавать в любом текстовом редакторе,
5. Синтаксис HTML документа В HTML-документе есть две явные составляющие: сам текст, который пользователь видит на экране
6. Начало html-документа Браузер загружает страницу и “считывает код” сверху вниз, слева направо. Каждый HTML-документ, отвечающий спецификации
7. Структура HTML-документа ... - тэги показывают начало и окончание HTML документа ... - это тэг заголовка
8. Пример простейшего web-документа Откройте Блокнот и запишите код: Изучение html Изучаем html Сохраните файл под именем
9. Продолжаем создавать страничку Добавим строчку в Блокноте Изучение html Изучаем html Начинаем писать текст Сохраним файл
10. Правила применения тегов Атрибуты тегов и кавычки Согласно спецификации HTML все значения атрибутов тегов следует указывать
11. Атрибуты тэгов Большинство тэгов имеет атрибуты, т.е. свойства, которые могут принимать различные значения. Синтаксис ... Порядок
12. Комментарии Используется для создания комментариев в любой части документа. Все, что находится внутри – будь то
13. Теги абзаца и перевода строки Абзацы в html отделяются друг от друга пустой строкой (paragraf)– тег
14. Использование заголовков В HTML есть шесть уровней заголовков …. - теги заголовков с заранее заданным форматированием
15. Использование предварительного форматирования – вставляет предварительно отформатированный текст (Preformatted Text) Используется для включения в документ уже
16. Другие тэги разбиения текста на блоки CITE – цитата по тексту Используется для цитат, названий книг.
17. 5. Цветовое оформление странички Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри тэга : bgcolor - (BackGround
18. Основной шрифт текста на странице basefont – основной шрифт страницы Определяет основной шрифт, которым должен отображаться
19. Задание размера, цвета и гарнитуры шрифта для отдельного фрагмента текста Изменить цвет, размер и тип шрифта
20. Определение цветов Для задания цветов в соответствующих атрибутах различных тэгов, например, используются следующие два приема: Цвет
21. Особенности расположения текста Любое количество пробелов идущих подряд, в браузере отображается как один Исключением из этого
22. Тэги начертания Жирное начертание применяется два тега: и . Жирное начертание шрифта Сильное выделение текста Курсивное
23. Верхний и нижний индексы — верхний индекс и —нижний индекс. Текст, помещенный в один из этих
24. Специальные символы Браузер видит символы как начало или конец тега и не показывает их. Встает вопрос
25. Нумерованный список Для создания нумерованного списка используется тег OL (Ordered List ) с необязательными атрибутами: Каждый
26. Маркированный список Для создания маркированного списка используется тег UL (Unordered List ) с необязательным атрибутом: Атрибут
28. Скачать презентацию

Слайд 2

Основы HTML
Язык HTML (Hyper-Text Markup Language) - язык гипертекстовой разметки -

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

Слайд 3

Инструменты создания web-документа
Текстовый редактор.
Браузер для просмотра результатов.
Валидатор — это программа для

анализа HTML- кода Web страниц на наличие ошибок, согласно существующим стандартам.
Графический редактор.
Справочник по тегам HTML.

Слайд 4

Инструменты создания web-документа
HTML-редакторы бывают двух видов:
Кодовые редакторы. HTML-документ можно создавать в

любом текстовом редакторе, например, в Блокноте. Однако, удобно, чтобы были следующие возможности:
подсветка синтаксиса
работа с несколькими документами.
проверка текущего документа на ошибки.
Визуальные редакторы. Наиболее популярным является Macromedia Dreamweaver, занимающий промежуточную позицию между кодовыми и визуальными редакторами. К тому же по нему достаточно много литературы на русском языке.
Графический редактор
необходим для обработки изображений и их подготовки для публикации на веб-странице. Самый популярный – Photoshop. Но в большинстве случаев мощь Photoshop-а избыточна. Программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.
Браузер
Браузер - программа, предназначенная для просмотра веб-страниц. Подойдет любой браузер. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.

Слайд 5

Синтаксис HTML документа
В HTML-документе есть две явные составляющие:
сам текст, который

пользователь видит на экране браузера,
теги (англ.: tag-ярлычок, этикетка), которые определяют, как он выводится на экран, но остаются невидимыми для пользователя при просмотре документа.
Все это в общем случае выглядит так:
<открывающий тег> текст, к которому применяется этот тег
Итак, тег состоит из следующих друг за другом в определенном порядке элементов:
левой угловой скобки < (такого же, как "меньше чем" символа)
имени тега, например title или pre
атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: align=center
правой угловой скобки > (такой же, как символа "больше чем").
если тег является конечным тегом,то после знака < ставится слеш /, такой тег закрывает некоторую структуру. Таким образом Вы можете читать символ / , как конец.
Пример:

,

Слайд 6

Начало html-документа
Браузер загружает страницу и “считывает код” сверху вниз, слева направо.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так: :
Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).
Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, т.к. HTML существует в нескольких версиях, кроме того, есть XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.
Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Слайд 7

Структура HTML-документа
< HTML> ... - тэги показывают начало и окончание

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

Слайд 8

Пример простейшего web-документа
Откройте Блокнот и запишите код:

4.0//EN”>

Изучение html

Изучаем html

Сохраните файл под именем firstweb.html
Имена файлам будем давать строчными латинскими буквами
Откройте браузер и загрузите туда ваш файл firstweb.html

Слайд 9

Продолжаем создавать страничку
Добавим строчку в Блокноте

Изучение html

Изучаем html

Начинаем писать текст

Сохраним файл и обновим в браузере

Слайд 10

Правила применения тегов
Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов

тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример').
Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их атрибуты нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать —
,
или
. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта.
Переносы строк
Внутри тега между его атрибутами допустимо ставить перенос строк.
Однако рекомендуется писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.
Закрывающие теги
Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен.
Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа.
Для некоторых тегов (например
) закрывающего тега нет в принципе.
Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуется закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.

Слайд 11

Атрибуты тэгов
Большинство тэгов имеет атрибуты, т.е. свойства, которые могут принимать различные

значения.
Синтаксис
<ТЭГ атрибут 1=“значение” …..атрибут n=“значение”>
... Порядок атрибутов в тегах
Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.
Формат атрибутов
Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута.
Пример
текст документа написан белым цветом на черном фоне

Слайд 12

Комментарии

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

– будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).
Пример:
Заголовок документа
Текст документа

Слайд 13

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

пустой строкой

(paragraf)– тег нового абзаца (парный)
Атрибут ALIGN – позволяет изменить выравнивание абзаца.

, где ?=left, right, center, justify
-одиночный тэг образования новой строки без образования нового абзаца

Слайд 14

Использование заголовков
В HTML есть шесть уровней заголовков

….
- теги

заголовков с заранее заданным форматированием - инструмент для структуризации документа. h1 - самый главный, h6 - самый мелкий.
Для того, чтобы оформить текст заголовком следует поместить тэг перед и после текста, например:

Заголовок самый главный

В тело данного тега также можно добавить атрибут align:

где ?=left, right, center, justify

Слайд 15

Использование предварительного форматирования

 – вставляет предварительно отформатированный текст (Preformatted Text)
Используется для

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

Пример:

Раз!
  Два!
  Три!

Сравните
Раз!
Два!
Три!

Слайд 16

Другие тэги разбиения текста на блоки
CITE – цитата по тексту
Используется для

цитат, названий книг. Обычно наклонный текст Атрибуты: TITLE - всплывающая подсказка
Пример:
Это обычный текст А это уже текст с использованием тэга CITE
BLOCKQUOTE – оформление цитаты
Оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат. Цитируемый текст отображается отдельным абзацем с увеличенным отступом.
Пример:
Все знают чудесные строки сонета Шекспира:

Кто под звездой счастливою рожден,
Гордится славой, титулом и властью.
А я судьбой скромнее награжден,
И для меня любовь – источник счастья.
...

ADDRESS – оформление текста как почтового адреса
Находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.
Пример:
Пишите по следующему адресу:

Харьков, ул. Лермонтовская, 27
ХГУ «НУА»

Слайд 17

5.
Цветовое оформление странички
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри тэга

:
bgcolor - (BackGround Color, фоновый цвет) - атрибут, который отвечает за цвет фона вашей странички. По умолчанию - белый.
text - отвечает за основной цвет текста. По умолчанию - черный.

Пример для задания желтого фона и синего текста:

О задании цветов см. ссылку

Слайд 18

Основной шрифт текста на странице
basefont – основной шрифт страницы
Определяет основной шрифт,

которым должен отображаться текст документа. Не имеет конечного тега.
Впоследствии вы можете легко изменить шрифт в любой части документа (тэг ).
Атрибуты тэга basefont:
size – обязательный атрибут. Определяет базовый размер шрифта. Возможные значения: целые числа от 1 до 7 включительно.
face – определяет используемый тип шрифта (гарнитуру).

Пример 1:
... Текст документа оформлен шрифтом 3 размера ...

Пример 2:
... Текст документа шрифтом 5 размера ... Слегка увеличиваем шрифт ... Продолжаем шрифтом 5 размера ...

Слайд 19

Задание размера, цвета и гарнитуры шрифта для отдельного фрагмента текста

Изменить цвет,

размер и тип шрифта отдельного фрагмента текста позволяет тэг
……
Атрибуты этого тэга: size: определяет размер шрифта, целое число от 1 до 7;
Принято считать, что размер "нормального" шрифта соответствует значению 3.
Размер шрифта указывает как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). face: определяет гарнитуру шрифта. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т.д. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию. Совет: число различных шрифтов, используемых в одном документе, не должно превышать трех. color: определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета (подробнее).

Слайд 20

Определение цветов
Для задания цветов в соответствующих атрибутах различных тэгов, например,

color=“?”> используются следующие два приема:
Цвет задается просто названием на английском языке: - шрифт синего цвета;
Цвет задается кодом, состоящим из шести знаков шестнадцатиричной системы исчисления: - шрифт красного цвета.
При задании цвета с помощью шестнадцатиричного кода (т.е. с использованием цифр 0..9 и символов A,B,C,D,E,F) используется цветовая схема RGB, принцип которой состоит в представлении цветов с помощью трех составляющих – red (красный), green (зеленый), blue(синий). Для каждой составляющей отводится пара знаков, таким образом FF – означает наибольшее насыщение данного цвета, а 00 – наименьшее. Например, #FFFFFF - шестнадцатиричный код БЕЛОГО цвета, а #000000 - ЧЕРНОГО
Для задания цветов используйте таблицу цветовДля задания цветов используйте таблицу цветов или цветовую палитру

Слайд 21

Особенности расположения текста
Любое количество пробелов идущих подряд, в браузере отображается как

один
Исключением из этого правила является тег

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

Слайд 22

Тэги начертания
Жирное начертание
применяется два тега: и .
Жирное начертание шрифта

Сильное выделение текста
Курсивное начертание
определяют два тега: и .
Курсивное начертание шрифта Выделение текста
Подчеркивание
используется тэг
Перечеркивание
используется тэг
Увеличение шрифта (относительно текущего).
используется тэг
Уменьшение шрифта (относительно текущего).
используется тэг

~~Слайд 23~~

Верхний и нижний индексы
^{— верхний индекс и _{—нижний индекс. Текст, помещенный}}

в один из этих контейнеров, обозначается меньшим размером, чем базовый текст и смещается относительно горизонтали.

~~Слайд 24~~

Специальные символы
Браузер видит символы < или > как начало или конец

тега и не показывает их. Встает вопрос как показать эти символы на экране?
Для этих символов предусмотрено специальное кодирование. Код строится из символа "&" (амперсанд), фиксированного имени и завершающего символа ";". В общем это выглядит так: &имя;
Например, для задания двух пробелов напишем & nbsp; & nbsp;
Вот фиксированные имена некоторых символов:
Прочитайте файл «Таблица символов»

~~Слайд 25~~

Нумерованный список
Для создания нумерованного списка используется тег OL (Ordered List

) с необязательными атрибутами: <ОL type=“?” start=“?” >
Каждый новый элемент списка следует начинать с метки
(List Item).
Атрибут type задает тип списка:
A устанавливает маркер в виде прописных букв (A, B, C ...)
а устанавливает маркер в виде строчных букв (a, b, c ...)
I устанавливает маркер в виде больших римских цифр (I, II, III ...)
i устанавливает маркер в виде маленьких римских цифр (i, ii, iii ...)
1 устанавливает маркер в виде арабских цифр (1, 2, 3 ...) .
Атрибут start устанавливает начальный маркер в текущем списке.

~~Слайд 26~~

Маркированный список
Для создания маркированного списка используется тег UL (Unordered List )

с необязательным атрибутом:

Атрибут type задает символ маркера
circle - кружок (устанавливаемый по умолчанию),
square - квадрат
disk - закрашенный круг
Попробуйте!

Основы html. Форматирование

Содержание

Основы HTMLЯзык HTML (Hyper-Text Markup Language) - язык гипертекстовой разметки -

Инструменты создания web-документаТекстовый редактор. Браузер для просмотра результатов.Валидатор — это программа для

Инструменты создания web-документаHTML-редакторы бывают двух видов:Кодовые редакторы. HTML-документ можно создавать в

Синтаксис HTML документаВ HTML-документе есть две явные составляющие: сам текст, который

,

Начало html-документаБраузер загружает страницу и “считывает код” сверху вниз, слева направо.

Структура HTML-документа < HTML> ... - тэги показывают начало и окончание

Пример простейшего web-документаОткройте Блокнот и запишите код:

Изучаем html

Продолжаем создавать страничкуДобавим строчку в Блокноте

Изучаем html

Правила применения теговАтрибуты тегов и кавычкиСогласно спецификации HTML все значения атрибутов

Атрибуты тэговБольшинство тэгов имеет атрибуты, т.е. свойства, которые могут принимать различные

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

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

Использование заголовков В HTML есть шесть уровней заголовков …. - теги

….

- теги

Заголовок самый главный

где ?=left, right, center, justify

Использование предварительного форматирования – вставляет предварительно отформатированный текст (Preformatted Text)Используется для

Другие тэги разбиения текста на блокиCITE – цитата по текстуИспользуется для

5. Цветовое оформление странички Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри тэга

Основной шрифт текста на странице basefont – основной шрифт страницыОпределяет основной шрифт,

Задание размера, цвета и гарнитуры шрифта для отдельного фрагмента текста Изменить цвет,

Определение цветовДля задания цветов в соответствующих атрибутах различных тэгов, например,

Особенности расположения текстаЛюбое количество пробелов идущих подряд, в браузере отображается как

Тэги начертанияЖирное начертаниеприменяется два тега: и . Жирное начертание шрифта

Верхний и нижний индексы — верхний индекс и —нижний индекс. Текст, помещенный

Специальные символы Браузер видит символы < или > как начало или конец

Нумерованный список Для создания нумерованного списка используется тег OL (Ordered List

Маркированный списокДля создания маркированного списка используется тег UL (Unordered List )

Похожие презентации

Основы HTML
Язык HTML (Hyper-Text Markup Language) - язык гипертекстовой разметки -

Инструменты создания web-документа
Текстовый редактор.
Браузер для просмотра результатов.
Валидатор — это программа для

Инструменты создания web-документа
HTML-редакторы бывают двух видов:
Кодовые редакторы. HTML-документ можно создавать в

Синтаксис HTML документа
В HTML-документе есть две явные составляющие:
сам текст, который

Начало html-документа
Браузер загружает страницу и “считывает код” сверху вниз, слева направо.

Структура HTML-документа
< HTML> ... - тэги показывают начало и окончание

Пример простейшего web-документа
Откройте Блокнот и запишите код:

Продолжаем создавать страничку
Добавим строчку в Блокноте

Правила применения тегов
Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов

Атрибуты тэгов
Большинство тэгов имеет атрибуты, т.е. свойства, которые могут принимать различные

Комментарии

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

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

Использование заголовков
В HTML есть шесть уровней заголовков

….
- теги

Использование предварительного форматирования
– вставляет предварительно отформатированный текст (Preformatted Text)
Используется для

Другие тэги разбиения текста на блоки
CITE – цитата по тексту
Используется для

5.
Цветовое оформление странички
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри тэга

Основной шрифт текста на странице
basefont – основной шрифт страницы
Определяет основной шрифт,

Задание размера, цвета и гарнитуры шрифта для отдельного фрагмента текста

Изменить цвет,

Определение цветов
Для задания цветов в соответствующих атрибутах различных тэгов, например,

Особенности расположения текста
Любое количество пробелов идущих подряд, в браузере отображается как

Тэги начертания
Жирное начертание
применяется два тега: и .
Жирное начертание шрифта

Верхний и нижний индексы
^{— верхний индекс и _{—нижний индекс. Текст, помещенный}}

Специальные символы
Браузер видит символы < или > как начало или конец

Нумерованный список
Для создания нумерованного списка используется тег OL (Ordered List

Маркированный список
Для создания маркированного списка используется тег UL (Unordered List )