Programacao para Web I 03 HTML

18/05/2012
1
Prof. M.Sc. Leandro Donaires Figueira
HTML
18/05/2012
1
Prof.M.Sc. Leandro Donaires Figueira
Sumário
Definição
Tags
Elementos
Estrutura básica
Atributos
Cabeçalhos
Linhas e comentários
Parágrafos e quebras de linha
Formatação de texto
Estruturação
18/05/2012
2
Prof.M.Sc. Leandro Donaires Figueira
Estilos
Fontes
Links
Imagens
Tabelas
Listas
Formulários
Iframes
Cores
Definição
HTML é uma linguagem para descrever páginas web, e a sigla
significa HyperText Markup Language (linguagem de marcação
em hipertexto). Todo o conteúdo apresentado será baseado na
especificação da HTML 4, criada pelaW3C.
Ela não é uma linguagem de programação, e sim de marcação.
Uma linguagem de marcação consiste em um conjunto de tags
(etiquetas) de marcação.
HTML utiliza essas tags para descrever páginas web. Por ex.:
5/18/2012Prof.M.Sc. Leandro Donaires Figueira
3
<html>
<body>
<h1>Meu Primeiro Cabeçalho.</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>

18/05/2012
2
Tags
As tags de marcação HTML são usualmente referidas apenas
como tags. São envoltas pelos sinais < e >, como a tag <html>.
As tags normalmente vêm em pares, como <b> e </b>. A
primeira tag no par é a de abertura, e a segunda é a de
fechamento (possui o caractere / antes do nome).
Páginas web também podem ser chamadas de documentos
HTML, pois um documento HTML descreve uma página web,
que por sua vez contém tags e texto puro.
O propósito de um navegador web (web browser) é ler esses
documentos HTML e mostrá-los como páginas da web. O
navegador não mostra as tags contidas no doc. HTML, e sim as
interpreta para gerar o conteúdo a ser visualizado.
4
Tags
Assim, após a apresentação dos conceitos iniciais, pode-se
compreender o primeiro exemplo:
O texto entre as tags <html> e </html> descreve a página web.
O texto entre as tags <body> e </body> consiste no conteúdo
visível da página (corpo da página, mostrado na janela do nav.).
O texto entre as tags <h1> e </h1> é mostrado como cabeçalho.
O texto entre as tags <p> e </p> é mostrado em um parágrafo.
5
<html>
<body>
<h1>Meu Primeiro Cabeçalho.</h1>
</body>
</html>
Preparando-se para trabalhar com HTML
Não é obrigatório o uso de qualquer ferramenta específica.
Assim, não é obrigatório utilizar um editor de HTML
(Dreamweaver, Visual Studio, etc) ou ter um servidor web/web site.
Para aprender a utilizar HTML, utilizar-se-á um editor de texto
puro, como por exemplo o notepad/notepad++ do Windows ou
pico/nano do Linux.
Ao salvar o documento HTML na forma de um arquivo, pode-se
dar o nome que desejar, porém necessariamente a extensão do
arquivo deve ser .html.
6

18/05/2012
3
Elementos
Após a definição do conceito de tags, é necessário entender o
que é um elemento HTML. Um elemento consiste da tag de
abertura + conteúdo + tag de fechamento. Por ex.:
Dessa forma, são características da sintaxe de um elemento:
O elemento HTML começa com a tag de abertura.
O elemento HTML termina com a tag de fechamento.
O conteúdo do elemento consiste em tudo entre as duas tags.
A maioria dos elementos pode possuir atributos (href, por ex.).
Alguns elementos contêm conteúdo vazio, e esses elementos vazios
são fechados logo na tag de abertura (<hr />, <br />).
7
Tag de abertura Conteúdo Tag de fechamento
Elemento p: <p> Isto é um parágrafo. </p>
Elemento a: <a href="index.html"> Isto é um link. </a>
Elementos aninhados
A maioria dos elementos HTML podem ser aninhados, ou seja,
elementos podem conter outros elementos.
Isso é comum; documentos HTML normalmente consistem de
elementos HTML aninhados. Por ex.:
Quantos elementos esse documento HTML possui?
Qual é o elemento mais interno?
8
<html>
<body>
</body>
</html>
Elementos aninhados
O exemplo possui três elementos: <p>, <body> e <html>.
O elemento p:
Define um parágrafo no documento HTML.
Tem a tag de abertura <p> e a tag de fechamento </p>.
O conteúdo é: Meu primeiro parágrafo.
O elemento body:
Define o corpo do documento HTML.
Tem a tag de abertura <body> e a tag de fechamento </body>.
Contém outro elemento HTML (o elemento p), ou seja, o seu
conteúdo é composto do próprio elemento p.
9
<body>
</body>

18/05/2012
4
Elementos aninhados
O elemento html:
Define o documento HTML.
Tem a tag de abertura <html> e a tag de fechamento </html>.
Contém outro elemento HTML (o elemento body).
É importante não esquecer da tag de fechamento do elemento,
pois pode-se produzir resultados inesperados se ela não estiver
presente,além de ser obrigatório em XHTML.
Os nomes das tags não são sensíveis ao contexto, ou seja, <P>
significa o mesmo que <p>. Porém, a W3C recomenda o uso de
tags minúsculas na HTML 4 e o obriga em XHTML.
10
<html>
<body>
</body>
</html>
Estrutura básica
Um documento HTML possui a seguinte estrutura básica:
O elemento head contém elementos que determinam
características do documento HTML. É o cabeçalho desse doc.,
que deve incluir o título da página, além de incluir opcionalmente:
Os scripts (Javascript) utilizados (elemento script);
Os códigos CSS utilizados (elemento link e/ou style);
Metadados sobre o documento HTML (elemento meta).
11
<html>
<head>
...
</head>
<body>
...
</body>
</html>
São três os elementos básicos: html, head e
body, sendo o uso do elemento head
obrigatório apenas em XHTML.
Como já mencionado, a função do elemento
body é mostrar um conteúdo na janela do
navegador.
Estrutura básica
Assim, compreendem os elementos presentes no head:
Elemento title: necessário para definir um título para o
documento HTML, título este que:
Aparece na barra superior do navegador;
Aparece nos favoritos, caso a página seja adicionada;
Aparece nos resultados dos sistemas de busca.
Elemento link: define um relacionamento entre o documento
HTML e um recurso externo. Geralmente é utilizado para
relacionar os arquivos CSS utilizados pelo documento.
Elemento style: é utilizado para definir informações de estilo
dentro da própria página (ao contrário do elemento link, que
referencia essas informações fora do documento HTML).
12

18/05/2012
5
Estrutura básica
Elemento script: define um script associado ao documento
HTML, que pode ser em Javascript. Pode conter o código do
script ou referenciar um arquivo externo (através do atributo src).
Ex. de utilização desses elementos:
13
<html>
<head>
<title>Aqui está o título da página.</title>
<style type="text/css">
body {background-color: yellow;}
p {color: blue;}
</style>
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
document.write("Olá Mundo!");
</script>
</head>
<body>
</body>
</html>
Estrutura básica
Elemento meta: especifica metadados sobre o documento HTML.
Não são visíveis na página, porém são legíveis por máquinas. Essas
informações compreendem a descrição da página, palavras-chave,
autor do documento, última modificação, dentre outros.
Os metadados podem ser utilizados pelos navegadores, motores de
busca ou outros web services. Ex.:
Obs.: o elemento meta se posiciona antes do elemento script.
14
<html>
<head>
<title>Título da página.</title>
<meta name="description" content="Descrição da página." />
<meta name="keywords" content="HTML, CSS, XHTML" />
<meta name="revised" content="Leandro Figueira, 05/07/2010" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
</body>
</html>
Atributos
Atributos provêem informações adicionais sobre elementos
HTML. Assim, os elementos podem conter atributos, e estes
são especificados na tag de abertura.
São definidos na forma de nome_atributo="valor_atributo",
como por exemplo:
O elemento a define um link, e o endereço de destino é
especificado pelo atributo href.
O conteúdo Isto é um link. é o que aparece na página. Já o valor do
atributo nem sempre é mostrado, mas no caso específico do href, o
valor é exibido na parte inferior esquerda do navegador.
15
<a href="http://www.site.com">Isto é um link.</a>

18/05/2012
6
Atributos
Os valores de atributos devem sempre ser envoltos de aspas ou
apóstrofos. Aspas (" ") são a forma mais comum, porém
apostrofos (' ') também são permitidos.
Dica: em raros casos onde o valor do atributo contém aspas, é
necessário utilizar apóstrofos: atr='valor "possui" aspas'.
Da mesma forma que nas tags, a W3C também recomenda que
os atributos e seus valores sejam escritos com letras minúsculas.
Atributos frequentes em diversos elementos são::
16
Atributo Valor Descrição
class nome_classe Especifica um nome de classe para o elemento
id nome_id Especifica um identificador único para o elemento
style definição_estilo Especifica um estilo inline para o elemento
title texto_popup Mostra um texto em forma de popup na página
Cabeçalhos
Os cabeçalhos são definidos com os elementos h1 a h6, sendo
que a primeira define o cabeçalho mais importante, e a última o
menos importante.
Os navegadores automaticamente adicionam uma pequena
margem antes e depois de cada cabeçalho.
Cabeçalhos são essenciais e devem ser utilizados apenas para o
fim de definir cabeçalhos, e não de fazer com que o texto fique
grande ou em negrito. As máquinas de busca utilizam os
cabeçalhos para indexar a estrutura e o conteúdo das páginas.
17
<html>
<body>
<h1>Primeiro cabeçalho.</h1>
<h2>Segundo cabeçalho.</h2>
</body>
</html>
Linhas e comentários
O elemento hr cria uma linha horizontal em um documento
HTML, podendo ser utilizada para separar conteúdo.
Observe que é um elemento vazio (não possui conteúdo), sendo
fechado na própria tag de abertura.
Comentários podem ser inseridos no código HTML para torná-
lo mais compreensivo (podem conter explicações), sendo
ignorados pelo navegador. Exemplo:
18
<html>
<body>
<p>Primeiro parágrafo.</p>
<hr />
<p>Segundo parágrafo.</p>
</body>
</html>

18/05/2012
7
Os parágrafos são definidos através do elemento p.
Os navegadores adicionam automaticamente uma linha em
branco antes e depois do parágrafo.
Quebras de linha são feitas utilizando o elemento vazio br, útil
quando se deseja uma nova linha sem começar outro parágrafo:
Pode-se utilizar quebras de linha em qualquer parte do HTML.
19
<html>
<body>
<p>Isto é um parágrafo.</p>
<p>Isto é um outro parágrafo.</p>
</body>
</html>
<p>Isto é um<br />parágrafo com<br />quebras de linha.</p>
É necessário utilizar as quebras de linha devido ao
funcionamento da interpretação do código HTML pelo
navegador: qualquer número de linhas em branco conta como
apenas um espaço. Do mesmo modo, qualquer número de
espaços sucessivos conta como apenas um espaço.
Assim, para quebrar a linha utiliza-se <br />, e para inserir
espaços adicionais utiliza-se a notação  
Para ilustrar esse cenário, o próximo exemplo mostra que o
navegador ignora o layout do texto:
20
Quantas linhas são exibidas na tela?
O que seria necessário para preservar as quebras de linha do
primeiro parágrafo e os espaços em branco do segundo parágrafo?
Para se exibir exatamente da forma que se encontra no código,
qual elemento poderia ser utilizado no lugar dos elementos p?
21
<html>
<body>
<p>
Primeira linha.
Terceira linha?
Qual linha é essa?
</p>
<p>Pois é, ignorou meu layout!</p>
</body>
</html>

18/05/2012
8
Formatação de texto
Há diversas tags úteis para formatar o texto (fechem-nas!):
Exercício: utilize vários dos elementos de formatação de texto,
observando os resultados na janela do navegador.
22
Tag Descrição
<b> Define texto em negrito.
<big> Define texto grande.
<em> Define texto com ênfase.
<i> Define texto em itálico.
<small> Define texto pequeno.
<strong> Define texto espesso.
<sub> Define texto subscrito.
<sup> Define texto sobrescrito.
<del> Define texto desconsiderado.
<ins> Define novo texto.
Tag Descrição
<pre> Define texto pré-formatado.
<code> Define código de computador.
<abbr> Define uma abreviação
<acronym> Define um acrônimo.
<address> Define um endereço.
<bdo> Define a direção do texto.
<dfn> Define um termo de definição.
<cite> Define uma citação.
<blockquote> Define uma citação longa.
<q> Define uma citação curta.
Estruturação
Para estruturar o documento HTML, utiliza-se com frequência
os elementos div e span.
O elemento div define uma divisão no documento HTML,
tornando-se um bloco que pode ser manipulado pelo CSS
(Cascading Style Sheets) ou pelo Javascript.
Os browsers colocam uma quebra de linha antes e depois do div.
O elemento span define uma divisão no documento HTML
cujo conteúdo “funde-se” (é um elemento inline) com o contexto
em que foi inserido. Da mesma forma, essa divisão pode ser
manipulada pelo CSS ou Javascript.
Usualmente, utiliza-se o atributo id e/ou class em ambos os
elementos,útil para permitir que sejam manipuladas.
23
Estruturação
Veja um exemplo de como estruturar um documento HTML:
Ambos os elementos são muito úteis quando se deseja adicionar
elementos dinamicamente no documento HTML, via Javascript.
Por exemplo, pode-se querer adicionar um novo parágrafo após o
último existente após efetuar um consulta em um banco de dados.
24
<html>
<body>
<div id="menu">
...
</div>
<div id="conteudo">
<p>
É isso, pesso<span style="font-weight: bold;">all</span>!
</p>
</div>
</body>
</html>

18/05/2012
9
Estilos
Para definir estilos em HTML, utiliza-se o CSS. Foi introduzido
junto com o HTML 4 para prover uma melhor maneira de
estilizar os elementos HTML.
CSS pode ser adicionado ao HTML das seguintes formas:
Em arquivos CSS separados dos arquivos HTML.
Com o elemento style na seção head do documento HTML.
Com o atributo style em elementos HTML.
A maneira mais produtiva é utilizar arquivos CSS para definir os
estilos de visualização. Porém, para um primeiro ex., será usado
o atributo style (estilização de forma inline, ou seja, junto com
o doc. HTML):
25
<html>
<body style="background-color: blue;">
...
</body>
</html>
Fontes
Antes do HTML 4, utilizava-se o elemento font para definir as
propriedades da fonte. Porém, ela foi depreciada (deprecated) no
HTML 4, e removida do XHTML Strict e HTML 5.
Dessa forma, deve-se necessariamente utilizar o CSS para definir
as propriedades de exibição de fontes.
Segue um exemplo que define as propriedades da fonte do
parágrafo com o atributo style:
em: medida recomendada pela W3C, sendo por padrão 1em = 16px
(pixels).
26
<html>
<body>
<p style="font-family: verdana; font-size: 1.5em; font-style: italic;">
Texto na fonte verdana, com 24 pixels de tamanho e em itálico.
</p>
</body>
</html>
Fontes
Para alinhar o texto horizontalmente e definir a cor do mesmo,
também é utilizado o CSS.
São os possíves valores das seguintes propriedades do CSS:
text-align:left, right, center e justify.
font-weight:lighter, normal, bold, bolder (ou centenas de 100 a 900).
font-style:normal, italic, oblique.
color: quaisquer nomes de cores em inglês ou códigos (por
exemplo, #006803).
27
<html>
<body>
<h1 style="font-family: verdana; text-align: center; color: yellow;">
Cabeçalho na fonte verdana, centralizado e amarelo.
</h1>
</body>
</html>

18/05/2012
10
Links
Um hyperlink (ou link) é uma palavra, um conjunto de palavras
ou uma imagem que quando "clicada", conduz o usuário a outro
documento ou uma outra seção no mesmo documento.
Quando o cursor é posicionado sobre um link, geralmente a seta
se transforma em uma mão que aponta.
Os links são definidos utilizando o elemento a (anchor). Eis um
exemplo de um link para um site fictício de notícias:
28
<html>
<body>
<a href="http://www.noticias.com">Visitar um site de notícias.</a>
</body>
</html>
Links
Pode-se utilizar o atributo id em um link para poder ser
referenciado por outro link, na mesma página. Por exemplo:
Também, pode-se criar um link para a "Seção de dicas úteis"
em outra página, da seguinte forma:
29
<html>
<body>
<a href="#dicas01">Visitar a seção de dicas úteis.</a>
...
<a id="dicas01">Seção de dicas úteis:</a>
...
</body>
</html>
<html>
<body>
<a href="http://www.site.com/dicas.html#dicas01">Ver dicas.</a>
</body>
</html>
Imagens
Para inserir imagens em um documento HTML, utiliza-se o
elemento img e o atributo src (source). Esse é mais um
elemento vazio, não possuindo conteúdo (porém tem atributos).
O valor do atributo src consiste no local (URL) onde a imagem
se encontra. O atributo alt define um texto a ser exibido caso
não seja possível carregar a imagem, atendendo a uma das
recomendações de acessibilidade para conteúdo Web (WCAG).
Onde se encontra o arquivo "barco.gif"? Suponha que esse
documento HTML está localizado no diretório /site.
30
<html>
<body>
<img src="imagens/barco.gif" alt="Um barco." />
</body>
</html>

18/05/2012
11
Imagens
Também é possível definir a largura (width) e altura (height) da
imagem, evitando possíveis problemas de layout:
O que ocorre se a imagem não for do tamanho especificado?
Para criar um link em forma de imagem, pode-se escrever:
Caso se deseje uma borda, pode-se utilizar o seguinte na prop.
border: espessura tipo cor, por ex.:"border: 1px solid black".
31
<html>
<body>
<a href="pagina.html">
<img src="imagens/botao.gif" style="border: 0px;" />
</a>
</body>
</html>
<img src="barco.gif" alt="Um barco." width="640" height="480" />
Tabelas
São definidas com o elemento table.
A tabela é dividida em linhas (rows, elemento tr), e cada linha é
dividida em células de dados (data, elemento td). O elemento td
pode conter texto, links, imagens, listas, formulários, tabelas, etc.
Para definir cabeçalhos em tabelas, utiliza-se o elemento th
(header) no lugar do elemento td.
32
<table border="1">
<tr>
<td>linha 1, célula 1</td>
</tr>
<tr>
</tr>
</table>
Tabelas
Pode-se fazer com que uma célula ocupe várias colunas ou
linhas utilizando os atributos colspan e rowspan,
respectivamente. Os valores determinam quantas colunas ou
linhas serão fundidas.
33
<table border="1">
<tr>
<th>Nome</th>
<th colspan="2">Tel.</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<table border="1">
<tr>
<th>Nome</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Tel.</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

18/05/2012
12
Listas
São três tipos de listas que a HTML possui: ordenadas, não-
ordenadas e de definição.
Lista ordenada: definida pelo elemento ol, e cada item da lista pelo
elemento li. Por ser ordenada, os itens são marcados com números
na visualização (números decimais por padrão).
Lista não-ordenada: definida pelo elemento ul, e cada item da lista
pelo elemento li. Os itens são marcados com figuras na visualização
(círculos pretos por padrão).
34
<ol>
<li>Café</li>
<li>Leite</li>
</ol>
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
Listas
Listas de definição: é uma lista com itens e suas descrições. O
elemento dl define a lista, e dentro dela são utilizadas elementos
dt e dd para definir um item da lista e a descrição do mesmo,
respectivamente.
Dentro de um item de lista, pode-se colocar texto, quebras de
linha, imagens, links, outras listas, etc.
35
<dl>
<dt>Café</dt>
<dd>- Bebida preta.</dd>
<dt>Leite</dt>
<dd>- Bebida branca.</dd>
</dl>
Listas
Pode-se utilizar o atributo type nas listas ordenadas e não-
ordenadas,sendo seus possíveis valores:
Para a lista ordenada: "a", "A", "i" e "I" (letras e alg. romanos).
Para a lista não-ordenada: disc, circle, square.
36
<ol type="a">
<li>Café</li>
<li>Leite</li>
</ol>
<ul type="disc">
<li>Café</li>
<li>Leite</li>
</ul>

18/05/2012
13
Formulários
São utilizados para enviar dados ao servidor.
Podem conter elementos de entrada tais como campos de texto,
checkboxes, botões radio, botões de submissão,etc.
O elemento form é utilizado para criar um formulário HTML.
O elemento mais importante do formulário é o input (é vazio),
e pode ter várias formas, como será visto a seguir.
São os tipos de campos de entrada de dados:
Campo de texto - define uma linha de entrada de dados onde o
usuário pode digitar um conjunto de caracteres:
37
<form>
Primeiro nome: <input type="text" name="primeiro_nome" /><br />
Último nome: <input type="text" name="ultimo_nome" />
</form>
Formulários
Obs.: repare no atributo name. Possui utilidade análoga ao atributo id,
porém, enquanto é possível ter vários elementos com o mesmo valor
de name, o mesmo não é válido para o id - seus valores são únicos.
Campo de senha - análogo ao campo de texto, porém os caracteres
ficam ocultos na visualização.
Botões radio - são botões que restringem que o usuário escolha
apenas uma das opções listadas:
38
<form>
Senha: <input type="password" name="senha" />
</form>
<form>
<input type="radio" name="sexo" value="masc" /> Masculino<br />
<input type="radio" name="sexo" value="fem" /> Feminino
</form>
Formulários
Checkboxes - são caixas que permitem que o usuário escolha uma ou
mais opções dentre as apresentadas.
Menus drop-down: são menus cujas opções são visualizadas com um
"clique", e o usuário pode escolher uma opção. O elemento select
define o menu, os elementos option definem as opções desse menu.
39
<form>
<input type="checkbox" name="veic" value="bic" /> Bike.<br />
<input type="checkbox" name="veic" value="car" /> Carro.
</form>
<form>
<select name="sistema">
<option value="wxp">Windows XP</option>
<option value="w7">Windows 7</option>
<option value="linux">Linux</option>
</select>
</form>

18/05/2012
14
Formulários
Áreas de texto: são áreas para escrever texto, sendo análogos aos
campos de textos, porém definindo o número de linhas e colunas
que aparecem na tela. É utilizado o elemento textarea juntamente
com os atributos rows e cols.
No exemplo também é mostrado o botão de reset (penúltima linha),
que apaga todo o conteúdo do formulário.
40
<form>
Nome: <input type="text" name="usuario" /> <br />
Descrição: <br />
<textarea name="desc_usuario" rows="4" cols="64">
Insira a descrição do usuário.
</textarea>
<br />
<input type="reset" value="Limpar dados" />
</form>
Formulários
Botão de submissão - é o botão responsável por enviar o conteúdo
do formulário ao servidor. O destino dos dados é especificado no
atributo action do elemento form, cujo valor é uma URL.
Normalmente,o servidor faz algo com os dados que são enviados.
O atributo method determina qual o método de transmissão de
dados - pela URL (get) ou pelo corpo da requisição (post).
Utilizando get, os dados são inseridos na própria URL, como por ex.:
http://www.site.com/services/insertUser?user="Alan"&sex="m".
Utilizando post, os dados são enviados após a primeira requisição ao
servidor, num stream que pode ter um tamanho grande (útil para arquivos).
41
<form name="input" action="/services/insertUser" method="get">
Nome do usuário: <input type="text" name="user" /> <br />
Sexo: <input type="radio" name="sex" value="m" /> Masculino
<input type="radio" name="sex" value="f" /> Feminino <br />
<input type="submit" value="Submeter os dados" />
</form>
Iframes
São subquadros utilizados essencialmente para mostrar um
conteúdo (outra página web) dentro de uma página web. Pode-se
utilizar os atributos width e height para determinar a largura
e a altura do iframe, respectivamente.
Para remover a borda, pode-se utilizar o atributo frameborder
com o valor "0".
42
<iframe src="iframe.html" width="200" height="200"></iframe>

18/05/2012
15
Iframes
Um iframe pode ser utilizado como alvo de um link. Assim,
clicando-se no link, abre-se o conteúdo no iframe especificado.
target é um atributo de a que indica onde será aberto o link. Seu
valor pode ser o valor do atributo name ou id de outro elemento
ou "_blank", indicando uma nova aba/janela.
Nesse último caso, a W3C não recomenda o uso desse artifício de
obrigar a abertura de um link em outra aba/janela, sugerindo ser
melhor deixar a cargo do usuário essa escolha.
43
<iframe name="iframe_a"></iframe>
<p>
<a href="http://www.google.com" target="iframe_a">Google</a>
</p>
Cores
As cores em HTML são definidas através de uma sintaxe
hexadecimal (HEX), que indica intensidade do vermelho, verde
e azul (RGB - Red Green Blue).
O menor valor que pode ser utilizado para cada uma das cores é
0 (em HEX: 00). O maior valor é 255 (em HEX: FF).
Os valores hexadecimais são especificados em três pares de
números de dois dígitos, iniciando com o símbolo #.
44
Cores
Exercício: codifique a tabela apresentada anteriormente em um
documento HTML. Dica: na primeira linha da tabela, especifique a
largura (width) da célula (th ou td) em porcentagem (%).
Pode-se combinar os valores do RGB da forma como queira,
sendo 16 milhões o total de cores possíveis. Experimente, por
exemplo, apenas variar o valor do vermelho, fixando os valores
do verde e do azul em zero.
Há 147 nomes de cores suportados na especificação do HTML e
CSS, sendo 17 cores padrão e 130 adicionais.
São as cores padrão: aqua, black, blue, fuchsia, gray, grey, green,
lime,maroon, navy, olive, purple, red, silver, teal, white e yellow.
45

18/05/2012
16
Referências
Relação de tags e suas características/atributos:
http://www.w3schools.com/tags/default.asp
Vários exemplos para reforçar/complementar:
http://www.w3schools.com/html/html_examples.asp
46

Programacao para Web I 03 HTML

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Programacao para Web I 03 HTML

Mais de DESIGN DIGITAL UNIARA 2012

Programacao para Web I 03 HTML