PROGRAMAÇÃO WEB 1

Objetivo: Desenvolver sites para WEB

Célia Guazzelli
Competência / Habilidades / Bases Tecnológicas
• Competência:
– Implementar páginas para a Internet.
• Habilidades:
– Desenvolver páginas para internet, utilizando linguagem de marcação de
texto.
– Utilizar linguagem de script para Web.
– Construir folhas de estilo.
• Bases Tecnológicas:
– Conceitos de desenvolvimento para a Web
– Linguagem de Marcação para a Web (HTML)
– Documento HTML mínimo, tags, atributos e conteúdo
– Estilos em Cascata (CSS)
– Construção de leiaute
– Framework para desenvolvimento responsivo e mobile-first (Bootstrap)
– Processamento script lado cliente (Javascript)
– Biblioteca Javascript cross-browser (JQuery)
 Conteúdos das Bases Tecnológicas
1. Conceitos de desenvolvimento para a Web
▪ Introdução e terminologia
▪ Apresentação do editor/IDE, navegadores e ferramentas
do desenvolvedor embutidas nos navegadores
2. Linguagem de Marcação para a Web (HTML)
Documento HTML mínimo, tags, atributos e conteúdo
▪ Elemento raíz, metadados e de scripting
▪ Seções e agrupamento de conteúdos
▪ Semântica textual e hyperlinks
▪ Imagens, vetores SVG e outros conteúdos embutidos
▪ Tabelas
▪ Formulários
3. Estilos em cascata (CSS)
▪ Modelo de estilo em cascata, regra CSS, seletores e
atributos
▪ Formatação CSS
▪ Box Model CSS
▪ Estilização de conteúdo
▪ Estilização de formulários
5. Framework para desenvolvimento responsivo e
mobile-first (Bootstrap)
▪ Instalação e apresentação da ferramenta
▪ Sistema de grade responsiva
▪ Componentes e estilização
▪ Formulários
6. Processamento script lado cliente (Javascript)
▪ Sintaxe básica, variáveis, tipos e escopo
▪ Controle de fluxo e manipulação de erro
▪ Laços e iteração
▪ Funções e manipulação Document Object Model (DOM)
▪ JSON (Javascript Object Notation)
▪ Cookies
7. Biblioteca Javascript cross-browser (JQuery)
▪ Instalação, função $() e seletores
▪ Eventos
▪ Manipulação do DOM e efeitos
▪ AJAX

4. Construção de leiaute
▪ Posicionamento padrão, absoluto e relativo
▪ Posicionamento com float, estático, fixo e com z-index
▪ Leiaute com largura fixa, líquido, elástico e híbrido
▪ Leiaute responsivo com media queries e mobile-first
 Internet
 Projeto ARPA
 Agência de Pesquisas
 em Projetos Avançados  Comunicação via linha
 DEC envia e-mails
 TCP/IP para ARPANET discado no Brasil - FAPESP

 Início da
Internet no
Brasil

1969 1974 1976 1978 1983 1988 1989 1989 1991

 Protocolo X.25

 ARPANET (rede criada para conectar os  ARPANET  Tim Berners-Lee,

centros militares do departamento de  Nasce o
(Acadêmica) cientista britânico, consórcio
defesa dos EUA durante a guerra fria)
 Stanford Research Institute  MILNET inventa a rede W3C para
 Linhas telefônicas dedicadas (Militar) mundial de padronizar o
 50 kbps
computadores HTML e o CSS
 Filme 1
Como funciona a internet
2010
https://www.youtube.com/watch?v=ZUxPW0H3TMU
Internet
•Maior rede de computadores do mundo

•Permite a troca de informações

•Faz a conexão com os sites de todo o mundo

•Páginas interligadas por meio de hipertextos

e links

•www - World Wide Web

Site
•Conjunto de informações apresentadas na
tela que estão divididas em páginas.

•Cada site contém uma “home page”, que é a

página principal

•O acesso às demais páginas é feito através de

links, que podem direcioná-lo para outras
páginas do mesmo site ou para outros sites
Links
•Também chamado de path absoluto diz ao servidor como
obter uma determinada informação em uma página.

•Pode vir incorporado junto com um texto, uma imagem,

um vídeo etc, ou pode ser digitado no endereço do
navegador.

•Quando é incorporado é chamado de Hyperlink e informa

ao navegador onde abrir a pagina Web.

•Hipertexto – É um recurso que acessa outro recurso, como

páginas, vídeos, áudios etc
Browser ou Navegador
•Browser (significa navegador em português) é um programa de
computador que possibilita as pessoas a navegarem na internet.

•Os Browsers são responsáveis pela comunicação com os

servidores Web, pois são eles que recebem os dados destes
servidores e processam as respostas.

•O Browser então interpreta as marcações da pagina

solicitada(denominada Tags), e exibe o conteúdo em forma de
imagens, textos e vídeos, etc.

•Antigamente, os primeiros Browsers tinham apenas texto, mas

com o tempo foram aperfeiçoando-se, criando mecanismos para
interagir com o usuário, com interfaces rápidas, coloridas e de
fácil acesso.
URL
•Uniform Resource Locator
•É um sistema de endereços que localiza uma
página.
•Exemplo: www.uol.com.br
Domínio
.gov – Governo Federal
•Nomenclatura do site .ind – Indústrias
.net – Provedores
•Segue uma hierarquia .edu – Educação
.org – ONGs
.com – Comércio
•www.uol.com.br

Registro brasileiro
Categoria comércio
Nome da empresa
Provedores
•Empresas especializadas em fornecer serviços
para a Internet: navegação ou hospedagem

•Provedores pagos: UOL, AOL, IG etc

•Provedores gratuitos: HOTMAIL, YAHOO, GMAIL

•Os provedores pagos podem oferecer serviços

diferenciados como suporte, maior espaço para
armazenamento, etc.
Servidores

•Os servidores são os computadores dos

provedores que armazenam os dados dos clientes
Hospedagem
•É possível hospedar gratuitamente páginas,
porém muitas vezes, é necessário aceitar
publicidade no meio dessas páginas.

•Para sites de empresas, é comum se pagar

por um domínio e pela hospedagem do site,
porém este domínio passa a ser exclusivo.
Protocolos
•Protocolo é a padronização das linguagens
de transferência de dados entre o Browser e
os servidores da Web
O principal protocolo de comunicação de rede para Internet é o TCP/IP (Transfer
Control Protocol/Internet Protocol) e é composto dos protocolos:

HTTP – Navegação na World Wide Web;

FTP – Transporte de arquivos;
SMTP – Envio de e-mail;
POP3 – Recebimento de e-mail;
SSH – Login remoto seguro;
DNS – Converte nome <-> IP;
WAP – Telefonia móvel;
IMAP – Troca de e-mails.
HTTP

•Hyper Text Transfer Protocol

•Protocolo de Transferência de Hipertexto

•É um método acordado para transferência

de documentos etc.
 Filme 2
Funcionamento da Internet: protocolo IP
https://www.youtube.com/watch?v=HNQD0qJ0TC4&src_vid=C5qNA
T_j63M&feature=iv&annotation_id=annotation_432709139
HTML

•HTML significa
Linguagem de Marcação de Hiper Texto.

•HTML- não é uma linguagem de programação

mas sim uma linguagem de marcação.

•Uma linguagem de marcação é um conjunto de

Tags (etiquetas) de marcação.
Salvando arquivos HTML
• Menu Iniciar > Programas > Acessórios > Bloco de notas
• Arquivo > Salvar como...
• Alterar o tipo de arquivo para: Todos os arquivos
• Alterar a codificação para UTF-8
• Salvar o arquivo com extensão .html
Salvando arquivos HTML
•Salvar o arquivo com extensão .html
•Usar a codificação UTF-8

•Também é possível usar o aplicativo de edição

Notepad: https://notepad-plus-plus.org/
Sintaxe
Sintaxe
Os códigos
•<html> define o documento todo
•<head> define o cabeçalho da página
•<title> define o título da página no navegador
•<body> significa o corpo da página
•<p>novo parágrafo

Dicas:
•Use sempre minúsculas nas Tags.
•A maioria dos navegadores exibirão o código
corretamente mesmo que você esqueça de marcar o
final do elemento.
Sintaxe
•Comentários podem ser Inseridos em um
texto HTML com <! ------- !>

•Exemplo: <! Isto é um comentário !>

•Servem somente para identificar partes das

marcações na codificação da página não
aparecendo quando a pagina é exibida no
Browser
Tags
•As tags são marcações cercadas de colchetes,
normalmente vem em pares como:
<b> é a tag de início
</b> é a tag de encerramento
•Exemplo:
<b> texto </b>
•Algumas tags possuem atributos, estes devem estar
sempre entre aspas duplas (“ “), embora alguns
navegadores aceitem aspas simples ou sem aspas:
<a href=“link”>texto</a>
•Outras tags não necessitam de tag de encerramento:
<br>
Tag <!DOCTYPE html>

• A declaração <!DOCTYPE html> deve ser a

primeira coisa em seu documento HTML,
antes mesmo da tag <html>.

• O <! DOCTYPE html> não é uma tag HTML, é

uma instrução para o navegador da web sobre
qual versão do HTML da página é escrito
dentro.
Exemplo de um doc HTML
<!DOCTYPE html>
<html>
<! Página desenvolvida em 01/10 !>
<head>
<title> Meu site </title>
</head>
<body>
<p> Este é meu primeiro parágrafo</p>
</body>
</html>
Exemplo de um doc HTML
<!DOCTYPE html>
<html>
<! Página desenvolvida em 01/10 !>
<head>
<title> Meu site </title>
</head>
<body>
<p> Este é meu primeiro parágrafo</p>
</body>
</html> Indentação
 Tag <meta>
• Meta Tag é um comando implementado no código de páginas web,
dentro da área <head> do site para passar instruções a programas
externos, como por exemplo, para passar aos sites de busca como o
Bing e o Google instruções sobre o título da página e uma breve
descrição a ser exibida nos resultados de busca, quais páginas devem
ou não ser indexadas, dentre outras instruções.

• Exemplo: <meta charset="UTF-8"> informa ao navegador a

codificação de caracteres que deve ser utilizada.

<meta http-equiv="content-type“ content="text/html; charset=utf-8" />

 Exercício 01
<!DOCTYPE html>
<html>
<! Programa criado em 01/07 !>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> Meu site </title>
</head>
<body>
<p> Este é meu primeiro parágrafo</p>
</body>
</html>
Exercício 01
Plano de fundo
•A cor de fundo ou papel de parede de uma página
HTML pode ser informada no comando <bgcolor> ou
<background>. Estes dois comandos podem ser usados
em várias tags:

•Para cor de fundo do corpo da página:

<body bgcolor="#2f4f4f">
<body bgcolor="orange">

•Para usar uma imagem como fundo do corpo da

página:
<body background="imagem.jpg">
 Exercício 02
<!DOCTYPE html>
<!-- Comentários !-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Este é o título
</title>
</head>
<body bgcolor="orange">
Olá.
Eu faço parte do corpo da página.
</body>
</html
Exercício 02
Formatação de Fontes
•Para definir cor, tipo ou tamanho da fonte utiliza-se o
comando <font>.

•Exemplo: <font color="3366CC" size="3" face="arial">

Onde: color é cor, size é tamanho e face é o tipo.

•faça uma pesquisa na web e descubra milhares de

códigos de cores HTML.
 Exemplos

<font color="FFFF00" size="3" face="terminal"><p>oi</p>

<font color="33EEFF" size="3" face="teen"><p>oi</p>
<font color="1111CC" size="3" face="tahoma"><p>oi</p>
<font color="FF0000" size="3" face="symbol"><p>oi</p>
<font color="66FF22" size="3" face="pupcat"><p>oi</p>
<font color="EE11AA" size="3" face="impact"><p>oi</p>
<font color="FF9600" size="3" face="arial"><p>oi</p>
Exercício 03
Exercício 03 <body bgcolor="black">
<font color="red"
size=7>Informática</font><br>
<font color="yellow" size=1>C</font>
<font color="#852389" size=2>r</font>
<font color="#751486" size=3>e</font>
<font color="#956894" size=4>s</font>
<font color="#125486" size=5>c</font>
<font color="#553658" size=6>e</font>
<font color="#354865" size=7>n</font>
<font color="#147896" size=8>d</font>
<font color="#256589" size=9>o</font><br>
<font color="#156125" size=10>D</font>
<font color="#558965" size=9>i</font>
<font color="#865158" size=8>m</font>
<font color="#359524" size=7>i</font>
<font color="#969874" size=6>n</font>
<font color="#256358" size=5>u</font>
<font color="#569365" size=4>i</font>
<font color="#165253" size=3>n</font>
<font color="#363636" size=2>d</font>
<font color="#232624" size=1>o</font>
Formatação de texto
•Vários comandos podem ser utilizados para formatação de texto
em páginas HTML, dentre eles destacam-se:
<h1>texto destacado com h1</h1>
<h2>texto destacado com h2</h2>
<h3>texto destacado com h3</h3>
<h4>texto destacado com h4</h4>
<h5>texto destacado com h5</h5>
<h6>texto destacado com h6</h6>
<b>texto em negrito</b>
<i>texto em itálico</i>
<u>texto sublinhado</u>
<br> quebrar linha
<hr> linha
Exercício 04
<!DOCTYPE html>
<!-- Comentários !-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Trabalhando com outras formatações de texto</title>
</head>
<body>
<h2>Formatações gerais:</h2>
Negrito: <b>texto</b><br>
Itálico: <i>texto</i><br>
Sublinhado: <u>texto</u><br>
Riscado: <s>texto</s><br>
Superior: ^texto<br>
Inferior:_texto<br>
Amarelo: <mark>texto</mark><br>
</body>
</html>
Alinhamento com <p>
•Para deixar um texto centralizado, alinhado a esquerda
ou a direita, utiliza-se os seguinte comandos:
<center>centraliza texto</center>
<p align="center">centraliza texto</p>
<p align="left">texto a esquerda</p>
<p align="right">texto a direita</p>
<p align="justify">texto justificado</p>

•Uma marca de tabulação pode ser conseguida com o

comando: <p style="margin-left: 16"> ou
•Para inserir espaço em branco usa-se &nbsp
Alinhamento com <h1>
•Para deixar um texto alinhado com as tags
de título:
<h1 align="center">centraliza texto</h1>
<h1 align="left">texto a esquerda</h1 >
<h1 align="right">texto a direita</h1 >
<h1 align="justify">texto justificado</h1 >

•Pode ser usado até o <h6>

 Exercício 05
<!DOCTYPE html>
<!-- Comentários !-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titulo para a barra do programa de navegação</title>
</head>
<body>
<font color="#3366CC" size=“6" face="arial">
<p align="center">centraliza texto</p>
<p align="left">texto a esquerda</p>
<p align="right">texto a direita</p>
<p align="justify">O HTML é a linguagem que irá exibir a informação.
O CSS é a linguagem que vai deixar essa informação bonitona. O
JavaScript é a linguagem que vai fazer essa informação receber alguns
comportamentos, como por exemplo ao criar um submenu ou controlar
algo que aparece e desaparece na tela.</p></font>
</body>
</html>
Exercício 05
Imagens
•Para exibir uma imagem em uma página HTML utiliza-se a
tag <img>
Exemplo:
<img src="Figura1.jpg" width="145" height="100" border="3">

•src especifica a imagem a ser exibida

•width especifica a largura da imagem
•height especifica a altura da imagem
•border especifica a grossura da borda da imagem.
•align especifica o alinhamento, mas só funciona right no HTML5
Exercício 06
Exercício 06
<body bgcolor=#f0ee00>
<font color="#3366CC" size="3" face="arial">
Corpo da minha primeira pagina web
</font>
<p align="Center">centraliza texto</p>
<p align="left">texto a esquerda</p>
<p align="right">texto a direita</p>
<p align="justify">texto justificado</p>
<h1>texto destacado com h1</h1>
<h2>texto destacado com h2</h2>
<h3>texto destacado com h3</h3>
<h4>texto destacado com h4</h4>
<h5>texto destacado com h5</h5>
<h6>texto destacado com h6</h6>
<b>texto em negrito</b>
<i>texto em italico</i>
<u>texto sublinhado</u>
<br>quebra linha
<p>novo paragrafo</p>
<hr> linha </hr>
<center> centraliza </center>
<img src="Figura1.jpg" width="145" height="100" border="3"/>
 Exercício 07
<!DOCTYPE html>
<!-- Comentários !-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Marquee</title>
</head>
<body>
<font size=5 color=#FF1144><br><br>
<marquee scrolldelay="300"direction="up">Este texto vai rolar de baixo para cima.</marquee>
<marquee scrolldelay="300">Este texto vai "rolar" da direita para esquerda</marquee>
<marquee direction="down" width="500" height="300" behavior="alternate" style="border:solid">
<marquee behavior="alternate">Este texto vai pular</marquee></marquee>
<marquee scrolldelay="30"><img src="Figura1.jpg" width="160" height="100"></marquee>
</body>
</html>
Exercício 07
Exercício 08
<!DOCTYPE html>
<!-- Comentários !-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Retas</title>
</head>
<body>
<font size=5 color=#77FF11>
<br><br>
<!-- lembre-se que size altera a espessura enquanto width o tamanho-->
<hr width = "100%" size ="2" color="blue">
<hr width = "50%" size ="1" color="orange">
<hr width = "100%" size ="15" color="lightgreen">
<hr width = "50%" size ="200%" color="pink">
</body>
</html>
Exercício 08
Exercício 08
<audio controls="controls">
<source src="música.mp3" type="audio/mp3">
</source>
</audio>

Com erro:
 Exercício 09
•Link para e-mail:
<a href="mailto:celiaguazzelli@gmail.com" subject="Contato">E-mail</a><br>

•Link para uma página:

<a href="http://www.uol.com.br/">Link do UOL</a><br>

•Link para um documento:

<a href="Exercício10">Programa</a><br>

•Link para um documento em uma nova página:

<a href="Exercício10“ target="_blank">Programa</a><br>

•Link para uma página usando figura:

<a href="http://www.uol.com.br/"><img src ="x.jpg" width=“80" height="50"></a>
Exercício 10
 Exercício 10
<marquee>
<font color="black" size="6">Música de qualidade</font>
</marquee>
<center><img src= "Djavan.jpg" border = "5px" width="140" height="140"> <br>
<audio src="música.mp3" controls></audio><br></center>
<font color="red" size = "7" face = "Arial Black">Outono</font><br>
<font color="orange" size="5">Djavan</font>
<font color="blue" size="4" face="Currier"><br>
Um olhar uma luz ou um par de pérolas<br>
Mesmo sendo azuis sou teu e te devo<br>
Por essa riqueza<br>
</font>
<p> <font color = "blue" size= "4" face ="Currier">
<blockquote><blockquote><blockquote>
Uma boca que eu sei<br>
Não porque me fala lindo<br>
Tudo é viável pra quem faz com prazer<br>
</blockquote></blockquote></blockquote></p>
<audio src="música.mp3" controls autoplay loop></audio>
Exercício 11
Exercício 11
<!DOCTYPE html>
<!-- Comentários !-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Filmes Disney</title>
</head>
<body bgcolor="green" text="red">
<font face="arial">
<h1><u>Dados Pessoais</u></h1>
<hr>
<p>
<font face="arial">
<img src="Sininho.jpg" height="150"width="200"border="4">
<p>
<h1>Nome:Sininho</h1>
<p>
<h1>Data de Nascimento:25/04/1994</h1>
<p>
<h1>Morada:</b>Estados Unidos</h1>
<p>
<h1>Cor preferida:</b>Verde<br></h1>
<hr>
</font>
</body>
</html>
Listas não ordenadas
Para fazer listas não ordenadas pode-se utilizar o
comando <ul> com diferentes tipos de marcadores
como: type="disc", type="circle", type="square".
Exemplo:
<ul type="circle">
<li> Primeiro tópico</li>
<li> Segundo tópico</li>
</ul>
Listas ordenadas
Para fazer listas ordenadas pode-se utilizar o
comando <ul> com diferentes tipos de
marcadores como: type="a", type="I", type= "i"
Exemplo:
<ol type="a">
<li> Primeiro tópico</li>
<li> Segundo tópico</li>
</ol>
Podemos usar <lh> depois de <ol> para titulo
Listas de definição
<body>
<p>Glossário</p>
<dl>
<dt> HTML </dt>
<dd>Linguagem de Marcação de Hiper Texto</dd>
<dt> HTTP </dt>
<dd>Protocolo de Transferência de Hipertexto</dd>
<dt> FTP </dt>
<dd>Protocolo de Transferência de Arquivos</dd>
</dl>
</body>

Listas de Definição Tags <dl>,

<dt> e <dd> são usadas para
fazer listas de definições como
por exemplo glossários.
Tabelas
• <table> e </table>  tabela
• <tr> e </tr>  linha da tabela (Table Row)
• <td> e </td>  célula (Table Data Cell)
• <th> e </th>  célula cabeçalho (Table Header Cell)
Principais atributos da tabela:
 border
 bordercolor
 bgcolor
 width
 height
 align
 cellspacing: Distância entre as células da tabela
 cellpadding: Distância entre a borda da célula e o conteúdo
Tabelas
<table border="1" cellspacing="60" cellpadding="20">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
Tabelas
• Rowspan: é utilizado para mesclar uma
quantidade de linhas em uma tabela.

• Colspan: é utilizado para mesclar uma

quantidade de colunas em uma tabela.
Tabelas
• Rowspan:

<table border="1">
<tr>
<td rowspan="2">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td> </tr>
</table>
Tabelas
• Colspan:

<table border="1">
<tr>
<td colspan="2" bgcolor="orange"><center>Célula 1
<center></td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
</tr>
</table>
Tabelas
<table border="1">
<tr>
<th colspan="3">Dados</th>
</tr>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th rowspan="2">22 anos</th>
</tr>
<tr>
<td>Fernanda</td>
<td>Diniz Santana</td>
</tr>
</table>
Tabelas
<table border="1">
<tr>
<th colspan="3">Monstros S.A.</th>
</tr>
<tr>
<th>Mike</th>
<th>James</th>
<th rowspan="2"><img src="Figura2.jpg" width="100" height="130"></th>
</tr>
<tr>
<td>Wazowski</td>
<td>Sullivan</td>
</tr>
</table>
Tabelas
Principais atributos de uma linha <tr>:
 bgcolor
 align: alinhamento horizontal (left, center, right)
 valign: alinhamento vertical (bottom, middle e top)

Principais atributos de uma célula <td> ou <th>:

 width
 height
 bgcolor
 align: alinhamento horizontal (left, center, right)
 valign: alinhamento vertical (bottom, middle e top)
Tabelas
<table border="1">
<tr align="right">
<th height="100" valign="bottom">Frutas</th>
<th>Verduras</th>
<th bgcolor="pink">Grãos</th>
</tr>
<tr>
<td width="200">Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr align="center">
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
</table>
Tabelas
<table border="0">
<tr>
<td width="150" bgcolor="red">Vermelho</td>
<td width="150" bgcolor="yellow">Amarelo </td>
<td width="150" bgcolor="red">Vermelho</td>
</tr>
<tr>
<td width="150" bgcolor="yellow">Amarelo </td>
<td width="150" bgcolor="red">vemelho</td>
<td width="150" bgcolor="yellow">Amarelo </td>
</tr>
</table>
Tabelas
<table border="0" cellspacing="0">
<tr>
<td width="150" bgcolor="red">Vermelho</td>
<td width="150" bgcolor="yellow">Amarelo </td>
<td width="150" bgcolor="red">Vermelho</td>
</tr>
<tr>
<td width="150" bgcolor="yellow">Amarelo </td>
<td width="150" bgcolor="red">vemelho</td>
<td width="150" bgcolor="yellow">Amarelo </td>
</tr>
</table>
Tabelas
<caption>
Define uma legenda superior de uma tabela, entre a
legenda e a tabela é incluída uma linha em branco.
<table border="1">
<caption> Alunos da Etec </caption>
<tr>
<th colspan="3">Dados</th>
</tr>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
<tr>
<td>Fernanda</td>
<td>Diniz Santana</td>
<td>22 anos</td>
</tr>
</table>
Tabelas