Презентация, доклад по информатике на тему Основы - HTML

Содержание

История1986ISO-8879SGML 1991CERNHTML1994Подготовка HTML 2.0Консорциум W3 (W3C)www.W3.orgмарт 1995начало работы над HTML 3 + CSSянварь 1997HTML 3.2декабрь 1997HTML 4.0 + CSS 2.024 декабря 1999HTML 4.012000XHTML 1.02010 годHTML 5.022 января 2008 годаW3C официально объявил "HTML 5 - в разработке"

Слайд 1Основы HTML и CSS Введение и основные понятия

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

Слайд 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 - в разработке"

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

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


...

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

Слайд 4Простая HTML страница



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


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



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




тег

Простая HTML страница Пример HTML страницы Мой первый HTML-документ Скоро мы узнаем, что

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

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





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




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



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

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

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

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

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

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

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

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

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




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



...Содержание

документа...





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

Слайд 7Тело документа



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


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

горизонтальная линия -->

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

 



Комментарий

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

Слайд 8Заголовки

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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

Слайд 9Горизонтальная линия
Горизонтальная линия


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

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


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

Слайд 10Абзац

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

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



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



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

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

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






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

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

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

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

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

Слайд 12Принудительный разрыв строки

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

Когда не в

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

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

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

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

Мой первый

документ

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

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

А.С.Пушкин (отрывок)


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

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

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

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




Окончательный вид документа Мой первый документ Мой первый HTML-документ

Слайд 14Атрибуты элементов



Атрибут



Атрибут


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

Атрибут


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

Слайд 15Используем атрибуты
Выровнять по центру
Выровнять по правому краю

align="justify"> Выровнять по ширине

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

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


Используем атрибуты Выровнять по центру Выровнять по правому краю Выровнять по ширине Выровнять по левому краю Толщина

Слайд 16Авторское форматирование

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

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

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

Слайд 17Элементы DIV и SPAN

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

div


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

Элементы 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 сочетаний).





Коротко о цветеДиапазон: 00 - FF (0 - 255)#00FF00 – green (зеленый) #FF0000 – red (красный) #0000FF

Слайд 19Раскрашиваем страницу


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


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

цвета,
а этот - красного.
Горизонтальная линия тоже может быть разноцветная.


Раскрашиваем страницу Раскрашиваем страницу Этот текст синего цвета, а этот - красного. Горизонтальная линия тоже может

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

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

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

Специальные символы
Скачать презентацию

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

Презентация по информатике на тему: ОТНОШЕНИЯ ОБЪЕКТОВ И ИХ МНОЖЕСТВ 6 класс Презентация по информатике на тему: ОТНОШЕНИЯ ОБЪЕКТОВ И ИХ МНОЖЕСТВ 6 класс 275
Презентация по информатике на тему Санау жүйесі Презентация по информатике на тему Санау жүйесі 188
Презентация по информатике на тему Блокнот және Калькулятор (5 класс) Презентация по информатике на тему Блокнот және Калькулятор (5 класс) 300
Презентация по информатике на тему Виды программного обеспечения Презентация по информатике на тему Виды программного обеспечения 499
Презентация к конкурсу Самый умный информатик. Второй тур. (8 класс) Презентация к конкурсу Самый умный информатик. Второй тур. (8 класс) 196
Сms - системы Сms - системы 201

Что такое shareslide.ru?

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

Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть