Вы находитесь на странице: 1из 12

Apostila de HTML

O que HTML?

HTML (HyperText Markup Language, que significa Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para produzir pginas na Web. Para facilitar a edio em HTML, h varias tags de auxilio. So elas:

As tags <html> .....</html>


TAG que inicia o documento, dizendo que ser um tipo de documento HTML e o finaliza.

As tags <head>....</head>
TAG que inicia o cabealho. Nele voc coloca informaes sobre o documento (formataes, funes, fundo musical etc). O contedo que estiver dentro do <HEAD> geralmente no aparecer quando sua home page for exibida. Ele pode ser exibido de outras formas, em aplicaes mais avanadas.

As tags <title>....</title>
Indica o ttulo do seu documento. Repare O LOCAL em que esse TTULO APARECE. Indica o final do ttulo (repare que o ttulo comea com <title> e termina com </title>).

As tags <body>.....</body>
Indica o corpo do documento ("body" significa "corpo"). O body contm todo o contedo que ser exibido e finaliza o corpo do seu programa (script). Voc pode colocar nesta TAG a cor do fundo da pgina e a cor do texto e dos links. ALINK a cor dos links quando so acionados, 1

VLINK a cor dos links visitados e BACKGROUND o nome ou diretrio da imagem de fundo. Use aspas (") ou apstrofo ('), no far diferena. Exemplo utilizando as TAGS mencionadas:

Textos em HTML
O Texto de HTML representa tudo o que ser acrescentado como texto da pagina que ser apresentada no navegador. Assim como h tags que facilitam a edio das paginas de HTML, h tambm algumas tags que facilitam a edio de textos da pagina. So elas: <b>....</b> - Texto carregado; (1) <i>....</i> - Texto em itlico; (2) <tt>....</tt> - Texto estilo mquina de escrever, monoespaamento; (3) <font size=?>....</font> - Tamanho das letras; (4) <font color=?>....</font> - Cor das letras; (5) <font face=?>....</font> - Define a fonte utilizada. (6) 2

Exemplo da utilizao das tags de texto:

- No cdigo:

OBS.: Nota que no final de cada linha dos textos h sempre uma tag, a tag <br>, que representa a quebra de linha, ou seja, como se tivssemos pulando uma linha no nosso texto. Essa tag utilizada mais como questo de esttica mesmo.

- No navegador:

Marcadores de HTML
Os Marcadores de HTML servem para melhor ordenarmos alguns itens dos nossos textos. Os marcadores podem ser Listas ordenadas ou Listas no ordenadas.

Listas Ordenadas:
As listas ordenadas so utilizadas para exibir uma relao de itens numerados, organizados por seqncia ou ordem de importncia. So delimitados pelos comandos < OL >... </OL> e cada item da lista iniciado com o comando <LI>. Exemplo de Lista ordenada: - No cdigo:

- No navegador

Listas No ordenadas:
As listas no ordenadas so aquelas em que os elementos podem ser apresentados em qualquer ordem. So delimitadas pelos comandos <UL>...</UL> e da mesma forma que na lista ordenada cada item da lista iniciado pelo comando <LI>.

Exemplo de lista no ordenada: - No cdigo:

- No navegador:

Tabelas de HTML
Permite que voc defina tabelas de dados compostas de linhas e colunas. Praticamente, qualquer coisa pode ser colocada dentro das clulas de uma tabela. Os comandos de fechamento <TH>, <TD> e <TR> freqentemente no precisam dos respectivos comandos de fechamento. Exemplo de Tabelas - No cdigo:

OBS.: nota-se que ao iniciar uma tabela, foram usados os comandos: BGCOLOR: representa a cor de fundo da clula; COLSPAN: especifica quantas colunas da tabela sero ocupadas pelas clulas; ROWSPAN: especifica quantas linhas da tabela so ocupadas pelas clulas;

- No navegador:

Outros comandos de tabelas:

WIDTH: define a largura exata da clula; ALIGN: alinhamento horizontal do contedo da clula; VALIGN: alinhamento vertical do contedo da clula; NOWRAP: exibe o texto como uma linha continua no permitindo quebra de linha no texto.

IMAGENS
possvel inserir imagens em paginas html, para se inserir imagens ultilizado a tag <img>, existem 3 tipos de imagens que pode ser inserido em paginas html: GIF JPG PNG 9

As imagens que so inseridos na pagina podem ser criadas ou achadas facilmente na web. SRC No atributo src colocado o endereo da imagem, esse atributo obrigatrio. <img src=endereo aqui> ALT O atributo ALT=carro serve para se colocar um breve descrio da imagem, com essa descrio o usurio pode ter uma noo de que se trata a imagem antes do navegador carrega-l, entre as aspas colocado essa descrio. HEIGHT O atributo height=12 define a altura da imagem, o tamanho colocado entre as aspas. WIDTH width=13 define a largura da imagem, entre as aspas colocado o tamanho desejado. BORDER O atributo border=2 define a largura da borda que fica na imagem, caso no se queira borda na imagem colocado border=0 VSPACE E HSPACE Esses dois atributos servem para se definir o espao que a imagem deve ter de textos e at outras imagens. LOWSRC Esse atributo serve para indicar ao navegador que a imagem deve ser carregada primeiramente em baixa resoluo para depois aumentar a resoluo, isso ajuda no carregamento de paginas com bastante imagens e em uma conexo lenta. <img lowsrc>

Exemplo de codigo html para colocar uma imagem de <html> <head> A melhor pizza !!! <img lowsrc="pizza.jpg" border="3" alt="PIZZA" height="120" width="120" vspace="100" hspace="10"> </head> </html>

10

Links
Tipos de links: Links Internos: abrem outras partes dentro da mesma pgina. Links Locais: abrem outras pginas do mesmo site web. Links Remotos: abrem outras pginas de outro site web Links com endereo de correio: cria uma mensagem de correio dirigido. Links de Arquivos: permitem ao usurio realizar download de arquivos. Exemplos: Para se utilizar um link, deve-se colocar o endereo ou destino dele. O destino ser introduzido sob a forma de um atributo, no qual leva o nome de href. <a href="destino">contedo</a> 11

Links Internos: Esse links conduz o usurio ao fim da pgina. <a href="#abaixo">Ir abaixo</a> Links Locais: Para fazer um link desde index.html para yyy.html: <a href="secao1/paginas/yyy.html">conteudo</a> Links Remotos: <a href=http://www.yahoo.com.br>ir a yahoo.com.br</a> Links com endereo de correio: Para colocar um link dirigido a um endereo de correio colocamos mailto: no atributo href do link, seguido do endereo de correio ao qual se deve dirigir o link. <a href="mailto:juliana@criarweb.com">juliana@criarweb.com</a> Links de Arquivo: O arquivo deve-se encontrar no mesmo diretrio da pgina. <a href="meu_arquivo.zip">Baixar meu_arquivo.zip</a>

12

Похожие интересы