Introdução básica sobre HTML
Lucas Henrique Pereira
você vai aprender
O que é o HTML
Por onde começar a aprender
Estrutura básica
Como testar o código
pré-requisitos
o que é o html
HTML (HyperText Markup Language) é uma linguagem de marcação utilizada para criar páginas Web.
Publicada pela primeira vez em 1993 pelo físico Britânico Tim Bernes-Lee e Dan Connolly, esta linguagem tem sido estudada e aperfeiçoada desde então, sendo sua mais nova versão, o HTML5 que vem sendo implementado desde 2008.
por onde começar
O HTML é uma linguagem que não exige um conhecimento em raciocínio lógico, sendo assim de simples compreensão, exigindo apenas que você tenha uma boa memória e dedicação para conhecer suas tags e suas aplicações.
Para criar páginas em HTML, não é necessário a utilização de qualquer IDE pesada, basta ter um computador e um editor de texto básico, como o próprio bloco de notas.
Um editor recomendado para o desenvolvimento em HTML é o SublimeText 3 (link para download disponível na seção de pré-requisitos). Este editor foi projetado para ser simples, rápido, flexível e fácil de usar, e apresenta uma interface bastante agradável.
estrutura básica
<!DOCTYPE html>
<html>
<head>
<title>Título do site</title>
</head>
<body>
<!-- Aqui vai o conteúdo do site -->
<p>Início do conteúdo</p>
</body>
</html>
analisando o código
Como podemos observar, o HTML possui diversas tags, sendo cada uma para cada tipo de situação. Para começar, vamos analisar as que foram digitadas no código acima.
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.
| Tag | Descrição |
|---|---|
| <!DOCTYPE html> | Doctype do documento (será explicado na próxima seção). |
| <html></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></head> | Define o cabeçalho de um documento HTML, e traz informações sobre o documento que está sendo aberto. |
| <title></title> | Define o título da página, que é exibido na barra de título dos navegadores. |
| <body></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. |
| <p></p> | Definição de parágrafo de texto. |
| <!– –> | Definição de comentários. Utilizado para deixar o código compreensível. Eles não são renderizados na tela, apenas no código fonte. |
DOCTYPE!
A tag DOCTYPE é utilizada para informar ao navegador qual o tipo de documento que você está utilizando.
Assim como o XML, existem algumas versões do HTML e algumas ramificações, 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 utilizado no modelo de código apresentado acima declara um documento do tipo HTML5.
Outras definições de DOCTYPE são:
| DOCTYPE | Versão do HTML |
|---|---|
| <!DOCTYPE html> | HTML 5 |
| <!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 |
testando o código
Para testar o código, basta salvar 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.
Comentários