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