HTML

x(html)
(X)HTML
http://www.w3schools.com/html/default.asp
(X)HTML
conceitos introdutrios
atualmente um documento HTML composto por uma srie de elementos
formatados por CSS.
Em HTML (normalmente referimos como HTML o que XHTML) existe uma clara
distino entre estrutura e forma.
O XHTML uma verso mais restrita e limpa do HTML e definido como uma
aplicao XML. O XHTML uma combinao de HTML com XML, uma depurao
do HTML tendo em conta a organizao estrutural do XML.
(X)HTML
alm disso, o XHTML
uma linguagem de marcao / markup (e no programao!) usada nas

pginas da web;
os documentos so escritos apenas com texto;
cada pgina um ficheiro que tem a extenso .htm (ou .html);
o nome do ficheiro tem de ser em minsculas, sem acentos e sem espaos

(tal como todos os ficheiros utilizados no projeto web tais como imagens,
scripts, pastas, etc...).
(X)HTML
conceitos introdutrios | identao do cdigo
(X)HTML
um elemento HTML constitudo
preferencialmente por 3 partes
marcador / etiquetas (tags) de

inicio constituda pelos smbolos <
e > e uma palavra reservada (p,
form, img, etc...)
um contedo
marcador (tags) de fim
elemento
<p> html </p>
<marcador de incio> contedo </marcador de fim>
(X)HTML
conceitos introdutrios | marca de incio
como foi referido anteriormente, o marcador de inicio constituda pelos smbolos
< e > e uma palavra reservada.

exemplo:
<a>
<p>
No entanto, alguns tm ainda atributos que o personalizam ou complementam e
que podem ser obrigatrios ou opcionais. O seu valor colocado entre aspas.
exemplos:
<a href=index.htm> <img src=test.jpg> <div id=intro>

<marcador de incio atributo=> contedo </marcador de fim>
(X)HTML
conceitos introdutrios | contedo
contedo basicamente o texto que aparece nas pginas;
Pode ser escrito em portugus, com maisculas, minsculas, acentos e espaos
(X)HTML
conceitos introdutrios | marca de fim
a marca de fim serve exclusivamente para indicar que o fim do elemento que
estamos a utilizar
Usa-se o sinal /
Por exemplo:
</p>
</table>
(X)HTML
conceitos introdutrios | caractersticas do XHTML
o XHTML exige uma sintaxe limpa e apresenta as seguintes caractersticas:
Os elementos tm que ser claramente aninhados (nested) da seguinte forma:

<b><i> Isto um texto a bold e itlico </i></b>
e no desta
<b><i> Este um texto a bod e itlico </b></i>
Os seus elementos devem ser sempre fechados

<p>Isto um pargrafo</p>
Os elementos vazios, tambm, devem ser fechados e com um espao extra

antes da barra
<br /> <hr /> <img src="imagem.jpg" />
Os seus elementos devem ser sempre em minsculas
(X)HTML
estrutura da pgina
exemplo da estrutura base de um documento HTML:
<html>
<head>
...
</head>
cabealho
<body>
...
</body>
</html>
corpo
(X)HTML
estrutura da pgina
luz do XHTML, um documento vazio teria ento o seguinte aspeto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"www.w3.orgxhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/
xhtml">
<head>
....
</head>
cabealho
<body>
....
</body>
corpo
</html>
(X)HTML
estrutura da pgina | definio do DTD
DOCTYPE O tipo de DTD (document type definition) indica ao browser qual o
tipo de marcao que est a ser usada e um link para o documento.
Por defeito pomos a ltima mais usada:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"www.w3.orgxhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/
xhtml">
(X)HTML
estrutura da pgina | o cabealho | title
o cabealho do documento contm diversas informaes importantes para o
correto funcionamento e formatao do contedo do documento (pode ser
entendido como os bastidores do palco principal).
Por exemplo, nesta rea que se define o titulo que aparece na barra superior do
navegador (ou mais recentemente, no separador). De que forma? Recorrendo
etiqueta <title>
Ex.
<title> atelier de multimdia </title>
(X)HTML
estrutura da pgina | o cabealho | meta
o elemento <meta> usado para conter meta-informao sobre os contedos do
documento, de forma a que os mecanismos de pesquisa possam mais facilmente
identificar e catalogar os documentos encontrados.
keywords (palavras chave para os motores de busca)

tipo de contedos e de linguagem
tipo de codificao dos caracteres
autor
descrio da pgina
tempo de atualizao automtica
entre outros...
(X)HTML
estrutura da pgina | o cabealho | exemplo de meta info.
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>atelier de multimdia</title>
<meta name="author" content=marco pinheiro">
<meta name="description" content=pgina da uc">
<meta name="keywords" content=palavras chave, separadas, por, virgulas">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" />
<script type="text/javascript" src="javascriptfile.js"></script>
</head>
(X)HTML
estrutura da pgina | o cabealho | ex. de links declarados
ainda nesta zona que se definem os links para os ficheiros externos.
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>atelier de multimdia</title>
<meta name="author" content=marco pinheiro">
<meta name="description" content=pgina da uc">
<meta name="keywords" content=palavras chave, separadas, por, virgulas">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="StyleSheet" href="stylesheet.css" type="text/css"media="all" />
<script type="text/javascript" src="javascriptfile.js"></script>
</head>
(X)HTML
estrutura da pgina | o corpo (body)
o elemento body contm todos os elementos, atributos e informao que a pgina
deve apresentar ao leitor.
O elemento body deve ser composto depois do elemento head e antes da tag de
fecho do elemento html:
...
<body>
Todos os contedos do documento
XHTML.
</body>
...
(X)HTML
estrutura da pgina | os comentrios
o elemento  permite-nos inserir comentrios no cdigo HTML. Os
comentrios no so lidos pelo browser, embora sejam visveis na source do
documento.
<!Isto um comentrio num doc. XHTML -->
(X)HTML
estrutura da pgina | elementos do corpo | <h1> ... <h6>
ttulos (cabealhos)
existem 6 nveis de ttulos (headings).
o nvel de importncia definido por um
nmero entre 1 e 6.
o mais importante ser o <h1> e o menos
importante o <h6>. Esta importncia
Ex.
<h1>Mais importante</h1>
<h2>2 mais importante</h2>
<h6>ltimo</h6>
(X)HTML
estrutura da pgina | elementos do corpo | <p>; <br />
pargrafo e quebra de linha
pargrafos: delimitam blocos de
informao
<p> contedo do pargrafo </p>
quebra de linha:
<br />
(elemento que no precisa de
marca do fim)
Ex.
<p> Em OM temos trs reas: HTML, CSS
e Drupal. A UC tem 60 horas. <br /> O
docente o Marco Pinheiro, quer gostem
quer no!</p>
(X)HTML
estrutura da pgina | as rguas horizontais hr
o elemento hr permite definir rguas
horizontais que podem ser usadas para
quebrar textos longos ou para estruturar
melhor um documento.
o elemento hr um elemento vazio, logo,
no tem tag de fecho, devendo ser fechado
na tag de abertura, precedida de um espao.
<p>Textos muito longos podem ser divididos em
seces com headings ou, em alternativa,
rguas horizontais</p> <hr /> <h3>Um heading
tambm quebra o texto.</h3> <p>Podendo um novo
texto comear imediatamente a seguir.</p>
As rguas so formatadas por defeito a toda

a largura da janela do documento, com
sombreado.
(X)HTML
estrutura da pgina | elementos do corpo | formatao txt
negrito
<b></b>
<strong> ... </strong>
itlico
<i></i>
<em> ... </em>
sublinhado (underline)
<u></u>
Ex.
<p> Em OM temos trs reas: <b>HTML,
CSS e Drupal</b>. A <i>UC</i> tem 60
horas. <br /> O docente o <u>Marco
Pinheiro</u>, quer gostem quer no!</p>
(X)HTML
estrutura da pgina | elementos do corpo | formatao txt
e agora estaro a pensar: e como se formata o tipo
de letra, tamanho, cor, etc.? >> CSS (mais adiante).
(X)HTML
estrutura da pgina | elementos do corpo | imagens
As imagens so normalmente usadas inline, ie, inseridas num bloco de texto.
O elemento img sempre usado com o atributo src (source) que aponta para a url
da imagem, no servidor que aloja o documento html ou outro e com o atributo alt,
que fornece uma descrio em texto da imagem. O elemento img um elemento
vazio, devendo portanto ser sempre fechado com />.
O atributo alt permite que os browsers possam apresentar texto em lugar da
imagem caso o suporte de imagens esteja desligado, o browser apenas suporte
texto, enquanto a imagem carregada, ou se a imagem estiver, por alguma razo,
inacessvel.
As imagens so dimensionadas automaticamente pelo browser quando carregadas.
Contudo, em documentos complexos, por vezes recomendvel utilizar tambm os
atributos width e height para indicar ao browser a dimenso das mesmas, de forma
a que a pgina possa ser formatada mesmo que estas estejam inacessveis ou
demorem mais tempo a carregar.
(X)HTML
imagem
<img src=caminho e nome da imagem com a
extenso [alt=texto alternativo] [width=largura]
[height=altura] />
<img src=logotipo.jpg />
nota: ter em ateno que o caminho e o nome do ficheiro

da imagem tm de ser escritos partindo do ponto de partida
do documento; ou seja, se a imagem estiver na directoria
do documento HTML s se escreve o nome do ficheiro. Se
estiver noutra directoria temos de seguir os mesmo
cuidados que nas hiperligaes
mais uma vez: usar minsculas, no usar acentos e
espaos nos nomes das imagens!
(X)HTML
imagem
<img src=caminho e nome da imagem com a extenso />
<p> Uma imagem com o tamanho real: <img src="http://meusregistros.pbwiki.com/f/
grav_criancas_sala_de_aula2.jpg" /> </p>
no caso de se pretender apresentar a imagem com dimenses diferentes do

original, podero ser utilizadas as propriedades width (largura) e height
(altura) e especificar a medida (em pxeis).
<p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura
<img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg"
width="48" height="48" /> </p>
<p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura
<img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg"
width="148" height="48" /> </p>
(nota: caso no se especifique uma destas duas propriedades, o redimensionamento ser
feito de forma proporcional, o que bastante til)
(X)HTML
estrutura da pgina | elementos do corpo | image maps
imagem
<img src=caminho e nome da imagem com a extenso />
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sol" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercrio" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Vnus" />
</map>
uma vez que a tarefa pode tornar-se demorada, existem diversas ferramentas que
ajudam a fazer esta tarefa:
http://www.maschek.hu/imagemap/imgmap
editores de html (dreamweaver, kompozer, etc.)
(X)HTML
estrutura da pgina | elementos do corpo | listas numeradas
lista
<ol></ol>
elemento de uma lista
<li></li>
Ex.
<ol>
<li>Informatica</li>
<li>Fotografia</li>
<li>Video</li>
</ol>
(X)HTML
Ex.
<font size=1>
<h4>Lista numeradas:</h4>
<ol>
<li>Maas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista com letras:</h4>
<ol type="A">
<li>Maas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
...
(X)HTML
Ex.
<font size=1>
<h4>Lista com letras minusculas:</h4>
<ol type="a">
<li>Maas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
<h4>Lista com numeros romanos:</h4>
<ol type="I">
<li>Maas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
...
(X)HTML
Ex.
<font size=1>
<h4>Lista com numeros romanos minusculos:</h4>
<ol type="i">
<li>Maas</li>
<li>Bananas</li>
<li>Limes</li>
<li>Laranjas</li>
</ol>
</font>
(X)HTML
estrutura da pgina | elementos do corpo | listas n/ numeradas
lista
<ul></ul>
elemento de uma lista
<li></li>
Ex.
<ul>
<li>Informatica</li>
<li>Fotografia</li>
<li>Video</li>
</ul>
(X)HTML
estrutura da pgina | elementos do corpo | ncoras
O elemento a (anchor) define ligaes relativas ou absolutas. Ao contrrio da maior
parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo
name.
<a href=documento> descrio </a>
<a name=zona1> descrio </a>
(X)HTML
estrutura da pgina | elementos do corpo | ncoras (internas)
O elemento a (anchor) define ligaes relativas ou absolutas. Ao contrrio da maior
parte dos elementos, o elemento a requer sempre ou o atributo href ou o atributo
name.
O atributo name permite que seces de um documento XHTML sejam rotuladas
com uma referncia especfica. O atributo name permite criar links para uma
seco especfica dentro do documento. Assim, se tivermos um documento longo
podemos criar dentro do documento um link para o topo, por exemplo.
A utilizao deste elemento apenas com o atributo name no resulta na criao de
um link visvel mas sim na marcao de um alvo para criao de links.
(X)HTML
estrutura da pgina | elementos do corpo | ncoras (internas)
Assim, o link
<a href="#topo">Topo</a>
remete-nos para o topo desta pgina. Quando os links so feitos dentro de um
mesmo documento, devemos sempre especificar o name com #,
<a name=topo> bla bla bla </a>
mesmo quando queremos linkar ao topo do documento (e neste caso deveremos
criar um name no topo), caso contrrio, especificando apenas o nome do
documento, faremos com que o browser recarregue a pgina.
(X)HTML
estrutura da pgina | elementos do corpo | ncoras (externas)
hiperligao (link)
faz a ligao a outros documentos
<a href=documento> descrio </a>
Ex.
<p>J passaste pelo <a href="http://
elearning.esev.ipv.pt/moodle1112/course/view.php?
id=613">Moodle de OM</a>? bastante til!</p>
(X)HTML
hiperligao (link)
faz a ligao a outros documentos
Ex.
Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\ficheiro2.htm
<a href=ficheiro2.htm></a>
Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\teorica
\ficheiro2.htm
<a href=teorica/ficheiro2.htm></a>
Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\hj\ficheiro2.htm
<a href=../hj/ficheiro2.htm></a>
(X)HTML
a nova pgina abre na janela atual do navegador. Se
desejarmos abrir uma nova janela em cima da j
aberta, utilizar o atributo target=_BLANK
<a href=documento target=_BLANK> descrio </a>
pode e deve ainda ser adicionada descrio

hiperligao recorrendo ao atributo title
<a href=documento target=_BLANK title=clique para
aceder nossa unidade curricular> descrio </a>
(X)HTML
estrutura da pgina | elementos do corpo | as tabelas
muitas vezes usada para estruturar a informao
tabela
<table></table>
linha (table row)
<tr></tr>
clula (table data)
<td></td> (no caso de ser a primeira linha: <th> ... </th> - cabealho)
<table border=2>
<tr>
<th>ttulo 1</th>
<th>ttulo 2</th>
</tr>
<tr>
<td>Clula da 2 linha e 1 Coluna</td>
<td>Clula da 2 linha e 2 Coluna</td>
</tr>
</table>
(X)HTML
estrutura da pgina | elementos do corpo | as tabelas
tambm pode ser adicionada uma legenda tabela
<caption>Legenda</caption>
Ex.
<h4> Esta tabela tem legenda e borda de 6: </h4>
<table border="6">
<caption>Legenda da tabela...</caption>
<tr>
<th>tit1</th>
<th>tit2</th>
<th>tit3</th>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
(X)HTML
estrutura da pgina | elementos do corpo | iframes
as iframes servem para abrir
uma janela para outro local (ou
documento) dentro do prprio
documento. como que uma
janela para outro local!
<iframe src="URL"></iframe>
Ex.
<iframe src="demo_iframe.htm"
width="200" height="200"></
iframe>
(X)HTML
embeber contedos externos | widgets sociais
youtube.com
twitter.com/about/
resources/widgets/
http://web.appstorm.net/how-to/social-media-how-to/6tools-to-create-a-google-plus-profile-widget-for-your-site/
http://developers.facebook.com/docs/plugins/
(X)HTML
validao do cdigo escrito
http://validator.w3.org
(X)HTML
estrutura da pgina | formulrios
(X)HTML
estrutura da pgina | formulrios
http://www.w3schools.com/html/html_forms.asp
(X)HTML
estrutura da pgina | formulrios | tags essenciais
Dentro do grupo dos formulrios, o HTML oferece os seguintes elementos:
Input
text fields (caixa de input de uma linha)

file fields
checkbox (liga/desliga)
buttons (submit / reset)
radio (caixa de opo)
hidden fields (campos oculos)
textareas (reas de texto)
select (caixas de combinao / listagem)
fieldsets (delimitao e agrupamento de campos)
(X)HTML
estrutura da pgina | formulrios | tags essenciais | form
Qualquer formulrio criado em HTML delimitado com as tags <form> (e </form>...)
A tag form tem as seguintes propriedades:
action - ficheiro que ir receber / processar os dados
method - tipo de envio (GET ou POST)
enctype - tipo de dados a ser enviado pode ser de dois tipos:
application/x-www-form-urlencoded - envio apenas de texto

multipart/form-data - envio de texto / ficheiro (binrio)
Ex. upload de uma foto, documento, etc.
Ex. <form action="formProcessa.php" method="post" enctype="application/x-www-form-urlencoded"

name=formulario>
(X)HTML
estrutura da pgina | formulrios | tags essenciais | input
A tag <input type=text> desenha uma caixa de texto
Tem a seguinte propriedade:
size - nmero de caracteres que mostrar antes de desaparecerem
Ex. <input type="text" size="45" name="nome">
(X)HTML
A tag <input type=password> desenha uma caixa de texto
Tem a seguinte propriedade:
size - nmero de caracteres que mostrar antes de desaparecerem
Ex. <input type="password" name="passwd" size="45">
(X)HTML
As tags <input type=hidden> criam um campo cujo valor definido apenas no cdigo html e como tal,
nunca aparecer desenhado junto dos outros campos.
Obs. se o utilizador tiver curiosidade e for ver o cdigo fonte da pgina, ter acesso ao valor declarado no
mesmo!
Ex. <input type="hidden" name="escondido" value="192.168.1.1">
(X)HTML
A tag <input type=checkbox> criam uma caixa cujo valor ser de uma lgica booleana, ou seja, sim ou
no
Caso o utilizador active esta caixa, ser enviado para o servidor o valor atribuido mesma (value). Caso
contrrio, a varivel passada para o servidor com valor nulo
Caso o programador queira ter a caixa activada de forma predefinida, dever adicionar a propriedade
checked com o valor checked
Ex. <input type="checkbox" name="aceita" value="sim" checked="checked">
(X)HTML
A tag <input type=radio> criam uma caixa cujo valor ser de uma lgica booleana, ou seja, sim ou no
Caso o programador queira ter a caixa activada de forma predefinida, dever adicionar a propriedade
checked.
Nota importante: Se for dado o mesmo nome s tags (neste caso - prato), o utilizador pode apenas
escolher uma opo! Caso contrrio, poderia activar diversas tags radio.
Exemplos:
<label>Peixe<input type="radio" name="prato" value="Peixe" checked></label>
<label>Carne<input type="radio" name="prato" value="Carne"></label>
<label>Salada<input type="radio" name="prato" value="Salada"></label>
(X)HTML
A tag <input type=file> desenha uma caixa que permite seleccionar um ficheiro do computador do
cliente (que mais tarde ser enviado para o servidor)
Ex. <input type="file" name="foto" >
(X)HTML
As tags <input type=submit> e <input type=reset> desenham um boto no formulrio
A nica diferena entre eles apenas o fim a que se destinam.
reset - limpa todos os campos que constam do formulrio
submit - envia os dados do formulrio para o servidor para ser processado
Ex. <input type="submit" name=bt_encomenda value=Encomendar>

Ex. <input type="reset" name=bt_reseta value=Limpar campos>
(X)HTML
estrutura da pgina | formulrios | tags essenciais | select
A tag <select> criam uma caixa se listagem capaz de mostrar diversos valores sempre que o utilizar clicar
na mesma.
S ser enviado para o servidor a opo seleccionada pelo utilizador.
Exemplo:
<select name="sexo">
<option value="Masc" selected>M</option>
<option value="Fem">F</option>
<option value="Hibrido">H</option>
</select>
(X)HTML
estrutura da pgina | formulrios | tags essenciais | textarea
Ao contrrio da tag <input type=text> que cria uma caixa de uma s linha, a tag <textarea> permite que
o utilizador tenha uma caixa de introduo de dados mas desta feita com vrias linhas ao seu dispor.
Tem as seguintes propriedades:
cols - nmero de caracteres que mostrar em largura
rows - nmero de linhas que a caixa ter
Ex. <textarea cols="50" rows="5" name="mensagem"> </textarea>
!! ao contrrio das outras caixas

de input, esta tag necessita ser
fechada!
(X)HTML
estrutura da pgina | formulrios | tags essenciais | label
A tag <label> cria um rtulo para o campo de input de forma a que o utilizador tenha conhecimento do que se
pretende com o mesmo.
Ex.
<label>
nome do utilizador <input type="text" name="nomeUser">
</label>
(X)HTML
estrutura da pgina | formulrios | tags essenciais | fieldset
A tag <fieldset> desenha uma moldura em volta de um ou vrios campos do formulrio de forma a
agrup-los visualmente com uma moldura em torno dos mesmos;
Acrescenta ainda uma pequena legenda que descreve o tema a que os campos se referem.
Ex. <fieldset><legend>dados profissionais</legend> ... (campos aqui!) ... </fieldset>
(X)HTML
referncias
cheat sheet de HTML:

http://elearning.esev.ipv.pt/moodle1112/file.php/613/html/html-cheat-sheet.pdf
(X)HTML
referncias
http://www.w3schools.com/html
http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf
tutoriais vdeo:
http://www.guanabara.info/category/lp/html/
o futuro?
HTML5
http://www.w3schools.com/html5/html5_reference.asp
CSS3
http://html5-showcase.com/

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

x(html)

uma linguagem de marcao / markup (e no programao!) usada nas

os documentos so escritos apenas com texto;

cada pgina um ficheiro que tem a extenso .htm (ou .html);

o nome do ficheiro tem de ser em minsculas, sem acentos e sem espaos

marcador / etiquetas (tags) de

marcador (tags) de fim

<p> html </p>

<marcador de incio> contedo </marcador de fim>

<marcador de incio> contedo </marcador de fim>

<a href=index.htm> <img src=test.jpg> <div id=intro>

<marcador de incio> contedo </marcador de fim>

<marcador de incio> contedo </marcador de fim>

Os elementos tm que ser claramente aninhados (nested) da seguinte forma:

Os seus elementos devem ser sempre fechados

Os elementos vazios, tambm, devem ser fechados e com um espao extra

Os seus elementos devem ser sempre em minsculas

keywords (palavras chave para os motores de busca)

As rguas so formatadas por defeito a toda

nota: ter em ateno que o caminho e o nome do ficheiro

no caso de se pretender apresentar a imagem com dimenses diferentes do

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

pode e deve ainda ser adicionada descrio

Dentro do grupo dos formulrios, o HTML oferece os seguintes elementos:

text fields (caixa de input de uma linha)

textareas (reas de texto)

select (caixas de combinao / listagem)

fieldsets (delimitao e agrupamento de campos)

Qualquer formulrio criado em HTML delimitado com as tags <form> (e </form>...)

A tag form tem as seguintes propriedades:

action - ficheiro que ir receber / processar os dados

method - tipo de envio (GET ou POST)

enctype - tipo de dados a ser enviado pode ser de dois tipos:

application/x-www-form-urlencoded - envio apenas de texto

Ex. <form action="formProcessa.php" method="post" enctype="application/x-www-form-urlencoded"

A tag <input type=text> desenha uma caixa de texto

Tem a seguinte propriedade:

size - nmero de caracteres que mostrar antes de desaparecerem

Ex. <input type="text" size="45" name="nome">

A tag <input type=password> desenha uma caixa de texto

Tem a seguinte propriedade:

size - nmero de caracteres que mostrar antes de desaparecerem

Ex. <input type="password" name="passwd" size="45">

Ex. <input type="hidden" name="escondido" value="192.168.1.1">

Ex. <input type="checkbox" name="aceita" value="sim" checked="checked">

Ex. <input type="file" name="foto" >

As tags <input type=submit> e <input type=reset> desenham um boto no formulrio

A nica diferena entre eles apenas o fim a que se destinam.

reset - limpa todos os campos que constam do formulrio

submit - envia os dados do formulrio para o servidor para ser processado

Ex. <input type="submit" name=bt_encomenda value=Encomendar>

S ser enviado para o servidor a opo seleccionada pelo utilizador.

Tem as seguintes propriedades:

cols - nmero de caracteres que mostrar em largura

rows - nmero de linhas que a caixa ter

Ex. <textarea cols="50" rows="5" name="mensagem"> </textarea>

!! ao contrrio das outras caixas

Ex. <fieldset><legend>dados profissionais</legend> ... (campos aqui!) ... </fieldset>

cheat sheet de HTML:

You might also like