Apostila curso xhtml css

XHTML/CSS InMeta Agência Digital Conteúdo TOC quot;
1-3quot;
Módulo 1 (HTML) PAGEREF _Toc261013594 3História PAGEREF _Toc261013595 3Conceito PAGEREF _Toc261013596 3HTML PAGEREF _Toc261013597 3XHTML PAGEREF _Toc261013598 4Tags PAGEREF _Toc261013599 4Regras Básicas do uso de Tags PAGEREF _Toc261013600 5XHTML (Conceitos Básicos) PAGEREF _Toc261013601 5Strict PAGEREF _Toc261013602 6Transitional PAGEREF _Toc261013603 6Frameset PAGEREF _Toc261013604 6Página XHTML PAGEREF _Toc261013605 7Cabeçalho (<head>) PAGEREF _Toc261013606 7Corpo (<body>) PAGEREF _Toc261013607 7Links PAGEREF _Toc261013608 14Indentação PAGEREF _Toc261013609 24SEO + XHTML PAGEREF _Toc261013610 24Módulo 2 (CSS) PAGEREF _Toc261013611 27História PAGEREF _Toc261013612 27Como Surgiu PAGEREF _Toc261013613 27Como Está hoje PAGEREF _Toc261013614 27Conceito PAGEREF _Toc261013615 27Estrutura PAGEREF _Toc261013616 28Inserção de CSS no HTML PAGEREF _Toc261013617 28Seletores PAGEREF _Toc261013618 29Sintaxe PAGEREF _Toc261013619 29A importância do float: left; PAGEREF _Toc261013620 30Estruturando uma página PAGEREF _Toc261013621 32Diferença entre Browsers PAGEREF _Toc261013622 36Módulo 3 (Imagens) PAGEREF _Toc261013623 37Para que servem as imagens? PAGEREF _Toc261013624 37Começando do começo PAGEREF _Toc261013625 37Exemplos PAGEREF _Toc261013626 38Referência PAGEREF _Toc261013627 42 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ê. 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 quot;
padronizado, claro e limpoquot;
. 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ágina 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 Uma página XHTML é mais acessível a aplicações do usuário, incrementando a interoperabilidade e a portabilidade dos documentos web; Web Standard 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 SEQ Código ARABIC 1 - Exemplo de tag que não necessita conteúdo curso xhtml InMeta Código SEQ Código ARABIC 2 - Exemplo de tag que necessita de conteúdo 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. Exemplo com tags Exemplo com tags Todas tags devem estar convenientemente aninhadas. <div>Exemplo com tags</div> <div>Exemplo com tags</div> Devem ser usadas letras minúsculas tanto para tags como para seu atributos. <A HREF=quot;
http://www.inmeta.com.brquot;
TITLE=quot;
InMetaquot;
>InMeta Agência Digital</A> <a href=quot;
title=quot;
InMetaquot;
>InMeta Agência Digital</a> Todo valor de atributo XHTML devem conter quot;
ASPASquot;
. <div id=cursos> … </div> <div id=quot;
cursosquot;
> … </div> Todo atributo deve conter um valor. “Erro muito comum no HTML em casos que o atributo representa o valor de si mesmo.” <input checked … <input readonly ... <input checked=quot;
checkedquot;
… <input readonly=quot;
readonlyquot;
... 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. 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: <?xml version=quot;
1.0quot;
encoding=quot;
UTF-8quot;
?> Código SEQ Código ARABIC 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. <!DOCTYPE html PUBLIC quot;
-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;
> Código SEQ Código ARABIC 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. <!DOCTYPE html PUBLIC quot;
quot;
> Código SEQ Código ARABIC 5 - Exemplo de DTD Strict Transitional Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso (quot;
deprecatedquot;
). <!DOCTYPE html PUBLIC quot;
-//W3C//DTD XHTML 1.0 Transitional//ENquot;
quot;
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;
> Código SEQ Código ARABIC 6 - Exemplo de DTD Transitional Frameset Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames. <!DOCTYPE html PUBLIC quot;
-//W3C//DTD XHTML 1.0 Frameset//ENquot;
quot;
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdquot;
> Código SEQ Código ARABIC 7 - Exemplo de DTD Frameset Página XHTML Cabeçalho (<head>) O cabeçalho possui informações sobre o documento em si, seus principais componentes são: ElementoDescriçãoObrigató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: ElementoNomeDescriçãoParágrafoSua representação depende do navegador, mas normalmente é representado por um espaço antes e depois do parágrafo.<div></div>DivisãoUtilizado com folhas de estilo na especificação de blocos<h1></h1> a <h6></h6>TítulosIntroduzem 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çõesUtilizados 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>PreserveUtilizado para preservar a formatação do texto, não interpretando seu conteúdo. <?xml version=quot;
1.0quot;
encoding=quot;
UTF-8quot;
?> <!DOCTYPE html PUBLIC quot;
quot;
> <html xmlns=quot;
http://www.w3.org/1999/xhtmlquot;
xml:lang=quot;
enquot;
lang=quot;
enquot;
> <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> Código SEQ Código ARABIC 8 - Exemplo de títulos Figura SEQ Figura ARABIC 1 - Resultado do exemplo de títulos <?xml version=quot;
1.0quot;
encoding=quot;
UTF-8quot;
 quot;
xml:lang=quot;
enquot;
lang=quot;
enquot;
> <head> <title>Exemplo Títulos</title> </head> <body> Isto é um parágrafo <div> Primeira div </div> <div> Segunda div </div> E outro parágrafo <blockquote> quot;
Este agora é um bloco de citação, pequeno mas é </blockquote> </body> </html> Código SEQ Código ARABIC 9 - Exemplo de blocos Figura SEQ Figura ARABIC 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 o qual é o elemento inline mais usando em documentos xhtml. Também podemos observar o conjunto de elementos voltados a decoração “inline”: ElementoNomeDescriçãoNegritoFonte em negrito.ÊnfaseFonte em itálico.PequenaFonte menor que o padrão.<big></big>GrandeFonte maior que o padrão.<code></code>CódigoFonte formato código.<dfn></dfn>DefiniçãoFonte em itálico em negrito.<kbd></kbd>TecladoTexto nono-espaçado, como se tivesse sido escrito na máquina de escrever.<cite></cite>CitaçãoFonte em itálico. <?xml version=quot;
1.0quot;
encoding=quot;
UTF-8quot;
 quot;
xml:lang=quot;
enquot;
lang=quot;
enquot;
> <head> <title>Exemplo de decoração quot;
inlinequot;
</title> </head> <body> Fonte em negrito. Fonte em ênfase. Fonte menor que o padrão. Fonte <big>maior</big> que o padrão. Fonte <code>formato código</code>. Fonte em <dfn>itálico em negrito</dfn>. Texto <kbd>nono-espaçado</kbd>. Fonte em <cite>citação</cite>. </body> </html> Código SEQ Código ARABIC 10 - Exemplo de elementos inline Figura SEQ Figura ARABIC 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>. <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> Código SEQ Código ARABIC 11 - Exemplo de lista ordenada Figura SEQ Figura ARABIC 4 - Resultado do exemplo de lista ordenada <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> Código SEQ Código ARABIC 12 - Exemplo de lista não ordenada Figura SEQ Figura ARABIC 5 - Resultado do exemplo de lista não ordenada <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> Código SEQ Código ARABIC 13 - Exemplo de lista descritiva Figura SEQ Figura ARABIC 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. AtributoDescriçãoidIdentifica unicamente os elementos dentro dos documentos XHTML;classEspecifica a classe a que um elemento pertence;titleEspecifica um título que pode ser utilizados para nomear o elemento;styleEspecifica 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 quot;
transportaquot;
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. Â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: <body> <a name=quot;
inmetaquot;
></a> </body> Código SEQ Código ARABIC 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>. <a href=quot;
#inmetaquot;
>topo</a> Código SEQ Código ARABIC 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=quot;
>InMeta Agência Digital</a> Código SEQ Código ARABIC 16 - Exemplo de link absoluto Exemplo de um link relativo <a href=quot;
../home.phpquot;
>Home</a> Código SEQ Código ARABIC 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=quot;
mailto:contato@inmeta.com.brquot;
>Enviar email</a> Código SEQ Código ARABIC 18 - Exemplo de link para e-mail 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: AtributoDescriçãowidthDefine o comprimento da imagemheightDefine o altura de imagem <img src=quot;
imagens/inmeta.jpgquot;
alt=quot;
InMeta Logoquot;
/> Código SEQ Código ARABIC 19 - Exemplo de tag de imagem Figura SEQ Figura ARABIC 7 - Resultado da tag img <img src=quot;
inmeta.jpgquot;
alt=quot;
InMeta Logoquot;
width=quot;
100quot;
height=quot;
60pxquot;
/> Código SEQ Código ARABIC 20 - Exemplo de tag de imagem customizada Figura SEQ Figura ARABIC 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=quot;
inmeta.jpgquot;
alt=quot;
InMeta Logoquot;
title=quot;
Titulo imagem - InMetaquot;
/> Código SEQ Código ARABIC 21 - Exemplo de imagem com title (título) Figura SEQ Figura ARABIC 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: AtributoDescriçã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 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> </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 SEQ Código ARABIC 22 - Exemplo de tabela simples Figura SEQ Figura ARABIC 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> </body> … Código SEQ Código ARABIC 23 - Exemplo de tabela com cabeçalho, corpo e rodapé Figura SEQ Figura ARABIC 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=quot;
2quot;
>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=quot;
2quot;
>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 SEQ Código ARABIC 24 - Exemplo de tabela com células mescladas Figura SEQ Figura ARABIC 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=quot;
postar.phpquot;
method=quot;
postquot;
> <fieldset> <legend>Dados Pessoais</legend> <label for=quot;
txtNomequot;
>Nome</label> <input type=quot;
textquot;
id=quot;
txtNomequot;
/> <label for=quot;
txtEmailquot;
>Email</label> <input type=quot;
textquot;
id=quot;
txtEmailquot;
/> </fieldset> <fieldset> <legend>Dados Profissionais</legend> <label for=quot;
txtEmpresaquot;
>Empresa</label> <input type=quot;
textquot;
id=quot;
txtEmpresaquot;
/> <label for=quot;
txtCargoquot;
>Cargo</label> <input type=quot;
textquot;
id=quot;
txtCargoquot;
/> </fieldset> <input type=quot;
submitquot;
value=quot;
Enviarquot;
/> </form> </div> … Código SEQ Código ARABIC 25 - Exemplo de formulário Figura SEQ Figura ARABIC 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=quot;
nomequot;
>Nome:</label> <input id=quot;
nomequot;
type=quot;
textquot;
/> Código SEQ Código ARABIC 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 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 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> E-Mail <div> <a href=quot;
title=quot;
emailquot;
>contato@inmeta.com.br</a> </div> </li> </ul> </fieldset> </body> <body> <fieldset> <ul> <li> E-Mail <div> <a href=quot;
title=quot;
emailquot;
>contato@inmeta.com.br</a> </div> </li> </ul> </fieldset> </body> SEO + XHTML As meta tags importantes para o SEO são: Title tag (<title></title>) Meta description 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” “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. 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 quot;
Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.quot;
 Estrutura Inserção de CSS no HTML Folhas de estilos podem ser aplicadas de três formas em arquivos HTML: Folha de estilos externa Um documento separado das tags HTML Folha de estilos interna No próprio documento que contem as tags HTML Folha de estilos inline Na própria tag que se deseja formatar. Exemplo de inserção de folhas de estilo externa, ou seja, em arquivos separados: h1 { color: red; } Código SEQ Código ARABIC 27 - Exemplo de arquivo de CSS <head> <link rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
href=quot;
style.cssquot;
/> </head> Código SEQ Código ARABIC 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). <head> <style type=quot;
text/cssquot;
> h2 {color: blue;} p {margin-left: 20px;} body {background-image:url(quot;
fundo.gifquot;
);} </style> </head> Código SEQ Código ARABIC 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. <div style=quot;
width:400px; height:250px; background-color:#F00quot;
></div> Código SEQ Código ARABIC 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 quot;
classquot;
de um elemento HTML Exemplo: class=”texto” Atributo quot;
idquot;
de um elemento HTML Exemplo: id=”conteudo” Sintaxe Uma regra CSS tem duas partes principais: um seletor e uma ou mais declarações: h1 { color: red; } Código SEQ Código ARABIC 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. .texto { font-size: 11px; } Código SEQ Código ARABIC 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. #conteudo { width: 300px; } Código SEQ Código ARABIC 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. <body> <div id=quot;
geralquot;
> <div id=quot;
esquerdaquot;
></div> <div id=quot;
direitaquot;
></div> </div> </body> Código SEQ Código ARABIC 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. #geral { background:#EEE; /* cinza */ height:600px; width:800px; } Código SEQ Código ARABIC 35 - Propriedade FLOAT (#geral) 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. #esquerda { background:#F00; /* vermelho */ height:100px; width:300px; } #direita { background:#00F; /* azul */ height:200px; width:200px; } Código SEQ Código ARABIC 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. #esquerda { background:#F00; /* vermelho */ float:left; height:100px; width:300px; } #direita { background:#00F; /* azul */ float:left; height:200px; width:200px; } Código SEQ Código ARABIC 37 - Propriedade FLOAT (#esquerda e #direita com float:left) 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. 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 SEQ Figura ARABIC 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: 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. <body> <div id=quot;
parte_cimaquot;
></div> <div id=quot;
parte_baixoquot;
></div> </body> Código SEQ Código ARABIC 38 - Estrutura HTML (parte de cima e parte de baixo) #parte_cima { background:#EEE; float:left; min-height:600px; width:100%; } #parte_baixo { background:#6F0; float:left; min-height:200px; width:100%; } Código SEQ Código ARABIC 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. 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. <body> <div id=quot;
parte_cimaquot;
> <div id=quot;
geralquot;
></div> </div> <div id=quot;
parte_baixoquot;
></div> </body> Código SEQ Código ARABIC 40 - Estrutura HTML (geral) #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; } Código SEQ Código ARABIC 41 - Estrutura CSS (geral) 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. 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: 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 quot;
rolaquot;
ou não com a tela; background-position....... como e onde a imagem de fundo é posicionada; background................ maneira abreviada para todas as propriedades; Os valores válidos para estas propriedades são: 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 quot;
rolaquot;
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 Exemplos Usando uma imagem como fundo da tag <body> da página: <html> <head> <style type=quot;
text/cssquot;
>  </style> </head> <body> </body> </html> Resultado: Repetir verticalmente a imagem de fundo: <html> <head> <style type=quot;
text/cssquot;
>  </style> </head> <body> </body> </html> Resultado: Repetir horizontalmente uma imagem de fundo: <html> <head> <style type=quot;
text/cssquot;
); background-repeat: repeat-x; } --> </style </head> <body> </body> </html> Resultado: Posicionando uma imagem de fundo + Tornando ela fixa (estilo twitter.com/RafaelDalpra): <html> <head> <style type=quot;
text/cssquot;
); 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: 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)

Apostila curso xhtml css

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Apostila curso xhtml css

Similaire à Apostila curso xhtml css (20)

Plus de Seekr Gestão e Monitoramento de Marcas em Mídias Sociais

Plus de Seekr Gestão e Monitoramento de Marcas em Mídias Sociais (6)

Apostila curso xhtml css