Vous êtes sur la page 1sur 35

Introduo

ao
HTML

1
HTML
HTML significa HyperTextMarkupLanguage (Linguagem de
Marcao de Hipertexto

uma linguagem de marcao utilizada para produzir pginas na


web.

Define a estrutura e descreve o contedo de uma pgina web e a


sua relao com outras pginas web.

O HTML a linguagem que ir exibir a informao. Alm de exibir a


informao, ela d significado.
HTML
Aquilo que voc v quando acessa uma pgina
na web a interpretao que seu navegador faz
do HTML.

Transio HTML 4 -> HTML 5

Para visualizar o cdigo HTML de uma pgina


web clique com o boto direito do mouse e
escolha a opo exibi cdigo fonte.
3
HTML
HTML composta por marcaes denominadas
de tags.
Atravs dos tags possvel definir a estrutura de
uma pgina web, e descrever o seu contedo.
Todas as tags tm o mesmo formato: comeam
com um sinal de menor < e terminam com um
sinal de maior >
Exemplo:
<p>
HTML
Normalmente as tags so em pares:
tags de abertura: <comando>
tags de fechamento: </comendo>
A diferena entre elas que na tag de fechamento
existe uma barra /
Exemplo:
<TITLE> Universidade do Estado do Amazonas </TITLE>

Adiciona o ttulo da
pgina
HTML
Mas toda regra tem sua exceo, no HTML
existem algumas tags em que a abertura e
fechamento se d mesma tag.
Tais tags so comando isolados, ou seja no
possuem contedo para ser processado.
Exemplo:
<BR> Um pulo de linha conseguido com essa tag
<HR> Cria uma seo numa pgina ou adiciona
uma linha horizontal
HTML
Atravs de atributos, possvel associar
propriedades s tags.
Os atributos podem prover informao
adicional sobre os elementos HTML na sua
pgina.
<tag [atributos]>contedo</tag>
Exemplo:
<BODY BGCOLOR=BLUE>

Cor de fundo da
pgina
HTML
Atributos do <BODY>
BGCOLOR = cor
BACKGROUND = URL_imagem
TEXT = cor
Exemplo
<BODY BGCOLOR=#2F4F4F BACKGROUND=imagem.jpg TEXT= #000000>

8
Estrutura Bsica de
uma Pgina Web
Regio de cabealho
(A informao de cabealho no mostrada na janela do navegador.)

Regio de corpo

( o contedo que ser mostrado no seu navegador)

9
Estrutura Bsica de
uma Pgina Web
<!DOCTYPE html>
<HTML lang=pt-br>
<HEAD>
<TITLE>Meu documento web</TITLE>
<meta name="description" content="Breve descrio">
<meta name="keywords" content="Palavras chave>
<meta charset=utf-8>
</HEAD>
<BODY>
Contedo da pgina, como figuras, textos,
tabelas e etc...
</BODY>
</HTML>

http://codepen.io/pen
Marcadores (Tags)

<!DOCTYPE html> - indica para o navegador que o


cdigo encontrado ali um cdigo HTML.
<HTML></HTML> - indicam o incio e o fim do
documento.
<HEAD></HEAD> - Delimitam a seo de cabealho do
documento onde so colocadas informaes que
descrevem a pgina ou scripts programados.
<TITLE></TITLE> - Indicam o ttulo do documento que
ser exibido na barra superior do browser.
<BODY></BODY> - Corpo do documento. Entre estas
tags estar contida a maior parte do contedo a ser
apresentado, como os Textos, Figuras, Tabelas e etc...
11
Informaes sobre
a pgina web
As informaes so metadados sobre um documento
HTML que podem ser especificados a partir da
insero de tags <META> no cabealho da pgina
web.
<META NAME=programao CONTENT=Java, UML, C++>

Tais informaes so usadas pelas mquinas de


busca para indexar ou localizar uma pgina web.
Permite associar palavras-chaves a uma pgina
web.
Tags

Headings (nveis de ttulos)


<Hn></Hn> - n variando de 1 at 6
Sintaxe: <Hn [ALIGN = LEFT|RIGHT|CENTER]>
Exemplo
<H1 ALIGN=RIGHT> Teste de H1</H1>
Tags
Quebra de Linhas
<BR>
Pargrafo
<P>...</P>

<P ALIGN=CENTER|LEFT|RIGHT>..</P>
Alinha texto de acordo com o atributo ALIGN
Exemplo
<P ALIGN=LEFT> Teste de paragrafo </P>
Tags
Com o objetivo de organizar uma pgina web os
pargrafos so agrupados em sees.
A separao entre sees pode ser feita pela tag
<HR>, que cria uma linha horizontal.
Os atributos SIZE, WITDH e ALIGN podem ser
usados para dimensionar e posicionar essa linha.
Os valores de tais atributos podem ser especificados em
pixels ou percentuais da rea usada para apresentao da
pgina.
<HR SIZE=1 WIDTH=500 ALIGN=center>
<HR SIZE=1 WIDTH=50% ALIGN=center>
Exemplo de
uma Pgina Web
<!DOCTYPE html>
<HTML lang=pt-br>
<HEAD>
<TITLE>Meu documento web</TITLE>
<meta name="description" content="Breve descrio">
<meta name="keywords" content="Palavras chave>
<meta charset=utf-8>
</HEAD>
<BODY>
<H1>Ttulo da Seo</H1>
<P>Primeiro pargrafo do texto</P>
<BR>
<P>Segundo pargrafo do texto</P>
<HR>
</BODY>
</HTML>
http://codepen.io/pen
Tags
Estilos Fsicos:
<B></B> - Negrito
<I></I> - Itlico
<U></U> - Sublinhado
Exemplos
<B>Universidade do Estado Amazonas</B>
<I>Universidade do Estado Amazonas</I>
<U>Universidade do Estado Amazonas</U>

17
Tags

Pode-se ainda mudar o tamanho, tipo e a cor da fonte


atravs do Tag abaixo:

<FONT SIZE=n COLOR=cor FACE=tipo>..</FONT>

O tamanho pode variar de 1 at 7, mas o default 3.

Exemplo:
<FONT SIZE=4 COLOR=blue FACE=Arial>HTML</FONT>
Comentrio
Podem ser includos comentrios em
documentos HTML.
<!-- comentrio em uma linha -->
<!-- comentrio em
Mais de uma linha -->
Exemplo de
uma Pgina Web
<!DOCTYPE html>
<HTML lang=pt-br>
<HEAD>
<TITLE>Meu documento web</TITLE>
<meta name="description" content="Breve descrio">
<meta name="keywords" content="Palavras chave>
<meta charset=utf-8>
</HEAD>
<BODY>
<!-- Contedo da Pgina -->
<H1>Ttulo da Seo</H1>
<P>Primeiro pargrafo do texto</P>
<BR>
<P> <FONT SIZE=4 COLOR=blue FACE=Arial>
Segundo pargrafo do texto </FONT></P>
<HR>
</BODY>
</HTML>

http://codepen.io/pen
Ligando Pginas Web

Ligao entre pginas web:


ncoras

doc2
elo Servidor 2

doc1
doc3
elo
Servidor 1

Considerada a alma da web


Ligando Pginas Web

Links

Semelhantes a apontadores

Tag
<A HREF=URL > texto/imagem </A>
Links Externos
Representao Grfica do Exemplo 2:

ncora

destino
Links Externos
Links para outras pginas web ou sites podem ser
criados.
Exemplo:
Para abrir a pgina web na mesma aba ou janela do navegador
<a href=http://www.google.com>Google</a>
Para abrir a pgina web em uma nova janela do navegador
<a href="http://www.w3schools.com/"
target="_blank">Visite as W3Schools!</a>

Onde: href igual a pgina ou endereo a ser aberto e


target onde ele dever ser aberto.
Exemplo de
uma Pgina Web
<!DOCTYPE html>
<HTML lang=pt-br>
<HEAD>
<TITLE>Meu documento web</TITLE>
<meta name="description" content="Breve descrio">
<meta name="keywords" content="Palavras chave>
<meta charset=utf-8>
</HEAD>
<BODY>
<H1>Ttulo da Seo</H1>
<P>Primeiro pargrafo do texto</P>
<BR>
<P> <FONT SIZE=4 COLOR=blue FACE=Arial>
Segundo pargrafo do texto </FONT></P>
<HR>
<A HREF=http://www.google.com>Google</A>
</BODY>
</HTML>

http://codepen.io/pen
Links Internos
So utilizados para criar links para o interior da
prpria pgina

ncora

destino

Quando usamos ncoras nomeadas podemos criar


vnculos que saltam diretamente para uma seo especfica
em uma pgina.
Links Internos

ncora: <A HREF=#chave > ... </A>


Destino: <A NAME=chave> ... </A>

O atributo nome usado para criar uma


ncora nomeada

Exemplo 1:
<H3> Indice </H3>
<A HREF=#introducao>Introducao</A>
<A HREF=#Tabelas>HTML-Tabelas</A>
<A HREF=#links>Usando Links</A>
...
<H3><A NAME=introducao>Introducao</A></H3>
Exemplo de
uma Pgina Web
<!DOCTYPE html>
<HTML lang=pt-br>
<HEAD>
<TITLE>Meu documento web</TITLE>
<meta name="description" content="Breve descrio">
<meta name="keywords" content="Palavras chave>
<meta charset=utf-8>
</HEAD>
<BODY>
<H1><A NAME=secao1>Ttulo da Seo</A></H1>
<P>Primeiro pargrafo do texto</P>
<BR>
<P> <FONT SIZE=4 COLOR=blue FACE=Arial>
Segundo pargrafo do texto </FONT></P>
<HR>
<A HREF=http://www.google.com>Google</A>
<A HREF=#secao1>Seo 01</A>
</BODY>
</HTML>
http://codepen.io/pen
Imagens
Para incluir uma imagem em uma pgina web
usa-se a tag <IMG SRC=URL _Imagem

<IMG SRC = imagens/lilica.gif>

Extenses GIF e JPG


Gifs com fundo Transparente e Gifs Animadas
Imagens
Atributos de IMG:
Atributo Funo
ALT = "texto" Substitui a imagem por texto e
acrescenta dica
BORDER =n Borda da imagem e alinhamento
ALIGN = do texto (em relao a imagem)
"top|bottom|middle"

WIDTH = n e HEIGHT = n Largura e altura da imagem


HSPACE = n e VSPACE = n Distncia horizontal e vertical,
respectivamente, do texto em
relao figura.
Exemplo de
uma Pgina Web
<!DOCTYPE html>
<HTML lang=pt-br>
<HEAD>
<TITLE>Meu documento web</TITLE>
<meta name="description" content="Breve descrio">
<meta name="keywords" content="Palavras chave>
<meta charset=utf-8>
</HEAD>
<BODY>
<H1><A NAME=secao1>Ttulo da Seo</A></H1>
<IMG SRC = imagens/uea.jpg height="198" width="198">
<P>Primeiro pargrafo do texto</P>
<BR>
<P> <FONT SIZE=4 COLOR=blue FACE=Arial>
Segundo pargrafo do texto </FONT></P>
<HR>
<A HREF=http://www.google.com>Google</A>
<A HREF=#secao1>Seo 01</A>
</BODY>
</HTML>
http://codepen.io/pen
Caracteres Especiais
Alguns caracteres tm significado especial na HTML, como o
sinal de menor do que (<) que define o incio de uma tag de
HTML.
Se quisermos que o navegador exiba de fato estes caracteres
devemos seus cdigos HTML correspondentes.

Caracteres especiais:
< - &lt; - &quot; - &frac12;
> - &gt; - &ordf; - &reg;
& - &amp; m - &micro; - &deg;
- &nbsp;

32
Cores
Uma alternativa ao uso dos dgitos hexadecimais a
identificao da cor com uma palavra reservada.

black #000000 green #008000


silver #C0C0C0 lime #00FF00
gray #808080 olive #00FF00
white #FFFFFF yellow #FFFF00
maroon #800000 navy 000080
red #FF0000 blue #0000FF
purple #800080 teal 008080
fuchsia #FF00FF aqua #00FFFF

ColorSchemer.com tima ferramenta de paletas de cores


Exerccio
Elabore uma pgina web que apresente
o seu CV.
Hospede a pgina no servidor web do
easyphp.
A pgina dever ser criada de acordo
com a seguinte estrutura:
Foto Meu CV
| Dados Pessoais | Formao Acadmica | Experincia Profissional |

Dados Pessoais

Formao Acadmica

Graduao: UEA

Experincia Profissional

Trabalhou na empresa XYZ

35