Potter TDB

HTML de Colunas

Fazer um código HTML é difícil para alguém que nunca mexeu com esse tipo de coisa. Parece um bicho de 7 cabeças! Mas para quem já sabe, é fácil. Faz em apenas 5 minutos. Então, vou ensinar detalhadamente a fazer um.

Programa necessário: Bloco de Notas

Em 1º lugar, abra o Bloco de Notas: Iniciar/Acessórios/Bloco de Notas
Para um HTML "funcionar", ele precisa ter as seguintes tags:

<html>
<head>
<title>Título da Página</title>
</head>

<body>

Conteúdo da Página aqui

</body>
</html>

Clique aqui e veja como a página irá ficar com esse código.

Sem graça né? O que falta? Falta mais cor, uma fonte mais bonita, uma barra de rolagem colorida...

Um código HTML tem 2 partes: a "cabeça" (head) e o "corpo" (body). Vamos começar pelo head

Vamos colocar o CSS da página:

<STYLE type="text/css">
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: TAMANHO DA FONTE px;
color: #COR DA FONTE;
font-family: NOME DA FONTE;
}
A, A:link{color:#COR DO LINK ; text-decoration:none}
A:visited{color:#COR DO LINK JÁ CLICADO }
A:active{color:#COR DO LINK ATIVO }
a:hover {text-decoration: none; cursor: hand; font-family: Verdana; color: #COR DO LINK QUANDO PARAR O MOUSE; font-weight: bold;}
body {scrollbar-3dlight-color: 000000;
scrollbar-arrow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-face-color: 000000;
scrollbar-highlight-color: ffffff;
scrollbar-shadow-color: ffffff;
scrollbar-track-color: 000000 ; }
</STYLE>

Você deverá colocar esse código dentro das tags <head> e </head>, assim:

<html>
<head>
<title>Título da Página</title>

<STYLE type="text/css">
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: TAMANHO DA FONTE px;
color: #COR DA FONTE;
font-family: NOME DA FONTE;
}
A, A:link{color:#COR DO LINK ; text-decoration:none}
A:visited{color:#COR DO LINK JÁ CLICADO }
A:active{color:#COR DO LINK ATIVO }
a:hover {text-decoration: none; cursor: hand; font-family: Verdana; color: #COR DO LINK QUANDO PARAR O MOUSE; font-weight: bold;}
body {scrollbar-3dlight-color: 000000;
scrollbar-arrow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-face-color: 000000;
scrollbar-highlight-color: ffffff;
scrollbar-shadow-color: ffffff;
scrollbar-track-color: 000000 ; }
</STYLE>

</head>

<body>

Conteúdo da Página aqui

</body>
</html>

Mas tem que editar as cores onde diz:

TAMANHO DA FONTE
COR DA FONTE
NOME DA FONTE

COR DO LINK
COR DO LINK JÁ CLICADO
COR DO LINK ATIVO
COR DO LINK QUANDO PARAR O MOUSE

e as cores da barra de rolagem. A COR DA FONTE, tem que ser legível. Não coloque cores muito parecidas com as cores do fundo do template, pois não irá aparecer. Se o seu template for preto nas colunas, coloque a cor da fonte branca, se o seu template for branco nas colunas, coloque a cor da fonte preta... O TAMANHO DA FONTE mais aconselhável é de 8 a 10 (px). No NOME DA FONTE, coloque fontes conhecidas e legíveis, fáceis e entender e comuns. Ex: Verdana, Tahoma, Comic Sans MS... Na COR DO LINK, é a mesma coisa (ou quase) da cor da fonte: você tem que colocar cores diferentes das colunas do template, pois não se enxergam. Você pode colocar a mesma cor da fonte, ou outra, desde que se enxergue bem. Na COR DO LINK JÁ CLICADO, é a mesma coisa. É aconselhável colocar a mesma cor da cor do link e na COR DO LINK ATIVO também. Já na cor do LINK QUANDO PARAR O MOUSE, você pode colocar a mesma cor das demais ou colocar outra. Ex: o link normal é azul e o link que muda quando pára o mouse é branco: se a pessoa parar o mouse no link, ele vai ficar branco e não azul, e quando tirar o mouse de cima do link, ele vai voltar a ficar azul. Na barra de rolagem, cada parte tem um nome. Você tem que colocar uma cor para cada nome. Veja a imagem de uma barra de rolagem e seus nomes abaixo:

Não se esqueça que para colocar as cores, você tem que pegar o código delas. Consulte a tabela de cores!

Eu fiz o meu CSS com as cores que eu escolhi. Veja como ficou:

<STYLE type="text/css">
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 12px;

} A, A:link{color:#CC3300 ; text-decoration:none}
A:visited{color:#CC3300 }
A:active{color:#CC3300 }
a:hover {text-decoration: none; cursor: hand; font-family: Verdana; color: #CC3300; font-weight: bold;}
body {scrollbar-3dlight-color: 000000;
scrollbar-arrow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-face-color: 000000;
scrollbar-highlight-color: ffffff;
scrollbar-shadow-color: ffffff;
scrollbar-track-color: 000000 ; }
</STYLE>

Agora, vou juntar tudo:

<html>
<head>
<title>Título da Página</title>

<STYLE type="text/css">
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 12px;

} A, A:link{color:#CC3300 ; text-decoration:none}
A:visited{color:#CC3300 }
A:active{color:#CC3300 }
a:hover {text-decoration: none; cursor: hand; font-family: Verdana; color: #CC3300; font-weight: bold;}
body {scrollbar-3dlight-color: 000000;
scrollbar-arrow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-face-color: 000000;
scrollbar-highlight-color: ffffff;
scrollbar-shadow-color: ffffff;
scrollbar-track-color: 000000 ; }
</STYLE>

</head>

<body>

Conteúdo da Página aqui

</body>
</html>

Clique aqui e veja como a página irá ficar com esse código.

Mais bonito né?

Pronto! No head acabamos. Agora vamos para o body:

Temos que colocar o código para o template aparecer. O código é esse:

<body background="URL DO BACKGROUND">

<div style="position: absolute; top: 0; left: 0">
<p><span style="position: absolute; left: 0; top: 0"><img border="0" src="URL DA IMAGEM">
</span></p>
</div>

Nesse código, você precisa modificar apenas:

URL DO BACKGROUND e URL DA IMAGEM. Para isso, você precisa hospedar (fazer o upload) da imagem do template e do background (fundo) do template.

Melhores hospedagens:
Photobucket (precisa de cadastro)
Image Shack (não precisa de cadastro)
Tiny Pic (não precisa de cadastro)

Ou simplesmente hospede no servidor do seu blog. Após o upload, substitua no código.
O meu ficará assim:

<body background="prontogf.jpg">

<div style="position: absolute; top: 0; left: 0">
<p><span style="position: absolute; left: 0; top: 0"><img border="0" src="prontog.jpg">
</span></p>
</div>

Agora, vamos fazer o perfil, posts e alinhamento das colunas.
Para cada coluna, você precisa colocar o seguinte código:

<div style="position: absolute; left: Nº DO LEFT; top: Nº DO TOP; width: Nº DO WIDTH; height: Nº DO HEIGHT">


CONTEÚDO DA COLUNA AQUI


</div>

Você precisa editar: Nº DO LEFT, Nº DO TOP, Nº DO WIDTH, Nº DO HEIGHT, NOME DA COLUNA e CONTEÚDO DA COLUNA AQUI.
Junto com o Photoshop, é incluído o Image Ready, que alinha os templates. Abra o Photoshop e abra o arquivo do template que você fez. Após isso, clique em: "Saltar para o Image Ready" (Edit in Image Ready) (Ctrl + Shift + M)

Espere abrir o Image Ready. Ao abrir, você terá que achar a janela de animação (Animation) aberta:

Se não estiver aberta, clique em Janela/Animação (Window/Animation). Na janela, clique em Mapa de Imagem (Image Map)

Selecione a ferramenta "Mapa de Imagem em Retângulo" (Rectangle Image Map Tool) (P)

e selecione a 1ª coluna. Ex:

Na janela da "Animação", vão aparecer os nºs. Veja a imagem abaixo com a ordem dos nºs do alinhamento:

Substitua os números indicados no código de alinhamento do template.

Em NOME DA COLUNA coloque o nome dela. Ex: Perfil...
Em CONTEÚDO DA COLUNA AQUI, você vai colocar tudo o que tiver que aparecer no blog. Ex: Perfil, Menu, contadores, gifs, plakinhas, etc...

Faça isso com todas as colunas que tiver.

Agora são as Tags do Blogger:

Blogger: No Blogger, é necessária apenas 1 tag para que funcione: a tag dos posts

Cole entre as tags <BODY> e </BODY> na parte da coluna dos posts

Se você tiver Iframe ou não quiser colocar as tags do blogger, coloque apenas: <Blogger></Blogger>

UOL Blog: No UOL Blog, são necessárias 3 tags do blogger: dos comentários, dos posts e a tag final (das configurações)

1ª tag: Cole entre as tags <HEAD> e </HEAD>

2ª tag: Cole entre as tags <BODY> e </BODY> na parte da coluna dos posts

<%IF BLOG_ARCHIVE_PAGE%>
		          <%WHILE ARCHIVE_LINK%>
		        	<a href="<%VAR ARCHIVE_LINK%>"><%VAR ARCHIVE_DATE_BEGIN%> a <%VAR ARCHIVE_DATE_END%></a>
			     <%ENDWHILE%>
				 	<br><br><a href="index.html">voltar</a>
					<%ELSE%>
					
						
							<%WHILE POST_TITLE%>
							<script>
							dataPost = "<%VAR POST_DATE_HEADER%>";
							if (dataPost != "") {document.write("<tr><td height=20 id=head><a name=<%VAR POST_ID%>></a><%VAR POST_DATE_HEADER%></td></tr>");}
							else {document.write("<tr><td id=head><a name=<%VAR POST_ID%>></a><%VAR POST_DATE_HEADER%></td></tr>");
							}
							</script>
							<tr>
								<td valign=top style=padding-left:10px;padding-right:10px><br><br>
									<%IFNOT POST_TITLE=''%> <b><%VAR POST_TITLE%></b>
									<br><br><%ENDIF%>
									<%VAR POST_TEXT%><br clear=all><br><span id=f>- Postado por <b><%VAR POST_USER%></b> às <%VAR POST_DATE%><br> 
									<%IF BLOG_ACCEPT_COMMENT%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/comment.html?postFileName=<%VAR POST_ID%>&idBlog=<%VAR BLOG_ID%>','356','478','1');"><span id="post<%VAR POST_ID%>"></span> </a> ]
					      	<%ELSE%>
					       		<%IF POST_HAS_COMMENT%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/comment.html?postFileName=<%VAR POST_ID%>&idBlog=<%VAR BLOG_ID%>','356','478','1');"><span id="post<%VAR POST_ID%>"></span> </a> ]<%ENDIF%>
					      	<%ENDIF%>

<%ENDIF%>
        
 
<%IF BLOG_ACCEPT_COMMENT%><script src=<%VAR BLOG_SCRIPT_URI%>></script><%ENDIF%>
<%IF BLOG_OWNER_MOOD%><script src="mood.js"></script><%ENDIF%> </span>

3ª tag: Cole no final de todo o código, depois de </HTML>

<%DEFINE POST_TEXT STRING NULL%><%DEFINE POST_TITLE STRING NULL%><%DEFINE POST_DATE STRING NULL%><%DEFINE POST_USER STRING NULL%><%DEFINE POST_DATE_HEADER STRING NULL%><%DEFINE BLOG_POST_QTTY INTEGER 0%><%DEFINE BLOG_LINK_QTTY INTEGER 0%>
<%DEFINE LINK_URL STRING NULL%>
<%DEFINE LINK_TITLE STRING NULL%>

<%DEFINE BLOG_NEIGHBOOR_QTTY INTEGER 0%>
<%DEFINE NEIGHBOOR_URL STRING NULL%>
<%DEFINE NEIGHBOOR_TITLE STRING NULL%>

<%DEFINE BLOG_OWNER_NAME STRING NULL%>
<%DEFINE BLOG_CURRENT_DATE STRING NULL%>

<%DEFINE ARCHIVE_DATE_BEGIN STRING NULL%>
<%DEFINE ARCHIVE_DATE_END STRING NULL%>
<%DEFINE ARCHIVE_LINK STRING NULL%>

<%DEFINE BLOG_ARCHIVE_QTTY INTEGER 0%>
<%DEFINE BLOG_ARCHIVE_LINK BOOLEAN FALSE%>
<%DEFINE BLOG_ARCHIVE_PAGE BOOLEAN FALSE%>
<%DEFINE BLOG_ARCHIVE_LINK_URL STRING NULL%>

<%DEFINE BLOG_ID STRING NULL%>
<%DEFINE BLOG_SCRIPT_URI STRING NULL%>
<%DEFINE POST_ID STRING NULL%>

<%DEFINE BLOG_EMOTICON_HEAD STRING NULL%>
<%DEFINE BLOG_EMOTICON_BODY STRING NULL%>
<%DEFINE BLOG_EMOTICON_FOOT STRING NULL%>

<%DEFINE BLOG_VOTE BOOLEAN FALSE%>

<%DEFINE BLOG_RECOMMEND_BLOG BOOLEAN FALSE%>
<%DEFINE BLOG_RECOMMEND_POST BOOLEAN FALSE%>

<%DEFINE BLOG_ACCEPT_COMMENT BOOLEAN FALSE%>
<%DEFINE POST_HAS_COMMENT BOOLEAN FALSE%>
<%DEFINE BLOG_TITLE STRING NULL%>

<%DEFINE BLOG_TEXT_NO_COMMENT STRING Sem comentários%>
<%DEFINE BLOG_TEXT_ONE_COMMENT STRING Um comentário%>
<%DEFINE BLOG_TEXT_MORE_COMMENTS STRING Comentários%>

<%DEFINE BLOG_COUNTRY STRING NULL%>
<%DEFINE BLOG_STATE STRING NULL%>
<%DEFINE BLOG_CITY STRING NULL%>
<%DEFINE BLOG_DISTRICT STRING NULL%>
<%DEFINE BLOG_REGION STRING NULL%>
<%DEFINE BLOG_GENDER STRING NULL%>
<%DEFINE BLOG_AGE STRING NULL%>
<%DEFINE BLOG_LANGUAGE1 STRING NULL%>
<%DEFINE BLOG_LANGUAGE2 STRING NULL%>
<%DEFINE BLOG_INTEREST1 STRING NULL%>
<%DEFINE BLOG_INTEREST2 STRING NULL%>
<%DEFINE BLOG_INTEREST STRING NULL%>
<%DEFINE BLOG_IM_TYPE STRING NULL%>
<%DEFINE BLOG_IM_ID STRING NULL%>

<%DEFINE BLOG_OWNER_MOOD BOOLEAN FALSE%>

Weblogger: No Weblogger, são necessárias 2 tags para que funcione: a tag do título e descrição da página e a tag dos posts

1ª tag: Cole entre as tags <HEAD> e </HEAD> no lugar de <TITLE>Título da Página</TITLE>

2ª tag: Cole entre as tags <BODY> e </BODY> na parte da coluna dos posts

Se você tiver Iframe ou não quiser colocar as tags do blogger, coloque apenas: <weblogger></weblogger>

Juntando tudo: Vou juntar o meu código HTML com tudo o que aprendemos nesse tutorial. Ele vai ficar assim:

<html>
<head>
<title>Título da Página</title>

<STYLE type="text/css">
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 12px;

} A, A:link{color:#CC3300 ; text-decoration:none}
A:visited{color:#CC3300 }
A:active{color:#CC3300 }
a:hover {text-decoration: none; cursor: hand; font-family: Verdana; color: #CC3300; font-weight: bold;}
body {scrollbar-3dlight-color: 000000;
scrollbar-arrow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-face-color: 000000;
scrollbar-highlight-color: ffffff;
scrollbar-shadow-color: ffffff;
scrollbar-track-color: 000000 ; }
</STYLE>

</head>

<body background="prontogf.jpg">

<div style="position: absolute; top: 0; left: 0">
<p><span style="position: absolute; left: 0; top: 0"><img border="0" src="prontog.jpg">
</span></p>
</div>

<div style="position: absolute; left: 16; top: Nº DO TOP; width: Nº DO WIDTH; height: Nº DO HEIGHT">


MEU PERFIL


</div>

<div style="position: absolute; left: Nº DO LEFT; top: Nº DO TOP; width: Nº DO WIDTH; height: Nº DO HEIGHT">


MAIS


</div>

<div style="position: absolute; left: Nº DO LEFT; top: Nº DO TOP; width: Nº DO WIDTH; height: Nº DO HEIGHT">


<blogger>

<blogdateheader><b><$BlogDateHeaderDate$>
</b></blogdateheader>
<br>
<br>
<$BlogItemBody$>
<br>
<br>

- Postado por <$BlogItemAuthor$> às <$BlogItemDateTime$>
<br>
<center>____________________________</center>

</blogger>


</div>

</body>
</html>

Clique aqui e veja como a página irá ficar com esse código.

Tags fundamentais:

<b> </b> = Negrito = Potter TDB
<i> </i> = Itálico = Potter TDB
<u> </u> = Sublinhado = Potter TDB
<center> </center> = Centraliza o texto
<title> </title> = Título da Página
<p> </p> = Parágrafo
<br> = Quebra de Linha (Enter)
<a href="endereço do link" target="_blank">Nome</a> = Link = Potter TDB
<img src="endereço da imagem"> = Imagem =

Pronto! Agora é só acrescentar o que você quiser! Espero que tenham aprendido x]~

Tutorial feito por mim! Qualquer cópia é totalmente proibida!