Рабочие листы
к вашим урокам
Скачать
1 слайд
HTML
Учебник для «чайничков»
2 слайд
Что означают эти буквы?
HTML
Hyper Text Markup Language
HTML
Язык гипертекстовой разметки
3 слайд
Не раз загружали мы, WEB-страничку…
Именно язык гипертекстовой разметки HTML, ответственен за появление многих чудесных WEB-страничек, WEB-сайтов, наполненных текстами, картинками, звуками, анимацией, видеоклипами, ссылками…
Именно он определяет:
содержание,
внешний вид,
направленность странички.
4 слайд
Что такое HTML- файл?
HTML
HTML – файл это обычный текст, написанный например в программе Блокнот, но который содержит тэги.
Не верится?
И не верь, лучше всё ты сам проверь!
Каждый слайд содержит информацию о том, как создать или, что должно У ТЕБЯ получиться.
Будь внимателен!
После сверки своей работы с примерами, реши продолжать тебе путь или вернуться…
5 слайд
Что такое тэги?
Тэг - это имя (специальное слово), написанное на английском языке, заключенное в угловые скобки.
Например: <html>,
тэги
Парные
Непарные
</html>
<html>
открывающий
закрывающий
6 слайд
Создание личных страничек
Обычно сайт создается на локальном компьютере, а затем, когда он готов для публикации, копируется на Web-сервер
Создать Моих документах Папку под названием My_Site_Petrov
HTML
7 слайд
Структура
Чтобы наши вещи не терялись, мы их раскладываем по полочкам. Чтобы точно знать где графика, звуки, тексты мы будем придерживаться следующей структуры.
8 слайд
В каких средах работаем?
Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор)
Пуск, Программы, Стандартные, Блокнот
Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере:
Файл, Сохранить как (появится диалоговое окно)
Где? В вашей папке сайта My Site
Имя файла? «index.html» Сохранить
HTML
9 слайд
Браузер
- программа для просмотра Web-страниц.
В нашем компьютерном классе установлена программа Internet Explorer. Она преобразует код в то, что мы видим на web-странице (текст, изображения, таблицы,…)
10 слайд
Структура HTML - страницы
<html>
<head>
</head>
<body>
</body>
</html>
HTML
HTML – код
Начало страницы
Конец страницы
11 слайд
Заголовочная часть
<head>
</head>
HTML
<head>
<title>Информатика</title>
</head>
12 слайд
HTML
Текст заключенный между тэгами <title>Информатика</title>, отобразился в строке Имени документа
13 слайд
Основная часть
<body>
<h1>Мы приветствуем Вас!</h1>
</body>
<h1> тэги заголовка первого уровня на
</h1> Web – странице,
в основной части страницы.
HTML
14 слайд
Вот результат сохраненной Web – странички и просмотренной в браузере
HTML
15 слайд
Основная часть
<body>
<h1>Мы приветствуем Вас!</h1>
<h2>В путь</h2>
</body>
<h2> тэги заголовка второго уровня на
</h2> Web – странице,
отличие в размере шрифта, чем больше уровень, тем меньше размер
HTML
16 слайд
<body>
<h1>Мы приветствуем Вас!</h1>
<p>Приходите к нам и вы научитесь делать САЙТ</p>
</body>
<p> тэги для размещения
</p> абзаца на странице
Основная часть
HTML
17 слайд
HTML
Вот результат сохраненной Web – странички и просмотренной в браузере
18 слайд
Другие ТЭГИ …
- добавление переноса строки
<b> - полужирный </b>
<i> - курсив </i>
<p align=“center”> - центрирование
абзаца
HTML
Атрибут
тэга
Значение
атрибута
19 слайд
Другие ТЭГИ …
<img src=“image/pit.jpg”> - добавление
изображения
<body background=“fon/sneg.jpg”> - добавление фонового изображения
HTML
Имя.расширение
Имя.расширение
Имя папки
нахождения изображения
20 слайд
Другие ТЭГИ …
<marquee> - добавление движущегося
</marquee> текста
Но вы должны указать атрибуты, то есть описать поведение движения текста
Behavior (поведение)
scroll (прокрутка)
alternate (чередование)
slide (скольжение)
ПО умолчанию устанавливается scroll
HTML
21 слайд
Другие ТЭГИ …
<marquee> - добавление движущегося
</marquee> текста
Но вы должны указать атрибуты, то есть описать направление движения текста
Direction (направление)
left (ПО умолчанию) (влево)
right (вправо)
up (вверх)
down (вниз)
HTML
22 слайд
Другие ТЭГИ …
<marquee> - добавление движущегося
</marquee> текста
Но вы должны указать атрибуты, то есть описать цвет фона движущегося текста
Bgcolor (цвет фона движущейся строки)
red
сyan
Любой цвет
HTML
23 слайд
Другие ТЭГИ …
<marquee> добавление движущегося
</marquee> текста
Но вы должны указать атрибуты, то есть описать цикл прокрутки движущегося текста
Loop (цикл) сyan
infinite (бесконечный)
«2»
«3»
«4»
HTML
24 слайд
<marquee behavior=“scroll” direction=“left” bgcolor=“сyan”
loop=“infinite”> Привет</marquee>
HTML
25 слайд
з а п о м н и
HTML
Если вы внесли изменения в код, необходимо сохранить лист с кодом и обновить web-страницу, данная кнопка поможет вам в этом.
26 слайд
Сочетания клавиш
помогут вам работать быстрее
Ctrl + A – выделить всё
Ctrl + S – сохранить
Ctrl + V – вставить
Alt + Tab – смена активного документа
27 слайд
Замечания!!!
Можно писать в любом реестре, но придерживаться выбранного вами стиля.
=« » - этот набор знаков указывает на путь до нужного объекта (картинки, документа)
После каждой строки тэгов нажми клавишу «ENTER»
HTML
28 слайд
Задание.
Создай 2 WEB-странички. Используй все полученные знания. Материалы для работы находятся в папке MATERIAL
29 слайд
HTML
Автор учебника:
Котлярова Виктория Юрьевна,
учитель информатики и ИКТ, 1.кв.кат,
МБОУ СОШ №1 им. Н.К.Крупской,
Нижний Тагил
Рабочие листы
к вашим урокам
Скачать
6 666 064 материала в базе
Настоящий материал опубликован пользователем Петрова Вера Дмитриевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
72/180 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
600 ч.
Мини-курс
4 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.