HTML

O que é HTML?

A sigla HTML é um acrônimo em inglês para Hyper Text Markup Language (Linguagem de Marcação de Hipertexto) e é uma linguagem de programação para criação de web sites.

Definição

HyperText é um método pelo qual move-se pela web. Clicando em um texto especial chamado de hyperlink no qual te leva para outras páginas. O fato é que hyper apenas significa que não é linear, você pode ir para qualquer lugar na internet quando quiser através de cliques nos links, não há uma ordem correta para navegar.

Markup é o que as Tags HTML fazem para o texto dentro delas. Elas marcam o determinado tipo de texto que esta dentro delas.

História

Em 1980, Tim Berners-Lee propôs um protótipo para ENQUIRE, um sistema para pesquisadores usar e compartilhar documentos. Em 1989, Berbers-Lee escreveu um memorando propondo um sistema de internet baseado em hipertexto. A primeira descrição do HTML pública foi um documento chamado “HTML Tags”, mencionado na internet por Tim Berners-Lee em meados de 1991. Composta inicialmente por 18 elementos, era relativamente simples o design.

Como funciona ?

HTML consiste em uma série de pequenos códigos que fazem a marcação de início e fim dos textos, denominados de Tags. O arquivo texto é salvo como .html e pode ser aberto em qualquer navegador. O navegador lê o arquivo e traduz as marcações, mostrando o conteúdo dentro do navegador.

TAG’s

As Tags são delimitações que indicarão ao navegador onde inicia e onde termina as orientações, por exemplo:

  • Tag para parágrafo:

<p> → Início de um parágrafo;
</p> → Fim de um parágrafo;

Se desejamos colocar um texto dentro de um parágrafo, utilizamos esta Tag:

<p> Todo conteúdo do parágrafo deve estar dentro desta Tag.</p>

Quando iniciamos e fechamos esta Tag, o navegador saberá que todo este conteúdo dentro desta Tag será um parágrafo.

  • Tag para Negrito

<b> → Início do texto em negrito;
</b> → Fim do texto em negrito;

<b>Este texto deve estar em negrito.</b>

  • Tag para itálico

<i> → Início do texto em Itálico;
</i> → Fim do texto em Itálico;

<i>Este texto deve estar em Itálico.</i>

Fácil né?

 

Se quisermos fazer um parágrafo com todas as Tags também podemos:

<p>Este parágrafo contem texto em <b>Negrito</b> e <i>Itálico</i></p>

O exemplo do código que criamos acima interpretado é pelo navegador nesta imagem:

TAG HTML

TAG HTML

TAG’s mais comuns

<!DOCTYPE html> início do documento HTML;
<head> cabeçalho do site;
<title> título do site (Somente para o navegador);
<body> corpo do site;
<h1> título do texto dentro do site;
<p> parágrafo;
<b> negrito;
<i> itálico;k
<div> divisória.

Estrutura da página

Agora que já conhece as Tags, podemos falar sobre a estrutura de um site. Podemos pensar na estrutura como se fosse o corpo humano, onde temos a cabeça, corpo e pés. O conteúdo que esta no corpo todos esta delimitado pela TAG <html></html>, o que esta na cabeça, esta delimitado pela TAG <head></head>, tudo que esta entre a TAG Head, somente será lida pelo navegador, o conteudo que esta dentro do corpo, estará delimitado pela TAG <body></body> e conseguentemente os pés <footer></footer>, ficaria assim todo o conteúdo:

Comparação com o Corpo Humano:

Corpo Humano Cabeça Corpo Pés A diferença é que na linguagem de programação temos que definir onde é o fim de cada parte do copor, onde inicia a cabeça e onde termina a cabeça, onde inicia o corpo e onde termina o corpo, onde inicia os pés e onde termina os pés, assim como no exemplo:

<html> → Marca o Início do documento em html (Corpo Humano)
<head> → Marca o Início do Cabeçalho (Cabeça)
</head> → Marca o fim do cabeçalho (Fim da Cabeça)
<body> → Início de todo o conteúdo dentro de um site (Corpo)
</body> → Fim do conteúdo de um site (Fim do Corpo)
<footer> → Início do rodapé (Pés)
</footer> → Fim do rodapé (Fim dos pés)
</html> → Fim do documento html

Esta é a estrutura mais simples do HTML, com essas TAG, você já tem o conteúdo em HTML de um site, normalmente os conteúdos ficam dentro do <body> e do <footer>, o que encontra dentro da TAG <head> é somente para o navegador interpretar e não será mostrado na página da web. O que eu preciso para criar uma página em HTML? Para criar uma página da web, você só precisará de um editor de texto, pode ser o Notepad (windows), O gEdit (Linux) ou qualquer editor de texto. Basta criar as TAG’s dentro dele e ao invés de salvar como .txt, salvar como .html e já esta pronto a sua página: Exemplo:

<!DOCTYPE html>
<head>
<title>Nossa primeira página em HTML.</title>
</head>
<body>
<p>Primeiro parágrafo em HTML.</p>
</body>
<footer>
<p>Primeiro parágrafo dentro do rodapé em HTML.</p>
</footer>
</html>

Basta copiar este conteúdo dentro do editor de texto e salvar como  .html e abrir com o navegador, a imagem a baixo mostra o código dentro do editor de texto.

HTML no editor de texto.

HTML no editor de texto.

Veja na imagem abaixo como ficou nossa primeira página em HTML:

Página Simples HTML

Página Simples HTML

Página Simples

Você deve ter falado: Essa página é tão simples, não tem nada de bonito, e normalmente não é uma página dessa que eu vejo nos sites por aí, as páginas hoje em dia são bem bonitas.
Já respondendo a seu questionamento, todas as páginas contem esta mesma estrutura de HTML que você viu neste post, só que para criar um design moderno e atual, temos que aplicar um estilo nesta página, é aí que entra o CSS, é ele quem vai deixar sua página com uma cara bem bonita, mas este é um próximo tópico. Farei um post igual a este com o CSS, explicando o básico do CSS e como integrar ele a uma página.

Não perca essa dica

Para você que gostou do conteúdo sobre HTML e gostaria de desenvolver sites e até mesmo ganhar dinheiro com criação de sites, eu tenho um curso para te indicar, este curso que vou indicar não é criado por mim, infelizmente quando comecei a programar, não existia esse rico conteúdo na internet, mas quando eu conheci o conteúdo completo que ele tem, não hesitei em logo indicar ele para as pessoas, o link do curso esta aqui em baixo clique no link abaixo, conheça todo o conteúdo e comece desde já.

Link do curso de HTML5 e CSS Samurai ⇒ http://bit.ly/Curso-HTML-5-Samurai