Tag Archives: strict

Layout #2

Nessa segunda estrutura vamos ver um exemplo de site “tipo portal”. Sem largura fixa, se estendendo na tela e mudando o tamanho (largura) dependendo da resolução do usuário (fluido).

Dividido em 5 partes – topo, coluna esquerda, coluna central, coluna direita e rodapé.

Você pode ver um exemplo desse layout aqui.

Estruturando o XHTML:

<!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="pt" lang="pt">
<head>
<title>CSS Layout</title>
<style type="text/css">

</style>
</head>
<body>
	<div id="geral">
		<div id="topo">
			<h2>CSS Layout</h2>
		</div>
		<div id="meio">
			<div id="menu">
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
				</ul>
			</div>
			<div id="banners">
				<p>Nulla nulla. Donec sit amet augue et risus tincidunt eleifend. Vestibulum quis pede. Aliquam erat volutpat. Morbi consequat dignissim dolor. Quisque felis erat, elementum at, aliquet non, bibendum at, nibh. Integer ut nibh imperdiet purus commodo posuere. Sed eget nisl vitae lectus accumsan rhoncus. Nulla semper euismod neque. Nullam gravida. Donec porta dictum arcu. Proin nisl. </p>
			</div>
			<div id="conteudo">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut dapibus neque et felis. Proin nonummy. Suspendisse fermentum lobortis libero. Nam imperdiet imperdiet ipsum. Phasellus laoreet lectus ut neque. Nam tempus vestibulum leo. In posuere adipiscing metus. Sed tincidunt quam non arcu. Suspendisse nibh ante, consectetuer et, dapibus a, semper a, purus. Integer augue. Vestibulum bibendum. Duis sit amet enim vel leo dapibus fermentum. Phasellus sem. Phasellus dapibus, lectus sit amet malesuada tempus, augue elit tempor nisi, ut lacinia est sapien ac nisl. Duis velit eros, laoreet sed, pretium quis, dignissim in, quam. Pellentesque posuere, lectus nec euismod molestie, felis eros mattis orci, eget sollicitudin nisi sapien vel dolor.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque imperdiet, mauris ac volutpat accumsan, tellus nisi tincidunt turpis, non semper lectus orci quis magna. Fusce consectetuer. Integer in nisi et orci rhoncus ornare. Aliquam sit amet quam sit amet nisi elementum cursus. Sed ipsum. Mauris quis velit eu magna iaculis vulputate. Cras vel sem sit amet turpis consequat feugiat. Curabitur sapien lectus, bibendum eu, tincidunt eget, laoreet et, urna. Quisque eget orci. Curabitur a felis nec leo elementum commodo.</p>
				<p>Quisque turpis eros, pulvinar id, pharetra id, sagittis ac, velit. Aenean nec eros ac magna molestie gravida. Nulla nibh diam, condimentum quis, gravida vel, sodales rhoncus, lectus. Mauris nunc ipsum, viverra in, cursus nec, sagittis a, augue. In libero. Donec eget urna. Nam tempus vehicula orci. Praesent lobortis, dolor a feugiat fermentum, orci libero ullamcorper purus, id mattis est nisi sit amet est. Morbi sed arcu tempus felis mattis pretium. Suspendisse nec risus. Sed a neque.</p>
				<p>In hac habitasse platea dictumst. Sed faucibus, quam sed sodales lacinia, dui metus placerat mi, eget dictum eros tortor et nunc. Ut mauris felis, volutpat nec, consectetuer sit amet, semper eu, odio. Sed volutpat mattis ipsum. Etiam dictum congue augue. Cras tristique eros lacinia sem. Cras est. Cras velit orci, placerat eu, tempor eget, dictum et, urna. Aenean varius viverra metus. Suspendisse aliquam, massa sit amet vehicula consequat, magna risus fringilla arcu, ut cursus ipsum odio id diam. Cras ac ipsum. Aliquam vitae enim. Nulla lacus sapien, adipiscing a, venenatis sed, interdum vel, velit. In est neque, posuere sed, elementum sed, elementum ac, nulla. Suspendisse potenti. Aenean lorem. Sed nisi mauris, facilisis sit amet, congue vel, fermentum sed, nibh. Suspendisse consequat, tortor at mattis rutrum, orci diam commodo ligula, congue lacinia sem leo quis ligula.</p>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras mi ipsum, scelerisque vitae, mollis non, molestie non, odio. Curabitur erat. Praesent fermentum. Curabitur vel lacus vitae metus vehicula mollis. Curabitur ipsum nibh, tempor eu, gravida vel, ultrices vitae, leo. Duis ac lacus. Donec tincidunt scelerisque libero. Suspendisse accumsan. Nullam lorem augue, pellentesque sed, lobortis eget, fermentum vitae, mauris. Aenean bibendum fermentum nulla. Aenean bibendum adipiscing diam. Etiam ipsum velit, tempus a, porta a, sollicitudin non, turpis. Etiam tincidunt odio ac quam.</p>
				<p>Vivamus vel dolor in lectus imperdiet accumsan. Cras et libero nec augue tristique aliquet. Donec tempus. Aenean malesuada, orci et iaculis tristique, metus tellus consequat augue, et dictum nisi magna quis augue. Vivamus ligula leo, faucibus et, auctor vel, molestie vitae, elit. Nam tempus pellentesque sem. Curabitur aliquam hendrerit est. Sed non massa non ante scelerisque tincidunt. In aliquet scelerisque nibh. Phasellus ante risus, vehicula blandit, ultrices ut, scelerisque sed, felis. Nulla sit amet eros id dolor fermentum condimentum. Ut purus velit, ullamcorper sit amet, egestas a, sodales vel, ligula.</p>
			</div>
		</div>
		<div id="rodape">
			<h2>CSS Layout - <a href="https://rogeriolino.wordpress.com/">rogeriolino.wordpress.com</a></h2>
		</div>
	</div>
</body>
</html>

Foi colocado na coluna da esquerda (id=”menu”) um menu, na coluna do meio (id=”conteudo”) um texto qualquer e na coluna da direita (id=”banners”) um pequeno parágrafo só para encher lingüiça.

Agora você deve estar se perguntando por que a coluna do meio vem depois da coluna da direita, já que na hora de ver fica ao contrário.

Resposta: Simplesmente não funciona se a coluna da direita vier primeiro da coluna do meio. Na hora de colocar para flutuar (direita), a coluna do meio não “sobe”. Fica no centro certim mas não fica alinhado acima com as demais colunas. Resumindo essa ordem realmente é importante. =]

Desenrolando com o CSS:

#topo {
	height: 120px;
	border: 1px solid #f1f1f1;
	text-align: center;
}

#topo h2 {
	color: #999999;
	font-family: verdana, Arial, Sans-Serifv;
}

#meio {
	margin-top: 10px;
}

#menu {
	width: 150px;
	float: left;
}

#menu ul {
	width: 150px;
	border: 1px solid #f1f1f1;
	padding: 0;
	margin: 0;
}

#menu ul li {
	width: 150px;
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu ul li a {
	width: 130px;
	_width: 150px;
	height: 20px;
	display: block;
	padding: 3px 0 0 20px;
	text-decoration: none;
	color: #999999;
	font: 12px verdana, Arial, Sans-Serif;
}

#menu ul li a:hover {
	color: #000000;
	background: #f1f1f1;
}

#conteudo {
	margin: 0 180px;
	text-align: justify;
}

#conteudo p {
	font: 12px Verdana, Arial, Sans-Serif;
}

#banners {
	width: 150px;
	float: right;
	border: 1px solid #f1f1f1;
}

#rodape {
	height: 50px;
	border: 1px solid #f1f1f1;
	clear: both;
	text-align: center;
}

#rodape h2 {
	color: #999999;
	font: 11px verdana, Arial, Sans-Serif;
}

Para quem ainda não viu ou não conhece ainda o CSS, esse código vai dentro da tag style. Que por sua vez fica dentro da tag head. Isso para adicionar o CSS no próprio arquivo, caso queira chamar um arquivo externo aqui tem um exemplo.

Bem, olhando o código não tem muito o que explicar. Primeiramente definimos os tamanhos das camadas (topo: altura=120px, rodape: altura=50px, menu: largura=150px, banners: largura=150px).

Colocando as colunas do canto para flutuar (menu: float=left, banners: float=right).

Foi criado um menu no layout também, e se você reparar tem um CSS Hack nele, para que ele funcione corretamente no Internet Explorer 6 ou anterior. Nesse post não vou explicar como e o que foi feito, para mais aqui.
Na coluna do meio defini-se uma margin para ambos lados para deixá-lo com uma largura única e não deixando o texto “escapar” para os lados.

E lembrando de colocar o clear como both no rodape. Para ele ficar sempre abaixo das demais camadas.

No site do Tableless tem um vídeo tutorial muito bom, mostrando exatamente como faz um layout desse tipo, mas dando mais exemplos para deixa-lo ou não fixo. No qual eu quase que praticamente fiz igual. Só que o vídeo tutorial é bem mais explicativo e melhor montado, vale muito a pena conferir.

Layout #1

Agora que já sabemos como escrever um XHTML e temos uma referência de CSS, vamos fazer o nosso primeiro layout.

Primeiro temos que analisar o que queremos, ou que teremos de, exibir na página. Se vai ter um menu horizontal ou vertical, se vai ter rodapé, quantas colunas, etc.

Depois de feito isso é hora de estruturar o “esqueleto” da página no XHTML. Nesse primeiro exemplo vamos ver uma página com duas coluna, topo e rodapé. No qual a coluna do lado esquerdo vai conter o menu e do lado direito o conteúdo da página.

XHTML:

<!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=”pt” lang=”pt”>
<head>
<title> Título </title>
<meta name=”Generator” content=”” />
<meta name=”Author” content=”” />
<meta name=”Keywords” content=”” />
<meta name=”Description” content=”” />
<meta name=”language” content=”pt-br” />
<!– Favicon –>
<link rel=”shortcut icon” href=”favicon.ico” />
<!– Style –>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>

</head>
<body>
<div id=”geral”>
<div id=”topo>

<h2>Título da Página</h2>

</div>
<div id=”meio”>
<div id=”esquerda”>

<ul>

<li><a href=”#” alt=”Página Inicial”>Home</a></li>

<li><a href=”#” alt=”Quem Sou”>Sobre</a></li>

<li><a href=”#” alt=”Contato”>Contato</a></li>

</ul>

</div>
<div id=”direita”>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nulla. Mauris sollicitudin ante sed orci. Vivamus vitae sapien id felis lobortis aliquam. Suspendisse potenti. Integer pellentesque. Nulla vehicula, nisl a lacinia egestas, justo dolor semper justo, sed faucibus nibh orci eu magna. Curabitur vel nisi vulputate est vehicula rhoncus. Curabitur est ligula, vehicula ornare, suscipit vitae, ornare varius, justo. Suspendisse lacus. Sed pulvinar vehicula lectus. Curabitur quis augue. Nullam gravida tortor at felis. Aliquam neque massa, scelerisque at, auctor lobortis, placerat ut, erat. Fusce adipiscing. Phasellus imperdiet blandit quam. Maecenas posuere.</p>
</div>
</div>
<div id=”rodape”>

<h3>Minha Página – 2006</h3>

</div>
</div>
</body>
</html>

Foram colocadas seis camadas, DIVs, uma chamada geral que engloba todo o site para ter um maior controle, a topo – aonde vem a imagem de topo e título da página -, a meio que dentro tem duas, esquerda – menu – e direita – conteúdo – e rodapé – aonde tem os créditos -.

No topo foi colocado o título da página dentro da tag hn, realmente utilizada para isso.

Para fazer o menu foi usada uma lista indefinida (ul – undefined list) com apenas três links.

Na parte de conteúdo foi colocado o famoso “Lorem Lipsum” para não ter que colocar aqueles “bla bla bla” ou “non non non“.

E por fim um crédito no rodapé dentro de ourta tag hn.

CSS:

Agora é a vez do estilo. Como no XHTML o link do CSS está apontando para um arquivo chamado style.css, salve-o com esse nome. Caso deseje colocar outro, mude na página o destino.

#geral {
	width: 726px;
}

#topo {
	width: 720px;
	height: 100px;
	border: 3px solid #999999;
	background: #FFFFFF;
}

#meio {
	width: 720px;
	border: 3px solid #999999;
	background: #FFFFFF;
}

#esquerda, #direita {
	padding: 15px;
}

#esquerda {
	width: 150px;
	float: left;
}

#direita {
	width: 490px;
	float: right;
}

#rodape {
	width: 720px;
	height: 50px;
	border: 3px solid #999999;
	background: #FFFFFF;
	clear: both;
}

Neste caso a página vai ter 720 pixeis de largura e as camadas uma borda de 3 pixeis, totalizando 726px (720+3+3) de largura para a camada geral. Então as camadas topo, meio e rodape terão 720px de largura.

O topo com altura de 100px e o rodapé com 50px. Para as camadas esquerda e direita terem um espaçamento entre o topo e o rodapé, tem um padding de 15px.

Para colocar as duas camadas, esquerda e direita, uma do lado da outro, atribui-se a propriedade float, com valor left para esquerda e right para direita. Fazendo com que ambas flutuem para o lado desejado.
No rodapé foi colocado o clear como both para ele ficar abaixo do meio, devido que as camadas esquerda e direita estão flutuando.

Alguns exemplos aqui.

mais sobre:

Maujor.com – Layout CSS sem tabelas

Maujor.com – Layout CSS 3 colunas

Little Boxes – Examples

Escrevendo o Primeiro XHTML

Mãos à obra, vamos agora escrever nosso primeiro código XHTML. Abaixo o código já pronto e comentado:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”pt” lang=”pt”>

<head>
<title> Título </title>
<meta name=”Generator” content=”” />
<meta name=”Author” content=”” />
<meta name=”Keywords” content=”” />
<meta name=”Description” content=”” />
<meta name=”language” content=”pt-br” />
<!– Favicon –>
<link rel=”shortcut icon” href=”favicon.ico” />
<!– Style –>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>

</head>
<body>

</body>
</html>

Antes de iniciar a tag html é declarado o tipo da página, o Doctype, se você não sabe o que é: leia aqui e/ou aqui.

Nesse caso foi definido como Strict, caso você ainda não esteje preparado pode utilizar como Transitional.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

Você deve estar se perguntando: Por que aquele “xmlns” dentro da tag html ?

É chamado de namespace e serve para mostrar para o browser quais elementos pertencem a qual linguagem no documento. Dúvida? Mais? Mais!

As tags meta servem para colocar informações adicionais, tais como, autor, idioma, palavras-chave e etc. – essas tags são utilizadas por mecanismos de buscas, como o Google por exemplo, para localizar os sites. Um site bem estruturado e definido tem chance maior de aparecer primeiro na busca.

Logo abaixo aparece a tag link referenciando um arquivo externo, ícone. Chamado Favicon – ícone do favoritos – que é nada mais nada menos do que aquele íconezinho que fica aparecendo no browser ao lado do endereço do seu site e nos favoritos também é claro. Caso ainda tenha dúvida veja aqui.

Depois como já vimos aparece novamente a tag link para “puxar” o arquivo de estilo da página – CSS.

Fecha-se a tag head, abre e fecha a body e fecha a html, e pronto. O seu XHTML já está pronto.

Na próxima veremos o um layout já pronto com o CSS.

XHTML – O que é?

XHTML (Extensible Hypertext Markup Language) é uma linguagem de marcação baseada em XML escrita para substituir o HTML.

No XML podemos criar nossas próprias tags, e o XHTML já vem com as tags pré-definidas baseadas nas tags já conhecidas do HTML. Utilizando as regras do XML.

Já que o XHTML usa as tags do HTML para que utilizá-lo?

Imagine que para cada página da internet que você fosse ver um código diferente. E que cada pessoa fosse definir o seu padrão. Seria muito difícil verificar se aquele código estaria dentre os padrões. É aí que entra o XHTML.

Para construir uma página em XHTML você deverá seguir os padrões da W3C, padronizando os códigos e tornando mais fácil sua validação e a legibilidade.

Por exemplo: todas as tags e seus atributos devem ser escritos em letra minúscula, todo valor dos atributos devem estar entre “” (alt=”Olá”), e as tags simples devem ser fechadas com “/>” (<img src=”foto.gif” alt=”eu” />).

Alguns exemplos:

Tags e atributos:

errado: <IMG src=”foto.gif” ALT=”eu”>

certo: <img src=”foto.gif” alt=”eu”>

Aninhamento das tags:

errado: <p>parágrafo <em> negrito </p></em>

certo: <p>parágrafo <em> negrito </em></p>

O XHTML é dividido em três tipos (DOCTYPE):

Strict: o mais rigoroso, exige que seja seguido por completamente os padrões.
Transitional: transição da forma antiga de marcação para uma nova forma. Utilizado por quem ainda está preso à alguma forma antiga em seu site. Sendo um pouco menos rigoroso que o Strict.
Frameset: usado quando se utiliza frames no site.

Principais diferenças entre XHTML e HTML

Além das tags escritas em letra minúscula, o fechamento obrigatório das tags, e as aspas. Também a sintaxe dos atributos devem ser escritas por completo ( <dl compact> para <dl compact=”compact”> ). E a “troca” do atributo name para o atributo id.

Logo veremos mais a fundo o que são DOCTYPE e como funcionam e a declaração de um XHTML.

mais sobre:
Maujor.com – Tutorial XHTML
W3.org – O que é XHTML?
W3schools – XHTML validation
W3Schools – Diferença entre XHTML e HTML
Revolução.ect.br – O que é XHTML?
Revolução.etc.br – Doctype
Linha de Código – Tutorial XHTML
Linha de Código – Escrevendo um XHTML válido