HTML Учебник для «чайничков»

Слайд #1

HTML Учебник для «чайничков»

Слайд #2

Что означают эти буквы? HTML Hyper Text Markup Language HTML Язык гипертекстовой разметки

Слайд #3

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

Слайд #4

Что такое HTML- файл? HTML HTML – файл это обычный текст, написанный например в программе Блокнот, но который содержит тэги. Не верится? И не верь, лучше всё ты сам проверь! Каждый слайд содержит информацию о том, как создать или, что должно У ТЕБЯ получиться. Будь внимателен! После сверки своей работы с примерами, реши продолжать тебе путь или вернуться…

Слайд #5

Что такое тэги? Тэг - это имя (специальное слово), написанное на английском языке, заключенное в угловые скобки. Например: , тэги Парные Непарные открывающий закрывающий

Слайд #6

Создание личных страничек Обычно сайт создается на локальном компьютере, а затем, когда он готов для публикации, копируется на Web-сервер Создать Моих документах Папку под названием My_Site_Petrov HTML

Слайд #7

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

Слайд #8

В каких средах работаем? Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор) Пуск, Программы, Стандартные, Блокнот Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере: Файл, Сохранить как (появится диалоговое окно) Где? В вашей папке сайта My Site Имя файла? «index.html» Сохранить HTML

Слайд #9

Браузер - программа для просмотра Web-страниц. В нашем компьютерном классе установлена программа Internet Explorer. Она преобразует код в то, что мы видим на web-странице (текст, изображения, таблицы,…)

Слайд #10

Структура HTML - страницы HTML HTML – код Начало страницы Конец страницы

Слайд #11

Заголовочная часть HTML Информатика

Слайд #12

HTML Текст заключенный между тэгами Информатика, отобразился в строке Имени документа

Слайд #13

Основная часть Мы приветствуем Вас! тэги заголовка первого уровня на Web – странице, в основной части страницы. HTML

Слайд #14

Вот результат сохраненной Web – странички и просмотренной в браузере HTML

Слайд #15

Основная часть Мы приветствуем Вас! В путь тэги заголовка второго уровня на Web – странице, отличие в размере шрифта, чем больше уровень, тем меньше размер HTML

Слайд #16

Мы приветствуем Вас! Приходите к нам и вы научитесь делать САЙТ тэги для размещения абзаца на странице Основная часть HTML

Слайд #17

HTML Вот результат сохраненной Web – странички и просмотренной в браузере

Слайд #18

Другие ТЭГИ … - добавление переноса строки - полужирный - курсив - центрирование абзаца HTML Атрибут тэга Значение атрибута

Слайд #19

Другие ТЭГИ … - добавление изображения - добавление фонового изображения HTML Имя.расширение Имя.расширение Имя папки нахождения изображения

Слайд #20

Другие ТЭГИ … - добавление движущегося текста Но вы должны указать атрибуты, то есть описать поведение движения текста Behavior (поведение) scroll (прокрутка) alternate (чередование) slide (скольжение) ПО умолчанию устанавливается scroll HTML

Слайд #21

Другие ТЭГИ … - добавление движущегося текста Но вы должны указать атрибуты, то есть описать направление движения текста Direction (направление) left (ПО умолчанию) (влево) right (вправо) up (вверх) down (вниз) HTML

Слайд #22

Другие ТЭГИ … - добавление движущегося текста Но вы должны указать атрибуты, то есть описать цвет фона движущегося текста Bgcolor (цвет фона движущейся строки) red сyan Любой цвет HTML

Слайд #23

Другие ТЭГИ … добавление движущегося текста Но вы должны указать атрибуты, то есть описать цикл прокрутки движущегося текста Loop (цикл) сyan infinite (бесконечный) «2» «3» «4» HTML

Слайд #24

Привет HTML

Слайд #25

HTML Если вы внесли изменения в код, необходимо сохранить лист с кодом и обновить web-страницу, данная кнопка поможет вам в этом.

Слайд #26

Сочетания клавиш помогут вам работать быстрее Ctrl + A – выделить всё Ctrl + S – сохранить Ctrl + V – вставить Alt + Tab – смена активного документа

Слайд #27

Замечания!!! Можно писать в любом реестре, но придерживаться выбранного вами стиля. =« » - этот набор знаков указывает на путь до нужного объекта (картинки, документа) После каждой строки тэгов нажми клавишу «ENTER» HTML

Слайд #28

Задание. Создай 2 WEB-странички. Используй все полученные знания. Материалы для работы находятся в папке MATERIAL

Слайд #29

HTML Автор учебника: Котлярова Виктория Юрьевна, учитель информатики и ИКТ, 1.кв.кат, МБОУ СОШ №1 им. Н.К.Крупской, Нижний Тагил