O HTML5 e suas Mudanças

  Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a sepa­ração da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à atenção dos fabricantes e desenvolvedores.

   Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. O HTML4 tam­bém não facilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um sistema com a possibilidade de Drag’n Drop (arrastar e largar) de elementos, era necessário criar um grande script, com bugs e que muitas vezes não funcionavam de acordo em todos os browsers.

O que é o HTML5?

  O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.

   Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.

  Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível. O HTML5 permite por meio de suas APIs a manipulação das características destes elementos, de forma que o website ou a aplicação continue leve e funcional.

  O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML não continham um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs, Classes ou tags. Não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos websites.

  Há outros elementos e atributos que sua função e significado foram modificados e que agora podem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram descontinuados em versões anteriores do HTML agora assumem funções diferentes e entregam mais significado para os usuários.

  O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas.
  O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização das novas características imediatamente.

Fonte:

  W3C Brasil

Adicionando Elementos Gráficos e Links no HTML

Tipos de Imagens

  Agora você aprenderá os tipos de imagens que você pode inserir em uma página Web e também como inserir imagens em uma página. 

  Você usa imagens para melhorar a comunicação dos conceitos explicados em uma página Web. Imagens melhoram a aparência da página e destacam as ideias apresentadas no documento.

Adicionando Imagens

  Você utiliza imagens para incluir títulos e logos em uma página. Você pode usar também como links para outras páginas Web. 

  Quando adicionamos uma imagem a uma página Web, é preciso manter em mente o tamanho, formato e posição desta imagem na página.

Criando Imagens

  Quando criamos uma imagem para uma página Web, é preciso observar o tamanho do arquivo, para que pessoas com todos os tipos de conexões possam ter acesso. Lembre-se: quanto menor a velocidade de conexão do usuário, mais tempo ele irá demorar para carregar a imagem.

  Você pode arrumar as imagens de várias maneiras e posições em sua página. Entretanto, o posicionamento de diversas imagens na mesma página deverá ser consistente.

Alinhando uma imagem

  Você pode alinhar uma imagem em uma página Web com:

• Outros elementos usados na página, como o texto ou outras imagens;
• Borda da janela do browser. 

  O formato que você usa para uma imagem determina sua aparência. As primeiras imagens da Web eram formatadas utilizando entre 16 e 256 cores, já que este era o limite máximo de exibição dos monitores. Além disso, o uso de um número grande de cores numa imagem elevava muito o tamanho do arquivo. Atualmente não existe uma preocupação muito grande com a quantidade de cores, mas sim com o tamanho do arquivo.

Formatos de Imagem

  A World Wide Web suporta quase todos os tipos de arquivos de imagens. Entretanto, somente um número limitado de formatos é utilizado. Abaixo você pode verificar os três mais utilizados.

  GIF - Graphics Interchange Format foi introduzido pela CompuServe em 1987 e desde então foi amplamente utilizado na Web. Seu formato suporta oito bits por pixel, permitindo o uso de uma paleta de até 256 cores. Utiliza o tipo de compressão LZW e é mais indicado para gráficos, ícones e imagens que não necessitam muitas cores. Permite imagens com fundo transparente.

  JPEG ou JPG - Joint Photographic Experts Group é o método mais utilizado para comprimir imagens fotográficas. Foi introduzido em 1983 e suporta até 16,8 milhões de cores. Não permite imagens com fundos transparentes.

  PNG - Portable Networks Graphics é o substituto do formato GIF. No início de 1995 o padrão de compressão LZW foi patenteado pela empresa Unisys, que anunciou cobrança de royalties para o uso deste tipo de arquivo. Esta informação, aliada à crescente capacidade de exibição de cores dos computadores, levou à criação do PNG, que assim como JPG, permite exibição de até 16,8 milhões de cores e, como o GIF, fundos transparentes.

Utilizando a Tag Image

A sintaxe da tag Image (imagem) é exibida na imagem.

• URL = Nome / endereço do arquivo que contém a imagem a ser inserida.
• img = Tag utilizada para inserir uma imagem na página web.
• src = Atributo usado para especificar o arquivo da imagem a ser inserida.

Usando ALT e ALIGN

  Além do atributo SRC, você pode especificar outros atributos com a tag Image (imagem). Os atributos que você pode usar são ALT e ALIGN.

  Em caso do browser não conseguir exibir a imagem por alguma razão, foi inventado o atributo ALT, que nada mais é que um texto alternativo à imagem. Este atributo é também considerado de acessibilidade, já que é valioso para deficientes visuais: programas para estas pessoas leem as imagens e o ALT pode fornecer um contexto para a imagem. Quando o usuário coloca o mouse sobre a imagem o texto alternativo também é exibido, como demonstra a imagem. Já o Align serve simplesmente para alinhar a imagem na tela do browser.

Especificando o Alinhamento da imagem

  O atributo ALIGN é utilizado para especificar o alinhamento da imagem em relação ao texto na página Web. Você pode alinhar o texto no topo, no centro ou no rodapé da imagem. Para alinhar um texto no topo da imagem, use o valor TOP, para o centro, MIDDLE e para o rodapé, BOTTOM. Além disso, a imagem pode ser alinhada à esquerda - LEFT - e à direita - RIGHT.

O valor padrão que o browser usa para o align é BOTTOM (rodapé).

Criando Links

  Você irá aprender a interligar (ou linkar) páginas Web. Links são conexões pelas quais você conecta páginas que podem ser do mesmo website, externas, de qualquer outro site, ou ainda conectar páginas a outros documentos. 

  Os links podem ser criados no texto e também em outros elementos do website, como em imagens ou itens de um menu.

Usando a Tag Anchor

  A tag Anchor <a> </a> (âncora) é utilizada para criar links no hipertexto. A sintaxe desta tag é exibida na imagem abaixo.

• <a = Abertura da tag Anchor.
• href = Atributo usado para especificar a URL do documento linkado ou interligado.
• URL = Endereço da página ou documento a ser linkado.
• </a> = finalização da tag Anchor.

Criando Links em texto

  Na imagem você pode verificar um exemplo de documento HTML com o código para a criação de um link no texto "Site de Buscas", direcionando para o Google, que é Atualmente o maior site deste tipo de serviço.

  O browser exibe o hiperlink em um formato diferente do texto normal, normalmente sublinhado e na cor azul, como na imagem. Ao especificar uma URL apropriada para um serviço de Internet, você também pode linkar ou interligar sua página Web a esse serviço. Por exemplo, você pode criar um link entre sua página e o seu e-mail.

  Selecionando o hiperlink, o browser ativa o programa de e-mail que irá permitir a você enviar uma mensagem eletrônica ao endereço especificado.

Criando Links para uma seção na mesma página

  Você aprendeu a criar links entre páginas Web. Agora, você irá aprender a criar links entre diferentes seções de uma mesma página. Caso você possua uma página com um texto muito extenso, é possível fazer links para dentro do próprio texto ou ainda diferentes seções da mesma página.

  Utilizamos a tag Anchor (âncora) para criar links de seção. Especificamos a URL do documento que desejamos interligar com o nome da seção e com o símbolo # antes do nome. A sintaxe para criar um link de seção é exibida na imagem.

  Utiliza-se o atributo NAME para definir as seções que foram interligadas ao hipertexto. Observe a sintaxe para a definição da seção.  

O browser exibe o link e, quando selecionado, exibirá a seção que começa com o nome especificado.

Criando Links em Imagens

  Aprendemos a criar links entre duas páginas Web e entre duas seções de uma mesma página. Agora aprenderemos a criar links entre imagens e outros elementos, que podem ser outras imagens, documentos ou páginas Web.

  Usamos a combinação da tag Anchor (âncora) e da tag Image (imagem) para criar um link numa imagem.

  Observe a sintaxe para este tipo de operação:

• <a href=”url”</a> = Tags Anchor, para criação de links
• <img src=”url” </img> = Tag completa de introdução de imagem na página.

  Observamos então que para inserir um link numa imagem usamos dois conceitos aprendidos anteriormente: inserção de links e inserção de imagens. 

Fonte:

  Escola Virtual - Fundação Bradesco

Formatando um documento HTML

Formatando uma página Web

  Agora, você irá aprender a formatar uma página Web usando tags. Primeiro você irá aprender a formatar uma página Web exibindo:

• Texto em negrito.
• Texto em itálico.
• Texto sublinhado.

Exibindo um texto em negrito

  Você usa a tag Bold (negrito) <b> </b> para exibir um texto em negrito em uma página Web. A sintaxe é exibida na imagem.

Exibindo um texto em itálico

  Outra opção é a tag Italic (itálico) <i> </i>, para exibir um texto em itálico numa página Web. Observe a imagem.

Exibindo um texto sublinhado (underline)

Usa-se a tag Underline (Sublinhado) <u> </u> para exibir um texto sublinhado em uma página Web. A sintaxe é exibida na imagem ao lado.

  Um browser interpreta as tags Bold (negrito), Italics (itálico) e Underline (Sublinhado) no documento HTML e exibe o texto entre estas tags na página Web correspondente.

Utilizando a tag parágrafo

  Você pode usar parágrafos para agrupar linhas de texto em uma página Web. O browser irá exibir o texto em um único parágrafo se você não criar outros.

Inserindo quebras de linhas em uma página Web

  Por padrão, os browsers automaticamente encaixam o texto de uma página Web na janela do browser.

  Se você precisar exibir uma parte do texto em uma nova linha, você pode inserir uma quebra de linha utilizando a tag Break, como mostra a imagem. 
  O browser exibe a parte do texto escrito depois da tag Break <br>, em uma nova linha.

  No caso da tag Paragraph (Parágrafo) <p></p>, o browser também insere uma linha em branco antes de começar o novo parágrafo.Inserindo linhas horizontais em uma página Web.

Inserindo linhas horizontais em uma página Web 

  Você irá aprender agora a inserir linhas horizontais em uma página Web. Você usa estas linhas horizontais para dividir a informação exibida em diferentes blocos. Você usa uma linha horizontal usando a tag Horizontal Ruling <hr>. Observe um exemplo na imagem: uma imagem destaca a tag e a outra o resultado de sua aplicação.

  O browser exibe uma linha horizontal na página Web no ponto que você especificou a tag Horizontal Ruling. Ele também exibe uma linha em branco antes da linha horizontal.

Criando subtítulos

   Agora vamos observar como adicionar títulos, subtítulos e comentários em uma página Web. Com o uso da tag Heading <hX> </hX> você pode incluir títulos e subtítulos em diferentes blocos de texto numa página, a fim de aumentar a legibilidade. Por exemplo, se você precisar fornecer dois níveis de títulos em uma página, você pode usar o conjunto de tags <h1> </h1> e <h2> </h2>.

  Pode-se utilizar as tags <h1> </h1> para especificar o título principal e as tags <h2>,</h2>para o subtítulo secundário.

Adicionando comentários

  Você pode adicionar comentários para incluir notas, sugestões e explicações que não fazem parte do documento. Você usa a tag Comment (comentário) <!-- xxxxxx --> para adicionar comentários a um documento HTML.

  Web browsers ignoram texto, tags e outros objetos que estão entre a tag de inicio e de fim da tag Comment (comentário).

  Normalmente você usa a tag Comment (comentário) para fornecer informações sobre o autor do documento ou para adicionar uma mensagem de copyright.

Usando Tag pré-formatada

  Você aprenderá agora a usar a tag Pre-formatted. Por padrão, os browsers não exibem os espaços extras e linhas em branco de um documento HTML na página Web correspondente.

  Podemos exibir espaços múltiplos e linhas em branco em uma página usando a tag Pre-formatted (Pré-formatado). A sintaxe é exibida na imagem. 

  O browser exibe na janela, o bloco de texto entre a tag de inicio e fim da tag Pre-formatted como está escrito no documento HTML correspondente. Vale lembrar que podemos utilizar a tag <br> para adicionar linhas em branco à uma página.

Tipos de listas

  Agora você aprenderá sobre os tipos de listas do HTML e também a criar diferentes tipos de listas em uma página Web.

  Uma lista é uma coleção de itens relacionados. Você usa uma lista para organizar dados como uma sequência de passos ou itens em um grupo.

  O HTML fornece quatro tipos:

• Numeradas
• Não Numeradas
• Definição
• Intercaladas

Funções das listas

  Uma lista numerada é usada para exibir um conjunto de itens depois de um número ou uma letra

  Uma lista numerada é também chamada de lista ordenada.

  Uma lista não numerada é usada para exibir um conjunto de itens depois de uma marcação.

  Uma lista não numerada é chamada também de lista de marcação, ou ainda não-ordenada.

  Você usa uma lista de definições para exibir um conjunto de itens e suas descrições.

  Uma lista intercalada é uma combinação de duas ou mais listas. Você intercala a estrutura de uma lista com outra.

  As listas intercaladas são muito pouco utilizadas hoje, por isso não entraremos em detalhes sobre seu uso e sua sintaxe.

Criando listas ordenadas

  Agora você irá aprender a criar uma lista ordenada. Para lembrar: uma lista ordenada é aquela que cada item é exibido depois de um número ou letra, numa sequência lógica. Sua sintaxe é exibida na imagem. 

 Pode-se usar também outras tags de formatação, como a tag Font (fonte) e as tags Bold, Italic e Underline, entre outras. Para isso, elas devem ser colocadas entre a tag de inicio e de fim da tag da lista numerada <ol> </ol>.

Criando listas não numeradas

  Você aprendeu a criar uma lista numerada. Agora você irá aprender a criar uma lista não ordenada, na qual cada item é exibido depois de uma marcação.

  A lista não numerada é utilizada quando não há uma relação ou estrutura especifica entre os itens da lista. Sua sintaxe <ul></ul> é exibida na imagem acima. Este tipo de lista também pode ser chamada de não-ordenada.

O que significa lista intercalada?

  Até agora foi demonstrado como criar listas numeradas (ordenadas) e não numeradas (não-ordenadas). Também é possível criar combinações destas listas em uma página Web.  A combinação de uma ou mais listas é chamada de lista intercalada, na qual estão alternadas a definição de uma lista com a definição da outra. 

Fonte:

  Escola Virtual - Fundação Bradesco

Criando Páginas na Web

  Bem-vindos ao blog CriArte, Gostaria de passar tais conhecimentos aos interessados em Desenvolvimento Web.

  Começaremos com a criação de páginas Web, utilizando a linguagem de marcação HTML. 
   Você irá se familiarizar com os termos técnicos chaves relacionados a Internet e a Web.

  A Internet é uma rede de computadores ao redor do mundo, onde cada computador pode se comunicar com outro. Na Internet, você pode interagir com pessoas de todo o mundo. Por outro lado, usando a Intranet, você pode interagir somente com pessoas de uma mesma organização.

  A World Wide Web (WWW), conhecida como Web, é um sistema de informação que une dados de vários serviços de internet. Enquanto a internet refere-se aos componentes físicos da rede global, a Web refere-se ao corpo da informação compartilhada usando esta rede.

O que é linguagem de marcação?

  Páginas Web são os conteúdos que você vê nos sites. Estas páginas são armazenadas como arquivos com extensão htm ou html.

   Uma linguagem de marcação é a linguagem usada para formatar páginas Web com texto e informações separadamente. Isto assegura que as páginas Web serão acessíveis de qualquer parte do mundo usando qualquer tipo de browser.

O que é HTML?

  Hypertext Markup Language (HTML) é uma linguagem de formatação usada para criar páginas Web.

Um documento HTML contém:

• O texto a ser exibido.
• A informação sobre como o texto deve ser formatado.
• A informação sobre como o texto deve ser estruturado.

  Hipertexto é um tipo de texto, digital, que permite a leitura não linear, através de links. Quando você clica num link, é redirecionado à página correspondente. 

  Browsers são programas que você usa para acessar, visualizar e interagir com páginas Web. A Web permite que browsers de diferentes plataformas interpretem, formatem e exibam páginas Web.

  Exemplos de browsers são: Internet Explorer, Firefox, Chrome, Opera e Safari.

 Servidores Web são computadores robustos, com programas que processam pedidos recebidos dos browsers. Estes servidores armazenam os websites, que são uma coleção de páginas Web relacionadas entre si.

O que é uma home page?

  A home page é a primeira página de um site, ou a página de entrada. Por exemplo, quando você conecta ao site da Microsoft em www.microsoft.com, você pode não ser capaz de especificar um nome de arquivo. Nestes casos, o servidor Web exibirá um arquivo padrão. Este arquivo é a home page.

  Uma homepage é normalmente chamada de index.htm ou de default.htm (os arquivos também podem possuir a extensão .html como padrão).

HTTP, FTP e TCP

  Protocolos são um conjunto de regras para a comunicação em uma rede. Eles determinam como computadores em uma rede se comunicam, como começar, como manter e como terminar a comunicação.

• Hyper Text Transfer Protocol (HTTP) é o protocolo usado pelos servidores Web para transmitir documentos HTML pela Internet.
• File Transfer Protocol (FTP) é outro protocolo muito utilizado para transmitir arquivos entre computadores na Web, porém sua interface gráfica não é tão agradável como o HTTP.
• Transfer Control Protocol (TCP) é um conjunto de protocolos usado para a transmissão de informação pela Web, e possui a função de verificar se os dados são transferidos de forma correta, na sequência apropriada e sem erros.
• IP significa Internet Protocol, e é um protocolo de endereçamento, ou seja, ele fornece o endereço dos computadores na rede.

O que é URL?         

  Universal Resource Locator (URL) é o sistema de endereçamento usado pelos browsers para localizar redes, computadores e arquivos na Internet. Um URL especifica: 

• Protocolo a ser usado para acessar o arquivo. 
• Endereço do servidor.
• Nome do arquivo no servidor.

O que significa HTML?

  Agora você irá aprender a usar o HTML, suas características, benefícios e funções. HTML significa Hypertext Markup Language. Uma linguagem de marcação é uma linguagem que você usa para formatar informações como uma entidade separada em um documento.

  Você usa HTML para criar páginas Web. HTML é baseado no Standard Generalized Markup Language (SGML). O SGML foi o primeiro padrão internacional para a troca de documento usando qualquer meio eletrônico. As características principais do HTML são:

• HTML é uma linguagem de formatação.
• Documentos HTML contêm textos ASCII como seu elemento básico.

Quais as vantagens do uso do HTML?

  Vamos aprender agora as vantagens do uso do HTML. Com o HTML você pode:

• Criar facilmente documentos Web.
• Assegurar a acessibilidade das suas páginas Web por um grande número de plataformas e Web browsers.
• Transmitir facilmente documentos pela Internet.

Como criar um documento HTML?

  HTML utiliza um formato simples que pode ser gerado sem a ajuda de aplicações especiais. Para criar um documento HTML, tudo o que precisa é de um editor de texto ASCII. Se você precisar verificar o formato do documento durante a criação, você pode usar qualquer browser.

  O HTML foi a primeira linguagem de marcação que pôde atender um grande número de plataformas de computadores e browsers. Além disso, com o HTML pode-se assegurar que seu documento será lido por um grande número de pessoas. Isto acontece por que todos os browsers são capazes de interpretar o código.

  Este tipo de linguagem é adequada para a transmissão de documentos pela Internet para vários tipos de computadores, usuários e browsers. Você pode transmitir rapidamente páginas Web criadas usando o HTML.

  ASCII - American Standard Code for Information Interchange (Código Padrão Americano para o Intercâmbio de Informação) é uma codificação de caracteres em oito bits, baseada no alfabeto norte-americano. Todos os caracteres são convertidos em bits utilizando esta tabela.

Qual é o papel do HTML?

  Você aprendeu as características e benefícios do HTML. Agora, você irá aprender a função do HTML na World Wide Web. Existem várias linguagens de marcação disponíveis que você pode usar para formatar suas páginas Web. Linguagens como Virtual Reality Modeling Language (VRML) e SGML possuem varias características adicionais, como a renderização multidimensional de documentos e objetos complexos. Entretanto, o HTML continua sendo a linguagem de marcação mais popular devido ao seu formato simples e amigável. Com o HTML, você pode criar, facilmente e rapidamente, documentos para a Web.

Criando Front-End

  O HTML também tem uma função importante em aplicações Web, que são programas que você incorpora em Web sites para gerenciar tarefas adicionais como o gerenciamento de pedidos de usuários. Aplicações Web aumentam a interação do usuário na Web.

  Quando você entra com alguma informação em uma página Web, o browser envia essa informação para um conjunto especial de programas chamados Common Gateway Interface (CGI) scripts. Estes CGI scripts processam a informação e exibem o resultado no browser segundos depois que você entrou com a informação. Você usa o HTML para fornecer a interface básica para a interação com aplicações Web. Você pode também usar o HTML para criar interfaces gráficas entre os bancos de dados usados nestas aplicações e o usuário final.

Função das tags

  Agora você irá aprender as partes e a função das tags em um documento HTML. Também irá aprender a criar um documento HTML simples, utilizando tags. Para recordar: páginas Web são documentos que você visualiza na internet, e são criadas utilizando um editor de texto e linguagens de marcação. 

  Uma página Web que você cria usando o HTML é chamada de um documento HTML, que consiste do texto a ser exibido na página Web e as informações sobre a formatação e estrutura do texto e imagens.

Partes de um documento HTML

  Um documento HTML possui duas partes: head (cabeçalho) e body (corpo). No head você entra com o título da página Web e outras informações, que detalharemos mais adiante. No body você entra com todo o conteúdo da página Web.

  O editor de texto utilizado o é o Notepad (Bloco de Notas). 

O papel das tags

  Tags são os elementos básicos de um documento HTML. Você usa tags para especificar o formato do conteúdo de uma página Web. As tags são denotadas por um único caractere ASCII ou uma string de caracteres entre os sinais < (menor que) e > (maior que), e geralmente são palavras em inglês ou simplesmente abreviações de palavras da língua norte-americana.

  Sinais de maior e menor permitem aos browsers distinguir tags de um texto comum. Por exemplo, um web browser irá interpretar, num documento HTML, como uma tag tudo que está entre < e > e como body (ou corpo da página) o texto que você quer exibir na página Web correspondente, necessariamente fora do espaço entre < e >.

Tags com fechamento

  Grande parte das tags de HTML requerem seu fechamento: se você abre uma tag parágrafo <p>, você tem de fechá-la com </p>. Então, tudo que estiver compreendido entre <p> e </p> será encarado como o corpo do parágrafo. Todas as tags que necessitam de fechamento têm esta mesma estrutura: seu fechamento é idêntico à tag de abertura, porém com o sinal /.

  Por exemplo, você pode querer exibir um bloco de texto em negrito. No documento HTML, você usa a tag de inicio <b> no começo do bloco de texto e a de finalização </b> no fim. A tag Bold (negrito) é uma tag que requer fechamento.

Tags sem fechamento

  Algumas outras tags não necessitam de fechamento, e sua sintaxe é somente de abertura. Por exemplo, a tag Break <br>, que insere uma quebra de linha, é uma delas.

Especificando tudo

  Você aprendeu as partes e a função das tags em um documento HTML. Agora você irá aprender a criar um documento HTML simples. Em qualquer documento HTML, você usa uma tag chamada HTML no começo do documento. Esta tag informa ao browser que o documento é um documento formatado em HTML. A criação de um documento HTML envolve a criação do cabeçalho e o corpo do documento. Você usa a tag HEAD para criar o cabeçalho de um documento HTML. A sintaxe desta tag é exibida na imagem ao lado. 

  A parte do cabeçalho de um documento HTML contém o titulo da página Web. Para especificar o titulo, você usa a tag TITLE entre a de inicio e de finalização da tag HEAD. 
  O browser não exibe nada que estiver dentro do cabeçalho, exceto o título. Outras informações como O meta-tags e propriedades globais do documento não são visíveis para o usuário final.

Usando a Tag BODY para criar o corpo de um documento HTML

  Depois da criação do cabeçalho de um documento HTML, você cria o corpo deste documento. O corpo contém o texto, os objetos que serão exibidos na página Web e o tipo da formatação.

  Você usa a tag BODY para criar o corpo de um documento HTML. A sintaxe desta tag está exibida na imagem ao lado. O browser exibe o texto, no formato especificado, que está incluído entre o inicio e o fim da tag BODY.

  Na próxima postagem continuarei com a explicação de como formatar um documento HTML e também como criar listas.

Fonte:

  Escola Virtual – Fundação Bradesco