ssoa - autenticação · diferenças? elemento para que serve? dividir a página html em secções...
TRANSCRIPT
InterfacesPessoa
Máq
uina
Laboratório1
01
HTML,CSS,JS-Introdução
HTML+CSS+JavaScript
Tecnologiaparadesenvolvimentoweb:PáginaswebAplicaçõeswebAplicaçõesmobile
HTML–Linguagemstandardparaweb
CSS–Look&layout
JS–ScripGngparacomportamentodinâmico
01HyperText
MarkupLanguage
EstruturatradicionaldeumdocumentoHTML
Título
Heading
Parágrafo1
Parágrafo2
<html><head>
<Ntle>
<body>
<h1>
<p>
<p>
…
EstruturadeumHTMLmoderno
Parágrafo2
<html><head>
<Ntle>
<body><divid=header>
<divid=navigaNon>
<divid=footer>
…
…<divid=texto> <divid=img>
Diferenças?
Elemento<div>
Paraqueserve?DividirapáginaHTMLemsecçõesAgruparelementosHTMLAlteraroesNlodevárioselementossimultaneamente
CriaçãodeumdocumentoHTMLVamoscriarumficheirodetextocom:
<!DOCTYPEhtml><html><head><Ntle>Titulo</Ntle></head><body><divid="header">Headerdosite</div><divid="texto">Texto</div></body></html>
CriaçãodeumdocumentoHTML<!DOCTYPEhtml><html><head><Ntle>Titulo</Ntle></head><body><divid="header">Headerdosite</div><divid="texto">Texto</div></body></html>
DocumentoHTML
Informaçãosobreodocumento
Conteúdovisíveldapágina
Resultado:um“HelloWorld”emHTML
Inserirumaimagem
Colocaroseguintecódigo<imgsrc=”error.png”>
Demasiadogrande?
Alterarpara:<imgsrc=”error.png”width="500px">
Criarumatabela
Vamosapagartudododiv“texto”eescrever:<table><tr><td>Um</td><td>Dois</td><td>Tres</td></tr><tr><td>Quatro</td><td>Cinco</td><td>Seis</td></tr></table>
Tabelas
Resultado:
Exercício
Criaroseguinte(comasimagensfornecidasparaaaula):
Parareferência
hXp://www.w3schools.com/html/
hXps://dev.w3.org/html5/html-author/
hXps://www.w3.org/TR/html-markup/
02CSS:
CascadingStyleSheets
Paraqueserve?
AlterarpropriedadesvisuaisdeelementosHTML:BodyHeadingsParágrafosDivs…
Nãotemgrandeaspeto!
UNlizaçãodeCSS:ANTES!
Adicionarlinha:<!DOCTYPEhtml><html><head><Ntle>Titulo</Ntle><linkrel="stylesheet"href="style.css"></head><body>…</body></html>
paraoHTMLsaberquetemdeirbuscaraspropriedadesvisuaisdeclaradasnoCSS
CriaçãodeficheiroCSS
Criarficheirodetextocom:body{font-family:Times;
}#header{color:green;font-size:30px;}#texto{font-size:20px;
}
Asdeclaraçõesparao“body”afetamtodoocorpodoHTML.
Atravésde#+idseleciona-seo<div>quesepretende.Aquiestamosaalterarpropriedades(coretamanhodotexto)aodivquedenominámos“header”.
Alteraçãodotamanhodotextoparaoselementosdodiv<texto>
Diferenças?
MiniExercício:ReNrarserifasemtodootexto
Referência:verhtp://www.w3schools.com/css/css_font.asp
Comoalterarotextotododeumavez?OobjeNvonãoémudarparâmetroaparâmetro!
ComosubsGtuirportextosemserifas?
“Boxmodel”doCSSTodososelementosHTMLsãoencapsuladosnumacaixa(“box”).Content:Oconteúdo,ondeaparecemasimagensetextoPadding:Criaumaáreavaziatransparenteàvoltadoconteúdo.
Border:Umafronteiraentreopaddingeocontent.Margin:Criaumaáreavaziatransparenteàvoltadoborder.
Content
MarginBorder
Padding
Mini-exercício:tentarreproduzir…
…estadisposiçãodeelementos:
UGlizarpadding-top:20px;Margin-top:100px;…
Parareferência
hXp://www.w3schools.com/css/
hXp://www.htmlhelp.com/reference/css/
hXps://jigsaw.w3.org/css-validator/
03JAVASCRIPT
“HelloWorld”
Adicionarlinhasao<body>:<body><script>console.log(”HelloWorld!");</script><h1>Primeiroheading</h1><p>Primeiroparagrafo.</p>…</body>
Vamosescreverestamensagemparaaconsola.
“HelloWorld”
Aquiestá!
Interação:alterarimagemcomclique
Alteraralinha:<td><imgsrc="rgb.jpg"width="100"></td>
para
<td><imgid="rgb"onclick="changeImage()"src="rgb.jpg"width="100"></td>
Estamosaatribuirumidàimagem
Aoserclicada,aimagemmuda
Interação:alterarimagemcomclique
Adicionar(aindanobody)aslinhas:<script>funcNonchangeImage(){varimage=document.getElementById('rgb');image.src="error.png";}</script>
Selecionaaimagempeloid
Aoserclicada,aimagemmuda
Resultado
Antesdeserclicada Depoisdeserclicada
Interação:alteraçãodinâmicadepropriedadesCSS
Adicionaronomedafunção:<td><imgid="rgb"onclick="changeTextColor()"src="rgb.jpg"width="100"></td>
<script>funcNonchangeTextColor(){document.getElementById("texto").style.color="blue";}
</script> Alteraçãodacordetodootextonodiv“texto”
Resultado
Antesdeaimagemserclicada Depoisdeaimagemserclicada
Mini-exercício
Mouseover>mostraonegaGvodecadaimagem
Mouseout>voltaamostraraimagemnormal
Parareferência
hXp://www.w3schools.com/js/
hXps://developer.mozilla.org/en-US/Learn/Gegng_started_with_the_web/JavaScript_basics
04EXERCÍCIO
SitedoGrupo
Referência:verhtp://www.w3schools.com/html/html_links.asp
Combasenotemplate:Vaiserorepositóriodemateriaisaolongodosemestre.
Divs(HTML),styling(CSS),interaGvidadeaoclicarnosotulos(JS)
05PRÓXIMAAULA
QuesNonários
FazerquesGonárioparaAnáliseUGlizadoreseTarefasTãopróximoquantopossíveldofinal
PreparaçãoLerCap.10dolivroReveras11perguntas(livro)EnviarquesNonárioporemail