Что такое 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
  • Количество просмотров: 123
  • Количество скачиваний: 0
- Предыдущая Генетика людини
Следующая - Департамент образования г. МоскваГБПОУ г. Москвы ТК№34. Воронкова Н.А

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

umk nachalnaya shkola 21 veka umk nachalnaya shkola 21 veka 48
СераФорма выделения радиально-лучистые агрегатыКлассы элементыХимическая формула sСингония ромбическаяУдельный вес 2—2,1Цвет Серно-желтый, желто-оранжевый, желто-бурый, серовато-желтый, серовато-бурый.Цвет черты Серно-желтая, соломенно-желтаяБлеск жирныйП СераФорма выделения радиально-лучистые агрегатыКлассы элементыХимическая формула sСингония ромбическаяУдельный вес 2—2,1Цвет Серно-желтый, желто-оранжевый, желто-бурый, серовато-желтый, серовато-бурый.Цвет черты Серно-желтая, соломенно-желтаяБлеск жирныйП 99
Презентация по ИКБ В мире имен Презентация по ИКБ В мире имен 141
Презентация по слушанию музыки Презентация по слушанию музыки 89
Презентация по теме Образование в Англии презентация по теме Презентация по теме Образование в Англии презентация по теме 48
Презентация ОРГАНИЗАЦИЯ ПРЕДМЕТНО – РАЗВИВАЮЩЕЙ СРЕДЫ В ГРУППЕ С УЧЕТОМ ФГОС В ДОУ презентация Презентация ОРГАНИЗАЦИЯ ПРЕДМЕТНО – РАЗВИВАЮЩЕЙ СРЕДЫ В ГРУППЕ С УЧЕТОМ ФГОС В ДОУ презентация 119
Внеклассное мероприятие -викторина Зелёная аптека презентация к уроку Внеклассное мероприятие -викторина Зелёная аптека презентация к уроку 138
Продукция химической и связанных с ней отраслей промышленности Продукция химической и связанных с ней отраслей промышленности 87
Паспорт группы презентация к занятию (подготовительная группа) Паспорт группы презентация к занятию (подготовительная группа) 85
Возрастные особенности развития детей 5 лет презентация Возрастные особенности развития детей 5 лет презентация 95
Оптическое волокно Оптическое волокно 109
Шаблоны для презентаций Праздничные Шаблоны для презентаций Праздничные 79
УЧЕТ РОЗНИЧНОЙ И ОПТОВОЙ РЕАЛИЗАЦИИ ТОВАРА УЧЕТ РОЗНИЧНОЙ И ОПТОВОЙ РЕАЛИЗАЦИИ ТОВАРА 106
Презентация История возникновения оконных конструкций Презентация История возникновения оконных конструкций 118
Устройства резервирования отказа выключателей (УРОВ). Лекция 12 Устройства резервирования отказа выключателей (УРОВ). Лекция 12 112
Бізнес-план Бізнес-план 85
Жорж бізе.життя та творчість Жорж бізе.життя та творчість 111
Презентация к конкурсу творческих работ студентов учреждений СПО Дети блокадного Ленинграда к 75 летию снятия блокады. Презентация к конкурсу творческих работ студентов учреждений СПО Дети блокадного Ленинграда к 75 летию снятия блокады. 106
1. Мальдиваралдары2. Үндімұхиты, Шри-Ланка аралдарыныңоңт.-батысы3. Креольдар, 393 мың.4. 1. Мальдиваралдары2. Үндімұхиты, Шри-Ланка аралдарыныңоңт.-батысы3. Креольдар, 393 мың.4. 96
Конкурентный ромб Конкурентный ромб 113
Государственное бюджетное образовательное учреждение высшего профессионального образованияОмский государственный медицинский университет, Колледж Отделение Фармация       Государственное бюджетное образовательное учреждение высшего профессионального образованияОмский государственный медицинский университет, Колледж Отделение Фармация       75
Endocrine glands disorders Endocrine glands disorders 78
Презентация библиотечный урок на тему Красная книга Презентация библиотечный урок на тему Красная книга 114
Презентация блиц-турнир, город в котором я живу. Улан-Удэ Презентация блиц-турнир, город в котором я живу. Улан-Удэ 100
МБОУ Татарско-Кандызская СОШ Бавлинского муниципального района РТПлазма МБОУ Татарско-Кандызская СОШ Бавлинского муниципального района РТПлазма 116
презентация История театра презентация к уроку (подготовительная группа) презентация История театра презентация к уроку (подготовительная группа) 131
Городецкая роспись Городецкая роспись 95
МегаФон. Услуги CDN в операторском бизнесе МегаФон. Услуги CDN в операторском бизнесе 88
Презентация Термины и определения (охрана труда) Презентация Термины и определения (охрана труда) 120
Проблема соотношения цели и средств исследований на человеке Проблема соотношения цели и средств исследований на человеке 105