Post escrito por Yeltsin Lima
No capítulo anterior, vimos o básico do XHTML. Aprendemos o que significa o doctype, quais as diferenças entre cada um, como estruturar o “cabeçalho” da página, as tags meta e o começamos agora com a primeira parte do “corpo” do site. Lembrando, que essa é uma das partes mais complexa, mas não é complicada.
Um erro de validação que muitos usuários cometem, por confiarem em artigos defasados, é escrever o código em letra maiúscula. Por exemplo, esse código abaixo se for avaliado no W3C Validator constará como errado, pois as tags precisam ser escritas em letra minúscula.
<BODY> <H1>Título do Site</H1> <P>Isso é um exemplo de parágrafo!</P> </BODY>
O que tem de errado nesse código? Bom, por questão de semântica a W3C estipulou que todas as tags devem ser escritas em minúsculo e, convenhamos, fica muito mais fácil ler e entender um código com letra pequenas do que essas gigantes. O blog do Maujor define que os códigos devem ser escritos em letra minúscula pois o XHTML é derivado do XML que é sensível ao tamanho da caixa do texto.
Outro erro bastante comum e isso pode afetar na visualização e renderização do site, é alterar a ordem das tags. Por exemplo:
<em><p>Isso é um parágrafo!</em></p>
Note que, você abriu primeiro o EM mas, fechou primeiro o EM. Mas, não é certo? Se eu abrir primeiro, eu tenho que fechar primeiro, não é? Não, pois, se formos considerar a estrutura do código, você fez o seguinte: itálico, parágrafo, fecha itálico, fecha parágrafo. Mas, o itálico não vai “acompanhar” o tamanho do parágrafo? Mesmo que você queria apenas selecionar uma parte do texto, nesse caso, você precisaria abrir primeiro o parágrafo e depois o itálico, e em seguida fechar o itálico e depois o parágrafo. Um exemplo correto desse código poderia ser assim:
<p><em>Isso é um parágrafo!</em></p>
Lembre-se também de fechar sempre as tags. Em alguns casos, isso pode “quebrar” o layout. E acredite, às vezes você acha que o problema é pior mas, quando vê é apenas uma tag em que você esqueceu de fechar. E como, fecha as tags? Simples:
<a href="http://www.google.com.br" title="Google">Google</a>
Como dá pra perceber, acima temos um hipertexto. Mais conhecido como link. O início dele não tem nenhuma barra vertical. Ela é inserida sempre no fechamento de uma tag. OBSERVAÇÃO: Algumas tags não necessitam “fechar”, um exemplo é a tag de imagem.
<img src="http://example.com/logo.jpg" />
Ela não necessita de uma tag especial para fechar. Mas, por questão de validação, você precisa inserir a barra vertical antes do final da tag: />.
Ensina as “boas práticas”, vamos ao início do tutorial sobre XHTML e CSS. Nessa segunda parte, vocês irão acompanhar algumas pequenas idéias sobre o corpo do site. Esse é o nosso código da primeira parte do tutorial:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="exemplo, palavra, chave, dicas, wp, temas, tutorais" /> <meta name="description" content="Exemplo de palavras chaves e tutorial sobre HTML no DicasWP" /> <meta name="robots" content="nofollow" /> <title>Primeiro Exemplo do Tutorial</title> </head> <body> </body> </html>
O que vamos começar a inserir? Essa é a idéia do layout que iremos montar (esse é um exemplo nada semântico, vou mostrar na parte – 3 como deixamos esse código mais fácil de ser lido). Sim, resolvi cortar esse artigo em mais de uma parte e calma, a terceira parte vai ser publicado ainda nessa semana! :-) Abaixo, o nosso código. Pode testar no Validator da W3C.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="acme, corporation" /> <meta name="description" content="A Corporação ACME desenvolve produtos para facilitar o nosso desenho animado" /> <meta name="robots" content="nofollow" /> <title>ACME Corporation</title> </head> <body> <div id="website"> <div id="header"> <h1>ACME Corporation</h1> </div> <div id="content"> <div id="article"> <div class="artigo-1"> <h2>Título Número 1</h2> <p>Lorem <a href="http://www.google.com" title="Google">ipsum</a> dolor sit amet, consectetur adipiscing elit. Maecenas faucibus, turpis a lobortis iaculis, sapien lectus feugiat orci, quis vestibulum mi elit ut elit. Nam sed mauris sit amet massa feugiat vulputate a lobortis leo. Etiam volutpat nisi quis dolor bibendum non pharetra felis fringilla. Mauris pellentesque adipiscing commodo. Phasellus libero sem, semper eget iaculis in, ultricies quis neque. Phasellus tempor pellentesque tortor at suscipit. Aenean risus velit, sollicitudin quis ultricies nec, rutrum et nisi. Integer libero nisi, lacinia id tincidunt et, ultrices eu arcu. Curabitur feugiat commodo arcu in dignissim. Nam nulla est, scelerisque non mollis ut, iaculis at nunc. Phasellus gravida metus id mi ultricies laoreet. Nunc sit amet felis metus, sit amet aliquet augue. Suspendisse sit amet neque felis, in tincidunt nibh. Praesent vitae odio id purus vehicula mattis. Etiam ac leo dolor, a blandit diam. Nullam eu felis auctor tortor vehicula semper.</p> <p>Vivamus ante purus, convallis ac pulvinar eget, pharetra in sapien. Vestibulum ac cursus mi. Proin quis magna turpis, nec blandit purus. Phasellus in ipsum turpis. Praesent in ligula sed orci semper porta. Suspendisse pretium libero id ligula auctor dignissim. Duis bibendum lacinia justo, sed gravida nibh tristique vitae. Praesent accumsan, nisl sit amet commodo dictum, metus eros mattis nisi, id congue metus erat sed felis. Pellentesque accumsan rutrum augue eget elementum. Nunc placerat lorem non lectus adipiscing luctus tristique lacus consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus aliquam, odio vitae aliquam semper, orci turpis iaculis arcu, eget facilisis justo eros sit amet diam. Donec cursus ligula in neque posuere eget eleifend eros iaculis. Nulla eu lacus eros, id porttitor lacus. Phasellus volutpat sapien id erat scelerisque in dapibus urna ultricies. Vivamus lobortis pellentesque viverra. Sed rhoncus mi a enim eleifend rhoncus. Praesent ut felis nec sapien porttitor posuere. Nam ornare, libero quis porttitor aliquet, enim urna mattis lacus, et adipiscing justo lorem sed turpis.</p> </div> <div class="artigo-2"> <h2>Exemplo de título 2</h2> <p>Etiam mi nibh, vulputate vitae ornare ornare, luctus sed ante. Phasellus lacus nibh, ultrices at placerat ac, imperdiet eget urna. Vivamus malesuada dapibus elit. In sit amet ante ante, at sodales nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem lorem, tempor vitae mollis et, condimentum in purus. Integer sed turpis id quam dictum semper. Curabitur neque quam, vulputate in molestie ac, facilisis id massa. Fusce eget dui in arcu blandit convallis a a erat. Proin sed dictum nibh. Nam dictum dapibus mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Aliquam egestas orci vitae augue accumsan eleifend. Cras ultrices tellus quis turpis mollis volutpat. Proin sit amet felis justo. In risus eros, adipiscing vulputate feugiat vitae, rutrum ut quam. Aliquam posuere ornare tempus. Sed pretium, odio eu semper sollicitudin, odio lacus mattis massa, quis volutpat odio tortor sed nisi. Donec et arcu vel elit sagittis ornare.</p> </div> <div class="artigo-3"> <h3>Exemplo de Imagem</h3> <img src="http://placehold.it/500x250" alt="Imagem de Exemplo" width="500" height="250" /> </div> </div> <div id="sidebar"> <h3>Pesquisa</h3> <form action=""> <input type="text" name="s" class="s" /> </form> <h3>Lista</h3> <ul> <li>teste</li> <li>teste 2</li> <li>teste 3</li> <li>teste 4</li> <li>teste 5</li> </ul> <h3>Outro tipo de lista</h3> <ol> <li>teste 1</li> <li>teste 2</li> <li>teste 3</li> <li>teste 4</li> <li>teste 5</li> </ol> </div> </div> <div id="footer"> <address>Acme Corporaion - 2010 - Avenida da Felicidade, nº. 2020. <br /> Tel.: 00 - 1234 5678</address> </div> </div> </body> </html>
Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.
Loading ...