Introdução HTML: Criando sua primeira página - Programadores Deprê

Conteúdo

HTML significa Hypertext Markup Language, traduzindo, fica “Linguagem de Marcação de Hipertexto”. HTML é o bloco de construção básico da World Wide Web (www).

Hipertexto é um texto exibido em um computador ou outro dispositivo eletrônico que faz referência a outro texto que o usuário pode acessar imediatamente, geralmente por meio de cliques do mouse ou teclas.

Além do texto, o hipertexto pode conter tabelas, listas, formulários, imagens e outros elementos de apresentação. É um formato fácil de usar e flexível para compartilhar informações na Internet.

As linguagens de marcação representam elementos de texto em um documento usando um conjunto de tags de marcação que fornecem instruções aos navegadores da Web sobre como o documento deve ser exibido.

O HTML foi desenvolvido pela primeira vez por Tim Berners-Lee em 1990. Ele também é conhecido como o pai da web. Em 1996, o World Wide Web Consortium (W3C) tornou-se o órgão que mantém as especificações HTML. HTML também se tornou um padrão internacional (ISO) em 2000. HTML5 é a versão mais recente do HTML. HTML5 oferece uma abordagem mais rápida e robusta para o desenvolvimento web.

O que você pode fazer com HTML

Você pode fazer muito mais com HTML.

Você pode publicar documentos online com texto, imagens, listas, tabelas e muito mais.
Você pode criar links para recursos da Web, como imagens, vídeos ou outros documentos HTML.
Você pode criar formulários para coletar entradas do usuário, como nomes, endereços de e-mail, comentários e muito mais.
Você pode incluir imagens, vídeos, clipes de som, filmes em flash, aplicativos e outros documentos HTML diretamente em documentos HTML.
Você pode criar versões offline de sites que funcionam sem a internet.
Você pode armazenar dados no navegador da Web do usuário e acessá-los posteriormente.
Você pode encontrar a localização atual dos visitantes do site.

Nota: Como mencionado anteriormente, HTML é uma linguagem de marcação, não uma linguagem de programação como Java, Ruby, PHP, etc. Você precisa de um navegador da Web para visualizar as páginas HTML. Os navegadores da Web não exibem tags HTML, mas usam tags para interpretar o conteúdo das páginas da Web.

Crie seu primeiro documento HTML

Vamos seguir as etapas a seguir. Ao final deste tutorial, você terá feito um arquivo HTML que exibe a mensagem “Olá mundo” em um navegador da web.

Etapa 1: criar um arquivo HTML

Abra o editor de texto simples do seu computador e crie um novo arquivo.

Dica: Recomendamos que você use o Bloco de Notas, Notepad++, Visual Studio Code ou Sublime Text (no Windows), o TextEdit (no Mac) ou algum outro editor de texto simples para fazer isso;

Etapa 2: digite o código HTML

Comece com uma janela vazia e digite o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  	<meta charset="UTF-8">
    <title>Um documento HTML simples</title>
</head>
<body>
    <p>Olá mundo!<p>
</body>
</html>

Passo 3: Salve o arquivo

Agora salve o arquivo em sua área de trabalho como “index.html”.

Nota: Especificar a extensão .html é importante – alguns editores de texto (por exemplo, o Bloco de Notas) irão salvá-la automaticamente como .txt, caso contrário.

Abra o arquivo em um navegador. Navegue até o arquivo e clique duas vezes nele. Ele será aberto no seu navegador padrão. Caso contrário, abra um navegador e arraste o arquivo para ele.

Explicação do código

Você deve estar se perguntando o que é esse código. Bem, vamos descobrir.

A primeira linha <!DOCTYPE html> é a declaração do tipo de documento. Ele informa ao navegador da Web que o documento é um documento HTML5. Não é sensível a maiúsculas e minúsculas.
O elemento <head> é um container para tags que fornecem informações sobre o documento, por exemplo, a tag <title> define o título do documento.
A meta tag <meta charset="UTF-8"> permite que você trabalhe com caracteres especiais como acento etc.
O elemento <body> contém o conteúdo real do documento (parágrafos, links, imagens, tabelas, etc.) que é renderizado em um navegador da Web e exibido ao usuário.

Nota: A declaração DOCTYPE aparece antes de todos os outros elementos na parte superior da página; no entanto, a declaração de doctype em si não é marcação HTML. Todo documento HTML requer uma declaração de doctype para garantir que suas páginas sejam exibidas corretamente.

Dica: As tags <html>, <head> e <body> formam o esqueleto básico de cada página da web. O conteúdo em <head> e </head> é invisível para o usuário, com uma exceção: o texto entre as tags <title> e </title> é exibido como título na guia do navegador.

Tags e elementos HTML

HTML é escrito como elementos HTML que contêm tags de marcação. Essas tags de marcação são um recurso essencial do HTML. Cada tag de marcação consiste em uma palavra-chave, entre colchetes angulares, como <html>, <head>, <body>, <title>, <p>, etc.

As tags HTML geralmente aparecem em pares, como <html> e </html>. A primeira tag em um par é geralmente chamada de tag inicial (ou tag inicial) e a segunda tag é chamada de tag final (ou tag final).

Uma tag de abertura e uma tag de fechamento são idênticas, exceto por uma barra (/) após o colchete angular de abertura da tag de fechamento para informar ao navegador que o comando foi concluído.

Entre as tags de abertura e fechamento, o conteúdo apropriado pode ser colocado. Por exemplo, um parágrafo representado por uma capa pode ser escrito como:

<p>Este é um parágrafo.</p>
<!-- Parágrafo com elemento aninhado -->
<p>
   Este é <b>outro</b> parágrafo.
</p>