Dweb Bsi HTML

Desenvolvimento WEB
(Primeiraparte:HTML)
Prof.MarceloCPSantos
marcelocpsantos@gmail.com
Ementa resumida
HTML/XHTML
CSS
JavaScript
Aulastericascomaturmatoda
Aulasprticascommetadedaturma
Bibliografia
SOUZA,RICARDO,GRAIGOGANNELL,OGuia
EssencialDeWebDesignComCssEHtml,
CIENCIAMODERNA,2009(12exemplaresna
biblioteca)
Silva,MaurcioSamy,JavaScriptGuiado
Programador,NOVATEC,2010
POWERS,SHELLEY,AprendendoJavascript,
NOVATEC,2010.
MORRISON,MICHAEL,UseACabea!Javascript,
STARLINALTACONSULT,2008
Bibliografia
FREEMAN,ERIC,ELISABETHFREEMAN,UseA
Cabea!HtmlComCssEXhtml,STARLINALTA
CONSULT,2008(2exemplaresnabiblioteca)
KRUG,STEVE,NaoMeFaaPensar,STARLINALTA
CONSULT,2008
<http://www.w3schools.com/>,acessadoem04/07/2013.
SILVA,MAURICIOSAMY,ConstruindoSitesComCss
E(x)html,NOVATEC,2007.(2exemplaresna
biblioteca)
w3schools.com
Avaliao
Notafinalseramdiade4avaliaes
2testesprticos(100pontoscada)
comconsulta
individual
tempolimitado
1trabalho(100pontos)
publicaodeumsitecomtemaadefinir
Trabalhosemlaboratrio(100pontosnototal)
Individual
Cadaaulasersolicitadoumtrabalho
Evoluo da WEB
Informaesestticas
Recursosmultimdia
Possibilidadedeinterao
AplicaesnaWEB(cloud)
Websemntica
Padres
Padressofundamentaisnainformtica
Teclado,conectores,TUDO.
NaWEBpadressoaindamaisimportantes
TCP/IP
HTTP
HTML/XHTML
DOM/InterpretadorJavaScript
GrandeproblemaparaodesenvolvedorWEB
W3CWWWConsortium
HTML / CSS
HTML/XHTML
Contedoeestrutura
CSS
CascadingStyleSheets
Formaeestilo
Vantagensdaseparao
Melhororganizao
Facilidadedemanuteno
HTMLCaractersticas Gerais
TEXTO
Etiqueta(tag):
<tag></tag>
<tag/>
<tagname=tagExemplo>
Minscula/Maiscula(casing)
Quebrasdelinha
ExtensoHTML
HTML Estrutura Bsica

<html>
<head>
</head>
<body>
</body>
</html>
Exerccio 1 Descubra como

funciona!!
CrieumdocumentoHTMLcomumttulodenvelum(marcado
com<h1>)HyperTextMarkupLanguageedoisttulosde
nvel2TtuloseListas(marcadoscom<h2>)contendo
explicacessobreautilidadedosmarcadores<h1>,<h2>,...,
<h6>(ttulos)e<ol><ul><li>(listas)
Paralistas,saibaquealistatodadevesermarcadacom<ol>ou
<ul>ecadaitemdalistacom<li>.Noseutextoexpliquea
diferenaentreosmarcadores<ol>e<ul>.Consegueadivinharo
quesignificamasletras?
Nosegundottulo,crieumalistacmtodososmarccadoreshtml
quevocjconhece.Qualseriaomarcadormaisapropriado:
<ol>ou<ul>?
Corpo <body>
Comentrios:<!qualquercoisa>
Pargrafo:<p>
Destaque:<h1>,<h2>,...,<h6>
Contato:<address>
Citaes:<blockquote>,<q>,<cite>
Listas:<ol>,<ul>,<li>
ListasdeDefinies:<dl>,<dt>,<dd>
Links:<a>
URL: Uniform Resource

Locator
<ahref=...URL...>
URLcompleta:
http://www.jf.ifsudestemg.edu.br/inst/noticias.html#ultimas
http://protocolo
www.jf.ifsudestemg.edu.brservidor
Instpastadoservidor
noticias.htmlarquivodesejado
#ultimaspontodoarquivoaserexibido
HTML / XHTML
(Hyper Text Markup Language)

HTML(HowToMeetLadies)
XML(eXtensibleMarkupLanguage)
HTML+XML=XHTML
HTML5.0ouXHTML?
XHTML
Sminsculas
Aninhamentorigoroso
Estruturabemformada
FecharTODASastags
Elementosvaziosdevemserfechados
Sintaxerigorosaparaatributos
DOCTYPE
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0
Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd
"/>
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"/>
HTML5:<!DOCTYPEHTML>
Exerccio 2
Site Educacional
Crieumsitecomquestesdemltiplaescolha(4
opes.
Asopesserolinks.Opocorretaleva
prximaquesto.Opoincorretalevaauma
pginaexplicandoarazodenoserestaaopo
correta.
Use:2nveisdedestaque,einformeseunomee
mailparacontatonaprimeiraenatimapgina
dosite.
Cabealho <head>
<title>SiteLegal</title>
<metaname="description"content="SuperPagina"/>
<metaname="keywords"
content="HTML,CSS,XML,JavaScript"/>
<metaname="author"content="HegeRefsnes"/>
<metahttpequiv="ContentType"
content="text/html;charset=ISO88591"/>
HTML5:<metacharset=utf8>
<script>
<style>
Marcadores para estrutura
<section>
Seo genrica
<nav>
Blocos de navegao (menus)
<article>
Bloco que possui sentido sozinho. (um post, um artigo de feed,...)
<aside>
Barra lateral
<hgroup>
Grupo de ttulos
<header>
Cabealho contendo introduo ou um ttulo para a pgina
<footer>
Rodap. Normalmente o endereo, cnpj, direitos autorais, etc
<time>
Horrio ou data.
Mais Marcadores
Marcasdereviso:<ins>,<del>
Enfase:<em>,<strong>
Separador:<hr>
Blocosespeciais:<pre>,<sup>,<sub>
Programas:<code>,<var>,<sample>,<kbd>
AbreviaturaseAcrnimos<abbr>,<acronym>
Imagens e Mapas Clicveis
Imageminline:
<imgsrc=...alt=...width=...height=...>
Mapas:
<mapname="Map">
<areashape="rect"coords="118,192,203,249"href="http://meusite.com"alt="Home"/>
<areashape="circle"coords="52,76,39"
href="http://meusite.com/about.html"alt="About"/>
<areashape="poly"coords="159,145,115,96,115,39,160,21,205,40,206,103"
href="http://meusite.com/contact"alt="Contact"/>
</map>
<imgsrc="imagemap.jpg"alt=""width="300"height="272"
usemap="#Map"ismap="ismap"/>
Multimidia
HTML4:
plugins
HTML5
<audio>
<video>
<source>
Objetos
(tratados por plugins)
<objectdata="myVideo.mpg"type="application/mpeg">
<objectdata="myPicture.gif"type="image/gif">
Senoconseguirvisualizar,
clique<ahref="link.htm">aqui</a>.
</object>
</object>
<!DOCTYPE html>
<html>
<body>
<video src="video.ogv" type="video/ogg"
controls="controls" />
<br /> mais completo <br />
<video width="320" height="240" controls="controls">
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
Seu navegador no pode exibir o vdeo. Download aqui.
</video>
</body>
</html>
Elementos definidos em
XML
<math>:frmulasmatemticasemMathML
(MathematicalMarckupLanguage)
<svg>:ScalableVectorGraphics
Exemplo math
<math>
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form=prefix>−</mo><mi>b</mi>
<mo>&PlusMinus;</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</mo><mn>4</mn>
<mo>⁢</mo><mi>a</mi>
<mo>⁢</mo><mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢</mo><mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
Exemplo svg
<svg width="400" height="400">

<rect x="20" y="20" width="150" height="50" stroke="#000000"
stroke-width="5" fill="#FF0000" />

<polygon fill="red" stroke="blue" stroke-width="10"
points="250,75 279,161 369,161 297,215 323,301 250,250
177,301 203,215 131,161 221,161" />

<circle cx="70" cy="240" r="60" stroke="#00FF00"
stroke-width="5" fill="#FFFFFF" />
</svg>
Desenho em bitmap
<canvas>
ViaJavaScript
Desenho em bitmap
<canvas id="x" width="300" height="300"></canvas>
<script>
function desenhar(){
// Obtemos o contexto
context=document.getElementById("x").getContext("2d")
//Iniciamos um novo desenho e movendo a caneta
context.beginPath()
context.moveTo(150,50)
//Desenhamos as linhas
context.lineTo(220,250); context.lineTo(50,125); context.lineTo(250,125);
context.lineTo(80,250); context.lineTo(150,50)
//O desenho no de verdade enquanto voc no mandar o contexto pint-lo.
context.fillStyle="#ff0" // preenchimento amarelo
context.fill()
context.strokeStyle="#f00" // linhas vermelhas
context.stroke()
}
</script>
<button onClick="desenhar()">desenhar</button>
Mostrar e Esconder Detalhes

(pouco implementado)
<details>
<summary>
Copiando: <progress value="50" max="100" /> 50%
</summary>
<dl>
<dt>Tamanho total:</dt>
<dd>100KB</dd>
<dt>Transferido:</dt>
<dd>50</dd>
<dt>Taxa:</dt>
<dd>127KB/s</dd>
<dt>Nome do arquivo:</dt>
<dd>HTML5.mp4</dd>
</dl>
</details>
Menus
(pouco implementado)
<menu>
<command>
</command>
..
..
</menu>
Tabelas
<table>,<caption>
<th>,<tr>,<td>
<thead>,<tfoot>,<tbody>
Exerccio 2
Mapa clicvel
Crieummapadebitsparaa
imagem
Seclicadoocaminhodadireita,
exibaumatabelacom3cidadese
asdistnciasparaatingilasse
clicadoocaminhodaesquerda,
outras3cidadesdiferentes.
Utilizeomodeloaseguirparaas
tabelas(sempreocupaocom
formatao).
Destinos
Cidade
Distncia
Ub
50 km
Tabuleiro
20 km
Rio Novo
30 km
Formulrios
<form....>
action=prog.php
method=GET/method=POST
Arquivos(enctype=multipart/formdata)
Formulrios
<inputvalue=...type=...>
text
password
hidden
radio
checkbox
submit/image
reset
file
Formulrios - labels
value
size
maxlength
label
<labelfor=nomeCli>
NomedoCliente:
</label>
<inputtype=textid=nomeCliname=nomeCli>
Formulrios
<textarea>textodefault</textarea>
rows
cols
wrap
Formulrios
<select>
<optionvalue=...>
Opo1</option>
<optionvalue=...selected> Opo2</option>
...
</select>
multiple
size
Novos marcadores HTML 5

para formulrios (1/2)
<form action="teste.php" method="POST">
<label> tel (+99(99)9999-9999):
<input name="telx" type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" />
</label><br />

<label> search:
<input name="searchx" type="search" placeholder="pesquise aqui" />
</label><br />
<label> email:
<input name="emailx" type="email" autofocus/>
</label><br />
<label> url:
<input name="urlx" type="url" required="required" />
</label><br />
Novos marcadores HTML 5

para formulrios (2/2)
<label> date:
<input name="datex" type="date" />
</label><br />
<label> number:
<input name="numberx" type="number" value="12.4" step="0.2" min="0" max="20" />
</label><br />
<label> range:
<input name="valuex" type="range" value="12.4" step="0.2" min="0" max="20" />
</label><br />
<label> color:
<input name="colorx" type="color" />
</label><br />
<input type="submit" value="Salvar Rascunho" formnovalidate="formnovalidate"/>
<input type="submit" value="Gravar"/>
</form>
Exerccio 3
Formulrios
Crieumformulrioparacadastramentode
clientesdeumsitedecomrcioeletrnico
utilizandopelomenosumavezcadaumdos
marcadoresparaformulrio.
Ajustecorretamenteotamanhodosinputs.
Paraumdoscamposdeseuformulrio,crieum
linkparaumapginadeajudasobreo
preenchimentodocampo.Porexemplo:
nome:ajuda
Frames
<framesetrows=10%,80%,10%>
<framesrc=titulo.html/>
<framesrc=miolo.html/>
<framesrc=rodape.html/>
</frameset>
<frameset...>
cols/rows:nrpixels,relativo(*),percentual(%)
<frame...>name,noresize,scrolling
iFrames
<iframesetsrc=conteudo.html>
Contedoaserexibidoseiframesnoforem
suportados
</iframeset>
Aceitatarget
Marcadores genricos
<div...>
<span>
Block
inline
Exerccio 4
Frames
Crieumconjuntodepginasutilizandoframes
queexibaumatabelacomseuhorriodeaulase
umformulrioparaqueousurioinformenomee
sexo,comoaseguir.
Exerccio4
Frames

Dweb Bsi HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dweb Bsi HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento WEB

HTML Estrutura Bsica

Exerccio 1 Descubra como

URL: Uniform Resource

(Hyper Text Markup Language)

Marcadores para estrutura

Blocos de navegao (menus)

Bloco que possui sentido sozinho. (um post, um artigo de feed,...)

Cabealho contendo introduo ou um ttulo para a pgina

Rodap. Normalmente o endereo, cnpj, direitos autorais, etc

Imagens e Mapas Clicveis

Mostrar e Esconder Detalhes

Novos marcadores HTML 5

Novos marcadores HTML 5

Você também pode gostar