HTML и CSS. Введение и основные понятия

Июль 30, 2022

Главная
Информатика
HTML и CSS. Введение и основные понятия

Содержание

2. История 1986 ISO-8879 SGML 1991 CERN HTML 1994 Подготовка HTML 2.0 Консорциум W3 (W3C) www.W3.org март
3. Основные понятия Web-сайт Web-сервер Web-адрес (домен) Web-страница ...
4. Простая HTML страница Пример HTML страницы Мой первый HTML-документ Скоро мы узнаем, что означают эти странные
5. Структура HTML документа Здесь размещается служебная информация. Пользователь ее не видит. Здесь размещается содержание документа. Именно
6. Заголовок документа Заголовок документа ...Содержание документа...
7. Тело документа ...Служебная информация... Мой первый HTML документ Второй абзац. Для форматирования текста используют разные элементы
8. Заголовки Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6
9. Горизонтальная линия Горизонтальная линия Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается
10. Абзац Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого
11. Улучшаем страницу Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил
12. Принудительный разрыв строки Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя
13. Окончательный вид документа Мой первый документ Мой первый HTML-документ Евгений Онегин А.С.Пушкин (отрывок) Мой дядя самых
14. Атрибуты элементов Атрибут Атрибут Тег Имя атрибута Значение атрибута Атрибут
15. Используем атрибуты Выровнять по центру Выровнять по правому краю Выровнять по ширине Выровнять по левому краю
16. Авторское форматирование Время – начинаю про Ленина рассказ. Но не потому, что горя нету более, время
17. Элементы DIV и SPAN Первый div Второй div Третий div Первый span Второй span Третий span
18. Коротко о цвете Диапазон: 00 - FF (0 - 255) #00FF00 – green (зеленый) #FF0000 –
19. Раскрашиваем страницу Раскрашиваем страницу Этот текст синего цвета, а этот - красного. Горизонтальная линия тоже может
20. Непосредственное форматирование текста - курсив - полужирный - подчеркнутый - перечеркнутый - моноширинный - увеличить шрифт
22. Скачать презентацию

Слайд 2

История
1986
ISO-8879
SGML
1991
CERN
HTML
1994
Подготовка HTML 2.0
Консорциум W3 (W3C)
www.W3.org
март 1995
начало работы над HTML 3

+ CSS

январь 1997
HTML 3.2

декабрь 1997
HTML 4.0 + CSS 2.0

24 декабря 1999
HTML 4.01

2000
XHTML 1.0

2010 год
HTML 5.0

22 января 2008 года
W3C официально объявил "HTML 5 - в разработке"

Слайд 3

Основные понятия
Web-сайт
Web-сервер
Web-адрес (домен)
Web-страница
...

Слайд 4

Простая HTML страница

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

Мой первый HTML-документ

Скоро мы узнаем, что означают эти странные знаки.

тег

Слайд 5

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

"http://www.w3.org/TR/html4/loose.dtd">

Здесь размещается служебная информация. Пользователь ее не видит.

Здесь размещается содержание документа. Именно это видит пользователь.

Начало документа

Конец документа

Начало заголовка

Конец заголовка

Начало тела документа

Конец тела документа

Определение типа документа

Слайд 6

Заголовок документа

Заголовок документа

...Содержание документа...

Слайд 7

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

...Служебная информация...

Мой первый HTML документ

Второй абзац. Для форматирования текста используют разные элементы языка HTML.

Комментарий

Слайд 8

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

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Слайд 9

Горизонтальная линия
Горизонтальная линия

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

если строка прекращается в месте мягкого переноса…

Слайд 10

Абзац

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

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

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

Слайд 11

Улучшаем страницу
Мой дядя самых честных правил, Когда не в шутку занемог, Он

уважать себя заставил И лучше выдумать не мог.

Мой дядя самых честных правил,

Когда не в шутку занемог,

Он уважать себя заставил

И лучше выдумать не мог.

Слайд 12

Принудительный разрыв строки
Мой дядя самых честных правил,
Когда не в

шутку занемог,
Он уважать себя заставил
И лучше выдумать не мог.

Слайд 13

Окончательный вид документа

Мой первый</div></h2><div class="slides-content">документ
Мой первый HTML-документ

Евгений Онегин

А.С.Пушкин (отрывок) Мой дядя самых честных правил,
Когда не в шутку занемог,
Он уважать себя заставил
И лучше выдумать не мог.

Слайд 14

Атрибуты элементов

Атрибут
Атрибут
Тег
Имя атрибута
Значение атрибута
Атрибут

Слайд 15

Используем атрибуты
Выровнять по центру
Выровнять по правому краю
align="justify"> Выровнять по ширине
Выровнять по левому краю
Толщина разделительной линии
Разделительная линия без тени
Ширина в пикселях

Слайд 16

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


Время – 
	начинаю 
		про Ленина рассказ.
Но не потому,
	 что

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

Слайд 17

Элементы DIV и SPAN

Первый div

Второй div

Третий

div

Первый span
Второй span
Третий span

Слайд 18

Коротко о цвете
Диапазон: 00 - FF (0 - 255)
#00FF00 – green

(зеленый)
#FF0000 – red (красный)
#0000FF – blue (синий)
#FFFFFF – white (белый)
#000000 – black (черный)
#FFFF00 – yellow (жёлтый)
#FFD700 - gold (золотой)
#FFCC00 - tangerine (мандариновый)
#E49B0F - gamboge (гуммигут)
#FDE910 – lemon (лимонный)

Безопасная палитра цветов:
00,33,66,99, CC,FF (216 сочетаний).

Слайд 19