Página inicial > Apostila Completa de HTML

Apostila Completa de HTML

20/09/2011 18:30

HyperText Markup Language - Linguagem de Marcacao de Hipertexto

Com esta apostila voce aprendera tanto HTML, quanto CSS, e mais algumas dicas em

outras areas como WEB DESIGN, utilizando o PHOTOSHOP. Tambem vai adquirir

algumas nocoes no Dreamweaver 8.

Aprendera a enviar arquivos fia FTP para servidores, e muito mais.

A apostila esta toda detalhada com fotos ilustrativas, exemplos ja prontos e tambem

com exercicios.

SUMÁRIO:

Básico

· Aprendendo o que e HTML

· Primeira pagina HTML

- Criando sua primeira pagina HTML

· Principais marcadores do HEAD

· Principais marcadores do BODY

· Insercao de texto na pagina

- Formatacoes dos texto

· Insercao de imagem na pagina

- O marcador <IMG> e seus principais atributos

- GIF animado

- GIF transparente

· Insercao de video na pagina

- Principais atributos do marcador <IMG> para exibir videos

- Usando o marcador <EMBED> para exibir videos

- Principais atributos do marcador <EMBED>

· Aprendendo a usar listas

- Lista nao ordenadas

- Atributo de UL

- Listas ordenadas

- Atributos de OL

- Lista de definicao

· Criando Ancoras (link)

· Colocando som na pagina

- Colocando som de fundo usando o marcador <EMBED>

· Aprendendo a usar MARQUEE

- Principais atributos do marcador

- MARQUEE com foto

· Aprendendo a fazer Tabelas

- Conceitos basicos

- Principais atributos de uma tabela

- Principais atributos de uma celula

- Linhas

· Aprendendo a usar FRAMES e IFRAMES

- Conceitos basicos

- Principais atributos do marcador <FRAMESET>

- Principais atributos do marcador <FRAME>

- Frames aninhados

- IFRAMES

· Formularios

- Principais atributos do marcador <FORM>

- Marcadores relativos aos campos de formulario

- Caixa de texto

- Formulario com senha

- Caixa de texto com varias linhas

- Caixa de combinacoes

- Caixa de listagem

- Caixa de listagem com multipla selecao

- Caixa de checagem

- Botao de opcao

- Botao LIMPA/CANCELA

- Botao SUBMIT

- Imagem como botao enviar

- Campos escondidos

- Processamento do formulario

- Exemplo de formulario para envio de e-mail

· Exercicios

- Ecologia

- CHA

- Imagens na pagina

- Menu

- Trabalho

- LINK’s

- Oscar

- Tabela 1

- Tabela 2

- Tabela 3

· AVANCADO!

O que e HTML?

HTML (HyperText Markup Language - Linguagem de Marcacao de Hipertexto) e a uma

linguagem considerada a base de todas as outras linguagens de desenvolvimento de

projetos para WEB.

Com ela voce pode compartilhar fotos, videos, musicas, textos e fazer muitas coisas.

A linguagem HTML foi criada com a visao de que todos os dispositivos deveriam ser

capazes de usar informacoes da Web: PCs com placas de videos e monitores de

diferentes resolucoes e profundidades de cores; telefones celulares; dispositivos para

processar entrada e saida de voz; computadores com taxa de transferencia alta ou

baixa e assim por diante.

Foi a primeira linguagem no setor e e usada amplamente ate os dias atuais. Foi criada

pelo Tim Berners-Lee quando ele trabalhava como pesquisador para o CERN

(Laboratorio Europeu de Fisica de Particulas, na Suica). Foi popularizado pelo

aparecimento do browser Mosaic, criado por Marc Andreessen quando ele estudava na

Universidade de Illinois.

Existe muita coisa relacionada com a historia do HTML. Mas eu nesta apostila pretendo

apenas ensinar como usa-lo

---------------------------------------------------------------------------------------

Primeira Pagina em HTML

Uma pagina basica em HTML e um arquivo de texto simples contendo o texto da pagina

e os comandos HTML que definem a formatacao das mesmas. Os comandos sao

indicados entre os marcadores chamados TAG que vem entre os simbolos de < e >. A

maioria dos comandos e usada em pares, sendo que quando voce abre alguma TAG

como, por exemplo, a TAG <BODY>voce precisara fechar repetindo a TAG assim:

</BODY>. A TAG com barra (/) significa que esta fechando a que esta sem barra.

Exemplos:

Existem muitos programas que ja montam o codigo fonte da sua pagina

automaticamente. Mas desta forma voce nao ira conseguir fazer uma pagina legal.

Para fazer uma pagina legal voce vai ter que aprender HTML. E para aprender voce tera

que praticar. Ou seja, as suas primeiras paginas deverao ser feitas no Bloco de Notas

e depois que voce ja estiver crack em escrever as TAG do HTML podera sim usar um

editor HTML. Mas isso eu falarei mais adiante.

Criando sua primeira página HTML.

Primeiramente crie uma pasta para salvar as paginas. De preferencia na Area 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 preferencia

abra o Bloco de Notas.

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

Depois de aberto digite o seguinte codigo:

(ATENÇÃO! NAO COPIE, DIGITE, ASSIM VOCE JA COMESSA A PRATICAR!)

<html>

<head>

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

</head>

<body>

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

</body>

</html>

Agora vou explicar tudo o que voce escreveu.

A TAG <HTML> indica que voce iniciou um arquivo HTML.

A TAG <HEAD> indica que voce abriu um cabecalho.

A TAG <TITLE> que deve ser usada dentro do cabecalho <HEAD>, serve para colocar

titulo na pagina, e aquela frase que aparece na barrinha azul do Windows XP quando a

pagina esta aberta.

A TAG <BODY> indica que se iniciou o corpo da pagina. E dentro desta TAG que vai boa

parte das TAG utilizadas para fazer uma pagina.

A TAG <p> indica que abriu um novo paragrafo. O atributo ALIGN como o proprio nome

diz serve para especificar o alinhamento. E CENTER significa que o alinhamento e no

centro. Caso voce 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.

Vamos para o proximo passo!

Depois de digitado o codigo 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 ja clicar

em salvar o Bloco de notas vai pensar que voce esta fazendo um arquivo de texto

comum, e ira salvar em formato TXT. Deixe a codificacao como ANSI.

Principais marcadores do HEAD

1 – Título

<TITLE> Titulo da Página </TITLE>

Identifica o texto a ser exibido na barra de titulos da pagina. Quando o usuario entra em

uma ferramenta de busca como Google, Yahoo, Cade, etc procurando por um assunto

especifico, o conteudo do marcador <TITLE> de uma pagina e a primeira coisa a ser

vasculhada. Dai a importancia em escolher titulos coesos para as paginas e que

consigam traduzir o conteudo da pagina em poucas palavras.

Alem disso, quando o usuario escolhe uma pagina para colocar em sua lista de Favoritos

do browser, e o titulo da pagina que aparecera na lista. Caso a pagina nao tenha o

marcador <TITLE> ou ele nao conter nada, o browser assumira o nome do arquivo.

Dica: Coloque titulos com ponto na frente assim quando o usuario adicionar a sua

pagina aos Favoritos e caso este esteja em ordem alfabetica o seu Titulo ficara nas

primeiras posicoes da lista. E tera mais chance de ser acessado.

Exemplo:

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

2 – Description

Resumo e conteudo da pagina. Este marcador tambem e 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

informacoes.

Tambem chamado de spiders, procuram estas <meta> para saber qual a melhor

classificacao para cadastrar o site na ferramenta de busca. Quando nao encontram estas

informacoes, normalmente os robos usam um criterio proprio para cadastrar o site, que

varia de acordo com o robo e com a ferramenta de busca. Alguns deles, quando nao

encontram estas utilizam os primeiros 200 ou 300 caracteres da pagina.

Exemplo:

3 – KeyWords

Apresenta palavras-chave da pagina. Este marcador tambem e utilizado pelas

ferramentas de busca no cadastramento do site. E importante atentar para as palavras

que se escolhe como chave.

Exemplo:

Assim quando alguem procurar por "carro, moto, roda" sua pagina podera estar no topo

da busca!

E muito comum voce digitar alguma palavra com, por exemplo, "esporte" em algumas

ferramentas de busca menos avancadas e aparecer sites com conteudo totalmente

diferente do que foi digitado.

Isso acontece porque muitos web master usam estrategias que fazem suas paginas

terem uma relevancia muito grande. Essas estrategias pode ser muito simples como

colocar palavras-chaves que sao bastante procuradas como, por exemplo: sexo,

esporte, carro, moto, e outros.

4 – Base

Especifica o endereco base da pagina. O endereco base e utilizado para determinar o

endereco completo dos URLs que aparecem na pagina.

Exemplo:

Uma pagina que possua os seguintes links:

https://www.enderecodosite.com.br/index.html

https://www.enderecodosite.com.br/conteudo.html

https://www.enderecodosite.com.br/contato.html

Poderia ficar assim:

/index.html

/conteudo.html

/contato.html

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

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

outros sites).

5 – ISINDEX

Recurso utilizado para pesquisas em paginas com muita informacao. Abre na pagina

uma caixa de texto precedida pela mensagem especificado no PRONT, que pode ser, por

exemplo, "Entre com a palavra a ser buscada". O Usuario digita nesta caixa uma ou

mais palavras, separadas por virgula.

O browser passa essa informacao para o servidor da pagina e este, entao executa a

pesquisa. E importante observar que isto so 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 e a parte da pagina que

contem informacoes que serao visualizadas na tela.

1 – BGCOLOR

Determina a cor do Fundo da pagina. O valor a ser entrado pode ser uma constante

(nome em ingles da cor) ou um numero hexadecimal (#xxxxxx) correspondente aos

valores RGB da cor.

Exemplo:

2 – BACKGROUND

Determina a imagem utilizada para preencher o fundo da tela. E importante observar se

o endereco da imagem esta correto. A imagem escolhida como fundo da pagina ocupara

toda a regiao da tela, ou seja, mesmo sendo uma imagem pequena, esta sera repetida

por toda a pagina, cobrindo toda a extensao.

E possivel tirar proveito do fato de que a imagem de fundo de um arquivo pequeno e de

carregamento leve. Que ao ser repetido, compora o fundo desejado. Isso e muito util

caso voce queira um fundo degrade, Mais para frente mostrarei como fazer um fundo

degrade utilizando CSS, e tambem ensinarei a fazer com que a imagem pequena nao se

repita por toda a tela.

Exemplo:

3 – Escolhendo cores padrão para os texto e para os Links

Esses atributos determinam as cores para o texto geral da pagina (TEXT), Links nao

visitados (LINK), Links ja visitados (VLINK) e o Link no momento que ele e ativado

(ALINK). As cores devem ser dadas preferencialmente em valores hexadecimais.

Exemplo:

Embora nao seja necessario mudar estas cores, existem casos onde a alteracao das

cores dos Links da pagina acaba sendo necessaria, como, por exemplo, se o fundo da

pagina for azul.

Abaixo veja uma tabela mostrando as cores junto com os numeros hexadecimais mais

utilizados na web!

Palavras-chave:

Apostila Completa de HTML

Voltar