Você está na página 1de 34

Mrcio Robrio da Costa Ferro

mrcferro@gmail.com
HTML
O que HTML?
Linguagem de formatao
HyperText Markup Language (linguagem de
marcao de hipertexto)
Formatao de:
Textos
Imagens
Tabelas
Formulrios
(...)
Como funciona?
Usurio
Servidor Web
Solicita pgina
Envia pgina
HTML
Que programa o usurio utiliza
para visualizar uma pgina HTML?
Firefox
Internet
Explorer
Opera
Outros
Browsers (navegadores)
A linguagem HTML
Uma pgina HTML inicia-se com:
<HTML>

E termina com:
</HTML>
A linguagem HTML
Uma pgina HTML possui:
Cabealho define algumas informaes do
documento
<HEAD>
</HEAD>

E corpo:
<BODY>
</BODY>
A linguagem HTML
<html>
<head>
cabealhos
</head>
<body>
textos,
imagens,
vdeos,
etc
</body>
</html>
Head
<head>
Contm informaes do documento:
Autor
Descrio
Palavras chaves
Pode conter tag informando que a pgina ser
atualizada a cada intervalo de tempo
Body
<body>
Local onde ficam:
Textos
Imagens
Animaes
Formulrios

Atributos mais usados:
Bgcolor: cor do fundo da pgina
Text: cor da fonte do texto da pgina
Ttulos
<h3>
Usados para inserir ttulos
So seis nveis:
H1
H2
H3
H4
H5
H6
Separadores <br>
Quebra de linha
Semelhante a um ENTER
Separadores <p>
Pargrafo
Cria blocos de contedo
Pode conter formatao de alinhamento:
Left
Right
Center
Justify

<p align=left>
Separadores <hr>
Linha horizontal
Cria uma linha no corpo da pgina
Pode ter seu tamanho modificado (width)
Pode ter sua espessura modificada (size)
Pode ter sua cor modificada (color)

<hr size=3 width=400 color=red>
Listas
<DL><DT><DD>
Lista de definio
Gera lista tabulada

<DL>
<DT>
<DD>Aula de HTML</DD>
<DD>Aula de CMAP TOOLS</DD>
</DT>
</DL>
Listas <UL><LI>
Com marcadores (no numerada)
Gera tpicos

<UL>
<LI>Aula de HTML</LI>
<LI>Aula de CMAP TOOLS</LI>
</ UL >
Listas <OL><LI>
Numeradas

<OL>
<LI>Jos da Silva</LI>
<LI>Maria dos Santos</LI>
</ OL >
Fontes <font>
Formatao da cor da fonte (color)
Formatao do tipo da fonte (face)
Formatao do tamanho da fonte (size)

<font color=blue face=arial size=3>
Fontes
<B><I><U>
Negrito
<B> texto em negrito</B>
Itlico
<I>texto em itlico</I>
Sublinhado
<U>texto sublinhado</U>
Links <a>
Gera ligao com outras pginas
Um link possui o endereo da pgina alvo (href)
A pgina que ser aberta pode ser visualizada
em outra janela (target)

<a href=endereo target=janela>Clique
aqui</a>

Onde:
target=blank abre a nova pgina em outra
janela
Imagens <img>
Insere imagem no documento
Pode ser formatado o tamanho da imagem (width
e height)
Pode ser formatado a espessura da borda da
imagem (border)

<img src=endereo da imagem>
Ou...
<img src=endereo da imagem border=3
width=200 height=200>
Tabela <table>
Uma tabela possui:
linhas <tr>
Clulas <td>
Pode ser formatada a cor da tabela (bgcolor)
Pode ser formatada a espessura das bordas da
tabela (border)

<table>
<tr>
<td>uma clula</td>
</tr>
</table>


Tabela <table>
<table border=2 bgcolor=3>
<tr>
<td>uma clula</td>
</td>outra clula</td>
</tr>
</table>

Tabela <table>
<table border=2 bgcolor=3>
<tr>
<td>uma clula</td>
</td>outra clula</td>
</tr>
</table>

Clulas podem ser mescladas:
Rowspan clulas da mesma linha
Colspan clulas da mesma coluna
Formulrio <form>
Usado para ser feita a entrada de dados
Possui o endereo da pgina que receber os
dados (action)
Possui a descrio do mtodo de envio (method)

<form action=endereo method=mtodo de
envio>

Onde o mtodo pode ser (os mais usados)
POST
GET
Formulrio campo texto <input>
Entrada de texto (em somente uma linha)
Possui:
Descrio do nome do campo (name)
Tamanho do campo (size)

<input type=text name=nome do campo
size=30>
Formulrio campo senha
<input>
Entrada de senha (visualiza somente asteriscos)
Possui:
Descrio do nome do campo (name)
Tamanho do campo (size)

<input type=password name=nome do campo
size=30>
Formulrio checkbox <input>
Campo de checagem
Possui:
Descrio do nome do campo (name)
Descrio do valor do campo (value)


<input type=checkbox name=c1 value=valor>
Marque aqui
Formulrio Radio <input>
Campo de escolha
Possui:
Descrio do nome do campo (name)
Descrio do valor do campo (value)
Grupo (conjunto de campos em que o usurio escolhe apenas
um deles)


<input type=radio name=s value=m> Masculino
<input type=radio name=s value=f> Feminino

Formulrio Lista de seleo
<select>
Usurio escolhe uma das opes em uma lista
Possui:
Descrio do nome do campo (name)
Opes. cada uma com valores (option)

<select name=estado>
<option value=AC>Acre</option>
<option value=AL>Alagoas</option>
</select>

Formulrio Campo para texto
longo <textarea>
Usurio pode informar textos longs
Possui:
Descrio do nome do campo (name)
Quantidade de linhas (rows)
Quantidade de colunas (cols)

<textarea name=obs rows=20 cols=30></textarea>

Boto comum <input>
Boto geralmente usado em JavaScript para
chamar uma funo
Possui:
Rdulo texto que ser exibido (value)
Descriao do nome (name)

<input type=button value=fazer algo
name=bt>

Boto reset <input>
Restaura os valores iniciais do formulrio
Possui:
Rdulo texto que ser exibido (value)
Descriao do nome (name)

<input type=reset value=Restaurar
name=breset>

Boto submit <input>
Envia os dados preenchidos no formulrio para a
pgina de destino
Possui:
Rdulo texto que ser exibido (value)
Descriao do nome (name)

<input type=submit value=Enviar
name=bsubmit>

Atividade