Introdução ao HTML / CSS
parte 3
Prof. Maurício Braga
div e span
◼ Tags de propósito genérico, costumam ser utilizadas para
auxiliar na estilização do visual da página.
◼ Servem para delimitar e agrupar outros elementos em
HTML.
◼ A tag div faz o agrupamento de elementos a nível de bloco
e a tag span funciona a nível de linha, permitindo a
marcação de texto sem quebrar a linha.
Exemplo uso span
<html><head>
<style>
.texto-vermelho {
color: red;
}
</style></head>
<body>
<p> Um texto qualquer, mas <span class="texto-
vermelho">aqui está vermelho</span> e aqui não está
vermelho. </p>
</body></html>
Adicionando figuras
◼ Figuras podem ser adicionadas a uma página usando a
tag <img>.
Ex: <img src=“[Link]"
Ex: <img src=“imagens/[Link]">
Ex: <img src="[Link]
◼ Definindo um papel de parede para a página:
<body background="[Link]">
Adicionando figuras
◼ Parâmetros que podem ser utilizados com o <img>:
Alt = nome que será exibido se o navegador não puder exibir
imagens ou se a imagem não for encontrada. Útil também para
deficientes visuais que usam programas que lêem a página para
eles.
Align = indica como o texto vai ser alinhado em relação a imagem.
<img alt="ROSTO" src=“[Link]" align="middle">.
Centralizando imagens com CSS
◼ Uma maneira de centralizar uma imagem na horizontal é
colocar a imagem dentro de um contêiner no nível de
bloco (como uma div) e usar a propriedade text-align. Ex:
<style>
div {
text-align: center;
}
</style>
<div>
<img src="[Link]">
</div>
Definindo uma classe de centralização
◼ Podemos definir uma classe que aplica uma centralização horizontal a
qualquer elemento, sem mexer nas margens superior e inferior:
.centraliza_elemento {
margin-right: auto;
margin-left: auto;
}
◼ Para adicionar essa propriedade de centralização, baste aplicar a
classe ao elemento:
<div class=" centraliza_elemento">
<p>texto centralizado</p>
</div>
<figure> e <figcaption>
◼ A tag <figure> define uma imagem em conjunto com a tag <img>. É
possível adicionar adicionar uma legenda para a imagem por meio da
tag <figcaption>.
<figure>
<img src="img/minha_imagem.png" alt="Foto da praia de Boa Viagem">
<figcaption>Praia de boa viagem</figcaption>
</figure>
Exercício
◼ Crie a página da
sua banda
preferida, como
no exemplo ao
lado, usando as
tags:
◼ style, <a> (com
href), <p>,
<img>,
Exemplo
<html><head>
<style>
body { background-color:#D2B48C; }
.titulo {
font-family:"Segoe script";
font-size:40px;
color:blue;
text-align: center;
}
p {
font-family:'Cambria';
font-size:20px;
color:black;
}
Exemplo
div {
text-align: center;
}
</style>
</head>
<p class="titulo"> Depeche Mode </p>
<div>
<img src=“[Link]"/>
</div>
<p>
<a href="[Link] Depeche Mode </a> é
uma banda inglesa de música eletrônica formada em
1980, em Basildon, Essex, na Inglaterra.
</p>
Exemplo
<p>
A banda era inicialmente formada por David Gahan (vocalista),
Martin L. Gore (tecladista, guitarrista, vocalista
e compositor a partir de 1981), Andrew Fletcher (tecladista,
baixista) e Vince Clarke (tecladista e compositor
até 1981). </p>
</body>
</html>
Criando tabelas
tag efeito
<table> Cria uma tabela. Pode utilizar o parâmetro
border para especificar a espessura da borda.
Ex: <table border = 1>
<th> Cria um titulo de coluna.
<tr> Cria uma linha dentro da tabela.
<td> Especifica o conteúdo de uma coluna dentro de
uma linha na tabela
Exemplo
◼ Construa uma página que exiba este resultado:
Solução
<html>
<body>
<table border = 1>
<tr> <th>Nome <th>Telefone <th>Codigo </tr>
<tr> <td>Augusto <td>3301-0000<td> 81 </tr>
<tr> <td>Ricardo <td>4404-0001<td> 81 </tr>
<tr> <td>Valério <td>5505-0005<td> 81 </tr>
</table>
</body>
</html>
Usando divisores horizontais
◼ Para criar divisores horizontais,
adicione a propriedade border-
bottom para as tags <th> e <td>. Ex:
table {
border-collapse: collapse;
width: 50%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid black;
}
Os atributos rowspan / colspan
◼ Fornecem a mesma funcionalidade que “mesclar célula”
em planilhas como o Excel.
◼ Rowspan → Especifica o número de linhas que uma
célula deve abranger, permitindo que uma única célula
da tabela ocupe a altura de mais de uma célula ou linha.
◼ Colspan → Especifica o número de colunas que uma
célula deve abranger, permitindo que uma única célula
da tabela ocupe a largura de mais de uma célula ou
coluna.
Os atributos rowspan / colspan
◼ Pode ser usado com os elementos <td> e <th> em uma
tabela HTML.
◼ Ex:
<tr> <td colspan="2">Ocupa duas colunas</td></tr>
Exemplo
<html> <head>
<style> table, th, td {
border: 1px solid black;
} </style>
</head>
<body>
<table>
<tr>
<th>Mês</th> <th>Gasto</th>
</tr>
<tr> <td>Janeiro</td> <td>$100</td>
</tr>
Exemplo
<tr>
<td>Fevereiro</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Total: $180</td>
</tr>
</table>
</body>
</html>
Exemplo
Bordas em tabelas
◼ Ao definir tabelas como no exemplo anterior,
percebemos que elas possuem borda dupla. Isso ocorre
porque os elementos <th>, <td> e <table> possuem
cada um a sua borda.
◼ Para remover a borda dupla, use a propriedade border-
colapse no CSS. Ex:
table {
border-collapse: collapse;
}
Bordas em tabelas
◼ Para definir uma borda
externa apenas para a
tabela, use a propriedade
border APENAS para a
tabela (sem defini-la
também para os
elementos th e td):
table {
border: 1px solid;
}
Definindo tamanho / centralizando
tabelas com CSS
◼ Use a propriedade width para especificar a largura da tabela (100%
irá definir a largura como ocupando toda a página).
◼ Para centralizar uma tabela, defina as propriedades margin-left e
margin-right com o valor auto. Ex:
table {
width: 40%;
margin-left: auto;
margin-right: auto;
}
Alinhamento horizontal em uma tabela
◼ A propriedade text-align define o alinhamento horizontal
(left, right, ou center) do conteúdo da tag <th> ou <td>.
◼ Por padrão, o conteúdo em <th> é centralizado e o
conteúdo de <td> é alinhado a esquerda.
◼ Para centralizar o conteúdo de uma célula (<td>) use:
td {
text-align: center;
}
Alinhamento vertical em uma tabela
◼ A propriedade vertical-align define o alinhamento
vertical (top, bottom, ou middle) do conteúdo da tag <th>
ou <td>.
◼ Por padrão, o alinhamento vertical do conteúdo em <th>
e <td> é middle. O exemplo altera para bottom:
td {
height: 50px;
vertical-align: bottom;
}
Exemplo – [Link]
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>Exemplo alinhamento vertical em uma célula</h2>
<table>
<tr><th>NOME</th>
<th>CÓDIGO</th>
<th>IDADE</th>
</tr>
Exemplo – [Link]
<tr>
<td class="top">Carlos (top)</td>
<td class="middle">12 (centralizado)</td>
<td class="bottom">55 (bottom)</td>
</tr>
<tr>
<td class="bottom">RAKESH (bottom)</td>
<td class="middle">124 (centralizado)</td>
<td class="top">24 (top)</td>
</tr>
</table>
</body>
</html>
Exemplo – [Link]
table, th, td {
border-collapse: collapse;
border: 2px solid black;
width: 500px;
}
td {
font-size: 12px;
height: 50px;
}
.top {
vertical-align: top;
}
Exemplo – [Link]
.bottom {
vertical-align: bottom;
}
.middle {
vertical-align: middle;
}
Exemplo
Exercício
◼ Monte a tabela abaixo em uma página HTML,
colocando sua foto e seus dados.
Solução
<HTML><head> <link rel="stylesheet" href="[Link]"> </head>
<BODY>
<TABLE >
<TR> <TD class="td_imagem" rowspan=2>
<IMG ALT="FACE" SRC="[Link]">
</TD>
<TD class="td_titulo" COLSPAN=2>
<span class="nome">Ricardo Bezerra da Silva</span><br>
estudante de computação
</TD>
<TR> <TD class="informacoes_extras">
<span class="item_informacao">Endereço: </span><BR>
Ricardo Silva <BR>
Rua Bariloche, 23 <BR>
Jardim Atlântico, Olinda <BR>
Brasil </TD>
Solução
<TD class="informacoes_extras">
<span class="item_informacao">Instagram:</span>
[Link]
<span class="item_informacao">Youtube: </span>
[Link] <BR>
<span class="item_informacao">Facebook:
</span>[Link] <BR>
<span class="item_informacao">Twitter:
</span>[Link] <BR>
<span class="item_informacao">email:</span>
ricardo@[Link]<BR>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Solução
table {
border: 2px;
width: 80%;
background-color: #FFF8D0;
border-style: double;
border-spacing: 3px;
}
th, td {
border: 2px;
border-style: solid;
}
.td_imagem {
text-align: center;
vertical-align: middle;
width: 320px;
height: 210px;
}
Solução
.td_titulo {
text-align: left;
vertical-align: middle;
font-weight: bold;
}
.nome {
color: #FF0000;
font-size: 50px;
font-weight: bold;
}
.informacoes_extras {
text-align: left;
vertical-align: top;
}
.item_informacao {
font-weight: bold;
}
Cell padding
◼ Define o espaço entre as bordas da célula e o conteúdo
da célula.
◼ Por padrão, o padding (preenchimento) é definido como 0.
◼ Para adicionar padding nas células da tabela, podemos
fazer como no exemplo abaixo:
th, td {
padding: 15px;
}
Exemplo cell padding
<html><head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td { padding: 15px; }
</style></head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding especifica o espaçamento usado entre o conteúdo da
célula e suas bordas.</p>
Exemplo cell padding
<table >
<tr><th>Primeiro Nome</th><th>Sobrenome</th><th>idade</th></tr>
<tr><td>Jill</td><td>Smith</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>John</td><td>Doe</td><td>80</td></tr>
</table>
<p><strong>Dica:</strong> Modifique o atributo padding para 50, depois
5, depois 0px e veja o efeito.</p>
</body>
</html>
Cell spacing
◼ Define o espaçamento entre as células. Por default, o
espaçamento é definido em 2 pixels.
◼ Para alterar o espaçamento, utilize a propriedade
border-spacing como no exemplo abaixo:
table {
border-spacing: 30px;
}
Exemplo cell spacing
<html><head>
<style>
table, th, td {
border: 1px solid black;
}
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<h2>Exemplo Cellspacing</h2>
Exemplo cell spacing
<table style="width:100%">
<tr><th>primeiro nome</th><th>sobrenome</th><th>idade</th></tr>
<tr><td>Carlos</td><td>Falcão</td><td>70</td></tr>
<tr><td>Beatriz</td><td>Lima</td><td>25</td></tr>
<tr><td>João</td><td>Silva</td><td>43</td>
</tr>
</table>
</body>
</html>
Exercício: Monte a seguinte tabela:
Dicas:
Para fazer a legenda, use a tag caption.
Use rowspan e colspan para fazer células de tamanhos variados.
Solução – arquivo [Link]
body {
color: blue;
}
table, th, td {
border: 2px solid black;
border-collapse: collapse;
font-size:30px;
}
table {
width: 40%;
/* centraliza a tabela */
margin-left: auto;
margin-right: auto;
}
Solução – arquivo [Link]
tr {
text-align: center;
}
td {
background-color: yellow;
}
caption {
caption-side: bottom;
}
Solução
<html>
<head> <link rel="stylesheet" href="[Link]"> </head>
<body>
<table cellspacing="1" cellpadding="3">
<caption>
Tabela 1. Estatística
</caption>
<tr>
<th rowspan="2" colspan="2"> </th>
<td colspan="3" align="center"><b>Quantitativo estudantes por
turma</b></td>
</tr>
Solução
<tr>
<td><b>Alunos</b></td>
<td><b>Alunas</b></td>
<td><b>Professor</b></td>
</tr>
<tr>
<td rowspan="4"><b>Turmas</b></td>
<td><b>A</b></td>
<td>20</td>
<td>5</td>
<td>João Pedro</td>
</tr>
Solução
<tr>
<td><b>B</b></td>
<td>21</td>
<td>3</td>
<td>idem</td>
</tr>
<tr>
<td><b>C</b></td>
<td>25</td>
<td>2</td>
<td>Maria José</td>
</tr>
Solução
<tr>
<td><b>D</b></td>
<td>20</td>
<td>0</td>
<td>idem</td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>86</td>
<td>10</td>
<td>2</td>
</tr>
</table>
</body></html>
Listas
◼ Permitem que um conjuntos de itens
relacionados sejam exibidos de forma
agrupada.
◼ Listas podem ser:
Ordenadas;
Não ordenadas.
Lista não ordenada
tag efeito
<ul> Define uma lista não ordenada.
Ex: <ul> itens da lista… </ul>
<ol> Define uma lista ordenada.
Ex: <ol> itens da lista… </ol>
<li> Define um item dentro da lista.
Exemplo
◼ Crie a página
ao lado, usando
as tags <ul>,
<ol> e <li>:
Solução
<html>
<body>
<h2>Lista não ordenada:</h2>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
<h2>Lista ordenada:</h2>
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
</body>
</html>
Hover
◼ Seleciona e estiliza um item ao passar o mouse sobre
ele.
◼ Pode ser usado com todos os elementos, sendo
entretanto bem utilizado com links.
◼ Ex: para usar em uma linha de uma tabela:
tr:hover {background-color: red;}
Exemplo
<html><head><style>
p:hover {
background-color: yellow;
}
a:hover {
background-color: red;
}
</style></head>
<body>
<h1>Exemplo Hover</h1>
<p>Hover adiciona um estilo ao passar o mouse por cima.</p>
<br><br><br>
<a href="[Link]
</body>
</html>
Colorindo linhas alternadas de uma
tabela
◼ Uma maneira de melhorar a legibilidade de tabelas grandes é
colorir linhas alternadas. Para isso, use o seletor nth-child() e
adicione uma cor de fundo para todas as cores pares ou ímpares:
◼ Por exemplo, a tabela abaixo tem fundo cinza claro para as linhas
pares e branco para as ímpares. As regras para isso são
extremamente simples:
tr:nth-child(even) {background: #CCC} /* linhas pares */
tr:nth-child(odd) {background: #FFF} /* linhas ímpares */
Exercício
◼ Monte a tabela abaixo. As linhas pares são brancas, as linhas
ímpares são amarelas e a linha onde o mouse está passando fica
na cor vinho.
Exemplo
<html><head><style>
h1 {
text-align: center;
}
#famosos {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
border: 1px solid black;
width: 50%;
/* centraliza a tabela */
margin-left: auto;
margin-right: auto;
}
Exemplo
#famosos td, #famosos th {
border: 1px solid black;
padding: 8px;
}
#famosos tr:nth-child(even){background-color: #d0e41c;}
#famosos tr:hover {background-color: #640d0d;}
#famosos th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #FF0000;
color: white;
}
</style></head>
Exemplo
<body>
<h1>Tabela com geri geri</h1>
<table id="famosos">
<tr> <th>Nome</th> <th>País</th> </tr>
<tr> <td>Vince Clarke</td> <td>Inglaterra</td> </tr>
<tr> <td>Alan Wilder</td> <td>Inglaterra</td> </tr>
<tr> <td>Cyndi Lauper</td> <td>EUA</td> </tr>
<tr> <td>Madonna</td> <td>EUA</td> </tr>
<tr> <td>Magic Paula</td> <td>Brasil</td> </tr>
<tr> <td>Ayrton Senna</td> <td>Brasil</td> </tr>
</table>
</body>
</html>
Introdução ao HTML / CSS
parte 3
Prof. Maurício Braga