Vous êtes sur la page 1sur 22

ESTRUTURA PADRÃO DE UM DOCUMENTO HTML:

<!DOCTYPE html> -> INFORMA AO NAVEGADOR QUE SE TRATA DE UM


DOCUMENTO HTML

<html lang = "pt-br"> -> LANG É PARA DEFINIR O IDIOMA PRINCIPAL DO SITE

<head>

[AQUI VAI CONFIGURAÇÕES DE CARACTERÍSTICAS DO SITE, COMO COR,


FONTE, HIERARQUIA DE TÍTULOS, ETC.]

</head> -> FECHA A TAG HEAD

<body>

[AQUI VAI O CORPO DO SITE]

</body> -> FECHA A TAG BODY

</html> -> FECHA A TAG HTML

----------------------------------------------------------------------------------------------------------

TAGS BÁSICAS DO <head>:

<meta charset = "UTF-8"/> -> PARA DEFINIR A FORMATAÇÃO DE TEXTO


LATINA

<title>Título</title> -> PARA DEFINIR TÍTULO NA ABA

<style> -> DEFINE CARACTERÍSTICAS DOS TÍTULOS E TEXTOS EM GERAL


COMO OS PARÁGRAFOS, COMO COR E TAMANHO DE FONTE

h1{

color: nome_da_cor; (ex: red)

font-family: nome_da_fonte; (ex: Arial)

font-size: tamanho_da_fonte (ex: 30pt)

}
h2{

[AQUI VAI AS CARACTERÍSTICAS DOS TÍTULOS DE


HIERARQUIA 2]

</style>

<style>

body{

background-color: green; -> COR DO FUNDO

color: red; -> COR DO TEXTO

background-image: url(”nome_da_img.extensão”); -> DEFINE UMA


IMG DE FUNDO

} -> ESSE BLOCO DEFINE AS CARACTERÍSTICAS GLOBAIS


UTILIZADAS EM TODO O CORPO DA PÁGINA

*A cor por ser ainda configurada com o código hexadecimal ou decimal RGB,
sendo o padrão: #000000 (quantidade de vermelho, quantidade de verde e quantidade de
azul)

Ex:

body{

background-color: rgb(35, 137, 195) -> Decimal

color: #60453E -> Hexadecimal

color: rgba(0, 0, 0, 0.7) -> DEFINIR COR COM RGBA DÁ A OPÇÃO


DE MUDAR A TRANSPARÊNCIA DA COR UTILIZANDO O 4º
PARÂMETRO (varia de 0 a 1)

p{

text-align: justify;
text-indent: 50px;

} -> ESSE BLOCO DEFINE AS CONFIGURAÇÕES GLOBAIS DOS


PARÁGRAFOS DA PÁGINA

Definindo cor com Matiz, Saturação e Luminosidade:

body{

color: hsl(165, 81%, 93%);

background-color: hlsa(165, 81%, 93%, 0.5) -> DEFINE, NO 4º


PARÂMETRO(varia de 0 a 1), A TRANSPARÊNCIA DA COR

</style>

----------------------------------------------------------------------------------------------------------

TAGS BÁSICAS DO <body>:

<h1>Título 1</h1> -> PARA DEFINIR TÍTULO DE HIERARQUIA 1

<h2>Título 2</h2> -> PARA DEFINIR TÍTULO DE HIERARQUIA 2

...

<h6>Título 6</h6> -> PARA DEFINIR TÍTULO DE HIERARQUIA 6

<hgroup> -> ESSA TAG AGRUPA TÍTULOS

[AQUI VAI OS TÍTULO AGRUPADOS HIERARQUICAMENTE]

</hgroup>

<header id = "identificacao">

[AQUI VAI O CONTEÚDO QUE SERÁ LIMITADO À ÁREA DE CABEÇALHO]

</header>

<div id = "identificao">

[AQUI VAI O BLOCO LIMITADO À ÁREA DE <div>]


</div>

----------------------------------------------------------------------------------------------------------

TAGS DE FORMATAÇÃO DE TEXTO:

</br> -> PARA QUEBRAR LINHA

&nbsp; -> PARA DAR ESPAÇAMENTO

<p> -> PARA DEFINIR UM PARÁGRAFO

[AQUI VAI O CONTEÚDO DO PARÁGRAFO]

</p> -> FECHA O PARÁGRAFO

<wbr/> -> PARA QUEBRAR UMA PALAVRA (ex: super-<wbr/>humano)

&shy; -> PARA QUEBRAR UMA PALAVRA COM UM HÍFEN (ex:


super&shy;humano)

<b>texto</b> -> PARA COLOCAR UM TEXTO EM NEGRITO

<i>texto</i> -> PARA COLOCAR UM TEXTO EM ITÁLICO

<em>texto</em> -> PARA DEIXAR UM TEXTO INCLINADO (semelhante ao


itálico, porém não é apenas visual, serve para enfatizar o texto dentro da tag)

<del>texto</del> -> PARA INDICAR UM TEXTO DELETADO (ex: R̶a̶s̶u̶r̶a̶d̶o̶)

----------------------------------------------------------------------------------------------------------

FORMATAÇÃO DE TEXTO COM CSS3:

<span>texto</span> -> PARA FORMATAR PEQUENOS TRECHOS DE TEXTO

Tipos de Formatação <span>{

<span style=”text-decoration: underline”>; PARA


SUBLINHAR TEXTO

<span style=”text-decoration: overline”>; PARA


SUBLINHAR ACIMA DO TEXTO
<span style=”text-decoration: line-through”>;
PARA RISCAR TEXTO (igual ao <del>, mas sem
significado semântico)

<span style=”text-decoration: none”>; PARA


DEIXAR TEXTO SEM FORMATAÇÃO

<span style=”font-weight: bold”>; PARA


DEIXAR TEXTO EM NEGRITO

<span style=”font-weight: bolder”>; PARA


DEIXAR TEXTO EM NEGRITO MAIS FORTE

<span style=”font-weight: 900”>; PARA DEIXAR


TEXTO EM NEGRITO CONTROLADO (100 a
900 para definir o nível de negrito)

Centralizando um texto: <h1 style=”text-align: center;”Texto></h1>

Alinhando texto à esquerda: <h1 style=”text-align: left;”Texto></h1>

Alinhando texto à direita: <h1 style=”text-align: right;”Texto></h1>

Justificando texto: <p style=”text-align: justify;”>

[PARÁGRAFO]

</p>

Justificando texto e indentando: <p style=”text-align: justify;text-indent: 50px”>

[PARÁGRAFO]

</p>

*Pode-se determinar uma configuração global em <head>

*Checar os comandos de <head>


<p>

Texto <sup>Exemplo</sup> -> PARA FAZER TEXTO SOBRESCRITO

(ex: Texto Exemplo)

Texto <sub>Exemplo</sub> -> PARA FAZER TEXTO SUBRESCRITO (ex:


Texto Exemplo)

</p>

Formatando códigos de programação:

<pre> -> VAI CONSEDERAR A FORMATAÇÃO DO TEXTO ORIGINAL

<code> -> PARA O NAVEGADOR SABER QUE SE TRATA DE UM CÓDIGO

#include <stdio.h>

int main(){

printf(“Ola, Mundo!”)

return 0;

</code>

</pre>

CONFIGURANDO CORES COM CSS3:

<body style=”background-color: red”;> -> MUDA A COR DO FUNDO DA PÁGINA

[CONTEÚDO DO CORPO]

</body>

*Pode ser configurado em <head>

*Checar os comandos de <head>

----------------------------------------------------------------------------------------------------------
SÍMBOLOS ESPECIAIS:

&lt; ESCREVE "<" -> Menor

&gt; ESCREVE ">" -> Maior

&le; ESCREVE "≤" -> Menor ou Igual

&ge; ESCREVE "≥" -> Maior ou Igual

&pound; ESCREVE "£" -> Libra

&yen; ESCREVE "¥" -> Yene

&euro; ESCREVE "€" -> Euro

&copy; ESCREVE "©" -> Copyright

&reg; ESCREVE "®" -> Registred

&tm; ESCREVE "™" -> Trade Mark

&permil; ESCREVE "%." -> Porcentagem por Mil

&sum; ESCREVE "Σ" -> Soma

&infin; ESCREVE "∞" -> Infinito

&times; ESCREVE "x" -> Multiplicação

&plusmn; ESCREVE "±" -> Mais ou Menos

&oplus; ESCREVE "⊕" -> Mais em Circunferência (OR exclusivo)

&radic; ESCREVE "√" -> Radiciação

&ne; ESCREVE "≠" -> Diferente

&Delta; ESCREVE "Δ" -> Delta Maiúsculo

&delta; ESCREVE "δ" -> Delta Minúsculo

&Lamba; ESCREVE "λ" -> Lambda

&omega; ESCREVE "Ω" -> Ômega


&phi; ESCREVE "φ" -> Fi

&larr; ESCREVE "⬅" -> Seta para esquerda

&rarr; ESCREVE "➡" -> Seta para direita

&uarr; ESCREVE "⬆" -> Seta para cima

&darr; ESCREVE "⬇" -> Seta para baixo

&harr; ESCREVE "⬅➡" -> Seta para esquerda e direita

&spades; ESCREVE "♤" -> Espada

&clubs; ESCREVE "♢" -> Ouro

&hearts; ESCREVE "♥" -> Copas

&diams; ESCREVE "♣" -> Paus

----------------------------------------------------------------------------------------------------------

TAGS DE INSERÇÃO E FORMATAÇÃO DE MÍDIA:

<img src = "caminho_da_img/nome_img.extensão"/> (ex: imagens/oculos.png)

<figure> -> DEFINE UM IMAGEM QUE FAZ PARTE DE UM CONTEÚDO

<img src = “caminho/nome.extensão”/>

<figcaption> -> DEFINE UMA LEGENDA PARA A IMAGEM

[AQUI VAI A LEGENDA, PODENDO TER INCLUSIVE TÍTULO]

</figcaption>

</figure>

----------------------------------------------------------------------------------------------------------

DEFININDO ESTILO PADRÃO NO ARQUIVO CSS DO PROJETO:

@charset “UTF-8”;
@import url('https://fonts.googleapis.com/css?family=Titillium+Web'); -> FONTE
IMPORTADA DO SITE GOOGLE FONTS

@font-face{ -> ADICIONANDO FONTE EXTERNA

font-family: ‘FonteLogo’;

src: url(“../_fonts/bubblegum-sans-regular.otf”);

body{

background-color: #dddddd;

color: rgba(0, 0, 0, 1);

p{

text-align: justify;

text-indent: 50px;

image.foto-legenda{

position: relative;

border: 8px solid white; -> borda: largura tipo cor;

box-shadow: 1px 1px 4px black; sombra: desloc.horizontal desloc.vetical


espalhamento cor

figure.foto-legenda img{ -> ALTERA SOMENTE A FOTO

width: 100%;

height: 100%;

figure.foto-legenda figcaption{ -> ALTERA SOMENTE A LEGENDA


opacity: 0;

position: absolute;

top: 0px;

background-color: rgba(0, 0, 0, 0.4);

color: white;

width: 100%;

height: 100%;

padding: 10px; -> CRIAR UM ESPAÇO

box-sizing: border-box; -> AJUSTA O ESPAÇO

transition: opacity 1s;

figure.foto-legenda:hover figcaption{ -> ATIVADA QUANDO PASSAR O MOUSE


EM FIGCAPTION

opacity: 1;

*Isso é configurado na folha de estilo de CSS na pasta do projeto.

*Precisa ser referenciada em <head> ou no body dentro do arquivo destino <html>.

*”.foto-legenda é referente à classe <figure class = “foto-legenda” criada>”

<head>

<link rel=”stylesheet” type=”text/css” href=”_css/estilo.css”/>

</head>

LISTAS COM OL(ORDERED LISTS) E UL(UNORDERED LISTS):

<nave> -> CRIA UMA ÁREA DE NAVEGAÇÃO

<h1>Menu</h1>
<ol type=”1”> -> LISTA NUMERADA, TAMBÉM PODE SER:
“a”,”A”,i”,”I”,...

<li>Opção 1</li> -> ITEM DA LISTA

<li>Opção 2</li>

...

<li>Opção N</li>

</ol>

</nave>

*Obs: A lista pode iniciar a ordenação por um item sem ser o inicial. EX:

<ol type:”a” start:“3”> -> ASSIM A LISTA É ORDENADA ALFABETICAMENTE


COMEÇANDO DA LETRA “c”

<ul> -> A LISTA FICA NÃO ORDENADA

<li>[AQUI VAI OS ITENS]</li>

</ul>

*Obs: pode ter os types square, circle e disc:

<ul type: square>

<ul type: circle>

<ul type: disc>

LISTAS ENCADEADAS:

<nave>

<ul>

<li>Multimídia</li>

<ul>

<li>Músicas</li>

<li>Vídeos</li>
</ul>

</ul>

</nave>

----------------------------------------------------------------------------------------------------------

LINKS COM HTML5:

<a href=http://glass.google.com target=”_blank”>Project Google Glass</a> -> TAG


ÂNCORA QUE É A BASE PARA LINKS

*target=”_blank” é um parâmetro para abrir o link em uma nova aba.

*Para abrir na mesma aba utiliza-se: target=”_self”.

FORMATANDO MENU COM CSS3 NA FOLHA DE ESTILO:

<nav id=”menu1”> -> DANDO UMA IDENTIFICAÇÃO A <nav> (Dento do <body>)

[CONTEÚDO DE <nav>]

</nav>

nav#menu{

display: block; -> TRANFORMA EM BLOCO PARA FLUTUAR

nav#menu ul{

list-style: none; -> RETIRA O SÍMBOLO DAS <.li>

text-transform: uppercase; -> TRANSFORMA EM


MAIÚSCULO

position: absolute;

top: -20px;

left: 300px;

}
nav#menu li{

display: inline-block; -> COLOCA <li> HORIZONTAL

background-color: #dddddd; -> COR DE FUNDO

padding: 10px; -> TAMANHO DO FUNDO

margin: 2px; -> TAMANHO DA MARGEM DO BOTÃO

transition: background-color 1s; TRANSIÇÃO DO HOVER

nav#menu li:hover{ -> INTERAÇÃO QUANDO PASSAR O MOUSE EM <li>

background-color: #606060;

nav#menu h1{

display: none;

nav#menu a{

color: #000000;

text-decoration: none;

nav#menu a:hover{

color: #ffffff;

text-decoration: underline;

----------------------------------------------------------------------------------------------------------

FORMATAÇÃO DE INTERFACE COM CSS3 NA FOLHA DE ESTILO:


div#interface{

width: 900px; -> LARGURA DO CONTEÚDO DE <div>

background-color: #ffffff;

margin: -20px auto 10px auto; -> ORDEM: CIMA, DIREITA, BAIXO E
ESQUERDA

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

padding: 10px 10px 10px 10px;

----------------------------------------------------------------------------------------------------------

FORMATAÇÃO DE <header> COM CSS3 NA FOLHA DE ESTILO:

header#cabecalho img#icone{

position: absolute;

left: 780px;

top: 40px;

header#cabecalho{

border-bottom: 1px #606060 solid; -> TAMANHO, COR E TIPO DE BORDA

height: 150px;

background: url(“../_imagens/glass-logo-peq.jpg”) no-repeat 0px 80px; ->


LOCALIZAÇÃO DA IMG, NÃO REPETIR, DESLOC.HORIZ.,
DESLOC.VERTIC

header#cabecalho h1{

font-family: ‘FonteLogo’, sans-serif;


color: #606060;

font-size: 30px;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);

padding: 0px;

margin-bottom: 0px;

header#cabecalho h2{

font-family: ‘TitilliumWeb’, sans-serif;

color: #888888;

font-size: 15pt;

padding: 0px;

margin-top: 0px;

----------------------------------------------------------------------------------------------------------

SEPARANDO O SITE COM A SEMÂNTICA DE HTML 5:

<section>[AQUI VAI O CONTEÚDO PRINCIPAL]</section>

<uside>[AQUI VAI O CONTEÚDO SECUNDÁRIO DA PÁGINA]</uside>

<footer>[AQUI VAI O RODAPÉ DA PÁGINA]</footer>

Formatando os estilos:

section#corpo{

display: block;

width: 520px;

float: left; -> FLUTUA A ESQUERDA


border-right: 1px solid #606060;

padding: 15px;

uside#lateral{

display: block;

width: 350px;

float: right; -> FLUTUA A DIREITA

footer#rodape{

clear: both; -> O RODAPÉ FICA FORA DA DIVISÃO DE BLOCOS

border-top: 1px solid #606060;

footer#rodape p{

text-align: center;

----------------------------------------------------------------------------------------------------------

TABELAS COM HTML 5 E CSS3:

<table> -> DELIMITA A TABELA

<caption>[AQUI VAI O TÍTULO DA TABELA]</caption>

<tr>[AQUI VAI UMA LINHA DA TABELA]</tr>

</table>

*Para delimitar células usa-se a tag <td></td>

*<td rowspan=”Número de linhas”> -> PARA FAZER UMA CÉLULA OCUPAR


MAIS DE 1 LINHA
*<td colspan=”Número de linhas”> -> PARA FAZER UMA CÉLULA OCUPAR
MAIS DE 1 COLUNA

Formatando o estilo da tabela com a folha de estilo do CSS3:

table#tabelaspec{

border: 1px solid #606060;

border-spacing: 0px;

margin-right: auto;

margin-left: auto;

table#tabelaspec td{

border: 1px solid #606060;

padding: 10px;

table#tablespec td.ce{ -> FORMATA <td class=”ce”>

color: #ffffff;

background-color: #606060;

vertical-align: top;

font-weight: bold;

table#tablespec td.cd{ -> FORMATA <td class=”cd”>

background-color: #cecece;

table#tabelaspec caption{

color: #888888;

font-size: 13pt;
font-weight: bolder;

tabela#tabelaspec caption span{ -> FORMATAÇÃO PARA <span>Mar/2013</span>

display: block;

float: right;

color: #000000;

margin-top: 10px;

----------------------------------------------------------------------------------------------------------

FORMATAÇÃO DE <article>:

article#noticia-principal h2{

font-size: 12pt;

color: #606060;

background-color: #dddddd;

padding: 5px 0px 5px 10px;

margin: 10px 0px 10px 0px;

header#cabecalho-artigo h1{

font-family: ‘FonteLogo’,sans-serif;

font-size: 20pt;

color: #606060;

margin-bottom: 0px;

.direita{
text-align: right;

header#cabecalho-artigo h2{

font-size: 13pt;

color: #cecece;

background-color: #ffffff;

margin: 0px;

header#cabecalho-artigo h3{

font-size: 12pt;

color: #606060;

----------------------------------------------------------------------------------------------------------

INSTRUÇÕES BÁSICAS DE JAVASCRIPT:

<!DOCTYPE html>

<html lang=”pt-br”>

<head>

<title>Teste JavaScript</title>

<meta charset=”UTF-8”/>

</head>

<body>

<h1>Testando JavaScript</h1>
<script> -> TAG PARA CÓDIGO JAVASCRIPT

alert(“Olá, mundo!”); -> COMANDO DE JANELA ALERTA

document.write(“Olá, mundo!”); -> COMANDO PRINT

document.write(“Olá. Hoje é dia ” + Date()); -> FUNÇÃO DATA

</script>

</body>

</html>

2º Teste:

<!DOCTYPE html>

<html lang=”pt-br”>

<head>

<title>Teste JavaScript 2</title>

<meta charset=”UTF-8”/>

<script>

function acendeLampada(){

/*alert(“Lâmpada acendeu!”);*/

document.getElementById(“luz”).src=”_imagens/lâmpada-
acesa.jpg”; -> PEGA UM ELEMENTO PELO SEU ID

function apagaLampada(){

document.getElementById(“luz”).src=”_imagens/lâmpada-
apagada.jpg”; -> PEGA UM ELEMENTO PELO SEU ID

function quebraLampada(){
getElementById(“luz”).src=”_imagens/lâmpada-quebrada.jpg”;

</script>

</head>

<body>

<h1>Acenda a lâmpada</h1>

<img src=”_imagens/lâmpada-apagada.jpg” id=”luz”


onclick=”acendeLampada()” onmouseout=”apagaLampada()”
onclick=”quebraLampada()”/> -> ALERTA QUANDO CLICA NA IMAGEM

*/

<img src=”_imagens/lâmpada-apagada.jpg”
onmousemove=”acendeLampada()”/> -> ALERTA QUANDO PASSA O
MOUSE NA IMAGEM*/

</body>

</html>

Fazendo o 2º teste utilizando apenas 1 função:

2º Teste:

<!DOCTYPE html>

<html lang=”pt-br”>

<head>

<title>Teste JavaScript 2</title>

<meta charset=”UTF-8”/>

<script>

var quebrada=false;
function mudaLampada(tipo){

if(!quebrada){

document.getElementById(“luz”).src=”_imagens/”+tipo+”
.jpg”;

if(tipo == ‘lampada-quebrada’){

quebrada=true;

</script>

</head>

<body>

<h1>Acenda a lâmpada</h1>

<img src=”_imagens/lâmpada-apagada.jpg” id=”luz”


onclick=”mudaLampada(‘lampada-acesa’)”
onmouseout=”mudaLampada(‘lampada-apagada’)”
onclick=”mudaLampada(‘lampada-quebrada’)”/>

</body>

</html>