HTML (язык гипертекстовой разметки) презентация

Содержание

Слайд 2

Сайт – набор текстовых файлов

Сайт – набор текстовых файлов

Слайд 3

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»)

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»)  — язык разметки

документов во Всемирной паутине.
Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

Данные + Метаданные

Page title

HTML– контейнер для информации

Слайд 4

Тег – элемент языка разметки гипертекста. У тега могут быть

Тег – элемент языка разметки гипертекста.
У тега могут быть свойства

(атрибутами).

Теги

Page title




оформляемый текст

Слайд 5

Блокнот Текстовый редактор

Блокнот

Текстовый редактор

Слайд 6

Notepad++ Текстовый редактор

Notepad++

Текстовый редактор

Слайд 7

HTML документ Сохраните как *.html, Ctrl+Shift+Alt+R

HTML документ

Сохраните как *.html, Ctrl+Shift+Alt+R

Слайд 8

HTML документ

HTML документ

Слайд 9

https://ru.wikipedia.org/wiki/Шестнадцатеричная_система_счисления Кодировка

https://ru.wikipedia.org/wiki/Шестнадцатеричная_система_счисления

Кодировка

Слайд 10

Кодировка

Кодировка

Слайд 11

KOI-8r cp1251 В разных таблицах расширяющих ASCII кирилическими символами, эти

KOI-8r

cp1251

В разных таблицах расширяющих ASCII кирилическими символами, эти самые кирилические символы

стоят на различных позициях.

Суть проблемы

Слайд 12

KOI-8-r, cp1251,… => 1 байт = 256 различных символов. Максимум

KOI-8-r, cp1251,… => 1 байт = 256 различных символов. Максимум 2

языковых набора.

Unicode => От 1 до 6 байт – триллионы символов. Все языковые наборы.

BOM – как сигнализатор того, что файл в формате Unicode.

ASCII

UTF-8

UTF-8 BOM

Unicode как решение проблемы…

Слайд 13

Терминология ANSI – Американский национальный институт стандартов. Придумали однобайтовую кодировку

Терминология

ANSI – Американский национальный институт стандартов. Придумали однобайтовую кодировку ASCII.

ASCII –

Таблица кодировки которую придумал американский институт стандартов. Однобайтовая кодировка, содержит 128 символов из 256 возможных, только латинские буквы.

Windows-cp1251 – Кодовая таблица расширяющая ASCII за счёт незанятых 128 символов, содержит кириллические символы. Является стандартной кодировкой для Windows.

KOI-8R – Кодовая таблица расширяющая ASCII за счёт незанятых 128 символов, содержит кириллические символы. Является стандартной кодировкой для OpenSourse ПО. Расположение кириллических символов не совпадает с ср1251.

ISO 8859-5, cp866 – Кодовая таблица расширяющая ASCII за счёт незанятых 128 символов, содержит кириллические символы. Менее распространены чем cp1251 и KOI-8R, встречается на Юниксоподобных системам.

Unicode – Стандарт кодирования (и общее название семейства многобайтовых кодировок), позволяющий представить знаки практически всех языков.

UTF-8, UTF-16 и т.п. – Конкретные версии многобайтовых кодировок относящихся к семейству Unicode.

BOM (Byte Order Mark) – метка указывающая принадлежность кодировки файла к семейству Unicode.

Слайд 14

Как определить в какой кодировке файл?

Как определить в какой кодировке файл?

Слайд 15

…или же сохранять файлы в кодировке UTF-8 с меткой BOM.


…или же сохранять файлы в кодировке

UTF-8 с меткой BOM.
Слайд 16

HTML дай 5!

HTML дай 5!

Слайд 17

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

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

Слайд 18

Объявление типа документа

Объявление типа документа

Слайд 19







Слайд 20

CONTENT


CONTENT

Слайд 21

Сохраните как *.html, Ctrl+Shift+Alt+R Размещение элементов на странице

Сохраните как *.html, Ctrl+Shift+Alt+R

Размещение элементов на странице

Слайд 22

Размещение элементов на странице

Размещение элементов на странице

Слайд 23

Inline & Block & Строчные и Блочные

Inline & Block

&


Строчные и Блочные

Слайд 24

Строчные и Блочные

Строчные и Блочные

Слайд 25

Строчные и Блочные

Строчные и Блочные

Слайд 26

Блочные (Block) … …

Блочные (Block)






Слайд 27

… … Строчные (Inline)









Строчные (Inline)

Слайд 28

Блочные (Inline)

Блочные (Inline)

Слайд 29

Блочные (Block) … … …

Блочные (Block)





Слайд 30

Строчные (Inline)

Строчные (Inline)

Слайд 31

Строчные (Inline) … … …

Строчные (Inline)





Слайд 32

Блочные (Block) , … , , , … Строчные (Inline) , , , , …

Блочные (Block)

,

,
,
    ,

      Строчные (Inline)

      , , , ,

Задания Узнать, что такое спецсимволы HTML зачем нужны, как правильно

такое Favicon, сделать страницу где он будет:
http://www.google.com

Узнать, что делают следующие теги: , , ,
, ,