Instruçoes HTML5

O documento descreve as principais tags e elementos do HTML5, CSS3 e JavaScript para estruturar e estilizar páginas web, como <!DOCTYPE html> para indicar o uso do HTML5, <head> para código não visível e <body> para conteúdo visível. Também explica como formatar textos, inserir imagens, hiperlinks, menus, formulários e mídia usando tags como <p>, <img>, <a>, <nav> e <audio>. Por fim, lista algumas tags depreciadas no HTML5.

Enviado por

windsonsm

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

257 visualizações8 páginas

Instruçoes HTML5

Enviado por

windsonsm

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 8

HTML5 + CSS3 + JAVA SCRIPT

O <!DOCTYPE html> Indica para o Navegador que voc esta utilizando HTML5. O parmetro <html lang="pt-br">Indica que um site escrito em portugus. O <head> ou Cabea onde basicamente toda parte comportamental do site deve estar, tudo que no ir aparecer na pgina visualmente, somente o cdigo de administrao do que estiver na rea body Ex: Formatao da pgina utilizando CSS3 O body ou Corpo onde basicamente toda parte visual do site deve estar . A TAG meta no precisa ser fechado como as demais TAGS, neste caso aconselhvel a utilizao do novo padro para HTML5, somente utilizando um >/ ao final da TAG.
O charset= define a codificao da pgina (Define o padro de caracteres que ser mostrado) A TAG <h1> , <h2> <h3> <h4> <h5> <h6> representa uma hierarquia de ttulos. O <hgroup> define um grupo de ttulos. O <div> define uma diviso para a pgina Ex: <div id=Nome_da_Divisao > < /div> O <header> define um cabealho para a pgina Ex: header id=NOME_DO_CABECALHO </header> <b> Tudo que estiver aqui dentro ficara em negrito<b/> <i> Tudo que estiver aqui dentro ficara em Itlico</i> <wbr> Quebra a palavra quando a mesma esta na borda da pgina, muito utilizado em endereos muito extensos como sites por exemplo. O  utilizado para hifenizao da palavra O <p> criar um pargrafo para a pgina <br/> utilizado para cada quebra de linha   utilizado para cada espao <em> utilizado para enfatizar a palavra (tem o mesmo resultado do <i>) <del> utilizado para riscar a palavra( TAG substituta da TAG <s> no HTML4) <span> Pode ser utilizado para formatar pequenos trechos de textos Ex Negrito: <span style="font-weight: 900;">Google Glass</span> Ex2 Sublinhado: <span style="text-decoration:underline;">Google Glass</span> Ex3 Linha superior: <span style="text-decoration:overline;">Google Glass</span> Ex4 Riscado: <span style="text-decoration:line-through;">Google Glass</span> Ex5 Texto sem formatao (incialmente): <span style="text-decoration:none;">Google Glass</span> Definindo estilo de texto CSS3: Padro antigo: <link rel="stylesheet" type="text/css" href="_css/estilo.css"> Novo padrao omitindo o type="text/css" : <link rel="stylesheet" href="_css/estilo.css"> Centralizando o Texto: <h2 style=text-align: center>O que </h2> Alinhando a esquerda <h2 style=text-align: left;>O que </h2> Alinhando a direita <h2 style=text-align: right;>O que </h2> Justificando : <p style=text-align: justify;>O que </p> <sup> Gera um resultado de sobre escrito <sub> Gera um resultado de sub escrito <code> A TAG <code> semntica, quando utilizada mostra ao navegador que quero mostrar um cdigo de linguagem de programao.

<pre> A TAG <pr> utilizada para uma pr formatao, geralmente utilizada por exemplo quanto quero mostra um cdigo de linguagem de programao formatado.

Ex: <pre> <code> public class OlaMundo { public Static void main(String[] args()) { System.out.println('Teste'); } } </code> </pre> Inserindo imagem no fundo da pgina: background-image: url("fundo.jpg"); Inserindo imagem : <img src="_imagens/glass-oculos-preto-peq.png"/> Para formatao utilizando cdigos RGB seguido as cores #000000, RGBA, hsl, hsla. EX: color: rgb(35,37,195); color: rgba(0,0,0,0.5); color: hsl (100,162,0); color: hsla (100,162,0,0.2); Inserindo um Menu de navegao: <nav> Comercial Contabilidade Ti </nav> Tudo que estiver entre a TAG <nav> e </nav> ser um Menu de navegao. Criando uma Lista ordenada dentro de um Menu de navegao: <nav> <h1>Menu Principal</h1> <ol type=a> <li>Home</li> <li>Especificaes</li> <li>Multimdia</li> <li>Fale conosco</li> </ol> </nav>

possvel utilizar outros parmetros no campo type para ordenao dos itens da lista: Type=1 o valor padro, ira ordenar numericamente.

Type=a ira ordenar por ordem alfabtica minuscula Type=A ira ordenar por ordem alfabtica maiucula. Type=i ira ordenar por nmeros romanos Tupe=I ira ordenar por nmeros romanos maisculos Tambm possvel utilizar o parmetro start junto ao type para manipular os itens da lista como: <nav> <h1>Menu Principal</h1> <ol type=1 start=3> <li>Home</li> <li>Especificaes</li> <li>Multimdia</li> <li>Fale conosco</li> </ol> </nav> Lista No ordenada ou lista com demarcadores: <nav> <h1>Menu Principal</h1> <ul <li>Home</li> <li>Especificaes</li> <li>Multimdia</li> <li>Fale conosco</li> </ul> </nav> <nav> <h1>Menu Principal</h1> <ul type="square"> <li>Home</li> <li>Especificaes</li> <li>Multimdia</li> <li>Fale conosco</li> </ul> </nav> <nav> <h1>Menu Principal</h1> <ul type="circle"> <li>Home</li> <li>Especificaes</li> <li>Multimdia</li> <li>Fale conosco</li> </ul> </nav>

<nav> <h1>Menu Principal</h1>

<ul type="disc"> <li>Home</li> <li>Especificaes</li> <li>Multimdia</li> <li>Fale conosco</li> </ul> </nav> Formatao CSS3 para o Menu de Navegao: /* O nav representa o tipo da TAG, o # representa a ID, o menu representa o nome da ID */ nav#menu ul { list-style: none; } Informaes teis: Caso o teste em outros navegadores no funcione corretamente possvel utilizar o http://prefixr.com/index.php para gerar um novo cdigo com base no cdigo original para que funcione no mximo de navegadores possveis. O margin no CSS3 para alinhamento superior, direita, baixo, esquerda em uma rea externa ao objeto conforme abaixo: margin: 10px 10px 10px 10px; Para alinhamento interno do objeto usa-se no CSS3 o padding seguindo , superior, direita, baixo, esquerda : padding: 10px 10px 10px 10px; Para inserir uma borda inferior usa-se, largura, cor, tipo: border-bottom: 1px #606060 solid; Definindo sombras CSS3 com base na lateral , vertical, espalhamento , cor: box-shadow: 0px 0px 10px black; Site de fonts google: http://www.google.com/fonts possvel utilizar o Google/fonts para adicionar fontes ao projeto tanto via HTML ou CSS, segue exemplo CSS: Ex1: font-family: 'FonteLogo' , sans-serif; header#cabecalho h1 { font-family: 'FonteLogo' , sans-serif; font-size: 30pt; color: #606060; text-shadow: 1px 1px 1px rgba(0,0,0,.6); padding: 0px; margin-bottom: 0px; }

Ex2: @import url(http://fonts.googleapis.com/css?family=Titillium+Web);

header#cabecalho h2 { font-family: 'Titillium Web', sans-serif; color: #888888; font-size: 15pt; padding: 0px; margin-top: 0px; } display: block (Para mostrar como um bloco)

TAGS HTML5 para divisao de areas no site: Selection (Sesso principal) Aside (Conteudo lateral) Footer (Rodap) Criao de Tabelas HTML: <table> </table> Ex: <tr><td>Tela</td><td>Resoluo equivalente a tela de 25"</td></tr> <tr><td rowspan="2">Camera</td><td> 5MP para fotos </td></tr> <tr><td>720p para vdeos</td></tr> <tr><td>Conectividade</td><td> Wi-Fi/ Bluetooth</td></tr> <tr><td>Memria Interna</td><td> 12GB</td></tr> </table>

Como adicionar um link a um texto HTML5: <a href="http://glass.google.com" target="_blank">Project Glass</a> Obs. O parmetro target=_blank serve para abrir o link em uma nova pgina

Definindo reas mapeadas em imagem: <img src="_imagens/glass-esquema-marcado.jpg" usemap="meumapa"> <map name="meumapa"> <area shape="rect" coords="182,217,268,252" href="google-glass.html#tela" target="janela"/> <area shape="circle" coords="158,243,12" href="google-glass.html#camera" target="janela"/> <area shape="poly" coords="29,147,82,215,83,251,27,169" href="google-glass.html#sensores" target="janela"/> <area shape="rect" coords="67,46,85,57" href="google-glass.html#gadgets" target="janela"/> </map>

Inserindo Audio e Videos: Existem 3 tipos disponveis suportados pelos navegadores, o aconselhavem que se seja inserido os trs formatos na tag Para udio : mp3, aac(m4a), ogg Para vdeo: mp4, webm, ogv Ex:
<audio id="musica" controls="controls"> <source src="_media/2009-lovers-carvings-bibio.mp3" type="audio/mpeg"/> Desculpe mais nao foi possivel carragar o audio, atualize seu navegador. </audio> <video id="filme" controls="controls" poster="_imagens/grandes-coisas.jpg"> <source src="_media/Grandes Coisas.mp4" type="video/mp4"/> Desculpe mais nao foi possivel carragar o video, atualize seu navegador. </video>

Criando Formulrios: <fieldset> Significa conjunto de campos. <legend> Descricao do campo <input type=text name=tNome id=cNome size=20 maxlength=30> Cria um campo do tipo texto com um objeto de nome tNome,com identificao cNome,, com tamanho 20 e com o limite Maximo de 30 caracteres. <placeholder> Usado para informar ao usurio o que ele deve inserir. <label for=id do objeto> Usado para vincular a descrio do campo com o input do mesmo <fieldset id="usuario"> <legend>Identificao do Usurio</legend> <p><label for="cNome">Nome:</label><input type="text" name="tNome" id="cNome" size="20" maxlength="30" placeholder="Nome Completo"/></p> <p><label for="cSenha">Senha:</label><input type="password" name="tSenha" id="cSenha" size="8" maxlength="8" placeholder="8 digitos"/></p> <p><label for="cMail">E-mail:</label><input type="email" name="tMail" id="cMail" size="40" maxlength="40"/></p> <fieldset id="sexo"> <legend>Sexo</legend> <input type="radio" name="tSexo" id="cMasc" checked/> <label for="cMasc">Masculino</label><br/> <input type="radio" name="tSexo" id="cFem"/> <label for="cFem">Feminino</label> </fieldset> <p><label for="cNasc">Data de Nascimento:</label><input type="date" name="tNasc" id="cNasc"></p> </fieldset>

TAG para inserir smbolos especiais :

Δ δ Λ ω φ <br/> ← &Rarr; → ↑ ↓ ↔ &spades; &clubs; &hearts; &diams; </p>

<br/>

TAGS que eram muito utilizadas no HTML4 que foram depreciadas e no so mais utilizadas no HTML5 <u> Era utilizada para sublinhar a palavra. <s> Era utilizada para riscar a palavra, a nova TAG utilizada para esta finalidade <del>

<align> Era utilizada pra alinhamento do Texto (Foi tambm depreciada no HTML5, a maneira correta colocando style em CSS3) Ex: <h2 style=text-align: center>O que </ht2> <body bgcolor="red"> Era utilizada para definir a cor de fundo da pgina mais tambm foi descontinuada Para HTML5 a utilizao correta ser <body style="background-color: red;">

JAVASCRIPT <script> alert(Ola, Mundo!); </script> Objetos JavaScript: Objetos internos (string, date, number) Objetos do browser ( window, document) Objetos personalizados(So os definidos pelo programador)