Apostila completa de HTML

Apostila completa de HTML

(Parte 1 de 4)

Escrito por: Marcos Rogério Fernandes Contato: tecnico_marcosrogerio@hotmail.com Trabalho finalizado no mês: 08/2008

HyperText Markup Language - Linguagem de Marcação de Hipertexto

Com esta apostila você aprenderá tanto HTML, quanto CSS, e mais algumas dicas em outras áreas como WEB DESIGN, utilizando o PHOTOSHOP. Também vai adquirir algumas noções no Dreamweaver 8. Aprenderá a enviar arquivos fia FTP para servidores, e muito mais. A apostila está toda detalhada com fotos ilustrativas, exemplos já prontos e também com exercícios.

Básico • Aprendendo o que é HTML

• Primeira página HTML

- Criando sua primeira página HTML • Principais marcadores do HEAD

• Principais marcadores do BODY

• Inserção de texto na página

- Formatações dos texto

• Inserção de imagem na página - O marcador <IMG> e seus principais atributos

- GIF animado

- GIF transparente • Inserção de vídeo na página

- Principais atributos do marcador <IMG> para exibir vídeos - Usando o marcador <EMBED> para exibir vídeos

- Principais atributos do marcador <EMBED>

• Aprendendo a usar listas - Lista não ordenadas

- Atributo de UL

- Listas ordenadas

- Atributos de OL

- Lista de definição • Criando Âncoras (link)

• Colocando som na página

- Colocando som de fundo usando o marcador <EMBED>

• Aprendendo a usar MARQUEE - Principais atributos do marcador

- MARQUEE com foto

• Aprendendo a fazer Tabelas - Conceitos básicos

- Principais atributos de uma tabela

- Principais atributos de uma célula

- Linhas

• Aprendendo a usar FRAMES e IFRAMES - Conceitos básicos

- Principais atributos do marcador <FRAMESET>

- Principais atributos do marcador <FRAME>

- Frames aninhados

• Formulários - Principais atributos do marcador <FORM>

- Marcadores relativos aos campos de formulário

- Caixa de texto

- Formulário com senha

- Caixa de texto com várias linhas

- Caixa de combinações

- Caixa de listagem

- Caixa de listagem com múltipla seleção

- Caixa de checagem

- Botão de opção

- Botão LIMPA/CANCELA

- Botão SUBMIT

- Imagem como botão enviar

- Campos escondidos

- Processamento do formulário

- Exemplo de formulário para envio de e-mail

*Exercícios

• Exercícios - Ecologia

- Imagens na página

- Menu

- Trabalho

- LINK’s

- Oscar - Tabela 1

- Tabela 2

- Tabela 3

Atenção! Para abrir os links desta apostila é nescessário que baixe um arquivo

Clicando aqui! (537KB)

Depois de baixado, descompacte-o no mesmo lugar que está a apostila. (coloque dentro da mesma pasta). Neste arquivo se encontram os exemplos, os exericicios prontos, as fotos para o layout de exemplo, e todos os links desta apostila.

O que é HTML?

HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto) é a uma linguagem considerada a base de todas as outras linguagens de desenvolvimento de projetos para WEB. Com ela você pode compartilhar fotos, vídeos, músicas, textos e fazer muitas coisas.

A linguagem HTML foi criada com a visão de que todos os dispositivos deveriam ser capazes de usar informações da Web: PCs com placas de vídeos e monitores de diferentes resoluções e profundidades de cores; telefones celulares; dispositivos para processar entrada e saída de voz; computadores com taxa de transferência alta ou baixa e assim por diante.

Foi a primeira linguagem no setor e é usada amplamente até os dias atuais. Foi criada pelo Tim Berners-Lee quando ele trabalhava como pesquisador para o CERN (Laboratório Europeu de Física de Partículas, na Suíça). Foi popularizado pelo aparecimento do browser Mosaic, criado por Marc Andreessen quando ele estudava na Universidade de Illinois.

Existe muita coisa relacionada com a história do HTML. Mas eu nesta apostila pretendo apenas ensinar como usa-lo

Primeira Página em HTML

Uma página básica em HTML é um arquivo de texto simples contendo o texto da página e os comandos HTML que definem a formatação das mesmas. Os comandos são indicados entre os marcadores chamados TAG que vem entre os símbolos de < e >. A maioria dos comandos é usada em pares, sendo que quando você abre alguma TAG como, por exemplo, a TAG <BODY>você precisará fechar repetindo a TAG assim: </BODY>. A TAG com barra (/) significa que está fechando a que esta sem barra.

Exemplos: <BODY> </BODY>

<center></center>

Existem muitos programas que já montam o código fonte da sua página automaticamente. Mas desta forma você não irá conseguir fazer uma página legal.

Para fazer uma página legal você vai ter que aprender HTML. E para aprender você terá que praticar. Ou seja, as suas primeiras páginas deverão ser feitas no Bloco de Notas e depois que você já estiver crack em escrever as TAG do HTML poderá sim usar um editor HTML. Mas isso eu falarei mais adiante.

Criando sua primeira página HTML.

Primeiramente crie uma pasta para salvar as páginas. De preferência na Área de trabalho (Desktop).

Sempre deixe os arquivos do site muito bem organizados, assim facilita e muito o desenvolvimento dele.

Depois de criado uma pasta no Desktop ou em qualquer outro lugar de sua preferência abra o Bloco de Notas.

Menu Iniciar>Programas>Acessórios>Bloco de Notas

Depois de aberto digite o seguinte código: (ATENÇÃO! NÃO COPIE, DIGITE, ASSIM VOCÊ JÁ COMESSA A PRATICAR!)

<html> <head>

<title> Minha Primeira Página em HTML!!!</title>

<body>

<p align="center"> Essa é a primeira página HTML!!! </p>

Agora vou explicar tudo o que você escreveu. A TAG <HTML> indica que você iniciou um arquivo HTML.

A TAG <HEAD> indica que você abriu um cabeçalho.

A TAG <TITLE> que deve ser usada dentro do cabeçalho <HEAD>, serve para colocar titulo na página, é aquela frase que aparece na barrinha azul do Windows XP quando a página está aberta.

Veja a foto abaixo:

A TAG <BODY> indica que se iniciou o corpo da pagina. É dentro desta TAG que vai boa parte das TAG utilizadas para fazer uma página.

A TAG <p> indica que abriu um novo parágrafo. O atributo ALIGN como o próprio nome diz serve para especificar o alinhamento. E CENTER significa que o alinhamento é no centro. Caso você queira colocar o texto na esquerda troque o CENTER por LEFT, ou por

RIGHT para a direita e ainda pode colocar JUSTIFY para deixar o texto justificado. O código deve ficar assim:

Vamos para o próximo passo!

Depois de digitado o código acima, salve o arquivo como primeira.html. Lembre-se de digitar o .html no final do nome do arquivo. Pois se digitar apenas primeira e já clicar em salvar o Bloco de notas vai pensar que você está fazendo um arquivo de texto comum, e irá salvar em formato TXT. Deixe a codificação como ANSI.

Principais marcadores do HEAD

1 – Título <TITLE> Titulo da Página </TITLE>

Identifica o texto a ser exibido na barra de títulos da página. Quando o usuário entra em uma ferramenta de busca como Google, Yahoo, Cadê, etc procurando por um assunto específico, o conteúdo do marcador <TITLE> de uma página é a primeira coisa a ser vasculhada. Daí a importância em escolher títulos coesos para as páginas e que consigam traduzir o contéudo da página em poucas palavras.

Além disso, quando o usuário escolhe uma página para colocar em sua lista de Favoritos do browser, é o título da página que aparecerá na lista. Caso a página não tenha o marcador <TITLE> ou ele não conter nada, o browser assumirá o nome do arquivo.

Dica: Coloque títulos com ponto na frente assim quando o usuário adicionar a sua página aos Favoritos e caso este esteja em ordem alfabética o seu Titulo ficara nas primeiras posições da lista. E terá mais chance de ser acessado.

Exemplo:

..:: Titulo da Página ::.. ou ::.. Titulo da Página ..::

2 – Description <meta name="Description" CONTENT="Conteudo da Página">

Resumo e conteúdo da página. Este marcador também é utilizado pelas ferramentas de Busca no cadastramento do site. As Ferramentas de Busca trabalham com "web robots" programas que vasculham a Internet procurando novos sites e cadastrando suas informações.

Também chamado de spiders, procuram estas <meta> para saber qual a melhor classificação para cadastrar o site na ferramenta de busca. Quando não encontram estas informações, normalmente os robôs usam um critério próprio para cadastrar o site, que varia de acordo com o robô e com a ferramenta de busca. Alguns deles, quando não encontram estas utilizam os primeiros 200 ou 300 caracteres da página.

Exemplo: <meta name="Description" CONTENT="Essa página mostra fotos de carros">

3 – KeyWords <meta name="KeyWords" CONTENT="palavra-chave da página">

Apresenta palavras-chave da página. Este marcador também é utilizado pelas ferramentas de busca no cadastramento do site. É importante atentar para as palavras que se escolhe como chave.

Exemplo:

<meta name="KeyWords" CONTENT="carro, moto, roda">

Assim quando alguém procurar por "carro, moto, roda" sua página poderá estar no topo da busca! É muito comum você digitar alguma palavra com, por exemplo, "esporte" em algumas ferramentas de busca menos avançadas e aparecer sites com conteúdo totalmente diferente do que foi digitado.

Isso acontece porque muitos web máster usam estratégias que fazem suas páginas terem uma relevância muito grande. Essas estratégias pode ser muito simples como colocar palavras-chaves que são bastante procuradas como, por exemplo: sexo, esporte, carro, moto, e outros.

4 – Base <base href="endereço">

Especifica o endereço base da página. O endereço base é utilizado para determinar o endereço completo dos URLs que aparecem na página.

Exemplo: Uma página que possua os seguintes links:

http://www.enderecodosite.com.br/index.html http://www.enderecodosite.com.br/conteudo.html http://www.enderecodosite.com.br/contato.html

Poderia ficar assim:

/index.html /conteudo.html

/contato.html

Contanto que exista a TAG: <base href="w.enderecodosite.com.br">

Obs: Essa TAG é útil quando você precisa fazer vários links externos (que vão para outros sites).

5 – ISINDEX <ISINDEX PRONT="mensagem">

Recurso utilizado para pesquisas em páginas com muita informação. Abre na página uma caixa de texto precedida pela mensagem especificado no PRONT, que pode ser, por exemplo, "Entre com a palavra a ser buscada". O Usuário digita nesta caixa uma ou mais palavras, separadas por vírgula.

O browser passa essa informação para o servidor da página e este, então executa a pesquisa. É importante observar que isto só acontece em servidores capazes de realizar este tipo de pesquisa.

Obs: Estes marcadores acima devem ser usados dentro do cabeçalho da página.

Ou seja, dentro das TAG <HEAD> </HEAD>.

Principais marcadores do BODY

Determinados pelos marcadores <BODY></BODY>, o corpo é a parte da página que contém informações que serão visualizadas na tela.

1 – BGCOLOR <BODY BGCOLOR="cor">

Determina a cor do Fundo da página. O valor a ser entrado pode ser uma constante (nome em inglês da cor) ou um número hexadecimal (#x) correspondente aos valores RGB da cor.

Exemplo: <BODY BGCOLOR="red">

2 – BACKGROUND <BODY BACKGROUND="URL DA IMAGEM">

Determina a imagem utilizada para preencher o fundo da tela. É importante observar se o endereço da imagem está correto. A imagem escolhida como fundo da página ocupará toda a região da tela, ou seja, mesmo sendo uma imagem pequena, esta será repetida por toda a página, cobrindo toda a extensão.

É possível tirar proveito do fato de que a imagem de fundo de um arquivo pequeno e de carregamento leve. Que ao ser repetido, comporá o fundo desejado. Isso é muito útil caso você queira um fundo degradê, Mais para frente mostrarei como fazer um fundo degradê utilizando CSS, e também ensinarei a fazer com que a imagem pequena não se repita por toda a tela.

Exemplo: <BODY BACKGROUND="fundo.gif">

<BODY BACKGROUND="fundo.jpg">

3 – Escolhendo cores padrão para os texto e para os Links <BODY TEXT="cor" LINK="cor" VLINK="cor" ALINK="cor">

Esses atributos determinam as cores para o texto geral da página (TEXT), Links não visitados (LINK), Links já visitados (VLINK) e o Link no momento que ele é ativado (ALINK). As cores devem ser dadas preferêncialmente em valores hexadecimais.

Embora não seja necessário mudar estas cores, existem casos onde a alteração das cores dos Links da página acaba sendo necessária, como, por exemplo, se o fundo da página for azul.

Abaixo veja uma tabela mostrando as cores junto com os números hexadecimais mais utilizados na web!

Inserção de texto na página

1 - Comentários

Qualquer texto escrito dento da limitação dos marcadores <BODY> e </BODY> serão exibidos em tela, a menos que seja um comentário. Comentários são colocados dentro de páginas entre os marcadores <!-- e --> e servem apenas para documentação, sendo ignorados pelo browser.

Exemplo:

<html> <head>

<title> Teste </title> </head>

<body> comentário 1 <!--comentário 2-->

Salve como teste.html. Abra a página; Repare que só irá aparecer no browser o comentário 1. O comentário 2 só irá aparecer no código fonte da página.

2 - Parágrafos <p> texto </p>

Observe: p = parágrafo

Delimita um parágrafo. É possível omitir o elemento de fim </p> sem que isto cause problemas. Resultado da aplicação deste marcador é uma linha em branco antes do inicio do parágrafo.

Exemplo:

<html> <head>

<title> Parágrafo </title>

<body> Testando sem colocar parágrafo Ver se sem o marcador sai na linha de baixo

<p> Agora com o marcador de parágrafo. </p> Linha seguinte </body>

Salve como teste_paragrafo.html. Abra a página e observe:

Observe que na linha onde não existe o marcador <p> mesmo dando ENTER, no browser fica tudo na mesma linha. Agora quando coloca o marcado <p> o texto fica na outra linha.

O marcador de parágrafo possui um atributo opcional o ALIGN como já foi dito anteriormente serve para configurar o alinhamento do parágrafo. O atributo ALIGN pode conter valores como LEFT, CENTER, RIGHT e JUSTIFY que significam respectivamente esquerda, centro, direita e justificado.

3 - Quebras de linha <BR>

Marcador utilizado para separar uma linha da outra sem um espaço em branco entre as duas. É importante observar que o marcador <BR> deve vir no final da linha que se quer separar.

Exemplo:

<html> <head>

<title> Quebras de linha </title> </head>

<body> Testando sem colocar parágrafo <p> Agora com o marcador de parágrafo. </p> Agora com a quebra de linha<BR> Linha seguinte </body>

Veja que no primeiro parágrafo existe espaço nas linhas, mas no segundo não há.

4 - DIV <DIV ALIGN="alinhamento"></DIV>

Configura o alinhamento de um texto. Útil quando se quer alinhar um conjunto de parágrafos. O parâmetro ALIGN pode conter um dos valores: LEFT, CENTER, RIGHT ou

Exemplo: <P> Parte 1 <DIV ALIGN="CENTER"> vai separar </DIV> Parte 2</P>

5 - CENTER <CENTER></CENTER>

(Parte 1 de 4)

Comentários