Advertisements

Um ficheiro HTML é simplesmente um ficheiro de texto guardado com uma extensão .html ou .htm.

Get Started

Neste tutorial aprenderá como é fácil criar um documento HTML ou uma página web. Para começar a codificar HTML só precisa de duas coisas: um editor de texto simples e um navegador web.

Bem, vamos começar a criar a sua primeira página HTML.

Criar o seu primeiro documento HTML

P>Vamos percorrer os seguintes passos. No final deste tutorial, terá feito um ficheiro HTML que exibe a mensagem “Hello world” no seu navegador web.

Passo 1: Criar o ficheiro HTML

Abra o editor de texto simples do seu computador e cria um novo ficheiro.

Tip: Sugerimos que use o Bloco de Notas (no Windows), TextEdit (no Mac) ou algum outro editor de texto simples para o fazer; não use o Word ou WordPad! Quando compreender os princípios básicos, poderá mudar para ferramentas mais avançadas como o Adobe Dreamweaver.

Passo 2: Digite algum código HTML

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

Exemplo

Experimente este código ”

<!DOCTYPE html><html lang="en"><head> <title>A simple HTML document</title></head><body> <p>Hello World!<p></body></html>

Passo 3: Guardar o ficheiro

Guardar agora o ficheiro no seu ambiente de trabalho como “minha primeira página”.html “.

Nota: É importante que a extensão .html seja especificada – alguns editores de texto, tais como o Bloco de Notas, guardá-lo-ão automaticamente como .txt caso contrário.

Para abrir o ficheiro num browser. Navegue até ao seu ficheiro e depois faça duplo clique sobre ele. Abrirá no seu navegador de Internet padrão. Se não o fizer, abra o seu navegador e arraste o ficheiro para ele.

Explicação do código

P>Pode pensar no que se tratava esse código. Bem, vamos descobrir.

  • A primeira linha <!DOCTYPE html> é a declaração do tipo de documento. Instrui o web browser que este documento é um documento HTML5. É insensível a maiúsculas e minúsculas.
  • O elemento <head> é um recipiente para as etiquetas que fornece informações sobre o documento, por exemplo, <title> a etiqueta define o título do documento.
  • O elemento <body> contém o conteúdo real do documento (parágrafos, links, imagens, tabelas, etc.) que é apresentado no navegador web e mostrado ao utilizador.

Você aprenderá sobre os diferentes elementos HTML em detalhe nos próximos capítulos. Por agora, concentre-se apenas na estrutura básica do documento HTML.

Nota: Uma declaração DOCTYPE aparece no topo de uma página web antes de todos os outros elementos; contudo, a declaração doctype em si não é uma tag HTML. Cada documento HTML requer uma declaração de tipo de documento para assegurar que as suas páginas são exibidas correctamente.

Tip: As etiquetas <html><head>, e <body> compõem o esqueleto básico de cada página web. O conteúdo dentro do <head> e </head> são invisíveis aos utilizadores com uma excepção: o texto entre <title> e </title> tags que aparecem como título num separador do navegador.

HTML Tags e Elementos

HTML é escrito sob a forma de elementos HTML que consistem em markup tags. Estas etiquetas de marcação são a característica fundamental do HTML. Cada markup tag é composta por uma palavra-chave, rodeada por parênteses angulares, tais como <html><head><body><title><p>, e assim por diante.

as etiquetas HTML vêm normalmente em pares como <html> e </html>. A primeira tag de um par é frequentemente chamada tag de abertura (ou tag de início), e a segunda tag é chamada tag de fecho (ou tag de fim).

Uma tag de abertura e uma tag de fecho são idênticas, excepto uma barra (/) após o ângulo de abertura da tag de fecho, para dizer ao navegador que o comando foi completado.

Entre as tags de início e fim pode colocar o conteúdo apropriado. Por exemplo, um parágrafo, que é representado pelo elemento p, seria escrito como:

Exemplo

Experimente este código ”

<p>This is a paragraph.</p><!-- Paragraph with nested element --><p> This is <b>another</b> paragraph.</p>

Você aprenderá sobre os vários elementos HTML no próximo capítulo.

Advertisements

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *