Estrutura básica
Texto
Imagem
Tabela
Link
Lista
Iframe
CSS
Div / Span / Blockquote
Div / Span / Blockquote
Esta seção é para explicar um pouco melhor sobre estas tags mais "malucas".
Primeiro a mais simples, ao menos para quem conhece editores de texto tipo Word. Esta tag aplica um Indent (margem esquerda). Você pode usar esta tag tanto no template quanto no post. Vamos fazer um exemplo usando uma página simples de HTML para visualizar bem o comando.
<html>
<head>
<!—título da home page -->
<title>Trabalhando com Indent</title>
</head>
<body>
<p> Vamos criar um parágrafo base para termos uma referência visual do efeito </p>
<blockquote>
<p> Este novo parágrafo já está dentro da tag "blockquote", portanto deve ter uma margem</p>
<p> Todos os parágrafos que eu adicionar dentro deste bloco encerrado entre as tags "blockquote" sofrerá sua ação. Ou seja, receberá uma margem à esquerda. </p>
</blockquote>
<p>Este parágrafo volta ao normal</p>
</body>
</html>
Abra o bloco de notas, copie ou digite o código acima. Salve seu arquivo como "tag_blockquote.htm" e visualize no navegador.
Você pode também usar a tag para criar um estilo:
(acrescente este código à sua página e atualize o navegador)
<style type="text/css">
<!--
blockquote {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003399;
background-color: #CCCCFF;
padding: 10px;
}
-->
</style>
A tag "span" é utilizada para a configuração de trechos de parágrafos. Principalmente para aplicação de folhas de estilo. Vamos fazer um exemplo e salvá-lo como "tag_span.htm".
<html>
<head>
<!—título da home page -->
<title>Trabalhando com span</title>
<style type="text/css">
<!--
.cordefundo {
background-color: #99CCFF;
}
-->
</style>
</head>
<body>
<p> Vamos trabalhar com uma série de parágrafos.</p>
<p>Aqui eu vou selecionar apenas <span class="cordefundo">esta parte do parágrafo</span> para aplicar o estilo de cor de fundo. </p>
<p class="cordefundo">Neste aqui vou aplicar um estilo de cor de fundo no parágrafo todo.</p>
<p> <span class="cordefundo">Neste outro, também um parágrafo, usarei o mesmo estilo, porém selecionado com a tag "span". </span> </p>
</body>
</html>
A tag "div" é utilizada para configuração de blocos de textos, principalmente quando se trata de CSS. Mas normalmente atribuímos a ela formatações mais complexas, como por exemplo as declarações: position:absolute; left:119px; top:29px; width:232px; height:284px; z-index:1; overflow: auto; background-color: #FF0000; layer-background-color: #FF0000; background-image: url(images/ladrilho.gif); layer-background-image: url(images/ladrilho.gif); border: 1px none #000000;.
Existem muitos layouts de blogs baseados em tags "div", justamente porque você pode atribuír-lhes altura/largura e a distância do canto superior esquerdo da janela do navegador esquerda/superior. Mais as opções de fundo ou cor de fundo, e jogar o conteúdo lá dentro e está tudo pronto! Mas cuidado. Não são todos os navegadores que interpretam bem estes códigos todos. O que melhor interpreta tudo isso é o Internet Explorer, os outros deixam a desejar.
Veja o seguinte exemplo (criado com a ajuda do software Dreamweaver):
<html>
<head>
<!—título da home page -->
<title>Trabalhando com a tag div</title>
<style type="text/css">
<!--
div {
padding: 7px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:11px; top:13px; width:623px; height:98px; z-index:1; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: auto;">Meu Blog </div>
<div id="Layer2" style="position:absolute; left:10px; top:129px; width:397px; height:224px; z-index:2; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px none #000000; overflow: auto;">Minhas mensagens </div>
<div id="Layer3" style="position:absolute; left:422px; top:129px; width:212px; height:224px; z-index:3; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000; overflow: auto;">Outros itens</div>
</body>
</html>
Agora é só colocar o conteúdo dentro das caixas "div" que vai dar tudo certo! Mas isso é para os usuários mais experientes! Se você está começando agor, treine as outras ferramentas para então chegar até aqui, ok?!
fim
