DesignInteracao HTML

HTML
PROF. LAET ANDRADE FILHO

laetjr@hotmail.com
HTML
todo documento html tm a

seguinte estrutura bsica:
<html>
<head>
{
{
cabealho
</head>
<body>
corpo
</body>
</html>
delimitadores
estrutura
TAGS
so comandos do html
o documento montado dinamicamente pelo
browser atravs da formatao dos tags
NO so case sensitive, ou seja, tanto faz
maisculo ou minsculo
XHTML:
todas as tags devem ser escritas em letras
minsculas;
estrutura
formao tags
tags so sempre precedidos do sinal

de maior (<) e seguidos de um sinal
de menor (>)
tag de abertura indica onde comea
sua rea de influncia
tag de fechamento indica onde termina
sua rea de influncia
estrutura
formao tags
tags de abertura e fechamento so

iguais, sendo que o de fechamento
precedido pela barra (/)
alguns tags no necessitam ser
fechados
existem tags que no tm o tag de
fechamento
estrutura
formao tags
no pode haver espaos em branco

dentro de tags, exceto entre atributos e
entre aspas
o browser ignora os tags errados, no
gerando um erro na leitura do arquivo
html
XHTML:
as tags devem estar convenientemente aninhadas;

os documentos devem ser bem formados;
o uso de tags de fechamento obrigatrio;
elementos vazios devem ser fechados
estrutura
atributos
alguns tags contm atributos, que

podem ter valores default
dependendo do browser a ser
utilizado, definidos atravs do html
pelo autor da pgina ou por
linguagem script
so sempre colocados no tag de
abertura
estrutura
atributos
devem estar entre aspas () ou ()

case-insensitive, ou seja, tanto
maisculo quanto minsculo
exemplo:
<tag atributo=x>texto
</tag>
XHTML:
Diferenas para a sintaxe dos atributos
estrutura
caracteres esp.
o html no interpreta determinados

caracteres, tal como acentuaes
estes devem ser colocados na pgina
atravs de cdigos especiais
isso se deve a compatibilidade entre as
diversas plataformas (WINDOWS, NT,
UNIX, MAC, etc)
estrutura
caracteres esp.
foram criadas entidades que na

verdade so formas de representar
caracteres especiais
existem:
entidade de caracter (<) <
entidade numrica (<) <
indiferente a utilizao de qualquer

uma das formas
estrutura
caracteres esp.
exemplos:
ã
ã
Ã
Ã
"
&lt
&gt
->
->
->
->
->
->
->
<
>
estrutura
caracteres esp.
exemplos:
ã
â
á
à
ç
->
->
->
->
->
estrutura
comentrios
so extremamente teis para facilitar a

manuteno das pginas
formato:

no necessita de tag de fechamento
estrutura
comentrios
contedo (texto) no
interpretado pelo browser
pode ocupar mais de uma linha
no pode existir espao em
branco entre o sinal de menor e o
sinal de exclamao (<!)
estrutura
tamanhos
o html utiliza tipos de medidas para

especificar a quantidade de algum
atributo
pixels
<table width=100>
percentual
<table width=100%>
estrutura
HTML: cabealho
formado geralmente pelos

seguintes tens:
ttulo da pgina
autor
palavras-chave para pesquisa por
ferramentas de busca (search
engines)
programas script (Java script, CSS,
Jscript, etc.)
estrutura
HTML: cabealho
tags utilizadas:
<head>tags</head>
tag de nicio do cabealho do
documento, com diversas
informaes lgicas. Pode ser
omitido
<title>texto</title>
ttulo da pgina, a ser visualizado na
barra de ttulo do navegador e
colocado como ttulo da pgina nos
sistemas de busca como o Google
estrutura
HTML: cabealho
tags utilizadas:
<link href="css_home4.css"
rel="stylesheet" type="text/css"
title="Primeiro" />
<link rel=shortcut icon"
href="img/a2.ico" />
estrutura
HTML: cabealho
tags utilizadas:
<meta name= content=>
Os Meta Tags ou Meta-informaes ou Metadados consistem em blocos de informaes sobre
a sua pgina que so utilizadas pelo servidor
HTTP (importante para os sistemas de busca
como o GOOGLE)
exemplo:
<meta
name=description
content=pgina>
estrutura
HTML: cabealho
tags utilizadas:
<meta>
Outros exemplos:
<meta name="description" content="Desenvolvimento e criao
de de sites com acessibilidade, usabilidade, web
standards,criatividade, treinamento e consultoria em
desenvolvimento de interfaces web" />
<meta name="keywords" content="design, webdesign,
consultoria, treinamento, criatividade, interface, web Standards,
tableless, acessibilidade, " />
<meta name="author content=fulano@gmail.com.br" />
estrutura
HTML: cabealho
tags utilizadas:
<meta> outros exemplos:
<meta name="robots" content="ALL" />
<meta http-equiv="REFRESH" content="5;
url=http://www.algumlugar.com">
<meta name="robots" content=noindex" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="revisit-after" content="1" />
Voc pode criar o metatag que quiser, porm elas sero
ignoradas pelos sistemas de buscas.
https://developer.mozilla.org/pt-PT/docs/Utilizando_meta_tags
estrutura
HTML: cabealho
tags utilizadas:
<script>cdigo</script>
utilizado para insero de cdigo script
(javascript, vbscript, etc) dentro do
documento html
este tag pode ser utilizado no corpo do html
exemplo:
<script language=javascript>
function escreve()
{ document.write(Horcio); }
</script>
estrutura
HTML: cabealho
tags utilizadas:
<style>cdigo</style>
utilizado para insero de cdigo CSS no
documento html
exemplo:
<style type=text/css>
body{font-family:arial,verdana; }
a{text-decoration:none; color:gray;}
</script>
estrutura
corpo
onde ficam as tags que formaro a

pgina
formato:
<body atributos= >
tags que compem a pgina
</body>
estrutura
corpo
<body
background=arquivo
bgcolor=#RRGGBB
text=#RRGGBB
link=#RRGGBB
vlink=#RRGGBB
alink=#RRGGBB
leftmargin=valor (marginwidth)
topmargin=valor (marginheight) >
W3C todas as
caractersticas ligadas
a apresentao do
documento (layout)
devem ser aplicadas
via CSS.
Separao de
ESTRUTURA da
APRESENTAO
formatao
Header
(elemento de BLOCO)
indica que o texto influenciado um

header (cabealho)
tm 6 nveis, sendo que o nvel 1
<h1> o que tm o maior tamanho
de fonte
formato:
<h1>texto</h1>
<h2>texto</h2>
Sua correta aplicao importante para
acessibilidade e sistemas de busca
formatao
paragraph
(elemento de BLOCO)
indica que o texto influenciado um

pargrafo. Cria um espao entre o
pargrafo e o prximo elemeto.
formato:
<p align=tipo>texto</p>
atributo
align=center|left|right|
justify
links
Tipos de links
(elemento inline de linha)
links so elementos que

permitem a ligao entre
diferentes pginas html
estas ligaes podem ser feitas
de 3 formas:
link interno
link externo
link para um e-mail
anchor
links
tag utilizado para criar links, seja

internos ou externos
formato:
<a href =pgina, rea de uma pgina
ou endereo de e-mail name
=nome title=descrio do link>
texto, imagem, som, etc
</a>
links
link interno
link para uma determinada

parte de uma pgina
formato:
<a name=#nome></a> (posicione este TAG na
posio do documento que deseja criar um link)
<a href=#nome>
texto do link que apontar para o link interno
</a>
links
Link externo
link para uma outra pgina, seja esta uma

do site ou uma externa ao site
formato:
<a href=pgina.html> (endereo relativo)
texto, imagem, som, etc </a>
<a href=http://www.teste.com.br/pagina.html>
(endereo absoluto)
texto, imagem, som, etc </a>
links
link e-mail
link para um endereo de e-mail, onde

uma vez clicado, abrir o programa de email configurado na mquina
formato:
<a href =mailto:laet@hotmail.com>
texto do link
</a>
imagens
img
tag utilizado para inserir uma imagem

serve para todos os formatos de
arquivos, inclusive para GIF animados
imagens
formato:
<img src=arquivo
width=valor
height=valor
border=valor
align=tipo
hspace=valor
vspace=valor
alt=texto>
img
Listas
Utilizar listas uma boa forma de organizar as
pginas Web. As listas podem servir como
resumos ou ndices de todo o site, contendo
links para outras pginas.
Basicamente existem trs tipos de listas:
- Listas No Ordenadas;
- Listas Ordenadas ou Numeradas;
- Listas Descritivas.
Listas
No Ordenadas
TAG <UL>
Permite inserir na pgina um texto de tpicos com

marcadores de tipos diferentes.
Sintaxe:
<UL TYPE=formato>
<LI>Tpico 1</LI>
<LI>Tpico 2</LI>
</UL>
Listas
No Ordenadas
TAG <UL>
Onde:
<UL>: Inicio da Lista No Ordenada.
TYPE=formato: Indica o formato do marcador.
Pode ser:
disc: O marcador um ponto. Este o padro;
square: O marcador um quadrado;
circle: O marcador um crculo.
<LI>: Tpicos da lista. No h limites.
</UL>: Fim da Lista No Ordenada.
Listas
Ordenadas
TAG <OL>
Permite inserir na pgina uma lista numrica ou

alfabtica, com valor predefinido ou no.
Sintaxe:
<OL TYPE=formato START=n>
<LI>Tpico 1</LI>
<LI>Tpico 2</LI>
</OL>
Listas
Ordenadas
TAG <OL>
Onde:
<OL>: Incio da Lista Ordenada.
TYPE=formato: Indica o formato da
numerao. Pode ser:
1: lista numrica padro;
A: lista alfabtica com letras maisculas;
a: lista alfabtica com letras minsculas;
I: lista numrica com nmeros romanos
maisculos;
i: lista numrica com nmeros romanos
minsculos.
Listas
Ordenadas
TAG <OL>
START=n: O valor inicial da lista numerada.

<LI>: Tpicos da lista. No h limites e no
necessrio a TAG </LI>.
</OL>: Fim da Lista Ordenada.
Listas
Descritivas
TAG <DL>
As listas descritivas so diferentes das outras

listas. Cada item de uma lista descritiva possui dois
componentes: um tpico e uma descrio do
tpico.
Listas
Descritivas
TAG <DL>
As listas descritivas so diferentes das outras listas.

Cada item de uma lista descritiva possui dois
componentes: um tpico e uma descrio do tpico.
Sintaxe:
<DL>
<DT>Tpico 1
<DD>Descrio do Tpico 1
<DT>Tpico 2
<DD>Descrio do Tpico 2
</DL>
Listas
Descritivas
TAG <DL>
Onde:
<DL>: Incio da Lista Descritiva.
<DT>: Tpico da Lista Descritiva. No h limite e
no necessrio a TAG </DT>.
<DD>: Descrio da lista. Para cada TAG <DT>
existe uma TAG <DD>.
</DL>: Fim da Lista Descritiva.
Tabelas
table
<TABLE> </TABLE>
Esta tag indica o nicio e o fim da tabela. O
atributo border insere uma borda para marcar
a diviso das clulas.
<TR> </TR>
Esta tag indica as linhas da tabela.
<TD> </TD>
Esta tag indica as clulas contidas em cada
linha da tabela. nesta tag que inserimos os
dados que sero exibidos na tabela.
Tabelas
table
<TH> </TH>
Esta tag define os ttulos de uma tabela,
podendo ser utilizado em qualquer clula. A
diferena entre a tag <TD></TD> e a tag <TH>
<TH> que o contedo inserido entre as tags
<TH></TH> ser exibido em negrito.
<CAPTION> </CAPTION>
Esta tag insere a legenda da tabela. Deve ser
inserida entre as tags <TABLE> </TABLE>.
Tabelas
table
Formulrios
Formulrios
O que so?
formulrios so controles que

permitem a troca de informaes
entre o usurio e o servidor http
o usurio preenche os vrios tipos
de controles de formulrios e os
envia para o servidor atravs do
protocolo http
Formulrios
Como funcionam?
atravs dos vrios tipos de

controles de formulrios
(radiobutton, checkbox, text
area, etc), o usurio preenche o
formulrio com as opes
vlidas para o mesmo e, atravs
do controle BUTTON, as envia
para o servidor que processa as
informaes recebidas.
Formulrios
Como funcionam?
todos os controles que estiverem

dentro da rea de influncia do tag
<form> tero as suas informaes
enviadas ao servidor em um pacote
de dados
o servidor, atravs de um programa
em linguagem script, ter a misso de
gravar o pacote de dados em um
banco de dados
Formulrios
< form >
tem como funo definir a rea de influncia dos controles de formulrios

pode tambm, dentro de sua rea de influncia, receber quaisquer outros
tipos de tags html
formato:
<form action=url
method=tipo>
<controles ...>
<tags html...>
</form>
Formulrios
< form >
<form ...>
action=url
o nome do arquivo no servidor
que receber as informaes do
formulrio
Formulrios
< form >
<form ...>
method=tipo
tipo de mtodo http que ser
utilizado para as informaes
serem enviadas ao servidor
GET
POST
Formulrios
< input >
tag utilizado para a insero de

controles de formulrio html
insere :
textfield
password
radiobutton, checkbox
submit e reset buttons
Formulrios
< input >
formato:
<input type=tipo
{!-- aps escolher o tipo,
os atributos restantes
sero referentes a
este tipo --}
>
Formulrios
< label >
A tag label define um rtulo para um

elemento input.
O atributo "for" da tag label deve
referenciar o atributo "id" da tag da
qual o rtulo.
<label for="nm">Nome</label>
<input type="text" name="nome"
id="nm" />
Formulrios
textfield
cria uma rea de somente uma

linha onde poder ser digitado
um texto
formato:
<input type=text
name=texto
value=texto
size=valor>
Formulrios
textfield
<input type=text ...>

type=text
define formulrio tipo text
name=texto
nome lgico do campo
Formulrios
textfield
<input type=text ...>

value=texto
- texto que aparece dentro do
campo
size=valor
- tamanho do campo, em
caracteres
Formulrios
password
cria uma rea de uma linha

onde poder ser digitado uma
password
formato:
<input type=password
name=texto
size=valor
maxlenght=valor>
Formulrios
radiobutton
cria um controle radiobutton

formato:
<input type=radio
name=texto
value=texto
checked>
texto identificador
Formulrios
checkbox
cria um controle checkbox

formato:
<input type=checkbox
name=texto
value=texto
checked>
texto identificador
Formulrios
buton
cria um boto de submit, reset

ou outro qualquer
formato:
<input type=tipo
name=texto
value=texto
>
Formulrios
buton
<input type=submit ...>

type=submit
cria um boto que serve para
enviar os dados do formulrio
para o servidor
name=texto
nome lgico do campo
Formulrios
buton
<input type=reset ...>

type=reset
cria um boto que serve para
apagar os dados de todos os
campos do formulrio
name=texto
nome lgico do campo
Formulrios
< textarea >
cria uma rea de x linhas por y

colunas para insero de texto
<textarea name=nome
rows=valor
cols=valor>
texto que aparece dentro
</textarea>
Formulrios
< select >
cria um controle onde pode ser

escolhido um (list ou menu) ou
mais tens dentro (list) de uma
lista
Formulrios
< list >

escolhido um ou mais tens
dentro de uma lista
<select name=select
size=valor
multiple>
<option>texto</option>
</select>
Formulrios
< menu>

escolhido um tem dentro de
uma lista
<select name=select>
<option>texto</option>
</select>
Formulrios
Elementos identificadores:
id e class
Definies dos atributos

id = nomedoelemento
Atribui um nome(nico) a um elemento.
class = nomedaclasse
Atribui um nome(vrios) ou um conjunto
de nomes de classe a um elemento.
Os nomes mltiplos de classe tero de ser
separados por espaos em branco.
Atributo ID
O atributo ID desempenha vrios papeis no

HTML, por exemplo:
Como selector das folhas de estilo.
Para fins de processamento geral pelos
agentes usados pelos os usurios (ex: para
identificar os campos sempre que se quiser
extrar dados das pginas de HTML para
uma base de dados, traduzir documentos
HTML para outros formatos, etc.).
EXERCCIO

DesignInteracao HTML

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

DesignInteracao HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML

PROF. LAET ANDRADE FILHO

todo documento html tm a

tags so sempre precedidos do sinal

tags de abertura e fechamento so

no pode haver espaos em branco

as tags devem estar convenientemente aninhadas;

alguns tags contm atributos, que

devem estar entre aspas () ou ()

o html no interpreta determinados

foram criadas entidades que na

indiferente a utilizao de qualquer

so extremamente teis para facilitar a

no necessita de tag de fechamento

o html utiliza tipos de medidas para

formado geralmente pelos

onde ficam as tags que formaro a

indica que o texto influenciado um

indica que o texto influenciado um

links so elementos que

(elemento inline de linha)

tag utilizado para criar links, seja

link para uma determinada

link para uma outra pgina, seja esta uma

link para um endereo de e-mail, onde

tag utilizado para inserir uma imagem

Permite inserir na pgina um texto de tpicos com

Permite inserir na pgina uma lista numrica ou

START=n: O valor inicial da lista numerada.

As listas descritivas so diferentes das outras

As listas descritivas so diferentes das outras listas.

formulrios so controles que

atravs dos vrios tipos de

todos os controles que estiverem

< form >

tem como funo definir a rea de influncia dos controles de formulrios

< form >

< form >

< input >

tag utilizado para a insero de

< input >

< label >

A tag label define um rtulo para um

cria uma rea de somente uma

<input type=text ...>

<input type=text ...>

cria uma rea de uma linha

cria um controle radiobutton

cria um controle checkbox

cria um boto de submit, reset

<input type=submit ...>

<input type=reset ...>

< textarea >

cria uma rea de x linhas por y

< select >

cria um controle onde pode ser

< list >

cria um controle onde pode ser

cria um controle onde pode ser

Definies dos atributos

O atributo ID desempenha vrios papeis no

Vous aimerez peut-être aussi