HTML

Introdu¸õ
ca Introdu¸ao linguagem HTML
c Formata¸õ de texto
ca Referenciamento Tabelas e *frames

Programa¸õ para Web
ca
HTML

Ivo Calado

Instituto Federal de Educa¸õ, Ciˆncia e Tecnologia de Alagoas
ca e

20 de Mar¸o de 2012
c

1 / 85 Ivo Calado IFAL
ca

Introdu¸õ

Roteiro

1 Introdu¸õ
ca

2 Introdu¸ao linguagem HTML
c

3 Formata¸õ de texto
ca

4 Referenciamento

5 Tabelas e *frames

ca

Introdu¸˜o

O que ´ Internet?
e

O que ´ Internet?
e

ca

Introdu¸˜o

O que ´ Internet?
e

O que ´ Internet?
e

Estamos acostumados a ouvir que...
Internet ´ a “grande rede mundial de computadores”
e

ca

Introdu¸õ

O que ´ Internet?
e

O que ´ Internet?
e

e

Entretanto, essa defini¸õ nõ ´ exata...
ca a e

ca

Introdu¸õ

O que ´ Internet?
e

O que ´ Internet?
e

e

Entretanto, essa defini¸õ nõ ´ exata...
ca a e
Internet ´ “o conjunto de diversas redes de computadores que se
e
comunicam atrav´s dos protocolos TCP/IP”
e

ca

Introdu¸˜o

O que ´ World Wide Web?
e

O que ´ a World Wide Web?
e

ca

Introdu¸õ

e

e

Defini¸õ
ca
´
E um sistema de documentos hipertexto inteligados atrav´s de
e
hiperlinks

ca

Introdu¸õ

e

e

Defini¸õ
ca
´
e
hiperlinks

Qual a diferen¸a entre WWW e a Internet?
c

ca

Introdu¸õ

e

e

Defini¸õ
ca
´
e
hiperlinks

c
Internet ´ toda a infraestrutura de rede, enquanto que a WWW ´
e e
apenas um servi¸o provido.
c

Quais seriam outros exemplos de servi¸os providos pela Internet
c

ca

Introdu¸õ

e

e

Defini¸õ
ca
´
e
hiperlinks

c
Internet ´ toda a infraestrutura de rede, enquanto que a WWW ´
e e
apenas um servi¸o provido.
c

Quais seriam outros exemplos de servi¸os providos pela Internet
c
Email, FTP, P2P, transmiss˜es multim´ etc
o ıdia

ca

Introdu¸õ

e

Defini¸õ de Hipertexto I
ca

Conjunto de documentos que fazem referˆncia entre si,
e
possibilitando navega¸õ entre os diferentes t´picos
ca o
A partir da interreferˆncia entre as diversas p´ginas ´ criado
e a e
uma malha de inteconex˜es (de onde vem o termo Web).
o

ca

Introdu¸õ

e

Defini¸õ de Hipertexto II
ca

O conceito de hipertexto nõ ´ unico da WWW. Ele ´ bem
a e´ e
anterior a Internet.
Qual seria um outro exemplo de Hipertexto?

ca

Introdu¸õ

e

Defini¸õ de Hipertexto II
ca

O conceito de hipertexto nõ ´ unico da WWW. Ele ´ bem
a e´ e
anterior a Internet.
Qual seria um outro exemplo de Hipertexto? O dicion´rio! No
a
dicion´rio os termos existentes se auto-referenciam
a

ca

Introdu¸õ

Hist´ria
o

Como surgiu a WWW?
Criado entre os anos de 1989-1991 (proposi¸õ do projeto,
ca
desenvolvimento e apresenta¸õ p´blica)
ca u
Criado pelo f´ısico Tim Berners-Lee que ainda se mant´m no
e
comitˆ para o desenvolvimento da WWW, chamado W3C
e
A ideia original era criar uma infraestrutura para acesso a
documentos em uma abordagem de comunica¸õ ca
cliente-servidor.

ca

Introdu¸˜o

Hist´ria
o

Como surgiu a WWW?
ca
ca u
e
e
cliente-servidor.

Mas o que seria uma abordagem cliente-servidor?

ca

Introdu¸˜o

Hist´ria
o

Como surgiu a WWW?
ca
ca u
e
e
cliente-servidor.

Mas o que seria uma abordagem cliente-servidor?
Trata-se de uma abordagem de comunica¸˜o em que uma
ca
m´quina, chamada servidora, disponibiliza recursos a serem
a
acessados por outras m´quinas, chamadas de clientes.
a
ca

Introdu¸˜o

Hist´ria
o

Modelo cliente-servidor

ca

Introdu¸˜o

Conceitos importantes

Trˆs conceitos s˜o de fundamental importˆncia no estudo da
e a a
WWW: HTTP, URL e HTML

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

ca

Introdu¸õ


HTTP

Abrevia¸õ de Hypertext Transfer Protocol
ca
Trata-se de um protocolo de camada de aplica¸õ, utilizado
ca
para recupera¸õ de recursos na Internet
ca
Diferentemente do TCP, o protocolo HTTP ´ um
e
protocolo textual (ou human-readable)
Possui um conjunto limitado de opera¸˜es poss´
co ıveis: GET,
POST, PUT, HEAD etc.
Ver Wireshark...

ca

Introdu¸õ


Contextualizando...

O que sõ protocolos da camada de aplica¸õ?
a ca

ca

Introdu¸õ


Contextualizando...

O que sõ protocolos da camada de aplica¸õ?
a ca
Sõ protocolos respons´veis por prover servi¸os `s aplica¸˜es
a a c a co
Representam a 7ª camada no modelo OSI ou a 5ª no modelo
TCP/IP
Normalmente sõ os protocolos que diretamente sõ
a a
acessados pelas aplica¸˜es
co
Outros exemplos de protocolos incluem: FTP, SSH, Bitorrent
etc.

ca

Introdu¸˜o


O que ´ um protocolo textual?
e

ca

Introdu¸˜o


O que ´ um protocolo textual?
e
S˜o protocolos que apresentam uma estrutura textual nas suas
a
descri¸˜es de mensagens
co

ca

Introdu¸õ


URL

Abrevia¸õ de Uniform Resource Locator
ca
´ uma forma padrõ para representa¸õ da localiza¸õ de um
E a ca ca
recurso
Pode ser utilizado por diversos protocolos (inclusive o HTTP)
para identificar um recurso remoto
Possui o seguinte formato:
protocolo://m´quina/caminho/recurso
a

ca

Introdu¸õ


HTML
Linguagem de marca¸õ para transmitir documentos
ca
formatados atrav´s da rede
e
Trata-se de uma das formas mais b´sicas de transmissõ de
a a
informa¸õ pela Web
ca
Conte´do ´ considerado est´tico
u e a

ca

Introdu¸õ


HTML
ca
e
a a
ca
u e a
Nõ ´ uma linguagem de programa¸õ!!!
a e ca

ca

Introdu¸õ


HTML
ca
e
a a
ca
u e a
Nõ ´ uma linguagem de programa¸õ!!!
a e ca
Conte´do Est´tico x Conte´do Dinˆmico
u a u a
No conte´do est´tico as p´ginas HTML criadas previamente e
u a a
sõ apenas requisitadas
a
No conte´do dinˆmico, h´ uma requisi¸õ por uma p´gina e a
u a a ca a
p´gina HTML ´ gerada em tempo real e entregue ao
a e
requisitante
ca

Introdu¸õ

Hist´ria
o

Hist´ria
o

A linguagem HTML foi desenvolvida em 1990 a partir de dois
padr˜es existentes:
o
SGML: padrõ que possibilitava a formata¸õ de texto
a ca
HyTime: padrõ para representa¸õ de documentos
a ca
hipertextos
A partir da uniõ das funcionalidades do SGML e HyTime foi
a
poss´ a cria¸õ do HTML. Atualmente o HTML est´ na versõ
ıvel ca a a
5.0 (draft) e sua especifica¸õ pode ser encontrada em
ca
http://www.w3.org/TR/html5/

ca

Introdu¸õ

Primeiros passos

Nossa primeira p´gina HTML
a

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 extensõ .html ou .htm e abra-o com o
a
navegador padrõ (ex.: firefox index.html)
a

ca

Introdu¸õ

Primeiros passos

Estrutura da p´gina HTML
a

Formado por tags que especificam a estrutura e a formata¸õ
ca
do documento
Possui como elemento inicial a tag HTML
As tags HTML nõ sõ sens´
a a ıveis ` caixa. Traduzindo: tanto
a
faz escrever <HTML>, <Html>, <html>, <HtMl>, ...

ca

Introdu¸˜o

Primeiros passos

a

ca
do documento
a

Mas o que s˜o tags
a

ca

Introdu¸õ

Primeiros passos

a

ca
do documento
a

Mas o que sõ tags
a
Sõ elementos de formata¸õ da linguagem HTML. A partir delas
a ca
´ poss´ definir a formata¸õ de algumas por¸˜es de texto
e ıvel ca co

ca

Introdu¸õ

<Head>

Se¸õ Head
ca

O elemento HEAD cont´m informa¸˜es sobre o documento.
e co
Nele, o t´
ıtulo da p´gina pode serO elemento ¡TITLE¿, por
a
exemplo, define um t´ ıtulo, que ´ mostrado no alto da janela
e
do browser.
<HEAD><TITLE>Nossa primeira p´gina</TITLE></HEAD>
a

ca

Introdu¸˜o

<Head>

Sobre o t´
ıtulo da p´gina
a

Todo documento WWW deve ter um t´
ıtulo
Esse t´
ıtulo ´ referenciado em buscas pela rede, dando uma
e
identidade ao documento
Para ver na pr´tica a importˆncia do t´
a a ıtulo, se vocˆ adicionar
e
a p´gina criada aos favoritos do seu navegador o t´
a ıtulo da
p´gina ser´ usado como ˆncora de acesso
a a a
´ sugerido que os t´
E ıtulos dos documentos sejam sugestivos,
evitando-se t´
ıtulos gen´ricos como “Introdu¸˜o”
e ca

ca

Introdu¸õ

<Head>

Campos META

Al´m do t´
e ıtulo, <HEAD> cont´m outras informa¸˜es de
e co
importˆncia para os robˆs de pesquisa, indicadas nos campos
a o
<META>
Os campos <META> tˆm dois atributos principais:
e
NAME, indicando um nome para a informa¸õ
ca
HTTP-EQUIV, que faz uma correspondˆncia com campos de
e
cabe¸alho do protocolo HTTP (ex.: definir a codifica¸õ
c ca
utilizada)

ca

Introdu¸˜o

<Head>

Exemplo META

<HEAD>
<META HTTP−EQUIV=" content - type " CONTENT text / html ; ="
c h a r s e t = iso -8859 -1 ">
<TITLE> T u t o r i a l HTML </TITLE>
<META NAME A u t h or " CONTENT Ivo Calado - ivo .
=" ="
c a l a d o @ e e . ufcg . edu . br ">
<META NAME G e n e r a t o r " CONTENT Namo W e b E d i t o r v5 .0 ">
=" ="
<META NAME D e s c r i p t i o n " CONTENT Manual de
=" ="
r e f e r ˆ n c i a para w e b d e s i g n e r s e d e s e n v o l v e d o r e s de
e
sites ">
<META NAME K e y W o r d s " CONTENT HTML , WWW ,
=" ="
W e b p u b l i s h i n g , Internet , W e b d e s i g n ">
</HEAD>

ca

Introdu¸õ

<Head>

Ainda sobre a tag META...

Alguns valores dos atributos META NAME sõ inseridos
a
automaticamente por alguns editores, por exemplo: Generator
e Author.
Os campos Description e KeyWords ajudam a classifica¸õ
ca
da p´gina em algumas ferramentas de busca.
a
As informa¸˜es nas tags META nõ tˆm qualquer efeito na
co a e
apresenta¸õ da p´gina, mas servem como uma explica¸õ ou
ca a ca
documenta¸õ sobre as informa¸˜es contidas nela.
ca co

ca

Introdu¸õ

<Head>


H´ poucos valores para META HTTP-EQUIV em uso
a
Os parˆmetros mais utilizados sõ content-type e Refresh
a a

content-type
Indica a codifica¸õ que o browser deve utilizar para decodificar o
ca
documento recuperado. Existem diversos padr˜es de codifica¸õ
o ca
como UTF-8 e ISO 8859-1

ca

Introdu¸õ

<Head>

Refresh
Define uma URL a ser carregada ap´s a expira¸õ de um per´
o ca ıodo
espec´
ıfico

<HEAD>
<TITLE> . . . </TITLE>
<META HTTP−EQUIV=" R e f r e s h " CONTENT s e g u n d o s ; URL =
="
pag i n a . html ">
</HEAD>

onde,
pagina.html ´ a p´gina a ser carregada automaticamente
e a
segundos ´ o n´mero de segundos passados at´ que a p´gina
e u e a
indicada seja carregada
ca

Introdu¸˜o

<Head>


Ver exemplo Refresh...

ca

Introdu¸˜o

<Head>


Mas quando um recurso como refresh deveria ser utilizado?

ca

Introdu¸˜o

<Head>


Mas quando um recurso como refresh deveria ser utilizado?
Em situa¸˜es onde o conte´do da p´gina necessita ser atualizado
co u a
constantemente, como em uma p´gina de chat
a

ca

Introdu¸õ

<Body>

Se¸õ Body
ca

O objetivo da se¸õ Body ´ conter o conte´do que ser´, de
ca e u a
fato, visualizado pelo usu´rio
a
Deste modo ´ poss´ adicionar cabe¸alhos, par´grafos, listas,
e ıvel c a
tabelas, links para outros documentos, imagens, formul´rios,
a
anima¸˜es, v´
co ıdeos, sons e scripts embutidos.

ca

Introdu¸õ

Atributos

Atributos da Se¸õ Body
ca

<BODY BGCOLOR=" # r rggbb " TEXT=" # rrggbb " LINK=" # rrggbb "
ALINK=" # r r g g b b " VLINK=" # rrggbb " BACKGROUND URL ">
="

Bgcolor: cor de fundo (quando nõ ´ indicada, o browser ir´
a e a
mostrar uma cor padrõ, geralmente o cinza ou branco; alguns
a
editores poderõ estabelecer o branco para o fundo da p´gina)
a a
Text: cor dos textos da p´gina (padrõ: preto)
a a
Link: cor dos links (padrõ: azul)
a
Alink: cor dos links, quando acionados (padrõ: vermelho)
a
Vlink: cor dos links, depois de visitados (padrõ: azul escuro
a
ou roxo)
ca

Introdu¸õ

Atributos

ca

Seus valores sõ dados em hexadecimal, equivalentes a cores no
a
padrõ RGB (Red, Green, Blue).
a

ca

Introdu¸˜o

Atributos

ca

a
a
Como deﬁnir a cor a ser utilizada?

ca

Introdu¸õ

Atributos

ca

a
a
Como definir a cor a ser utilizada?
Existem tabelas de cores com esses valores, como
http://immigration-usa.com/html_colors.html. Al´m disso, a e
partir da versõ HTML 3.2, uma s´rie de constantes foram
a e
definidas para facilitar (aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)

ca

Introdu¸˜o

Atributos

ca

Background: Indica a URL da imagem a ser replicada no
fundo da p´gina, como uma marca d’´gua.
a a

ca

Introdu¸˜o

Cabe¸alhos, separadores e listas
c

Cabe¸alhos
c

H´ seis n´
a ıveis de cabe¸alhos em HTML, de <H1> a <H6>:
c
<H1>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 1</H1>
<H2>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 2</H2>
<H3>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 3</H3>
<H4>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 4</H4>
<H5>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 5</H5>
<H6>E s t e ´
e um cabecalho
¸ de n´ v e l
ı 6</H6>

O prop´sito dos cabe¸alhos ´ possibilitar a demarca¸˜o de se¸˜es
o c e ca co
no texto

ca

Introdu¸õ

c

Aninhamento de cabe¸alhos
c
Os cabe¸alhos nõ podem ser aninhados, isto ´, a formata¸õ:
c a e ca
<H2>E s t 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 de
e ¸ ı
um c a b e c a l h o de n´ v e l 2</H2>
¸ ı

ca

Introdu¸˜o

c

c
c a e ca
e ¸ ı
¸ ı

O que acontece com forma¸˜es dessa forma?
co

ca

Introdu¸˜o

c

c
c a e ca
e ¸ ı
¸ ı

O que acontece com forma¸˜es dessa forma?
co
pode produzir redutados diferentes dependendo de como o browser
interprete, visto que ele pode adotar duas abordagens:
Considerar o aninhamento, ou (caso do ﬁrefox)
Considerar que o programador esqueceu de fechar o primeiro
cabe¸alho H2 e de abrir o segundo cabe¸alho H2 (caso do
c c
Opera)
ca

Introdu¸˜o

c

Alinhamento de cabe¸alhos
c

´
E poss´ alinhas os cabe¸alho (em rela¸˜o as margens direita,
ıvel c ca
esquerda ou centro) a partir do uso de atributos dos cabe¸alhos...
c
Ex.:
<H2 ALIGN=CENTER>C a b e ¸ a l h o c e n t r a l i z a d o</H2>
c
<H3 ALIGN=RIGHT>C a b e c a l h o a l i n h a d o ` d i r e i t a</H3>
¸ a
<H4 ALIGN=LEFT>C a b e ¸ a l h o a l i n h a d o ` e s q u e r d a ( d e f a u l t )
c a
</H4>

ca

Introdu¸˜o

c

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

ca

Introdu¸˜o

c

O que acontece quando usamos a quebra de linha em um
documento HTML? (abrir exemplo separadores/index.html em
editor de texto)
Nada, pois os Browsers desconsideram tais quebras de linha unindo
o texto... (ver novamente o exemplo, agora no browser). Sendo
assim para organizar os textos, precisamos de separadores!!
Existem diferentes separadores poss´
ıveis:
<Br>
<P>
<HR>

ca

Introdu¸˜o

c

<Br>

Quando queremos mudar de linha, usamos o elemento <BR>
Isso s´ ´ necess´rio quando queremos uma quebra de linha em
oe a
determinado ponto, pois os browsers j´ quebram as linhas
a
automaticamente para apresentar os textos. (exemplo
br.html)
Deste modo ´ poss´ inserir diversas linhas no nosso
e ıvel
documento...

U t i l i z a n d o o <BR> e l e m e n t o BR <BR><BR><BR> ´ <BR> e
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

ca

Introdu¸˜o

c

<P>

Para separar blocos de texto, usamos o elemento <P>
P a r ´ g r a f o 1 ;<P>P a r ´ g r a f o 2 .
a a

que possui como efeito a cria¸˜o de um par´grafo
ca a

ca

Introdu¸˜o

c

<P>

Para separar blocos de texto, usamos o elemento <P>
P a r ´ g r a f o 1 ;<P>P a r ´ g r a f o 2 .
a a

que possui como efeito a cria¸˜o de um par´grafo Combinando
ca a
par´grafos e quebras de linha, podemos construir estruturas mais
a
organizadas de texto como o apresentado no exemplo
separadores/paragrafo.html

ca

Introdu¸˜o

c

Atributos da tag <P>

Assim como nos cabe¸alhos, a tag P possibilita o alinhamento
c
a partir da utiliza¸˜o do parˆmetro ALIGN
ca a

<P ALIGN=CENTER>Assim como o s t r e n s , a s b o a s i d ´ i a s ` s
e a
v 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>

ca

Introdu¸õ

c

Listas

Uma das formas mais comuns de estruturar uma por¸õ de um
ca
documento ´ no formato de listas. Nesse sentido, existem diversas
e
maneiras de estruturar o documento no formato de listas em
HTML, sendo as mais conhecidas:
Listas de Defini¸õ ou Listas de gloss´rio
ca a
Listas nõ-numeradas: sõ equivalentes `s listas com
a a a
marcadores do MS Word
Listas Numeradas

ca

Introdu¸õ

c

Listas de defini¸oes
c˜

Esta classe de lista sõ chamadas tamb´m de “Listas de
a e
Gloss´rios”, uma vez que tem o formato semelhante ao utilizado
a
em estruturas de gloss´rios. Ex.:
a
termo a s e r d e f i n i d o
definicõ
¸a
termo a s e r d e f i n i d o
definicõ
¸a

Este tipo de lista ´ muito utilizado para diversos efeitos de
e
organiza¸õ de p´ginas, por permitir a tabula¸õ do texto.
ca a ca

ca

Introdu¸õ

c

Listas nõ-numeradas
a

Sõ equivalentes `s listas com marcadores do MS Word:
a a
<UL>
<L I>i t e m de uma l i s t a
<L I>i t e m de uma l i s t a , que pode s e r t ˜ o g r a n d e q u a n t o
a
s e q u e i r a , sem que s e j a n e c e s s ´ r i o s e p r e o c u p a r
a
com a f o r m a t a c ˜ o d a s margens de t e x t o
¸a
<L I>i t e m
</UL>

UL: Define o in´ da lista
ıcio
LI: Define um novo item

ca

Introdu¸õ

c

Listas nõ-numeradas
a

Em listas nõ-numeradas ´ poss´ a adi¸õ de subn´
a e ıvel ca ıveis
Para tal, adiciona-se novos elementos UL
Exemplo:
<UL>
<L I>N´v e l
ı
<UL>
<L I>S u b n´v e l
ı
</UL>
<L I>N´v e l 2
ı
</UL>

ca

Introdu¸˜o

c

Alterando o indicador da lista

Um recurso dispon´ ´ a escolha de qual ser´ o marcador
ıvel e a
utilizado para identiﬁcar os itens. Por default o pr´prio browser faz
o
a escolha de acordo com o n´ da lista, por´m ´ poss´ fazer um
ıvel e e ıvel
controle mais apurado. Para isso basta fazer uso dos atributos
disc, circle e square
Exemplo:
<UL>
<L I TYPE=DISC>um i t e m
<L I TYPE=CIRCLE>m a i s um i t e m
<L I TYPE=SQUARE>´ l t i m o i t e m
u
</UL>

ca

Introdu¸˜o

c

Listas Numeradas
Nas listas numeradas ´ poss´ fazer a adi¸˜o de diversos itens a
e ıvel ca
serem representados de maneira ordenada.
<OL>
<L I>i t e m de uma l i s t a numerada
<L I>i t e m de uma l i s t a numerada , que pode s e r t ˜ o g r a n d e
a
quanto se queira
<L I>i t e m de l i s t a numerada
</OL>

ca

Introdu¸õ

c

Listas Numeradas
Nas listas numeradas ´ poss´ fazer a adi¸õ de diversos itens a
e ıvel ca
serem representados de maneira ordenada.
<OL>
<L I>i t e m de uma l i s t a numerada
<L I>i t e m de uma l i s t a numerada , que pode s e r t ˜ o g r a n d e
a
quanto se queira
<L I>i t e m de l i s t a numerada
</OL>

1 item de uma lista numerada
2 item de uma lista numerada, que pode ser tõ grande quanto
a
se queira
3 item de lista numerada
ca

Introdu¸˜o

Blocos de texto e Frases

Blocos de texto: PRE

At´ agora, sempre que criamos um arquivo HTML o browser
e
ﬁca respons´vel pelo espa¸amento e quebra de linhas
a c
Ver exemplo bloco texto

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

ca

Introdu¸˜o



At´ agora, sempre que criamos um arquivo HTML o browser
e
ﬁca respons´vel pelo espa¸amento e quebra de linhas
a c
Ver exemplo bloco texto

Mas e se desejassemos que o texto fosse exibido como digitado?
Para isso fazemos uso da tag <PRE>

Estrutura
<p r e>
texto a ser exibido . . .
</ p r e>

ca

Introdu¸˜o



Mas quais os riscos de se utilizar a tag PRE?

ca

Introdu¸˜o



Mas quais os riscos de se utilizar a tag PRE?
Dispositivos com diferentes resolu¸˜es de tela!
co
Rever exemplos...

ca

Introdu¸˜o


Blocos de texto: Blockquote e Address
A tag Blockquote possibilita a estrutura¸˜o de textos no formato
ca
de cita¸˜es longas:
co
<b l o c k q u o t e>A massa do S o l a r q u e i a o e s p a c o −tempo de
¸
t a l m a n e i r a que , a i n d a que a T e r r a s i g a uma
t r a j e t ´ r i a r e t a no e s p a c o −tempo q u a d r i d i m e n s i o n a l
o ¸
, p a r e c e −n o s que s e d e s l o c a em ´ r b i t a c i r c u l a r no
o
e s p a c o t r i d i m e n s i o n a l .</ b l o c k q u o t e> ( S t e p h e n W.
¸
Hawking , " Uma Breve H i s t ´ r i a do Tempo " )
o

ca

Introdu¸˜o


Blocos de texto: Blockquote e Address
A tag Blockquote possibilita a estrutura¸˜o de textos no formato
ca
de cita¸˜es longas:
co
<b l o c k q u o t e>A massa do S o l a r q u e i a o e s p a c o −tempo de
¸
t a l m a n e i r a que , a i n d a que a T e r r a s i g a uma
t r a j e t ´ r i a r e t a no e s p a c o −tempo q u a d r i d i m e n s i o n a l
o ¸
, p a r e c e −n o s que s e d e s l o c a em ´ r b i t a c i r c u l a r no
o
e s p a c o t r i d i m e n s i o n a l .</ b l o c k q u o t e> ( S t e p h e n W.
¸
Hawking , " Uma Breve H i s t ´ r i a do Tempo " )
o

Por sua vez a tag address estrutura o conte´do no formato de
u
endere¸o de email.
c
E n v i e c r´ t i c a s e s u g e s t o e s p a r a <a d d r e s s>i v o . c a l a d o @ e e
ı ˜
. u f c g . edu . b r</ a d d r e s s>

ca

Introdu¸õ


Estilos f´
ısicos e l´gicos
o

A linguagem HTML permite dois tipos de estilos de formata¸˜es:
co
f´
ısico e l´gico
o
Estilo f´
ısico: a formata¸õ f´
ca ısica especifica explicitamente o
estilo que se quer para o texto: it´lico, grifado etc. Sua
a
apresenta¸õ final nõ sofre grande altera¸õ entre os
ca a ca
navegadores
Estilo l´gico: a formata¸õ l´gica segue o significado l´gico
o ca o o
do texto marcado. Deste modo, sua interpreta¸õ depende
ca
grandemente de cada navegador

ca

Introdu¸˜o


Estilos f´
ısicos

<b> => Texto em negrito
<I> => Texto em it´lico
a
<TT> => Texto monoespacado (espa¸o entre letras
¸ c
reduzido)
<U> => Texto sublinhado
<strike> => Texto riscado
<big> => Texto um pouco maior
<small> => Texto um pouco menor
<sub> => Frase em estilo indice , como em H2 O
<sup> => Frase em estilo expoente , como em Km2

ca

Introdu¸õ

Caracteres especiais

Problem´tica
a

Alguns caracteres como <, >, & tem significados na
linguagem e nõ podem ser usados diretamente
a

ca

Introdu¸õ


Problem´tica
a

a
HTML foi originalmente desenvolvido tendo como base a
tabela ASCII (sem caracteres especiais)
Neste sentido, a utiliza¸õ de tais caracteres requerem o uso
ca
de um sistema de codifica¸õ espec´
ca ıfica

Qual seria a defini¸õ de sistema de codifica¸õ e quais seriam os
ca ca
exemplos?

ca

Introdu¸õ


Problem´tica
a

a
HTML foi originalmente desenvolvido tendo como base a
tabela ASCII (sem caracteres especiais)
Neste sentido, a utiliza¸õ de tais caracteres requerem o uso
ca
de um sistema de codifica¸õ espec´
ca ıfica

Qual seria a defini¸õ de sistema de codifica¸õ e quais seriam os
ca ca
exemplos?
UTF-8, ISO8859-1, latin1 ...

ca

Introdu¸õ


Exemplos de codifica¸õ
ca

&alt; ==> <
> ==> >
& ==> &
á ==> ´
a
â ==> ˆ
a
Lista completa:
http://www.degraeve.com/reference/specialcharacters.php

ca

Introdu¸˜o


Outra abordagem...

Al´m dessa abordagem, vimos uma abordagem anterior mais
e
simples, qual ´ ela?
e

ca

Introdu¸˜o


Outra abordagem...

Al´m dessa abordagem, vimos uma abordagem anterior mais
e
simples, qual ´ ela?
e
<META HTTP−EQUIV=" Content - Type "
CONTENT text / html ; c h a r s e t = ISO -8859 -1 ">
="

A abordagem de caracteres especiais era mais utilizada em
navegadores antigos

ca

Introdu¸õ

Cores e fontes

Cores

As cores sõ introduzidas atrav´s do elemento FONT, usando
a e
o sistema RGB
A mesma tabela de cores que vimos pode ser utilizada para as
fontes Os valores definidos neste elemento sobrescrever os
atributos do elemento body

<FONT COLOR=" # r r ggbb ">Texto</FONT>

ca

Introdu¸õ

Cores e fontes

Tamanho

Um outra forma de manipula¸õ poss´ ´ a altera¸õ do
ca ıvel e ca
tamanho da fonte
Fazemos uso tamb´m do elemento FONT, por´m utilizando o
e e
atributo size
O tamanho 3 ´ o valor default
e
Pode ser utilizado valores absolutos ou relativo ao default

ca

Introdu¸õ

Cores e fontes

Tamanho

Um outra forma de manipula¸õ poss´ ´ a altera¸õ do
ca ıvel e ca
tamanho da fonte
Fazemos uso tamb´m do elemento FONT, por´m utilizando o
e e
atributo size
O tamanho 3 ´ o valor default
e
Pode ser utilizado valores absolutos ou relativo ao default

<FONT SIZE=−2>Qual ´ e s s e tamanho ?</FONT
e >
<FONT SIZE=+2>E e s s e ?</FONT >
<FONT SIZE=2>e e s s e o u t r o ?</FONT>

ca

Introdu¸˜o

Cores e fontes

Fontes

At´ agora, sempre utilizamos a mesma fonte
e
Por´m, ´ poss´ customizar a fonte a ser utilizada
e e ıvel
Novamente fazemos uso da tag FONT, mas com o atributo
face

<FONT FACE=" V e r d a n a " COLOR=" #0000 AA ">F o n t e Verdana a z u l
</FONT >
<FONT FACE=" Arial " COLOR=" #00 AA00 ">F o n t e A r i a l v e r d e</
FONT>
<FONT FACE=" C o u r i e r New " COLOR=" # AA0000 ">F o n t e C o u r i e r
New v e r m e l h a</FONT >

ca

Introdu¸˜o

Links

Usando links

Um dos mais importantes recursos do HTML ´ a capacidade
e
de referenciar outros documentos
Al´m disso ´ poss´ fazer referˆncia a pontos dentro do
e e ıvel e
pr´prio documento (chamado ˆncoras)
o a
Tudo isso ´ poss´ atrav´s da tag <a>
e ıvel e

ca

Introdu¸˜o

Links

Usando links

Um dos mais importantes recursos do HTML ´ a capacidade
e
de referenciar outros documentos
Al´m disso ´ poss´ fazer referˆncia a pontos dentro do
e e ıvel e
pr´prio documento (chamado ˆncoras)
o a
Tudo isso ´ poss´ atrav´s da tag <a>
e ıvel e

<A HREF = " www . g o ogle . com ">meu l i n k</A>

ca

Introdu¸˜o

Links

Links

Al´m disso, os seguintes atributos podem ser utilizados:
e
href: indica a URL que ser´ carregada
a
target: indica o frame em que ser´ carregado. Possibilita a
a
abertura do link em uma nova p´gina atrav´s do valor blank
a e
name: marca um ponto de referˆncia a ser utilizado como
e
ˆncora. Geralmente ´ utilizado em p´ginas Web longas para
a e a
possibilitar um retorno para um ponto espec´
ıﬁco
<A NAME i n i c i o "> I n d i c a d o r e s ( u s o de l i n k s )</A>
="
<A HREF=" # i n i c i o ">Topo do documento</A>

ca

Introdu¸õ

Inser¸õ de imagens
ca

Inserindo imagens
Para inser¸õ de imagens fazemos uso da tag img, com os
ca
seguintes parˆmetros
a
src: indica a url para a imagem a ser carregada
alt: texto a ser exibido caso a imagem nõ possa ser carregada
a
width: largura da imagem
height: altura da imagem
border: define a largura da linha que circunda a imagem
Exemplo:
<IMG SRC = " http :// l i b r a r y . t h i n k q u e s t . org / 1 5 0 7 4 / media /
html2 . gif ">

ca

Introdu¸õ

Tabelas

O que sõ?
a

As tabelas foram uma das primeiras abordagens utilizadas
para a organiza¸õ das p´ginas Web
ca a
A ideia original era organizar a p´gina Web como uma grade,
a
onde cada parte do documento se encaixava em c´lulas
e
espec´
ıficas

ca

Introdu¸õ

Tabelas

O que sõ?
a

As tabelas foram uma das primeiras abordagens utilizadas
para a organiza¸õ das p´ginas Web
ca a
A ideia original era organizar a p´gina Web como uma grade,
a
onde cada parte do documento se encaixava em c´lulas
e
espec´
ıficas
Deste modo, torna-se poss´ a inser¸õ de textos,
ıvel ca
par´grafos, imagens, formul´rios, e v´rias outras formata¸˜es,
a a a co
inclusive outras tabelas!!

ca

Introdu¸õ

Tabelas

Elementos b´sicos
a
Para constru¸˜es de tabelas, os seguintes elementos sõ utilizados:
co a
Table: elemento que delimita uma tabela. Cont´m como um
e
dos atributos border para indicar apresenta¸õ de borda:
ca
<TABLE BORDER=" borda ">
...
</TABLE>

T´
ıtulos, linhas e elementos:
Caption: define o t´ ıtulo da tabela
Tr: delimita uma linha
Th: delimita um cabe¸alho para colunas ou linhas
c
Td: delimita um elemento ou c´lula
e
ca

Introdu¸˜o

Tabelas

Exemplo de tabela

<TABLE BORDER=4>
<CAPTION>P r i m e i r o e x e m p l o</CAPTION>
<TR><TH o l u n a 1</TH
>C ><TH o l u n a 2</TH
>C ></TR>
<TR><TD i n h a 1 , c o l u n a 1</TD
>l ><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>

ca

Introdu¸˜o

Tabelas

Mesclando colunas e c´lulas
e
Uma das tarefas mais comuns ao se trabalhar com tabelas ´ a
e
possibilidade de mesclar v´rias colunas ou c´lulas em um
a e
unico elemento
´
Para tal, s˜o utilizados os atributos Colspan e rowspan
a
<TABLE BORDER=1>
<TR><TH COLSPAN=2>C o l u n a s 1 e 2</TH ></TR>
<TR><TD i n h a 1 , c o l u n a 1</TD
>l ><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 u a s l i n h a s</TD
>d ></TR>
<TR><TD t r e s l i n h a s</TD
> ></TR>
</TABLE>
ca

Introdu¸õ

Tabelas

Criando tabelas sem bordas

At´ aqui, trabalhamos com tabelas que apresentam bordas
e
das c´lulas
e
Por´m, ´ poss´ eliminar as bordas, tornando a visualiza¸õ
e e ıvel ca
mais “limpa”
Para tal, basta definir o atributo border para “0”

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

ca

Introdu¸˜o

Tabelas

Alinhamento

Um outro recurso, bastante interessante ´ a possibilidade de
e
alinhamento do conte´do dentro de cada c´lula. Por padr˜o, o
u e a
alinhamento segue as seguintes regras:

ca

Introdu¸˜o

Tabelas

Alinhamento

e
u e a
no sentido horizontal: alinhamento ` esquerda
a
no sentido vertical: alinhamento no centro da c´lula
e

ca

Introdu¸˜o

Tabelas

Alinhamento

e
u e a
no sentido horizontal: alinhamento ` esquerda
a
no sentido vertical: alinhamento no centro da c´lula
e
As linhas e c´lulas podem ter alinhamentos deﬁnidos atrav´s dos
e e
atributos:
ALIGN: alinhamento horizontal
VALIGN: alinhamento vertical

ca

Introdu¸˜o

Tabelas

Exemplo

<TABLE BORDER=1>
<TR><TD >Padr˜ o</TD
a ><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=c e n t e r> 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 >Padr˜ o</TD
a ><TD v a l i g n=t o p> v a l i g n=t o p</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>

ca

HTML

Recommended

Recommended

More Related Content

Similar to HTML

Similar to HTML (14)

More from Ivo Calado

More from Ivo Calado (7)

HTML