Estrutura HTML e tags para tabelas

HTML
Figuras: Aula 3
Estrutura de um documento html
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
https://www.homehost.com.br/blog/tutoriais/tags-html/
Recapitulando
<h1> Gato Tigrado</h1>
<hr>
<body bgcolor="pink">
<p><font size=5>O <font color="blue">gato tigrado</font> tem variações de<u>
cores</u>,
podendo ser <br><i>marrom, chocolate, canela, amarelo, cinza</i>,
entre várias <br> outras combinações.</font> </p>
<hr>
<p><b>Comportamento do gato cinza tigrado</b></p>
<ol>
<li><a href="https://www.ifsp.edu.br/">Instituto Federal</a>
<li><a href="https://spo.ifsp.edu.br" target="_blank">Campus São Paulo</a>
<li><a href="https://www.petlove.com.br/dicas/tres-curiosidades-sobre-os-gatos-cinza-
tigrados"target="_blank">Gato Tigrado</a>
</ol>
<ul>
<li>O gato cinza tigrado tinha vantagens na natureza</li>
<li>A marca de um “M” na testa dos Greys Tabbys é rodeada de lendas</li>
<li>A genética dos gatos cinzas malhados</li>
</ul>
<dl>
<dt>Diferentes pelagens</dt>
<dd>marrom</dd>
<dd>chocolate</dd>
<dd>canela</dd>
<dd>amarelo</dd>
<dd>cinza</dd>
</dl>
Inserir Imagem
◦ As imagens na Internet são arquivos GIF ou arquivos JPG .
◦ Os arquivos que irão aparecer na página deverão estar armazenado
na mesma pasta onde está seu arquivo "html".
<img src=“logo.gif">
Orientação
◦ Por padrão, seu texto e suas imagens serão justificados à esquerda quando
exibidos no navegador, o que significa que eles serão automaticamente
alinhados à margem esquerda.
◦ Direita é o padrão
◦ Centro:
<center><img src="logo.gif"></center>
09/05/2023
Imagem
◦ Legenda
◦ <img src="mae.jpeg" title="que linda" >
◦ Acrescenta link, legenda e abre em outra página
◦ <a href="https://www.adeniumplantshop.com.br" title="Adenium Plant Shop"

target="_blank" ><img src='mae.jpeg' alt="Adenium Plant Shop" /></a>
Definir a altura e largura da imagem
• O atributo "width" especifica a largura de uma imagem, em pixels.

• O atributo "height " especifica a altura de uma imagem, em pixels.
• No HTML 4.01, a altura pode ser definida em pixels ou em % do elemento
que a contém. No HTML5, o valor deve ser definido em pixels.
img src='mae.jpeg' alt="Mãe de milhares" height=42 wight=42 />

Borda
◦ <img src="mae.jpeg" border=4 >
◦ <A href="url"><img src="imagem" alt="descrição" border=4></A>
Figura atras do texto
◦ <body background="mae.jpeg">
Exercício 1
Inserir foto e link
borda
legenda
link
Tags de comentários
◦ Dentro de um documento, muitas vezes precisamos fazer comentários, para facilitar no desenvolvimento.
◦ Dessa forma, na tag de comentários (que é aberta com <!– e fechada com –> ), todos elementos incluídos dentro dela serão
apenas comentários, ou seja, não serão visíveis no navegador.

<p> Boa noite estudantes do Campus SPO </p> <!—p significa parágrafo -->
◦ O resultado será:
Boa noite estudantes do Campus SPO
https://www.homehost.com.br/blog/tutoriais/tags-html/
TABELAS
 As tabelas são listas de dados em duas dimensões e são compostas por linhas e colunas.
EXEMPLO DE TABELA
HTML – ESTRUTURA BÁSICA
Tabelas
◦ Assim como toda informação que você quiser exibir na janela do navegador, a tabela
também deve estar entre as tags <body> e </body> do seu documento HTML. Comece a
tabela com a tag a seguir: <table>
◦ Cada linha horizontal em uma tabela começa com a tag: <tr>
◦ E cada conjunto de dados dentro da linha começa com a tag: <td>
IFSP
São Paulo Guarulhos

Pirituba Bragança Paulista
https://www.tc.df.gov.br/ice4/vordf/outros/html-comandos.html
<body>
<table>
<tr>
<td>IFSP</td>
<td></td>
</tr>
<tr>
<td>São Paulo</td>
<td>Guarulhos</td>
</tr>
<tr>
<td>Pirituba</td>
<td>Bragança Paulista</td>
</tr>
</table>
</body>
Tabela - Borda
◦ A tag de borda (border="value") é colocada dentro da tag inicial da tabela. Você pode
especificar a espessura do contorno, determinando um valor (vamos estabelecer o valor "1").
<table border = 1>
◦ Mudar a cor do fundo (background color) da tabela toda com a tag "bgcolor" dentro da tag
"table" inicial:
<table border = 1 bgcolor="pink">
◦ Uma cor de fundo também pode ser atribuída a uma linha ou a uma célula dentro da tabela.
Basta adicionar bgcolor="cor" à tag <tr> ou <td> para colorir aquela parte específica da tabela.
<tr bgcolor="red">
Tabela – alinhamento
◦ Por padrão, todos os conteúdos das células dentro de <table border = 1 bgcolor="pink">
<tr bgcolor="red">
uma tabela (com exceção dos cabeçalhos) são
<td colspan="2" align="center">IFSP</td>
centralizados verticalmente e justificados à esquerda. </tr>
Para mudar o alinhamento do conteúdo de uma <tr align="center">
célula, coloque as tags a seguir dentro das <td>São Paulo</td>
tags <td>, <th> ou <tr>: <td>Guarulhos</td>
</tr>
◦ <tr align="center"> <tr align="center">
<td>Pirituba</td>
◦ Extensão de célula (cellspanning): o "spanning" <td>Bragança Paulista</td>
acontece quando uma célula ocupa o lugar de duas </tr>
ou mais células na tabela. Um exemplo de spanning </table>
de coluna:
<body>
<table border = 1 bgcolor="pink">
<tr bgcolor="red">
<td colspan="2" align="center">IFSP</td>
</tr>
<tr align="center">
<td>São Paulo</td>
<td>Guarulhos</td>
</tr>
<tr align="center">
<td>Pirituba</td>
<td>Bragança Paulista</td>
</tr>
</table>
</body>
<table border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Profissão</th>
</tr>
<tr>
<td>Ted</td>
<td>22</td>
<td>Estudante</td>
</tr>
<tr>
<td>Ralf</td>
<td>26</td>
<td>Designer</td>
</tr>
</table>
1- CRIAR UMA TABELA COM 4 LINHAS E DUAS COLUNAS
2 - MESCLAR A PRIMEIRA LINHA
3 – INSERIR COMO TÍTULO (TH) NA SEGUNDA LINHA
4 – NA TERCEIRA LINHA COLOCAR DUAS FIGURAS COM TAMANHO
PEQUENO UMA EM CADA COLUNA
5 – NA QUARTA LINHA COLOCAR DUAS FIGURAS COMO LINK NAS DUAS
COLUNAS
DOMÉSTICOS
GATO EM NEGRITO : CACHORRO EM

TH NEGRITO : TH
FOTO DO GATO FOTO DO CÃO
FOTO DO GATO FOTO DO CÃO COM

COM LINK LINK
TABELA – TÍTULO -VERTICAL
<table border="1">
<tr>
<th>Nome:</th>
<td>Ted</td>
</tr>
<tr>
<th>Idade:</th>
<td>22</td>
</tr>
</table>
<table border="1">
<thead>
<tr>
<th>titulo 1</th>
<th>titulo 2</th>
<th>titulo 3</th> </tr>
</thead>
<tbody>
<tr>
<td>Body1 linha1</td>
</tr> <tr>
<td>Body3 linha2</td> </tr>
</tbody>
<tfoot>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tfoot>
</table>
TABELA – CÉLULA VAZIA
<table>
<tr>
<th> </th>
<th>Valor</th>
</tr>
<tr>
<td>Item 1</td>
<td>R$10,00</td>
</tr>
<tr>
<td>Item 2</td>
<td>R$20,00</td>
</tr>
</table>
TABELA – MESCLAR
ROWSCAN
<table border="1">
<tr>
<th>Primeiro Nome:</th>
<td>Ted</td> </tr>
<tr>
<th rowspan="2">Telefone:</th>
<td>8888-8888</td>
</tr>
<tr>
<td>9999-9999</td>
</tr>
</table>
TITULO DA TABELA
<table border="1">
<caption>Exemplo de Título</caption>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
</tr>
<tr>
<td>Ted</td>
<td>Junior</td>
</tr>
<tr>
<td>Ted</td>
<td>Neto</td>
</tr>
</table>

Estrutura HTML e tags para tabelas

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Estrutura HTML e tags para tabelas

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

◦ <img src="mae.jpeg" title="que linda" >

◦ Acrescenta link, legenda e abre em outra página

◦ <a href="https://www.adeniumplantshop.com.br" title="Adenium Plant Shop"

• O atributo "width" especifica a largura de uma imagem, em pixels.

img src='mae.jpeg' alt="Mãe de milhares" height=42 wight=42 />

◦ <img src="mae.jpeg" border=4 >

São Paulo Guarulhos

GATO EM NEGRITO : CACHORRO EM

FOTO DO GATO FOTO DO CÃO

FOTO DO GATO FOTO DO CÃO COM

Você também pode gostar