Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Apostilacursoxhtmlcss 100512152952 Phpapp02

    Загружено:

    Jeferson Artemis
    6 просмотров42 страницы

    Оригинальное название

    apostilacursoxhtmlcss-100512152952-phpapp02

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    6 просмотров42 страницы

    Apostilacursoxhtmlcss 100512152952 Phpapp02

    Загружено:

    Jeferson Artemis

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 42

    XHTML/CSS

    InMeta Agncia Digital

    CONTEDO
    Mdulo 1 (HTML)..................................................................................................................................................... 3 Histria ................................................................................................................................................................ 3 Conceito ............................................................................................................................................................... 3 HTML................................................................................................................................................................ 3 XHTML.............................................................................................................................................................. 4 Tags ...................................................................................................................................................................... 4 Regras Bsicas do uso de Tags ......................................................................................................................... 5 XHTML (Conceitos Bsicos) ................................................................................................................................. 5 Strict................................................................................................................................................................. 6 Transitional ...................................................................................................................................................... 6 Frameset .......................................................................................................................................................... 6 Pgina XHTML ...................................................................................................................................................... 7 Cabealho (<head>) ......................................................................................................................................... 7 Corpo (<body>) ................................................................................................................................................ 7 Links ............................................................................................................................................................... 14 Indentao ......................................................................................................................................................... 24 SEO + XHTML ..................................................................................................................................................... 24 Mdulo 2 (CSS) ...................................................................................................................................................... 27 Histria .............................................................................................................................................................. 27 Como Surgiu................................................................................................................................................... 27 Como Est hoje .............................................................................................................................................. 27 Conceito ............................................................................................................................................................. 27 Estrutura ............................................................................................................................................................ 28 Insero de CSS no HTML .............................................................................................................................. 28 Seletores ........................................................................................................................................................ 29 Sintaxe ........................................................................................................................................................... 29 A importncia do float: left; .......................................................................................................................... 30 Estruturando uma pgina .............................................................................................................................. 32 Diferena entre Browsers .............................................................................................................................. 36 Mdulo 3 (Imagens)............................................................................................................................................... 37 Para que servem as imagens? ........................................................................................................................... 37 Comeando do comeo ................................................................................................................................. 37 Exemplos........................................................................................................................................................ 38 Referncia .............................................................................................................................................................. 42

    MDULO 1 (HTML) Histria


    Tim Berners-Lee criou o HTML original (e outros protocolos associados como o HTTP) em uma estao NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na poca a linguagem no era uma especificao, mas uma coleo de ferramentas para resolver um problema de Tim: a comunicao e disseminao das pesquisas entre ele e seu grupo de colegas. Sua soluo, combinada com a ento emergente internet pblica (que tornaria-se a Internet) ganhou ateno mundial. As primeiras verses do HTML foram definidas com regras sintticas flexveis, o que ajudou aqueles sem familiaridade com a publicao na Web. Atualmente a sintaxe do HTML muito mais rgida, permitindo um cdigo mais preciso. Atravs do tempo, a utilizao de ferramentas para autoria de HTML aumentou, assim como a tendncia em tornar a sintaxe cada vez mais rgida. Apesar disso, por questes histricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar pginas web que esto longe de ser um cdigo HTML vlido. A linguagem foi definida em especificaes formais na dcada de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. A primeira publicao foi esboada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicao formal para o SGML (com uma DTD em SGML definindo a gramtica). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificaes HTML vm sendo mantidas, com o auxlio de fabricantes de software, pela World Wide Web Consortium (W3C). Apesar disso, em 2000 a linguagem tornou-se tambm uma norma internacional (ISO/IEC 15445:2000). A ltima especificao HTML lanada pela W3C foi a recomendao HTML 4.01, publicada no final de 1999. Uma errata ainda foi lanada em 2001. Desde a publicao 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 especificao HTML baseada em XML que considerada pela W3C como um sucessor do HTML.O XHTML faz uso de uma sintaxe mais rigorosa e menos ambgua para tornar o HTML mais simples de ser processado e estendido.

    Conceito
    HTML HTML significa Hyper Text Markup Language em portugus linguagem de marcao de hipertexto, ou seja, a linguagem na qual so escritas as pginas da Web. Toda pgina transferida de um computador remoto para o usurio, onde o browser faz o trabalho de interpretao dos cdigos daquele documento e mostra a pgina que o usurio v.

    XHTML XHTML a sigla em ingls para EXtensible HyperText Markup Language que em portugus resulta em Linguagem de Marcao para Hipertexto Extensvel, uma aplicao 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 evoluo com a adio de aplicaes da meta-linguagem XML (EXtensible Markup Language). XHTML uma linguagem de marcao bastante familiar para quem conhece HTML e a transformao 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 pgina o Uma pgina XHTML mais rpida pois os browsers tem a interpretar uma pgina limpa sem ter que decidir sobre renderizao de erros de cdigo; Portabilidade o Uma pgina XHTML mais acessvel a aplicaes do usurio, incrementando a interoperabilidade e a portabilidade dos documentos web; Web Standard o XHTML 1.0 uma recomendao da W3C. Isto significa que trata-se de uma linguagem estvel, oficialmente especificada pela W3C, tendo sido projetada e revisada pelos seus membros.

    Tags
    Os comandos HTML so chamados de TAGs, compreendem de marcas padres que so utilizadas para fazer indicaes a um browser. Assim como em outras linguagens, os comandos tm uma sintaxe prpria, e seguem algumas regras: As TAGs aparecem sempre entre sinais de menor que (<) e maior que (>); Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de um comando qualquer finalizada com a precedncia de uma barra (/). Existe uma exceo onde a abertura e o fechamento se d na mesma tag. Essas tags contm comandos que no necessitam de contedo para serem processadas.
    <br />
    Cdigo 1 - Exemplo de tag que no necessita contedo

    <p> curso xhtml InMeta </p>


    Cdigo 2 - Exemplo de tag que necessita de contedo

    REGRAS BSICAS DO USO DE TAGS Seguem alguns exemplos diferenciando a correta utilizao do HTML (com fundo verde) da incorreta utilizao do HTML (fundo vermelho). Todas tags dever ser fechada. <span>Exemplo com tags</span><br> <span>Exemplo com tags</span><br />

    Todas tags devem estar convenientemente aninhadas. <div><span>Exemplo com tags</div></span> <div><span>Exemplo com tags</span></div>

    Devem ser usadas letras minsculas tanto para tags como para seu atributos. <A HREF="http://www.inmeta.com.br" TITLE="InMeta">InMeta Agncia Digital</A> <a href="http://www.inmeta.com.br" title="InMeta">InMeta Agncia Digital</a>

    Todo valor de atributo XHTML devem conter "ASPAS". <div id=cursos> </div> <div id="cursos"> </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="checked" <input readonly="readonly" ...

    XHTML (Conceitos Bsicos)


    Todos os documentos XHTML so divididos em duas partes bsicas: o cabealho e o corpo; e necessitam informar a verso e o tipo do documento. 5

    A declarao da verso no obrigatria para documento com encoding UFT-8, mas o uso uma das recomendaes do W3C. declarado sempre no inicio do documento XHTML:
    <?xml version="1.0" encoding="UTF-8"?>
    Cdigo 3 - Cabealho de arquivo XML

    A declarao do tipo feita pelo DOCTYPE, lembrando que ele no faz parte da marcao XHTML e como tal no um elemento, razo pela qual no h necessidade de tag de fechamento.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Cdigo 4 - Declarao 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 bsicos: STRICT Esta a mais rgida das declaraes. Exige um documento XHTML segundo as recomendaes do W3C.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Cdigo 5 - Exemplo de DTD Strict

    TRANSITIONAL Esta declarao permite uma maior flexibilidade e indicada para documentos que ainda utilizem elementos em desuso ("deprecated").
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Cdigo 6 - Exemplo de DTD Transitional

    FRAMESET Esta declarao permite tudo da declarao transational e mais os elementos especificos para frames.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    Cdigo 7 - Exemplo de DTD Frameset

    Pgina XHTML
    CABEALHO (<HEAD>) O cabealho possui informaes sobre o documento em si, seus principais componentes so: Elemento <title></title> <meta /> <link /> <style></style> <object></object> <script></script> <base /> CORPO (<BODY>) Como j foi dito o corpo do documento XHTML formado pelas tags de formatao, utilizadas estruturao das informaes a serem exibidas. Descrio Deve ser o primeiro elemento do cabealho, informa o texto que aparece na barra de ttulo do navegador. Contem informaes sobre o contedo do documento. Elemento utilizado para realizar a ligao entre os documentos e as pginas contendo as folhas de estilo. Informaes sobre as folhas de estilo usadas em um determinado documento. Espao utilizado para insero de cdigo, por exemplo: javascript. Especifica o endereo do documento XHMTL. Obrigatrio SIM NO NO NO NO NO

    ELEMENTOS DE BLOCO
    Elementos de bloco so marcadores destinados tanto a estruturao quanto ao estilo da pgina: Elemento <p></p> <div></div> <h1></h1> a <h6></h6> <blockquote> </blockquote> <pre></pre> Nome Descrio Sua representao depende do navegador, mas normalmente Pargrafo representado por um espao antes e depois do pargrafo. Diviso Utilizado com folhas de estilo na especificao de blocos Introduzem ttulos no documento, podem ser de seis nneis (1 at 6), seu Ttulos tamanho de fonte varia de 24 10 ptos Utilizados para criao de citaes, que inserem uma linha antes e depois Citaes do texto, assim como um nvel de edentao. Utilizado para preservar a formatao do texto, no interpretando seu Preserve contedo.

    <?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 Ttulos</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>
    Cdigo 8 - Exemplo de ttulos

    Figura 1 - Resultado do exemplo de ttulos

    <?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 Ttulos</title> </head> <body> <p> Isto um pargrafo</p> <div> Primeira div </div> <div> Segunda div </div> <p> E outro pargrafo</p> <blockquote> "Este agora um bloco de citao, pequeno mas </blockquote> </body> </html>
    Cdigo 9 - Exemplo de blocos

    Figura 2 - Resultado do exemplo de blocos

    ELEMENTOS INLINE (DESCRITIVOS DE LINHA)


    Elementos inline so marcadores destinados geralmente para armazenagem de textos. Em destaque temos o elemento <span></span> o qual o elemento inline mais usando em documentos xhtml. Tambm podemos observar o conjunto de elementos voltados a decorao inline:

    Elemento <strong></strong> <em></em> <small></small> <big></big> <code></code> <dfn></dfn> <kbd></kbd> <cite></cite>

    Nome Negrito nfase Pequena Grande Cdigo Definio Teclado Citao

    Descrio Fonte em negrito. Fonte em itlico. Fonte menor que o padro. Fonte maior que o padro. Fonte formato cdigo. Fonte em itlico em negrito. Texto nono-espaado, como se tivesse sido escrito na mquina de escrever. Fonte em itlico.

    <?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 decorao "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 padro.</p> <p>Fonte <big>maior</big> que o padro.</p> <p>Fonte <code>formato cdigo</code>.</p> <p>Fonte em <dfn>itlico em negrito</dfn>.</p> <p>Texto <kbd>nono-espaado</kbd>.</p> <p>Fonte em <cite>citao</cite>.</p> </body> </html>
    Cdigo 10 - Exemplo de elementos inline

    10

    Figura 3 - Resultado do exemplo de elementos inline

    LISTAS
    O XHTML d suporte a trs tipos de listas: ordenadas, no ordenada e de definio. As listas no ordenadas so criadas fazendo-se uso do marcador <ul></ul>, e dos elementos <li></li>. Assim como pode possuir vrios nveis, ou seja, uma lista dentro da outra. As listas ordenadas possuem elementos que so numerados, o marcador utilizado o <ol> </ol> e para definio de cada sub-elemento o <li> </li>. J as listas de definio podem ser utilizadas na definio de termos, o marcador utilizado o <dl></dl>, o marcador a ser utilizado no texto o <dt> </dt> e na definio do texto <dd> </dd>.

    11

    <body> <ol> <li>So 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>
    Cdigo 11 - Exemplo de lista ordenada

    Figura 4 - Resultado do exemplo de lista ordenada

    12

    <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>
    Cdigo 12 - Exemplo de lista no ordenada

    Figura 5 - Resultado do exemplo de lista no ordenada

    <body> <dl> <dt>Item 1.1</dt> <dd>Descrio 1.1</dd> <dt>Item 1.2</dt> <dd>Descrio 1.2</dd> <dt>Item 2.1</dt> <dd>Descrio 2.1</dd> </dl> </body>
    Cdigo 13 - Exemplo de lista descritiva

    13

    Figura 6 - Resultado de exemplo de lista descritiva

    ATRIBUTOS
    Os atributos so utilizados para complementar um elemento html, seja com relao a seu comportamento ou quanto a sua apresentao. Estes atributos so inseridos sempre nos marcadores de abertura e os valores atribudos 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 id class title style Descrio Identifica unicamente os elementos dentro dos documentos XHTML; Especifica a classe a que um elemento pertence; Especifica um ttulo que pode ser utilizados para nomear o elemento; Especifica o estilo de exibio do elemento.

    LINKS
    Hyperlinks ou simplesmente links so elos que ligam uma pgina a outra ou a si mesma. O segredo de toda interatividade de uma pgina XHTML est no link, pois ele nos "transporta" at outra pgina, pode servir de ncora, levando-nos a algum trecho do texto ou pode conter alguma ao programada, por exemplo, em JavaScript que proporciona maior dinamismo e animao pgina. O link definido pela tag <a>. Esta tag possui uma referncia quando for um link ou um nome quando for uma ncora.

    14

    ncoras
    ncoras so marcaes que criamos em nosso documento que so invisveis ao leitor, mas so 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> <p> <a name="inmeta"></a> </p> </body>
    Cdigo 14 - Exemplo de ncora

    Link para a ncora


    Para criarmos o link para a ncora usamos o atributo de referncia HREF. A ncora sempre identificada pelo smbolo 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 incio de nessa pagina chamado inicio, se quisermos ir at este ponto basta usarmos o atributo HREF da prpria tag <a>.
    <a href="#inmeta">topo</a>
    Cdigo 15 - Exemplo de link para ncora

    Links entre pginas


    A funo principal de um link a ligao entre pginas, para fazermos tal ligao, usamos o atributo HREF e nele indicamos o caminho da outra pgina. Por exemplo, abaixo est um exemplo de um link absoluto que nos leva a pgina inicial do site da InMeta.
    <a href="http://www.inmeta.com.br">InMeta Agncia Digital</a>
    Cdigo 16 - Exemplo de link absoluto

    Exemplo de um link relativo


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

    LINKS PARA EMAIL


    Para fazer um link para email, ns colocamos a palavra mailto, seguido de dois pontos (:), seguido do email ao qual vai ser enviada a mensagem, caso o usurio clique.
    <a href="mailto:contato@inmeta.com.br">Enviar email</a>
    Cdigo 18 - Exemplo de link para e-mail

    15

    IMAGENS
    Atualmente temos trs formatos de figuras bem difundidos: GIF, JPEG e PNG, que podem ser includas nas pginas atravs do elemento <img />. Este elemento possui o atributo alt, que deve ser utilizado para fornecer um texto alternativo quando a imagem no puder ser visualizada, j o atributo src deve ser utilizado para indicar a localizao da imagem. O elemento img possui os seguintes atributos que podem ser usados no xhtml: Atributo Descrio width Define o comprimento da imagem height Define o altura de imagem

    <img src="imagens/inmeta.jpg" alt="InMeta Logo" />


    Cdigo 19 - Exemplo de tag de imagem

    Figura 7 - Resultado da tag img

    <img src="inmeta.jpg" alt="InMeta Logo" width="100" height="60px" />


    Cdigo 20 - Exemplo de tag de imagem customizada

    Figura 8 - Resultado da tag img customizada

    Podemos tambm 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" />
    Cdigo 21 - Exemplo de imagem com title (ttulo)

    16

    Figura 9 - Resultado da tag img com title (ttulo)

    TABELA
    Em XHTML todas as tabelas devem possuir um ttulo, cabealho, corpo e roda-p. O elemento <table> </table> o responsvel pela manuteno das tabelas nesta linguagem. Na construo de uma tabela podemos utilizar os seguintes elementos para definir suas partes: Atributo <table></table> <caption></caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody> <tr> </tr> <td> </td> <th></th> Descrio Delimita o tabela e seus elementos Elemento opcional que indica o ttulo da tabela Delimita o cabealho da tabela Delimita o roda-p da tabela Delimita o corpo da tabela Delimita as linhas da tabela Delimita as colunas da tabela Delimita as colunas da tabela como ttulo

    Uma clula pode se estender por mais de uma coluna, para isto deve ser utilizado o atributo colspan seguido do nmero de colunas que a clula deve se expandir. Caso a clula tenha de ocupar mais de uma linha o atributo a ser utilizado o rowspan, ambos os atributos devem ser inseridos dentro de uma declarao <td> </td>.

    17

    Exemplo:
    <body> <div> <table> <tr> <td>Linha <td>Linha <td>Linha </tr> <tr> <td>Linha <td>Linha <td>Linha </tr> <tr> <td>Linha <td>Linha <td>Linha </tr> </table> </div> </body>
    Cdigo 22 - Exemplo de tabela simples

    1 Coluna 1</td> 1 Coluna 2</td> 1 Coluna 3</td> 2 Coluna 1</td> 2 Coluna 2</td> 2 Coluna 3</td> 3 Coluna 1</td> 3 Coluna 2</td> 3 Coluna 3</td>

    Figura 10 - Exemplo de tabela simples

    18

    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>
    Cdigo 23 - Exemplo de tabela com cabealho, corpo e rodap

    Figura 11 - Exemplo de tabela com cabealho, corpo e rodap

    19

    Exemplo de uso de tabelas com unio de clulas:


    <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>
    Cdigo 24 - Exemplo de tabela com clulas mescladas

    Figura 12 - Exemplo de tabela com clulas mescladas

    FORMULRIO
    Um formulrio serve para o usurio interagir de alguma forma com o site, enviando informaes, escolhendo ou selecionando certas funes do site ou entrar em contato com o criador ou dono do site. O uso bsico para construo de um formulrio XHTML semntico composto da sua tag <form>, mais o atributo da ao (action) que utilizado para executar a prpria ao, como por exemplo a ao que envia dados do formulrio preenchido, utilizando o mtodo (method) post.

    20

    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>
    Cdigo 25 - Exemplo de formulrio

    Figura 13 - Exemplo de formulrio

    21

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

    Fieldset & Legend


    O elemento fieldset tem a funo de denominar reas ao formulrio, como exemplo rea de insero de dados pessoais, logo outro fieldset para rea de informaes 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 ligao entre os dois elementos, quando o label for clicado o foco passara para o outro elemento da ligao. Exemplo:
    <label for="nome">Nome:</label> <input id="nome" type="text" />
    Cdigo 26 - Exemplo de label (ttulo para campos de um formulrio)

    Input
    O elemento input um elemento de formulrio, onde ao atributo type se agregam vrios outros valores que definem outros tipos de inputs, so eles: radio - Seleo de uma nica alternativa checkbox Seleo de mltiplas alternativas submit Elemento que envia informaes de um formulrio image Elemento que envia informaes de um formulrio atravs de um boto grfico text Caixa que recebe valores simples de texto hidden Envia dados ocultos password Entrada de linha de texto com informaes ocultas em ****. reset Boto que limpa os dados adicionados pelo usurio file Seleciona arquivos para um tipo de envio. button Boto evento, semelhante ao input mas aceita contedo

    Select
    O elemento select destinado a exibir uma lista de opes onde muitas vezes essa lista extensa, o elemento exibe somente uma opo e esconde todas as restantes.As opes so exibidas onde definimos a tag option.

    22

    Textarea
    Este elemento semelhante ao input type=text, com a diferena de ter a possibilidade de insero de mltiplas linhas de texto. Onde em cols definida a quantidade de colunas e rows de linhas que so exibidas antes do scroll se ativar.

    Validao W3C
    W3C Markup Validation Service O servio de Markup Validatior da W3C, um servio gratuito, que ajuda a analisar documentos web usando as linguagens HTML ou XHTM.

    Estas linguagens esto definidas por especificaes tcnicas. A validao 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 anlise, alm de identificar os eventuais erros da pgina tambm identifica a possvel soluo para o problema.

    Existem dois tipos de ferramentas: uma para anlise dos ficheiros HTML e para os ficheiros CSS. Estas ferramentas esto disponveis no website da W3C ou ento nos links listados abaixo: HTML Validator - http://validator.w3.org/ CSS Validator - http://jigsaw.w3.org/css-validator disponvel no website da W3C em

    Para mais informaes pode visitar a documentao http://validator.w3.org/about.html ou em http://www.w3.org

    23

    Indentao
    A indentao fundamental para uma boa compreenso do documento XHTML. O quadro vermelho exibe um cdigo errado, sem indentao. O quadro verde exibe um cdigo correto, com indentao. <body> <fieldset> <ul> <li> <span>E-Mail</span> <div> <a href="mailto:contato@inmeta.com.br" title="email">contato@inmeta.com.br</a> </div> </li> </ul> </fieldset> </body> <body> <fieldset> <ul> <li> <span>E-Mail</span> <div> <a href="mailto:contato@inmeta.com.br" title="email">contato@inmeta.com.br</a> </div> </li> </ul> </fieldset> </body>

    SEO + XHTML
    As meta tags importantes para o SEO so: Title tag (<title></title>) Meta description Meta keywords h1 a h6

    24

    TITLE 1. Use o nome da pgina em todas title tag! Mas mude o ttulo de acordo com o contedo: Mestre SEO Artigos Mestre SEO Black Hat Mestre SEO Link Building 2. No ultrapassar 60~70 caracteres. Isso porque no vai aparecer mais do que 70 caracteres nos resultados de busca para o ttulo de uma pgina 3. Use palavras-chave (mas dentro de um contexto): Ateno! No 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 no usar Black Hat Mestre SEO Bom dia, hoje eu acordei pensando em novas tcnicas de SEO.. 5. Separador de frases: deixe a frase separada do resto do ttulo Mestre SEO Artigos | SEO na Title Tag 6. O que a pgina oferece? Um ttulo para uma pgina deve seguir a sua oferta e procura. Quando a pgina oferece um browsing ou pesquisa, recomenda-se um ttulo descritivo. Porm, quando se est vendendo ou oferecendo um download, deve-se deixar claro no ttulo que a compra, download ou qualquer outra ao, pode ser feita no site. Mestre SEO Faa Download de e-Books sobre SEO, ou Mestre SEO Pesquise os melhores livros de SEO. 7. Mantenha um padro Estabelea um padro para o Ttulo e siga-o. Mestre SEO Artigos Mestre SEO Downloads

    Mestre SEO Artigos Faa downloads Mestre SEO compre livros dicas de seo 8. Use o Ttulo dentro da pgina 25

    Repita o ttulo da pgina na h1 da pgina, ou algo que o valha, assim o usurio vai ter certeza que chegou onde queria e que seu site oferece o que ele precisa. Para no falar que o buscador vai adorar encontrar no contedo da pgina o que a title tag diz que tem! META DESCRIPTION TAGS Meta Description Tags so tags que no aparecem no browser do usurio quando ele carrega uma pgina do site. Elas contm informaes voltadas principalmente para os motores de busca, mas no somente. Usos: Descrever o contedo da pgina com preciso e sucintamente Servir de uma pequena propaganda para atrair trfego orgnico Para disponibilizar as palavras-chave para os buscadores

    Boas meta descriptions no so sempre fceis de escrever, mas quando se tem a origem de trfego nos motores de busca, elas so essenciais para o sucesso de um site. Elas tem uma importncia ainda maior quando os termos usados na busca indicam uma ao do usurio. TAG KEYWORDS Dever sempre ser mantida abaixo dos 255 caracteres no total, incluindo letras e espaos. O motivo tcnico mas simples: Este o valor por defeito do tamanho mximo de alguns campos na maioria das bases de dados. Logo pela fora dos nmeros existe uma fortssima probabilidade de s os primeiros 255 caracteres das suas meta-tags serem guardados, o que torna as excepes pontuais e confortavelmente negligenciveis. Idealmente devem ser utilizadas de 3 a 12 keywords ou frases chave simples. A utilizao 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 nmero de keywords diminui a densidade das palavras-chave relevantes, e levam a que o site surja, ao escrutnio dos motores de busca, como de menos relevncia nesse contexto. Isto na prtica significa perda drstica de posies nas listagens, uma vez que as posies iniciais de listagem seguem um padro exponencial, pelos efeitos da forte concorrncia com outros websites similares. H1 A H2 Essas tags mostram a relevncia do seu texto para o buscador. H1 deve ser o nvel principal, com o titulo do texto (normalmente o mesmo que a tag de ttulo ), H2 deve ser um complemento (sub tpico) do H1 e e por ai vai at H6.

    26

    MDULO 2 (CSS) Histria


    COMO SURGIU Formatar informao dos sites no algo novo. Por volta de 1970, no comeo da trajetria do SGML, j se falava em algo parecido. Quando o HTML foi criado, a inteno no era de forma alguma, formatar informao. A medida que o HTML foi se popularizando e evoluindo, foram includas em suas qualidades, o domnio de controlar algumas aparncias 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 diferenas de implementaes, o que dificultava a visualizao dos sites, trazendo menos controle na navegao pela web. Por esse tempo apareceu o salvador da ptria. Hkon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais fcil para formatar a informao. Foi a que ele props a criao do CSS ou Cascading Style Sheets Esse era o ano de 1994. Aceitando o convite feito pelo prprio Hkon, Bert Bos que naquele tempo estava trabalhando em um browser chamado Argo comeou a trabalhar no projeto. Os dois ento, trabalharam juntamente no comeo 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 Hkon e Bert Bos. O resultado apareceu logo, em 1996, eles lanaram a recomendao oficial pelo W3C do CSS Level 1 (CSS 1). Dois anos depois, no dia 12 de Maio de 1998, eles lanaram a recomendao do CSS de nvel 2. A segunda verso das Folhas de Estilo para web. COMO EST HOJE O nvel 3 do CSS ainda est em desenvolvimento. Mas, sabemos que as facilidades sero 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 vo indo, o CSS 3 no demorar tanto quanto as outras. Os browsers esto mais compatveis, os desenvolvedores mais espertos. A comunidade em si est muito mais madura e rigorosa sobre esses assuntos.

    Conceito
    CSS a sigla em ingls para Cascading Style Sheet que em portugus 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, espaamentos) aos documentos Web." 27

    Estrutura
    INSERO DE CSS NO HTML Folhas de estilos podem ser aplicadas de trs formas em arquivos HTML: Folha de estilos externa o Um documento separado das tags HTML Folha de estilos interna o No prprio documento que contem as tags HTML Folha de estilos inline o Na prpria tag que se deseja formatar.

    Exemplo de insero de folhas de estilo externa, ou seja, em arquivos separados:


    h1 { color: red; }
    Cdigo 27 - Exemplo de arquivo de CSS

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


    Cdigo 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 relao do arquivo atual (HTML) com o arquivo a ser importado (CSS).

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

    Ao inserir folhas de estilos em um arquivo HTML possvel faz-lo semelhante a um arquivo CSS externo. A diferena a adio da tag style que deve ser inserida dentro das tag head.

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


    Cdigo 30 - Exemplo de folha de estilo inline

    28

    O cdigo acima exibe o uso de folha de estilo inline, ou seja, as propriedades e valores esto dentro do atributo style que est dentro do elemento. Nesse caso a aplicao do estilo valida somente para o elemento que tem o atributo style. SELETORES Existem trs modos bsicos de selecionar elementos para formatao 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 declaraes:
    h1 { color: red; }
    Cdigo 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 pginas que contem essa folha de estilos tero a aplicao do estilo.

    .texto { font-size: 11px; }


    Cdigo 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 possurem a classe texto recebero o estilo.

    #conteudo { width: 300px; }


    Cdigo 33 - Exemplo de uso de estilo em um elemento com identificador nico

    No exemplo acima foi usado o elemento cuja identificao (id) conteudo e aplicado o estilo width (largura) que a propriedade e 300px que o valor. Como o id de um elemento no pode ser usado mais de uma vez na mesma pgina ento apenas um elemento, aquele que tiver o id conteudo, ter a aplicao do estilo.

    29

    A IMPORTNCIA DO FLOAT: LEFT; Entender o correto funcionamento e a dinmica da propriedade CSS float fundamental para o desenvolvimento e estruturao de bons layouts para web. Saber usar corretamente float em web sites e projetos web, em geral, de extrema importncia, j que, basicamente, atravs das regras CSS que utilizam float que possvel compor layouts sem o uso de tabelas (tableless), o que traz inmeros benefcios, como economia no tempo de carregamento, adequao s normas W3C e, consequentemente, um aumento de performance, em geral.

    O QUE FLOAT?
    Float uma propriedade CSS de posicionamento!

    PROPRIEDADE FLOAT NA PRTICA


    Para todos os exemplos de folha de estilos usaremos o mesmo cdigo HTML que segue.
    <body> <div id="geral"> <div id="esquerda"></div> <div id="direita"></div> </div> </body>
    Cdigo 34 - Propriedade FLOAT (cdigo HTML base)

    Inicialmente nada aparecer no navegador pois os elementos no tem forma e esto vazios. Insira o cdigo CSS a seguir.
    #geral { background:#EEE; /* cinza */ height:600px; width:800px; }
    Cdigo 35 - Propriedade FLOAT (#geral)

    Uma diviso de 800px por 600px e um fundo cinza foram criados cuja identificao geral. Ser possvel verificar o posicionamento dos demais elementos ao inserir estilos neles. Essa primeira diviso foi criada somente para facilitar a visualizao dos elementos internos. Adicione o cdigo CSS ao cdigo criado anteriormente.

    30

    #esquerda { background:#F00; /* vermelho */ height:100px; width:300px; } #direita { background:#00F; /* azul */ height:200px; width:200px; }
    Cdigo 36 - Propriedade FLOAT (#esquerda e #direita)

    A imagem ao lado ilustra o resultado obtido da aplicao do CSS acima. Os elementos HTML so 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; }
    Cdigo 37 - Propriedade FLOAT (#esquerda e #direita com float:left)

    A figura ao lado exibe a aplicao da propriedade float (propriedade de posicionamento) com valor left (esquerdo), conforme o cdigo CSS acima. Os elementos cujo estilo float: left aplicado assume o espao superior e esquerdo do elemento pai. Nesse caso o elemento pai a <div> com identificao #geral. A propriedade float possui ainda o valor right (direita). Caso seja necessrio 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 no foi usado o float: left. Ento por que utilizar as propriedades float e clear quando podemos no utilizar e gerar os mesmos resultados? 31

    Simples: controle dos elementos HTML e garantia que os elementos ficaro exatamente onde so esperados! Aqui temos exemplos com pouco cdigo, porm ao criar pginas HTML os arquivos CSS podem ficar grandes (2000 linhas, por exemplo) somado ao arquivo HTML (com mais 500 linhas) fica fcil se perder. Na imagem ao lado a propriedade float teve seu valor alterado de left para right no elemento <div> com identificao #direita. Nesse caso o elemento assume o posicionamento mais prximo do canto direito e superior do elemento pai (#geral).

    DESVANTAGEM DA PROPRIEDADE FLOAT


    Em nosso exemplo a tag <div> com identificao #geral tem 800px de largura. A tag <div> com identificao #esquerda tem 300px de largura e a tag <div> com identificao #direita tem 200px de largura. A soma das divises filhas gera 500px sendo menor que a diviso pai que tem 800px. Ao aumentar a largura da tag <div> com identificao #esquerda de 300px para 650px de largura e somar as larguras das divises filhas o resultado ser de 850px que maior que a diviso pai (800px). Nesse caso o segundo elemento empurrado para baixo. Por isso importante planejar como ser feito o CSS antes de comear a codificar! O planejamento ajuda a evitar esse tipo de erros.

    ESTRUTURANDO UMA PGINA Para estruturar uma pgina usa-se a tag <div> e acrescenta-se folha de estilos conforme a necessidade. O modelo a estruturar o site da InMeta Agncia Digital.

    32

    Figura 14 - Website da InMeta Agncia 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 informaes. Inicie a diviso em blocos grande. Veja o exemplo a seguir:

    33

    A primeira diviso foi entre a parte de cima e a parte de baixo. A parte de cima ter todas as informaes do site, exceto o rodap que estar na parte de baixo. Essa diviso feita para que a utilizao de imagens de fundo sejam bem aproveitadas. Segue um exemplo que define como fazer essa diviso.

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


    Cdigo 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%; }
    Cdigo 39 - Estrutura CSS (parte de cima e parte de baixo)

    A imagem ao lado exibe o resultado da aplicao 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 mnima) usada nesse primeiro momento para que seja possvel a visualizao do elemento com o estilo que foi aplicado e a propriedade width que a largura.

    34

    O prximo passo continuar a diviso. Como o site tem seu contedo centralizado prxima diviso ser somente um elemento para definir os limites do contedo.

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


    Cdigo 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; }
    Cdigo 41 - Estrutura CSS (geral)

    A imagem ao lado ilustra o resultado da aplicao do CCS e HTML acima. Aqui foi usado a propriedade margin que aceita os valores para margintop, margin-right, margin-bottom, margin-left (exatamente nessa sequncia: superior, direita, inferior e esquerda). As margens inferior e esquerda so opcionais e caso no 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 no precisa de unidade de medida (px, % etc) e auto significa que o elemento ter sua margem adaptada conforme o espao que lhe sobrar em relao ao elemento pai. Nesse caso o elemento pai #parte_cima e o elemento 35

    filho #geral. Observao: perceba que o estilo de #parte_cima no necessita mais de min-height pois o elemento filho tem uma altura. Dica: para lembrar o uso de margin relacione com o sentido horrio (assim como em um relgio) onde a aplicao 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 no repetiro. Nessa mesma tela existe uma rea de notcias onde os elementos html repetem. Nesse caso deve-se usar classes (class) para criar a folha de estilos. DIFERENA ENTRE BROWSERS Existem vrios navegadores disponveis para os usurios 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 vilo! As verses mais antigas so as que geram mais trabalho principalmente por falta de suporte e bugs. Um erro muito comum acontece com margens. No IE6 as margens tm 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 opo para corrigir esse bug usar a propriedade display com valor inline.

    36

    MDULO 3 (IMAGENS) Para que servem as imagens?


    COMEANDO DO COMEO Primeiramente vamos relembrar alguns elementos que do forma a uma pgina HTML. Inicialmente vamos usar a tag <div> entender o uso das imagens. Como j sabemos, a tag <div> serve para a delimitao de um espao na pgina, por isso o nome DIV, que uma abreviao de DIVISION, ou, diviso. Quando estamos desenvolvendo uma pgina, em vrios momentos usaremos esta tag, para delimitar os espaos dentro dela. Alguns desses espaos, devido ao design, necessitam de um estilo com algum desenho ou ilustrao ao fundo para alcanar o efeito desejado, como no exemplo a seguir:

    E principalmente para isso que servem as imagens. E ento? 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 caractersticas (os valores na regra CSS) do fundo dos elementos HTML. As propriedades background so as listadas abaixo:
    background-color.......... background-image.......... background-repeat......... background-attachment..... background-position....... background................ cor do fundo; imagem de fundo; maneira como a imagem de fundo posicionada; se a imagem de fundo "rola" ou no com a tela; como e onde a imagem de fundo posicionada; maneira abreviada para todas as propriedades;

    Os valores vlidos para estas propriedades so:

    37

    background-color: cdigo hexadecimal: #FFFFFF cdigo rgb: rgb(255,235,0) nome da cor: red, blue, green...etc transparente: transparent background-image: URL: url(caminho/imagem.gif) background-repeat: no 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

    Exemplos Usando uma imagem como fundo da tag <body> da pgina:


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

    Resultado:

    38

    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:

    39

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

    Resultado:

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

    40

    <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:

    41

    REFERNCIA
    http://www.tableless.com.br (HTML5, CSS3, Padres WEB, Tableless *+ e muito mais) http://www.w3schools.com (Full Web Building Tutorials) http://maujor.com (CSS, Padres 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

    Вам также может понравиться