HTML Учебник для «чайничков». Что означают эти буквы? HTML Hyper Text Markup Language HTML Язык гипертекстовой разметки. - презентация

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

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

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

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

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

6 Создание личных страничек Обычно сайт создается на локальном компьютере, а затем, когда он готов для публикации, копируется на Web-сервер My_Site_Petrov Создать Моих документах Папку под названием 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 – странице, Web – странице, в основной части страницы. в основной части страницы. HTML

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

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

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

17 HTML Web – странички и просмотренной в браузере Вот результат сохраненной 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 + A – выделить всё Ctrl + S Ctrl + S – сохранить Ctrl + V Ctrl + V – вставить Alt + Tab Alt + Tab – смена активного документа

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

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

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