HTML

Introducao Introducao linguagem HTML Formatacao de texto Referenciamento Tabelas e *frames

Programacao para WebHTML

Ivo Calado

Instituto Federal de Educacao, Ciencia e Tecnologia de Alagoas

20 de Marco de 2012

1 / 85 Ivo Calado IFAL

Programacao para Web


Roteiro

1 Introducao

2 Introducao linguagem HTML

3 Formatacao de texto

4 Referenciamento

5 Tabelas e *frames




O que e Internet?

O que e Internet?

Estamos acostumados a ouvir que...

Internet e a “grande rede mundial de computadores”

Entretanto, essa definicao nao e exata...

Internet e “o conjunto de diversas redes de computadores que secomunicam atraves dos protocolos TCP/IP”




O que e World Wide Web?

O que e a World Wide Web?

Definicao

E um sistema de documentos hipertexto inteligados atraves dehiperlinks

Qual a diferenca entre WWW e a Internet?

Internet e toda a infraestrutura de rede, enquanto que a WWW eapenas um servico provido.

Quais seriam outros exemplos de servicos providos pela Internet

Email, FTP, P2P, transmissoes multimıdia etc





Definicao de Hipertexto I

Conjunto de documentos que fazem referencia entre si,possibilitando navegacao entre os diferentes topicos

A partir da interreferencia entre as diversas paginas e criadouma malha de inteconexoes (de onde vem o termo Web).





Definicao de Hipertexto II

O conceito de hipertexto nao e unico da WWW. Ele e bemanterior a Internet.

Qual seria um outro exemplo de Hipertexto?

O dicionario! Nodicionario os termos existentes se auto-referenciam





Definicao de Hipertexto II

O conceito de hipertexto nao e unico da WWW. Ele e bemanterior a Internet.

Qual seria um outro exemplo de Hipertexto? O dicionario! Nodicionario os termos existentes se auto-referenciam




Historia

Como surgiu a WWW?

Criado entre os anos de 1989-1991 (proposicao do projeto,desenvolvimento e apresentacao publica)

Criado pelo fısico Tim Berners-Lee que ainda se mantem nocomite para o desenvolvimento da WWW, chamado W3C

A ideia original era criar uma infraestrutura para acesso adocumentos em uma abordagem de comunicacaocliente-servidor.

Mas o que seria uma abordagem cliente-servidor?

Trata-se de uma abordagem de comunicacao em que umamaquina, chamada servidora, disponibiliza recursos a seremacessados por outras maquinas, chamadas de clientes.




Historia

Modelo cliente-servidor




Conceitos importantes

Tres conceitos sao de fundamental importancia no estudo daWWW: HTTP, URL e HTML

A partir dessas 3 ferramentas, os recursos podem ser acessados naWeb fazendo-se uso de programas conhecidos como Browsers





HTTP

Abreviacao de Hypertext Transfer Protocol

Trata-se de um protocolo de camada de aplicacao, utilizadopara recuperacao de recursos na Internet

Diferentemente do TCP, o protocolo HTTP e umprotocolo textual (ou human-readable)

Possui um conjunto limitado de operacoes possıveis: GET,POST, PUT, HEAD etc.

Ver Wireshark...





Contextualizando...

O que sao protocolos da camada de aplicacao?

Sao protocolos responsaveis por prover servicos as aplicacoes

Representam a 7ª camada no modelo OSI ou a 5ª no modeloTCP/IP

Normalmente sao os protocolos que diretamente saoacessados pelas aplicacoes

Outros exemplos de protocolos incluem: FTP, SSH, Bitorrentetc.





O que e um protocolo textual?

Sao protocolos que apresentam uma estrutura textual nas suasdescricoes de mensagens





URL

Abreviacao de Uniform Resource Locator

E uma forma padrao para representacao da localizacao de umrecurso

Pode ser utilizado por diversos protocolos (inclusive o HTTP)para identificar um recurso remoto

Possui o seguinte formato:protocolo://maquina/caminho/recurso





HTML

Linguagem de marcacao para transmitir documentosformatados atraves da redeTrata-se de uma das formas mais basicas de transmissao deinformacao pela WebConteudo e considerado estatico

Nao e uma linguagem de programacao!!!

Conteudo Estatico x Conteudo Dinamico

No conteudo estatico as paginas HTML criadas previamente esao apenas requisitadas

No conteudo dinamico, ha uma requisicao por uma pagina e apagina HTML e gerada em tempo real e entregue aorequisitante





HTML

Linguagem de marcacao para transmitir documentosformatados atraves da redeTrata-se de uma das formas mais basicas de transmissao deinformacao pela WebConteudo e considerado estaticoNao e uma linguagem de programacao!!!

Conteudo Estatico x Conteudo Dinamico

No conteudo estatico as paginas HTML criadas previamente esao apenas requisitadas

No conteudo dinamico, ha uma requisicao por uma pagina e apagina HTML e gerada em tempo real e entregue aorequisitante




Historia

Historia

A linguagem HTML foi desenvolvida em 1990 a partir de doispadroes existentes:

SGML: padrao que possibilitava a formatacao de texto

HyTime: padrao para representacao de documentoshipertextos

A partir da uniao das funcionalidades do SGML e HyTime foipossıvel a criacao do HTML. Atualmente o HTML esta na versao5.0 (draft) e sua especificacao pode ser encontrada emhttp://www.w3.org/TR/html5/



http://www.w3.org/TR/html5/


Primeiros passos

Nossa primeira pagina HTML

Crie um arquivo texto com a seguinte estrutura:

<HTML><HEAD>

<TITLE>Minha p r i m e i r a p a g i n a</TITLE></HEAD><BODY>

H e l l o World</BODY>

</HTML>

Salve o arquivo com extensao .html ou .htm e abra-o com onavegador padrao (ex.: firefox index.html)




Primeiros passos

Estrutura hierarquica da pagina

HTML|\−HEAD| || \−TITLE| || \−" Tıtulo da pagina "|\−BODY|" Corpo do documento "




Primeiros passos

Estrutura da pagina HTML

Formado por tags que especificam a estrutura e a formatacaodo documento

Possui como elemento inicial a tag HTML

As tags HTML nao sao sensıveis a caixa. Traduzindo: tantofaz escrever <HTML>, <Html>, <html>, <HtMl>, ...

Mas o que sao tags

Sao elementos de formatacao da linguagem HTML. A partir delase possıvel definir a formatacao de algumas porcoes de texto




<Head>

Secao Head

O elemento HEAD contem informacoes sobre o documento.

Nele, o tıtulo da pagina pode serO elemento ¡TITLE¿, porexemplo, define um tıtulo, que e mostrado no alto da janelado browser.

<HEAD><TITLE>Nossa primeira pagina</TITLE></HEAD>




<Head>

Sobre o tıtulo da pagina

Todo documento WWW deve ter um tıtulo

Esse tıtulo e referenciado em buscas pela rede, dando umaidentidade ao documento

Para ver na pratica a importancia do tıtulo, se voce adicionara pagina criada aos favoritos do seu navegador o tıtulo dapagina sera usado como ancora de acesso

E sugerido que os tıtulos dos documentos sejam sugestivos,evitando-se tıtulos genericos como “Introducao”




<Head>

Campos META

Alem do tıtulo, <HEAD> contem outras informacoes deimportancia para os robos de pesquisa, indicadas nos campos<META>Os campos <META> tem dois atributos principais:

NAME, indicando um nome para a informacao

HTTP-EQUIV, que faz uma correspondencia com campos decabecalho do protocolo HTTP (ex.: definir a codificacaoutilizada)




<Head>

Exemplo META

<HEAD><META HTTP−EQUIV="content - type " CONTENT=" text / html ;

charset =iso -8859 -1"><TITLE>T u t o r i a l HTML</TITLE>

<META NAME=" Author " CONTENT="Ivo Calado - ivo.calado@ee . ufcg .edu.br">

<META NAME=" Generator " CONTENT=" Namo WebEditor v5 .0"><META NAME=" Description " CONTENT=" Manual de

referencia para webdesigners e desenvolvedores desites ">

<META NAME=" KeyWords " CONTENT="HTML , WWW ,Webpublishing , Internet , Webdesign ">

</HEAD>




<Head>

Ainda sobre a tag META...

Alguns valores dos atributos META NAME sao inseridosautomaticamente por alguns editores, por exemplo: Generatore Author.

Os campos Description e KeyWords ajudam a classificacaoda pagina em algumas ferramentas de busca.

As informacoes nas tags META nao tem qualquer efeito naapresentacao da pagina, mas servem como uma explicacao oudocumentacao sobre as informacoes contidas nela.




<Head>


Ha poucos valores para META HTTP-EQUIV em uso

Os parametros mais utilizados sao content-type e Refresh

content-type

Indica a codificacao que o browser deve utilizar para decodificar odocumento recuperado. Existem diversos padroes de codificacaocomo UTF-8 e ISO 8859-1




<Head>


Refresh

Define uma URL a ser carregada apos a expiracao de um perıodoespecıfico

<HEAD><TITLE> . . . </TITLE><META HTTP−EQUIV=" Refresh " CONTENT=" segundos ; URL=

pagina . html "></HEAD>

onde,

pagina.html e a pagina a ser carregada automaticamentesegundos e o numero de segundos passados ate que a paginaindicada seja carregada




<Head>


Ver exemplo Refresh...

Mas quando um recurso como refresh deveria ser utilizado?

Em situacoes onde o conteudo da pagina necessita ser atualizadoconstantemente, como em uma pagina de chat




<Body>

Secao Body

O objetivo da secao Body e conter o conteudo que sera, defato, visualizado pelo usuario

Deste modo e possıvel adicionar cabecalhos, paragrafos, listas,tabelas, links para outros documentos, imagens, formularios,animacoes, vıdeos, sons e scripts embutidos.




Atributos

Atributos da Secao Body

<BODY BGCOLOR="# rrggbb " TEXT="# rrggbb " LINK="# rrggbb "ALINK="# rrggbb " VLINK="# rrggbb " BACKGROUND="URL">

Bgcolor: cor de fundo (quando nao e indicada, o browser iramostrar uma cor padrao, geralmente o cinza ou branco; algunseditores poderao estabelecer o branco para o fundo da pagina)

Text: cor dos textos da pagina (padrao: preto)

Link: cor dos links (padrao: azul)

Alink: cor dos links, quando acionados (padrao: vermelho)

Vlink: cor dos links, depois de visitados (padrao: azul escuroou roxo)




Atributos


Seus valores sao dados em hexadecimal, equivalentes a cores nopadrao RGB (Red, Green, Blue).

Como definir a cor a ser utilizada?

Existem tabelas de cores com esses valores, comohttp://immigration-usa.com/html_colors.html. Alem disso, apartir da versao HTML 3.2, uma serie de constantes foramdefinidas para facilitar (aqua, black, blue, fuchsia, gray, green,lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)



http://immigration-usa.com/html_colors.html


Atributos


Background: Indica a URL da imagem a ser replicada nofundo da pagina, como uma marca d’agua.




Cabecalhos, separadores e listas

Cabecalhos

Ha seis nıveis de cabecalhos em HTML, de <H1> a <H6>:

<H1>E s t e e um c a b e c a l h o de n ı v e l 1</H1><H2>E s t e e um c a b e c a l h o de n ı v e l 2</H2><H3>E s t e e um c a b e c a l h o de n ı v e l 3</H3><H4>E s t e e um c a b e c a l h o de n ı v e l 4</H4><H5>E s t e e um c a b e c a l h o de n ı v e l 5</H5><H6>E s t e e um c a b e c a l h o de n ı v e l 6</H6>

O proposito dos cabecalhos e possibilitar a demarcacao de secoesno texto





Aninhamento de cabecalhos

Os cabecalhos nao podem ser aninhados, isto e, a formatacao:

<H2>E s t e e <H1>um c a b e c a l h o de n ı v e l 1</H1> d e n t r o deum c a b e c a l h o de n ı v e l 2</H2>

O que acontece com formacoes dessa forma?

pode produzir redutados diferentes dependendo de como o browserinterprete, visto que ele pode adotar duas abordagens:

Considerar o aninhamento, ou (caso do firefox)

Considerar que o programador esqueceu de fechar o primeirocabecalho H2 e de abrir o segundo cabecalho H2 (caso doOpera)





Alinhamento de cabecalhos

E possıvel alinhas os cabecalho (em relacao as margens direita,esquerda ou centro) a partir do uso de atributos dos cabecalhos...Ex.:

<H2 ALIGN=CENTER>Cabe ca lho c e n t r a l i z a d o</H2><H3 ALIGN=RIGHT>Cabe ca lho a l i n h a d o a d i r e i t a</H3><H4 ALIGN=LEFT>Cabe ca lho a l i n h a d o a e s q u e r d a ( d e f a u l t )

</H4>





O que acontece quando usamos a quebra de linha em umdocumento HTML? (abrir exemplo separadores/index.html emeditor de texto)

Nada, pois os Browsers desconsideram tais quebras de linha unindoo texto... (ver novamente o exemplo, agora no browser). Sendoassim para organizar os textos, precisamos de separadores!!

Existem diferentes separadores possıveis:

<Br>

<P>

<HR>





<Br>

Quando queremos mudar de linha, usamos o elemento <BR>

Isso so e necessario quando queremos uma quebra de linha emdeterminado ponto, pois os browsers ja quebram as linhasautomaticamente para apresentar os textos. (exemplobr.html)

Deste modo e possıvel inserir diversas linhas no nossodocumento...

U t i l i z a n d o o <BR> e lemento BR <BR><BR><BR> e <BR>p o s s ı v e l <BR><BR> a d i c i o n a r d i v e r s a s l i n h a s <BR><BR><BR><BR> no documento





<P>

Para separar blocos de texto, usamos o elemento <P>

P a r a g r a f o 1 ;<P>P a r a g r a f o 2 .

que possui como efeito a criacao de um paragrafo

Combinandoparagrafos e quebras de linha, podemos construir estruturas maisorganizadas de texto como o apresentado no exemploseparadores/paragrafo.html





<P>

Para separar blocos de texto, usamos o elemento <P>

P a r a g r a f o 1 ;<P>P a r a g r a f o 2 .

que possui como efeito a criacao de um paragrafo Combinandoparagrafos e quebras de linha, podemos construir estruturas maisorganizadas de texto como o apresentado no exemploseparadores/paragrafo.html





Atributos da tag <P>

Assim como nos cabecalhos, a tag P possibilita o alinhamentoa partir da utilizacao do parametro ALIGN

<P ALIGN=CENTER>Assim como os t r e n s , as boas i d e i a s a sv e z e s chegam com a t r a s o . <BR>( G i o v a n i G u a r e s c h i )<

/P>





Listas

Uma das formas mais comuns de estruturar uma porcao de umdocumento e no formato de listas. Nesse sentido, existem diversasmaneiras de estruturar o documento no formato de listas emHTML, sendo as mais conhecidas:

Listas de Definicao ou Listas de glossario

Listas nao-numeradas: sao equivalentes as listas commarcadores do MS Word

Listas Numeradas





Listas de definicoes

Esta classe de lista sao chamadas tambem de “Listas deGlossarios”, uma vez que tem o formato semelhante ao utilizadoem estruturas de glossarios. Ex.:

termo a s e r d e f i n i d od e f i n i c a o

termo a s e r d e f i n i d od e f i n i c a o

Este tipo de lista e muito utilizado para diversos efeitos deorganizacao de paginas, por permitir a tabulacao do texto.





Listas nao-numeradas

Sao equivalentes as listas com marcadores do MS Word:

<UL><LI>i t em de uma l i s t a<LI>i t em de uma l i s t a , que pode s e r t ao grande quanto

s e q u e i r a , sem que s e j a n e c e s s a r i o s e p r e o c u p a rcom a f or ma ta c ao das margens de t e x t o

<LI>i t em</UL>

UL: Define o inıcio da lista

LI: Define um novo item





Listas nao-numeradas

Em listas nao-numeradas e possıvel a adicao de subnıveis

Para tal, adiciona-se novos elementos UL

Exemplo:

<UL><LI>N ı v e l

<UL><LI>S u b n ı v e l

</UL><LI>N ı v e l 2</UL>





Alterando o indicador da lista

Um recurso disponıvel e a escolha de qual sera o marcadorutilizado para identificar os itens. Por default o proprio browser faza escolha de acordo com o nıvel da lista, porem e possıvel fazer umcontrole mais apurado. Para isso basta fazer uso dos atributosdisc, circle e squareExemplo:

<UL><LI TYPE=DISC>um item<LI TYPE=CIRCLE>mais um item<LI TYPE=SQUARE>u l t i m o i tem

</UL>





Listas Numeradas

Nas listas numeradas e possıvel fazer a adicao de diversos itens aserem representados de maneira ordenada.

<OL><LI>i t em de uma l i s t a numerada<LI>i t em de uma l i s t a numerada , que pode s e r t ao grande

quanto s e q u e i r a<LI>i t em de l i s t a numerada</OL>

1 item de uma lista numerada2 item de uma lista numerada, que pode ser tao grande quanto

se queira3 item de lista numerada




Blocos de texto e Frases

Blocos de texto: PRE

Ate agora, sempre que criamos um arquivo HTML o browserfica responsavel pelo espacamento e quebra de linhasVer exemplo bloco texto

Mas e se desejassemos que o texto fosse exibido como digitado?

Para isso fazemos uso da tag <PRE>

Estrutura

<pre>t e x t o a s e r e x i b i d o . . .</ pre>





Blocos de texto: PRE

Mas quais os riscos de se utilizar a tag PRE?

Dispositivos com diferentes resolucoes de tela!Rever exemplos...





Blocos de texto: Blockquote e Address

A tag Blockquote possibilita a estruturacao de textos no formatode citacoes longas:

<blockquote>A massa do S o l a r q u e i a o espaco−tempo det a l mane i ra que , a i n d a que a Ter ra s i g a umat r a j e t o r i a r e t a no espaco−tempo q u a d r i d i m e n s i o n a l, parece−nos que s e d e s l o c a em o r b i t a c i r c u l a r no

espa co t r i d i m e n s i o n a l .</ blockquote> ( Stephen W.Hawking , "Uma Breve Historia do Tempo " )

Por sua vez a tag address estrutura o conteudo no formato deendereco de email.

E n v i e c r ı t i c a s e s u g e s t o e s para <address> i v o . ca lado@ee. u f c g . edu . br</ address>





Estilos fısicos e logicos

A linguagem HTML permite dois tipos de estilos de formatacoes:fısico e logico

Estilo fısico: a formatacao fısica especifica explicitamente oestilo que se quer para o texto: italico, grifado etc. Suaapresentacao final nao sofre grande alteracao entre osnavegadores

Estilo logico: a formatacao logica segue o significado logicodo texto marcado. Deste modo, sua interpretacao dependegrandemente de cada navegador





Estilos fısicos

<b> => Texto em negrito

<I> => Texto em italico

<TT> => Texto monoespacado (espaco entre letrasreduzido)

<U> => Texto sublinhado

<strike> => Texto riscado

<big> => Texto um pouco maior

<small> => Texto um pouco menor

<sub> => Frase em estilo indice , como em H2O

<sup> => Frase em estilo expoente , como em Km2




Caracteres especiais

Problematica

Alguns caracteres como <, >, & tem significados nalinguagem e nao podem ser usados diretamente

HTML foi originalmente desenvolvido tendo como base atabela ASCII (sem caracteres especiais)

Neste sentido, a utilizacao de tais caracteres requerem o usode um sistema de codificacao especıfica

Qual seria a definicao de sistema de codificacao e quais seriam osexemplos?

UTF-8, ISO8859-1, latin1 ...





Exemplos de codificacao

&alt; ==> <

> ==> >

& ==> &

á ==> a

â ==> a

Lista completa:http://www.degraeve.com/reference/specialcharacters.php



http://www.degraeve.com/reference/specialcharacters.php



Outra abordagem...

Alem dessa abordagem, vimos uma abordagem anterior maissimples, qual e ela?

<META HTTP−EQUIV="Content - Type "CONTENT=" text / html ; charset =ISO -8859 -1">

A abordagem de caracteres especiais era mais utilizada emnavegadores antigos




Cores e fontes

Cores

As cores sao introduzidas atraves do elemento FONT, usandoo sistema RGB

A mesma tabela de cores que vimos pode ser utilizada para asfontes Os valores definidos neste elemento sobrescrever osatributos do elemento body

<FONT COLOR="# rrggbb ">Texto</FONT>




Cores e fontes

Tamanho

Um outra forma de manipulacao possıvel e a alteracao dotamanho da fonte

Fazemos uso tambem do elemento FONT, porem utilizando oatributo size

O tamanho 3 e o valor default

Pode ser utilizado valores absolutos ou relativo ao default

<FONT SIZE=−2>Qual e e s s e tamanho ?</FONT><FONT SIZE=+2>E e s s e ?</FONT>

<FONT SIZE=2>e e s s e o u t r o ?</FONT>




Cores e fontes

Fontes

Ate agora, sempre utilizamos a mesma fonte

Porem, e possıvel customizar a fonte a ser utilizada

Novamente fazemos uso da tag FONT, mas com o atributoface

<FONT FACE=" Verdana " COLOR=" #0000 AA">Fonte Verdana a z u l</FONT>

<FONT FACE=" Arial " COLOR="#00 AA00 ">Fonte A r i a l v e r d e</FONT>

<FONT FACE=" Courier New" COLOR="# AA0000 ">Fonte C o u r i e rNew v e r m e l h a</FONT>




Links

Usando links

Um dos mais importantes recursos do HTML e a capacidadede referenciar outros documentos

Alem disso e possıvel fazer referencia a pontos dentro doproprio documento (chamado ancoras)

Tudo isso e possıvel atraves da tag <a>

<A HREF = "www. google .com">meu l i n k</A>




Links

Links

Alem disso, os seguintes atributos podem ser utilizados:

href: indica a URL que sera carregada

target: indica o frame em que sera carregado. Possibilita aabertura do link em uma nova pagina atraves do valor blank

name: marca um ponto de referencia a ser utilizado comoancora. Geralmente e utilizado em paginas Web longas parapossibilitar um retorno para um ponto especıfico

<A NAME=" inicio "> I n d i c a d o r e s ( uso de l i n k s )</A><A HREF="# inicio ">Topo do documento</A>




Insercao de imagens

Inserindo imagens

Para insercao de imagens fazemos uso da tag img, com osseguintes parametros

src: indica a url para a imagem a ser carregada

alt: texto a ser exibido caso a imagem nao possa ser carregada

width: largura da imagem

height: altura da imagem

border: define a largura da linha que circunda a imagem

Exemplo:

<IMG SRC = " http :// library . thinkquest .org /15074/ media /html2 .gif">




Tabelas

O que sao?

As tabelas foram uma das primeiras abordagens utilizadaspara a organizacao das paginas Web

A ideia original era organizar a pagina Web como uma grade,onde cada parte do documento se encaixava em celulasespecıficas

Deste modo, torna-se possıvel a insercao de textos,paragrafos, imagens, formularios, e varias outras formatacoes,inclusive outras tabelas!!




Tabelas

Elementos basicos

Para construcoes de tabelas, os seguintes elementos sao utilizados:

Table: elemento que delimita uma tabela. Contem como umdos atributos border para indicar apresentacao de borda:

<TABLE BORDER=" borda ">. . .</TABLE>

Tıtulos, linhas e elementos:

Caption: define o tıtulo da tabela

Tr: delimita uma linha

Th: delimita um cabecalho para colunas ou linhas

Td: delimita um elemento ou celula59 / 85 Ivo Calado IFAL



Tabelas

Exemplo de tabela

<TABLE BORDER=4><CAPTION>P r i m e i r o exemplo</CAPTION><TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR><TR><TD> l i n h a 1 , c o l u n a 1</TD><TD> l i n h a 1 , c o l u n a 2</TD

></TR><TR><TD> l i n h a 2 , c o l u n a 1</TD><TD> l i n h a 2 , c o l u n a 2</TD

></TR></TABLE>




Tabelas

Mesclando colunas e celulas

Uma das tarefas mais comuns ao se trabalhar com tabelas e apossibilidade de mesclar varias colunas ou celulas em umunico elementoPara tal, sao utilizados os atributos Colspan e rowspan

<TABLE BORDER=1><TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR><TR><TD> l i n h a 1 , c o l u n a 1</TD><TD> l i n h a 1 , c o l u n a 2</TD

></TR><TR><TD> l i n h a 2 , c o l u n a 1</TD><TD> l i n h a 2 , c o l u n a 2</TD

></TR><TR><TH ROWSPAN=3>3 l i n h a s</TH><TD>uma l i n h a</TD></TR><TR><TD>duas l i n h a s</TD></TR><TR><TD> t r e s l i n h a s</TD></TR></TABLE>




Tabelas

Criando tabelas sem bordas

Ate aqui, trabalhamos com tabelas que apresentam bordasdas celulas

Porem, e possıvel eliminar as bordas, tornando a visualizacaomais “limpa”

Para tal, basta definir o atributo border para “0”

<TABLE BORDER="0">. . .</TABLE>




Tabelas

Alinhamento

Um outro recurso, bastante interessante e a possibilidade dealinhamento do conteudo dentro de cada celula. Por padrao, oalinhamento segue as seguintes regras:

no sentido horizontal: alinhamento a esquerda

no sentido vertical: alinhamento no centro da celula

As linhas e celulas podem ter alinhamentos definidos atraves dosatributos:

ALIGN: alinhamento horizontal

VALIGN: alinhamento vertical




Tabelas

Exemplo

<TABLE BORDER=1><TR><TD>Padrao</TD><TD a l i g n= l e f t>a l i g n= l e f t</TD><TD

a l i g n=center>a l i g n=c e n t e r</TD><TD a l i g n=r i g h t>a l i g n=r i g h t</TD>

</ t r><TR><TD>Padrao</TD><TD v a l i g n=top>v a l i g n=top</TD><TD

v a l i g n=m i d d l e>v a l i g n=m i d d l e</TD><TD v a l i g n=bottom>v a l i g n=bottom</TD>

</ t r></TABLE>




Tabelas

Alinhamentos combinados e de linha

Ha duas formas de customizar o processo de alinhamento que sao:

Combinar alinhamento: realizado a partir da utilizacao doselementos align e valign em um unico elemento td

Alinhamento de linha: que e aplicar o processo dealinhamento a uma linha inteira. Para tal aplica-se as mesmasregras de alinhamento ao elemento tr




Tabelas

Atributos de largura

Ate agora vimos que uma tabela comum ajusta o tamanho de suascelulas ao conteudo. Por exemplo:

<TABLE BORDER=1><TR><TD> j a n e i r o</TD><TD> f e v e r e i r o</TD><TD>marco</TD><

/ t r><TR><TD>a b r i l</TD><TD>maio</TD><TD>junho</TD></ t r>

</TABLE>

Para apresentar uma tabela ocupando determinado espacodisponıvel na linha, usamos o atributo WIDTH. Esse atributopode ser aplicado tambem a linhas e celulas. Essa largura pode serdefinida em porcentagem (do espaco disponıvel):

WIDTH=x%ou em pixels:

WIDTH=x66 / 85 Ivo Calado IFAL



Tabelas

Exemplo

<TABLE BORDER=1 width=50%><TR>

<TD> j a n e i r o</TD><TD width=60%> f e v e r e i r o</TD><TD>marco</TD>

</TR><TR>

<TD>a b r i l</TD><TD width=60%>maio</TD><TD>junho</TD></TR></TABLE>




Tabelas

Controle de largura

Mas o que acontece se defirnirmos uma largura menor do que otamanho do conteudo?

O controle da largura da tabela esta limitado a dimensao de seuconteudo, ou seja, a celula tomara o tamanho do conteudo!

Exemplo:

<TABLE BORDER=1 width=50%><TR><TD> j a n e i r o</TD><TD width=1%> f e v e r e i r o</TD><TD>marco</

TD></TR><TR><TD>a b r i l</TD><TD width=1%>maio</TD><TD>junho</TD></TR></TABLE>




Tabelas

Controle de largura

Mas o que acontece se defirnirmos uma largura menor do que otamanho do conteudo?

O controle da largura da tabela esta limitado a dimensao de seuconteudo, ou seja, a celula tomara o tamanho do conteudo!

Exemplo:

<TABLE BORDER=1 width=50%><TR><TD> j a n e i r o</TD><TD width=1%> f e v e r e i r o</TD><TD>marco</

TD></TR><TR><TD>a b r i l</TD><TD width=1%>maio</TD><TD>junho</TD></TR></TABLE>68 / 85 Ivo Calado IFAL



Tabelas

Espacamento

Dois atributos permitem o controle de espacamento em tabelas:

CELLPADDING: espaco entre o texto e as bordas da celula

CELLSPACING: espaco entre celulas

<TABLE BORDER=1 CELLPADDING=20><TR><TD> j a n e i r o</TD><TD> f e v e r e i r o</TD><TD>marco</TD><

/ t r><TR><TD>a b r i l</TD><TD>maio</TD><TD>junho</TD></ t r>

</TABLE>




Tabelas

Customizando a tabela

De modo a customizar a aparencia de uma tabela, e possıvelalterar as cores do fundo da tabela, da borda e incluir uma imagemde fundo:

Cor de fundo: utiliza-se o atributo BGCOLOR com a corpretendida

Cor de borda: utiliza-se o atributo BORDERCOLOR com acor pretendida

Imagem de fundo: utiliza-se o atributo Background com aurl para a pagina pretendida




Frames

Objetivo

Possibilita que diversos documentos HTML possam sercarregados na mesma janela

Ate agora trabalhamos com toda a tela, ou seja, com apenas1 frames

Os frames sao independentes entre si

Porem, a utilizacao de frames possui as seguintes desvantagens

Frames sao difıceis de usar (e difıcil a impressao da paginainteira)

Existe uma abordagem mais elegante chamada iframe, queiremos ver mais a frente

A utilizaccao de frames e considerado deprecated




Frames

O elemento frameset

O elemento frameset e utilizado para agrupar um conjunto deframes

E possıvel definir a porcentagem ou o tamanho em pixels quesera utilizado para cada frame, atraves do atributo cols

<f rameset c o l s="25% ,75%"> <!−− Tambem p o d e r i a e s t a rr e p r e s e n t a d o em p i x e l s−−>

<frame s r c=" frame_a .htm" /><frame s r c=" frame_b .htm" />

</ f rameset>




Frames

O elemento frame

Possibilita o carregamento de uma url em um frame especıfico

<html><head>< t i t l e></ t i t l e></head><f rameset c o l s="25% ,75%">

<frame s r c=" http :// www. google .com" /><frame s r c=" http :// g1. globo .com" /><noframe>

problema</ noframe>

</ f rameset></ html>




Frames

Atributos de frame

Entre os diversos atributos de frame temos:

src: url a ser carregada

name: especifıca o nome a ser utilizado para ser referenciado

id: especifica um id a ser referenciado




Frames

Iframe

De maneira semelhante aos frames, temos uma evolucaochamada iframe

E um elemento a ser introduzido dentro do elemento body

Qual a diferenca entre frame e iframe?

Frame - Divisao de um website em 2 ou mais arquivos que formamo Layout da pagina. E um elemento bloco IFrame - Elemento quepode ser inserido dentro da (e nao dividindo a) pagina da web. Eum elemento bloco, mas e conhecido como “inline frame”

Pode ser utilizado como uma abordagem alternativa (emboracomplexa) dos resultados obtidos com Ajax!




Frames

Formularios

Ate agora vimos apenas abordagens utilizadas para visualizarconteudo recebido pelo servidor

Porem, podemos fazer uso de conteudo ao servidor atravesdos formularios

Um formulario e composto por um elemento form (queagrega as entradas) e diversos inputs

O elemento form nao e visıvel enquanto que os inputs sao!




Frames

O elemento Form

<form>.e l e m e n t o s i n p u t.</ form>

Atributos da tag form

action: Acao a ser realizada

accept: Mime type

accept-charset

enctype: especifica como a informacao devera ser codificada

method: define o metodo da requisicao (get ou post)

name: nome do formulario




Frames

O elemento Form

<form>.e l e m e n t o s i n p u t.</ form>

Atributos da tag form

action: Acao a ser realizada

accept: Mime type

accept-charset

enctype: especifica como a informacao devera ser codificada

method: define o metodo da requisicao (get ou post)

name: nome do formulario77 / 85 Ivo Calado IFAL



Frames

Elementos input

Sao considerados os principais elementos

E utilizado para selecionar as informacoes do usuario que seraenviada para o servidor

Varia na forma como o elemento e exibido ao usuario (atravesdo atributo type)




Frames

O elemento Textfield

Apresenta um campo de texto para insercao de dados dousuario

F i r s t name : <i nput type=" text " name=" firstname " /><br/>

L a s t name : <i nput type=" text " name=" lastname " />




Frames

O elemento Password

Possibilita a insercao de textos no formato codificado(conjunto de “***”)

Bastante semelhante ao textfield

F i r s t name : <i nput type=" password " name=" firstname " /><br />

L a s t name : <i nput type=" text " name=" lastname " />




Frames

Radio Button

Possibilita a escolha de uma opcao em um conjunto de opcoes

<i nput type=" radio " name="sex" va lue=" male " /> Male<br />

<i nput type=" radio " name="sex" va lue=" female " />Female




Frames

Checkbox

Semelhante ao radio box, porem possibilita a escolha demultiplas opcoes de maneira simultanea

<form><i nput type=" checkbox " name=" vehicle " va lue=" Bike " />

I have a b i k e<br /><i nput type=" checkbox " name=" vehicle " va lue="Car" />

I have a c a r</ form>




Frames

Exercıcio I

Criar uma aplicacao Web que possua os seguintes atributos:

Possua 3 frames onde: o 1º exiba uma logo, o 2º exiba umapagina Web externa e o 3º exiba o conteudo propriamente dito

Os frames nao podem ter bordas aparentes

No frame de trabalho (3º) subdividir em dois iframes F1 e F2(25% e 75%) onde: no primeiro iframe contera um conjuntode links que quando abertos irao lancar paginas no segundoiframe (F2)

No iframe F2 devera ser aberto exemplos de formularios eseus respectivos atributos de entrada




Frames

Exercıcio II

No ultimo link apresentado F1 devera ser aberto uma novajanela onde sera realizado o cadastro de um um aluno e asinformacoes devem ser enviadas utilizando o metodo get

Pesquisar e fazer uso de outras tags de insercao de dados como:select, submit, textarea, option, optgroup, hidden, fieldset




Frames

Exercıcio criacao de tabelas I

Criar uma aplicacao Web que possua os seguintes atributos

A pagina estara organizada a partir de uma tabela

A tabela estara organizada como segue:

3 linhas (15%, 70% e 15%)3 celulas na primeira linha (logo esquedo, tıtulo e logo direita)2 celulas na segunda linha (C4 e C5) divididos em 40% e 60%1 Celula na terceira linha, exibindo o rodape da pagina

Em C4 devera ser exibido uma lista contendo subelementos,onde cada elemento e subelemento e um link que quandoclicado ira carregar o conteudo em C4



HTML

Documents

Transcript of HTML