HTML Первые шаги.

Содержание

Слайд 2

Форматирование текста на Web-странице.

Форматирование текста на Web-странице.

Слайд 3



Мой первый шаг


Здравствуйте, это моя первая страница.
Добро пожаловать!


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

Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа

Слайд 4

Заголовок документа – теги и <br><p>Тег <Head>…</Head> заключает в себе теги</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Заголовок документа – теги и Тег … заключает в себе теги заголовка." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/431395/slide-3.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/431395/slide-3.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/431395/slide-3.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/431395/slide-3.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/431395/slide-3.jpg" class="slides-image"><!----><div class="slides-content">заголовка.<br>Тег <Title>… содержит слова, которые появляются в стоке заголовка браузера


Мой первый шаг

2. Дополнительные теги заголовка:
- содержит дополнительные данные о документе, используемые поисковыми серверами;
и - определяют базовый адрес документа и некоторые другие

Слайд 5

Тело документа – тег

Все, что находится между и , называется содержимым

Тело документа – тег Все, что находится между и , называется содержимым
тела документа.
Тег может содержать 3 группы параметров:
Управление внешним видом документа.
Атрибуты программирования – по событию, таблицы стилей и пр.
Атрибуты ссылок и идентификации.

Слайд 6

Параметры тега

Bgcolor – изменяет цвет фона. Цвет задается словом или кодом

Параметры тега Bgcolor – изменяет цвет фона. Цвет задается словом или кодом
RGB


Text – задает цвет текста.

Background – помещает в качестве фона изображение из файла с картинкой.

Bgproperties = “fixed” – фоновый рисунок не прокручивается вместе со страницей.
Link – задает цвет гиперссылок, по которым пользователь еще «не ходил».
Vlink – задает цвет посещенных гиперссылок.
Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)

Слайд 7

Оформление текста Заголовки

Существует 6 уровней заголовков:

. . .

, …,
.

Оформление текста Заголовки Существует 6 уровней заголовков: . . . , …,
. .
Атрибут – align – выравнивание
Значения: Left (по умолчанию)
Right Centr


Title 1


Title 2


Title 3


Title 4


Title 5

Title 6


Слайд 8

Абзацы

Тег

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

Абзацы Тег указывает на начало нового абзаца и вставляет пустую строку перед
абзацем. Атрибут align.
Тег
- разрыв строки. Используется для записи текстов стихов и песен.
Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all - продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.

Слайд 9

Точные интервалы

Тег создает область, в которой текст не разбивается на

Точные интервалы Тег … создает область, в которой текст не разбивается на
строки.
Тег используется в сочетании с и указывает браузеру место где, в случае необходимости, можно разорвать строку.
Тег
выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр.
Тег
- содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута align=center

Слайд 10

Физическое и логическое форматирование текста

Физическая разметка документа – это явное указание браузеру,

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

Слайд 11

теги физических стилей

Можно комбинировать теги стилей:
Полужирный курсив

теги физических стилей Можно комбинировать теги стилей: Полужирный курсив

Слайд 12

Изменение шрифта

тег - изменяет размер, цвет и стиль текста.
Атрибуты:
size -

Изменение шрифта тег … - изменяет размер, цвет и стиль текста. Атрибуты:
размер шрифта 1-7. По-умолчанию size=3
Размер изменяется на 20%: 4 размер больше 3 на 20%,
5 размер больше 4 на 20%
size=4 – абсолютный размер,
size= +1 – относительный (на 1 больше, чем базовый размер шрифта)
color - цвет текста,
face - название шрифта
face="Comic Sans MS, Courier New”

Слайд 13



Мой второй шаг


Это обычный шрифт

New">
Это измененный шрифт

Это снова обычный шрифт


Слайд 14

теги логических стилей

теги логических стилей

Слайд 15

Теги логического и физического форматирования могут комбинироваться друг с другом и с

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

Слайд 16

Создание WEB-страниц в блокноте.

Создание WEB-страниц в блокноте.

Слайд 17

Итоги урока:

Познакомились со структурой и основными командами форматирования WEB-документа.
Узнали, как создавать простейшие

Итоги урока: Познакомились со структурой и основными командами форматирования WEB-документа. Узнали, как создавать простейшие WEB-документы.
WEB-документы.
Имя файла: HTML-Первые-шаги..pptx
Количество просмотров: 91
Количество скачиваний: 0