HTML BÁSICO – PARTE 1 – INTRODUÇÃO

Conhecendo o HTML

Olá pessoal, boa tarde!
Nessa aula iremos falar sobre a existência do HTML e sua estrutura.
Espero que gostem!

Conheça os outros artigos

O QUE É HTML?

HTML (abreviação para a expressão inglesa “HyperText Markup Language”, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
Foi publicada pela primeira vez em 1993 pelo físico Britânico Tim Bernes-Lee e Dan Connolly, e desde então vem sendo estudada e aperfeiçoada.
Atualmente o HTML5 é a mais nova versão do HTML que está sendo estudada desde 2008.

É SÓ PARA SITES?

Não! O HTML é utilizado também para desenvolver sistemas web e é a linguagem mais utilizada para desenvolvimento qualquer tipo de aplicativo web, sendo para dispositivos mobile (Tablets, Smartphones) como para desktop.
Tudo que enxergamos na internet possui HTML, seja a visualização de uma imagem como a de um vídeo.

PRECISO REALMENTE APRENDER?

Se a sua escolha, ao ler esse artigo, é tentar compreender a grandeza dessa linguagem para realizar qualquer tipo de implementação web, então sua resposta é SIM!
Existem diversos aplicativos na internet que te auxiliam a desenvolver um website sem a menor necessidade de tocar no código, mas vai chegar um momento, durante o desenvolvimento, em que esse trabalho vai fazer a diferença e vai evitar grandes dores de cabeça, pois por mais que esses aplicativos possuam uma ótima programação, nada é perfeito quanto a mente humana e o trabalho braçal.

COMO COMEÇAR A APRENDER

O HTML é uma linguagem de programação que não exige nenhum conhecimento em raciocínio lógico, portanto é de simples compreensão e exige apenas que você tenha uma boa memória, dedicação e conheça a tecnologia e suas aplicações.
Para desenvolver em HTML não é necessário a utilização de qualquer aplicativo pesado, bastando apenas que tenhamos um computador e o “bloco de notas” instalado.
Portanto, para iniciar o aprendizado do HTML, vamos, inicialmente, abrir o “bloco de notas” do nosso computador e começar a digitar o código abaixo:

ESTRUTURA BÁSICA

 

 

ANALISANDO

LinhaCódigoExplicação
1 <!DOCTYPE html> Doctype do documento
2 <html> Abertura da tag html
3 <title>Título do site</title> Tag para inserção do título do site
4 </head> Fechamento da tag head
5 <body> Abertura da tag body
6 <!– … –> Comentário
7 </p>Texto<p> Parágrafo
8 </body> Fechamento da tag body
9 </html> Fechamento da tag html

Vocês perceberam que a maioria do código HTML é feito através de abertura e fechamento de *tags?

*Tags são estruturas de linguagem de marcação contendo instruções, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página.

TAGS

O HTML possui dezenas de tags como essas que vocês observaram. Existe uma tag para cada tipo de situação, mas para começar, vamos analisar as que foram digitadas no código acima.

DOCTYPE!

O Doctype é utilizado para informar ao navegador qual o tipo de documento que você está utilizando.
Como vocês já devem saber, existem algumas versões do HTML e algumas ramificações, como é o caso do XML, portanto precisamos identificar o código para que o navegador saiba o que realmente está escrito no documento e possa interpreta-lo da forma correta.
O DOCTYPE que utilizamos no modelo de código acima, é utilizado para o HTML5, existem outras versões desse código:

ESTÁ GOSTANDO DESTE ARTIGO?

Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

 

DoctypeVersão
<!DOCTYPE html> HTML5
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> HTML 4.01 Frameset

Cada tipo de Doctype possui uma característica, mas atualmente com a ultima versão do HTML, o HTML5, utilizamos somente o modelo mais simples, o que ajudou muitos programadores.

<HTML>, <HEAD> E <TITLE>

<html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
<head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
<title>: define o título da página, que é exibido na barra de título dos navegadores

<BODY>, COMENTÁRIOS E <P>

<body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações.
<!– –>: os comentários são utilizados para deixar o código compreensível. Eles não aparecem na tela, somente nó código fonte.
<p>: definição de parágrafo de texto.

TESTANDO O CÓDIGO

Para podermos testar o código é necessário que salvemos o documento com a extensão “.html”.
Geralmente utilizamos a nomenclatura “index.html” para dizer aos navegadores que aquele documento pertence a página principal do site, portanto, salve o documento como: index.html.
Após salvar, clique duas vezes sobre o ícone do documento e espere ele abrir em seu browser principal.

Caso você tenha feito tudo certo, deverá aparecer o texto “Início do conteúdo” no topo da página.

FINALIZANDO

Essa primeira aula é somente uma introdução bem básica sobre o que é HTML.
Nas próximas aulas nós começaremos a ver códigos mais complexos e iremos estudar diversas novas Tags que o html nos proporciona.

Espero que vocês tenham gostado. Em caso de dúvidas não deixem de perguntar e caso tenham gostado da aula deixem seus comentários para ajudar a TWD a continuar com o trabalho de transmitir conhecimento.

Muito obrigado e até a próxima.

BIBLIOGRAFIA

http://pt.wikipedia.org/wiki/HTML
http://www.w3schools.com/tags/tag_doctype.asp

Envie um Comentário

Comentários

Seja o primeiro a comentar

Artigos Relacionados