Разделы презентаций


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

Содержание

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

Слайды и текст этой презентации

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

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

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

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

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

за появление многих чудесных WEB-страничек, WEB-сайтов, наполненных текстами, картинками, звуками,

анимацией, видеоклипами, ссылками…

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

Слайд 4 Что такое HTML- файл?
HTML
HTML – файл это обычный текст,

написанный например в программе Блокнот, но который содержит тэги.
Не верится?
И

не верь, лучше всё ты сам проверь!

Каждый слайд содержит информацию о том, как создать или, что должно У ТЕБЯ получиться.
Будь внимателен!
После сверки своей работы с примерами, реши продолжать тебе путь или вернуться…

Что такое HTML- файл?HTMLHTML – файл это обычный текст, написанный например в программе Блокнот, но который

Слайд 5Что такое тэги?
Тэг - это имя (специальное слово), написанное на

английском языке, заключенное в угловые скобки.
Например: ,


тэги
Парные
Непарные


открывающий
закрывающий


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

Слайд 6Создание личных страничек
Обычно сайт создается на локальном компьютере, а

затем, когда он готов для публикации, копируется на Web-сервер
Создать Моих

документах Папку под названием My_Site_Petrov

HTML

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

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

Чтобы точно знать где графика, звуки, тексты мы будем придерживаться

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

Слайд 8
В каких средах работаем?
Чтобы написать HTML- код необходимо открыть приложение

Блокнот (текстовый редактор)
Пуск, Программы, Стандартные, Блокнот

Сохранить HTML- код

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

HTML

В каких средах работаем?Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор)  Пуск, Программы, Стандартные,

Слайд 9Браузер
- программа для просмотра Web-страниц.
В нашем компьютерном классе

установлена программа Internet Explorer. Она преобразует код в то, что

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

Слайд 10Структура HTML - страницы







HTML
HTML – код




Начало страницы

Конец страницы

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

Слайд 11Заголовочная часть


HTML

Информатика

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

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

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

Слайд 13Основная часть

Мы приветствуем Вас!

тэги заголовка первого

уровня на

Web – странице,
в основной части страницы.


HTML

Основная частьМы приветствуем Вас!    тэги заголовка первого уровня на

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

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

Слайд 15Основная часть

Мы приветствуем Вас!
В путь


тэги заголовка

второго уровня на

Web – странице,
отличие в размере шрифта, чем больше уровень, тем меньше размер


HTML

Основная частьМы приветствуем Вас!В путь    тэги заголовка второго уровня на

Слайд 16
Мы приветствуем Вас!
Приходите к нам и вы научитесь делать САЙТ

тэги

для размещения

абзаца на странице


Основная часть

HTML


Мы приветствуем Вас!Приходите к нам и вы научитесь делать САЙТ

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

HTMLВот результат сохраненной 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

ПриветHTML

Слайд 25з а п о м н и
HTML
Если вы внесли

изменения в код, необходимо сохранить лист с кодом и обновить

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

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

+ S – сохранить
Ctrl + V – вставить
Alt + Tab

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

Слайд 27Замечания!!!
Можно писать в любом реестре, но придерживаться выбранного вами стиля.

» - этот набор знаков указывает на путь

до нужного объекта (картинки, документа)
После каждой строки тэгов нажми клавишу «ENTER»

HTML

Замечания!!!Можно писать в любом реестре, но придерживаться выбранного вами стиля.=«  »  - этот набор знаков

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

находятся в папке MATERIAL

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

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

СОШ №1 им. Н.К.Крупской,
Нижний Тагил

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

Теги

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика