HTML
Textos
Links
Imagens
Tabelas
textos
■ Cuidado
■ O controle oferecido pelo HTML é pequeno
– Texto fluido
– Mudança de fonte
– Mudança de tamanho
■ Solução
– CSS
– Usar imagens simulando texto - Será?
textos
Dicas
■ Não hifenizar manualmente.
■ Usar fundos sutis
■ Não animar textos
■ Justificar à esquerda
■ Evitar textos longos só com maiúsculas
■ Privilegiar tipos sem serifa
■ Usar tamanhos grandes
textos
Tags de texto
■ Parágrafos <p>
■ Quebra de linha <br>
■ Cabeçalhos <h1>...<h6>
■ Espaçamentos <blockquote>
■ Listas <li>
■ Negrito <b> ou <strong>
■ Itálico <i>
textos
Tags de texto
■ Cabeçalho
Seis níveis <H1>,<H2>,<H3>,<H4>,<H5>,<H6>
■ Parágrafo
coloca um espaço entre os blocos de parágrafos
<p> texto do parágrafo </p>
textos
Tags de texto
■ Quebra de linha
Inicia uma nova linha em um elemento bloco, mas não
adiciona espaços extra.
<br>
textos
Tags de texto
■ Citações longas
Formata o texto de um bloco recuado
<blockquote> texto identado </blockquote>
textos
Estilos incorporados ■ Riscado
<s> </s>
■ Itálico <strike> </strike>
<i> </i>
<em> </em> ■ Teletipo (texto datilografado)
<tt> </tt>
■ Negrito
<b> </b> ■ Exponente superior
<strong> </ strong > <sup> </sup>
■ Sublinhado ■ Exponente inferior
<u> </u> <sub> </sub>
textos
Listas
■ Lista ordenada (numerada) - <ol> </ol>
– os browsers automaticamente inserem um número antes
de cada item da lista
– Itens da lista - <li> </li>
textos
Listas
■ Lista não ordenada (com bullets) - <ul> </ul>
– os itens da lista aparecem com marcadores
– Itens da lista - <li> </li>
Links
• Para outros sites
• Para o próprio site
• Para um outro lugar na mesma página
• De envio de e-mail
• Links em texto e em imagens
• Mapas de imagem (diversos links em uma mesma
imagem)
TAG
TAG chamada âncora:
<a> .... </a>
Elas são colocadas ao redor do texto que se quer linkar
Para especificar o destino do link, coloca-se o atributo:
HREF=
Exemplo:
<a href=“[Link] site do Google </a>
Links de envio de e-mail
<a href=[Link] seu email </a>
Link
Selecionar/escrever:
Para e-mail:
[Link]
Para site:
Http://[Link]
Para página do site (âncora)
Pá[Link]
Target – onde irá abrir o destino solicitado
_blank: em uma nova janela do browser
_parent: em uma janela “pai”, um nível acima
_self: na mesma janela
_top: no primeiro nível de janela
_outro nome: aonde quiser especificar
Tipos de links
Absolutos – para fora do site
<a href=“[Link] >
Relativos – para dentro do site
<a href=“../[Link]” >
Imagens
Formatos usados
.jpeg , .gif, .png, svg, ...
Usa-se imagens para diversos fins:
Imagem simples
Link (ex: botões)
Diagramação – imagens transparentes
Imagens – tags
<img>
Atributos: align (type – absbottom, absmiddle,
baseline, bottom, center, left, middle, right, texttop,
top), alt, border, height, width, hspace, vspace,
ismap, longdesc (url), lowsrc (url – qual imagem será
baixada por primeiro, seguida pela indicada pela tag
src), src (url), usemap (url)
Imagens
Opções W e H
o valor em pixel em largura (width) e altura (height) da imagem
Nota: o aumento ou a redução do tamanho da imagem deve ser feito
em um programa como Photoshop, não usando os atributos W e H.
Imagens
Src
o nome e a localização do arquivo de imagem gif ou jpg
Alt
descrição resumida sobre o que ilustra a imagem. Importante para a
acessibilidade. Auxilia o usuário que está visualmente dificultado,
ou aquele que tem conexões de baixa velocidade e desativa a
apresentação de imagens.
Imagens
Link
Coloca um link na imagem. Escreva o endereço ([Link]
ou clique na pasta para fazer um link para um documento html
local.
Target
Em que janela do navegador abrirá o link
Tabelas – como funcionam
São formadas de células, arranjadas em:
Rows – linhas
Columns – colunas
Tabela <TABLE>
célula <td> célula célula linha <TR>
célula célula célula linha
célula célula célula linha
coluna coluna coluna
Tabelas – como funcionam
<TABLE>
<TR>
<TD> célula 1</TD>
<TD> célula 2</TD> Tabela
<TD> célula 3</TD>
célula 1 Célula 2 Célula 3 linha
</TR>
<TR> Célula 4 Célula 5 Célula 6 linha
<TD> célula 4</TD>
Célula 7 Célula 8 Célula 9 linha
<TD> célula 5</TD>
<TD> célula 6</TD> coluna coluna coluna
</TR>
<TR>
<TD> célula 7</TD>
<TD> célula 8</TD>
<TD> célula 9</TD>
</TR>
</TABLE>