HTML Учебник для чайничков доклад по теме Информатика

Доклад раскрывает тему " HTML Учебник для чайничков ".
Презентация поможет подготовится к предмету Информатика, может быть полезна как ученикам и студентам, так и преподавателям.
Материал представлен на 29 страницах, оформлен в виде презентации, доступен для скачивания и просмотра онлайн.

Навигация по документу

Страница №1
HTML Учебник для «чайничков»
Страница №2
Что означают эти буквы?
Что означают эти буквы?
Страница №3
Не раз загружали мы, WEB-страничку…
Именно язык гипертекстовой разметки HTML, ответственен за появление многих чудесных  WEB-страничек,  WEB-сайтов, наполненных текстами, картинками, звуками, анимацией, видеоклипами, ссылками… 

Именно он определяет:
содержание, 
внешний вид,  
направленность странички.
Не раз загружали мы, WEB-страничку… Именно язык гипертекстовой разметки HTML, ответственен за появление многих чудесных WEB-страничек, WEB-сайтов, наполненных текстами, картинками, звуками, анимацией, видеоклипами, ссылками… Именно он определяет: содержание, внешний вид, направленность странички.
Страница №4
Что такое HTML- файл?
Что такое HTML- файл?
Страница №5
Что такое тэги?
Тэг  - это имя (специальное слово), написанное на английском языке, заключенное  в угловые скобки.
Например:  <html>, <br>
Что такое тэги? Тэг - это имя (специальное слово), написанное на английском языке, заключенное в угловые скобки. Например: <html>, <br>
Страница №6
Создание личных страничек 
Обычно сайт создается на локальном компьютере, а затем, когда он готов для публикации, копируется на Web-сервер
Создать Моих документах Папку под названием My_Site_Petrov
Создание личных страничек Обычно сайт создается на локальном компьютере, а затем, когда он готов для публикации, копируется на Web-сервер Создать Моих документах Папку под названием My_Site_Petrov
Страница №7
Структура
Чтобы наши вещи не терялись,  мы их раскладываем по полочкам. Чтобы точно знать где графика, звуки, тексты мы будем придерживаться следующей структуры.
Структура Чтобы наши вещи не терялись, мы их раскладываем по полочкам. Чтобы точно знать где графика, звуки, тексты мы будем придерживаться следующей структуры.
Страница №8
В каких средах работаем?
Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор)
    Пуск, Программы, Стандартные, Блокнот

Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере:
Файл, Сохранить как (появится диалоговое окно)
Где?     В вашей папке сайта      My Site
Имя файла?     «index.html»                            Сохранить
В каких средах работаем? Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор) Пуск, Программы, Стандартные, Блокнот Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере: Файл, Сохранить как (появится диалоговое окно) Где? В вашей папке сайта My Site Имя файла? «index.html» Сохранить
Страница №9
Браузер 
- программа для просмотра Web-страниц.
Браузер - программа для просмотра Web-страниц.
Страница №10
Структура HTML - страницы
<html>
<head>
</head>
<body>
</body>
</html>
Структура HTML - страницы <html> <head> </head> <body> </body> </html>
Страница №11
Заголовочная часть
<head>
</head>
Заголовочная часть <head> </head>
Страница №12
Информация вложена в изображении слайда
Страница №13
Основная часть
<body>
<h1>Мы приветствуем Вас!</h1>
</body>
Основная часть <body> <h1>Мы приветствуем Вас!</h1> </body>
Страница №14
Информация вложена в изображении слайда
Страница №15
Основная часть
<body>
<h1>Мы приветствуем Вас!</h1>
<h2>В путь</h2>
</body>
Основная часть <body> <h1>Мы приветствуем Вас!</h1> <h2>В путь</h2> </body>
Страница №16
Информация вложена в изображении слайда
Страница №17
Информация вложена в изображении слайда
Страница №18
Другие ТЭГИ …
<br> - добавление переноса строки
<b> - полужирный </b> 
<i> - курсив </i> 
<p align=“center”> - центрирование 
                                                        абзаца
Другие ТЭГИ … <br> - добавление переноса строки <b> - полужирный </b> <i> - курсив </i> <p align=“center”> - центрирование абзаца
Страница №19
Другие ТЭГИ …
<img src=“image/pit.jpg”> - добавление 
                                               изображения

<body background=“fon/sneg.jpg”>    -  добавление фонового изображения
Другие ТЭГИ … <img src=“image/pit.jpg”> - добавление изображения <body background=“fon/sneg.jpg”> - добавление фонового изображения
Страница №20
Другие ТЭГИ …
<marquee>     - добавление движущегося
 </marquee>                            текста
Но вы должны указать  атрибуты, то есть описать поведение движения текста
Behavior  (поведение) 
scroll (прокрутка)
alternate (чередование)
slide (скольжение) 
ПО умолчанию устанавливается scroll
Другие ТЭГИ … <marquee> - добавление движущегося </marquee> текста Но вы должны указать атрибуты, то есть описать поведение движения текста Behavior (поведение) scroll (прокрутка) alternate (чередование) slide (скольжение) ПО умолчанию устанавливается scroll
Страница №21
Другие ТЭГИ …
<marquee>     - добавление движущегося
 </marquee>                            текста
Но вы должны указать  атрибуты, то есть описать направление движения текста
Direction (направление) 
left (ПО умолчанию) (влево)
right (вправо)
up (вверх) 
down (вниз)
Другие ТЭГИ … <marquee> - добавление движущегося </marquee> текста Но вы должны указать атрибуты, то есть описать направление движения текста Direction (направление) left (ПО умолчанию) (влево) right (вправо) up (вверх) down (вниз)
Страница №22
Другие ТЭГИ …
<marquee>     - добавление движущегося
 </marquee>                            текста
Но вы должны указать  атрибуты, то есть описать цвет фона движущегося текста
Bgcolor (цвет фона движущейся строки) 
red
сyan
Любой цвет
Другие ТЭГИ … <marquee> - добавление движущегося </marquee> текста Но вы должны указать атрибуты, то есть описать цвет фона движущегося текста Bgcolor (цвет фона движущейся строки) red сyan Любой цвет
Страница №23
Другие ТЭГИ …
<marquee>          добавление движущегося
 </marquee>                            текста
Но вы должны указать  атрибуты, то есть описать цикл прокрутки движущегося текста
Loop (цикл) сyan
infinite (бесконечный)
«2»
«3»
«4»
Другие ТЭГИ … <marquee> добавление движущегося </marquee> текста Но вы должны указать атрибуты, то есть описать цикл прокрутки движущегося текста Loop (цикл) сyan infinite (бесконечный) «2» «3» «4»
Страница №24
<marquee behavior=“scroll” direction=“left” bgcolor=“сyan”
loop=“infinite”> Привет</marquee>
<marquee behavior=“scroll” direction=“left” bgcolor=“сyan” loop=“infinite”> Привет</marquee>
Страница №25
Информация вложена в изображении слайда
Страница №26
Сочетания клавиш
помогут вам работать быстрее
Ctrl + A – выделить всё
Ctrl + S – сохранить
Ctrl + V – вставить
Alt + Tab – смена активного документа
Сочетания клавиш помогут вам работать быстрее Ctrl + A – выделить всё Ctrl + S – сохранить Ctrl + V – вставить Alt + Tab – смена активного документа
Страница №27
Замечания!!!
Можно писать в любом реестре, но придерживаться выбранного вами стиля.
=«    »   - этот набор знаков указывает на путь до нужного объекта (картинки, документа)
После каждой строки тэгов нажми клавишу «ENTER»
Замечания!!! Можно писать в любом реестре, но придерживаться выбранного вами стиля. =« » - этот набор знаков указывает на путь до нужного объекта (картинки, документа) После каждой строки тэгов нажми клавишу «ENTER»
Страница №28
Задание.
Создай 2 WEB-странички. Используй все полученные знания. Материалы для работы находятся в папке MATERIAL
Задание. Создай 2 WEB-странички. Используй все полученные знания. Материалы для работы находятся в папке MATERIAL
Страница №29
HTML
Автор учебника:
Котлярова Виктория Юрьевна, 
учитель информатики и ИКТ, 1.кв.кат, 
МБОУ СОШ №1 им. Н.К.Крупской,
Нижний Тагил
HTML Автор учебника: Котлярова Виктория Юрьевна, учитель информатики и ИКТ, 1.кв.кат, МБОУ СОШ №1 им. Н.К.Крупской, Нижний Тагил