Tags Curso de HTML5

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
...
<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
-> 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)
-> PARA QUEBRAR UMA PALAVRA COM UM HÍFEN (ex:

superhumano)
<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:
< ESCREVE "<" -> Menor
> ESCREVE ">" -> Maior
≤ ESCREVE "≤" -> Menor ou Igual
≥ ESCREVE "≥" -> Maior ou Igual
£ ESCREVE "£" -> Libra
¥ ESCREVE "¥" -> Yene
€ ESCREVE "€" -> Euro
© ESCREVE "©" -> Copyright
® ESCREVE "®" -> Registred
&tm; ESCREVE "™" -> Trade Mark
&permil; ESCREVE "%." -> Porcentagem por Mil
∑ ESCREVE "Σ" -> Soma
∞ ESCREVE "∞" -> Infinito
× ESCREVE "x" -> Multiplicação
± ESCREVE "±" -> Mais ou Menos
&oplus; ESCREVE "⊕" -> Mais em Circunferência (OR exclusivo)
√ ESCREVE "√" -> Radiciação
≠ ESCREVE "≠" -> Diferente
Δ ESCREVE "Δ" -> Delta Maiúsculo
δ ESCREVE "δ" -> Delta Minúsculo
&Lamba; ESCREVE "λ" -> Lambda
ω ESCREVE "Ω" -> Ômega

φ ESCREVE "φ" -> Fi
← ESCREVE "⬅" -> Seta para esquerda
→ ESCREVE "➡" -> Seta para direita
↑ ESCREVE "⬆" -> Seta para cima
↓ ESCREVE "⬇" -> Seta para baixo
↔ 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;
font-size: 13pt;
color: #cecece;
background-color: #ffffff;
margin: 0px;
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>
<head>
<title>Teste JavaScript 2</title>
<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>
<head>
<title>Teste JavaScript 2</title>
<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>

Tags Curso de HTML5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tags Curso de HTML5

Transféré par

Droits d'auteur :

Formats disponibles

ESTRUTURA PADRÃO DE UM DOCUMENTO HTML:

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

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

</head> -> FECHA A TAG HEAD

[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

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

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

color: nome_da_cor; (ex: red)

font-family: nome_da_fonte; (ex: Arial)

font-size: tamanho_da_fonte (ex: 30pt)

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

background-color: green; -> COR DO FUNDO

color: red; -> COR DO TEXTO

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

} -> ESSE BLOCO DEFINE AS CARACTERÍSTICAS GLOBAIS

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

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

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

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

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

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]

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

[AQUI VAI O BLOCO LIMITADO À ÁREA DE <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:

<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

<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

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

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

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

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

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

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;”>

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

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

*Checar os comandos de <head>

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

(ex: Texto Exemplo)

-> PARA DAR ESPAÇAMENTO

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

< ESCREVE "<" -> Menor

> ESCREVE ">" -> Maior

≤ ESCREVE "≤" -> Menor ou Igual

≥ ESCREVE "≥" -> Maior ou Igual

£ ESCREVE "£" -> Libra

¥ ESCREVE "¥" -> Yene

€ ESCREVE "€" -> Euro

© ESCREVE "©" -> Copyright

® ESCREVE "®" -> Registred

∑ ESCREVE "Σ" -> Soma

∞ ESCREVE "∞" -> Infinito

× ESCREVE "x" -> Multiplicação

± ESCREVE "±" -> Mais ou Menos

√ ESCREVE "√" -> Radiciação

≠ ESCREVE "≠" -> Diferente

Δ ESCREVE "Δ" -> Delta Maiúsculo

δ ESCREVE "δ" -> Delta Minúsculo

ω ESCREVE "Ω" -> Ômega

← ESCREVE "⬅" -> Seta para esquerda

→ ESCREVE "➡" -> Seta para direita

↑ ESCREVE "⬆" -> Seta para cima

↓ ESCREVE "⬇" -> Seta para baixo

↔ ESCREVE "⬅➡" -> Seta para esquerda e direita