apresentação + html (tags)

50
DESENVOLVIMENTO DE APLICAÇÕES PARA WEB PROF. ANDRÉ COSTA APRESENTAÇAO E INTRODUÇÃO [email protected]

Upload: andreluizlc

Post on 14-Apr-2017

225 views

Category:

Education


2 download

TRANSCRIPT

Page 1: Apresentação + html (tags)

DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

APRESENTAÇAO E INTRODUÇÃO

[email protected]

Page 2: Apresentação + html (tags)

ANDRÉ COSTA

•  Mestre em Modelagem Computacional e Tecnologia Industrial

•  MBA em Gestão da Informação e Projetos de Business Intelligence

•  Bacharel em Sistemas da Informação •  Cursos de Gestão de Projetos •  Coordenador da Equipe de Desenvolvimento do ITED/

SENAI-BA •  Professor Universitário (Todos os cursos de TI)

www.andrecosta.info

Page 3: Apresentação + html (tags)

A TURMA

E vocês? Qual o perfil da turma?

Page 4: Apresentação + html (tags)

HORÁRIO

Com ou sem intervalo?

Page 5: Apresentação + html (tags)

PLANO DE ENSINO

Apresentação do Plano de Ensino

Page 6: Apresentação + html (tags)

PLANO DE ENSINO

Apresentação do Cronograma

Disponível no Gamifica*

Page 7: Apresentação + html (tags)

NOVA METODOLOGIA

Utilização de uma nova “plataforma”:

GAMIFICA

http://andrecosta.info/gamifica

Page 8: Apresentação + html (tags)

GAMIFICA

•  Aulas disponíveis no ambiente – Slides – Material de Apoio – Desafios valendo ponto na plataforma

•  Quem atingir a pontuação mínima ganha ponto na disciplina

Page 9: Apresentação + html (tags)

NOTAS

•  NOTA 1: – Avaliação HTML (em papel) – 8,0 – Gamifica – 2,0

•  Quem atingir a meta de 60 pontos até o dia da avaliação HTML ganhará 2 pontos na média

•  Quem ficar entre 40 e 59 pontos até o dia da avaliação HTML ganhará 1 ponto na média

•  Quem ficar com menos de 40 pontos não ganhará ponto

Page 10: Apresentação + html (tags)

NOTAS

•  NOTA 2: – Avaliação PHP (computador) – 5,0 – Trabalho (Desenvolver um Sistema) – 3,0 – Gamifica – 2,0

•  Quem atingir uma nova meta de 70 pontos até o dia da avaliação PHP ganhará 2 ponto na média

•  Quem ficar entre 45 e 69 pontos até o dia da avaliação PHP ganhará 1 ponto na média

•  Os 2 primeiros colocados (somando as duas metas) ganharão 1 ponto extra

Page 11: Apresentação + html (tags)

Desenvolvimento Web

Page 12: Apresentação + html (tags)

DESENVOLVIMENTO WEB

Page 13: Apresentação + html (tags)

SERVIDOR WEB

Instalação do XAMPP PHP + MySQL

Page 14: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 15: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 16: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 17: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 18: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 19: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 20: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 21: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 22: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 23: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 24: Apresentação + html (tags)

INSTALAÇÃO DO XAMPP

Page 25: Apresentação + html (tags)

ATIVIDADE

•  Fazer o curso de HTML da W3Schools – www.w3schools.com/html

•  Fazer o seu currículo em HTML – Utilizar título, lista, imagem, link e tentar

utilizar tabela

Page 26: Apresentação + html (tags)

DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

HTML – Introdução, Estrutura e Tags

[email protected]

Page 27: Apresentação + html (tags)

HTML-História

Page 28: Apresentação + html (tags)

HTML-História

•  HTML - HyperText Markup Language –  Não é uma linguagem de programação –  É uma linguagem de marcação

•  Criado pelo Físico Tim Berners-Lee em 1980

•  Tornou-se pública em 1991

•  Lançado o HTML 2.0 em 1994

Page 29: Apresentação + html (tags)

HTML-História

•  LançadooHTML3.2em1996emman.dopelaW3C(WorldWideWebConsor.um)

•  LançadooHTML4.0em1997elançadoumaerrataem1999comoHTML4.01

•  Lançadoem2008oHTML5

Page 30: Apresentação + html (tags)

HTML-História

Tim Berners-Lee

Page 31: Apresentação + html (tags)

HTML-História

HTMLCrossBrowser

Page 32: Apresentação + html (tags)

HTML-História

ExemplodeIncompa.bilidade

Page 33: Apresentação + html (tags)

HTML-História

Page 34: Apresentação + html (tags)

HTML-Estrutura

Page 35: Apresentação + html (tags)

HTML-Estrutura

<tagatributo=“valor”>conteúdo</tag>ou

<tagatributo=“valor”/>CERTO:<tag_1><tag_2>texto</tag_2></tag_1>ERRADO<tag_1><tag_2>texto</tag_1></tag_2>

Page 36: Apresentação + html (tags)

HTML-Estrutura

Page 37: Apresentação + html (tags)

HTML-Estrutura

Page 38: Apresentação + html (tags)

HTML-Tags

Page 39: Apresentação + html (tags)

HTML-Tags

•  <h1>Título1</h1>•  <h2>Título2</h2>…•  <h6>Título6</h6>

Page 40: Apresentação + html (tags)

HTML-Tags

•  <p>Parágrafo1</p>•  <p>Parágrafo2</p>

Page 41: Apresentação + html (tags)

HTML-Tags

•  <p>Parágrafocom<b>Negrito</b>,<i>Itálico</i>e<u>sublinhado</u>.</p>

Page 42: Apresentação + html (tags)

HTML-Tags

•  <p>Parágrafocom<br/><b>Negrito</b>,<br/><i>Itálico</i>e<br/><u>sublinhado</u>.</p>

Page 43: Apresentação + html (tags)

HTML-Tags

•  textotexto<hr/>textotexto

Page 44: Apresentação + html (tags)

HTML-Tags

•  <center>textocentralizado</center>

Page 45: Apresentação + html (tags)

HTML-Tags

•  <fieldset><legend>Legenda</legend>texto

</fieldset>

Page 46: Apresentação + html (tags)

HTML-Tags

•  <ul><li>Item1</li><li>Item2</li>

</ul>

Page 47: Apresentação + html (tags)

HTML-Tags

•  <ol><li>Item1</li><li>Item2</li>

</ol>

Page 48: Apresentação + html (tags)

HTML-Tags

•  <imgsrc=“figura_teste.gif”/>

Page 49: Apresentação + html (tags)

HTML-Tags

•  <ahref=“pagina.html”>LinkparaPágina</a>

Page 50: Apresentação + html (tags)

HTML-Tags

Mãonamassa!DesenvolvaemHTMLummodelodecurrículo,contendo:Foto,Dadospessoais,Obje.vo,EscolaridadeeExperiência.