51
XHTML/CSS InMeta Agência Digital

Apostila curso xhtml css

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Apostila curso xhtml css

XHTML/CSSInMeta Agência Digital

Page 2: Apostila curso xhtml css

CONTEÚDOMódulo 1 (HTML)...................................................................................................................................................3

História...............................................................................................................................................................3Conceito.............................................................................................................................................................3

HTML..............................................................................................................................................................3XHTML............................................................................................................................................................4

Tags....................................................................................................................................................................4Regras Básicas do uso de Tags.......................................................................................................................5

XHTML (Conceitos Básicos)................................................................................................................................5Strict...............................................................................................................................................................6Transitional....................................................................................................................................................6Frameset........................................................................................................................................................6

Página XHTML....................................................................................................................................................7Cabeçalho (<head>).......................................................................................................................................7Corpo (<body>)..............................................................................................................................................7Links.............................................................................................................................................................14

Indentação.......................................................................................................................................................24SEO + XHTML....................................................................................................................................................24

Módulo 2 (CSS).....................................................................................................................................................27História.............................................................................................................................................................27

Como Surgiu.................................................................................................................................................27Como Está hoje............................................................................................................................................27

Conceito...........................................................................................................................................................27Estrutura..........................................................................................................................................................28

Inserção de CSS no HTML.............................................................................................................................28Seletores......................................................................................................................................................29Sintaxe..........................................................................................................................................................29A importância do float: left;.........................................................................................................................30Estruturando uma página.............................................................................................................................32Diferença entre Browsers.............................................................................................................................36

Módulo 3 (Imagens).............................................................................................................................................37Para que servem as imagens?..........................................................................................................................37

Começando do começo................................................................................................................................37Exemplos......................................................................................................................................................38

Referência............................................................................................................................................................42

2

Page 3: Apostila curso xhtml css

MÓDULO 1 (HTML)

História

Tim Berners-Lee criou o HTML original (e outros protocolos associados como o HTTP) em uma estação NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornaria-se a Internet) ganhou atenção mundial.

As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Atualmente a sintaxe do HTML é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTML válido.

A linguagem foi definida em especificações formais na década de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. A primeira publicação foi esboçada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicação formal para o SGML (com uma DTD em SGML definindo a gramática). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web Consortium (W3C). Apesar disso, em 2000 a linguagem tornou-se também uma norma internacional (ISO/IEC 15445:2000). A última especificação HTML lançada pela W3C foi a recomendação HTML 4.01, publicada no final de 1999. Uma errata ainda foi lançada em 2001.

Desde a publicação do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem cada vez mais — e de 2002 a 2006, de forma exclusiva — focado no desenvolvimento do XHTML, uma especificação HTML baseada em XML que é considerada pela W3C como um sucessor do HTML.O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e estendido.

Conceito

HTML

HTML significa Hyper Text Markup Language em português linguagem de marcação de hipertexto, ou seja, é a linguagem na qual são escritas as páginas da Web.

Toda página é transferida de um computador remoto para o usuário, onde o browser faz o trabalho de interpretação dos códigos daquele documento e mostra a página que o usuário vê.

3

Page 4: Apostila curso xhtml css

XHTML

XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em português resulta em Linguagem de Marcação para Hipertexto Extensível, uma aplicação XML, escrita para substituir o HTML e nada mais é do que um HTML "padronizado, claro e limpo".

XHTML surgiu quando o HTML sofreu o que parece ser sua maior evolução com a adição de aplicações da meta-linguagem XML (EXtensible Markup Language).

XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML e a transformação de um documento existente de HTML para XHTML é uma tarefa bem simples na maioria dos casos.

Quais as vantagens de se usar XHTML

Tempo de carregamento da páginao Uma página XHTML é mais rápida pois os browsers tem a interpretar uma página limpa sem

ter que decidir sobre renderização de erros de código; Portabilidade

o Uma página XHTML é mais acessível a aplicações do usuário, incrementando a interoperabilidade e a portabilidade dos documentos web;

Web Standardo XHTML 1.0 é uma recomendação da W3C. Isto significa que trata-se de uma linguagem estável,

oficialmente especificada pela W3C, tendo sido projetada e revisada pelos seus membros.

Tags

Os comandos HTML são chamados de TAGs, compreendem de marcas padrões que são utilizadas para fazer indicações a um browser.

Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem algumas regras:

As TAGs aparecem sempre entre sinais de “menor que” (<) e “maior que” (>);

Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um comando qualquer é finalizada com a precedência de uma barra (/).

Existe uma exceção onde a abertura e o fechamento se dá na mesma tag.

Essas tags contém comandos que não necessitam de conteúdo para serem processadas.

Código 1 - Exemplo de tag que não necessita conteúdo

Código 2 - Exemplo de tag que necessita de conteúdo

4

<br />

<p> curso xhtml InMeta </p>

Page 5: Apostila curso xhtml css

REGRAS BÁSICAS DO USO DE TAGS

Seguem alguns exemplos diferenciando a correta utilização do HTML (com fundo verde) da incorreta utilização do HTML (fundo vermelho).

Todas tags dever ser fechada.

Todas tags devem estar convenientemente aninhadas.

Devem ser usadas letras minúsculas tanto para tags como para seu atributos.

Todo valor de atributo XHTML devem conter "ASPAS".

Todo atributo deve conter um valor. “Erro muito comum no HTML em casos que o atributo representa o valor

de si mesmo.”

XHTML (Conceitos Básicos)

Todos os documentos XHTML são divididos em duas partes básicas: o cabeçalho e o corpo; e necessitam informar a versão e o tipo do documento.

5

<span>Exemplo com tags</span><br>

<span>Exemplo com tags</span><br />

<div><span>Exemplo com tags</div></span>

<div><span>Exemplo com tags</span></div>

<A HREF="http://www.inmeta.com.br" TITLE="InMeta">InMeta Agência Digital</A>

<a href="http://www.inmeta.com.br" title="InMeta">InMeta Agência Digital</a>

<div id=cursos> … </div>

<div id="cursos"> … </div>

<input checked …<input readonly ...

<input checked="checked" …<input readonly="readonly" ...

Page 6: Apostila curso xhtml css

A declaração da versão não é obrigatória para documento com encoding UFT-8, mas o uso é uma das recomendações do W3C. É declarado sempre no inicio do documento XHTML:

Código 3 - Cabeçalho de arquivo XML

A declaração do tipo é feita pelo DOCTYPE, lembrando que ele não faz parte da marcação XHTML e como tal não é um elemento, razão pela qual não há necessidade de tag de fechamento.

Código 4 - Declaração de DTD (Document Type Definition)

O Doctype (Document Type Definition, vulgo DTD) serve para informar ao browser o tipo de documento a ser visualizado. Existem 3 tipos básicos:

STRICT

Esta é a mais rígida das declarações. Exige um documento XHTML segundo as recomendações do W3C.

Código 5 - Exemplo de DTD Strict

TRANSITIONAL

Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso ("deprecated").

Código 6 - Exemplo de DTD Transitional

FRAMESET

Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames.

Código 7 - Exemplo de DTD Frameset

6

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Page 7: Apostila curso xhtml css

Página XHTML

CABEÇALHO (<HEAD>)

O cabeçalho possui informações sobre o documento em si, seus principais componentes são:

Elemento Descrição Obrigatório

<title></title> Deve ser o primeiro elemento do cabeçalho, informa o texto que aparece na barra de título do navegador.

SIM

<meta /> Contem informações sobre o conteúdo do documento. NÃO

<link /> Elemento utilizado para realizar a ligação entre os documentos e as páginas contendo as folhas de estilo.

NÃO

<style></style> Informações sobre as folhas de estilo usadas em um determinado documento.

NÃO

<object></object><script></script>

Espaço utilizado para inserção de código, por exemplo: javascript. NÃO

<base /> Especifica o endereço do documento XHMTL. NÃO

CORPO (<BODY>)

Como já foi dito o corpo do documento XHTML é formado pelas tags de formatação, utilizadas estruturação das informações a serem exibidas.

ELEMENTOS DE BLOCO

Elementos de bloco são marcadores destinados tanto a estruturação quanto ao estilo da página:

Elemento Nome Descrição

<p></p> Parágrafo

Sua representação depende do navegador, mas normalmente é representado por um espaço antes e depois do parágrafo.

<div></div> Divisão Utilizado com folhas de estilo na especificação de blocos<h1></h1> a <h6></h6>

Títulos Introduzem títulos no documento, podem ser de seis níneis (1 até 6), seu tamanho de fonte varia de 24 à 10 ptos

<blockquote> </blockquote>

Citações Utilizados para criação de citações, que inserem uma linha antes e depois do texto, assim como um nível de edentação.

<pre></pre> Preserve Utilizado para preservar a formatação do texto, não interpretando seu conteúdo.

7

Page 8: Apostila curso xhtml css

Código 8 - Exemplo de títulos

Figura 1 - Resultado do exemplo de títulos

8

<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"> <head> <title>Exemplo Títulos</title> </head> <body> <h1>Exemplo com H1</h1> <h2>Exemplo com H2</h2> <h3>Exemplo com H3</h3> <h4>Exemplo com H4</h4> <h5>Exemplo com H5</h5> <h6>Exemplo com H6</h6> </body></html>

Page 9: Apostila curso xhtml css

Código 9 - Exemplo de blocos

Figura 2 - Resultado do exemplo de blocos

ELEMENTOS INLINE (DESCRITIVOS DE LINHA)

Elementos inline são marcadores destinados geralmente para armazenagem de textos.

Em destaque temos o elemento <span></span> o qual é o elemento inline mais usando em documentos xhtml.

Também podemos observar o conjunto de elementos voltados a decoração “inline”:

Elemento Nome Descrição

9

<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"> <head> <title>Exemplo Títulos</title> </head> <body> <p> Isto é um parágrafo</p> <div> Primeira div </div> <div> Segunda div </div> <p> E outro parágrafo</p> <blockquote> "Este agora é um bloco de citação, pequeno mas é </blockquote> </body></html>

Page 10: Apostila curso xhtml css

<strong></strong> Negrito Fonte em negrito.<em></em> Ênfase Fonte em itálico.<small></small> Pequena Fonte menor que o padrão.<big></big> Grande Fonte maior que o padrão.<code></code> Código Fonte formato código.<dfn></dfn> Definição Fonte em itálico em negrito.<kbd></kbd> Teclado Texto nono-espaçado, como se tivesse sido escrito na máquina de escrever.<cite></cite> Citação Fonte em itálico.

Código 10 - Exemplo de elementos inline

10

<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"> <head> <title>Exemplo de decoração "inline"</title> </head> <body> <p>Fonte em <strong>negrito</strong>.</p> <p>Fonte em <em>ênfase</em>.</p> <p>Fonte <small>menor</small> que o padrão.</p> <p>Fonte <big>maior</big> que o padrão.</p> <p>Fonte <code>formato código</code>.</p> <p>Fonte em <dfn>itálico em negrito</dfn>.</p> <p>Texto <kbd>nono-espaçado</kbd>.</p> <p>Fonte em <cite>citação</cite>.</p> </body></html>

Page 11: Apostila curso xhtml css

Figura 3 - Resultado do exemplo de elementos inline

LISTAS

O XHTML dá suporte a três tipos de listas: ordenadas, não ordenada e de definição.

As listas não ordenadas são criadas fazendo-se uso do marcador <ul></ul>, e dos elementos <li></li>. Assim como pode possuir vários níveis, ou seja, uma lista dentro da outra.

As listas ordenadas possuem elementos que são “numerados”, o marcador utilizado é o <ol> </ol> e para definição de cada sub-elemento é o <li> </li>.

Já as listas de definição podem ser utilizadas na definição de termos, o marcador utilizado é o <dl></dl>, o marcador a ser utilizado no texto é o <dt> </dt> e na definição do texto <dd> </dd>.

11

Page 12: Apostila curso xhtml css

Código 11 - Exemplo de lista ordenada

Figura 4 - Resultado do exemplo de lista ordenada

12

<body> <ol> <li>São Paulo <ol> <li>Campinas</li> </ol> </li> <li>Santa Catarina <ol> <li>Blumenau</li> </ol> </li> <li>Rio Grande do Sul <ol> <li>Porto Alegre</li> </ol> </li> <li>Rio de Janeiro</li> </ol></body>

Page 13: Apostila curso xhtml css

Código 12 - Exemplo de lista não ordenada

Figura 5 - Resultado do exemplo de lista não ordenada

13

<body> <ul> <li>Item 1 <ul> <li>Item 1.1</li> </ul> </li> <li>Item 2 <ul> <li>Item 2.1</li> </ul> </li> <li>Item 3 <ul> <li>Item 3.1</li> </ul> </li> </ul></body>

<body> <dl> <dt>Item 1.1</dt> <dd>Descrição 1.1</dd> <dt>Item 1.2</dt> <dd>Descrição 1.2</dd> <dt>Item 2.1</dt> <dd>Descrição 2.1</dd> </dl></body>

Page 14: Apostila curso xhtml css

Código 13 - Exemplo de lista descritiva

Figura 6 - Resultado de exemplo de lista descritiva

ATRIBUTOS

Os atributos são utilizados para complementar um elemento html, seja com relação a seu comportamento ou quanto a sua apresentação. Estes atributos são inseridos sempre nos marcadores de abertura e os valores atribuídos a eles devem estar entre aspas duplas.

Dentre os atributos podemos destacar os “atributos universais”, os quais podem ser utilizados por qualquer marcador existente na linguagem.

Atributo Descriçãoid Identifica unicamente os elementos dentro dos documentos XHTML;class Especifica a classe a que um elemento pertence;title Especifica um título que pode ser utilizados para nomear o elemento;style Especifica o estilo de exibição do elemento.

LINKS

Hyperlinks ou simplesmente links são elos que ligam uma página a outra ou a si mesma.

O segredo de toda interatividade de uma página XHTML está no link, pois ele nos "transporta" até outra página, pode servir de âncora, levando-nos a algum trecho do texto ou pode conter alguma ação programada, por exemplo, em JavaScript que proporciona maior dinamismo e animação à página.

O link é definido pela tag <a>. Esta tag possui uma referência quando for um link ou um nome quando for uma âncora.

14

Page 15: Apostila curso xhtml css

Âncoras

Âncoras são marcações que criamos em nosso documento que são invisíveis ao leitor, mas são identificados pelo browser.

Para criarmos uma âncora, basta usar a tag <a> na linha que deseja marcar e dar um nome a está tag para identificá-la. Vejamos o exemplo:

Código 14 - Exemplo de âncora

Link para a âncora

Para criarmos o link para a âncora usamos o atributo de referência HREF. A âncora é sempre identificada pelo símbolo tralha ou sharp (#) mais o seu nome. Um fato importante é que em um caminho URL a âncora sempre virá no final. Como vimos, no exemplo acima foi criado uma âncora no início de nessa pagina chamado inicio, se quisermos ir até este ponto basta usarmos o atributo HREF da própria tag <a>.

Código 15 - Exemplo de link para âncora

Links entre páginas

A função principal de um link é a ligação entre páginas, para fazermos tal ligação, usamos o atributo HREF e nele indicamos o caminho da outra página.Por exemplo, abaixo está um exemplo de um link absoluto que nos leva a página inicial do site da InMeta.

<a href="http://www.inmeta.com.br">InMeta Agência Digital</a>Código 16 - Exemplo de link absoluto

Exemplo de um link relativo

<a href="../home.php">Home</a>Código 17 - Exemplo de link relativo

LINKS PARA EMAIL

Para fazer um link para email, nós colocamos a palavra mailto, seguido de dois pontos (:), seguido do email ao qual vai ser enviada a mensagem, caso o usuário clique.

<a href="mailto:[email protected]">Enviar email</a>Código 18 - Exemplo de link para e-mail

15

<body> <p> <a name="inmeta"></a> </p></body>

<a href="#inmeta">topo</a>

Page 16: Apostila curso xhtml css

IMAGENS

Atualmente temos três formatos de figuras bem difundidos: GIF, JPEG e PNG, que podem ser incluídas nas páginas através do elemento <img />. Este elemento possui o atributo “alt”, que deve ser utilizado para fornecer um texto alternativo quando a imagem não puder ser visualizada, já o atributo “src” deve ser utilizado para indicar a localização da imagem.

O elemento “img” possui os seguintes atributos que podem ser usados no xhtml:

Atributo Descriçãowidth Define o comprimento da imagemheight Define o altura de imagem

<img src="imagens/inmeta.jpg" alt="InMeta Logo" />Código 19 - Exemplo de tag de imagem

Figura 7 - Resultado da tag img

<img src="inmeta.jpg" alt="InMeta Logo" width="100" height="60px" />Código 20 - Exemplo de tag de imagem customizada

Figura 8 - Resultado da tag img customizada

Podemos também inserir um titulo a imagem onde será exibida ao deixar o mouse sobre ela;

<img src="inmeta.jpg" alt="InMeta Logo" title="Titulo imagem - InMeta" />Código 21 - Exemplo de imagem com title (título)

16

Page 17: Apostila curso xhtml css

Figura 9 - Resultado da tag img com title (título)

TABELA

Em XHTML todas as tabelas devem possuir um título, cabeçalho, corpo e roda-pé. O elemento “<table> </table>” é o responsável pela manutenção das tabelas nesta linguagem. Na construção de uma tabela podemos utilizar os seguintes elementos para definir suas partes:

Uma célula pode se estender por mais de uma coluna, para isto deve ser utilizado o atributo “colspan” seguido do número de colunas que a célula deve se expandir. Caso a célula tenha de ocupar mais de uma linha o atributo a ser utilizado é o “rowspan”, ambos os atributos devem ser inseridos dentro de uma declaração <td> </td>.

Exemplo:

… <body> <div> <table> <tr> <td>Linha 1 Coluna 1</td> <td>Linha 1 Coluna 2</td> <td>Linha 1 Coluna 3</td> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> <td>Linha 2 Coluna 3</td>

17

Atributo Descrição<table></table> Delimita o tabela e seus elementos<caption></caption> Elemento opcional que indica o título da tabela<thead> </thead> Delimita o cabeçalho da tabela<tfoot> </tfoot> Delimita o roda-pé da tabela<tbody> </tbody> Delimita o corpo da tabela<tr> </tr> Delimita as linhas da tabela<td> </td> Delimita as colunas da tabela<th></th> Delimita as colunas da tabela como título

Page 18: Apostila curso xhtml css

</tr> <tr> <td>Linha 3 Coluna 1</td> <td>Linha 3 Coluna 2</td> <td>Linha 3 Coluna 3</td> </tr> </table> </div> </body>…Código 22 - Exemplo de tabela simples

Figura 10 - Exemplo de tabela simples

Exemplo usando tbody, thead, tfoot:

… <body> <div> <table> <thead> <tr> <th>Nome</th> <th>Pontos</th> </tr> </thead> <tfoot> <tr> <th>-</th> <th>15</th> </tr> </tfoot> <tbody> <tr> <td>T. Sexton</td> <td>10</td> </tr> <tr> <td>J. Dinnen</td> <td>5</td> </tr> </tbody> </table> </div>

18

Page 19: Apostila curso xhtml css

</body>…Código 23 - Exemplo de tabela com cabeçalho, corpo e rodapé

Figura 11 - Exemplo de tabela com cabeçalho, corpo e rodapé

Exemplo de uso de tabelas com união de células:

… <body> <div> <table> <tr> <td colspan="2">Linha 1 Coluna 1</td> <td>Linha 1 Coluna 3</td> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> <td rowspan="2">Linha 2 Coluna 3</td> </tr> <tr> <td>Linha 3 Coluna 1</td> <td>Linha 3 Coluna 2</td> </tr> </table> </div> </body>…Código 24 - Exemplo de tabela com células mescladas

19

Page 20: Apostila curso xhtml css

Figura 12 - Exemplo de tabela com células mescladas

FORMULÁRIO

Um formulário serve para o usuário interagir de alguma forma com o site, enviando informações, escolhendo ou selecionando certas funções do site ou entrar em contato com o criador ou dono do site.

O uso básico para construção de um formulário XHTML semântico é composto da sua tag <form>, mais o atributo da ação (action) que é utilizado para executar a própria ação, como por exemplo a ação que envia dados do formulário preenchido, utilizando o método (method) “post”.

Exemplo:

…<div> <form action="postar.php" method="post"> <fieldset> <legend>Dados Pessoais</legend> <p> <label for="txtNome">Nome</label> <input type="text" id="txtNome" /> </p> <p> <label for="txtEmail">Email</label> <input type="text" id="txtEmail" /> </p> </fieldset> <fieldset> <legend>Dados Profissionais</legend> <p> <label for="txtEmpresa">Empresa</label> <input type="text" id="txtEmpresa" /> </p> <p> <label for="txtCargo">Cargo</label> <input type="text" id="txtCargo" /> </p> </fieldset> <p><input type="submit" value="Enviar" /></p> </form></div>…Código 25 - Exemplo de formulário

20

Page 21: Apostila curso xhtml css

Figura 13 - Exemplo de formulário

Os elementos internos de um formulário xhtml podem ser divididos em 7 tipos: input, button, select, textarea, label, fieldset e legend:

Fieldset & Legend

O elemento fieldset tem a função de denominar áreas ao formulário, como exemplo área de inserção de dados pessoais, logo outro fieldset para área de informações comerciais. A Legenda serve para descrever em texto algo que identifique o fieldset.

Label

Serve para descrever ou associar a um elemento, utilizando o atributo “for” que serve para criar uma ligação entre os dois elementos, quando o label for clicado o foco passara para o outro elemento da ligação.

Exemplo:<label for="nome">Nome:</label><input id="nome" type="text" />Código 26 - Exemplo de label (título para campos de um formulário)

Input

O elemento input é um elemento de formulário, onde ao atributo type se agregam vários outros valores que definem outros tipos de inputs, são eles:

radio - Seleção de uma única alternativa checkbox – Seleção de múltiplas alternativas

21

Page 22: Apostila curso xhtml css

submit – Elemento que envia informações de um formulário image – Elemento que envia informações de um formulário através de um botão gráfico text – Caixa que recebe valores simples de texto hidden – Envia dados ocultos password – Entrada de linha de texto com informações ocultas em ****. reset – Botão que limpa os dados adicionados pelo usuário file – Seleciona arquivos para um tipo de envio. button – Botão evento, semelhante ao input mas aceita conteúdo

Select

O elemento select é destinado a exibir uma lista de opções onde muitas vezes essa lista é extensa, o elemento exibe somente uma opção e esconde todas as restantes.As opções são exibidas onde definimos a tag option.

Textarea

Este elemento é semelhante ao input type=”text”, com a diferença de ter a possibilidade de inserção de múltiplas linhas de texto. Onde em cols é definida a quantidade de colunas e rows de linhas que são exibidas antes do scroll se ativar.

Validação W3C

W3C Markup Validation Service

O serviço de Markup Validatior da W3C, é um serviço gratuito, que ajuda a analisar documentos web usando as linguagens HTML ou XHTM.

Estas linguagens estão definidas por especificações técnicas. A validação de documentos web, é um importante passo, que pode ajudar a melhorar drasticamente a qualidade de um website, permitindo poupar tempo e dinheiro. Esta ferramenta de análise, além de identificar os eventuais erros da página também identifica a possível solução para o problema.

Existem dois tipos de ferramentas: uma para análise dos ficheiros HTML e para os ficheiros CSS. Estas ferramentas estão disponíveis no website da W3C ou então nos links listados abaixo:

HTML Validator - http://validator.w3.org/ CSS Validator - http://jigsaw.w3.org/css-validator

22

Page 23: Apostila curso xhtml css

Para mais informações pode visitar a documentação disponível no website da W3C em http://validator.w3.org/about.html ou em http://www.w3.org

Indentação

A indentação é fundamental para uma boa compreensão do documento XHTML.O quadro vermelho exibe um código errado, sem indentação.O quadro verde exibe um código correto, com indentação.

<body><fieldset><ul><li><span>E-Mail</span><div><a href="mailto:[email protected]" title="email">[email protected]</a></div></li></ul></fieldset></body>

SEO + XHTML

As meta tags importantes para o SEO são:

Title tag (<title></title>) Meta description

23

<body> <fieldset> <ul> <li> <span>E-Mail</span> <div> <a href="mailto:[email protected]" title="email">[email protected]</a> </div> </li> </ul> </fieldset></body>

Page 24: Apostila curso xhtml css

Meta keywords h1 a h6

TITLE

1. Use o nome da página em todas title tag!

Mas mude o título de acordo com o conteúdo:

“Mestre SEO – Artigos”

“Mestre SEO – Black Hat”

“Mestre SEO – Link Building”

2. Não ultrapassar 60~70 caracteres.

Isso porque não vai aparecer mais do que 70 caracteres nos resultados de busca para o título de uma página…

3. Use palavras-chave (mas dentro de um contexto):

Atenção! Não vale keyword spamming! “mestre seo, dicas de seo, tudo sobre seo, tutorial de seo, black hat seo, meta description seo, …”

Use as palavras-chave mas com algum sentido: “Mestre SEO – Tudo sobre SEO”

4. Se for usar frases, que sejam relevantes

“Mestre SEO – 10 Motivos para não usar Black Hat”

“Mestre SEO – Bom dia, hoje eu acordei pensando em novas técnicas de SEO..”

5. Separador de frases: deixe a frase separada do resto do título

“Mestre SEO – Artigos | SEO na Title Tag”

6. O que a página oferece?

Um título para uma página deve seguir a sua oferta e procura. Quando a página oferece um browsing ou pesquisa, recomenda-se um título descritivo. Porém, quando se está vendendo ou oferecendo um download, deve-se deixar claro no título que a compra, download ou qualquer outra ação, pode ser feita no site. “Mestre SEO – Faça Download de e-Books sobre SEO”, ou “Mestre SEO – Pesquise os melhores livros de SEO”.

7. Mantenha um padrão

Estabeleça um padrão para o Título e siga-o.

“Mestre SEO – Artigos”

“Mestre SEO – Downloads”

“Mestre SEO – Artigos”

“Faça downloads Mestre SEO”

24

Page 25: Apostila curso xhtml css

“compre livros – dicas de seo”

8. Use o Título dentro da página

Repita o título da página na h1 da página, ou algo que o valha, assim o usuário vai ter certeza que chegou onde queria e que seu site oferece o que ele precisa. Para não falar que o buscador vai adorar encontrar no conteúdo da página o que a title tag diz que tem!

META DESCRIPTION TAGS

Meta Description Tags são tags que não aparecem no browser do usuário quando ele carrega uma página do site. Elas contêm informações voltadas principalmente para os motores de busca, mas não somente.

Usos:

Descrever o conteúdo da página com precisão e sucintamente Servir de uma pequena propaganda para atrair tráfego orgânico Para disponibilizar as palavras-chave para os buscadores

Boas meta descriptions não são sempre fáceis de escrever, mas quando se tem a origem de tráfego nos motores de busca, elas são essenciais para o sucesso de um site. Elas tem uma importância ainda maior quando os termos usados na busca indicam uma ação do usuário.

TAG – KEYWORDS

Deverá sempre ser mantida abaixo dos 255 caracteres no total, incluindo letras e espaços. O motivo é técnico mas simples: Este é o valor “por defeito” do tamanho máximo de alguns campos na maioria das bases de dados. Logo pela força dos números existe uma fortíssima probabilidade de só os primeiros 255 caracteres das suas meta-tags serem guardados, o que torna as excepções pontuais e confortavelmente negligenciáveis.

Idealmente devem ser utilizadas de 3 a 12 keywords ou frases chave simples. A utilização de mais do que 20 keywords pode ser considerada “spamindexing” e levar a que o site seja banido ou ignorado pelos motores de busca. Alem de que um grande número de keywords diminui a densidade das palavras-chave relevantes, e levam a que o site surja, ao escrutínio dos motores de busca, como de menos relevância nesse contexto. Isto na prática significa perda drástica de posições nas listagens, uma vez que as posições iniciais de listagem seguem um padrão exponencial, pelos efeitos da forte concorrência com outros websites similares.

H1 A H2

Essas tags mostram a relevância do seu texto para o buscador. H1 deve ser o nível principal, com o titulo do texto (normalmente o mesmo que a tag de título ), H2 deve ser um complemento (sub tópico) do H1 e e por ai vai até H6.

25

Page 26: Apostila curso xhtml css

MÓDULO 2 (CSS)

História

COMO SURGIU

Formatar informação dos sites não é algo novo. Por volta de 1970, no começo da trajetória do SGML, já se falava em algo parecido.

Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação. A medida que o HTML foi se popularizando e evoluindo, foram incluídas em suas qualidades, o domínio de controlar algumas aparências para o documento. Isso fez com que a linguagem ficasse muito complexa, mais dificil para entender e manter. Outro problema era que os browsers tinham diferenças de implementações, o que dificultava a visualização dos sites, trazendo menos controle na navegação pela web.

Por esse tempo apareceu o salvador da pátria. Håkon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais fácil para formatar a informação. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets… Esse era o ano de 1994. Aceitando o convite feito pelo próprio Håkon, Bert Bos – que naquele tempo estava trabalhando em um browser chamado Argo – começou a trabalhar no projeto. Os dois então, trabalharam juntamente no começo do desenvolvimento do CSS.

Em 1995 eles apresentaram sua proposta e finalmente, o W3C – World Wide Web Consortium – que estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por Håkon e Bert Bos. O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1). Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS de nível 2. A segunda versão das Folhas de Estilo para web.

COMO ESTÁ HOJE

O nível 3 do CSS ainda está em desenvolvimento. Mas, sabemos que as facilidades serão muitas, como por exemplo, criar bordas arredondadas sem o uso de imagens, ou definir duas imagens como background de um mesmo objeto.

Do jeito que as coisas vão indo, o CSS 3 não demorará tanto quanto as outras. Os browsers estão mais compatíveis, os desenvolvedores mais espertos. A comunidade em si está muito mais madura e rigorosa sobre esses assuntos.

Conceito

CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata e é definida como "Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web."

26

Page 27: Apostila curso xhtml css

Estrutura

INSERÇÃO DE CSS NO HTML

Folhas de estilos podem ser aplicadas de três formas em arquivos HTML:

Folha de estilos externao Um documento separado das tags HTML

Folha de estilos internao No próprio documento que contem as tags HTML

Folha de estilos inlineo Na própria tag que se deseja formatar.

Exemplo de inserção de folhas de estilo externa, ou seja, em arquivos separados:

Código 27 - Exemplo de arquivo de CSS

Código 28 - Exemplo de folha de estilo externa

No exemplo acima foi usado uma folha de estilos externa onde a tag link importa o arquivo referenciado no atributo href. O atributo type indica o tipo de arquivo a ser importado e o atributo rel indica a relação do arquivo atual (HTML) com o arquivo a ser importado (CSS).

Código 29 - Exemplo de folha de estilo interna

Ao inserir folhas de estilos em um arquivo HTML é possível fazê-lo semelhante a um arquivo CSS externo. A diferença é a adição da tag style que deve ser inserida dentro das tag head.

27

h1 { color: red;}

<head> <link rel="stylesheet" type="text/css" href="style.css" /></head>

<head> <style type="text/css"> h2 {color: blue;} p {margin-left: 20px;} body {background-image:url("fundo.gif");} </style></head>

Page 28: Apostila curso xhtml css

Código 30 - Exemplo de folha de estilo inline

O código acima exibe o uso de folha de estilo inline, ou seja, as propriedades e valores estão dentro do atributo style que está dentro do elemento. Nesse caso a aplicação do estilo é valida somente para o elemento que tem o atributo style.

SELETORES

Existem três modos básicos de selecionar elementos para formatação usando CSS:

Elemento HTML Exemplo: h1, h2...h6, div, span, p Atributo "class" de um elemento HTML

o Exemplo: class=”texto” Atributo "id" de um elemento HTML

o Exemplo: id=”conteudo”

SINTAXE

Uma regra CSS tem duas partes principais: um seletor e uma ou mais declarações:

Código 31 - Exemplo de uso de estilo em elementos

No exemplo acima foi usado o elemento <h1> e aplicado o estilo color que é a propriedade e red que é o valor. Nesse caso todos os elementos <h1> das páginas que contem essa folha de estilos terão a aplicação do estilo.

Código 32 - Exemplo de uso de estilo em elementos que possuem classe

No exemplo acima foi usado a classe texto e aplicado o estilo font-size (tamanho da fonte) que é a propriedade e 12px que é o valor. Todos os elementos que possuírem a classe texto receberão o estilo.

28

<div style="width:400px; height:250px; background-color:#F00"></div>

h1 { color: red;}

.texto { font-size: 11px;}

Page 29: Apostila curso xhtml css

Código 33 - Exemplo de uso de estilo em um elemento com identificador único

No exemplo acima foi usado o elemento cuja identificação ( id) é conteudo e aplicado o estilo width (largura) que é a propriedade e 300px que é o valor. Como o id de um elemento não pode ser usado mais de uma vez na mesma página então apenas um elemento, aquele que tiver o id conteudo, terá a aplicação do estilo.

A IMPORTÂNCIA DO FLOAT: LEFT;

Entender o correto funcionamento e a dinâmica da propriedade CSS “float” é fundamental para o desenvolvimento e estruturação de bons layouts para web. Saber usar corretamente float em web sites e projetos web, em geral, é de extrema importância, já que, basicamente, é através das regras CSS que utilizam float que é possível compor layouts sem o uso de tabelas (tableless), o que traz inúmeros benefícios, como economia no tempo de carregamento, adequação às normas W3C e, consequentemente, um aumento de performance, em geral.

O QUE É “FLOAT”?

Float é uma propriedade CSS de posicionamento!

PROPRIEDADE FLOAT NA PRÁTICA

Para todos os exemplos de folha de estilos usaremos o mesmo código HTML que segue.

Código 34 - Propriedade FLOAT (código HTML base)

Inicialmente nada aparecerá no navegador pois os elementos não tem forma e estão vazios.

Insira o código CSS a seguir.

Código 35 - Propriedade FLOAT (#geral)

29

#conteudo { width: 300px;}

<body> <div id="geral"> <div id="esquerda"></div> <div id="direita"></div> </div></body>

#geral {background:#EEE; /* cinza */height:600px;width:800px;

}

Page 30: Apostila curso xhtml css

Uma divisão de 800px por 600px e um fundo cinza foram criados cuja identificação é “geral”. Será possível verificar o posicionamento dos demais elementos ao inserir estilos neles. Essa primeira divisão foi criada somente para facilitar a visualização dos elementos internos.

Adicione o código CSS ao código criado anteriormente.

Código 36 - Propriedade FLOAT (#esquerda e #direita)

A imagem ao lado ilustra o resultado obtido da aplicação do CSS acima. Os elementos HTML são posicionados um abaixo do outro. Para posicionar os elementos um ao lado do outro usamos a propriedade de posicionamento: FLOAT!

Aplica-se a propriedade aos dois elementos identificados de #esquerda e #direita.

Código 37 - Propriedade FLOAT (#esquerda e #direita com float:left)

30

#esquerda {background:#F00; /* vermelho */height:100px;width:300px;

}#direita {

background:#00F; /* azul */height:200px;width:200px;

}

#esquerda {background:#F00; /* vermelho */float:left;height:100px;width:300px;

}#direita {

background:#00F; /* azul */float:left;height:200px;width:200px;

}

Page 31: Apostila curso xhtml css

A figura ao lado exibe a aplicação da propriedade float (propriedade de posicionamento) com valor left (esquerdo), conforme o código CSS acima.

Os elementos cujo estilo float: left é aplicado assume o espaço superior e esquerdo do elemento pai. Nesse caso o elemento pai é a <div> com identificação #geral.

A propriedade float possui ainda o valor right (direita).

Caso seja necessário inserir um elemento HTML abaixo do outro é importante que se use a propriedade float e no elemento que ficará abaixo (nesse caso #direita) basta inserir a propriedade clear com valor left. O resultado é semelhante ao exemplo que não foi usado o float: left.

Então por que utilizar as propriedades float e clear quando podemos não utilizar e gerar os mesmos resultados?

Simples: controle dos elementos HTML e garantia que os elementos ficarão exatamente onde são esperados!

Aqui temos exemplos com pouco código, porém ao criar páginas HTML os arquivos CSS podem ficar grandes (2000 linhas, por exemplo) somado ao arquivo HTML (com mais 500 linhas) fica fácil se perder.

Na imagem ao lado a propriedade float teve seu valor alterado de left para right no elemento <div> com identificação #direita.

Nesse caso o elemento assume o posicionamento mais próximo do canto direito e superior do elemento pai (#geral).

DESVANTAGEM DA PROPRIEDADE FLOAT

Em nosso exemplo a tag <div> com identificação #geral tem 800px de largura.

A tag <div> com identificação #esquerda tem 300px de largura e a tag <div> com identificação #direita tem 200px de largura. A soma das divisões filhas gera 500px sendo menor que a divisão pai que tem 800px.

Ao aumentar a largura da tag <div> com identificação #esquerda de 300px para 650px de largura e somar as larguras das divisões filhas o resultado será de 850px que é maior que a divisão pai (800px).

Nesse caso o segundo elemento é empurrado para baixo.

Por isso é importante planejar como será feito o CSS antes de começar a codificar! O planejamento ajuda a evitar esse tipo de erros.

31

Page 32: Apostila curso xhtml css

ESTRUTURANDO UMA PÁGINA

Para estruturar uma página usa-se a tag <div> e acrescenta-se folha de estilos conforme a necessidade.

O modelo a estruturar é o site da InMeta Agência Digital.

Figura 14 - Website da InMeta Agência Digital

É importante ter os passos bem definidos para saber o que fazer, portanto o primeiro passo é visualizar o site em partes, ou seja, dividindo em blocos, grupos de informações. Inicie a divisão em blocos grande. Veja o exemplo a seguir:

32

Page 33: Apostila curso xhtml css

A primeira divisão foi entre a parte de cima e a parte de baixo. A parte de cima terá todas as informações do site, exceto o rodapé que estará na parte de baixo. Essa divisão é feita para que a utilização de imagens de fundo sejam bem aproveitadas. Segue um exemplo que define como fazer essa divisão.

Código 38 - Estrutura HTML (parte de cima e parte de baixo)

Código 39 - Estrutura CSS (parte de cima e parte de baixo)

A imagem ao lado exibe o resultado da aplicação da folha de estilo acima no HTML. O exemplo usou dois identificadores (id); um para cada tag <div>. O arquivo CSS apresenta a propriedade background utilizada para inserir cor ou imagem no fundo de um elemento, a propriedade float já estudada, a propriedade min-height (altura mínima) é usada nesse primeiro momento para que seja possível a visualização do elemento com o estilo que foi aplicado e a propriedade width que é a largura.

33

<body> <div id="parte_cima"></div> <div id="parte_baixo"></div></body>

#parte_cima {background:#EEE;float:left;min-height:600px;width:100%;

}#parte_baixo {

background:#6F0;float:left;min-height:200px;width:100%;

}

Page 34: Apostila curso xhtml css

O próximo passo é continuar a divisão. Como o site tem seu conteúdo centralizado à próxima divisão será somente um elemento para definir os limites do conteúdo.

Código 40 - Estrutura HTML (geral)

Código 41 - Estrutura CSS (geral)

34

<body> <div id="parte_cima"> <div id="geral"></div> </div> <div id="parte_baixo"></div></body>

#parte_cima {background:#EEE;float:left;min-height:600px;width:100%;

}#parte_baixo {

background:#6F0;float:left;min-height:200px;width:100%;

}

#geral {background:#999;margin:0 auto;min-height:600px;width:1000px;

}

Page 35: Apostila curso xhtml css

A imagem ao lado ilustra o resultado da aplicação do CCS e HTML acima. Aqui foi usado a propriedade margin que aceita os valores para margin-top, margin-right, margin-bottom, margin-left (exatamente nessa sequência: superior, direita, inferior e esquerda). As margens inferior e esquerda são opcionais e caso não tenham valores estas assumem os valores de superior e direita, respectivamente, conforme exemplo do CSS acima. Resumindo “0 auto” é igual a “0 auto 0 auto”, onde o valor “0” não precisa de unidade de medida (px, % etc) e “auto” significa que o elemento terá sua margem adaptada conforme o espaço que lhe sobrar em relação ao elemento pai. Nesse caso o elemento pai é #parte_cima e o elemento filho é #geral.

Observação: perceba que o estilo de #parte_cima não necessita mais de min-height pois o elemento filho tem uma altura.

Dica: para lembrar o uso de margin relacione com o sentido horário (assim como em um relógio) onde a aplicação de valores inicia no top (12) e termina na esquerda (9).

Assim como #geral foi criado para #parte_cima, #rodape pode ser criado para #parte_baixo.

E continue dividindo a imagem em partes menores.

É importante salientar que inicialmente usamos identificadores (id) pois esses elementos não repetirão. Nessa mesma tela existe uma área de notícias onde os elementos html repetem. Nesse caso deve-se usar classes (class) para criar a folha de estilos.

DIFERENÇA ENTRE BROWSERS

Existem vários navegadores disponíveis para os usuários de internet e isso pode ser interpretado em dificuldades no momento de aplicar folhas de estilos no HTML.

Entre todos os navegadores o Internet Explorer (IE) é o vilão! As versões mais antigas são as que geram mais trabalho principalmente por falta de suporte e bugs.

Um erro muito comum acontece com margens. No IE6 as margens têm seus tamanhos duplicados, ou seja, se o valor da margem é 5px em todos os navegadores funciona perfeitamente com 5px e no IE6 pode aparecer com 10px. Uma opção para corrigir esse bug é usar a propriedade display com valor inline.

35

Page 36: Apostila curso xhtml css

MÓDULO 3 (IMAGENS)

Para que servem as imagens?

COMEÇANDO DO COMEÇO

Primeiramente vamos relembrar alguns elementos que dão forma a uma página HTML. Inicialmente vamos usar a tag <div> entender o uso das imagens.

Como já sabemos, a tag <div> serve para a delimitação de um espaço na página, por isso o nome DIV, que é uma abreviação de DIVISION, ou, divisão.

Quando estamos desenvolvendo uma página, em vários momentos usaremos esta tag, para delimitar os espaços dentro dela.

Alguns desses espaços, devido ao design, necessitam de um estilo com algum desenho ou ilustração ao fundo para alcançar o efeito desejado, como no exemplo a seguir:

E é principalmente para isso que servem as imagens.

E então? Vamos aprender como usar as imagens a nosso favor, usando a propriedade background do CSS.

A PROPRIEDADE BACKGROUND DO CSS

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.

As propriedades background são as listadas abaixo:

Os valores válidos para estas propriedades são:

36

background-color.......... cor do fundo;background-image.......... imagem de fundo;background-repeat......... maneira como a imagem de fundo é posicionada;background-attachment..... se a imagem de fundo "rola" ou não com a tela;background-position....... como e onde a imagem de fundo é posicionada;background................ maneira abreviada para todas as propriedades;

Page 37: Apostila curso xhtml css

Exemplos

Usando uma imagem como fundo da tag <body> da página:

Resultado:

37

background-color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc transparente: transparent

background-image: URL: url(caminho/imagem.gif)

background-repeat: não repete: no-repeat repete vertical e horizontal: repeat repete vertical: repeat-y repete horizontal: repeat-x

background-attachment: imagem fixa na tela: fixed imagem "rola" com a tela: scroll

background-position: x-pos y-pos x-% y-% top left top center top right center left center center center right bottom left bottom center bottom right

<html> <head> <style type="text/css"> <!-- body { background-image: url("/images/css.gif"); } --> </style> </head> <body> </body></html>

Page 38: Apostila curso xhtml css

Repetir verticalmente a imagem de fundo:

<html> <head> <style type="text/css"> <!-- body { background-image: url("/images/css.gif"); background-repeat: repeat-y; } --> </style> </head> <body> </body></html>

Resultado:

Repetir horizontalmente uma imagem de fundo:

38

Page 39: Apostila curso xhtml css

Resultado:

Posicionando uma imagem de fundo + Tornando ela fixa (estilo twitter.com/RafaelDalpra):

<html> <head> <style type="text/css"> <!-- body { background-image: url("/images/css.gif"); background-repeat: no-repeat; background-position: 200px 70px; /*Para tornar a imagem fixa*/ background-attachment: fixed; } --> </style> </head> <body> </body></html>

Este é o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior:

39

<html> <head> <style type="text/css"> <!-- body { background-image: url("/images/css.gif"); background-repeat: repeat-x; } --> </style </head> <body> </body></html>

Page 40: Apostila curso xhtml css

40

Page 41: Apostila curso xhtml css

41

Page 42: Apostila curso xhtml css

REFERÊNCIA

http://www.tableless.com.br (HTML5, CSS3, Padrões WEB, Tableless […] e muito mais…)

http://www.w3schools.com (Full Web Building Tutorials)

http://maujor.com (CSS, Padrões WEB, Acessibilidade)

http://pt-br.html.net/tutorials/html/default.asp (HTML e CSS - Construa seu website)

http://www.profissionaisdeweb.com (Feito para profissionais)

http://www.mestreseo.com.br (SEO sem limites)

42