Webdesign
HTML – Parte 2
Thiago Miranda dos Santos Souza
WEBDESIGN
Conteúdos
Os materiais de aula, apostilas e outras informações
estarão disponíveis em:
www.thiagomiranda.net
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Tabelas
Tabelas são definidas com a tag <table>…</table>. Ela é dividida em linhas, delimitadas pela tag <tr>...</tr> (Table Row), e colunas, delimitadas pela tag <td>...</td> (Table Data), na qual se determina o conteúdo das células. Esse conteúdo pode ser texto, imagens, listas, formulários ou outros elementos.
O elemento table pode conter o atributo:
border, que indica qual o tipo de borda da tabela (se não for definido, nenhuma borda aparecerá);
width, que indica a largura da tabela (ele pode ser dado em percentual);
e o summary, que fornece uma descrição da tabela, útil em termos de acessibilidade
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Tabelas
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Tabelas
•Além das tags <td>, o elemento <tr> pode conter a tag <th>, que indica um
título para a linha/coluna. Esse título aparecerá em negrito e centralizado.
•No exemplo anterior, a segunda tabela possui títulos para as colunas.
•Dentre os possíveis atributos das tags <th> e <td> existem os
atributos colspan e rowspan, que servem para indicar a quantidade de
células (linha ou coluna) que serão ocupadas por um certo conteúdo. Por
exemplo, o slide anterior apresenta uma tabela com um título para as duas
colunas.
Elemento caption
• Observando o slide anterior, você deve ter visto a tag <caption>. Ela define
uma legenda para a tabela.
• Essa tag deve ser inserida como a primeira subtag de <table> e não deve
aparecer mais de uma vez. Usualmente essa legenda aparecerá centralizada
acima da tabela.
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Tabelas
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Tabelas
Os elementos thead, tbody e tfoot
•As tags <thead>, <tbody> e <tfoot> são usadas para
agrupar informações sobre o cabeçalho, o conteúdo e
o rodapé da tabela, respectivamente. Esses elementos
não afetam a aparência da tabela, mas podem ser
selecionados pelo CSS de forma que se possa associar
uma aparência para cada uma dessas seções. A
tag <tfoot> deve aparecer depois da tag <thead> e
antes da tag <tbody>.
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Tabelas
Atributos de uma Tabela
border: define o valor da borda em px
bordercolor: define a cor da borda
bgcolor: define a cor de fundo
width: largura, pode ser em, px ou %
height: altura, pode ser em, px ou %
cellpadding: margem interna da célula, em px
cellspacing: margem externa da célula, em px
align: alinhamento horizontal
valign: alinhamento vertical
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Tabelas
Construa uma tabela com a Seguinte aparência:
Tabela de Teste 1
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Links
Links Internos – Dentro da Própria Página
Você pode criar links internos, dentro da
própria página. Por exemplo, uma tabela de
conteúdos ou índice com links para cada um
dos capítulos em uma página.
Tudo o que você precisa é usar o atributo id e
o símbolo "#".
Use o atributo id para marcar o elemento que é
o destino do link. Por exemplo:
<h1 id=“destino1”>Cabeçalho 1</h1>
<a href=“#destino1”>Link para o Destino 1</a>
Thiago Miranda dos Santos Souza
WEBDESIGN
Continuação ‐ Links
Links para endereço de Email
A única diferença é que no lugar do endereço do documento você escreve
mailto: seguido pelo endereço de e‐mail. Quando o link é clicado o
programa de e‐mail padrão do usuário é aberto com o endereço do link já
digitado na linha para destinatário.
Mas, atenção, isto só irá funcionar se o usuário tiver um programa de e‐
mail instalado na sua máquina. Como por exemplo, o Outlook.
<a href="mailto:[email protected]">
Enviar e-mail
</a>
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
A principal função do HTML é dar significado ao conteúdo. Enquanto a
maioria das tags HTML aplicam algum significado (p quer dizer
parágrafo, h1 quer dizer cabeçalho, etc.), as tags span e div não têm
significado algum.
Elas são usadas para agrupar um bloco de HTML e aplicar alguma informação
a esse bloco, na maioria das vezes usando os atributos class e id para
associar o elemento com um seletor de classe ou id CSS.
A diferença entre span e div é que span é um elemento inline e geralmente
é usado para um pequeno bloco de HTML, e div é um elemento de bloco (o
que basicamente é equivalente a ter uma quebra de linha antes e depois do
elemento) e é usado para agrupar blocos maiores de código (geralmente
divisões da página como menu, cabeçalho, etc.).
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
A principal função do HTML é dar significado ao conteúdo. Enquanto a
maioria das tags HTML aplicam algum significado (p quer dizer
parágrafo, h1 quer dizer cabeçalho, etc.), as tags span e div não têm
significado algum.
Elas são usadas para agrupar um bloco de HTML e aplicar alguma informação
a esse bloco, na maioria das vezes usando os atributos class e id para
associar o elemento com um seletor de classe ou id CSS.
A diferença entre span e div é que span é um elemento inline e geralmente
é usado para um pequeno bloco de HTML, e div é um elemento de bloco (o
que basicamente é equivalente a ter uma quebra de linha antes e depois do
elemento) e é usado para agrupar blocos maiores de código (geralmente
divisões da página como menu, cabeçalho, etc.).
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
Os elementos HTML podem ser classificados de duas formas:
• Elementos inline
• Elementos de bloco
Esta classificação determina como o elemento HTML deverá ser
exibido no navegador.
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
Elementos de Bloco:
Um elemento de bloco utiliza toda a largura disponível
e cria uma linha antes e depois de si, considerando o
elemento HTML no qual está inserido.
Como exemplo de elementos de bloco temos:
•P
• DIV
•H1,H2,H3,H4...
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
Elementos inline:
Um elemento inline não cria linhas antes e
depois de si, apenas se misturando com
elementos que estão próximos.
Como exemplo de elementos inline temos:
• <span>
• <a>
• <i>
• <b>
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
Exemplo 1:
<p> Aqui eu tenho um parágrafo e uma palavra em <span style=“color:red;”> vermelho</span> !</p>
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
Exemplo 2:
<p> Aqui eu tenho um parágrafo e uma palavra em <div style=“color:red;”> vermelho</div> !</p>
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
Exemplo 3:
Thiago Miranda dos Santos Souza
WEBDESIGN
Divs e Spans
Atributos comuns para div e span
Atributos
Descrição
Class
Define o nome ou um conjunto de nomes de classe a um elemento.
Pode atribuir‐se o mesmo nome de classe ou conjunto de nomes de
classe a vários elementos. Quando se atribuir um conjunto de nomes
os nomes devem ser separados por caracteres de espaço em branco.
Normalmente usam‐se nomes de classe para aplicação de regras de
formatação CSS a um elemento.
Id
Define uma identidade ID a um elemento. Esta ID deve ser única no documento. Esta ID pode ser usada em guias aplicados do lado do cliente (tais como os escritos em JavaScript) para selecionar elementos ou para aplicar regras de formatação CSS ou para criar relações entre elementos. Title
Propicia informação auxiliar
Thiago Miranda dos Santos Souza
WEBDESIGN
Id e Class
O nome dos ids devem ser únicos. Não pode haver mais de um id com mesmo nome em uma página. Lembre‐se disso!
Cada elemento pode ter apenas um ID;
Cada página pode ter apenas um elemento com aquele ID.
O Class tem a mesma utilidade que o ID: identificar elementos. Só que ele serve para criar um grupo, uma classe de elemento
que terão características iguais. Então, se você tem três
destaques, e esses três destaques terão as mesmas
características, como por exemplo, fundo preto, cor branca, e
tipo da fonte será Verdana, você definirá o mesmo nome de
classe para esses elementos.
Você pode usar a mesma classe para vários elementos;
Você pode usar várias classes para um mesmo elemento.
Thiago Miranda dos Santos Souza
WEBDESIGN
Id e Class
Exemplo:
<div id=“topo">conteúdo</div>
<div id=“menu">conteúdo</div>
<div id=“conteudo">conteúdo</div>
<div class="destaques"> Aqui vai o texto </div>
<div class="destaques"> Aqui vai o texto </div>
Thiago Miranda dos Santos Souza