Aprenda HTML + CSS

BÁSICO

Os computadores funcionam basicamente da seguinte forma:

 

1 – Entrada = forma como inserimos dados no computador, o teclado.

2 – Processador = Cérebro, faz cálculo e usa a memória temporária(RAM) para ajudar nesta tarefa.

3 – Memória Ram = igualmente no nosso cérebro a memória ram do computador é temporária e é usadapara resolver os problemas e cálculos. Assim que termina o processamento elimina as informações desnecessárias e guarda os resultados importantes.

4 – Memória do HD = armazena informações para serem usadas posteriormente e resultados gerados pela memória ram.

5 – Saída = monitor, impressão, rede, etc.

 

Ou seja Processador + Memória Ram + Dados Inseridos = resolver problemas, enquanto a Memória do HD = armazenar resultados e informações.

 

HTML

Em uma calculadora eletrônica, que também trabalha da forma citada acima, inserimos dados (1) que são processados (2,3), armazenados (4) e apresentados (5).

No caso dos computadores pessoais os processamentos são mais complexos e para não termos que digitar milhões de números para mostrar uma simples janela na tela ou escutar uma música foram inventadas as linguagens de programação de variados tipos.

A linguagem HTML é um tipo de linguagem para exibição de dados(estrutura) e não para processamento(Javascript é uma linguagem para processamento). Enquanto que o CSS é uma linguagem para estilizar a estrutura criada pelo HTML.

 

HTML = casa com os muros com gesso, sem piso e sem decoração. Com quartos, banheiros e salas definidos.

CSS = decoração da casa, muros pintados, piso e etc.

Conteúdo do site = móveis e eletros.

Assim como a linguagem que utilizamos no nosso dia a dia as linguagens de programação possuem sintaxe  e regras, as do HTML podem ser encontradas aqui: http://www.w3.org/html/wg/wiki/Guide/Syntax-Semantics e http://www.w3schools.com/html/.

Não esqueça do último parágrafo. Pois assim como se você usar o inglês de forma incorreta para se comunicar com um americano o computador não vai entender se usar sua linguagem de forma incorreta.

 

PRINCIPAL

Podemos entender então que HTML + CSS serão usados em conjunto para apresentar informações para as pessoas que é sua principal função, porém de uma forma estruturada e apresentável.

 

COMO

As páginas que você vê na internet sem exceção são armazenadas em um computador(servidor) e este possui um programa para enviar os arquivos HTML para você, mais especificamente seu navegador (Chrome, Firefox ou qualquer outro).

Poderíamos deixar estas páginas em nosso computador e não pagar um servidor? Sim, porém os provedores de internet dificultam isto, e principalmente: você garante que seu computador vai ficar 24×7 ligado?

Então como faremos? Faremos assim: vamos criar as páginas HTML usando um programa chamado http://www.sublimetext.com/2, salvar nos nossos computadores e visualizar nos nossos navegadores. Se quiser colocar a página para outras pessoas verem terá que contratar um servidor como a Locaweb por exemplo.

 

PRIMEIRO SITE

A estrutura mínima para um arquivo ser considerado uma página de internet é:

1) Terminar em ‘.html’

2) Possuir a seguinda estrutura (3 seções):

<html>

<head>

</head>

<body>

</body>

</html>

 

Seções:

1) Html, é a seção principal, onde todas as outras são inseridas(terreno de uma casa);

2) Head, é a seção onde são colocas informações como: arquivos que são usados por esta página e palavras-chave (plantas do encanamento e fiação elétrica);

3) Body, é a seção onde é construída a estrutura do site (a casa em si).

 

paragrafo

Como pode ser visto você tem que dizer ao computador onde acaba e começa cada seção assim como fazemos em textos usando parágrafos e títulos porém ao invés de delimitar o final do parágrafo com um ponto usamos palavras chave como ‘input’ e ‘body’ e o final delas indicamos como ‘/input’ e ‘/body’. Os caracteres  ‘<‘ e ‘>’ são usados para indicar para o computador que a palavra que  está dentro é da linguagem HTML e assim deve ser tratada.

/paragrafo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s