25/04/2022

PADRÕES PARA CONTEÚDOS WEB

*** Imagens, Listas e Tabelas ***

HTML e CSS

Professora: Cristiane Maciel Rizo

cris@unoeste.br

2º Módulo: até 05/05

 Trabalhando com listas e tabelas
 Folha de Estilo em Cascatas (CSS)
 HTML Images
 HTML Tables
 HTML Lists
 IDE é o Ambiente de Desenvolvimento Integrado
*** Komodo Edit***
https://www.activestate.com/products/komodo-ide/downloads/edit/#

Atividade Avaliativa: Envio de Arquivo - até 16/05

1
 25/04/2022

Os formatos de imagens mais usados e aceitos pela WEB são:

JPG, GIF, PNG e SVG:
 JPG (Joint Photographic Experts Group)
 GIF (Graphics Interchange Format)
 PNG (Portable Network Graphics)
 SVG (Scalable Vector Graphics)
Para exibir imagens é utilizada a tag: <img/>
<img src="unoeste.png" alt="Logotipo da UNOESTE"/>
Atributos:
 src: é a URL do arquivo da imagem.
 alt: define um texto alternativo para a imagem, mostrado quando a imagem não puder
ser apresentada.
 height (altura) e width (largura): customizar o tamanho da imagem em pixels.

A propriedade margin definida para "0 auto" indica que as margens superiores
e inferiores do seletor serão de 0; e as margens da direita e esquerda serão
"automáticas", ou seja, o browser irá calcular o espaço que o seletor está
ocupando no controle ao qual pertence e dividirá por 2, centralizando a
imagem.
Exemplo:
.centraliza{width: 500px; margin: 0 auto;}
Podemos centralizar uma página ou elementos HTML de bloco.

2
 25/04/2022

Alinhamento vertical de uma imagem em relação ao texto:

vertical-align: modo-de-alinhamento;
Os valores para a propriedade são:
• top - o topo da imagem alinha com a linha top.
• text-top - O topo da imagem alinha com a linha text-top.
• baseline - Este é o alinhamento padrão.
• middle - O ponto médio da imagem alinha com a linha baseline.
• text-bottom - A parte inferior da imagem alinha com a linha text-bottom.
• bottom - A parte inferior da imagem alinha com a linha bottom.

<figure>: área destinada para conteúdos como imagens,

ilustrações, diagramas, fotos, gráficos, videos, linha de
código e similares.
<figure>
<figcaption>Gráfico: Média da turma</figcaption>
<img src="grafico.png" alt="Média da turma"/>
</figure>

3
 25/04/2022

Propriedade:
• opacity: 0.65 - Previsto nas CSS3 já é suportado atualmente pelo Chrome, Firefox,
Ópera, o valor da opacidade varia de 0 a 1;
• -moz-opacity: 0.65 - Declaração proprietária para servir navegadores Mozilla, o valor
da opacidade varia de 0 a 1;
• filter: alpha(opacity=65) - Declaração proprietária para servir navegadores IE o valor
da opacidade varia de 0 a 100.

Para definir uma imagem a ser usada como padrão de fundo usa-se a
propriedade
background-image:
background-image: url(“fipp.gif”);

4
 25/04/2022

Existe uma propriedade que permite definir como a imagem irá preencher o espaço do
padrão de fundo: background-repeat.
Possíveis valores:
• no-repeat: imagem não deve ser repetida.
• repeat-x: para repetir a imagem no sentido horizontal do elemento HTML ao qual ela
está associada.
• repeat-y: para repetir a imagem no sentido vertical do documento, até atingir a
margem sua margem inferior.
• repeat: para repetir a imagem tanto horizontal como verticalmente, preenchendo
toda a área de visualização do elemento.
Se esta propriedade não for especificada, o browser adotará o valor default repeat.

É possível controlar se a imagem irá acompanhar a rolagem da tela ou permanecerá fixa

através da propriedade background-attachment.
Possíveis valores:
• Scroll: quando a imagem acompanha a rolagem da tela (padrão).
• Fixed: quando a imagem não acompanha a rolagem da tela
É possível controlar a posição da imagem dentro do elemento HTML através da propriedade
background-position:
background-position: coordenada-horizontal coordenada-vertical;
Exemplo: os valores 30px 10px para coordenada, indicam que o canto superior esquerda da
imagem deve estar a 30px da borda esquerda da área de visualização e a 10px da borda
superior desta mesma área.

10

5
 25/04/2022

O uso de listas é uma outra forma de mostrar informações.

Em HTML temos listas ordenadas (sequenciais ou numeradas) e não-

ordenadas.

As listas ordenadas apresentam seus itens um após o outro,

acompanhados de um número de sequência.

11

O par de tags que define uma lista ordenada é <ol></ol> e seus itens são
definidos por <li></li>.
O par de tags que define uma lista não-ordenada é <ul></ul> e seus itens são
também definidos por <li></li>.

12

6
 25/04/2022

O elemento <dl> destina-se a marcar uma lista (lista de definição).

Cada grupo consiste de um ou mais nomes (elementos <dt>) seguido
por um ou mais valores (elementos <dd>).

É possível criar listas que possuem sub-listas, ou seja, Listas

Aninhadas (ou Alinhadas!).

13

Propriedade Descrição
list-style-type Especifica o símbolo que deve representar cada marca de item

list-style-type:lower-roman;

Propriedade Descrição
list-style-image Imagem ser utilizada como marca de item de lista.

list-style-image:url(‘imagem.gif');

É possível tirar o marcador.

Exemplo: list-style-type: none;

http://www.w3schools.com/cssref/pr_list-style-type.asp

14

7
 25/04/2022

Podemos criar listas na horizontal, utilizando a propriedade

display:inline

.menu li {display:inline;
padding-left: 50px;
padding-right:50px}

<ul class="menu">
<li> Arquivo </li>
<li> Editar </li>
<li> Exibir </li>
<li> Navegar </li>
</ul>

15

Uma tabela tem dois componentes:

 linhas e colunas.
Na interseção desses componentes os dados ficam armazenados.
Essa interseção é chamada de célula.
As tabelas são estruturas poderosas da linguagem HTML.
• Praticamente tudo o que é possível ter na seção body pode
estar estruturado dentro das células de uma tabela.

16

8
 25/04/2022

Uma tabela é identificada pelas tags

<table> e </table>
Cada linha de uma tabela, é identificada pelas tags
<tr> e </tr>
Em cada linha são definidas células com as tags
<td> e </td>
O procedimento para a criação de uma tabela implica a definição
sequencial, da esquerda para a direita e de cima para baixo, do
conteúdo de cada célula.

17

As tags <th> e </th> definem um cabeçalho para a tabela.

As tags <caption> e </caption> definem uma legenda para a
tabela.
<table>
<caption>CSS & HTML</caption>
<tr>
<th> Web </th>
<th> Web </th>
<th> Web </th>
</tr>
...

18

9
 25/04/2022

Para organizar melhor as linhas das tabelas, podem ser usados outros 3
elementos:
 <thead> cabeçalho da tabela
 <tfoot> rodapé da tabela
 <tbody> corpo da tabela
As tags <thead> e <tfoot> devem aparecer na parte inicial da definição da
tabela
Uma tabela só pode ter uma tag <thead> e <tfoot>, mas quantas tags <tbody>
forem necessárias.
Cada elemento deve conter pelo menos uma linha (<tr>)

19

O atributo colspan é usado na tag <td> para indicar quantas colunas estarão
contidas em uma célula.
O atributo rowspan também é usado na tag <td> para indicar quantas linhas
estarão contidas em uma célula.

20

10
 25/04/2022

Tipos de bordas:

Exemplos:
http://maujor.com/tutorial/interativo/iborder.php
https://www.w3schools.com/html/html_tables.asp

21

Definindo a borda:
border: 1px solid #4cff00;
O primeiro valor define a espessura da borda.
O segundo valor define o tipo da borda (sólida, pontilhada...).
O último valor define a cor da borda.

Qualquer declaração de medida CSS igual a ZERO não deve ser seguida de unidade. Não
se escreve 0 metros, 0 kilos, 0 litros, 0 pixel, 0 cm, pois ZERO é ZERO e não precisa ser
expresso por uma unidade de medida!!

22

11
 25/04/2022

Com a propriedade border-radius é possível deixar os cantos de alguns elementos

arrendondados:
border-radius: nível de arredondamento;
Com a propriedade box-shadow é possível colocar sombra nas bordas:
box-shadow: (1) posição horizontal (2) posição vertical (3)
distância da sombra (4) cor da sombra;

23

Pseudoclasses são seletores que especificam um estado de um elemento em relação ao

seletor. seletor:pseudoclasse{Propriedade:valor;}
Efeito zebrado:
Com os valores odd(ímpar) ou even(par), é possível selecionar os elementos ímpares ou pares.

table tr:nth-child(odd) //para todas as tabelas

{
background: lightgray;
}

.zebra tr:nth-child(odd) //somente para a tabela que chamar a classe

{
background: lightgray;
}

24

12
 25/04/2022

Apoio Bibliográfico

Fábio Flatschart HTML 5 Embarque Imediato. Porto Alegre: Kuarup. [Disponível na

BV Pearson]

Lemay, Laura; Colburn, Rafe; Tyler, Denise Aprenda a Criar Páginas Web com
HTML e XHTML em 21 Dias. Rio de Janeiro: Record. [Disponível na BV Pearson]

Deitel, Paul J.; Deitel, Harvey M. Ajax Rich Internet Applications e

Desenvolvimento Web para Programadores. São Paulo: Atlas. [Disponível na BV
Pearson]

Site - W3schools - http://www.w3schools.com

25

26

13