PARTE - 1
HTML
Página 1
_______________________________________________________________________________
Índice
HTML – A HISTÓRIA .................................................................................................................................2
O COMEÇO E A INTEROPERABILIADE .................................................................................................3
Primeira Página ..............................................................................................................................................4
Entendendo seu código ..................................................................................................................................5
Abrindo o código fonte da sua página ...........................................................................................................6
Comentários na página ..................................................................................................................................7
Comandos de formatação – parte I ................................................................................................................8
Marcações para Título e Subtítulo .............................................................................................................8
HTML
Página 2
_______________________________________________________________________________
HTML – A HISTÓRIA
Conforme acordo com a W3C1, a Web é baseada em 3 pilares:
1. Um esquema de nomes para localização de fontes de informação na Web2, esse
esquema chama-se URI3.
2. Um Protocolo de acesso para acessar estas fontes, hoje o HTTP4.
3. Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o
HTML.
Vamos entender o terceiro pilar, o HTML.
HTML é uma abreviação de HyperText Markup Language - Linguagem de Marcação de
Hipertexto.
Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto,
imagem, vídeo, áudio e etc.) na Web.
O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos ou nós
ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio,
documentos etc.
Estes elementos conectados formam uma grande rede de informação. Eles não estão
conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro
seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação
de dados, organizando conhecimentos e guardando informações relacionadas.
Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja
entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta
linguagem.
Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o
Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A
partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base,
compartilhando as mesmas convenções.
1
wc3 - é consórcio com mais de 300 membros entre países, empresas e organizações independentes em nivel internacional
que visa desenvolver padrões para a criação e a interpretação de conteúdos para a Web.
2
Web - sistema de documentos em hipertextos e ou hipermídias que são interligados por links e executados na rede mundial
de computadores, a Internet.
3
URL - (de Uniform Resource Locator), ou Localizador-Padrão de Recursos, é o endereço de um recurso (arquivo, impressora,
etc.), disponível em uma rede (Internet ou Intranet). Tem a seguinte estrutura: protocolo://máquina/caminho/recurso.
4
http – traduzindo, Protocolo de Transferência de Hipertexto) é um protocolo de comunicação em uma das camadas de
aplicação do modelo OSI de redes.
HTML
Página 3
_______________________________________________________________________________
O COMEÇO E A INTEROPERABILIADE
Entre 1993 e 1995 - O HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram
propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até
aqui não era reconhecido como padrão.
Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código,
trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática
comum. Desde o começo o HTML foi criado para ser uma linguagem independente de
plataformas, browsers e outros meios de acesso. Interoperabilidade
significa menos custo. Você cria apenas um código HTML e este código pode ser lido por
diversos meios, ao invés de versões diferentes para diversos dispositivos. Dessa forma, evitouse que a Web fosse desenvolvida em uma base proprietária, com formatos incompatíveis e
limitada.
Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que
a informação publicada por meio deste código fosse acessível por dispositivos e outros meios
com características diferentes, não importando o tamanho da tela, resolução, variação de cor.
Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O
HTML deve ser entendido universalmente, dando a possibilidade
para a reutilização dessa informação de acordo com as limitações de cada meio de acesso.
Apesar de existirem várias ferramentas no mercado com muitas facilidades para você montar a
sua página web, o programador ou designer ainda necessita ter o mínimo de conhecimento
sobre Internet e a linguagem HTML, que é o formato final de qualquer página, independente de
qual editor de páginas esteja utilizando. O conhecimento de HTML é necessário para entre
outras coisas: efetuar manutenção nas suas páginas, corrigindo bugs gerados pela ferramenta
de criação de páginas ou para colocar efeitos mais avançados nas suas páginas.
Uma coisa é certa: cedo ou tarde você precisará editar sua página diretamente no código
HTML. Neste tutorial iremos abordar o HTML na sua forma mais pura, utilizando apenas o
programa “bloco de notas” (ou notepad) do Windows. Lembramos que a maioria dos
programas de criação de páginas possui um editor HTML, que pode ser usado, alem de
qualquer outro editor de texto que gere o formato “TXT” (Texto padrão). Para podermos
visualizar nossos resultados, utilizaremos o browser Intenet Explorer.
HTML
Página 4
_______________________________________________________________________________
Primeira Página
Uma página Web consiste basicamente de um arquivo contendo comandos em linguagem
HTML (Hiper Text Mark-up Language). Para iniciar iremos utilizar um exemplo muito simples,
onde criaremos uma página com um pequeno texto (utilize o bloco de notas do Windows).
Abra o editor de textos, e em um novo documento, digite o seguinte código:
Antes de salvar o seu trabalho, recomendamos que fosse criada uma pasta no seu
computador e salve ali todas as páginas do seu site. Isso facilita muito a sua organização.
Salve o documento no seu computador com o nome “pagina.htm”, observe a figura ao lado.
Botão para
criar uma
nova pasta
Nome do
arquivo com a
extensão.htm
Veja a diferença entre salvar o arquivo com a extensão .txt e .htm.
Arquivo gravado
com a extensão
.htm. Normalmente
apresenta o ícone
do navegador.
Arquivo gravado
com a extensão
.txt.
HTML
Página 5
_______________________________________________________________________________
Para ver a página no seu browser, abra a pasta que você criou e de um duplo clique no ícone
do arquivo pagina.htm.
Resultado.
Entendendo seu código
Os identificadores que estão entre os sinais “<” e “>” são chamados de tags. Cada uma é
responsável por uma determinada área ou componente da página.
Vimos neste primeiro exemplo o uso de quatro tags, que são:
Inicia
Finaliza
Uso
<HTML> </HTML> Marca o início e o fim de um documento HTML.
Marca o início e o fim da área onde será descrito os cabeçalhos e o
<HEAD> </HEAD>
titulo da página
<TITLE> </TITLE> O título da página que aparecerá na barra superior de seu browser
<BODY </BODY> É o corpo da página, onde o código principal deverá estar presente.
Uma página HTML é estruturada da seguinte forma:
<HTML>
<HEAD>
(Aqui se colocam as tags da área de cabeçalho)
</HEAD>
<BODY>
(Aqui é o corpo da sua página, onde você colocará as tags de conteúdo)
</BODY>
</HTML>
HTML
Página 6
_______________________________________________________________________________
Abrindo o código fonte da sua página
Caso você tenha fechado o bloco de notas com o código HTML da sua página, observe os
comandos abaixo para abrir novamente o bloco de notas com o seu código.
A partir do navegador. Clique no corpo da página com o botão direito do mouse e em seguida
clique em exibir código fonte.
Ainda pelo navegador. Clique no comando de menu exibir / código fonte.
Anotações:
HTML
Página 7
_______________________________________________________________________________
Comentários na página
Podemos inserir comentários para que possamos entender melhor o código. Volte ao código
fonte e acrescente as linhas indicadas abaixo.
Observe que o comentário não é
apresentado na página.
Para colocarmos os comentários utilizamos uma tag, composta pelos sinais “< “ e “>” com o
sinal de exclamação “!” antes do texto de comentário.
Anotações:
HTML
Página 8
_______________________________________________________________________________
Comandos de formatação – parte I
Marcações para Título e Subtítulo
Agora aperfeiçoaremos nossa página mais um pouquinho, colocando mais algumas tags com
alguns efeitos bastante interessantes.
Código fonte
Resultado
Inicia
Finaliza
<Hn>
</Hn>
Uso
Marca o tamanho da fonte para um título, “n” pode ter um valor de 1
(um) a 6 (seis), sendo 6 (seis) o menor tamanho.