Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

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

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

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

Презентация на тему Основы технологии html

Содержание

К вопросу о форматах изображений
Основы технологии HTMLКурс «Основы компьютерной визуализации»Лекция 4. Кафедра биологии МБФ2011 г. К вопросу о форматах изображений К вопросу о форматах изображений Сохранение для Web в Photoshop Сохранение для Web в Photoshop Как обозначить цвет?#ЦЦЦЦЦЦДля быстрого пересчета 10 – 16 переключи калькулятор на режим Как обозначить цвет?# 000000 # FF0000 # 00FF00 # 0000FF# FFFFFF # FFFF00 # 00FFFF # FF00FF0 50 Три технологии Что такое язык HTML??программированиеразметка Тег – слово языка HTML Форма тега< Ключ параметр1=«значение» параметр2=«значение»> Область действия тега Вложенные теги < Ключ1 параметры> Область действия ключа1 Область действия ключа1 и ключа2 Область действия ключа1 Область действия тегаКстати да! Как создать HTML документ?Открыть блокнотНапечатать будущий кодСохранить в формате “Название.txt”Убедиться, у файлов Сайт как живой организмЛицо, паспорт и мозг сайта. Здесь можно узнать имя Это название сайта. Оно отразится в заголовке окна браузера .название1{набор параметров;} .названиеN{набор параметров;}Черный Некоторые атрибуты Body:Background=«путь на файл фона»Bgcolor=“#FFFFFF”  однотонный цвет фонаText=“цвет текста по Частые атрибуты РАЗНЫХ теговId, name, title – позволяют присвоить элементу личное имя, Примеры тегов, воздействующих на текст Большой шрифт Маленький шрифт Толстый шрифт Ссылки Эта ссылка приведет вас на сайт РГМУ Ссылкам можно Картинка width=153px height =*Всегда важно ЖЕСТКО прописывать ширину и высоту картинки. Можно Карта Встроенные элементы javaScript Произвести действие, когда…OnMouseOver – когда курсор попадает на обьектOnMouseOut Таблицы Подсказка Фреймы Frameset заменяет секцию Body. Рядом должны лежать (технология CSS).NAME{position:absolute;  выравниваниеbackground:#ccc;  цвет фонаwidth:300px;  ширинаpadding:15px;  Point loggerЛатинские буквыСчетчик, крутится самЗдесь появится код. Его можно скопироватьCTRL+C  CTRL+VМножитель. Как обвести рассеченную область Разработанные примерыЦветовой указатель:Текст этого цвета лучше не трогатьЭто текстовые подписи, которые надо Index.html Список примеров Это меню навигации по созданным примерамКровеносная система млекопитающего Карта ФреймсетКод 1. фреймсет. фреймыКод 2. Карта. Карта Высота картинки Просмотрщикfunction changeImg(img, pp) { document.getElementById( По наведению Образец наведенияfunction showHint(id,s){ var sdiv=document.getElementById(id); if(s) { По щелчку Образец наведенияfunction showHint(id,s){ var sdiv=document.getElementById(id); if(s) { Пример с галочкамиОн еще сырой, но интересный …. В планахНарабатывать новые идеи и скриптыСобирать сайт общего доступа на базе полученных
Слайды презентации

Слайд 2 К вопросу о форматах изображений

К вопросу о форматах изображений

Слайд 3 К вопросу о форматах изображений

К вопросу о форматах изображений

Слайд 4 Сохранение для Web в Photoshop

Сохранение для Web в Photoshop

Слайд 5 Сохранение для Web в Photoshop

Сохранение для Web в Photoshop

Слайд 6 Как обозначить цвет?
#ЦЦЦЦЦЦ
Для быстрого пересчета 10 – 16

Как обозначить цвет?#ЦЦЦЦЦЦДля быстрого пересчета 10 – 16 переключи калькулятор на

переключи калькулятор на режим «Программист». Слева точки Hex -

Dec

Слайд 7 Как обозначить цвет?
# 000000 # FF0000 # 00FF00 # 0000FF

# FFFFFF #

Как обозначить цвет?# 000000 # FF0000 # 00FF00 # 0000FF# FFFFFF # FFFF00 # 00FFFF # FF00FF0

FFFF00 # 00FFFF # FF00FF
0 50 100

150 200 255

0 32 64 96 C8 FF

R

B

G

Слайд 8 Три технологии

Три технологии

Слайд 9 Что такое язык HTML?
?
программирование
разметка

Что такое язык HTML??программированиеразметка

Слайд 10 Тег – слово языка HTML

Тег – слово языка HTML

Слайд 11 Форма тега
< Ключ параметр1=«значение» параметр2=«значение»>
Область действия тега




Форма тега< Ключ параметр1=«значение» параметр2=«значение»> Область действия тега Вложенные






Вложенные теги














?
?
Закрывающий

тег

Открывающий тег

Слайд 12 < Ключ1 параметры>
Область действия ключа1

Область действия

< Ключ1 параметры> Область действия ключа1 Область действия ключа1 и ключа2 Область действия ключа1 Область действия тегаКстати да!

ключа1 и ключа2

Область действия ключа1


Область действия тега
Кстати да!

Так будет выглядеть комментарий в тексте HTML-->

Слайд 13 Как создать HTML документ?
Открыть блокнот
Напечатать будущий код
Сохранить в

Как создать HTML документ?Открыть блокнотНапечатать будущий кодСохранить в формате “Название.txt”Убедиться, у

формате “Название.txt”
Убедиться, у файлов в названии есть разрешение. Нет?

Сервис – Параметры папок – Вид – Скрывать незащищенные типы файлов – ок! В Висте и 7ке до сервиса можно добраться, нажав АLT

Переименовать файл в вид “Название.html”
Открыть файл браузером
В контекстном меню файла открыть его еще раз блокнотом.
После правок и сохранения обновлять страницу браузера

Слайд 14 Сайт как живой организм
Лицо, паспорт и мозг сайта.

Сайт как живой организмЛицо, паспорт и мозг сайта. Здесь можно узнать

Здесь можно узнать имя сайта, язык, на котором он

говорит, здесь он помнит создателя. Здесь прописаны темы, к которым обращаются поисковики.

То, что мы можем увидеть на сайте через браузер. Непосредственное содержимое сайта. То, что назовет сайтом пользователь, ни разу не видевший HTML код

Голова

Тело

Слайд 15


Это название сайта. Оно отразится в заголовке окна

Это название сайта. Оно отразится в заголовке окна браузера .название1{набор параметров;} .названиеN{набор

браузера








.название1{набор параметров;}
.названиеN{набор параметров;}

Черный ящик
НЕ ТРОГАТЬ!!!
ВЗРЫВООПАСНО!!


Измените один символ – перестает работать. Ошибки править НЕ БУДУ!!

Это javaScript

Этот параметр указывает адрес, где хранится текст скрипта

Это набор CSS стилей нашего сайта

Присутствие всех элементов не обязательно
(и дальше в т.ч.!)

Слайд 16
Некоторые атрибуты Body:
Background=«путь на файл фона»
Bgcolor=“#FFFFFF”  однотонный

Некоторые атрибуты Body:Background=«путь на файл фона»Bgcolor=“#FFFFFF”  однотонный цвет фонаText=“цвет текста

цвет фона
Text=“цвет текста по умолчанию”
Link =“Цвет текста гиперссылок по

умолчанию”




Слайд 17 Частые атрибуты РАЗНЫХ тегов
Id, name, title – позволяют

Частые атрибуты РАЗНЫХ теговId, name, title – позволяют присвоить элементу личное

присвоить элементу личное имя, и обратиться к нему из

других тегов
Target – цель, на которую воздействует объект
Style – свойства на языке CSS
Class – Стиль CSS, все стили прописаны в «Голове»
Align – выравнивание. Значения: left, right, center, justify (по ширине)
Valign - Вертикальное выравнивание. Значения: top, middle, bottom

Типичная подсказка:
Текст подсказки






Слайд 18 Примеры тегов, воздействующих на текст
Большой шрифт

Примеры тегов, воздействующих на текст Большой шрифт Маленький шрифт Толстый шрифт

Маленький шрифт
Толстый шрифт
Курсивный шрифт

Подчеркнутый шрифт
1 Верхний индекс 1 Нижний индекс

Красный текст

Весь текст внутри – один абзац



Одиночные теги
  - дополнительный пробел

- перевод на новую строку
- горизонтальная линия в тексте

Помимо кода html умеет кушать базовые названия цветов: red, blue,
yellow…

Слайд 19 Ссылки
Эта ссылка приведет вас на сайт

Ссылки Эта ссылка приведет вас на сайт РГМУ Ссылкам можно

РГМУ
Ссылкам можно скармливать картинки


Href=“файл.html”

Href=“папка/файл.html”


Href=“../папка/файл.html”


Русский здесь для удобства. В коде всегда ЛАТЫНЬ!

Слайд 20 Картинка



width=153px

Картинка width=153px height =*Всегда важно ЖЕСТКО прописывать ширину и высоту картинки.

height =*
Всегда важно ЖЕСТКО прописывать ширину и высоту картинки.

Можно в %. Но результат кривее. Узнать размер картинки можно в свойствах файла

Border = 10pt

width

height

Сам посчитает пропроцию

Слайд 21 Карта

Карта

alt=«Прямоугольник»
coords=«x1, y1, x2, y2»>

y2, … , xn, yn ">


Все координаты считаются от левого верхнего угла в пикселях!
Карта не работает сама по себе, она накладывается на изображение параметром usemap=“#Карта1”

R
x, y

x1, y1

x2, y2

x2, y2

x1, y1

x3, y3

xn, yn

Слайд 22 Встроенные элементы javaScript
Произвести действие, когда…
OnMouseOver – когда

Встроенные элементы javaScript Произвести действие, когда…OnMouseOver – когда курсор попадает на

курсор попадает на обьект
OnMouseOut – Курсор вышел за границу

объекта
OnClick – щелчок Левой Кнопкой Мыши по объекту
OnDblClick – двойной щелчок ЛКМ
OnMouseDown – ЛКМ зажата на объекте
OnMouseUp – ее наконец то отпустили
onRightClick – щелчок Правой КМ по объекту




Пример использования:
onmouseover=«function(‘parameter',1) "




Название функции. Посмотреть
ГЛАЗАМИ в черном ящике

Параметры, которые скушает функция. Смотреть рядом с названием

Слайд 23 Таблицы




Подсказка



Таблицы Подсказка










Слайд 24 Фреймы


Фреймы Frameset заменяет секцию Body. Рядом должны лежать

rows="80,*">

name="Фрейм 3">


Frameset заменяет секцию Body. Рядом должны лежать странички, которые отразятся во фреймах

- создает подокошко с полосами прокрутки

Слайд 25 (технология CSS)

.NAME{
position:absolute;  выравнивание
background:#ccc; 

(технология CSS).NAME{position:absolute;  выравниваниеbackground:#ccc;  цвет фонаwidth:300px;  ширинаpadding:15px;  красная

цвет фона
width:300px;  ширина
padding:15px;  красная строка
margin:0pt 0pt 0pt 0pt;

 оступ от краев
display:none;  видимость
}



Слайд 26 Point logger
Латинские буквы
Счетчик, крутится сам
Здесь появится код.
Его

Point loggerЛатинские буквыСчетчик, крутится самЗдесь появится код. Его можно скопироватьCTRL+C 

можно скопировать
CTRL+C  CTRL+V
Множитель. Для удобства, общелкиваем большую картинку
Кушает

от 0,1 до +∞

Координаты текущей точки

Общелканная серия

Только числа

Файл загружается здесь

Слайд 27 Как обвести рассеченную область

Как обвести рассеченную область

Слайд 28 Разработанные примеры
Цветовой указатель:
Текст этого цвета лучше не трогать
Это

Разработанные примерыЦветовой указатель:Текст этого цвета лучше не трогатьЭто текстовые подписи, которые

текстовые подписи, которые надо менять
Это надо осмысленно поменять
Этот текст

генерируется с помощью программы
Входные данные для программы, есть в готовом коде
Пока что дописывается к готовому коду руками
Эти куски менять можно, но осмысленно. А можно и не менять
Не трогать, но смотреть
Даже не смотреть и не тыкать ни в коем случае


Слайд 29 Index.html

Список примеров



Это меню

Index.html Список примеров Это меню навигации по созданным примерамКровеносная система млекопитающего

навигации по созданным примерам



Кровеносная система млекопитающего



Карта с областями, ведущими в соседний фрейм


Комментарий по наведению на область


Комментарий по щелчку на область, пропадает при отсутствии курсора на области


Пример с галочками


Слайд 30 Фреймсет
Код 1. фреймсет.
фреймы

ФреймсетКод 1. фреймсет. фреймыКод 2. Карта. Карта

id="f1" src="/НАЗВАНИЕ СТРАНИЦЫ С КАРТОЙ">


Код 2. Карта.

Карта

МЕТКАОБЛАСТИ1
МЕТКАОБЛАСТИ2
primer

Код 3. Типичный файл для ссылки Типичная ссылка

Слайд 31 Высота картинки
Просмотрщик

function changeImg(img, pp) {
document.getElementById("img1").src

Высота картинки Просмотрщикfunction changeImg(img, pp) { document.getElementById(

= img;
document.getElementById("ele").value = pp;}
function changeImga(img) {
document.getElementById("img1").height =

img;
}

желтый

Пример на всплывающую ссылку




Наведи на квадрат.
Красный

Желтый

Слайд 33 По щелчку

Образец наведения

function showHint(id,s)
{ var sdiv=document.getElementById(id);

По щелчку Образец наведенияfunction showHint(id,s){ var sdiv=document.getElementById(id); if(s) { sdiv.style.display='block‘; hintstart.style.display='none’

if(s) { sdiv.style.display='block‘; hintstart.style.display='none’ } else {

sdiv.style.display='none'; hintstart.style.display='block';} }

желтый

Пример на всплывающую ссылку




Наведи на квадрат.
Красный

Желтый

Руками!!

Слайд 34 Пример с галочками
Он еще сырой, но интересный

Пример с галочкамиОн еще сырой, но интересный ….

>

….


Красный найден



Проблема в том, что галочки еще и руками нажимаются >__< Может кто хочет реферат на разработку кода??
  • Имя файла: osnovy-tehnologii-html.pptx
  • Количество просмотров: 127
  • Количество скачиваний: 0
- Предыдущая Генетика людини
Следующая - Департамент образования г. МоскваГБПОУ г. Москвы ТК№34. Воронкова Н.А

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

Формирование ИКТ-компетенции в рамках реализации ФГОС НОО Формирование ИКТ-компетенции в рамках реализации ФГОС НОО 124
Шаблон презентации Шаблон презентации 114
Тренировка гибкости, программы силовых тренировок наиболее нагружаемых звеньев опорно-двигательного аппарата танцовщика Тренировка гибкости, программы силовых тренировок наиболее нагружаемых звеньев опорно-двигательного аппарата танцовщика 115
Социальные сети Социальные сети 111
Презентация опыта работы презентация к уроку Презентация опыта работы презентация к уроку 96
Лучевая диагностика заболеваний суставов Лучевая диагностика заболеваний суставов 108
День чая материал (подготовительная группа) День чая материал (подготовительная группа) 109
Экологическая тропа презентация Экологическая тропа презентация 104
Шаблоны для создания презентаций по теме Книга – источник знаний 29 Шаблоны для создания презентаций по теме Книга – источник знаний 29 36
Презентация Чтобы помнили презентация к уроку (старшая группа) Презентация Чтобы помнили презентация к уроку (старшая группа) 104
Интересные факты Интересные факты 102
Конспект НОД по речевому развитию детей в младшей группе Сказка о матрешках план-конспект занятия (младшая группа) Конспект НОД по речевому развитию детей в младшей группе Сказка о матрешках план-конспект занятия (младшая группа) 102
Геймификация в Lean production Геймификация в Lean production 126
Оборудование для передвижения инвалидов-колясочников по лестницам Оборудование для передвижения инвалидов-колясочников по лестницам 120
Родительское собрание Лето красное, пора прекрасная презентация к уроку (подготовительная группа) по теме Родительское собрание Лето красное, пора прекрасная презентация к уроку (подготовительная группа) по теме 55
Лекція 1.2 Транспортні системи та мережі Лекція 1.2 Транспортні системи та мережі 297
Http-ЗАПРОСЫ Http-ЗАПРОСЫ 115
Посмотри вокруг презентация к уроку (2 класс) Посмотри вокруг презентация к уроку (2 класс) 143
нетрадиционная техника рисования в совместной деятельности детей и родителей. презентация нетрадиционная техника рисования в совместной деятельности детей и родителей. презентация 101
Адаптация детей раннего возраста к условиям ДОУ методическая разработка (младшая группа) Адаптация детей раннего возраста к условиям ДОУ методическая разработка (младшая группа) 103
Ролевая игра Mass Effect Ролевая игра Mass Effect 135
Процедурные правила Процедурные правила 135
ПРЕЗЕНТАЦИЯ: Государство и гражданин в современном интернет -пространстве презентация ПРЕЗЕНТАЦИЯ: Государство и гражданин в современном интернет -пространстве презентация 126
Нетрадиционные формы работы с родителями презентация Нетрадиционные формы работы с родителями презентация 97
Презентация Феномен неуспеваемости в современной школе презентация к уроку по теме Презентация Феномен неуспеваемости в современной школе презентация к уроку по теме 103
Скелет людини Скелет людини 135
Планирование деятельности предприятий Планирование деятельности предприятий 107
НОД по формированию целостной картины мира Русская матрешка материал (старшая группа) по теме НОД по формированию целостной картины мира Русская матрешка материал (старшая группа) по теме 114
Развитие идеологии и практики итальянских профсоюзов в отношении трудовых мигрантов Развитие идеологии и практики итальянских профсоюзов в отношении трудовых мигрантов 117
emotsii chast5 emotsii chast5 97