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

Содержание

Слайд 2

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

Что означают эти буквы?

HTML

Hyper Text Markup Language

HTML

Язык гипертекстовой разметки

Слайд 3

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

Не раз загружали мы, WEB-страничку…

Именно язык гипертекстовой разметки HTML, ответственен за

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

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

Что такое HTML- файл?

HTML

HTML – файл это обычный текст, написанный

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

Не верится?
И не верь, лучше всё ты сам проверь!

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

Слайд 5

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

Что такое тэги?

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

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

тэги

Парные

Непарные



открывающий

закрывающий

Слайд 6

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

Создание личных страничек

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

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

HTML

Слайд 7

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

Структура

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

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

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

В каких средах работаем?

Чтобы написать HTML- код необходимо открыть приложение Блокнот

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

HTML

Слайд 9

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

Браузер

- программа для просмотра Web-страниц.

В нашем компьютерном классе установлена

программа Internet Explorer. Она преобразует код в то, что мы видим на web-странице (текст, изображения, таблицы,…)
Слайд 10

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

Структура HTML - страницы







HTML

HTML – код

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

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

Слайд 11

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

Заголовочная часть



HTML


Информатика

Слайд 12

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

HTML

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

Слайд 13

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

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


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



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

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

HTML

Слайд 14

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

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

HTML

Слайд 15

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

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


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


В путь



тэги заголовка второго уровня на

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

HTML

Слайд 16

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


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


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



тэги

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

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

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

HTML

Слайд 17

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

HTML

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

Слайд 18

Другие ТЭГИ … - добавление переноса строки - полужирный - курсив

Другие ТЭГИ …
- добавление переноса строки
- полужирный

- курсив

- центрирование
абзаца

HTML

Атрибут
тэга

Значение
атрибута

Слайд 19

Другие ТЭГИ … - добавление изображения - добавление фонового изображения HTML

Другие ТЭГИ …

- добавление
изображения
- добавление

фонового изображения

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 Если вы внесли

з а п о м н и

HTML

Если вы внесли изменения

в код, необходимо сохранить лист с кодом и обновить web-страницу, данная кнопка поможет вам в этом.
Слайд 26

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

Сочетания клавиш помогут вам работать быстрее

Ctrl + A – выделить всё
Ctrl +

S – сохранить
Ctrl + V – вставить
Alt + Tab – смена активного документа
Слайд 27

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

Замечания!!!

Можно писать в любом реестре, но придерживаться выбранного вами стиля.
=« »

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

HTML

Слайд 28

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

Задание.

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

в папке MATERIAL
- Предыдущая
к 70-летию снятия блокады г. Ленинграда (1944 г.)
Следующая -
Защита информации

Похожие презентации

Раздел 8 Анализ частотного отклика
Алгоритм и алгоритмические структуры
Что такое компьютер ? Компьютер - это программируемое электронное устройство, способное обрабатывать данные и производить вычисл
Автоматизированная система охраны грузов и сбора доходов АСУ ОГСД. Компания ИнтэлЛекс
Торговые процессы. Базовые процедуры
Понятие и типы виртуальных операторов на рынке услуг подвижной связи
Machine learning. Технология программирования на языке python и разработка программ для машинного обучения. Лекция v
Дисплей
МОУ «Лицей №4» г. Юбилейного Фаловская Е.О.
Дискретная оптимизация в MSC.Nastran С.А. Сергиевский Московское представительство MSC.Software Corporation
Компьютерные презентации. Разработка и создание презентации
Сокеты. Цели и задачи
Шифри складної заміни. (Лекція 5)
Osnovnye_kharakteristiki_liniy_svyazi
Программирование на языках высокого уровня
Компас 3D - LT Создание автообъекта: Выбрать фигуру. В нижней части окна найти панель Автосоздания объектов.
Презентация "Особенности Общения в сети Интернет" - скачать презентации по Информатике
Обучающие электронные выставки в библиотечной практике
Introduction to Segment tree
Компьютерные игры от независимых разработчиков
Анализ защищённости программного обеспечения
Угадай мелодию по эмоджи
Животный мир зоны смешанных и широколиственных лесов
Проектирование умного города
Классификация технологических подходов (модели жизненного цикла): гибкие подходы
История персонажей MORTAL KOMBAT XL
Как установить whatsapp1.1
Обобщающий урок Этапы моделирования
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть