Apostila HTML

HTML.....................................................................................................................................
2
CAPÍTULO 1: Introdução...................................................................................................2
O que é HTML?..............................................................................................................2
O que é o CSS?...............................................................................................................2
O que é W3C?.................................................................................................................2
Exercicios........................................................................................................................3
CAPÍTULO 2: Tags............................................................................................................4
O que são TAGS?............................................................................................................4
Estrutura básica de um HTML........................................................................................4
TAGS de texto.................................................................................................................8
Tags de estrutura...........................................................................................................15
Tags de tabela................................................................................................................18
Propriedades das tabelas...............................................................................................28
Tags de formulário........................................................................................................32
Linkagem de páginas.....................................................................................................37
Exercício.......................................................................................................................39
CAPÍTULO 3: CSS...........................................................................................................40
Seletores........................................................................................................................40
Propriedades do CSS.....................................................................................................48
Exercício.......................................................................................................................64
HTML
CAPÍTULO 1: Introdução
O que é HTML?
HTML, HyperText Markup Language, é uma linguagem criada para manipular e formatar a
informação de texto na internet, onde através de tags conseguirmos organizar e formatar
nosso texto, deixando ele justificado, em itálico, alinhado à esquerda ou qualquer outra
formatação que se queira.
Através desta formatação conseguimos também diagramar nossos sites, dividir o conteúdo,
criar link`s enfim, dar forma e cor ao nosso site, porém para exibir isso ao usuário,
precisamos de um software que interprete estas marcações e desenhe tudo que
configuramos na tela, estes software`s são chamados de Browsers, ou navegadores.
Os Navegadores mais famosos hoje em dia são FireFox, Internet Explorer e Google
Chrome, cada um tem sua maneira de interpretar o HTML, porém todos seguem os padrões
e especificações da W3C tornando assim mais fácil o desenvolvimento de sites para
diversas plataformas.
O que é o CSS?
CSS ou Cascading Style Sheets é uma forma de organizarmos as formatações de nosso site,
organizando toda a estrutura e cores de forma modular, facilitando assim criação de
estruturas diversas. O CSS assim como HTML também é um arquivo de texto, com uma
formatação específica, o CSS é interpretado linha por linha, aonde cada linha é executada
em tempo real e cada configuração aplicada de acordo com os itens expostos na pagina.
Básicamente devemos utiliza-lo para alterar os estilos da pagina, que podem ser, bordas,
fontes, margens internas, margens externas e etc..
O que é W3C?
W3C é um consórcio de várias empresas que tenta estabelecer os padrões de como o
HTML, CSS e JavaScript devem ser interpretados, fazendo assim que os navegadores
tenham parâmetros à seguir e não implementem os comando da forma como bem
entenderem.
O consórcio foi formado pois existia uma grande divergência sobre o que e como as
paginas deveriam ser construidas e não havia um padrão concreto, na época de sua criação
Netscape e Internet Explorer faziam uma corrida pelas funcionalidades implementadas,
como não tinhamos nenhuma especificação cada um implementava as funções e parâmetros
como bem entendiam, fazendo com que as paginas feitas com funcionalidades especificas
de um Navegado não funcionasse no outro e vice-versa.
A guerra vencida e com a saída do Netscape do mercado de Navegadores, sobrou para o
Internet Explorer a culpa e a marca de vilão da bagunça que a WEB tinha se tornado, aonde
era uma prática herculeana construir sites para diversos navegadores. Desde então a
Microsoft vem trabalhando para se adequar aos padrões de forma que as funcionalidades
presentes até então somente no Internet Explorer parassem de funcionar pouco-a-pouco nas
versões seguintes, mas ainda não é uma tarefa nada fácil construir um site dentro dos
padrões que funcione perfeitamente em todos os navegadores, mas agora com os padrões
bem definidos da W3C já é possível construir um site bem estruturado com funcionalidades
básicas.
Exercicios
1. Porque o Internet explorer tem uma fama de péssimo navegador para os
desenvolvedores?
2. Cite 3 navegadores presentes no mercado atual
3. Porquê devemos desenvolver nossos sites para que funcionem em divesos

ambientes?
4. O que é W3C?
CAPÍTULO 2: Tags
O que são TAGS?
Tag é a forma que encotramos para formatar nosso texto de forma que este pudesse ser
fácilmente editado e entendido, possibilitando criar também tabelas, inserir imagens,
vídeos, animações FLASH e outros itens normais de uma pagina.
Todas as tags em HTML iniciarão com um caracter < (menor que) e terminará com >
(maior que) e para cada coisa que se deseja fazer existe uma tag correspondente, devendo
assim utilizar cada uma de forma adequada.
Estrutura básica de um HTML
DOCTYPE
Na época anode cada empresa criava seu padrão de processamento do HTML não havia
maneira de identificar em qual versão eu estava escrevendo meu código então ficava a
encargo do Navegador processar o código e identificar qual a melhor forma de trabalhar
esta informação, sendo assim foi criado o DOCTYPE, estavamente para especificar o tipo
de documento, facilitando na tradução do mesmo.
Hoje em dia por padrão utiliza-se HTML 4.1 e para identificar este documento utilizaremos
o seguinte código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
Como este é um código comum em todas as paginas não precisamos decorar ele, basta
copiar das paginas já feitas, para consultar quais as restrições de utilizar esta versão do
HTML acesse o site http://www.w3.org/TR/html401/struct/global.html ele mostra toda a
documentação do HTML 4.01
<html>
Esta é a tag que marca o inicio do HTML, todo o conteúdo do site deverá estar dentro desta
TAG, por regra, o que estivesse fora dele não deveria ser processado pelo navegador, o que
infelizmente não ocorre na maioria dos navegadores.
Código:

<html>

</html>
Observe que o único código que deverá ter fora do HTML é o DOCTYPE, em alguns caso
de processamento até um <enter> ou <espaço> após o término da tag HTML (</html>)
podem atrapalhar no processamento da mesma.
<head>
Esta tag demarca o inicio do cabeçalho HTML, tudo aqui será processado antes do corpo do
da pagina em si e é aonde devemos especificar o tipo de caracteres que vamos trabalhar,
além do titulo e outras informações que devem vir apenas no <HEAD>, como vemos a
seguir.
Código:

<html>
<head>
</head>
</html>
A tag HEAD deverá ser utilizada para agrupar algum conjunto de tags que podem ser
utilizados ou não, dependendo do conteúdo desta.
<meta> - Esta é uma tag com diversas funcionalidades, mas servirá neste curso
básicamente para especificarmos o charset com o qual a pagina deve ser processado.
Durante este curso iremos utilizar o charset UTF-8, mas existem vários outros que podem
ser utilizados, para obter mais informações sobre charset acesse o seguinte endereço:
http://www.w3.org/TR/REC-html40/charset.html
Código:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> - Como o próprio nome já explica, através desta tag podemos definir qual será o
título de nossa pagina, este titulo será mostrado pelo navegador, como titulo da janela.
Código:

<html>
<head>
<title>Título da página</title>
</head>
</html>
Resultado:
<script> - A tag script serve para indicarmos o ínicio de um código JavaScript ou

especificarmos um arquivo para ser importado, sendo o mais comum a segunda opção para
evitarmos a poluição visual de nossa página.
Código:
<script type="text/javascript" src="/js/jquery.js"></script>
Para utilizarmos a tag script corretamente devemos especificar 2 propriedades sendo:
type – Esta propriedade servirá para indicar ao navegador que tipo de arquivo ou conteúdo
se trata este script, neste curso trabalharemos somente com JavaScript que é o padrão atual
em todos os navegadores portanto preencheremos a tag sempre com text/javascript.
src – Aqui deveremos especificar o caminho físico do arquivo ou o caminho relativo,

recomendo a utilização de caminho relativo, pois facilita a manutenção do código.
<link> - A tag link é semelhante a tag <script> porém ela servirá para importarmos uma
folha de estilo (.CSS), que utilizaremos para especificar as formas e cores das nossas
paginas.
Código:
<link href="css/default.css" rel="stylesheet" type="text/css">
Este código é bastante simples, sendo necessário especificar 3 propriades para a tag sendo:
href – para especificarmos o endereço do arquivo css, geralmente utiliza-se endereço

relativo do arquivo para facilitar no desenvolvimento.
rel – a propriedade rel é bem comum no HTML, serve para relacionarmos determinada tag
com algo, sendo assim sempre preencheremos neste caso com stylesheet, para que o
navegador consiga relacionar o <link> como uma folha de estilos.
type – assim como no <script> temos que especificar como este arquivo deverá ser
interpretado para o navegador e mais uma vez temos o valor padrão text/css.
<body>
A tag body especifica o inicio do corpo de nosso HTML, portanto tudo que especificarmos
dentro desta tag será interpretado como conteúdo da pagina, além disso podemos
especificar aqui algumas propriedades de nosso corpo, porém é recomendado utilizar o CSS
na maioria dos casos, sendo alguns:
onload – esta é uma propriedade que chamamos de trigger html ou podemos chamar de
evento, enfim, quando especificamos um onload para o body indica que ao término do
processo da pagina será executado o seu conteúdo, como podemos ver no código a seguir:
Código:

<html>
<head>
</head>
<body onload='document.write("Olá mundo");'>
</body>
</html>
Resultado:
TAGS de texto
<p> - A tag P indica um paragrafo, toda vez que a iniciarmos, será dado um espaço
equivalente ao mesmo, sendo que para indicar o fim do paragrafo devemos utilizar </p>
como mostra o exemplo
Código:
<p>Este é um parágrafo</p>

<p>Este é outro parágrafo</p>
Resultado:
<strong>, <b> - A tag Strong nos permite colocar parte de um texto em negrito e para
informamos que a parte em negrito acabou devemos utilizar </strong>
Código:
<p>Este é um <strong>parágrafo</strong></p>

Resultado:
Observe que somente a parte que esta entre a tag <strong> foi colocado em negrito,
tornando assim mais fácil formatarmos nosso texto.
<i>, <em> - A tag I ou EM servirá para definirmos um texto como itálico, da mesma forma
que o <strong> devemos encerrar a tag com </i>, observe que em todas as tags o
encerramento é o seu nome, porém no ínicio colocamos uma / que indica ao navegador que
aquela tag em específico indica o término de outra.
Código:
<p>Este é um <i>parágrafo</i></p>

Resultado:
<u> - A tag U deverá ser utilizada para deixar parte do texto com sublinhado, que da
mesma forma dos anteriores deverá ser encerrado com sua tag porém acrescentando uma
barra (/)
Código:
<p>Este é um <u>parágrafo</u></p>

Resultado:
<font> - Alguns programadores acreditam que as tag`s <strong>, <b>, <i>, <em> e <u>
deveriam ser substituidas pela tag font pois com esta somada ao CSS é possível fazer as
funcionalidades de todas as outras tags, a vantagem da eliminação das outras seria que o
estilo estaria focado no CSS e a desvantagem é que o estilo estaria focado no CSS, explico,
imagine que você tem um texto enorme e todas as vezes que precisarmos um texto negrito
tenhamos o seguinte código <font class=’fBold’></font> a principio parece simples
identificar que aquela class em especifico é para deixar o texto negrito, mas com o decorrer
do textos, surgiram tantas variações de classes, que ficou algo assim <font
class=’fBoldGreenItalic’>, já fica complicado saber o que a class faz, certo? Ao contrário
de: <strong><i><font style=’color: green;’> você consegue fácilmente saber o que este
código esta fazendo. Porém a manutenção deste código é horrivel, imagine que tenhamos
que mudar todos os textos que estão negrito, itálico e verde para normal, sublinhado e azul,
com CSS bastaria mudar o class e estaria modificado em todo o documento, já no outro
teriamos que modificar item por item.
Por padrão utilizaremos o CSS, pois prezamos aqui pela facilidade de manutenção e não
pela legibilidade do código, veja um exemplo de código utillizando a tag font.
Código:
<style type="text/css">
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
</style>
<p>Este é um <font class="italic">parágrafo</font></p>
<p>Este é outro <font class="bold">parágrafo</font></p>
Resultado:
<h1>, <h2>, <h3> e etc.. – As tags listada a esquerda são para identificarmos os titulos do
texto, para cada nível de título podemos ter um estilo diferente, configurado no próprio
CSS.
Código:
<h1>Título 1</h1>
<h2>Sub-Título</h2>
<p>Este é um <i>parágrafo</i></p>
<h2>Sub-Título</h2>
<h3>Outro Sub-Título</h3>
Resultado:
<ul>, <li>, <ol> - Estas tags são utilizadas para criação de listas ou de menus de navegação
do site, podendo ser facilmente estilizadas com CSS é a melhor forma de organizar o
conteúdo do site.
Código:
<ul>
<li>Item 1</li>
<ol>
<li>Sub-item 1
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
<li>Sub-item 4</li>
<li>Sub-item 5</li>
</ol>
</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
<li>Sub-item 4</li>
<li>Sub-item 5</li>
</ol>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Resultado:
<br /> - BR é uma tag diferente das outras já sitadas, ela não tem nenhum conteúdo dentro,
por isso ela já é fechada logo em sua declaração inicial, a tag <br> é básicamente para gerar
uma quebra de linha em um parágrafo.
Código:
<p>Este é um <br />parágrafo</p>

Resultado:
Tags de estrutura
<div> - A div define um bloco aonde podemos ter textos, listas ou imagens ou até mesmo
um agrupamento de outras divs, desta forma, então podemos definir que tudo que estiver
dentro deste bloco deverá seguir uma determinada regra, veja o exemplo:
Código:
<style type='text/css'>
.redText {
color:red;
}
</style>
<div class='redText'>
</div>
Resultado:
Observe que somente os parágrafos que estavam dentro da DIV mudaram de cor.
A div é uma das tags mais importantes na formatação do nosso layout, pois utilizaremos ela
para construir a estrutura no nosso site, definindo através dela as áreas de navegação.
<span> - O span tem um funcionamento parecido com o da DIV, porém ele é utilizado não
para formar um bloco e sim uma linha.
Código:
.redText {
color:red;
border: 1px solid;
}
</style>
<span class='redText'>
Este é um parágrafo
</span>
Resultado:
Observe que coloquei apenas uma linha dentro do Span, e coloquei uma borda para
destacar bem qual área ele esta ocupando, vejamos agora qual seria o comportamento dele
com duas linhas:
Código:
.redText {
color:red;
border: 1px solid;
}
</style>
<span class='redText'>
Este é um parágrafo<br />
Este é um parágrafo<br />
</span>
Resultado Internet Explorer:

Resultado no Firefox
Como o SPAN não é feito para ter mais de uma linha, cada navegador tenta resolver o
“problema” de uma forma, não gerando um resultado muito agradável em nenhum dos
casos, sendo que no Firefox é gerado o resultado mais correto e que é utilizado em outros
navegadores como Chrome ou Flock.
Tags de tabela
As tabelas, originalmente concebidas para organizar a informações no formato de linha e
coluna, foram amplamente utilizadas no começo do HTML para criação das estruturas do
site, o que deixava o código bem sujo e desorganizado, em meados de 2003 começaram a
surgir varias frentes pelo mundo, doutrinando e evangelizando a utilização de div`s para a
criação da estrutura.
Na época foi considerado uma maluquisse que nunca seria viável, tudo isso pelas
complicações geradas na utilização de divs, agora era necessário utilizar CSS para
estruturar o site, um modelo de estruturação tão pouco difundido agora era fundamental
para os programadores “modernos”, então iniciou-se a busca pelo conhecimento de como
utilizar de forma correta esta linguagem que aprendemos agora e a tabela voltou a ser
somente uma tabela.
<table> - Indica o ínicio de uma tabela, sendo necessário encerrar ela com </table>, a tabela
apenas agrupa outras tags de tabela na formação de sua estrutura, não podendo ser incluido
nenhum conteúdo nela.
Código:
<table>
</table>
Resultado:
Como podemos ver, a tag sozinha não representa nada, servindo apenas para estruturar
nossa tabela.
<thead> - Indica que estamos iniciando o cabeçalho de nossa tabela, também sendo
obrigatório encerramos esta tag com </thead> e como na tag <table> não é possível inserir
conteúdo servindo apenas para agrupar outras tags, obrigatóriamente estar dentro de uma
tag <table>
Código:
<table>
<thead>
</thead>
</table>
Resultado:
Mais uma vez só uma imagem em branco
<tbody> - Mais uma tag de agrupamento, esta será utilizada para agruparmos as linhas e
colunas referentes ao conteúdo da tabela e como a tag <thead> deverá estar sempre dentro
da tag <table> e sempre deverá ser encerrada com </tbody>.
Código:
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Resultado:
Como todas as tags de agrupamento o resultado não influencia no visual da pagina.
<tfoot> - Esta assim como <tbody> e <thead> é uma tag para agruparmos as linhas e
colunas referentes ao rodapé da pagina e deverá sempre ser encerrada como </tfoot>
Código:
<table>
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
Resultado:
<caption> - Uma tag não muito utilizada, porém muito útil, ela serve para indicarmos um
“titulo” para a nossa tabela, sendo mais fácil centralizar e apresentar do que criar um
<span> ou <p> para isso
Código:
<table>
<caption>Título</caption>
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
Resultado:
<tr> - O TR servirá para criarmos uma linha na tabela, ele também é uma tag de
agrupamento, mas desta vez ele irá agrupar nossas colunas.
Código:
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
Resultado:
Como podemos ver assim como todas as tags de agrupamento ela não representa nada em
nossa pagina.
<th> - A tag TH é uma coluna responsável por criar uma coluna de cabeçalho, a diferença
desta para as outras colunas é que por padrão seu conteúdo será em negrito e centralizado,
ele deverá ser encerrado com o </th> e deverá sempre estar dentro de uma tag <tr>
Código:
<table width="100%">
<thead>
<tr>
<th>Coluna Cab. 1</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
Resultado:
A tag th também pode ser utilizada no rodapé da tabela, dando assim o mesmo efeito do
cabeçalho.
Código:
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>1:1</td>
<td>1:2</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rodapé Col 1</th>
</tr>
</tfoot>
</table>
Resultado:
<td> - Esta é uma coluna padrão, seu conteúdo virá sem nenhuma formatação e sempre
deverá ser encerrada com </td>, toda <td> deverá sempre estar dentro de uma <tr>(linha)
Código:
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>1:1</td>
<td>1:2</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
Resultado:
as TD`s poderão ser utilizadas também no rodapé caso não precisem de destaque
Código:
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>1:1</td>
<td>1:2</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Rodapé Col 1</td>
<td>Rodapé Col 2</td>
</tr>
</tfoot>
</table>
Resultado:
Propriedades das tabelas
<table cellspacing=”5”>
O cellspancing irá atuar com a disância entre uma celula e outra e será aplicado a toda a
tabela.
Código:
<table border="1" width="100%" cellspacing="5">

<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>1:1</td>
<td>1:2</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
Resultado:
<table cellpadding=”5”>
Com o cellpedding poderemos mudar o espaço interno de cada celula (TD), permitindo
assim afastar ou aproximar as informações da borda.
Código:
<table border="1" width="100%" cellspacing="5" cellpadding="5">

<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>1:1</td>
<td>1:2</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
Resultado:
<TD colspan=’2’>
Com o colspan poderemos unir duas colunas, de forma que esta se torne uma só, como se a
linha tivesse apenas uma coluna.
Código:

<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1:1</td>
</tr>
<tr>
<td>2:1</td>
<td>2:2</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
Resultado:
<TD rospan=’2’>
O rowspan fará o mesmo que o colspan, porém irá unir 1 ou mais colunas entre as linhas.
Código:

<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1:1</td>
<td>1:2</td>
</tr>
<tr>
<td>2:2</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
Resultado:
Tags de formulário
<form> - A Tag Form é um agrupador de campos (fields) e portanto não gera nenhuma
interferência no visual da pagina, todos os campos que corresponderem a um determinado
formulário devem estar entre a tag <form> e </form> e nunca poderemos ter um <form>
dentro de outro.
O Form também é responsável por definir como os dados serão enviados e para onde ele
será enviado devendo passar estas informações através do parâmetros method e action
respectivamente.
Method
O atributo method define como os dados serão enviados, podendo ser post ou get, sendo
que POST irá enviar os dados através do cabeçalho e o get irá formar uma querystring com
os campos sendo:
Exemplo 1:
<html>
<head>
</head>
<body>
<form method=”get” action=”index.php”>
<input type=”text” name='teste' value='teste' />
<input type='submit' name='enviar' value='Enviar' />
</form>
</body>
</html>
Neste primeiro exemplo estamos enviando o campo teste com o valor teste para index.php
através do método POST.
Exemplo 2:
<html>
<head>
</head>
<body>
<input type=”text” name='teste' value='teste' />
</form>
</body>
</html>
Já este exemplo estamos enviando o campo teste com o valor teste para index.php via
método GET, observe que neste exemplo, ao clicar em submit a pagina será encaminhada
para index.php, porém teremos o campo get especificado no endereço, então seriamos
encaminhados para index.php?teste=teste&enviar=Enviar
<input> - Input é o principal tipo de campo que nós temos e será utilizado na maior parte
das vezes sendo sua sintax bem simples e contando com algumas poucas propriedades.
Id – a propriedade ID é única em cada campo, sendo que ao decidirmos que o campo X terá
o id txtCampoX não poderá haver outro id igual na pagina, seu preenchimento deve seguir
o padrão que não permite caracteres especiais nem espaço e o primeiro caracter não pode
ser numérico.
name – Name serve para definirmos o nome do campo dentro daquele formulário, desta
forma poderemos identificar quando tivermos que processar as informações no PHP. Este
pode ser preenchido com qualquer coisa, e para decidir seu nome seguimos as mesmas
regras do campo id.
value – aqui será armazenado o valor do inserido no campo, ele pode iniciar já com algum
valor ou, caso o usuário digite algo no campo este valor poderá ser recuperado através desta
propriedade.
Type – Existem vários tipos de de input`s, sendo cada um para uma utilidade, sendo que
por padrão o input será do tipo text que permite a inserção de texto livre, veja abaixo outros
tipos:
Text – como já citado o campo com type igual a text permite a digitação de texto livre.
radio – Este tipo é do tipo de seleção, ele permite que você relacione outros inputs
deixando assim que somente um seja selecionado pelo usuário.
checkbox – Semelhante ao radio, porém permite que várias opções sejam selecionas.
file – Esta tag nos permite selecionar um arquivo para ser enviado junto com a pagina,
como na maioria dos portais aonde enviamos nossas fotos, porém para ele funcionar
devemos informar uma outra propriedade na tag form sendo esta
enctype='multipart/form-data' assim informamos ao navegador que o form esta enviando
arquivos também.
Código:
<html>
<head>
</head>
<body>
<form method=”get” enctype='multipart/form-data' action=”index.php”>
<input type="file" name='foto_produto' id='foto_produto'></textarea>
</form>
</body>
</html>
Resultado:
<select> - O campo Select, comumente chamado de combobox ele permite crier uma lista
de opções permitindo que o usuário selecione uma ou mais opções, como este campo
também é tratado como um input ele possui as mesmas propriedades do input, tendo
também como propriedades obrigatórias o Id e o Name.
Código:
<html>
<head>
</head>
<body>
<select name="nomedoselect" id="nomedoselect">
<option value=1>Carro</option>
<option value=2>Moto</option>
<option value=3>Barco</option>
</select>
</form>
</body>
</html>
Resultado:
Observe que para cada opção que apresentamos no select também utilizamos a tag
<option> a tag option é formada apenas da proidade value e seu conteúdo.
<textarea> - Agora com o nosso último tipo de input, assim como os outros ele tem como
propriedade obrigatória o name e o id seguindo as regras de nomeclatura, além destas
propriedades também podemos especificar as rows ou seja, o número de linhas que serão
apresentadas em tela e as cols que são o número de colunas apresentadas, determinando
assim o tamanho do input.
Código:
<html>
<head>
</head>
<body>
<textarea name='de_produto' id='de_produto'></textarea>
</form>
</body>
</html>
Resultado:
Linkagem de páginas
O grande avanço na internet foi a criação de hyperlinks que com um clique nos permitia
abrir uma nova pagina, os hyperlinks podem estar em textos, palavras ou imagens e para
criarmos eles precisamos utililizar a tag <a>
Esta tag pode ser utilizada para links para outra pagina ou dentro da própria pagina, as
chamadas âncoras.
Link para outra pagina

Ao linkar um conteúdo de outra pagina que esta no mesmo site, não precisamos
necessáriamente informar o caminho completo do arquivo, podemos apenas indicar a
posição deste arquivo em relação ao atual, mas sempre que tivermos que linkar um arquivo
de outra pagina é obrigatório informamos o endereço completo, por exemplo, um link para
o site do terra seria para o endereço http://www.terra.com.br
Código:
<html>
<head>
</head>
<body>
<a href="http://www.terra.com.br">Página do Terra</a>
</body>
</html>
Resultado:
Âncora
As âncoras é muito útil para navegação dentro do texto, ou dentro de uma pagina pequena,
aonde não se justifica a criação de um novo arquivo para aquele conteúdo em especifico,
para criarmos uma âncora devemos ter duas tags <a> sendo que uma é o link e a outra é o
destino do link, veja o exemplo a seguir.
Código:
<html>
<head>
</head>
<body>
<a href="#titulo1">Título 1</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br />
<a name='titulo1' />
<h1>Título 1</h1>
<p>
texto texto texto
</p>
</body>
</html>
Resultado:
Após o click:
Exercício
1) Defina para que serve as seguintes tags:
a. <body>
b. <form>
c. <input>
d. <ul>, <li>
e. <tr>
f. <td>, <th>
g. <span>
h. <p>
2) Monte um arquivo HTML com uma lista de itens presentes na sala de aula
separados em sub-itens por: Informática, papelaria e outros.
3) Monte em outro arquivo HTML uma tabela com 4 colunas e 10 linhas que
contenham, os nomes, sobrenome, idade e email das pessoas da sala.
4) Crie um novo arquivo e monte um formulário que solicite os dados de cliente de

uma loja, tente utilizar todos os tipos de input`s.
5) Agora vamos definir a estrutura inicial de nosso site, aonde teremos na index a
seguinte estrutura que será seguida em todas as páginas:
#Cabeçalho
#Outras ofertas
#Categorias e #Destaques e promoçoes
sub-categorias #Formulário de login
#Lançamentos
#Rodapé
Esta estrutura deverá ser criada através de <DIVS> e outras tags, a formatação será
feita num próximo capítulo
Esta é a visão final que será data, dê um id para cada DIV e preencha pelo menos
com um <h1> com o título de cada área.
CAPÍTULO 3: CSS
Seletores
O CSS básicamente modela a estrutura do site através das propriedades das tags, sendo
estas geralmente as id e class, cada uma com seu devido proposito sendo o id utilizado
quando queremos mudar o estilo de um único item na página e o class de um conjunto de
itens.
Além das propriedades, podemos usar também a tag para agrupar diversos itens com a
mesma tag em um grupo.
Nos exemplos a seguir utilizaremos um código padrão (que foi baseado no último exercício
do capítulo 2) para acompanharmos a mudança no layout e suas implicações.
Cödigo:
<html>
<head>
<style>
</style>
</head>
<body>
<div id='main'>
<div id='header'>
<h1>Header</h1>
</div>
<div id='nav'>
<h1> Menu</h1>
</div>
<div id="body">
<h1>Body</h1>
<p>Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo
Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Texto de
exemplo <br /> Texto de exemplo Texto de exemplo Texto de exemplo Texto de
exemplo Texto de exemplo </p>
</div>
<div id='offer'>
<h1>Ofertas</h1>
</div>
<div id='foot'>
<h1>Rodapé</h1>
</div>
</div>
</body>
</html>
Resultado:
O primeiro seletor que utilizaremos será o seletor que modifica o layout através da tag,
neste exemplos modificaremos todos os itens que utilizam da tag <h1>.
Para facilitar a leitura o código padrão só será modificado dentro da tag <style> e só esta
será mostrada nos exemplos.
Código
<style>
h1 {
font-family: Verdana;
text-decoration: underline;
}
</style>
Resultados:
Veja que apenas utilizando o selector h1, conseguimos mudar a fonte e sublinhar o texto.
Vejamos agora alguns detalhes da sintax utilizada.
h1 {
}
na primeira linha declaramos qual tag queremos modificar, no caso h1, em seguida abrimos
as chaves ({) demos um enter e inserimos as propriedades que queriamos mudar naquela
tag e logo fechamos com uma outra chave (}).
A sintax é bem simples e nos permite entender bem o que aquelas 4 linhas fazem com o
código, lembrando que podemos aplicar as mesmas propriedades a outras tags que ficaria
da seguinte forma:
h1, p {
}
e o resultado seria:
Mas por enquanto vamos manter a modificação apenas no H1 e vamos modificar outras
divs, para formatarmos melhor nossa pagina.
Código:
<style>
h1 {
}
div {
float:left;
width: 100%;
}
</style>
Resultado:
Observe que mandamos que todas as div`s “flutuassem” a esquerda e logo em seguida
pedimos que elas tivessem 100% de largura, fizemos isso pois o float é a única forma de
conseguirmos que uma div fique do lado de outra e colocamos 100% de largura, pois não é
todas que queremos que fiquem desta forma, agora vamos fazer com que algumas
especificas fiquem uma do lado da outras, faremos isto utilizando o método seletor pelo id.
Código:
<style>
h1 {
}
div {
float:left;
width: 100%;
}
#nav {
width: 20%
}
#body {
width: 60%
}
#offer {
width: 20%
}
</style>
Veja que colocamos uma tralha (#) ao lado do ID de cada div que queriamos modificar,
desta forma o navegador ao interpretar sabe que estamos especificando uma div e em
seguida modificamos a largura delas, especificando que as laterais ocupariam 20% do
espaço e o “body” ocuparia 60%, totalizando 100% do espaço da pagina.
Resultado:
Agora sim conseguimos posicionar cada div da forma que queriamos, deixando ela do lado
uma da outra.
Agora no próximo exemplo veremos como selecionar uma tag especifica dentro de um id,
neste caso modificaremos o texto (<p>) que esta dentro da id body.
Código:
<style>
h1 {
}
div {
float:left;
width: 100%;
}
#nav {
width: 20%
}
#body {
width: 60%
}
#offer {
width: 20%
}
#body p {
font-weight: bold;
}
</style>
aqui especifcamos os níveis que queremos acessar, primeiro o navegador irá procurar pelo
id body e logo após ira selecionar todos as tags <p> dentro dele e efetuar o que estamos
pedindo de forma bem prática e organizada.
Resultado:
e assim podemos proceder de diversmas maneiras e formas até chegarmos ao resultado
esperado.
Propriedades do CSS
Como explicado as propriedades do CSS devem ficar entre chaves ({ }) após
especificarmos quais itens eles devem modificar e agora vamos especificar as principais
propriedades do CSS, para que possamos elaborar nossa estrutura.
Float – Esta é a propriedade faz com que o item da pagina comece a flutuar, desta forma
podemos posicionalo com maior facilitade, porém ao especificar float para um elemento da
pagina devemos ter em mente que todos os outros elementos também terão que ter um float
definido para que os itens não fiquem desalinhados.
Código:

<html>
<head>
<style>
div {
float: left;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Antes de definirmos o float:
Depois de definirmos o float:

Observe que antes do float as divs quebravam a linha automáticamente, e após definirmos o
float ele foi para o lado.
Existem dois valores possíveis para o float, sendo que acima definimos como left e
podemos definir como right que ficaria desta forma:
Observe que além de mudar o lado em que os itens estavam, isto ocorre pois menu foi
definido antes de body, portanto é “jogado” para a direita antes, ficando assim, mais a
direita.
border – Com esta propriedade podemos especificar a borda de diversas formas, sendo a
mais comum, ao definirmos esta propriedade devemos especificar sua largura em pixels e
seu modelo, no código abaixo utilizamos o tipo solid mas também podem ser utilizadas
dotted, dashed, double, groove, ridge, inset, outset, cada uma forma a borda, que pode
ser testada por você a partir do exemplo a seguir.
Além de border podemos definir da mesma forma as seguintes propriedades.

border-left: define apenas a borda da esquerda.
border-right: define apenas a borda da direita.
border-top: define apenas a borda de cima.
border-bottom: define apenas a borda de baixo.
Código:

<html>
<head>
<style>
div {
float: left;
border: 1px solid;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
border-color – Aqui podemos definir a cor da borda, a cor pode ser definida em
hexadecimal.
Código:
<html>
<head>
<style>
div {
float: left;
border: 1px solid;
border-color: #C5C5C5;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
E da mesma forma que podemos definir somente a borda que desejar, a sintax será
Border-lado-color: #c5c5c5;
Exemplo:
border-left-color: #c5c5c5;
Resultado:
margin – A propriedade margin especifica uma distância entre um item e outro do html,
sendo que podemos especificar a disância da margem que quisermos, para isto basta
especificar como por exemplo margin-left, assim especificamos somente a margem
esquerda.
Código:

<html>
<head>
<style>
div {
float: left;
border: 1px solid;
border-left-color: #C5C5C5;
margin: 5px;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
Neste exemplo veja que a borda de todos as divs da pagina se afastaram, inclusive a borda
mais externa da pagina ficou mais afastado da borda do navegador.
Outro elemento importante que podemos especificar a margin é o body, ficando assim:
Código:

<html>
<head>
<style>
body {
margin: 0px;
}
div {
float: left;
border: 1px solid;
margin: 5px;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
Assim todos os itens da pagina ficarão mais próximos a borda do navegador.
padding – esta propriedade especifica a disância interna entre os itens, sendo que podemos
por exemplo estabelecer que as bordas estarão sempre a distância N dos textos, da mesma
forma das outras propriedades podemos especificar qual dos lados iremos aplicar o
padding, bastando especificar da seguinte forma padding-left.
Código:

<html>
<head>
<style>
body {
margin: 0px;
}
div {
float: left;
border: 1px solid;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
display – com esta propriedade podemos configurar se queremos que nosto item seja
exibido ou não Para sumir com um item basta setar ele como hidden.
Código:
<html>
<head>
<style>
body {
margin: 0px;
}
div {
float: left;
border: 1px solid;
margin: 5px;
padding: 5px;
}
.allDiv {
display: none;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<div class='allDiv'>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
font-family – Através desta propriedade podemos especificar qual fonte será utilizada nos
itens daquela pagina.
Código:

<html>
<head>
<style>
body {
margin: 0px;
font-family: Tahoma;
}
div {
float: left;
border: 1px solid;
margin: 5px;
padding: 5px;
}
.allDiv {
display: none;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
font-size – Através desta propriedade podemos especificar o tamanho da fonte, este

tamanho pode ser especificado em porcentagem (%) ou em pixels (px).
Código:
<html>
<head>
<style>
body {
margin: 0px;
}
h1 {
font-size: 12px;
}
div {
float: left;
border: 1px solid;
margin: 5px;
padding: 5px;
}
.allDiv {
display: none;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
width – Nesta propriedades devemos especificar a largura do elemento.
Código:
<html>
<head>
<style>
body {
margin: 0px;
}
h1 {
font-size: 12px;
}
div {
width: 300px;
float: left;
border: 1px solid;
margin: 5px;
padding: 5px;
}
.allDiv {
display: none;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
Observe que todos os itens da div pegaram a propriedade, como a div interna obedece a
regra de padding da outra div ela acaba “saindo” da div mãe, isso não é correto acontecer
podendo ser corrigido de várias maneiras, dependendo do navegador, o ideal é que as divs
ocupem a largura máxima da div mãe.
height – neste podemos especificar a altura dos itens, esta especificação não é comum nos
elementos de estrutura, pois nem sempre é interpretado da forma correta.
Código

<html>
<head>
<style>
body {
margin: 0px;
}
h1 {
font-size: 12px;
}
div {
width: 300px;
height: 100px;
float: left;
border: 1px solid;
margin: 5px;
padding: 5px;
}
.allDiv {
display: none;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado:
background-color – aqui devemos especificar a cor do fundo do elemento esta pode ser
especificada em hexadecimal.
Código:

<html>
<head>
<style>
body {
margin: 0px;
}
h1 {
font-size: 12px;
}
div {
width: 300px;
height: 100px;
float: left;
border: 1px solid;
background-color:#c5c5c5;
margin: 5px;
padding: 5px;
}
.allDiv {
display: none;
}
</style>
</head>
<body>
<div id='main'>
<div>
<h1> Menu</h1>
</div>
<h1>Body</h1>
</div>
</div>
</body>
</html>
Resultado
Exercício
1) Especifique para que serve os seguintes elementos
a. font-family
b. font-size
c. text-align
d. background-color
e. border
f. padding
2) Crie um formulário HTML e especifique todos os elementos input com a largura

igual a 200 pixels.
3) Crie uma página HTML com cabeçalho, menu esquerdo e conteúdo à direita.
4) Crie uma lista de forma que cada item fiquem 4 pixels afastados um do outro.
Tabela de cores:
OldLace 253 245 230 #FDF5E6

Cor Valor RGB Hexadecimal Linen 250 240 230 #FAF0E6
AntiqueWhite 250 235 215 #FAEBD7
Snow 255 250 250 #FFFAFA
PapayaWhip 255 239 213 #FFEFD5
GhostWhite 248 248 255 #F8F8FF
BlanchedAlmond 255 235 205 #FFEBCD
WhiteSmoke 245 245 245 #F5F5F5
Bisque 255 228 196 #FFE4C4
Gainsboro 220 220 220 #DCDCDC
PeachPuff 255 218 185 #FFDAB9
FloralWhite 255 250 240 #FFFAF0
NavajoWhite 255 222 173 #FFDEAD MediumSeaGreen 60 179 113 #3CB371
Moccasin 255 228 181 #FFE4B5 LightSeaGreen 32 178 170 #20B2AA
Cornsilk 255 248 220 #FFF8DC PaleGreen 152 251 152 #98FB98
Ivory 255 255 240 #FFFFF0 SpringGreen 0 255 127 #00FF7F
LemonChiffon 255 250 205 #FFFACD LawnGreen 124 252 0 #7CFC00
Seashell 255 245 238 #FFF5EE Green 0 255 0 #00FF00
Honeydew 240 255 240 #F0FFF0 Chartreuse 127 255 0 #7FFF00
MintCream 245 255 250 #F5FFFA MediumSpringGreen 0 250 154 #00FA9A
Azure 240 255 255 #F0FFFF GreenYellow 173 255 47 #ADFF2F
AliceBlue 240 248 255 #F0F8FF LimeGreen 50 205 50 #32CD32
lavender 230 230 250 #E6E6FA YellowGreen 154 205 50 #9ACD32
LavenderBlush 255 240 245 #FFF0F5 ForestGreen 34 139 34 #228B22
MistyRose 255 228 225 #FFE4E1 OliveDrab 107 142 35 #6B8E23
White 255 255 255 #FFFFFF DarkKhaki 189 183 107 #BDB76B
Black 000 #000000 Khaki 240 230 140 #F0E68C
DarkSlateGray 47 79 79 #2F4F4F PaleGoldenrod 238 232 170 #EEE8AA
DimGrey 105 105 105 #696969 LightGoldenrodYellow 250 250 210 #FAFAD2
SlateGrey 112 128 144 #708090 LightYellow 255 255 224 #FFFFE0
LightSlateGray 119 136 153 #778899 Yellow 255 255 0 #FFFF00
Grey 190 190 190 #BEBEBE Gold 255 215 0 #FFD700
LightGray 211 211 211 #D3D3D3 LightGoldenrod 238 221 130 #EEDD82
MidnightBlue 25 25 112 #191970 goldenrod 218 165 32 #DAA520
NavyBlue (Navy) 0 0 128 #000080 DarkGoldenrod 184 134 11 #B8860B
CornflowerBlue 100 149 237 #6495ED RosyBrown 188 143 143 #BC8F8F
DarkSlateBlue 72 61 139 #483D8B IndianRed 205 92 92 #CD5C5C
SlateBlue 106 90 205 #6A5ACD SaddleBrown 139 69 19 #8B4513
MediumSlateBlue 123 104 238 #7B68EE Sienna 160 82 45 #A0522D
LightSlateBlue 132 112 255 #8470FF Peru 205 133 63 #CD853F
MediumBlue 0 0 205 #0000CD Burlywood 222 184 135 #DEB887
RoyalBlue 65 105 225 #4169E1 Beige 245 245 220 #F5F5DC
Blue 0 0 255 #0000FF Wheat 245 222 179 #F5DEB3
DodgerBlue 30 144 255 #1E90FF SandyBrown 244 164 96 #F4A460
DeepSkyBlue 0 191 255 #00BFFF Tan 210 180 140 #D2B48C
SkyBlue 135 206 235 #87CEEB Chocolate 210 105 30 #D2691E
LightSkyBlue 135 206 250 #87CEFA Firebrick 178 34 34 #B22222
SteelBlue 70 130 180 #4682B4 Brown 165 42 42 #A52A2A
LightSteelBlue 176 196 222 #B0C4DE DarkSalmon 233 150 122 #E9967A
LightBlue 173 216 230 #ADD8E6 Salmon 250 128 114 #FA8072
PowderBlue 176 224 230 #B0E0E6 LightSalmon 255 160 122 #FFA07A
PaleTurquoise 175 238 238 #AFEEEE Orange 255 165 0 #FFA500
DarkTurquoise 0 206 209 #00CED1 DarkOrange 255 140 0 #FF8C00
MediumTurquoise 72 209 204 #48D1CC Coral 255 127 80 #FF7F50
Turquoise 64 224 208 #40E0D0 LightCoral 240 128 128 #F08080
Cyan 0 255 255 #00FFFF Tomato 255 99 71 #FF6347
LightCyan 224 255 255 #E0FFFF OrangeRed 255 69 0 #FF4500
CadetBlue 95 158 160 #5F9EA0 Red 255 0 0 #FF0000
MediumAquamarine 102 205 170 #66CDAA HotPink 255 105 180 #FF69B4
Aquamarine 127 255 212 #7FFFD4 DeepPink 255 20 147 #FF1493
DarkGreen 0 100 0 #006400 Pink 255 192 203 #FFC0CB
DarkOliveGreen 85 107 47 #556B2F LightPink 255 182 193 #FFB6C1
DarkSeaGreen 143 188 143 #8FBC8F PaleVioletRed 219 112 147 #DB7093
SeaGreen 46 139 87 #2E8B57 Maroon 176 48 96 #B03060
MediumVioletRed 199 21 133 #C71585 Honeydew4 131 139 131 #838B83
VioletRed 208 32 144 #D02090 LavenderBlush1 255 240 245 #FFF0F5
Magenta 255 0 255 #FF00FF LavenderBlush2 238 224 229 #EEE0E5
Violet 238 130 238 #EE82EE LavenderBlush3 205 193 197 #CDC1C5
Plum 221 160 221 #DDA0DD LavenderBlush4 139 131 134 #8B8386
Orchid 218 112 214 #DA70D6 MistyRose1 255 228 225 #FFE4E1
MediumOrchid 186 85 211 #BA55D3 MistyRose2 238 213 210 #EED5D2
DarkOrchid 153 50 204 #9932CC MistyRose3 205 183 181 #CDB7B5
DarkViolet 148 0 211 #9400D3 MistyRose4 139 125 123 #8B7D7B
BlueViolet 138 43 226 #8A2BE2 Azure1 240 255 255 #F0FFFF
Purple 160 32 240 #A020F0 Azure2 224 238 238 #E0EEEE
MediumPurple 147 112 219 #9370DB Azure3 193 205 205 #C1CDCD
Thistle 216 191 216 #D8BFD8 Azure4 131 139 139 #838B8B
Snow1 255 250 250 #FFFAFA SlateBlue1 131 111 255 #836FFF
Snow2 238 233 233 #EEE9E9 SlateBlue2 122 103 238 #7A67EE
Snow3 205 201 201 #CDC9C9 SlateBlue3 105 89 205 #6959CD
Snow4 139 137 137 #8B8989 SlateBlue4 71 60 139 #473C8B
Seashell1 255 245 238 #FFF5EE RoyalBlue1 72 118 255 #4876FF
Seashell2 238 229 222 #EEE5DE RoyalBlue2 67 110 238 #436EEE
Seashell3 205 197 191 #CDC5BF RoyalBlue3 58 95 205 #3A5FCD
Seashell4 139 134 130 #8B8682 RoyalBlue4 39 64 139 #27408B
AntiqueWhite1 255 239 219 #FFEFDB Blue1 0 0 255 #0000FF
AntiqueWhite2 238 223 204 #EEDFCC Blue2 0 0 238 #0000EE
AntiqueWhite3 205 192 176 #CDC0B0 Blue3 0 0 205 #0000CD
AntiqueWhite4 139 131 120 #8B8378 Blue4 0 0 139 #00008B
Bisque1 255 228 196 #FFE4C4 DodgerBlue1 30 144 255 #1E90FF
Bisque2 238 213 183 #EED5B7 DodgerBlue2 28 134 238 #1C86EE
Bisque3 205 183 158 #CDB79E DodgerBlue3 24 116 205 #1874CD
Bisque4 139 125 107 #8B7D6B DodgerBlue4 16 78 139 #104E8B
PeachPuff1 255 218 185 #FFDAB9 SteelBlue1 99 184 255 #63B8FF
PeachPuff2 238 203 173 #EECBAD SteelBlue2 92 172 238 #5CACEE
PeachPuff3 205 175 149 #CDAF95 SteelBlue3 79 148 205 #4F94CD
PeachPuff4 139 119 101 #8B7765 SteelBlue4 54 100 139 #36648B
NavajoWhite1 255 222 173 #FFDEAD DeepSkyBlue1 0 191 255 #00BFFF
NavajoWhite2 238 207 161 #EECFA1 DeepSkyBlue2 0 178 238 #00B2EE
NavajoWhite3 205 179 139 #CDB38B DeepSkyBlue3 0 154 205 #009ACD
NavajoWhite4 139 121 94 #8B795E DeepSkyBlue4 0 104 139 #00688B
LemonChiffon1 255 250 205 #FFFACD SkyBlue1 135 206 255 #87CEFF
LemonChiffon2 238 233 191 #EEE9BF SkyBlue2 126 192 238 #7EC0EE
LemonChiffon3 205 201 165 #CDC9A5 SkyBlue3 108 166 205 #6CA6CD
LemonChiffon4 139 137 112 #8B8970 SkyBlue4 74 112 139 #4A708B
Cornsilk1 255 248 220 #FFF8DC LightSkyBlue1 176 226 255 #B0E2FF
Cornsilk2 238 232 205 #EEE8CD LightSkyBlue2 164 211 238 #A4D3EE
Cornsilk3 205 200 177 #CDC8B1 LightSkyBlue3 141 182 205 #8DB6CD
Cornsilk4 139 136 120 #8B8878 LightSkyBlue4 96 123 139 #607B8B
Ivory1 255 255 240 #FFFFF0 SlateGray1 198 226 255 #C6E2FF
Ivory2 238 238 224 #EEEEE0 SlateGray2 185 211 238 #B9D3EE
Ivory3 205 205 193 #CDCDC1 SlateGray3 159 182 205 #9FB6CD
Ivory4 139 139 131 #8B8B83 SlateGray4 108 123 139 #6C7B8B
Honeydew1 240 255 240 #F0FFF0 LightSteelBlue1 202 225 255 #CAE1FF
Honeydew2 224 238 224 #E0EEE0 LightSteelBlue2 188 210 238 #BCD2EE
Honeydew3 193 205 193 #C1CDC1 LightSteelBlue3 162 181 205 #A2B5CD
LightSteelBlue4 110 123 139 #6E7B8B Green4 0 139 0 #008B00
LightBlue1 191 239 255 #BFEFFF Chartreuse1 127 255 0 #7FFF00
LightBlue2 178 223 238 #B2DFEE Chartreuse2 118 238 0 #76EE00
LightBlue3 154 192 205 #9AC0CD Chartreuse3 102 205 0 #66CD00
LightBlue4 104 131 139 #68838B Chartreuse4 69 139 0 #458B00
LightCyan1 224 255 255 #E0FFFF OliveDrab1 192 255 62 #C0FF3E
LightCyan2 209 238 238 #D1EEEE OliveDrab2 179 238 58 #B3EE3A
LightCyan3 180 205 205 #B4CDCD OliveDrab3 154 205 50 #9ACD32
LightCyan4 122 139 139 #7A8B8B OliveDrab4 105 139 34 #698B22
PaleTurquoise1 187 255 255 #BBFFFF DarkOliveGreen1 202 255 112 #CAFF70
PaleTurquoise2 174 238 238 #AEEEEE DarkOliveGreen2 188 238 104 #BCEE68
PaleTurquoise3 150 205 205 #96CDCD DarkOliveGreen3 162 205 90 #A2CD5A
PaleTurquoise4 102 139 139 #668B8B DarkOliveGreen4 110 139 61 #6E8B3D
CadetBlue1 152 245 255 #98F5FF Khaki1 255 246 143 #FFF68F
CadetBlue2 142 229 238 #8EE5EE Khaki2 238 230 133 #EEE685
CadetBlue3 122 197 205 #7AC5CD Khaki3 205 198 115 #CDC673
CadetBlue4 83 134 139 #53868B Khaki4 139 134 78 #8B864E
Turquoise1 0 245 255 #00F5FF LightGoldenrod1 255 236 139 #FFEC8B
Turquoise2 0 229 238 #00E5EE LightGoldenrod2 238 220 130 #EEDC82
Turquoise3 0 197 205 #00C5CD LightGoldenrod3 205 190 112 #CDBE70
Turquoise4 0 134 139 #00868B LightGoldenrod4 139 129 76 #8B814C
Cyan1 0 255 255 #00FFFF LightYellow1 255 255 224 #FFFFE0
Cyan2 0 238 238 #00EEEE LightYellow2 238 238 209 #EEEED1
Cyan3 0 205 205 #00CDCD LightYellow3 205 205 180 #CDCDB4
Cyan4 0 139 139 #008B8B LightYellow4 139 139 122 #8B8B7A
DarkSlateGray1 151 255 255 #97FFFF Yellow1 255 255 0 #FFFF00
DarkSlateGray2 141 238 238 #8DEEEE Yellow2 238 238 0 #EEEE00
DarkSlateGray3 121 205 205 #79CDCD Yellow3 205 205 0 #CDCD00
DarkSlateGray4 82 139 139 #528B8B Yellow4 139 139 0 #8B8B00
Aquamarine1 127 255 212 #7FFFD4 Gold1 255 215 0 #FFD700
Aquamarine2 118 238 198 #76EEC6 Gold2 238 201 0 #EEC900
Aquamarine3 102 205 170 #66CDAA Gold3 205 173 0 #CDAD00
Aquamarine4 69 139 116 #458B74 Gold4 139 117 0 #8B7500
DarkSeaGreen1 193 255 193 #C1FFC1 Goldenrod1 255 193 37 #FFC125
DarkSeaGreen2 180 238 180 #B4EEB4 Goldenrod2 238 180 34 #EEB422
DarkSeaGreen3 155 205 155 #9BCD9B Goldenrod3 205 155 29 #CD9B1D
DarkSeaGreen4 105 139 105 #698B69 Goldenrod4 139 105 20 #8B6914
SeaGreen1 84 255 159 #54FF9F DarkGoldenrod1 255 185 15 #FFB90F
SeaGreen2 78 238 148 #4EEE94 DarkGoldenrod2 238 173 14 #EEAD0E
SeaGreen3 67 205 128 #43CD80 DarkGoldenrod3 205 149 12 #CD950C
SeaGreen4 46 139 87 #2E8B57 DarkGoldenrod4 139 101 8 #8B658B
PaleGreen1 154 255 154 #9AFF9A RosyBrown1 255 193 193 #FFC1C1
PaleGreen2 144 238 144 #90EE90 RosyBrown2 238 180 180 #EEB4B4
PaleGreen3 124 205 124 #7CCD7C RosyBrown3 205 155 155 #CD9B9B
PaleGreen4 84 139 84 #548B54 RosyBrown4 139 105 105 #8B6969
SpringGreen1 0 255 127 #00FF7F IndianRed1 255 106 106 #FF6A6A
SpringGreen2 0 238 118 #00EE76 IndianRed2 238 99 99 #EE6363
SpringGreen3 0 205 102 #00CD66 IndianRed3 205 85 85 #CD5555
SpringGreen4 0 139 69 #008B45 IndianRed4 139 58 58 #8B3A3A
Green1 0 255 0 #00FF00 Sienna1 255 130 71 #FF8247
Green2 0 238 0 #00EE00 Sienna2 238 121 66 #EE7942
Green3 0 205 0 #00CD00 Sienna3 205 104 57 #CD6839
Sienna4 139 71 38 #8B4726 OrangeRed4 139 37 0 #8B2500
Burlywood1 255 211 155 #FFD39B Red1 255 0 0 #FF0000
Burlywood2 238 197 145 #EEC591 Red2 238 0 0 #EE0000
Burlywood3 205 170 125 #CDAA7D Red3 205 0 0 #CD0000
Burlywood4 139 115 85 #8B7355 Red4 139 0 0 #8B0000
Wheat1 255 231 186 #FFE7BA DeepPink1 255 20 147 #FF1493
Wheat2 238 216 174 #EED8AE DeepPink2 238 18 137 #EE1289
Wheat3 205 186 150 #CDBA96 DeepPink3 205 16 118 #CD1076
Wheat4 139 126 102 #8B7E66 DeepPink4 139 10 80 #8B0A50
Tan1 255 165 79 #FFA54F HotPink1 255 110 180 #FF6EB4
Tan2 238 154 73 #EE9A49 HotPink2 238 106 167 #EE6AA7
Tan3 205 133 63 #CD853F HotPink3 205 96 144 #CD6090
Tan4 139 90 43 #8B5A2B HotPink4 139 58 98 #8B3A62
Chocolate1 255 127 36 #FF7F24 Pink1 255 181 197 #FFB5C5
Chocolate2 238 118 33 #EE7621 Pink2 238 169 184 #EEA9B8
Chocolate3 205 102 29 #CD661D Pink3 205 145 158 #CD919E
Chocolate4 139 69 19 #8B4513 Pink4 139 99 108 #8B636C
Firebrick1 255 48 48 #FF3030 LightPink1 255 174 185 #FFAEB9
Firebrick2 238 44 44 #EE2C2C LightPink2 238 162 173 #EEA2AD
Firebrick3 205 38 38 #CD2626 LightPink3 205 140 149 #CD8C95
Firebrick4 139 26 26 #8B1A1A LightPink4 139 95 101 #8B5F65
Brown1 255 64 64 #FF4040 PaleVioletRed1 255 130 171 #FF82AB
Brown2 238 59 59 #EE3B3B PaleVioletRed2 238 121 159 #EE799F
Brown3 205 51 51 #CD3333 PaleVioletRed3 205 104 137 #CD6889
Brown4 139 35 35 #8B2323 PaleVioletRed4 139 71 93 #8B475D
Salmon1 255 140 105 #FF8C69 Maroon1 255 52 179 #FF34B3
Salmon2 238 130 98 #EE8262 Maroon2 238 48 167 #EE30A7
Salmon3 205 112 84 #CD7054 Maroon3 205 41 144 #CD2990
Salmon4 139 76 57 #8B4C39 Maroon4 139 28 98 #8B1C62
LightSalmon1 255 160 122 #FFA07A VioletRed1 255 62 150 #FF3E96
LightSalmon2 238 149 114 #EE9572 VioletRed2 238 58 140 #EE3A8C
LightSalmon3 205 129 98 #CD8162 VioletRed3 205 50 120 #CD3278
LightSalmon4 139 87 66 #8B5742 VioletRed4 139 34 82 #8B2252
Orange1 255 165 0 #FFA500 Magenta1 255 0 255 #FF00FF
Orange2 238 154 0 #EE9A00 Magenta2 238 0 238 #EE00EE
Orange3 205 133 0 #CD8500 Magenta3 205 0 205 #CD00CD
Orange4 139 90 0 #8B5A00 Magenta4 139 0 139 #8B008B
DarkOrange1 255 127 0 #FF7F00 Orchid1 255 131 250 #FF83FA
DarkOrange2 238 118 0 #EE7600 Orchid2 238 122 233 #EE7AE9
DarkOrange3 205 102 0 #CD6600 Orchid3 205 105 201 #CD69C9
DarkOrange4 139 69 0 #8B4500 Orchid4 139 71 137 #8B4789
Coral1 255 114 86 #FF7256 Plum1 255 187 255 #FFBBFF
Coral2 238 106 80 #EE6A50 Plum2 238 174 238 #EEAEEE
Coral3 205 91 69 #CD5B45 Plum3 205 150 205 #CD96CD
Coral4 139 62 47 #8B3E2F Plum4 139 102 139 #8B668B
Tomato1 255 99 71 #FF6347 MediumOrchid1 224 102 255 #E066FF
Tomato2 238 92 66 #EE5C42 MediumOrchid2 209 95 238 #D15FEE
Tomato3 205 79 57 #CD4F39 MediumOrchid3 180 82 205 #B452CD
Tomato4 139 54 38 #8B3626 MediumOrchid4 122 55 139 #7A378B
OrangeRed1 255 69 0 #FF4500 DarkOrchid1 191 62 255 #BF3EFF
OrangeRed2 238 64 0 #EE4000 DarkOrchid2 178 58 238 #B23AEE
OrangeRed3 205 55 0 #CD3700 DarkOrchid3 154 50 205 #9A32CD
DarkOrchid4 104 34 139 #68228B
Purple1 155 48 255 #9B30FF
Purple2 145 44 238 #912CEE
Purple3 125 38 205 #7D26CD
Purple4 85 26 139 #551A8B
MediumPurple1 171 130 255 #AB82FF
MediumPurple2 159 121 238 #9F79EE
MediumPurple3 137 104 205 #8968CD
MediumPurple4 93 71 139 #5D478B
Thistle1 255 225 255 #FFE1FF
Thistle2 238 210 238 #EED2EE
Thistle3 205 181 205 #CDB5CD
Thistle4 139 123 139 #8B7B8B
grey11 28 28 28 #1C1C1C
grey21 54 54 54 #363636
grey31 79 79 79 #4F4F4F
grey41 105 105 105 #696969
grey51 130 130 130 #828282
grey61 156 156 156 #9C9C9C
grey71 181 181 181 #B5B5B5
gray81 207 207 207 #CFCFCF
gray91 232 232 232 #E8E8E8
DarkGrey 169 169 169 #A9A9A9
DarkBlue 0 0 139 #00008B
DarkCyan 0 139 139 #008B8B
DarkMagenta 139 0 139 #8B008B
DarkRed 139 0 0 #8B0000
LightGreen 144 238 144 #90EE90

Apostila HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apostila HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML.....................................................................................................................................

2. Cite 3 navegadores presentes no mercado atual

3. Porquê devemos desenvolver nossos sites para que funcionem em divesos

Estrutura básica de um HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<script> - A tag script serve para indicarmos o ínicio de um código JavaScript ou

<script type="text/javascript" src="/js/jquery.js"></script>

Para utilizarmos a tag script corretamente devemos especificar 2 propriedades sendo:

src – Aqui deveremos especificar o caminho físico do arquivo ou o caminho relativo,

href – para especificarmos o endereço do arquivo css, geralmente utiliza-se endereço

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<p>Este &eacute; um par&aacute;grafo</p>

<p>Este &eacute; um <strong>par&aacute;grafo</strong></p>

<p>Este &eacute; um <i>par&aacute;grafo</i></p>

<p>Este &eacute; um <u>par&aacute;grafo</u></p>

<p>Este &eacute; um <br />par&aacute;grafo</p>

Resultado Internet Explorer:

Mais uma vez só uma imagem em branco

<table border="1" width="100%" cellspacing="5">

<table border="1" width="100%" cellspacing="5" cellpadding="5">

<table border="1" width="100%" cellspacing="5" cellpadding="5">

<table border="1" width="100%" cellspacing="5" cellpadding="5">

Link para outra pagina

4) Crie um novo arquivo e monte um formulário que solicite os dados de cliente de

Vejamos agora alguns detalhes da sintax utilizada.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Antes de definirmos o float:

Depois de definirmos o float:

Além de border podemos definir da mesma forma as seguintes propriedades.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Assim todos os itens da pagina ficarão mais próximos a borda do navegador.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

font-size – Através desta propriedade podemos especificar o tamanho da fonte, este

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

2) Crie um formulário HTML e especifique todos os elementos input com a largura

OldLace 253 245 230 #FDF5E6

Vous aimerez peut-être aussi

<p>Este é um parágrafo</p>

<p>Este é um <strong>parágrafo</strong></p>

<p>Este é um <i>parágrafo</i></p>

<p>Este é um <u>parágrafo</u></p>

<p>Este é um <br />parágrafo</p>