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

Июль 27, 2022

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

Содержание

2. Введение и основные понятия: Основные сведения о языках разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели
3. История 1986 ISO-8879 SGML 1991 CERN HTML 1994 Подготовка HTML 2.0 Консорциум W3 (W3C) www.W3.org март
4. Браузеры Первый браузер NCSA Mosaic – также основа для NN и IE Netscape Navigator (Netscape Communications)
5. Основные понятия Web-сайт Web-сервер Web-адрес Web-страница ...
6. Как это работает 1 2 3 4 1 3 2 4 2 1 5 4 3
7. В чем создавать HTML-документы?
8. Простая HTML страница Пример HTML страницы Мой первый HTML-документ Скоро мы узнаем, что означают эти странные
9. Объявление Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты,
10. Структура HTML документа Здесь размещается служебная информация. Пользователь ее не видит. Здесь размещается содержание документа. Именно
11. Заголовок документа Заголовок документа ...Содержание документа...
12. Тело документа ...Служебная информация... Мой первый HTML документ Некоторый текст. Основное содержание текущей страницы. Первый абзац
13. Какие бывают элементы? Блочные (block elements) Структурное форматирование Текстовые (inline elements) Непосредственное форматирование Логическое форматирование (phrase
14. Структурированный текст Заголовок первого уровня Элемент P представляет абзац. В нем не могут содержаться элементы уровня
15. Как браузер показывает текст?
16. Заголовки Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6
17. Горизонтальная линия Горизонтальная линия Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается
18. Абзац Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается в месте мягкого
19. Улучшаем страницу Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил
20. Принудительный разрыв строки Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя
21. Окончательный вид документа Мой первый документ Мой первый HTML-документ Евгений Онегин А.С.Пушкин (отрывок) Мой дядя самых
22. Атрибуты элементов Атрибут Атрибут Тег Имя атрибута Значение атрибута Атрибут
23. Используем атрибуты Выровнять по центру Выровнять по правому краю Выровнять по ширине Выровнять по левому краю
24. Создаем блочную цитату They went in single file, running like hounds on a strong scent, and
25. Авторское форматирование Время – начинаю про Ленина рассказ. Но не потому, что горя нету более, время
26. Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается курсивом) Мой адрес: Москва, 2-ая Бауманская, офис
27. Группировка элементов Элементы DIVЭлементы DIV и SPANЭлементы DIV и SPAN вместе с атрибутами idЭлементы DIV и
28. Элементы DIV и SPAN Первый div Второй div Третий div Первый span Второй span Третий span
29. Коротко о цвете Диапазон: 00 - FF (0 - 255) #00FF00 – green (зеленый) #FF0000 –
30. Раскрашиваем страницу Раскрашиваем страницу Этот текст синего цвета, а этот - красного. Горизонтальная линия тоже может
31. Элемент FONT (не желателен) серифный шрифт: Times New Roman, serif рубленый шрифт: Arial, sans-serif моноширинный шрифт:
32. Непосредственное форматирование текста - курсив - полужирный - подчеркнутый - перечеркнутый - моноширинный - увеличить шрифт
33. Логическое форматирование - выделение важных фрагментов курсивом - выделение особо важных фрагментов полужирным - выделение фрагмента
34. Специальные символы
35. Дополнительно п.1. Текст п. 1 никогда не будет перенесен браузером. п.2. Но п.3 всегда будет идти
36. Лабораторная работа Оформление текста Примерный образец выполнения работы - файл lab-1-1-result.html Дополнительные домашние задания: index.html index-result.html
38. Скачать презентацию

Слайд 2

Введение и основные понятия:
Основные сведения о языках разметки: HTML, XML,

XHTML. Эволюция языков разметки. Цели и задачи языка HTML
Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются
Что такое тег? Типы элементов. Понятие тегов и атрибутов
Структура и правила оформления HTML-документа.
Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки

Слайд 3

История
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 - в разработке"

Слайд 4

Браузеры
Первый браузер NCSA Mosaic – также основа для NN и IE
Netscape

Navigator (Netscape Communications) 15.12.1994
Netscape Navigator 9 (движок Firefox 2) – 2008 последняя версия
Internet Explorer 1.0 (Microsoft) 1995
Internet Explorer 3.0 (Microsoft) 1996 («война браузеров»)
Internet Explorer 6.0 (Microsoft) 2001
Internet Explorer 7.0 (Microsoft) 2006
Internet Explorer 8.0 (Microsoft) 19.03.2009
Opera (Opera Software ASA) 30.08.1995
Opera 9.0 (Opera Software ASA) 2006
Opera 10.2 (Opera Software ASA) 2009
Mozilla Firefox 1 (Mozilla Foundation) 9.11.2004
Mozilla Firefox 3.0.3 (Mozilla Foundation) 2008
Mozilla Firefox 3.6 (Mozilla Foundation) 21.01.2010
Google Chrome 1 (Google) 10.12.2008
Google Chrome 4 (Google) 25.01.2010
Safari 4 (Apple) 11.08.2009

Слайд 5

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

Слайд 6

Как это работает
1
2
3
4
1
3
2
4
2 1
5
4 3
WWW
index.html
HTML
PHP
CGI
ASP
...
HTML
веб-сервер
jpg, gif, swf,
avi, mpg …

Слайд 7

В чем создавать HTML-документы?

Слайд 8

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

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

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

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

тег

Слайд 9

Объявление
Строгое

DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие фреймы.
Документы, использующие такое объявление типа документа, включают все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также фреймы.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Слайд 10

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

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

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

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

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

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

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

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

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

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

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

Слайд 11

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

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

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

Слайд 12

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

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

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

Некоторый текст. Основное содержание текущей страницы. Первый абзац

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

Комментарий

Слайд 13

Какие бывают элементы?
Блочные (block elements)
Структурное форматирование
Текстовые (inline elements)
Непосредственное

форматирование
Логическое форматирование (phrase elements)
Нежелательные (deprecated)
Устаревшие (obsolete)
Новые (new)
С о д е р ж а н и е

Открывающий тег

Закрывающий тег

Элемент

Слайд 14

Структурированный текст
Заголовок первого уровня
Элемент P представляет абзац. В нем не могут

содержаться элементы уровня блока (включая и сам элемент P). Элементы, определяющие стиль шрифта:
полужирный,
курсивный,
подчёркнутыйи другие

Второй абзац

Слайд 15

Как браузер показывает текст?

Слайд 16

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

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Слайд 17

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

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

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

Слайд 18

Абзац

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

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

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

Слайд 19

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

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

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

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

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

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

Слайд 20

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

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

Слайд 21

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

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

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

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

Слайд 22

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

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

Слайд 23

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

Слайд 24

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

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 grass of Rohan had been bruised and blackened as they passed.

Слайд 25

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


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

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

Слайд 26

Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается курсивом)
Мой адрес:
Москва,

2-ая Бауманская, офис 703, Телефон/факс: 263-64-43

Слайд 27

Группировка элементов
Элементы DIVЭлементы DIV и SPANЭлементы DIV и SPAN вместе

с атрибутами idЭлементы DIV и SPAN вместе с атрибутами id и classЭлементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPANЭлементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста

Блок номер 1

Блок номер 2

Блок номер 3

Слайд 28

Элементы DIV и SPAN

Первый div

Второй div

Третий

div

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

Слайд 29

Коротко о цвете
Диапазон: 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 сочетаний).

Слайд 30

Раскрашиваем страницу

Раскрашиваем страницу

Этот текст синего

цвета,
а этот - красного.

Горизонтальная линия тоже может быть разноцветная.

Слайд 31

Элемент FONT (не желателен)
серифный шрифт: Times New Roman, serif
рубленый шрифт: Arial,

sans-serif
моноширинный шрифт: Courier, monospace

Каким шрифтом будет показан текст?

size="1"
size="2"
size="3" Базовый размер по-умочанию
size="4"
size="5"
size="6" Соответствует размеру

size="7"
Величина шрифта на единицу меньше базового
Максимальный размер шрифта

Слайд 32

Непосредственное форматирование текста
- курсив
- полужирный
-

подчеркнутый
~~- перечеркнутый~~
- моноширинный
- увеличить шрифт
- уменьшить шрифт
^{- надиндекс}
_{- подиндекс}

Слайд 33

Логическое форматирование
- выделение важных фрагментов курсивом
- выделение особо важных

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

Слайд 34

`Специальные символы`

Слайд 35

`Дополнительно`
`п.1. Текст п. 1 никогда не будет перенесен браузером. п.2. Но`

п.3 всегда будет идти двумя строками ниже. п.3. Текст deprecated: applet, basefont, center, dir, font, isindex, menu, s, strike, u... obsolete: listing, plaintext, xmp... Все элементы: http://www.w3.org/TR/html4/index/elements.html Все атрибуты: http://www.w3.org/TR/html4/index/attributes.html HTML 4.0 CSS

Слайд 36

`Лабораторная работа`
`Оформление текста`
`Примерный образец выполнения работы - файл lab-1-1-result.html`
`Дополнительные домашние задания:`

index.html index-result.html и reklama.html reklama-result.html

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

Содержание

Введение и основные понятия: Основные сведения о языках разметки: HTML, XML,

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

БраузерыПервый браузер NCSA Mosaic – также основа для NN и IENetscape

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

Как это работает123413242 154 3WWWindex.htmlHTMLPHPCGIASP...HTMLвеб-серверjpg, gif, swf,avi, mpg …

В чем создавать HTML-документы?

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

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

Объявление Строгое

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

Заголовок документа Заголовок документа ...Содержание документа...

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

Какие бывают элементы? Блочные (block elements) Структурное форматированиеТекстовые (inline elements) Непосредственное

Структурированный текстЗаголовок первого уровняЭлемент P представляет абзац. В нем не могут

Заголовок первого уровня

Как браузер показывает текст?

ЗаголовкиЗаголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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

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

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

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

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

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

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

Атрибуты элементовАтрибутАтрибутТегИмя атрибутаЗначение атрибутаАтрибут

Выровнять по центру Выровнять по правому краю

Выровнять по левому краю Толщина разделительной линии Разделительная линия без тени Ширина в пикселях

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

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

Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается курсивом)Мой адрес:Москва,

Группировка элементов Элементы DIVЭлементы DIV и SPANЭлементы DIV и SPAN вместе

Элементы DIV и SPAN Первый div Второй div Третий

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

Раскрашиваем страницу Раскрашиваем страницу Этот текст синего

Элемент FONT (не желателен)серифный шрифт: Times New Roman, serifрубленый шрифт: Arial,

size="7"Величина шрифта на единицу меньше базовогоМаксимальный размер шрифта

Непосредственное форматирование текста - курсив - полужирный -

Логическое форматирование - выделение важных фрагментов курсивом - выделение особо важных

Специальные символы

Дополнительноп.1. Текст п. 1 никогда не будет перенесен браузером. п.2. Но

Лабораторная работаОформление текстаПримерный образец выполнения работы - файл lab-1-1-result.htmlДополнительные домашние задания:

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

Введение и основные понятия:
Основные сведения о языках разметки: HTML, XML,

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

Браузеры
Первый браузер NCSA Mosaic – также основа для NN и IE
Netscape

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

Как это работает
1
2
3
4
1
3
2
4
2 1
5
4 3
WWW
index.html
HTML
PHP
CGI
ASP
...
HTML
веб-сервер
jpg, gif, swf,
avi, mpg …

Объявление
Строгое

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

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

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

Какие бывают элементы?
Блочные (block elements)
Структурное форматирование
Текстовые (inline elements)
Непосредственное

Структурированный текст
Заголовок первого уровня
Элемент P представляет абзац. В нем не могут

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

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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

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

Абзац

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

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

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

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

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

Выровнять по центру
Выровнять по правому краю

Выровнять по левому краю
Толщина разделительной линии
Разделительная линия без тени
Ширина в пикселях

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

They went in single file, running like hounds on

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

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

Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается курсивом)
Мой адрес:
Москва,

Группировка элементов
Элементы DIVЭлементы DIV и SPANЭлементы DIV и SPAN вместе

Элементы DIV и SPAN

Первый div

Второй div

Третий

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

Раскрашиваем страницу

Раскрашиваем страницу

Этот текст синего

Элемент FONT (не желателен)
серифный шрифт: Times New Roman, serif
рубленый шрифт: Arial,

size="7"
Величина шрифта на единицу меньше базового
Максимальный размер шрифта

Непосредственное форматирование текста
- курсив
- полужирный
-

Логическое форматирование
- выделение важных фрагментов курсивом
- выделение особо важных

`Специальные символы`

`Дополнительно`
`п.1. Текст п. 1 никогда не будет перенесен браузером. п.2. Но`

`Лабораторная работа`
`Оформление текста`
`Примерный образец выполнения работы - файл lab-1-1-result.html`
`Дополнительные домашние задания:`

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