Aprenda a.Criar Paginas na Web HTML www apostilagratis com

Aprenda a.Criar Paginas na Web HTML www apostilagratis com

(Parte 1 de 4)

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 2

Apostila

<<HTML>> Aprendendo a CCrriiarr PPáággiinnass pparra Web

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 3

Apostila de HTML Sobre a AAppoossttiilla

Esta apostila foi desenvolvida para o ensino da criação de páginas web. Como a HTML é a linguagem básica de criação de páginas, esta apostila enfoca o ensino da HTML.

Hoje em dia, há uma grande variedade de editores que facilitam a criação de páginas e que não exigem do usuário um grande conhecimento de HTML. No entanto, esta apostila não usará nenhum destes editores, pois o objetivo é que a pessoa aprenda a criar páginas codificando os comandos HTML, usando para isso até mesmo um editor como o Bloco de Notas.

Esta apostila foi planejada para servir como um material de estudo para autoditadas, como também para ministrar cursos em empresas ou escolas e até mesmo como um guia de referência para desenvolvedores que já conhecem a HTML.

Público Alvo

- Qualquer pessoa que deseja aprender HTML; - Desenvolvedores que já trabalham com HTML;

- Professores ou instrutores que desejem usar esta apostila como material didático.

Pré-requisitos

Não é necessário ter conhecimento prévio de HTML, mas é importante conhecer o Browser (navegador) e um editor de texto de sua preferência, como por exemplo, o Bloco de Notas.

Nível Esta apostila aborda tópicos que vão do nível BÁSICO ao INTERMEDIÁRIO.

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 4

Apostila de HTML Introdução

Esta apostila foi criada para ser um recurso de aprendizado e consulta à linguagem HTML, para qualquer usuário de informática que deseja criar páginas para a internet.

Para facilitar o estudo e pesquisa de informação, ela foi dividida em tópicos, os quais foram apresentados em forma de capítulos. Os capítulos foram estruturados da seguinte forma:

1. Conhecendo a HTML: Os conceitos básicos e estrutura da linguagem HTML são apresentados neste capítulo.

2. Formatação de Textos: Aqui é explicada a formatação de textos através de comandos (tags) html específicos para esse fim. Algumas das formatações possíveis são: negrito, sublinhado, itálico, tipo, tamanho e cor da fonte, listas, entre outras.

3. Links: A funcionalidade mais importante na HTML é a possibilidade de criar elos (links) entre documentos e neste capítulo é mostrado como usar este grande recurso.

4. Imagens: O objetivo deste capítulo é ensinar como usar imagens nos documentos HTML. É visto os tipos de imagens mais usadas, os formatos GIF e JPEG, e um pouco de imagens mapeadas. Como criar imagens com boa qualidade para documentos HTML é um assunto extenso e por isso não será abordado.

5. Tabelas: Um grande recurso para se produzir documentos com uma boa diagramação e apresentação é o uso de tabelas. Este é um dos principais capítulos e é justamente aqui que está a transição entre o nível básico e o nível intermediário na HTML.

6. Formulários: Recurso poderoso da HTML que permite gerar interação entre o usuário e o documento. Depois que este recurso foi criado a HTML se difundiu e a internet passou a ser usada também para fins comerciais. Neste capítulo, este recurso será ensinado e exemplificado.

7. Frames: Este recurso permite exibir mais de um documento por tela. Para isso, a tela é dividida em partes chamadas frames. Este recurso é apresentado em detalhes neste capítulo.

8. Outros Comandos: Neste capítulo são apresentados outros comandos interessantes da HTML, como exibir áudio e vídeo, atualização automática de documento, etc.

9. Caracteres Especiais: Uma tabela de códigos de caracteres para serem usados em documentos HTML.

10. Tabela de Cores: Tabela com o código e nome de cores para usar nos documentos HTML.

1. Referências: Fontes de informação e pesquisa utilizadas para apoio ao desenvolvimento desta apostila.

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 5

Apostila de HTML

1. CONHECENDO A HTML6
1.1. COMANDOS HTML6
1.2. ESTRUTURA BÁSICA DE UM DOCUMENTO7
2. FORMATAÇÃO DE TEXTOS8
2.1. TÍTULOS E SUBTÍTULOS8
2.2. PARÀGRAFOS E QUEBRA DE LINHA8
2.3. ESTILOS DE TEXTO1
2.4. DEFININDO FONTES1
2.5. LINHAS HORIZONTAIS E ALINHAMENTO DE ELEMENTOS12
2.6. LISTAS15
2.6.1. LISTAS NÃO ORDENADAS15
2.6.2. LISTAS ORDENADAS16
2.6.3. LISTAS DESCRITIVAS17
3. LINKS20
3.1. LINKS PARA ARQUIVOS LOCAIS20
3.2. LINKS PARA ARQUIVOS EM OUTROS DIRETÓRIOS21
3.3. LINKS PARA ARQUIVOS DE OUTROS SERVIDORES23
3.4. LINKS PARA E-MAIL23
3.5. LINKS PARA A MESMA PÀGINA – ÂNCORA23
4. IMAGENS26
4.1. IMAGENS COMO LINK27
4.2. IMAGENS COMO PADRÃO DE FUNDO28
4.3. IMAGENS TRANSPARENTES28
4.4. IMAGENS MAPEADAS28
4.5. IMAGENS ANIMADAS29
5. TABELAS31
5.1. TABELA SIMPLES31
5.2. MODIFICANDO A APARÊNCIA DA TABELA - ATRIBUTOS32
5.3. ATRIBUTOS DE LINHAS E CÉLULAS3
5.4. MESCLANDO CÉLULAS35
6. FORMULÁRIOS37
6.1. CRIANDO UM FORMULÁRIO37
6.2. TAGS DE FORMULÁRIO38
7. FRAMES43
7.1. CRIANDO FRAMES43
7.2. LINKS COM FRAMES46
8. OUTROS COMANDOS48
8.1. REFRESH PAGE48
8.2. AUDIO E VÍDEO48
8.3. TEXTO ROLANTE49
9. CARACTERES ESPECIAIS51
10. TABELA DE CORES52

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 6

1CONHECENDO A HTML

Apostila de HTML

HTML significa HyperText Markup Language e é a linguagem de descrição de documentos usada na Web. Sua principal característica está definida em seu nome. A Html através de tags, posiciona e coloca hipertexto no documento.

Por sua vez, o hipertexto é a base da informação que, além da função comum de texto, permite ligações (links) para outros locais de um documento e também para documentos remotos (páginas, figuras, frames e tudo mais que um navegador pode ler ou suportar).

Periodicamente a Html ganha uma nova versão com mais recursos. Quem cria as novidades desta linguagem são as pessoas e empresas envolvidas, principalmente os desenvolvedores de softwares para navegação (Netscape, Microsoft, etc).

Todo este processo sofre a colaboração e a administração do W3C - World Wide Web Consortium.

1..1COMANDOS HTML

Os comandos HTML são representados no texto através de rótulos (ou tags). O visualizador (Browser) interpreta como rótulos todos os elementos HTML válidos que estejam entre os sinais “menor que” (<) e “maior que” (>).

A maioria das TAGs HTML possuem um rótulo inicial e um rótulo final, envolvendo o texto que é marcado por eles. A sintaxe básica

<TAG> Texto marcado pela Tag </TAG>

Observe que o rótulo de fechamento tem o mesmo nome que o rótulo inicial, mas é precedido por uma barra ("/"). Algumas TAGs podem ter um ou mais atributos, que definem alguma característica especial. Os atributos, quando presentes, aparecem no rótulo inicial separados por espaços, logo após o nome da TAG.

Exemplos de tags HTML com atributos:

o <body background="fundo.gif">corpo do documento ...</body>

⇒ Define uma imagem de fundo para a página: ⇒ Define uma borda para a tabela:

o <table border>conteúdo e rótulos de tabela ... </table>

⇒ Define uma linha horizontal sem sombra, com largura de 50% da página, 10 pixels de espessura e alinhada pela esquerda:

o <hr noshadow width=50% size=10 align=left>

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 7

1..2ESTRUTURA BÁSICA DE UM DDOOCCUMEENNTTOO

Apostila de HTML

A estrutura básica de um documento HTML é a seguinte:

<TITLE> Título do documento </TITLE>

Corpo da página. </BODY>

Vamos as explicações de cada um desses comandos:

⇒ <HTML>...</HTML> : Indicam o início e o fim do documento, todo o resto deve estar entre esses dois comandos.

⇒ <HEAD> </HEAD> : Delimitam a seção de cabeçalho do documento e nelas estão contidas as informações de configuração da página.

⇒ <TITLE> </TITLE> : Indicam o título do documento, que será apresentado na barra superior do Browser. Estes comandos devem estar sempre entre o comando acima.

⇒ <BODY>...</BODY> : Indicam o corpo do documento. Entre esses comandos estará a sua página em si. O texto, imagens e tudo que será apresentado pelo browser.

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo da página, bem como uma imagem de fundo (marca d’água).

Sintaxe:

<BODY BGCOLOR="#rgb" TEXT="#rgb" LINK="#rgb" ALINK="#rgb" VLINK="#rgb" BACKGROUND="URL" MARGINHEIGHT=”0” MARGINWIDTH=”0” LEFTMARGIN=”0” TOPMARGIN=”0”>

Onde:

⇒ BGCOLOR - cor de fundo (padrão: cinza ou branco) ⇒ TEXT - cor dos textos da página (padrão: preto)

⇒ LINK - a cor dos links (padrão: azul)

⇒ ALINK - cor dos links, quando acionados (padrão: vermelho)

⇒ VLINK - cor dos links, depois de visitados (padrão: azul escuro ou roxo)

⇒ BACKGROUND - indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água.

⇒ LEFTMARGIN – margem esquerda da página(MS Internet Explorer).

⇒ TOPMARGIN – margem superior da página(MS Internet Explorer).

⇒ MARGINHEIGHT – margem superior(Netscape).

⇒ MARGINWIDTH – margem esquerda(Netscape).

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 8

2FORMATAÇÃO DE TEXTOS
2..1TÍTULOS E SSUUBBTÍTULOS

Apostila de HTML

Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6).

Exemplo: Titulos.htm

<TITLE>Curso de HTML - Títulos</TITLE>

Como fica no Browser:

2..2PARÀGRAFOS E QQUUEBBRRAA DDE LINHA

Uma página HTML usa comandos especiais para definir a quebra de um parágrafo ou de uma linha. Vejamos alguns:

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 9

Apostila de HTML

É responsável pela quebra de parágrafos, inserindo automaticamente uma linha em branco. O uso da tag </P> é opcional. Também é possível alinhar os parágrafos através desta tag.

Sintaxe: <P ALIGN=”posição”>Texto do parágrafo</P>

Onde:

⇒ posição pode ser: o left: alinhamento à esquerda; o center: centralizado; o right: alinhamento à direita.

o justify: justificado.

Exemplo: Paragrafos.htm

<TITLE>Curso de HTML - Parágrafos</TITLE>

<P>Este parágrafo utiliza a TAG P e alinhamento padrão (esquerdo)

<P ALIGN="Right">Este parágrafo utiliza a TAG P e alinhamento à direita

<P ALIGN="Center">Este parágrafo utiliza a TAG P e alinhamento centralizado

<P ALIGN="Justify">Este parágrafo utiliza a TAG P e alinhamento justificado.

Para ver o resultado digite um texto grande o suficiente. Este parágrafo utiliza a TAG P e alinhamento justificado. Este parágrafo utiliza a TAG P e alinhamento justificado. Este parágrafo utiliza a TAG P e alinhamento justificado. </BODY>

Como fica no Browser:

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 10

Apostila de HTML

É responsável pela quebra de linha. Ela finaliza a linha atual e passa para a próxima. Esta TAG não necessita da TAG </BR>.

Sintaxe: Texto da linha<BR> Exemplo: Quebra_de_Linha.htm

<TITLE>Curso de HTML – Quebra de Linha</TITLE>

Este texto está usando a TAG BR no final de cada linha.<BR><BR> Você pode utilizar<BR> a TAG BR<BR> toda vez<BR> que quiser passar o texto<BR> para a próxima linha.<BR><BR> O resultado é simples. </BODY>

Como fica no Browser:

TAG <PRE> Permite que se insira em uma página um parágrafo pré-formatado, isto é, conforme foi digitado no editor.

Sintaxe: <PRE>Texto do parágrafo</PRE> Exemplo: Paragrafos2.htm

<TITLE>Curso de HTML - Parágrafos</TITLE>

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 1

Apostila de HTML

Este parágrafo esta utilizando a TAG PRE, foi definido no editor de uma forma especial, no final de cada linha, foi pressionada a tecla enter, para o texto continuar na linha seguinte. </PRE>

Como fica no Browser:

2..3ESTILOS DE TEXTO

Como em editores de texto, o HTML também permite alterar o estilo do texto. Vejamos alguns estilos:

⇒ <B>...</B> - Aplica o estilo negrito. ⇒ <I>...</I> - Aplica o estilo itálico.

⇒ <U>...</U> - Aplica o estilo sublinhado (nem todos os browser o reconhecem).

⇒ <SUP>...</SUP> - Faz com que o texto fique sobrescrito.

⇒ <SUB>...</SUB> - Faz com que o texto fique subscrito. ⇒ <BIG>...</BIG> - Aumenta a fonte e atribui negrito

⇒ <SMALL>...</SMALL> - Reduz e altera a fonte

⇒ <T>...</T> - Aplica um espaçamento regular ao texto.

2..4DEFININDO FONTES

TAG <FONT> Permite alterar o tipo de fonte, o tamanho e a cor.

Sintaxe: <FONT SIZE=”n” FACE=”nome” COLOR=”cor”>Texto</FONT>

Onde: ⇒ n: o n varia de 1 a 7 e o valor 3 corresponde ao valor padrão;

⇒ nome: é o nome da fonte a ser utilizada;

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 12

Apostila de HTML

⇒ cor: é a cor da fonte, definida em hexadecimal, ou através de um nome predefinido de cores.

Exemplo: Fontes.htm

<TITLE>Curso de HTML - Fontes</TITLE>

<FONT SIZE="7" FACE="Times New Roman" COLOR="#F0"> Fonte Times New Roman com tamanho 7 e cor Vermelha.</FONT><BR> <FONT SIZE="6" FACE="Arial" COLOR="#BC8F8F"> Fonte Arial com tamanho 6 e cor Pink.</FONT><BR> <FONT SIZE="5" FACE="Tahoma" COLOR="Blue"> Fonte Tahoma com tamanho 5 e cor Azul.</FONT><BR> <FONT SIZE="4" FACE="Verdana" COLOR="Gold"> Fonte Verdana com tamanho 4 e cor Gold</FONT><BR> <FONT SIZE="3" FACE="Helvetica" COLOR="DarkGreen"> Fonte Helvetica com tamanho 3 e cor Verde Escuro</FONT><BR> <FONT SIZE="2" FACE="Courier New" COLOR="Gray"> Fonte Courier New com tamanho 2 e cor Cinza</FONT><BR> <FONT SIZE="1" FACE="Impact" COLOR="#0"> Fonte Impact com tamanho 1 e cor Preta</FONT><BR> </BODY>

Como fica no Browser:

2..5LINHAS HORIZONTAIS E AALLIINNHHAAMMENNTTOO DDE ELLEMMENNTTOOSS

Ela permite o alinhamento horizontal de qualquer elemento em uma página. Esta TAG é muito utilizada em DHTML pela propriedade de agrupar elementos de página.

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 13

Apostila de HTML

Sintaxe: <DIV ALIGN=”posição”>Elementos a serem alinhados</DIV>

Onde:

⇒ posição pode ser: o left: alinhamento à esquerda; o center: centralizado; o right: alinhamento à direita. o justify: justificado. Somente para textos.

Exemplo: Alinhamento_div.htm

<TITLE>Curso de HTML - Alinhamento</TITLE>

<DIV ALIGN="Center">Usando a TAG DIV:</DIV>

<DIV ALIGN="Right">

<P>Usando a TAG DIV você pode alinhar seu texto sem problemas.

<P>Pode utilizar o alinhamento à direita, que alinha seu texto na margem direita da tela. Como um texto criado em editor de textos para ser impresso em uma página.

<P>Com a TAG DIV você pode aproveitar o mesmo alinhamento para vários parágrafos. </DIV>

Como fica no Browser:

Ela permite a centralização horizontal de qualquer elemento em uma página. Tem o mesmo efeito que a TAG <DIV ALIGN=”Center”>.

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 14

Apostila de HTML

Sintaxe: <CENTER>Elementos a serem centralizados</CENTER>

Exemplo: Alinhamento_center.htm

<TITLE>Curso de HTML - Alinhamento</TITLE>

<FONT FACE="Arial" COLOR="Blue"><H4>Aqui esta sendo utilizado a TAG CENTER</H4></FONT> </CENTER> Neste parágrafo não esta sendo utilizado a tag center, veja como o texto fica alinhado à esquerda quando nenhum tipo de alinhamento é especificado. </BODY>

Como fica no Browser:

TAG <HR> Insere uma linha horizontal no Browser.

Sintaxe: <HR WIDTH=”n%” ALIGN=”posição” SIZE=”n” NOSHADE COLOR=”#RGB”>

Onde: ⇒ ALIGN=”posição”: pode ser left, center e rigth;

⇒ WIDTH=”n%”: define a largura da linha, pode ser definida em pixels ou em percentagem do tamanho horizontal da tela;

⇒ SIZE=”n”: define a espessura da barra, em pixels;

⇒ NOSHADE: define que a barra não deve ser com efeito 3D;

⇒ COLOR=”#RGB”: define a cor da barra. (MS Internet Explorer).

Disponibilizada pelo professor Renan Menna Barreto – TI- CDJB e Cedida por Aleckssandro Tavares - 2003 15

Apostila de HTML

Exemplo: Linhas.htm

<TITLE>Curso de HTML - Linhas Horizontais</TITLE>

<BODY> Espessura 5<HR SIZE="05"> <BR> Largura 80% da página:<HR SIZE="05" WIDTH="80%"> <BR> Alinhamento à direita:<HR SIZE="05" ALIGN="Right" WIDTH="30%"> <BR> Linha sem nenhum atributo:<HR> Linha com COR Vermelha:<HR NOSHADE COLOR="Red"> </BODY>

(Parte 1 de 4)

Comentários