TOP NEWS

Inicio Leia antes de fazer seu pedido Faça sua encomenda Entre em contato Home Preços e Pacotes Torne-se parceiro do Essence Saiba o que você esta comprando Aprenda a fazer Freebies Downloads Image Map

Aqui você pode encomendar o layout que sempre sonhou para seu blog/site. Além de muitos downloads, tutoriais e goodies para seu photoshop.

www.flickr.com

Primeiros passos em HTML - Introdução

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 já deve te passado pela sua cabeça. É complicado demais, são coisas que não fazem sentido, nunca irei saber editar isso! 

Totalmente compreensível, caro leitor. HTML a primeira vista não faz sentido para ninguém  não importa se você já 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 objetivo que ate os mais leigos no assunto possam se inteirar e poder participar desse grande universo que é o html.


HTML é a abreviação inglesa de 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.  

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  utilizando os conhecimentos básicos 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 já 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 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. 

 - O CSS

Css são os códigos 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  do html.

Exemplo de CSS: 
Css de titutulo de postagem


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


 - As DIV's 

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 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. 

Exemplo de DIV:

<div id='header-wrapper'>     ( Div da header "cabeçalho')

<img alt='header' border='0' height='650' src='http://i.imm.io/yTQK.png' usemap='#Map' width='1024'/>
<map id='Map' name='Map'><area coords='423,-1,998,98' href='http://purpledesigns-lp.blogspot.com.br/' shape='rect'/>
<area coords='638,107,711,132' href='http://purpledesigns-lp.blogspot.com.br/p/regras.html' shape='rect'/>
</map>  (Código de header mapeada, a div pode conter mais elementos, neste caso, coloquei apenas o código de mapeamento).
 </div>  (Fechamento da Div)


Bom, esta foi nossa introdução, a diferença entre CSS e a DIV's são os conhecimentos básicos 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. ;*


4 comentários:

  1. muito ótimo vcs deveriam fazer video aula ensinando como fazer fã site Wordpress meu site é www.jordanjansenbrasil.com.br ele ta tom simples

    ResponderExcluir