Tutorial de HTML - Indice dos Tópicos Abordados

1. Introdução ao HTML

HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. No fundo, o HTML não passa de texto. Por tanto, antes de começar a falar de HTML, vamos entender o que vem a ser uma linguagem de marcação.

Linguagens de marcação (markup languages em inglês) são linguagens que combinam texto com informações extras sobre o texto. Essa informação extra pode ser representada por diversos símbolos ou palavras-chave diferentes, dependendo da linguagem de marcação com que estivermos trabalhando.

A estrutura de um documento HTML apresenta os seguintes componentes:

<HTML>
<HEAD><TITLE>Titulo do Documento</TITLE></HEAD>
<BODY>
texto,
imagem,
links,
...
</BODY>
</HTML>

As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ...
Os documentos se dividem em duas seções principais, que veremos a seguir.

A Seção <HEAD>

<HEAD> contém informações sobre o documento; o elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim:

<HEAD><TITLE>Documento basico em HTML</TITLE></HEAD>

Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento.

É sugerido que os títulos dos documentos sejam sugestivos, evitando-se, portanto, títulos como "Introducao". De preferência, os títulos não devem conter acentos ou outros caracteres especiais (eles não serão mostrados corretamente pelos sistemas de janela em algumas plataformas).

Além do título, HEAD contém outras informações que podem ser recuperadas por robôs de pesquisa na Internet; esses campos de informação facilitam a classificação do documento em catálogos de busca, entre outras aplicações.

A Seção <BODY>

Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, e imagens e pode ter algunsatributos de apresentação que são aplicados ao documento

Veja um documento básico em HTML.

<!doctype html public "-//W3C//DTD HTML 3.2//EN">
<html>
<HEAD>
<title>Primeiro exemplo de documento HTML</title>
</HEAD>
<body>
<H1>Primeiro exemplo</H1>
<P> Voc&ecirc; tamb&eacute;m pode ver o documento fonte, no menu "View" (ou similar). <P>
</body>
</html>

Comentário de código:

1. <!--nao coloque este tipo de comentario no final da linha que já tem código-->

2. <!-- comentario de

varias linhas-->

3. Espaço em branco não é permitido entre o delimitador aberto de declaração de marcação ("<!") e o delimitador de comentário aberto ("--"), mas é permitido entre o comentário fechado ("--") e o delimitador fechado de declaração de marcação (">"). Um erro comum é incluir uma string de hífens ("---") dentro de um comentário. Autores devem evitar colocar dois ou mais hífens adjacentes dentro de comentários.
Exemplos:

O que vem a seguir são comentários válidos em HTML.

<!--    valid html comment     -->
<!-- valid html comment -- >

div{

width:400px;

<!--este tamanho é para ...-->

}

O que vem a seguir é um comentário não válido em HTML.

<!-- comentario -- invalido -->

Obs: comentário dentro das tags <style> e </style> devem ser colocados antes do fecha "chaves", }, pois, junto dos atributos, o mesmo gera erro, simplesmente o atributo não funcionará.

1.1. Padronização de projeto

Antes de apresentar os elementos de marcação propriamente dito, é de fundamental importância começar a explicação pelo começo, algo que parece óbvio, porém na maioria da vezes não é assim que acontece.

Sempre deve-se definir primeiro o cabeçalho, repare abaixo:

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2.  <html>
3.  <head>
4.  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
5.  <title>Título que aparece na barra de título da janela</title>
6.  <style>
regra de formatação dos documentos
7.  </style>
8.  </head>
9.  <body>
corpo do documento
10. </body>
11. </html>
...

Comentário das linhas do código acima:

Linha 1, a declaração <!DOCTYPY...>  é a primeira coisa que deve ser acrescentada ao código de seu documento, antes das demais tags. Ela é responsável para dizer ao navegador qual é a especificação do HTML ou XTML (baseado nos padrões do W3C). O HTML 4.01 especifica três tipos de documento: Strict, Transitional e Frameset.  O HTML 5 é bem mais simple.

Linha 2, a tag <html></html> marca o início e o fim da página.

Linha 3, a tag <head> que em inglês significa cabeçalho, é o local onde será definido a padronização do documento, conforme os elementos (tags) que o mesmo conterá no seu interior, inclusão de javascript, <style> e <meta>.

4. <meta> define o tipo de codificação usada quando salva-se o documento pela primeira vez, entre outras coisa.

5. <title></title> define o título que aparece na barra de título da janela.

6. <style></style> é o local onde será formatado o documento conforme as regra Cascading Style Sheet, CSS, neste site, há uma página só para ela.

7. <body></body> é o local onde será criado a página propriamente tido, como a inclusão das tags ou elementos.

1.3. DOCTYPE

De acordo com as especificações do W3C (World Wide Web Consortium), um DOCTYPE informa ao validador qual é a versão do HTML, ou XHTML, que está sendo usada, e deve constar no topo de cada página.

Eles são elementos essenciais na construção de uma página dentro dos padrões. O (x)HTML e o CSS do seu site não será válido sem eles. Eles também são essenciais para uma correta renderização da sua página.

Se você omitir o DOCTYPE, ou usar um inválido, o browser vai renderizá-lo em “Quirks Mode”, onde o Browser pensa que você escreveu seu HTML de forma antiquada e inválida. Mas se você escolher um DOCTYPE válido, ele ira funcionar em “Standards Compliance Mode”, ou seja, modo de concordância com os padrões.

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Diferenças entre Strict, Transitional, Frameset

Strict

Escolhendo um DOCTYPE Strict quer dizer que seu código está seguindo á risca os padrões, sem nenhum tipo de erro de validação

Transitional

Escolhendo um DOCTYPE Transitional é quando você está fazendo uma transição de uma forma antiga de marcação para uma mais moderna

Frameset

Escolhendo um DOCTYPE Frameset é para quando você usa Frames em sua página.

1.4. HTML 5

O HTML5 é mais simples. Doctype ou “declaração de tipo de documento” tradicionalmente é usado para especificar qual versão do HTML está sendo utilizada no documento.

No HTML 4 doctype diz que “este documente é escrito em HTML 4.01″. Para HTML 5 o doctype não informa a versão em lugar algum, só informa que o documento é do tipo HTML.

Doctype para HTML5:

<!DOCTYPE html>

A declaração de tipo é utilizada por validadores e não por navegadores. O doctype da versão 5 é o mínimo necessário para um navegador renderizar em modo padrão. Mesmo assim um documento HTML sem doctype pode ser um HTML5 válido.

Doctype não é a única coisa que ficou mais simples com HTML 5. Algumas propriedades não são mais necessárias em tags de cabeçalho básicas.

Utilizando HTML 4 para fazer referência a um arquivo CSS utilizava-se a tag link com a propriedade type=”text/css”. Com HTML 5 a propriedade type não é mais necessária.

Exemplo:

HTML 4: <link rel="stylesheet" type="text/css" href="file.css">

HTML 5: <link rel="stylesheet" href="file.css">

A tag script utilizada para fazer referência a arquivos javascript também perdeu a propriedade type.

Exemplo:

HTML 4: <script type="text/javascript" src="file.js"></script>

HTML 5: <script src="file.js"></script>

Os navegadores não precisam do atributo type. Já assumem que o script é tipo javascript e que o stylesheet é tipo css.

Há mais resumos também na tag meta utilizada para informar o character encoding utilizado.

Exemplo:

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

HTML 5: <meta charset="UTF-8">

1.5. Criando o primeiro arquivo HTML

1.5.1. Abra o bloco de notas do windows, Botão Iniciar > Todos os Programas > Acessório > Bloco de Notas.

1.5.2. digite o código abaixo:

<DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Título que aparece na barra de título da janela</title>
</head>
<body>
<p>Primeiro Programa em HTML</p>
</body>
</html>
.

1.5.3. Salve como ANSI (iso-8859-1), pois foi esta a configuração na tag <meta>, se salvar como uft-8, terá que mudar a <meta> para este padrão, esse erro não pode ser cometido.

Bloco de Notas>salvar: nome.html

Obs: as opções no Bloco de Notas são: ANSI, unicode, unicode big endian e UTF-8, o nome do arquivo é seguido de um "ponto" e a extensão html.

1.5.4. Vá no diretório (ou pasta) onde foi salvo o arquivo e dê dois cliques para o mesmo abrir, deverá abrir uma página com a frase: Primeiro Programa em HTML.

1.5.5. Para o HTML 5 o cabeçalho é:

<!DOCTYPE html>

<html lang="pt_BR">

<head>

<meta charset="utf-8">
<style>

1.6. Cuidado para não cometer esse erro:

Arquivo já existente como o cabeçalho?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
...

Se salvar um arquivo html como ANSI, e o cabeçalho for o do HTML 5, o arquivo abrirá com erro, todos os caracteres que tem acendo aparecem o sinal

O parágrafo - Cabeçalho, à moda,

Aparecerá:

Cabe�alho, � moda,

Obs: a tag font também dá erro, use font-family. ex: font-family: arial,verdana;

1.7. Qual a dirença de charset=utf-8 e charset=iso-8859-1 ?

Com o charset=utf-8, na hora que for inserir os textos de seu site, deve acentuá-los normalmente. Ou seja, fica bem prático.

Agora, se estiver utilizando PHP, ASP, Banco de Dados... daí sim é que terá problemas com o charset do site. Sempre tente deixá-lo como charset=utf-8. Neste caso, se os acentos ficarem todos errados, daí mude para o charset=iso-8859-1.

Com o charset=iso-8859-1, o código-fonte de seu site ficará com aquelas acentuações "estranhas", mas quando for renderizar a página para visualizá-la, tudo fica correto. Por exemplo: "acentuação", com o charset=iso-8859-1 no meu site, eu teria que escrever assim: "acentua & c c e d i l ; & a t i l d e ; o" para esta palavra aparecer corretamente (sem os espaços entre as palavras).

Lembrando que só poderá haver um charset setado por página. Exceto se voce for chamar um arquivo Javascript, por exemplo, que possue acentos, mas que no seu site com o charset=utf-8 ficaram erradas. Neste caso, então, voce chamaria este arquivo javascript assim, para que tenha seus acentos corrigidos (se eles estiverem aparecendo errado, naturalmente):

<script type="text/javascript" src="meu_arquivo.js" charset="ISO-8859-1"></script>

A recomendação é usar sempre UTF-8. Mas no caso os browser ocidentais estão em iso-8859-1, mas isso não tem problema, pois o navegador já retorna o ASCII.

Mas para o xhtml/php/banco de dados é recomendável sempre usar UTF-8 por ele suportar às mais variadas linguas.

Informar sempre o jogo de caracteres com a etiqueta META CHARSET

Em um documento HTML temos a possibilidade de informar sobre que jogo de caracteres estamos utilizando. Embora, se não for feito, os navegadores tentarão detectá-lo automaticamente. O que pode gerar erro.

Para informar no código fonte HTML do conjunto de caracteres que utilizamos se dispõe de uma etiqueta META, que se coloca no cabeçalho do documento (no HEAD). Essa etiqueta tem esta sintaxe.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Como vemos, dentro desta etiqueta se está informando o "charset" (set ou conjunto de caracteres) utilizado, que neste caso seria "ISO-8859-1". Se estamos trabalhando com UTF-8 poderíamos utilizar esta META para informar sobre isso:

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

Informar sobre o jogo de caracteres com a etiqueta META CHARSET

Que charset escolher e como salvar o documento para isso?

O UTF-8 e o ISO-8859-1, são adequados justamente por conter os caracteres típicos de português e de outra série de idiomas ocidentais.

A escolha é um pouco indiferente quando estamos trabalhando em HTML e talvez dependa um pouco mais do programa que usemos para editar o código fonte de nossas páginas ou de nosso sistema operativo. Em Windows, a maioria dos programas salvam os arquivos em ISO-8859-1, por isso, o mais seguro é que estejamos utilizando esse charset mesmo que não saibamos.

Embora os seus dados estejam em UTF-8 e você tenha declarado essa codificação em sua página, o seu servidor ainda pode estar enviando a página com um cabeçalho HTTP anexo que diz que a codificação é diferente. A declaração no cabeçalho HTTP irá anular as informações dentro da página.


Obs: charset deve ser especificado no documento para que o servidor não venha a se sobrepor ao documento e gerar erro.

Cabeçado do HTML 5

<!DOCTYPE html>

<html lang="pt_BR">

<head>

<meta charset="utf-8">

...
Resumo:
Ao invés de Canção, ele exibe Can��o ou Canção.
No primeiro caso (Can��o), sua página em ISO-8859-1 está obtendo a palavra Canção armazenada em UTF-8 da origem, seja ela do banco de dados ou de um XML, txt etc.
Já o segundo caso (Canção) é a sua página em UTF-8 exibindo a palavra Canção armazenada em ISO-8859-1 da origem.
Para que ocorra a exibição correta, deve-se armazenar novamente os dados com a codificação correta (o que é muito trabalhoso dependendo da quantidade de dados) ou trocar a codificação de exibição de seu site.
Para trocar a exibição, o cabeçalho HTML deverá estar como:
Para ISO-8859-1:
<html>
<head>
<title>Minha pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Para UTF-8:
<html>
<head>
<title>Minha pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Observação sobre a forma de salvar o arquivo: Mesmo que você especifique um dos cabeçalhos acima ou com o charset que deseja, o arquivo deve ser salvo na codificação equivalente ao charset especificado. Por exemplo, se você utiliza <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> , o arquivo deve ser salvo na codificação "ISO-8859-1, ou Latin1, ou Europeu Ocidental ISO (ou mesmo ANSI caso você use o Bloco de Notas do Windows)", mas se o charset for UTF-8, a codificação deverá ser Unicode / UTF-8 também. Lembrando que essa opção está disponível no editor de texto utilizado para editar o arquivo (notepad, notepad ++, gedit, textmate, textpad, vi, vim e vários outros).

2. Etiquetas ou Tags

As etiquetas, ou tags, são pequenos fragmentos que marcam texto no HTML. A etiqueta que marca um texto como negrito, por exemplo, é a <strong>. Toda etiqueta é delimitada pelo sinal de menor (<) e sinal de maior (>). Uma tag de fechamento se diferencia de uma de abertura apenas por uma barra (/) antes do nome do elemento (ex. </p>) e deve ser colocada imediatamente após o fim do conteúdo do elemento. Podem ser escritos tanto em maiúsculo como em minúsculo.

3. Elementos

Um elemento é uma estrutura semântica, composta de: tag de abertura, conteúdo e tag de fechamento. Um parágrafo é conseguido com o uso das tags <p></p>. Da seguinte forma:

<p>Esta frase é um parágrafo</p>

4. Atributo

Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo após o nome do elemento, precedido de um espaço e é composto de um nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas (") ou simples (‘).

O próprio id é um atributo, definido no cabeçalho do documento, entre as tags <style> e </style> que serve para identificar, de maneira única, um elemento dentro de um documento HTML. Exemplo:

<p id="nome-do-id">

O atributo href, é usado para definir uma referência de hipertexto (link) em um elemento A ou LINK. Exemplo:

<a href="http://caminho/index.html/">

A “tag alt” é um atributo usado para definir um texto, que deve substituir uma imagem, caso a mesma não esteja disponível ou não seja suportada pelo navegador (alt é abreviatura de “alternate”, que significa “substituto” e não “alternativo”).

Exemplo:

<img src="/caminho/foto1.jpg" alt="Esta imagem não pode ser aberta no seu navegador"




1 - FUNDO
background Define todos os parâmetros referentes ao fundo de um elemento.
não
herdada
CSS1 IE 4  F 1  N 6
Valores: background-color | background-image | background-repeat | background-attachment | background-position
background-color Define a cor de fundo de um elemento. não
herdada
CSS1 IE 4  F 1  N 4
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | transparent
background-image Define uma imagem como fundo de um elemento. não
herdada
CSS1 IE 4  F 1  N 4
Valores: url(caminho/imagem.jpg) | none
background-repeat Define se a imagem vai repetir (formando um mosaico) ou não e a direção da repetição. não
herdada
CSS1 IE 4  F 1  N 4
Valores: repeat | repeat-x | repeat-y | no-repeat
background-attachment Define se a imagem de fundo de um elemento ficará fixa ou se irá rolar junto com o conteúdo. não
herdada
CSS1 IE 4  F 1  N 6
Valores: scroll | fixed
background-position Define o ponto onde inicia o desenho da imagem de fundo. não
herdada
CSS1 IE 4  F 1  N 6
Valores: top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right | x% y% | x unids_css y unids_css
2 - BORDAS
border Define o estilo, a espessura e a cor das 4 bordas. Aceita de 1 a 3 valores. não
herdada
CSS1 IE 4  F 1  N 4
Valores: border-style | border-width | border-color
border-top
border-right
border-bottom
border-left
Definem o estilo, a espessura e a cor das bordas superior, direita, inferior e esquerda. Aceitam de 1 a 3 valores. não
herdadas
CSS1 IE 4  F 1  N 6
Valores: border-style | border-width | border-color
border-top-style
border-top-width
border-top-color
Definem o estilo, a espessura e a cor da borda superior. Aceitam de 1 a 3 valores. não
herdadas
CSS2
CSS1
CSS2
IE 4  F 1  N 6
IE 4  F 1  N 4
IE 4  F 1  N 6
Valores: border-style | border-width | border-color
border-right-style
border-right-width
border-right-color
Definem o estilo, a espessura e a cor da borda direita. Aceitam de 1 a 3 valores. não
herdadas
CSS2
CSS1
CSS2
IE 4  F 1  N 6
IE 4  F 1  N 4
IE 4  F 1  N 6
Valores: border-style | border-width | border-color
border-bottom-style
border-bottom-width
border-bottom-color
Definem o estilo, a espessura e a cor da borda inferior. Aceitam de 1 a 3 valores. não
herdadas
CSS2
CSS1
CSS2
IE 4  F 1  N 6
IE 4  F 1  N 4
IE 4  F 1  N 6
Valores: border-style | border-width | border-color
border-left-style
border-left-width
border-left-color
Definem o estilo, a espessura e a cor da borda esquerda. Aceitam de 1 a 3 valores. não
herdadas
CSS2
CSS1
CSS2
IE 4  F 1  N 6
IE 4  F 1  N 4
IE 4  F 1  N 6
Valores: border-style | border-width | border-color
border-style Define o estilo das 4 bordas. Aceita de 1 a 4 valores. não
herdada
CSS1 IE 4  F 1  N 6
Valores: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width Define a espessura das 4 bordas. Aceita de 1 a 4 valores. não
herdada
CSS1 IE 4  F 1  N 4
Valores: thin | medium | thick | unids_css
border-color Define a cor das 4 bordas. Aceita de 1 a 4 valores. não
herdada
CSS1 IE 4  F 1  N 6
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%)
3 - LINHAS DE CONTORNO
outline Define o estilo, a espessura e a cor da linha de contorno. Aceita de 1 a 3 valores. não
herdada
CSS2 IE --  F 1.5  N --
Valores: outline-style | outline-width | outline-color
outline-style Define o estilo da linha de contorno. não
herdada
CSS2 IE --  F 1.5  N --
Valores: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-width Define a espessura da linha de contorno. não
herdada
CSS2 IE --  F 1.5  N --
Valores: thin | medium | thick | unids_css
outline-color Define a cor da linha de contorno. não
herdada
CSS2 IE --  F 1.5  N --
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | invert
4 - MARGENS
margin Define as 4 margens do elemento. Aceita de 1 a 4 valores. não
herdada
CSS1 IE 4  F 1  N 4
Valores: margin-top | margin-right | margin-bottom | margin-left
margin-top
margin-right
margin-bottom
margin-left
Definem as margens superior, direita, inferior e esquerda. não
herdadas
CSS1 IE 3  F 1  N 4
IE 3  F 1  N 4
IE 4  F 1  N 4
IE 3  F 1  N 4
Valores: auto | unids_css | %
5 - ESPAÇO EM BRANCO (PADDING)
padding Define o espaço entre o conteúdo e os 4 limites do elemento. Aceita de 1 a 4 valores. não
herdada
CSS1 IE 4  F 1  N 4
Valores: padding-top | padding-right | padding-bottom | padding-left
padding-top
padding-right
padding-bottom
padding-left
Definem o espaço entre o conteúdo e os limites superior, direito, inferior e esquerdo. não
herdadas
CSS1 IE 4  F 1  N 4
Valores: unids_css | %
6 - CLASSIFICAÇÃO (FORMA DE EXIBIÇÃO)
clear Define os lados de um elemento onde não são permitidos elementos flutuantes. não
herdada
CSS1 IE 4  F 1  N 4
Valores: left | right | both | none
cursor Define um formato para o cursor. não
herdada
CSS2 IE 4  F 1  N 6
Valores: url | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
display Define se um elemento deve ser apresentado e a forma de apresentação. não
herdada
CSS1 IE 4  F 1  N 4
Valores: none | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
float Define o alinhamento de um elemento e controla o fluxo de texto ou de outros elementos ao seu redor. não
herdada
CSS1 IE 4  F 1  N 4
Valores: left | right | none
position Define a posição de um elemento como estática, relativa, absoluta ou fixa. não
herdada
CSS1 IE 4  F 1  N 4
Valores: static | relative | absolute | fixed
visibility Define se um elemento deve ficar visível ou invisível. não
herdada
CSS2 IE 4  F 1  N 4
Valores: visible | hidden | collapse
7 - POSICIONAMENTO
top
right
bottom
left
Definem a distância do elemento em relação ao limite do elemento que o contém. não
herdadas
CSS2 IE 4  F 1  N 4
IE 5  F 1  N 6
IE 5  F 1  N 6
IE 4  F 1  N 4
Valores: auto | unids_css | %
vertical-align Define o alinhamento vertical do elemlento. não
herdada
CSS1 IE 4  F 1  N 4
Valores: baseline | sub | super | top | text-top | middle | bottom | text-bottom | unids_css | %
clip Define a forma de um elemento. não
herdada
CSS2 IE 4  F 1  N 6
Valores: auto | shape
overflow Define o que deve ocorrer quando o conteúdo de um elemento excede sua área. não
herdada
CSS2 IE 4  F 1  N 6
Valores: visible | hidden | scroll | auto
z-index Define a ordem de apresentação dos elementos quando há sobreposição. não
herdada
CSS2 IE 4  F 1  N 6
Valores: auto | número
8 - DIMENSIONAMENTO
width
height
Definem a largura e a altura de um elemento. não
herdadas
CSS1 IE 4  F 1  N 4
IE 4  F 1  N 6
Valores: auto | unids_css | %
max-width
max-height
Definem a largura máxima e a altura máxima de um elemento. não
herdadas
CSS2 IE --  F 1  N 6
IE --  F 1  N 6
Valores: none | unids_css | %
min-width
min-height
Definem a largura mínima e a altura mínima de um elemento. não
herdadas
CSS2 IE --  F 1  N 6
IE --  F 1  N 6
Valores: unids_css | %
line-height Define a distância entre linhas de texto. herdada CSS1 IE 4  F 1  N 4
Valores: normal | número | unids_css | %
9 - FONTE
font Define vários valores da fonte. herdada CSS1 IE 4  F 1  N 4
Valores: font-family | font-size/line-height | font-style | font-weight | font-variant | caption | icon | menu | message-box | small-caption | status-bar
font-family Define o tipo de fonte. herdada CSS1 IE 3  F 1  N 4
Valores: family-name | generic-family
font-size Define o tamanho da fonte. herdada CSS1 IE 3  F 1  N 4
Valores: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | unids_css | %
font-style Define o estilo da fonte. herdada CSS1 IE 4  F 1  N 4
Valores: normal | italic | oblique
font-weight Define a espessura do traço da fonte. herdada CSS1 IE 4  F 1  N 4
Valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size-adjust Define que o tamanho da fonte deve ser ajustado, caso o browser tenha de utilizar outro tipo de fonte que não o escolhido em font-family. herdada CSS2 IE --  F --  N --
Valores: none | número
font-variant Define se deve ser utilizado um tipo de fonte "small-caps" ou normal. herdada CSS1 IE 4  F 1  N 6
Valores: normal | small-caps
font-stretch Define uma contração ou expansão na largura da fonte. herdada CSS2 IE --  F --  N --
Valores: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
10 - TEXTO
color Define a cor do texto. herdada CSS1 IE 3  F 1  N 4
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%)
text-align Define o alinhamento do texto. herdada CSS1 IE 4  F 1  N 4
Valores: left | right | center | justify
text-indent Define um deslocamento para a direita ou esquerda da primeira linha do texto. herdada CSS1 IE 4  F 1  N 4
Valores: unids_css | %
text-decoration Define um efeito decorativo para o texto. herdada CSS1 IE 4  F 1  N 4
Valores: none | underline | overline | line-through | blink
text-transform Define que o texto deve ser capitalizado ou ser exibido todo em maiúsculas ou minúsculas. herdada CSS1 IE 4  F 1  N 4
Valores: none | capitalize | uppercase | lowercase
letter-spacing
word-spacing
Definem um aumento ou diminuição no espaço entre os caracteres ou entre as palavras. herdadas CSS1 IE 4  F 1  N 6
IE 6  F 1  N 6
Valores: normal | unids_css
white-space Define o tratamento a ser dado ao espaço em branco existente dentro de um elemento. herdada CSS1 IE 5  F 1  N 4
Valores: normal | pre | nowrap
direction Define a direção em que é escrito o texto. Da esquerda para a direita ou da direita para a esquerda. herdada CSS2 IE 6  F 1  N 6
Valores: ltr | rtl
11 - LISTAS E MARCADORES
list-style Define todos os parâmetros referentes a uma lista. Aceita de 1 a 3 valores. não
herdada
CSS1 IE 4  F 1  N 6
Valores: list-style-type | list-style-position | list-style-image
list-style-type Define o tipo de marcador de item da lista. não
herdada
CSS1 IE 4  F 1  N 4
Valores: none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha
list-style-position Define a posição do marcador de item da lista. não
herdada
CSS1 IE 4  F 1  N 6
Valores: inside | outside
list-style-image Define a imagem a ser utilizada como marcador de item da lista. não
herdada
CSS1 IE 4  F 1  N 6
Valores: none | url
12 - TABELAS
border-collapse Define se os traços das bordas serão fundidos ou mantidos separados. não
herdada
CSS2 IE 5  F 1  N 7
Valores: collapse (borda simple)| separate (borda dupla)
border-spacing Define a distância entre as bordas de células adjacentes. Só aplicável quando border-collapse for separate. não
herdada
CSS2 IE 5M  F 1  N 6
Valores: unids_css
empty-cells Define se as células sem conteúdo visível devem ter bordas ou não. Só aplicável quando border-collapse for separate. não
herdada
CSS2 IE 5M  F 1  N 6
Valores: show | hide
caption-side Define a posição da legenda na tabela. não
herdada
CSS2 IE 5M  F 1  N 6
Valores: top | bottom | left | right
table-layout Define como será desenhada a tabela não
herdada
CSS2 IE 5  F 1  N 6
Valores: auto | fixed
13 - GERAÇÃO DE CONTEÚDO
content Gera conteúdo para um elemento. Utilizada com os pseudo-elementos :before e :after. não
herdada
CSS2 IE --  F 1  N 6
Valores: string | url | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name, string, list-style-type) | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote
counter-increment Define em quanto será incrementado o contador a cada ocorrência de um seletor. não
herdada
CSS2 IE --  F --  N --
Valores: none | número identificador
counter-reset Define o valor a a ser atribuído ao contador a cada ocorrência de um seletor. não
herdada
CSS2 IE --  F --  N --
Valores: none | número identificador
quotes Define o estilo das aspas. não
herdada
CSS2 IE --  F 1  N 6


5. Meu primeiro programa

Vamos criar uma página bem simples com o bloco de notas do windows, se preferir há vários programas de edição de página que são grátis, como o Kompozer, que tem interface gráfica, o que evita a repetição de digitação de códigos html.

Passo 1: Abra um Bloco de Notas

Passo 2: Copie o texto abaixo e cole no Bloco de Notas

Código de exemplo:

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title>exemplo</title>

</head>

<body>

<P align="center">Esta linha é um parágrafo centralizado</P>

</body>

</html>

Passo 3: Agora salve o seu arquivo com a opção UTF-8 como um nome qualquer, no meu caso foi exemplo1.htm.

Lembre-se de salvar todos os arquivos escrevendo seu nome usando apenas letras minúsculas. Isso serve para imagens e para arquivos HTML. A primeira página da sua Homepage tem que se chamar index.htm, é ela que chamará as demais páginas, através dos links  referenciados quando as mesmas estiverem em um servidor.

Passo 4: Para executar o arquivo criado basta dar um clique, ou dois cliques (varia conforme o navegador) no arquivo criado, com extensão .html,  clique no link abaixo para ver  o exemplo:


Clique aqui para ver o exemplo

O resultado deverá ser parecido com o da figura abaixo:

 

A primeira tag em seu documento HTML é <html>. Esta tag define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. A última tag em seu documento deverá ser </html>. Esta tag indica ao navegador que é o fim de seu documento HTML.

O texto entre as tags <head> ... </head> é a informação do cabeçalho.

Nenhuma informação contida no cabeçalho é exibida na janela do navegador.

O texto entre as tags <title> ... </title> é o t ítulo de seu documento. O título será exibido na legenda do navegador, na parte de cima do browser, barra de título da janela.

O texto entre as tags <body> ... </body> são as informações que serão exibidas na página.

O processador e visualizador de HTML são chamados de navegador, pela característica do hipertexto que permite ao usuário "nadar" na informação.

O navegador (também chamado de browser ), abre arquivos de computador com extensões próprias (*.html e *.php, as mais conhecidas), o código HTML, interpretado segundo o padrão do hipertexto e gerar a "página html ", conforme as marcações utilizadas. Por convenção, os nomes dos arquivos em HTML terminam com .html. Exemplo: index.html, pagina.html.


6. Elementos ou Tags

6.1. O elemento <hx> ... </hx>

Há seis tamanhos de cabeçalhos em HTML, de <h1> a <h6>:

O TAG <h> cria uma espécie de cabeçalho no documento , com padrões de formatação já prontinhos para usar. Serve para identificar o começo de uma seção ou tópico , facilitando a visualização dentro da página. Logo após o TAG <h> deve vir um número de 1 a 6 indicando o tamanho da fonte , sendo que 1 é o maior tamanho e 6 o menor.

Toda vez que usado esse TAG , a fonte já virá padronizada em negrito e em determinado tamanho, além de colocar uma linha em branco após o texto. Lembre –se de fechar com o tag </h> .

Código de exemplo :

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title>exemplo</title>

</head>

<body>

<H1>Este é um cabeçalho com a tag H1</H1>

<H2>Este é um cabeçalho com a tag H2</H2>

<H3>Este é um cabeçalho com a tag H3</H3>

<H4>Este é um cabeçalho com a tag H4</H4>

<H5>Este é um cabeçalho com a tag H5</H5>

<H6>Este é um cabeçalho com a tag H6</H6>

</body>

</html>

Clique aqui para ver o exemplo

O resultado deverá ser parecido com o da figura abaixo:

6.2. O elemento <center> ... </center>

Sua função é centraliza um texto , uma imagem ou um elemento da página.

Exemplo:

<p><center>Texto centralizado</center><display: inline-block; <!--para que o div fique do tamanho do texto, ou seja, variavel-->/p>

O resultado será:

Texto centralizado

Observação: este último exemplo não foi incluído todo o código html, bem como a âncora para execução do mesmo e sua imagem por ser desnecessário a repedição de explicações, o que tornaria este trabalho mais extenso.

6.3. O elemento <p>...</p>

A principal diferença entre a página HTML e um editor de textos tradicional é que a página não reconhece o fim de um parágrafo com o pressionamento da tecla Enter. Se você simplesmente escrever palavras sem TAGS de formatação em um arquivo html elas serão formatadas em um grande único parágrafo. Você precisa forçar o fim do parágrafo e a quebra de linha usando TAGS especiais. O TAG responsável pela quebra de parágrafos é o TAG <P> . Ele iniciará um novo parágrafo e pulará uma linha entre o texto.

O exemplo abaixo formata o parágrafo para todo o documento:

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title>exemplo</title>

<style>

p {

font-size: 20px;

line-height:30px;

}

</style

</head>

<body>

<P align="center">parágrafo um com font-size: 20px e line-height:30px</P>

<P align="center">parágrafo dois com font-size: 20px e line-height:30px</P>

</body>

</html>


Clique aqui para ver o exemplo

O resultado deverá ser parecido com o da figura abaixo:

 

6.4. O elemento <br> provoca a quebra a linha

Em muitas situações , você precisa quebrar a linha e continuar o texto na linha seguinte , coisa que o TAG <P> não faz, pois ele pulará uma linha. Para isso usamos o TAG <BR> (abreviação de BREAK – Quebrar ) , dando continuidade do texto na linha de baixo.

6.5. O elemento <hr>, cria uma linha horizontal.

O tag <hr> cria uma linha horizontal que são utilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre um item de informação e outro. Estas linhas podem também ser usadas com atributos de largura, altura, border e background-color.
Alguns atributos: 
background-color: #0000FF; (cor da linha)
border:1px solid #0000FF; (borda da linha)
height: 1px; (altura da linha)
noshade; (sem sombra)
width: 100%; (largura)

Exemplo :

<hr align="center" color="#000000" size="3" width="50%">


Se você estiver codificando XHTML lembre-se: elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />.


6.6. Formatação e Estilos de Texto

6.6.1. O tag <b> Texto </b> formata o texto em negrito

6.6.2. O tag <i> Texto <i> formata o texto em itálico

6.6.3. O tag <u> Texto</u> cria um sublinhado no texto

6.6.4. O tag<marquee atributo=efeito>textos, figuras, etc...</marquee>

Atributos
align="top", "middle", "bottom" Alinha o texto pelo topo, meio e inferior, respectivamente.
behavior=scroll, slide, alternate Scroll - Inicia o texto aparecendo de um lado e segue até desaparecer a última letra do outro.

Slide - Inicia o texto de um lado e segue até a primeira letra tocar o lado oposto, então ele pára.

Alternative - Cria o efeito do texto aparecer de um lado e segue até tocar o lado oposto, então ele retorna.
bgcolor="cor" Especifica a cor de fundo. Pode ser pelo nome da cor ou através de seu código RGB.
direction=left, right, up, down Especifica a direção do texto, esquerda (default), direita, para cima e para baixo, respectivamente.
height="número", % Especifica a largura do painel. Se for um número ele especifica a quantidade de pixels se for % ele especifica a largura da janela do marquee em porcentagem.
hspace="número" Especifica a largura em pixels das margens esquerda / direita
loop="número", -1, infinite Especifica quantas vezes será executado a rolagem do texto, se o valor for -1 ou infinite, o texto rolará infinitamente.
scrollamount="número" Especifica a quantidade de pixels que será usada para deslocar o marquee, ou seja, quanto maior for o valor, maior será a velocidade de deslocamento.
scrolldelay="número" Especifica em milissegundos o tempo de deslocamento do texto.
vspace="número" Determina em pixels a margem superior e inferior do marquee.
width="número", % O número especifica a altura do painel, % especifica a altura em relação a janela em porcentagem.

Observação: <marquee> não é utilizado junto com <p>

6.7. O elemento <blink> Texto </blink>

Cria o efeito "pisca" no texto, porém há browser que não aceita.

6.8. O elemento <body> ...</body corresponde ao corpo do documento

6.8.1. O parâmetro bgcolor irá definir uma cor de fundo para todo o documento

6.8.2. O elemento <img src= "caminho/nome-da-imagem.jpg">

É usada para inserir uma imagem na posição atual onde ele é especificado:

Se não for especificado uma url , o browser procura a imagem no diretório atual. caso a imagem esteja em um diretório diferente ao do documento, é necessário indicar o diretório.

Podendo alinhar a imagem para um determinado ponto da tela, como por exemplo deixando o texto pelo fundo da imagem. veja os exemplos:

<img src = "imagem.gif" align="top"> alinha a imagem por cima do texto ;

<img src = "imagem.gif" align="middle"> alinha a imagem pelo meio do texto ;

<img src = "imagem.gif" align="bottom"> alinha a imagem pelo fundo do texto;

<img src = "imagem.gif" align="left"> alinha a imagem à esquerda da página ;

<img src = "imagem.gif" align="right">alinha a imagem à direita da página.

Além do complemento align , também podemos usar o complemento alt , que cria uma espécie de hint, isto é , um pequeno texto explicativo que aparece abaixo da seta do mouse quando este pára por sobre a figura. exemplo:

<img src = "imagem.gif " align = "left " alt= "imagem">

6.9. O tag <body>...</body>

Corresponde ao local onde é inserido todas as tags, ou seja, a sua formatação afeta todo o documento.

O parâmetro background adiciona imagens ou cores de fundo.

<body background = "imagem.gif"> ou <body background ="imagem.jpg">

A propriedade bgproperties=fixed deixa o fundo da página estático e apenas o conteúdo da sua página irá se mover, deixando a página mais rápida, a sintaxe é :

<body background = "piso.gif " bgproperties= "fixed ">

6.10. Formata a fonte do texto

6.10.1. atributo face="..."

6.10.2. atributo color

6.10.3. atributo size

O elemento <font face = "fonte"> irá definir que tipo de fonte que seu texto irá utilizar. Aconselho a usar fontes de padrão popular no Windows, pois as fontes que seu computador tem, pode ser que outro computador não tenha. Por isso fontes como times new roman e arial são aconselháveis.

Obs. : A fonte Times New Roman ( Times ) já é o padrão das páginas HTML , podendo se colocar qualquer fonte existente em sua máquina como Mistral , Arial etc.

O elemento <font size ="tamanho"> irá definir qual o tamanho da fonte utilizada , lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 6. Podemos usar tamanhos como 78 e 64 , mas lembre, se que pode não funcionar em alguns micros. Por isso, se você quer aumentar o tamanho de uma fonte, use o sinal de + antes do número que irá definir o tamanho da fonte e, para diminuir use o sinal de - . Por Exemplo :

<font size = + 3> Irá deixar o texto com o tamanho 6 </font> ;

<font size = 3> Irá deixar seu texto com o tamanho 3 </font> ;

Obs. : O tamanho 3 é o tamanho padrão das páginas HTML , podendo colocar qualquer tamanho compatível a fonte usada.

Deve-se fechar o tag </font> para que o formato seja usado só no texto escolhido e não em toda a página.

6.11. links

A principal atração da internet é a criação de documentos com o conceito de hipertexto, ou seja, um documento que se vincula a outros documentos por meio de ligações especiais chamadas links ou hiperlinks. Com esse conceito , você pode criar documentos que façam referências e permitam ao usuário acessar tais referências não importando se elas estão em outra página web, no seu micro ou em algum servidor de rede.

O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou tópicos podem ser rapidamente acessados por meio dos links.

Âncoras

Uma âncora é um ponto de referência ou endereço que será acessado por um link. Uma âncora é usada dentro do documento para marcar o início de uma seção do documento.

Exemplo:

<a name="nome-da-ancora"> texto </a>

Depois disso escreva o pedaço que você quer associar a esse nome. Agora crie um link para chegar até esse pedaço , usando o tag :

<a href="#nome-da-ancora">clique aqui</a>

Ao clicar na mensagem "clique aqui" de sua página , o usuário irá até o pedaço que você nomeou.

O sinal de cerquilha (#) é necessário para a âncora, pois avisa ao browser para procurar o link no documento atual.

Âncoras para uma outra página

Para o link ir a outra página em um ponto determinado. Deve-se, promeiro, incluir, na página de destino, a tag da âncora no ponto de destino, como já foi mencionado anteriormente. Depois, abasta incluir, além do nome de destino como também já foi explicado (anconara na mesma página), o caminho e o nome do arquivo.html completo.

<a href="caminho/arquivo.html#nome da ancora">Texto</a>

Em "nome-do-lugar-a-ser-levado" você coloca o URL ou a página html que vai ser mostrada e, depois do destino, o "#nome da ancora". Este nome de âncora deve ser o mesmo nome de âncora que você definiu na página de destino.

Você pode incluir quantas âncoras quiser em sua página, mas lembre-se de que cada uma deve ter um nome diferente.

Linkando arquivos locais

Fazer a ligação de um texto com outra página , ou figura , ou até mesmo outros arquivos que estejam na mesma pasta que seu documento atual é um dos principais recursos da própria internet, seu planejamento através de menus determinará a facilidade e rapidez da navegação entre os documentos.

Exemplo :

<a href = "pagina.html ">clique aqui</a>

Você ainda pode criar uma âncora em outro documento e chamá-lo em um link do documento atual. É só nomear a âncora na página que você quer e colocar no link o nome da página seguido pela âncora . Exemplo :

<a href="página1.htm#index"> vai para o index </a>

Linkando arquivos de outros diretórios

Você pode especificar o endereço de outros diretórios (c:/pasta/arquivo.html ). Na programação html você deve inverter a barra de espaços, usando a barra "/ " no lugar da barra "\" para separar diretórios. Além disso o browser usa como referencial o diretório atual para iniciar a busca de páginas. Para especificar um arquivo que esteja no diretório strauss, que fica abaixo do diretório bach, os quais se encontram ambos no diretório raiz, você deve usar os sinais ../ para subir um nível, acessando assim a raiz e depois o caminho do diretório bach. Portanto usamos ponto-ponto-barra (../) para indicar que se deve voltar um nível.

<img src="../figuras/carta.gif">
Indica que deverá voltar um diretório da posição atual, e avanças para o diretório figuras, onde se encontra o arquivo carta.gif.

Exemplo:

<a href = "../bach/strauss/arquivo.html">

A figura abaixo está mais fácil de entender:


Se o diretório a ser acessado está abaixo do diretório atual, basta especificar o nome do subdiretório sem nenhum símbolo Exemplo:

<a href = "pasta2/arquivo.html">

Em alguns browser, você pode escrever o caminho como no dos, exemplo :

<a href = "c:\bach\strauss\arquivo.html ">

Porém , tente evitar esta técnica em alguns browsers isso não funciona.

Linkando arquivos de outros servidores

Através de um esquema de endereçamento, a url, a internet consegue acessar um arquivo que está em qualquer micro deste planeta desde que esteja conectado adequadamente a web.

A url serve para especificar a localização de páginas e arquivos em diretórios de servidores da web.

Acessando um arquivo pelo dos :

c: \windows \system \ lista.txt

Acessando uma página pela web :

http://www.lojja.com/arquivo.html

Uma url é composta por duas partes principais. A primeira é o protocolo internet do documento, a segunda parte é o endereço do servidor e da página. A sintaxe é:

protocolo: //servidor.instituição/arquivo

Onde :

Protocolo é o tipo de servidor que está sendo acessado;

Servidor é o computador que contém a página;

Instituição é o tipo de instituição a qual esse computador pertence (comercial, internet publica, militar etc. ) ;

arquivo é o caminho do arquivo.

Exemplo:

http:// www.boascompras.net/index.htm

_blank: obriga que qualquer página seja carregada em uma nova janela. tem efeito semelhante ao uso de window_name, mas _blank não nomeará a nova janela.

_top: obriga que qualquer página seja carregada na janela de maior nível, limpando qualquer janela de frame existente no momento

_self: obriga que qualquer página de retorno de um "form" seja carregada dentro da janela que o contém.

_parent: obriga que qualquer página de retorno de um form seja carregada na janela que é a mãe da janela que contém o form, isto é, se a janela do form é parte de um documento que usa frames, ela será carregada na janela controlada pelo tag frameset.  (topo).

_target: abre a página no nome do iframe ou frame especificado

Ex:
<a href="tutorial1.html" target="iframe1">Instrução</a>
<iframe src="entrada.html" name="iframe1" border="0" framespacing="0" marginwidth="0" marginheight="0" frameborder="no"> </iframe>

Obs: Ao clicar no link Instrução, a página tutoril.html será aberta dentro do iframe de nome iframe1, isto ocorre porque o link foi configurado como _target="iframe1".

Você pode usar listas para várias funções: fazer uma lista propriamente dita ou simplesmente melhorar seu layout, ou ainda, facilitar o uso do CSS. As listas pode ser: de marcadores, numeradas, glossário.

6.12. Lista

6.12.1. Listas com marcadores, listas não classificadas

<ul>

<li>primeiro item com marcador</li>

<li>segundo item com marcador</li>

<li>último item com marcador</li>

</ul>

Resultado:


Atributos:
<ul type="square"> quadrado
<ul type="circle"> círculo vazado
<ul type="disc"> círculo cheio (é o padrão, pode ser omitido)

6.12.2. Listas numeradas seqüencialmente com algarismos ou letras, listas classificadas 

<ol>

<li>primeiro item numerado</li>

<li>segundo item numerado</li>

<li>último item numerado</li>

</ol>

Resultado:

  1. primeiro item numerado
  2. segundo item numerado
  3. último item numerado

Atributos:
<ol type="1"> algarismo arábico (é o padrão, pode omitir)
<ol type="a"> letras minúsculas
<ol type="a"> letras maiúsculas
<ol type="i"> algarismo romano minúsculo
<ol type="i"> algarismo romano maiúsculo
<ol type="i" start="7"> algarismo romano maiúsculo, começando no nº7 (aqui é arábico, mas na lista é romano maiúsculo)

6.12.3. Listas de glossário
<dl> para indicar o início de uma lista de glossário
<dt> termo de definição
<dd> dado de definição 

<h1>tags de lista em html</h1>

<dl>

<dt>o tag ul</dt>

<dd>cria uma lista não classificada, ou com marcadores.</dd>

<dt>o tag ol</dt>

<dd>cria uma lista classificada, ou numerada.</dd>

<dt>o tag li</dt>

<dd>utilizado tanto em listas classificadas como não classificadas par ressaltar itens.</dd>

<dt>o tag dl</dt>

<dd>cria uma lista de glossário, ou dicionário.</dd>

<dt>o tag dt</dt>

<dd>define um termo ou cria uma lista de definições.</dd>

<dt>o tag dd</dt>

<dd>cria uma definição em uma lista de glossário ou dicionário.</dd>

</dl>

tags de lista em html

o tag ul
cria uma lista não classificada, ou com marcadores.
o tag ol
cria uma lista classificada, ou numerada.
o tag li
utilizado tanto em listas classificadas como não classificadas par ressaltar itens.
o tag dl
cria uma lista de glossário, ou dicionário.
o tag dt
define um termo ou cria uma lista de definições.
o tag dd
cria uma definição em uma lista de glossário ou dicionário.

6.12.4. Utilizando imagens como marcadores
<dl><dt><img src=“imagem.gif”>definição número um</dt>
<dl>
<dt><img src="pasta/figura1.gif">definição número um</dt>
<dd>esta é a aparência da definição usando uma estrela.<dd>
<dt>definição número dois</dt>
<dd>agora estou criando uma nova definição sem estrela.<dd>
<dt><img src="figuras/star2.gif">definição número três</dt>
<dd>última definição, agora usando uma estrela animada.<dd>
</dl>

6.12.5. Aninhando listas

<ul>

   <li>item 1 de lista numérico</li>

   <li>item 2 de lista numérico</li>

   <ul>

      <li>sub item 1 de lista numérico</li>

      <li>sub item 2 de lista numérico</li>

   </ul>

   <li>item 3 de lista numérico</li>

</ul>

<ol>

   <li>tortas</li>

   <ul>

      <li>chocolate</li>

      <li>ameixa</li>

   </ul>

   <li>sorvetes</li>

   <ul>

      <li>creme</li>

      <li>flocos</li>

   </ul>

</ol>


Resultado:

  1. tortas
  2. sorvetes

6.13. Tabelas

O elemento <table> ... </table> é usado para criar tabelas, porém necessita das tags <tr></tr> para criar linhas e <td></td> para dividir a linha em colunas:
Tradução (inglês):
table: mesa
tr: table row (rou)
td: table data
row: fileira, fila, linha
data: dados

Uma tabela  poder ser obtida com o código abaixo:

linha1coluna1
linha1coluna2
linha1coluna3
linha1coluna4
linha2coluna1
linha2coluna2
linha2coluna3
linha2coluna4
linha3coluna1
linha3coluna2
linha3coluna3
linha3coluna4
linha4coluna1
linha4coluna2
linha4coluna3
linha4coluna4

Exemplo de uma tabela em html. Observe que as bordas somente externas são definidas no CSS (entre <style>...</style>) e as bordas internas (das celulas) e externas são definidas, inline, com border="1", ou seja, na tag <table>.

<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<title>exemplo</title>
<style>
table {
border-collapse:collapse; <-- borda simples -->
border:1px solid #000000; <-- bordas externa de 1px, sólida e preta -->
background-color:#FFFFFF;
}
</style>
</head>
<body>
<table style="text-align: left; width: 50%;" border="1" bordercolor="#cccccc" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>linha1coluna1<br>
</td>
<td>linha1coluna2<br>
</td>
<td>linha1coluna3<br>
</td>
<td>linha1coluna4<br>
</td>
</tr>
<tr>
<td>linha2coluna1<br>
</td>
<td>linha2coluna2<br>
</td>
<td>linha2coluna3<br>
</td>
<td>linha2coluna4<br>
</td>
</tr>
<tr>
<td>linha3coluna1<br>
</td>
<td>linha3coluna2<br>
</td>
<td>linha3coluna3<br>
</td>
<td>linha3coluna4<br>
</td>
</tr>
<tr>
<td>linha4coluna1<br>
</td>
<td>linha4coluna2<br>
</td>
<td>linha4coluna3<br>
</td>
<td>linha4coluna4<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

6.13.1. os atributos são border, cellpadding, cellspacing, width.

<table border="n" cellpadding="n" cellspacing="n" width="n">
... definição do conteúdo da tabela
</table>

border=“n”: espessura da borda em pixels

cellpadding =“n”: enchimento, espaço entre a borda e seu conteúdo, em pixels

cellspacing =“n”: espaçamento entre as células da tabela, em pixels

width =“n”: fixa um valor determinado, em pixels, para a largura das células se quiser em %, width=“100%”.

Cada linha da tabela é definida por <tr> </tr> (table row)

Cada célula na linha é definida por <td> </td> (table data) 

Exemplos:

<table border=1>

<tr>

<td width=25% bgcolor=blue>campo1</td>

<td align=middle width=75% bgcolor=blue>campo2</td>

</tr>

6.13.2. Os atributos colspan e rowspan

Estes atributos  possibilitam mesclar campos, ou seja, colspan mescla campos pertencentes a colunas diferentes formando um novo campo maior e rowspan mescla campos pertencentes a linhas diferentes formando um novo campo maior

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title>exemplo</title>

<style>

table {
border-collapse:collapse;
border:1px solid #000000;
background-color:#FFFFFF;

}

</style>

</head>

<body>

<table style="text-align: left; width: 50%;" border="1" bordercolor="#cccccc" cellpadding="2" cellspacing="2">

<tbody>

<tr>
<td colspan=2>exemplo do uso do colspan</td>
<tr>
<td>célula 1</td> <td>célula 2</td>
</tr>
</tbody>
</table>
</body>
</html>

Observe que colspan=2 mesca dois campos em colunas, com isso somente um campo é criado


colspan = 2 mescla dois campos em colunas
célula 1 célula 2

6.14. <frameset > ...</frameset>

Divisões de uma Sub-Janela

A tag <frameset> define o contexto e formato no qual frames ou sub-janelas serão criadas dentro de uma página de internet. Esta tag divide a janela e a tag <frame> chamará uma pagina.html para ocupar essa divisão, a divisão é feito de forma sequencial, cada <frameset> faz a divisão da parte da janela que não tem o seu <frame> preenchido na divisão anterior.

Cada frame ou sub-janela representa uma página diferente e o tamanho e localização destas sub-janelas é determinado pelos atributos da tag <frameset>.

Por definição, páginas contendo as tags <frame> e <frameset> não podem conter as tags <body> e </body>.

Exemplo 1:

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title>exemplo</title>

</head>

<frameset cols="30%, *">

<frame src="paragrafo.html" name="frame1">

<frame src="paragrafo.html" name="frame2">

</frameset>

</html>

Observação: o frameset fez duas divisões e na sequência houve o "preenchimento" das divisões com os respectivos frame, a primeira colula tem 30% da largura da tela e a segunda coluna tem o restante para os 100%, indicado pelo asterisco (*).

Exemplo 2:

<html>

<head>

<title>nomedapagina</title>

</head>

<frameset cols="30%,*">

<frame src="paragrafo.html">

<frameset rows="20%,*">

<frame src="paragrafo.html" name="superior">

<frame src="paragrafo.html" name="inferior">

</frameset>
</frameset>

</html>

Observação: o primeiro frameset dividiu a janela em duas colunas e "preencheu apenas a primeira, o segundo frameset dividiu a segunda coluna em duas linhas e logo em seguida os mesmos foram preenchidos.

Exemplo 3:

<html>

<head>
<title>nomedapagina</title>
</head>
<frameset rows="20%,*">
<frame src="arquivo1.html">
<frameset cols="30%,*">
<frame src="arquivo2.html" name="esquerda">
<frame src="arquivo.html" name="direita">
</frameset>
</frameset>
</html>

Atributos Obrigatórios:

Atributo Valor Descrição
cols pixels
%
*
Especifica uma lista de larguras separadas por vírgula para cada uma das colunas contendo frames ou sub-paginas. Cada frame pode ter uma largura diferente. O valor '*' (asterisco) representa 'o restante da página'. Ou seja, se um valor "80%, *" for especificado, a página será dividida em duas colunas, a primeira ocupando 80% e a segunda o restante, ou seja, 20%.
rows pixels
&
*
Especifica uma lista de alturas separadas por vírgulas para cada uma das linhas contendo frames ou sub-páginas. Cada frame pode ter uma altura diferente. O valor '*' (asterisco) representa o 'restante da página'. Ou seja, se um valor "80%, *" for especificado, a página será dividida em duas linhas, a primeira ocupando 80% e a segunda o restante, ou seja 20%.

Atributos Padrão: class, id,style, title

Observação: a divisão da janela é feito sequencialmente com cols e rows atribuindo dois, três, etc valores que corresponde ao número de divisões da janela

6.14.1. A tag <frame>

Possibilitar a aberrtura de arquivo html no seu interior.

Atributos Padrão:

class, id, style, title

Atributos Opcionais para <frame>

Atributo Valor Descrição
frameborder 0
1
Especifica se a uma borda deve ser colocada ao redor do frame ou não.
0 = não colocar borda
1 = colocar borda
longdesc URL Especifica a URL para uma página contendo uma descrição do frame, utilizado caso o navegador não suporte frames (algo muito raro nos dias de hoje).
marginheight pixels Especifica a margem superior e inferior do frame, em pixels
marginwidth pixels Especifica a margem esquerda e direita do frame, em pixels
name nome_do_frame Especifica um nome único para o frame permitindo que estes seja identificado por scripts.
noresize noresize Quando este atributo estiver setado, o usuário não terá a opção de re-dimensionar o frame.
scrolling yes
no
auto
Especifica se uma barra de rolagem será colocada no frame caso o conteúdo deste exceda as dimensões do mesmo no navegador.
src URL Especifica a URL de uma página que será mostrada pelo navegador dentro do respectivo frame.


6.15. A tag <iframe> vem do inglês inline frame e significa frame em linha.

Esta tag permite resultados similares ao obtido com o uso das tags <frame> e <frameset>, com a diferença de que o iframe abre uma página dentro da página que o possui, podendo haver sobreposição dessa páginas total ou parcialmente, isso aconteçe muitas vez com utilização de menus, basta configura o z-index do iframe, tal técnica facilita a estrutura do  site.

O texto inserido entre as tags <iframe> e </iframe> será apresentado pelo navegador apenas se o mesmo não suportar o frame em linha.

Frames em linha não podem ser re-dimensionados.

Uma outra forma de inserir páginas de internet dentro de outras é através da tag <object>

Atributos Opcionais:

Atributo Valor Descrição
align bottom
left
middle
right
top
Especifica o alinhamento do frame em linha em relação ao texto ao redor. Caso haja algum texto ao redor do frame em linha, ele será acomodado ao redor do iframe de acordo com o alinhamento. Note que este atributo é considerado obsoleto e não será suportado na próxima revisão da linguagem. Recomenda-se utilizar folhas de estilo em cascata (CSS) para configurar o alinhamento.
bottom = em baixo
left        = esquerda
middle = no meio
right      = direita
top        = em cima


frameborder 1 Especifica a presença ou não de uma borda ao redor do frame.
1 = com borda
0 = sem borda
height pixels
%
Especifica a altura em pixes ou percentual da área disponível.
longdesc URL Especifica a URL para uma página contendo uma descrição do iframe, utilizado caso o navegador não suporte frames.
marginheight pixels Especifica a margem deixada acima e abaixo do frame em linha.
marginwidth pixels Especifica a margem deixada aos lados do frame em linha.
name nome_do_frame Especifica um nome único para o frame de modo que scripts possam acessar e modificar suas propriedades.
scrolling yes
no
auto
Especifica se uma barra de rolagem será colocada no frame caso o conteúdo deste exceda as dimensões do mesmo no navegador.
src URL Especifica a URL da página que será mostrada pelo navegador dentro do frame em linha.
width pixels
%
Especifica a largura em pixels ou percentual da área disponível.

6.16. A tag <div> vem do inglês division e significa divisão.

Esta tag define um bloco ou container na página, permitindo que folhas de estilo em cascata (CSS) sejam aplicadas a todos as tags contidas entre <div> e </div>.

Este é considerado um elemento de bloco, ou seja, haverá uma quebra de linha antes e após o bloco.

A tag <div> pode conter outros elementos de bloco como <p> e <table>

Atributos Padrão: class, dir, id, lang, title

Atributo Opcional:

Atributo Valor Descrição
align center
justify
left
right

Este atributo é obsoleto e não deve ser utilizado. Recomenda-se usar folhas de estilo em cascata para a obtenção dos mesmos resultados. Este atributo não é aceito na especificação DTD estrito.

center = o texto será centralizado
justify = o texto será alinhado à esquerda e à direita.
left = o texto será alinhado à esquerda.
right = o texto será alinhad à direita.


Eventos Associados:

onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

Um pouco de folha de estilo em cascata (CSS)


BOX - CAIXA
Margin-left Unidades CSS margin-left: 1cm;
margin-left: 0,5in;
Indicamos com este atributo o tamanho da margem à esquerda.
Margin-right Unidades CSS margin-right: 5%;
margin-right: 1in;
Utiliza-se para definir o tamanho da margem à direita.
Margin-top Unidades CSS margin-top: 0px;
margin-top: 10px;
Indicamos com este atributo o tamanho da margem acima da página.
Margin-bottom Unidades CSS margin-bottom: 0pt;
margin-top: 1px;
Com ele indica-se o tamanho da margem na parte debaixo da página.
Padding-left Unidades CSS padding-left: 0.5in;
padding-left: 1px;
Indica o espaço inserido, pela esquerda, entre a borda do elemento que contem e o conteúdo deste. É parecido ao atributo cellpadding das tabelas.
O espaço inserido tem o mesmo fundo que o fundo do elemento que contem.
Padding-right Unidades CSS padding-right: 0.5cm;
padding-right: 1pt;
Indica o espaço inserido, neste caso pela direita, entre a borda do elemento que contém e o conteúdo deste. É parecido ao atributo cellpadding das tabelas.
O espaço inserido tem o mesmo fundo que o fundo do elemento que contem.
Padding-top Unidades CSS padding-top: 10pt;
padding-top: 5px;
Indica o espaço inserido, por cima, entre a borda do elemento que contem e o conteúdo deste.
Padding-bottom Unidades CSS padding-right: 0.5cm;
padding-right: 1pt;
Indica o espaço inserido, neste caso por baixo, entre a borda do elemento que contém e o conteúdo deste.
Border-color cor RGB e nome de cor border-color: red;
border-color: #ffccff;
Para indicar a cor da borda do elemento da página a qual aplicamo-la. Pode-se colocar cores separadas com os atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
Border-style none | dotted | solid | double | groove | ridge | inset | outset border-style: solid;
border-style: double;
O estilo da bordea, os valores significam: none=nenhuma borda, dotted=pontilhado (não parece funcionar), solid=sólido, double=borda dupla, e desde groove até outset são bordas com vários efeitos 3D.
border-width Unidades CSS border-width: 10px;
border-width: 0.5in;
O tamanho da borda do elemento ao qual o aplicamos.
float none | left | right float: right;
Serve para alinhar um elemento à esquerda ou à direita fazendo com que o texto se agrupe ao redor de tal elemento. Igual que o atributo align em imagens em seus valores right e left.
clear none | right | left clear: right;
Se este elemento tem a sua altura imagens ou outros elementos alinhados à direita ou à esquerda, com o atributo clear fazemos com que se coloque em um lugar onde já não tenha estes elementos ao lado que indicamos.

O estilo overflow do CSS define como o elemento irá se comportar caso o seu conteúdo ultrapasse a sua altura ou largura. O estilo overflow do CSS pode ter os seguintes valores.

Visible

- Esse é o valor padrão, o elemento não faz nada e o conteúdo que ultrapassar o elemento será escrito fora dele.

Hidden

- Todo conteúdo que ultrapassar o elemento com esse valor no estilo overflow ficará escondido, e o elemento não terá barra de rolagem para visualização do resto do conteúdo.    Ex:

overflow-x: hidden;

Scroll

- Com esse valor o elemento sempre vai ter barra de rolagem, não importa se tenha ou não conteúdo passando de seus limites. Se você quer que o elemento tenha barra de rolagem, você normalmente não usa overflow: scroll e sim overflow: auto.

Auto

- O elemento exibirá barra de rolagem somente se o seu conteúdo ultrapassar seus limites.

Overflow x/y

Ainda podemos especificar mais quais limites queremos que o overflow atue, utilizando overflow-x, para o overflow valer somente para a barra e o limite horizontal, e overflow-y, para o overflow valer somente para a barra e o limite vertica

Se não for usado nenhuma das propriedades em uma <div>, ela ficará sempre posicionada à esquerda, e ao colocar outra tag <div> após ela, a segunda será colocada logo abaixo da primeira, também posicionada à esquerda. 

Ao definir a propriedade float em uma <div>, o objeto será posicionado como desejado, à esquerda ou à direita.

DIV e SPAN

<SPAN> é usada para aplicar um estilo CSS para uma parte de uma linha de texto. Veja o exemplo abaixo:

<html>

}

.banner


{
      width: 240px;
      height: 80px;
      margin-bottom: 10px;
      background-color: #0000FF;
      float: left;
      clear: left;
}

#conteudo
{
      width: 490px;
      float: left;
      background-color: #00FF00;
      margin-left: 10px;
      margin-bottom: 10px;
      padding: 20px;
}

#rodape
{
      width: 780px;
      height: 50px;
      background-color: #FF00FF;
      float: left;
      clear: left;
}

Se não tivesse usado as propriedades float, cada <div> estaria alinhada à esquerda e uma em baixo da outra, e se não tivessemos usado a propriedade clear, elas estariam todas em lugares errados.

display: inline-block faz com que o div tenha a largura do tamanho do texto inserido no mesmo.

Float é um propriedade que alinha div’s subseqüente uma ao lado da outra conforme exemplo abaixo:

No CSS usado seria:

.div1 { float : left; width: 50px;}

.div2 { float : left; width: 80px;}

.div3 { float : left; width: 30px;}

.div4 { float : left; width: 30px;}

Resultado:


Para agrupar os quatros divs é mecessário um divexterno):

<!-- CSS -->

<style rel="stylesheet">

.externo { display: table; }

.div1 { float : left; width: 50px;}

.div2 { float : left; width: 80px;}

.div3 { float : left; width: 30px;}

.div4 { float : left; width: 30px;}

</style>

<!-- HTML -->

<div>

<div>div1</div>

<div>div2</div>

<div>div3</div>

<div>div4</div>

</div>


DIV e BACKGROUD

A cor de fundo pode ser inserida em um div ou no elemento <body>, porém com a tag <body> alguns Navegadores novos não se consegue fazer esta inserção.


Exemplo 1:

<style>

body {
  background-image: url("http://yoursite.name.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
   background-size:80px 60px;
}

</style>

Exemplo 2:
Testado no IE 7

<style>

body { background-image: url("fotos/topo.jpg"); background-repeat: repeat-y; background-position: top center;}

</style>

Exemplo 3:

Testado no IE 10 e IE 7
<head>
<style>
#centro{
z-index:10;
width:60%;
height:80px;
left:20%;
position:absolute;
aling:center;
top:0px;
background-size:100% 100%;
background:url(fotos/topo.jpg);
background-repeat:repeat-y;
background-position: top center;
}
</style>

</head>

<body>

<div style="text-align: center;" id="centro">Texto qualquer<br>
</div>


Observações:

1. O formato do <div> (margem, padding)  aumenta o espaço ocupado por ele.

2.  O formato do parágrado <p> (margem, padding)  dentro do <div> não afeta o espaço ocupado pelo <div>.

Exemplo:

div > p{
font-size: 20px;
line-height: 25px;
text-indent:10px;
font-family: arial,verdana;
margin:20px;
}

2. As margens não pertencem as dimensões, contudo ocupa espaço do lado de fora do elemento, com isso, a mesma deve ser levada em conta no posisionamento dos elementos.

3. O padding não afeta o background. 

5. A propriedade overflow é usada frequentemente para exibir ou esconder a barra de rolagem no elemento <div> e <body>, ex:
body { overflow-x: hidden; }
div{overflow-y:scroll};

6. Como o div tem width = 60% e sua posição é absoluta (position:absolute), pode-se centralizar o div com left:20% ou rigth:20%.

Estrutura de uma página dividida em três divs horizontais

<html>
<head>
<title>Layout de 3 colunas</title>
</head>
<style>

html, body {
   margin:0;
   padding:0;
   height:100%;
}
.tudo {
   min-height:100%;
   position:relative;
}
.topo {
   background:#ff0;
   padding:10px;
}
.conteudo {
   padding:10px;
   padding-bottom:60px;   /* Mesma Altura do Rodapé */
}
.rodape {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Mesma Altura do Rodapé */
   background:#6cf;
}
</style>
<body>
<div class="tudo">
   <div class="topo">ddddddd</div>
   <div class="conteudo">ddddddd</div>
   <div class="rodape">ddddd</div>
</div>
</body>
</html>

Clique aqui para ver o exemplo

Estrutura utilizando alguns divs para o cabeçalho e um iframe onde abrirão as páginas

<!DOCTYPE html>
<html lang="pt_BR"><head>
 
  <meta charset="utf-8">
  <title></title>
  <!------ script_do_cabecalho_data relogio----------------------------->
  <script>
 function showTimer() {
  var time=new Date();
  var hour=time.getHours();
  var minute=time.getMinutes();
  var second=time.getSeconds();
  if(hour<10)   hour  ="0"+hour;
  if(minute<10) minute="0"+minute;
  if(second<10) second="0"+second;
  var st=hour+":"+minute+":"+second;
  document.getElementById("timer").innerHTML=st;
 }
 function initTimer() {
  // O metodo nativo setInterval executa uma determinada funcao em um determinado tempo 
  setInterval(showTimer,1000);
 }
  </script>
 
  <style>
IFRAME {
background-color: #FFFF00;
position:absolute;
top:85px;
left:15%;
width:85%;
height:130%;
align:right;
<!---obs: utilizar z-index=-10 negaivo para o iframe ficar abaixo do documento -->
<!---caso utilize menu que se sobreponha ao iframe -->
}


body {

margin-top: 0px;
margin-right:0px;
margin-bottom:0px;
margin-left:5px;
}


#topo{  
background:#ddd;
position:absolute;
border: 2px solid #000000;
border-radius:15px;
width: 100%;
height:80px;
top:0px;
}

#brasao{width:60px; height:60px; position: absolute; left:1px;top:1px;border: 2px solid #000000;}
#logomarca{width:60px; height:60px; position: absolute; right:1px;top:1px;border: 2px solid #000000;}
#frase{width:80%; height:20px; position: absolute; right:10%;top:1px;border: 2px solid #000000;}

#relogio{width:40%; height:18px; position: absolute; left:15%;top:62px;border: 2px solid #000000;}

#titulo{width:60%; height:18px; position: absolute; left:20%;top:31px;text-align:center;border: 2px solid #000000;}




  </style>
</head><body>
<!------------------------------------  cabecalho  ---- com o script de horas --------------------------------------------------------------------------------->
<div id="topo">
   <div id="brasao">brasão<img src="#" border="0" height="60" width="60"></div>
   <div id="logomarca">logomarca<img src="#" border="0" height="60" width="60"></div>
   <div id="frase">
             <marquee scrolldelay="1" scrollamount="2" style="font-family: arial;"><font text-align:center="" color="red" face="arial" size="2">"Seja bem vindo ao Site a Construção&Cia"</font></marquee>
   </div>
   <div id="titulo">Materiais de Construção Alvenaria e Ferragens</div>
   <div id="relogio">
<script language="JavaScript"> 
function dia() { 
  dia = new Date() 
  document.write(dia.getDate()) 

function mes(){ 
var mes1=new Date() 
var mes2=mes1.getMonth() 
var month="Janeiro"


if(mes2 == 0) {month="Janeiro"} 
else if(mes2 ==1) {month= "Fevereiro"} 
else if(mes2 ==2) {month="Março"} 
else if(mes2 ==3) {month="Abril"} 
else if(mes2 ==4) {month="Maio"} 
else if(mes2 ==5) {month="Junho"} 
else if(mes2 ==6) {month="Julho"} 
else if(mes2 ==7) {month="Agosto"} 
else if(mes2 ==8) {month="Setembro"} 
else if(mes2 ==9) {month="Outubro"} 
else if(mes2 ==10) {month="Novembro"} 
else if(mes2 ==11) {month="Dezembro"} 
  document.write(month) 
}





function weekday( ) { 
  var myday=new Date().getDay()


if(myday == 0) {day="Domingo"} 
else if(myday == 1) {day="Segunda - Feira"} 
else if(myday == 2) {day="Terça - Feira"} 
else if(myday == 3) {day="Quarta - Feira"} 
else if(myday == 4) {day="Quinta - Feira"} 
else if(myday == 5) {day="Sexta - Feira"} 
else if(myday == 6) {day="Sábado"} 
document.write(day) 
}


function ano( ) { 
  var ano=new Date().getYear() 
  var aa=new Date().getYear()


if(ano == 100) {aa="2000"} 
else if(ano == 101) {aa="2001"} 
else if(ano == 102) {aa="2002"} 
else if(ano == 103) {aa="2003"} 
else if(ano == 104) {aa="2004"} 
else if(ano == 105) {aa="2005"} 
else if(ano == 106) {aa="2006"} 
else if(ano == 107) {aa="2007"} 
else if(ano == 108) {aa="2008"} 
else if(ano == 109) {aa="2009"} 
else if(ano == 110) {aa="2010"} 
else if(ano == 111) {aa="2011"} 
else if(ano == 112) {aa="2012"} 
else if(ano == 113) {aa="2013"} 
else if(ano == 114) {aa="2014"} 
else if(ano == 115) {aa="2015"} 
else if(ano == 116) {aa="2016"} 
else if(ano == 117) {aa="2017"} 
else if(ano == 118) {aa="2018"} 
document.write(aa) 

</script>
<script>weekday()</script>,
<script>dia()</script> de
<script>mes()</script> de
<script>ano()</script>.
<script>
over =  function(){
    var sfEls = document.getElementById("nav").
getElementsByTagName("LI");
    for (var i=0; i< sfEls.length; i++){
        sfEls[i].onmouseover= function(){
            this.className+= "
        over";}
        sfEls[i].onmouseout= function(){
            this.className=
this.className. replace(new RegExp(" over\\b"),
        "");
        }}
}


if (window.attachEvent) window.attachEvent("onload", over);
</script></font>
</div>
</div>
<!-------------------            menu lateral esquerdo--------------->

<!-------------------- corpo ---------------------------------------------->
<iframe src="#" name="iframe1" border="0" framespacing="0" marginwidth="0" marginheight="0" frameborder="no" > </iframe> <br>

</body></html>

Clique aqui para ver o exemplo

Obs:

1. A inclusão de comentário, <--!comentário, comentário--> pode causar erro no código, use uma linha só para o comentário, não misture linha de comentário com a mesma linha de código.

2. O exemplo acima foi incrementado um um javascript que é usual em sites profissionais.

3. O iframe é o local onde deverá abrir os link disparados pelos menus que for criado, o z-index do iframe deve ser menor que a do documento, ou seja, negativo, para que o menu se sobrepor ao iframe, caso o mesmo sobreponha-se ao iframe.

4. Na lateral esquerda esta reservado o espaço de 15% de largura para a inclusão de algum menu.

5. display: inline-block; <!--para que o div fique do tamanho do texto, ou seja, variavel-->


Uso de display table (comentário)

Se você tem desenvolvido sites com HTML e CSS nos últimos anos, você já deve ter utilizado alguma técnica para simular um layout com múltiplas colunas.

Não é da tag <table> e sim a simulação de uma estrutura tabular através de propriedades CSS.

A tag <table>, quando utilizada para o seu propósito (dados tabulares) não apresenta problema nenhum em termos de Web Standards. Porém, até hoje ainda existem sites feitos total ou parcialmente em uma estrutura feita destas tags, o que está longe de ser o ideal.

As tabelas CSS existem para resolver este problema, possibilitando um nível de controle mais robusto que floats ou posicionamento. É possível simular a aparência de uma tabela sem as várias implicações negativas de se utilizar a tag <table>.

O layout que iremos montar neste artigo está abaixo: um simples layout de três colunas.

código:

<div id="site">
 
<div id="cabecalho">
<h1>Tabelas CSS</h1>
</div>
 
<div id="corpo" class="grupo">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
 
<div id="conteudo">
<div class="conteudo-interno">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
</div>
 
<div id="sidebar"></div>
</div>
 
<div id="rodape">
<p>&copy; Empresa Ltda.</p>
</div>
 
</div>

Formatação de fonte do texto

1. atributo face="..."

2. atributo color

3. atributo size

O elemento irá definir que tipo de fonte que seu texto irá utilizar. Aconselho a usar fontes de padrão popular no Windows, pois as fontes que seu computador tem, pode ser que outro computador não tenha. Por isso fontes como times new roman e arial são aconselháveis. Obs. : A fonte Times New Roman ( Times ) já é o padrão das páginas HTML , podendo se colocar qualquer fonte existente em sua máquina como Mistral , Arial etc.

O elemento irá definir qual o tamanho da fonte utilizada , lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 6. Podemos usar tamanhos como 78 e 64 , mas lembre, se que pode não funcionar em alguns micros. Por isso, se você quer aumentar o tamanho de uma fonte, use o sinal de + antes do número que irá definir o tamanho da fonte e, para diminuir use o sinal de - . Por Exemplo : Irá deixar o texto com o tamanho 6 ; Irá deixar seu texto com o tamanho 3 ;

Obs. : O tamanho 3 é o tamanho padrão das páginas HTML , podendo colocar qualquer tamanho compatível a fonte usada. Deve-se fechar o tag para que o formato seja usado só no texto escolhido e não em toda a página. Aplicando o CSS ao HTML

Tabelas implícitas

Um ponto importante e muito útil das tabelas CSS é o conceito de “tabelas implícitas”. O que isso quer dizer é que o navegador interpreta os elementos faltantes de uma tabela, possibilitando fazer mais com menos código.

Repare neste trecho do HTML do exemplo:

<div id="corpo" class="grupo">

<div id="menu">...</div>

<div id="conteudo">...</div>

<div id="sidebar">...</div>

</div>

Perceba que utilizamos display: table para o corpo e display: table-cell para as colunas. Neste caso faltaria um elemento com display: table-row para completar a estrutura de uma tabela. Porém, mesmo sem este elemento o navegador interpreta corretamente e a “tabela” é mostrada da forma desejada.

Também seria possível até retirar o elemento #corpo que o navegador iria preencher o elemento com display: table não presente. Isto pode ser utilizado para nossa vantagem, reduzindo a quantidade de código necessária. Porém, dependendo do layout que deseja montar, todos os elementos terão que estar presentes para evitar problemas.

Preparando para navegadores antigos

Assim como várias técnicas de montagem de sites, as tabelas CSS também tem o seu porém. Elas possuem suporte nos principais navegadores atuais (incluindo Internet Explorer 8!) mas os navegadores Internet Explorer 7 e Internet Explorer 6 (quem diria?) não irão fazer nada.

Portanto, para estes navegadores, basta um pouco de CSS através de comentários condicionais. Neste exemplo estou colocando todos os estilos no cabeçalho da página, mas em um site normal é recomendável chamar arquivos externos de CSS com a tag <link>.

<!-- Estilos para IE6 e IE7 -->

<!--[if lte IE 7]>

<style>
 

#corpo {Uso de display table

overflow: auto;

background: url(../../imagens/blog/tabelas-css/fundo_colunas.png) repeat-y; /* colunas falsas */

}

#menu, #conteudo, #sidebar {

float: left; /* como display: table não funciona nestes navegadores, uma alternativa é usar float */

}

#conteudo {

width: 660px; /* temos que fixar o tamanho desta coluna, assim como #menu e #sidebar */

}

#menu li {

display: inline; /* resolve o problema de line-height que acontece em listas no IE6 */

}

/* clearfix IE7 */

*:first-child+html .grupo {

min-height: 1px;

}
 
/* clearfix IE6 */
* html .grupo {

height: 1%;

}

</style>

<![endif]-->

table: estiliza o elemento como se fosse uma tag <table> (elemento principal de uma tabela);    table-row: estiliza o elemento como se fosse uma tag <tr> (linha de tabela);    table-cell: estiliza o elemento como se fosse uma tag  <td>(célula de tabela);    table-row-group: estiliza o elemento como se fosse uma tag <tbody> (grupo de células que formam o “corpo” da tabela);    table-header-group: estiliza o elemento como se fosse uma tag <thead> (grupo de células que formam o cabeçalho da tabela);

7. CSS: posicionamento relativo e absoluto

elemento {position: absolute;}

O elemento se posicionará em relação ao seu primeiro elemento ancestral cuja propriedade “position” não seja estática.

elemento {position:relative;}

O elemento se posicionará em relação à sua posição normal, a posiçao do elemento influência o seu tamanho quando usamos porcentagem, %, posição absoluta o tamanho em porcentagem é referenta a tela, a janela, e posição relativa o tamanho em porcentagem se referente ao elemento pai, ou seja, o elemento interno terá porcentagem do tamanho do elemento externo.


Visibilidade (sobreposições de elementos)

O Z-index é o que define a Profundidade, seria o eixo Z.

A ordem natural do empilhamento(z-index), é a seguinte, o primeiro elemento do código recebe o z-index=1 ( no caso a div com ID posiciona1 ), e o próximo elemento recebe z-index=2 (no caso a div com ID posiciona2) e assim por diante, esta é a ordem natural do empilhamento, é por esse motivo que a div azul se sobrepões as demais divs.

Observe no código abaixo as posições dos elementos para que eles se sobreponham, porém na ordem natural:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Z-index by aprendacss.wordpress.com</title>
<style type=”text/css”>
#posiciona1{
background-color: #00FF00; <!--green-->
width: 60px;
height: 60px;
position: absolute;
top:0px;
left:0px;
}
#posiciona2{
background-color: #FFFF00; <!-- yellow-->
width: 60px;
height: 60px;
position: absolute;
top:20px;
left:20px;
}
#posiciona3{
background-color: #0000FF; <!-- blue-->
width: 60px;
height: 60px;
position: absolute;
top:40px;
left:40px;
}
#posiciona4{
background-color:#FF0000;
width: 100px;
height: 100px;
position: relative;
}
</style>
</head>
<body>
<div id="posiciona4">
<div id=”posiciona1″></div>
<div id=”posiciona2″></div>
<div id=”posiciona3″></div>
</div>
</body>
</html>

Observando o código, verifica-se que o div de id posiciona4 é o conteiner com posiciçao relativa, os demais divs têm a posição absoluta, pode-se utlizar a propriedade z-index para posicionar na frente qualquer div, o z-index menor ficará atrás do z-index maior.

Resultado:

Posição1
Posição2
Posição3

Com a propriedade Overflow (sobrecarga) do CSS, podemos escolher o que deverá acontecer se o conteúdo ultrapassar o tamanho de uma DIV. Podemos adicionar barra de rolagem, ocultar o conteúdo ultrapassado, etc. Essa propriedade decide o que fazer se o conteúdo exceder o tamanho de um elemento.

ATENÇÃO: as versões antigas do Internet Explorer o z-index não funcionam corretamente, por isso, coloque no código HTML primeiro elemento que deve ficará atrás, depois coloque no código HTML o segundo elemento que ficará por cima, essa é a ordem. Mesmo assim use o z-index. Isso é muito útil quando se usa iframe para abrir páginas que ficarão atras de outro elementos (como submenus por exemplo).

Tipos de Overflow mais utilizados

hidden - Corta o conteúdo que ultrapassa o tamanho da DIV.

scroll - Mostra as barrades de rolagens, vertical e horizontal, mesmo que não seja necessário.

auto - Cria uma barra de rolagem quando necessário.

Posicionando as colunas.

Vamos a seguir posicionar as colunas, uma ao lado da outra.

Adotaremos para a coluna secundária uma largura de 220px e para a principal 500px + 1px (borda esquerda) + 1px (borda direita) que somados resultam em 722px que foi a largura estabelecida para a página com borda de 1px.

Usaremos a propriedade float com o valor left.

Declarar float para para várias DIVs em sequência faz com elas "flutuem" como se fossem balões de gás até atingir o 'teto' que é demarcado pelo fundo do(s) elemento(s) que as antecede. As DIVs flutuadas vão se posicionando uma ao lado da outra até que a soma de suas larguras não ultrapasse a largura total disponível no "teto". A partir daí, começa outra camada abaixo da anterior e assim sucessivamente.

O código de exemplo abaixo utiliza quatro divs, uma para o topo, outra para o menu na esquerda, outra para o conteúdo na direita e a ´ltima para o rodapé.

O div tudo serve de conteiner, o div topo necessitou de poucos atributos, o div menu tem posição absoluta e float left, o div conteudo tem float riht e por fim o div rodape tem float both, que afasta os divs de ambos os lados com posição absoluta. Para que funcione corretamente as dimensões tem que estar corretas, o div tudo é o limite, bordas aumenta a dimensão.


<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title></title>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
.tudo {
height:100%;
width:100%;
position:relative;
background-color: #00FF00; <!--green-->
}
.topo {
background:#ff0;
height:15%;
}
.menu{
position:absolute;
height:80%;
width:15%;
background-color: #F0000F; <!-- red-->
float:left;

}
.conteudo {
height:80%;
float:right;
width:85%;
background-color: #0000FF; <!-- blue-->
}
.rodape {
position:absolute;
bottom:0;
width:100%;
height:5%; 
background-color: #FFFF00; <!-- yellow-->
align:bottom;
float:both;
}
</style>
</head>
<body>
<div class="tudo">
<div class="topo">div topo</div>
<div class="menu">div menudiv</div>
<div class="conteudo">div conteúdo div conteúdo div conteúdo div conteúdo div conteúdo div conteúdo</div>
<div class="rodape">div rodapé</div>
</div>
</body>
</html>

Clique aqui para ver o exemplo

HTML 5 - tags descontinuadas:

<acronym> Define siglas em HTML 4.01. (Desenvolvedores preferem utilizar a tag <abbr>);

<applet> Define um miniaplicativo incorporado. (Ficou obsoleto em função da tag <object>);

<basefont> Define as propriedads da font padrão para todo o texto do documento. (Apenas efeito visual);

<big> Usado para tornar o texto maior. (Apenas efeito visual);

<center> Usado para alinhar texto e conteúdo no centro. (Apenas efeito visual);

<dir> Define a lista do diretório. (Ficou obsoleto em função da Tag <ul>);

<font> Especifica o tipo de fonte, tamanho, e cor do texto. (Apenas efeito visual);

<frame> Define uma janela particular dentro de um conjunto de "frames". (Fere princípios de usabilidade e acessibilidade);

<frameset> Define um conjunto de frames organizado por múltiplas janelas.(Fere princípios de usabilidade e acessibilidade);

<noframes> Texto exibido para navegadores que não lidam com "frames". (Fere princípios de usabilidade e acessibilidade);

<strike> Exibe texto rasurado. (Apenas efeito visual);

<tt> Define teletipo de texto. (Apenas efeito visual);

<u> Define sublinhado. (Apenas efeito visual);

<xmp> Define texto pré-formatado. (Ficou obsoleto em função da tag <pre>);


Tag White-Space
A primeira é a responsável pelo tratamento dos espaços em brancos, a tag White-Space, essa tag pode ser usada da seguinte forma:

Valor Descrição
normal Os espaços em branco serão ignorados pelo browser.
nowrap O texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br>
pre Os espaços em branco serão preservados pelo browser.
pre-line Os espaços em branco serão ignorados pelo browser e o texto será quebrado quando necessário.
pre-wrap Os espaços em branco serão preservados pelo browser e o texto será quebrado quando necessário.
inherit Será herdado as características do elemento pai

Exemplo:
elemento { white-space: normal; }

Tag Display

Outra forma interessante de manipular a quebra de linha ou não de um elemento é utilizar a tag display. Quando usamos a tag div percebemos que automaticamente há uma quebra de linha enquanto um span não acontece. Podemos dizer que na tag div está incluso a propriedade display: block enquanto a span está o display: in-line.

1.elemento { display: block; // quebra de linha }
2.elemento { display: inline; // sem quebra de linha }

8. Postagem de Código HTML
Quando se inseri uma tag HTML dentro do <body>, essa tag é interpretada normalmente como código HTML. Para mostrar uma código HTML na forma de texto no <body> pode-se usar as duas técnicas abaixo:
8.1. Utilizando Símbolos
Pode-se utilizar os simbolos representativos dos sinais < (menor que) e > (maior que), assim não existirá a tag HTML (<tag>).
O símbolo <, menor que é representado pela entidade &lt; ou pela forma decimal &#60;
O símbolo >, maior que é representado pela entidade &gt; ou pela forma decimal &#62;

Obs: salve como ANSI (iso-8859-1), pois foi esta a configuração na tag <meta>, se salvar como uft-8, terá que mudar a <meta> para este padrão, esse erro não pode ser cometido.

Com HTML 5:
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
&lt;paragrafo um&gt;<br>
&#60;paragrafo dois&#62;
</body>
</html>
Link para o código acima

Com HTML 4:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
</head>
<body>
<br>
&lt;paragrafo um&gt;<br>
&#60;paragrafo dois&#62;
</body>
</html>
Link para o código acima


Obs: para aparecer o paragrafo <p>mmm</p> na página deve-se digitar no <body>:
<p>&lt;p&gt;mmm&lt;/p&gt;</p>

8.2. Outra possibilidade bem simples de editar código HTML no <body> é usar a tag <textarea>:
Exemplo:
<textarea rows="2" cols="30" onfocus="this.select()" onmouseover="this.focus()" name="textarea"><p>Paragrafo três</p></textarea>
Onde:
rows="2" significa quantas linhas seu quadro vai ter → Altura
cols="30" significa quantas colunas seu quadro vai ter → Largura
Você pode editá-los como preferir no Html do seu post.