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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет HTML

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

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

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

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

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