kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

  1. Главная
  2. Информатика
  3. Презентации
  4. презентация " Основы HTML"

Презентация " Основы HTML"

Нажмите, чтобы узнать подробности

HTML (Hyper Text Markup Language) – язык разметки гипертекста, включает в себя способы оформления гипертекстовых документов.

SGML (Standard Generalized Markup Language) - стандартный язык обобщенной разметки.

XML (Extended Markup Language) - расширяемый язык разметки.

Гипертекст – структура, позволяющая

устанавливать смысловые связки между элементами текста и другими документами.

Web-узел или  Web-сайт – группа Web-страниц, принадлежащих одному автору или одному издателю, взаимосвязанных общими гиперссылками.

Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.

Просмотр содержимого документа
«презентация " Основы HTML"»

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

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

История март 1995 начало работы над HTML 3 + CSS 1994 Подготовка HTML 2.0 Консорциум W3 (W3C) www.W3.org январь 1997 HTML 3.2 2010 год HTML 5.0 1991 CERN HTML декабрь 1997 HTML 4.0 + CSS 2.0 22 января 2008 года W3C официально объявил

История

март 1995

начало работы над HTML 3 + CSS

1994

Подготовка HTML 2.0

Консорциум W3 (W3C)

www.W3.org

январь 1997

HTML 3.2

2010 год

HTML 5.0

1991

CERN

HTML

декабрь 1997

HTML 4.0 + CSS 2.0

22 января 2008 года

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

1986

ISO-8879

SGML

24 декабря 1999

HTML 4.01

2000

XHTML 1.0

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

Основные понятия

  • Web-сайт
  • Web-сервер
  • Web-адрес (домен)
  • Web-страница

*.html

*.html

*.html

...

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

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

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

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

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

тег

Структура HTML документа Здесь размещается служебная информация. Пользователь ее не видит. Здесь размещается содержание документа. Именно это видит пользователь. Определение типа документа Начало документа Начало заголовка Конец заголовка Начало тела документа Конец тела документа Конец документа" width="640"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

src="images/girl.png" width="189" height="255"

Комментарий

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

Заголовки

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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

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

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

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

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

Абзац

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

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

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

Улучшаем страницу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Атрибут

Атрибут

Тег

Имя атрибута

Значение атрибута

Атрибут

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

align =" right " size =" 3 " width =" 450 "

Используем атрибуты align = Выровнять по центру align =" right " Выровнять по правому краю align =" justify " Выровнять по ширине align =" left " Выровнять по левому краю size =" 3 " Толщина разделительной линии noshade Разделительная линия без тени align =" right " width =" 450 " Ширина в пикселях size =" 3 " width =" 50% " align =" center "" width="640"

Используем атрибуты

align =" center " Выровнять по центру

align =" right " Выровнять по правому краю

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

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

size =" 3 " Толщина разделительной линии

noshade Разделительная линия без тени

align =" right " width =" 450 " Ширина в пикселях

size =" 3 " width =" 50% " align =" center "

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

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

Время –

начинаю

про Ленина рассказ.

Но не потому,

что горя

нету более,

время

потому,

что резкая тоска

стала ясною

осознанною болью.

Элементы DIV и SPAN div id= div class="one" Первый div div class="one" Второй div class="one" Третий div span class="two" Первый span span class="two" Второй span class="two" Третий span" width="640"

Элементы DIV и SPAN

div id="main"

div class="one" Первый div div

class="one" Второй div

class="one" Третий div

span class="two" Первый span span

class="two" Второй span

class="two" Третий span

Коротко о цвете Шестнадцатеричная система счисления: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F Диапазон: 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 сочетаний).

Коротко о цвете

Шестнадцатеричная система счисления:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

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

Раскрашиваем страницу Раскрашиваем страницу bgcolor = Этот текст синего цвета, color =" red " а этот - красного. color =" green " Горизонтальная линия тоже может быть разноцветная." width="640"

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

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

bgcolor =" silver " text =" #0000FF "

Этот текст синего цвета,

color =" red " а этот - красного.

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

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

Непосредственное форматирование текста

- курсив

- полужирный

- подчеркнутый

- перечеркнутый

- моноширинный

- увеличить шрифт

- уменьшить шрифт

- надиндекс

- подиндекс

Специальные символы     " " Неразбиваемый пробел & < Прямая кавычка & © ™ Зарегистрировано ® Торговая марка ™" width="640"

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

 

 

"

"

Неразбиваемый пробел

&

<

Прямая кавычка

&

"

<

>

Амперсанд

&

>

©

Знак "меньше"

©

®

Знак "больше"

™

®

Копирайт

©

™

Зарегистрировано

®

Торговая марка

™


Получите в подарок сайт учителя

Информатика 2 класс ФГОС

Информатика 5 класс (Россия)

Видеоуроки по информатике 6 класс (к...

Электронная тетрадь по информатике 11...

Информатика 11 класс (Беларусь)

Электронная тетрадь по информатике 9...

Электронная тетрадь по информатике 5...

Основы алгоритмизации и...

Предмет: Информатика

Категория: Презентации

Целевая аудитория: 11 класс.
Урок соответствует ФГОС

Скачать
презентация " Основы HTML"

Автор: Ахметкалиева Зарина Бахитжановна

Дата: 25.02.2016

Номер свидетельства: 298800

Похожие файлы

object(ArrayObject)#865 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(45) "Основы языка разметки HTML"
    ["seo_title"] => string(27) "osnovy_iazyka_razmetki_html"
    ["file_id"] => string(6) "516449"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(11) "presentacii"
    ["date"] => string(10) "1562274900"
  }
}

object(ArrayObject)#887 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(139) "конспект урока географии "Население и хозяйство тундры" Презентация к уроку"
    ["seo_title"] => string(77) "konspiekturokaghieoghrafiinasielieniieikhoziaistvotundrypriezientatsiiakuroku"
    ["file_id"] => string(6) "303191"
    ["category_seo"] => string(10) "geografiya"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1457454374"
  }
}

object(ArrayObject)#865 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(29) "Основы языка HTML "
    ["seo_title"] => string(18) "osnovy-iazyka-html"
    ["file_id"] => string(6) "154908"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1421226441"
  }
}

object(ArrayObject)#887 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(64) "«Web – технологии.  Основы языка HTML »"
    ["seo_title"] => string(36) "web-tiekhnologhii-osnovy-iazyka-html"
    ["file_id"] => string(6) "277094"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(11) "presentacii"
    ["date"] => string(10) "1452842157"
  }
}

object(ArrayObject)#865 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(282) "Тема. Цвет. Основы цветоведения. Фантазийное изображение сказочного царства в сближенной цветовой гамме. «Изумрудный город», «Царство Снежной королевы»."
    ["seo_title"] => string(168) "tiema-tsviet-osnovy-tsvietoviedieniia-fantaziinoie-izobrazhieniie-skazochnogho-tsarstva-v-sblizhiennoi-tsvietovoi-ghammie-izumrudnyi-ghorod-tsarstvo-sniezhnoi-korolievy"
    ["file_id"] => string(6) "253529"
    ["category_seo"] => string(3) "izo"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1447604775"
  }
}

Перейти в личный кабинет

Полезное для учителя




Распродажа видеоуроков!
1270 руб.
2110 руб.
Смотреть все комплекты
Курсы ПК и ППК для учителей!
Смотреть все курсы
ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Проверка свидетельства