Primeiros passos em HTML - Introdução
Autor: Lorena Lima | Publicado: 2012-11-14T07:05:00-08:00



Primeiros passos em HTML - Introdução


Mas que droga é essa de html? Como mexo nisso? Para que ele me serve?

Essa são perguntas que alguma vez&nbsp;já&nbsp;deve te passado pela sua cabeça. É complicado demais, são coisas que não fazem sentido, nunca irei saber editar isso!&nbsp;

Totalmente&nbsp;compreensível, caro leitor. HTML a primeira vista não faz sentido para&nbsp;ninguém&nbsp; não importa se você&nbsp;já&nbsp;tem uma vasta experiencia no cyber espaço ou esta começando a dar seus primeiros passos nessa área.

Agora irei inciar com vocês os nossos tutoriais sobre html, logico que temos que começar pelo inicio. Darei explicações básicas e simples, com o&nbsp;objetivo&nbsp;que ate os mais leigos no assunto possam se&nbsp;inteirar e poder&nbsp;participar&nbsp;desse grande universo que é o html.





HTML é a abreviação inglesa de&nbsp;HyperText Markup Language (linguagem de marcação de texto), é linguagem de marcação usada para edição de paginas na web. Com esta linguagem você pode produzir os mais diversos efeitos, desde a criação de um site ate efeitos de texto ou imagem.&nbsp;&nbsp;


Passado essa pequena introdução, daremos inicio ao estudo do html do blogger. Onde irei explicar passo a passo o que significa e como podem usar o html a favor de vocês. Editando seus layout's &nbsp;utilizando os conhecimentos&nbsp;básicos&nbsp;e avançados desta humilde bloggueira que vos fala.



A primeira coisa que você deve entender é que tudo sempre tem um significado e cada minimo detalhe sempre faz extrema diferença quando se trata de HTML. Caramba, isso&nbsp;já&nbsp;esta ficando complicando! Não, não sinta medo leitor, o html não é um bicho de sete cabeças, e com calma e seriedade você vai ver que qualquer pode editar estes&nbsp;códigos. Respire fundo, se não der certo, tente de novo e de novo, tentando e treinando você vai conseguir. Lets' Go!


HTML Divido

O Html é dividido em duas partes: o CSS e as DIV's de Posicionamento.&nbsp;

&nbsp;- O CSS

Css são os&nbsp;códigos&nbsp;que vão definir o estilo de acada coisa que você queira desenvolver em html. Ele irá definir o tamanho, a cor, sombras, bordas, recuos, margens, efeitos, etc. Resumindo, toda a formatação dos elementos &nbsp;do html.

Exemplo de CSS:&nbsp;
Css de titutulo de postagem


.post h3 {
&nbsp; margin:0; &nbsp; &nbsp; &nbsp;(Margem da área do titulo)
&nbsp; width: 740px; &nbsp; (Largura da área do titulo)
&nbsp; height:40px; &nbsp; &nbsp; (Altura da área do titulo)
&nbsp; padding:0; &nbsp; &nbsp; (Recuo do titulo dentro da área de texto)
&nbsp; font-size:20px; &nbsp; (tamanho da fonte do titulo)
&nbsp; color:#000000; &nbsp; &nbsp;(Cor da fonte do&nbsp;titulo)

}

&nbsp;- As&nbsp;DIV's&nbsp;



O Html de um layout é organizado de acordo com a sua ordem de visualização no site. Por exemplo, o elemento que aparece no topo do seu site é a header (também&nbsp;conhecida como cabeçalho), esse é um dos primeiros elementos que irão aparecer no seu html.



É para isso que serve as DIV's de posicionamento. Já que o CSS vai definir a formatação dos elementos, as Div's vão definir a posição de cada elemento do html. Ou seja, se a header é o elemento que fica no topo do seu layout, então, a primeira div que vai aparecer no seu html será a div Header. Se embaixo da sua header, estiver posicionado um menu, então logo abaixo da div da header, teremos a div do menu, e assim sucessivamente.&nbsp;

Exemplo de DIV:

&lt;div id='header-wrapper'&gt; &nbsp; &nbsp; ( Div da header "cabeçalho')




&lt;img alt='header' border='0' height='650' src='http://i.imm.io/yTQK.png' usemap='#Map' width='1024'/&gt;

&lt;map id='Map' name='Map'&gt;&lt;area coords='423,-1,998,98' href='http://purpledesigns-lp.blogspot.com.br/' shape='rect'/&gt;

&lt;area coords='638,107,711,132' href='http://purpledesigns-lp.blogspot.com.br/p/regras.html' shape='rect'/&gt;

&lt;/map&gt; &nbsp;(Código de header mapeada, a div pode conter mais elementos, neste caso, coloquei apenas o código de mapeamento).





&nbsp;&lt;/div&gt; &nbsp;(Fechamento da Div)






Bom, esta foi nossa introdução, a diferença entre CSS e a DIV's são os conhecimentos&nbsp;básicos&nbsp;que vocês devem ter nesse primeiro contato com o Html. Espero que tenham gostado, e ja ja estarei postando a nossa primeira aula, ate lá.

Beijos da Lena. ;*