domingo, 5 de agosto de 2012

Passos para inciar um layout - Parte 2

Aqui venho com a segunda parte dos passos para inciar um layout. Será a partir dessa postagem que começarei a pegar mais o lado de HTML. Mas uma coisa deve ser dita, o que eu acho que não esclareci muito bem: O Stages Of Helps é um mini-estágio onde eu irei passar um pouco do que venho aprendendo como blogueira. Não se iludam achando que eu vou fazer um tutorial de como fazer O Layout de tal blog, com tais recursos avançados.

Mas então vamos, vim aqui apresentar cada #hashtag do HTML e falar um pouquinho sobre cada uma, que é um dos primeiros passos.

Os códigos de um layout são divididos por tags (categorias) e umas as outras formam pares. Por exemplo, se quer dar espaço deve-se por <p></p> e não<p>. Sempre têm que haver um fechamento entre uma e outra ok? E isso acontece com outras, como <body></body>; <head></head>; <html></html> e várias outras. O corpo do layout básico em si, é o seguinte:

<HTML>

<HEAD>

<TITLE>Título do blog</TITLE>

</HEAD>

<BODY>

Corpo do Blog

</BODY>
</HTML>

No corpo do blog ficam as tags principais. No total são 10 (11 com ]]></b:skin> que é mais do que principal em uma personalização de layout). Eu estou falando das principais, aquelas que são consideradas palavras chave, como /* Mobile e /* Posts e por aí vai. Na ordem:


/* Content é o conteúdo, e nele estará incluso o código dos links.
/* Header é o cabeçalho.

/* Tabs têm haver com as colunas (barra lateral, no caso) e suas separações.
/* Headings são os títulos dos gadgets.
/* Main é relacionado a posição da área de postagem e mais outros, e nele você encontrará tags como .main-inner .column-center-inner { ; .main-inner .column-right-inner { o que também personaliza.
/* Posts obviamente são as postagens e isso inclui os títulos das postagens.
/* Comments é a área dos comentários, apenas deles. Não inclui avatar do caro comentarista.
/* Widgets é toda a parte da sidebar, especificadamente os gadgets. Nele você ponhe os códigos de separar os gadgets, deixa-los em caixinhas, fazer isso e aquilo.
/* Mobile é algo móvel, e nele ficará a outra tag ]]></b:skin> o que significa que será possível mecher com mais 'tranquilidade' nele. Em </b:skin> você ponhe a maioria dos códigos, daqueles mais personalizáveis, acredite. Com o tempo, vocês verão.

Aqui vai umas tags para formatação em que usamos quase sempre nas postagens.

<b>ESCREVA AQUI</b> negrita alguma palavra;
<i>ESCREVA AQUI</i> ponhe a palavra em itálico;
<u>ESCREVA AQUI</u> sublinha a palavra;
<strike>ESCREVA AQUI</strike> risca palavra.
<br> pula uma linha;
<p></p> quebra uma linha de parágrafo;

Para inserir um link em um texto/palavra utilize:

<A HREF="http//linkdesejado" TARGET="_blank">texto do link</A>

Para inserir um link em uma imagem use:

<A HREF="http://link.com.br" TARGET="_blank"><IMG SRC="/IMAGENS/FOTO.JPG" ALT="FOTO DE TESTE"></A>
~~Obrigada ao Te Ensino por alguns códigos~~
É isso. Qualquer coisa me perguntem via comentário ok? Até a próxima, Anna.

1 chuchus se amanteigaram:

Mariane Klenk disse...

Achei um pouquinho complicado, mas aos poucos eu vou entendendo melhor. O SOH já está me ajudando bastante, obrigada Anna (:
Beijos,
http://justxpony.blogspot.com.br/