Apostila de HTML

HTML
Autor:
Elvis Ferreira Farias
Apostila
de
• Introdução
HTML é uma linguagem utilizada para criar arquivos que podem

ser visualizados na World Wide Web “WWW” , um dos serviços mais
populares da Internet e por correio eletrônico, e que permite fazer
ligações, os links, as quais possibilitam a navegação virtual, pois o HTML
permite a criação de documentos que podem ser lidos em qualquer tipo
de computador e transmitidos pela Internet até por correio eletrônico.
O HTML foi criado a princípio com objetivos de divulgação. Porém,
não se pensou que a web chegaria a ter caráter multimídia. Assim, a
linguagem HTML foi criada sem a possibilidade de resposta a possíveis
usos e problemas que viriam a surgir no futuro.
Para iniciar com o HTML, eu recomendo que você grave um Editor
de HTML. Como o Sothink HTML Editor 2.5 para baixar é só ir nesse
site:
http://baixaki.ig.com.br/download/Sothink-HTML-Editor.htm
• Iniciando um documento
Primeiramente vamos fazer o corpo da pagina.

Sempre começamos a fazer o corpo com <HTML> e depois com
<HEAD>
Fica assim:
<HTML>
<HEAD>
Em seguida utilizamos <TITLE> isso é o que faz aparecer o titulo.

Fica assim:
<HTML>
<HEAD>
<TITLE>TITULO DA PAGINA</TITLE>
Você deve ta se perguntando porque esse </TITLE>?

R: Todo comando em HTML é aberto com <> e fechado com </>,
por esse motivo temos que fechar o comando </TITLE>
Agora vamos finalizar a estrutura básica de uma pagina com o

corpo. O corpo de uma pagina é feita com o comando <BODY>
Fica assim:
<HTML>
<HEAD>
<BODY>
Aqui vai ficar o corpo da sua pagina.

</BODY>
</HTML>
Como tudo que é iniciado tem que ser terminado o comando

<HTML> que iniciou lá em cima, é fechado aqui em baixo com o
comando </HTML>
Pronto essa é a estrutura básica de uma pagina:
<HTML>
<HEAD>
<BODY>
Aqui vai ficar o corpo da sua pagina.
</BODY>
</HTML>
• Imagem
• Aplicativos para a pagina

o Formatação de textos
Para iniciar uma linha utilizamos <BR>LINHA</BR>

Para iniciar um parágrafo utilizamos <P>Parágrafo</P>
Para deixar o texto negrito utilizamos <B>Negrito</B>
Para deixar o texto negrito utilizamos <I>Itálico</I>
Para deixar o texto sublinhado utilizamos
<U>Sublinhado</U>
Para aumentar ou diminuir o tamanho da fonte
utilizamos <H1></H1> ou pode colocar outro numero com 2,
3, 4...
<SUP>...</SUP> - Faz com que o texto fique
sobrescrito
.
<SUB>...</SUB> - Faz com que o texto fique
subscrito.
Fica assim:
<HTML>
<HEAD>
<BODY>
<P>Bom Dia! Aqui vai ser um parágrafo!</P>

<BR>
<BR><B>Aqui o texto vai ficar Negrito!</B></BR>
<BR>
<BR><I>Aqui o texto vai ficar Itálico!</I></BR>
<BR>
<BR><U>Aqui o texto vai ficar Sublinhado!</U></BR>
<BR>
<BR><B><I><U>Aqui o texto vai ficar Negrito, Itálico e
Sublinhado! </U></I></B></BR>
</BODY>
</HTML>
Aqui no exemplo acima não utilizamos todos os atributos dados
mais acima.
Olhem na imagem abaixo como a pagina vai ficar:
• Aplicativos para o texto.
Para mudar a cor da letra, utilizasse:

<Font color=“Red”>
Com isso as letras vão ficar vermelhas.
Para fechar o comando utilizasse </font>
Exemplo: <Font color=“Red”>Esse é um exemplo</font>
Para aumentar ou diminuir o tamanho da letra, utilizasse:

<font size="Número que representa o tamanho da letra, 1 é
a menor letra que tem, conforme você aumenta o número, a
letra aumenta também.">
Para escolher a conte da letra, utilizasse, 1, 2 e assim vai...
Para modificar o tipo de letra, é necessário que você conheça as
letras que você quer, por exemplo: ARIAL ou MONOTYPE CORSIVA:
<font face="TIPO DE LETRA QUE VOCÊ QUER">
Para usar todos os atributos de uma vez só, utilizasse:
<font color="COR" size="TAMANHO DA LETRA" face="TIPO DE

LETRA">TEXTO.
Fica assim:
<HTML>
<HEAD>
<BODY>
<font color="COR" size="TAMANHO DA LETRA" face="TIPO

DE LETRA">TEXTO.
</BODY>
</HTML>
• BORDER
Um atributo opcional para ser usado com TABLE é o atributo
BORDER. Se ele estiver presente, a tabela será formatada com linhas
de borda.
Exemplo:
<TABLE BORDER>
<CAPTION> Nota da primeira avaliação </CAPTION>
<TD>Notas/Alunos</TD>
<TH>Rafael</TH>
<TH>Ana</TH>
<TH>Camila</TH>
<TR>
<TH>Notas</TH>
<TD>7,0</TD>
<TD>9.5</TD>
<TD>8.7</TD>
<TR>
<TH>Desempenho</TH>
<TD>Regular</TD>
<TD> Ótimo</TD>
<TD>Bom</TD>
</TABLE>
Olha na imagem abaixo como fica.
Mais exemplos de tabelas:
Exemplo 1:
<table border="1">
<tr>
<td colspan="3">Célula 1</td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
Fica assim:
Exemplo 2:
<table border="1">
<tr>
<td colspan="2">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
<td>Célula 5</td>
</tr>
</table>
Fica assim:
Exemplo 3:
<table border="1">
<tr>
<td rowspan="3">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
</tr>
<tr>
<td>Célula 4</td>
</tr>
</table>
Fica assim:
• Para o funda de uma pagina.
Para colocar cor no fundo de uma pagina utilizamos:

<body bgcolor="A COR QUE VOCÊ QUER FICA ENTRE AS
ASPAS">
Sempre no corpo da pagina, entre <BODY> e </BODY>

Você pode colocar o nome da cor em Inglês ou colocar o código da
cor.
Fica assim:
<HTML>
<HEAD>
<BODY>
<body bgcolor="A COR QUE VOCÊ QUER FICA ENTRE AS

ASPAS">
<BR>
<BR>
<BR>
<BR>
</BODY>
</HTML>
Se você utilizar a cor azul, tem que colocar a palavra Blue ou o

código da cor que é: #0033FF
Fica assim:
<HTML>
<HEAD>
<BODY>
<body bgcolor="blue">
<BR>
<BR>
<BR>
<BR>
</BODY>
</HTML>
No código acima eu utilizei a palavra blue, mas também poderia
ter utilizado #0033FF
Olhe na imagem abaixo como ficara a pagina:
Para colocar imagem no fundo, utilizasse:

<body background="Endereço da imagem.Extensão da
imagem">
Fica assim
<HTML>
<HEAD>
<BODY>
<body background="Endereço da imagem.Extensão da
imagem">

<BR>
<BR>
<BR>
<BR>
</BODY>
</HTML>
Aonde tem “Endereço da imagem.Extensão da imagem” você

coloca o endereço da imagem.
Por exemplo: <body
background=”http://img482.imageshack.us/img482/7105/mr
xskulleb0.gif”>
Eu hospedei essa imagem:
A pagina ficou assim:

Para não atrapalhar a visualização vamos colocar a letra de cor
vermelha.
<HTML>
<HEAD>
<BODY>
<Font color=“Red”>
<body
background=”http://img482.imageshack.us/img482/7105/mr
xskulleb0.gif”>
<BR>
<BR>
<BR>
<BR>
</BODY>
</HTML>
Fica assim:
• Links
Para se colocar um link numa pagina HTML, é preciso digitar o

seguinte código:
<a href="link que você deseja utilizar">DESCRIÇÃO DO

LINK</a>
Você também pode mudar a cor dos links que por padrão que é
azul.
Para mudar as cores dos links os seguintes atributos são usados:
LINK a cor dos links que não foram visitados;
VLINK a cor dos links já visitados;
ALINK a cor dos links ativos, o link está ativo no exato momento em
que você clica nele, se você voltar na pagina onde está o link, você
verá ele na cor especificada para os links ativos.
Sendo assim esses atributos iriam dentro da etiqueta <body> e

ficaria assim:
<a href="link que você deseja utilizar">DESCRIÇÃO DO

LINK</a>
<body bgcolor="COR DA PAGINA" link="COR DOS LINKS"
vlink="COR DOS LINKS VISITADOS" alink="COR DOS LINKS
ATIVOS">
Primeiro o código do link e depois os aplicativos para o link.
o LINK DE E-MAIL:
Para colocar, por exemplo, o link CONTATO para o visitante poder

se comunicar com você, faça o seguinte código:
<a href="mailto:SEU E-MAIL">CONTATO</a>
• Iframe
Consiste na inserção de páginas web (arquivos) dentro de páginas

web (arquivos) . Não confunda com Frames (quadros).
O código HTML gerado para inserção de uma iFrame é:
<iframe></iframe>
Atributos básicos de uma iFrame

name (nome da iframe);
ID (identificação da iframe);
width (largura em pixels);
height (altura em pixels);
src (caminho para o conteúdo da iframe. Pode ser um URL , um outro
arquivo , uma imagem etc...);
scrolling (determina a presença ou não de barra de rolagem – (“yes”
para aparecer ha barra de rolagem e “no” para não aparecer a barra de
rolagem, auto));
Exemplo de uma iframe:
<iframe id=apostilando_index name="iframe01"

src="http://www.apostilando.com" width="600" height="400"
scrolling="Auto"></iframe>
Obs:Quando você tiver em seu site, por exemplo, um menu , você

pode determinar que os links desse menu abram em uma iframe ,
usando para tal , no destino desse link (target) o nome dado ao
atributo "name" de sua iframe.
Código :
<a href="http://dicashackers.vilabol.com.br"
target="iframe01">LINK</a>
Esse código faz aparecer o site http://dicashackers.vilabol.com.br

no Iframe01, que é o Iframe do exemplo acima.
• Composição com Frames
Como montar dois frames em coluna:

<FRAMESET COLS="x, y">
<FRAME SRC="col1.html">
</FRAMESET>
Dois frames em linha:
<FRAMESET ROWS="x, y">
<FRAME SRC="lin1.html">
</FRAMESET>
Para montar esta estrutura abaixo, deve-se criar primeiro dois
frames em coluna e compor a segunda coluna com dois frames em
linha:
</FRAMESET>
</FRAMESET>
Para montar esta estrutura abaixo, deve-se criar primeiro dois
frames em linha e compor a segunda linha com dois frames em coluna:
</FRAMESET>
</FRAMESET>
• Redirecionando uma pagina

Utiliza-se:
<meta http-equiv=”Refresh”
content=”10;url=http://dicashackers.vila.bol.com.br”>
O numero 10 significa o tempo que vai demorar para pagina ser

redirecionada.
E o link é para onde a pagina vai ser redirecionada.
• Formulários
Aqui vamos utilizar o CGI FormMail.

Descrição: Este é o famoso CGI Formmail, que pega dados em
formulários e envia para um email os mesmos, além de pegar ip e host
do usuário que os enviou.
O funcionamento básico é chamar o script "formmail", que ao ser

requisitado por um formulário em HTML, captura todos os campos e
envia para o email programado, normalmente o email do proprietário
do site ou pessoa responsável para ler os emails.
Veja o código completo de um formulário em HTML, utilizando o
"formmail" CGI:
---- inicio do código ----
<form name="form" method="post"

action="http://seudominio.com.br/cgi-sys/FormMail.cgi">
Nome: <input type="text" name="nome">
Telefone: <input type="text" name="telefone">

<input type=hidden name="recipient"
value="fulano@seudominio.com.br">
<input type=hidden name="subject" value="titulo do email">
<input type=hidden name="redirect"
value="http://seudominio.com.br/pagina_de_obrigado.html">
<input type="submit" name="Submit" value="Enviar">
</form>
---- fim do codigo ----
LINHA 1: O form é declarado com o método POST, e o ACTION

chama o CGI-Formmail. É necessáro que você substitua o trecho
"seudominio.com.br" pelo seu domínio real, e deixe o resto da linha
igual.
POST: em que os dados serão enviados pelo meio de uma
variável de um
ambiente oculto, (oculta aos olhos dos usuários).
ACTION: determina a URL de destino da informação.
LINHA 2 e 3: São os campos do formulário em HTML, você pode

ter quantos quiser. O CGI-Formmail irá capturar todos eles.
LINHA 4: É um objeto de formulário HTML, do tipo HIDDEN

(escondido) com o nome de "recipient", é este o campo que armazena
o email de destino, para onde o CGI-Formmail vai enviar os dados
preenchidos no formulário. Normalmente você vai substituir o valor
"fulano@seudominio.com.br" pelo seu email. O sistema só vai funcionar
com um email de destino que pertença ao site (exemplo: se o site é
fulano.com.br, o email de destino só pode ser algo como
fulano@fulano.com.br, não funcionará para fulano@hotmail.com)

(escondido) com o nome de "subject", o valor deste campo será o título
da mensagem que você vai receber. Não é obrigatório utilizá-lo.

(escondido) com o nome de "redirect", aqui você deve informar o
endereço da página de obrigado, isto é, quando a pessoa enviar o
formulário, será direcionada para o endereço que estiver especificado
nesta linha.
LINHA 7: É o botão de enviar, tradicional do formulário.
• Áudio
Há duas maneiras de inserir som em uma página:
<EMBED SRC="audio.som"> Insere o arquivo de som como objeto.
<BGSOUND SRC="audio.som"> Faz com que o som seja inserido como

som de fundo ou 'trilha sonora' de uma página. Esta formatação só funciona
no Internet Explorer.
• Vídeo
A inserção de vídeo depende bastante do tipo de arquivo de vídeo que
temos para inserir em uma página. De maneira geral, esta formatação pode
servir para a inserção de um arquivo QuickTime:
<EMBED SRC="arquivo.mov">
Criado por: Elvis Ferreira Farias.

Site: http://dicashackers.vilabol.com.br

Apostila de HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila de HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

HTML é uma linguagem utilizada para criar arquivos que podem

Primeiramente vamos fazer o corpo da pagina.

Em seguida utilizamos <TITLE> isso é o que faz aparecer o titulo.

Você deve ta se perguntando porque esse </TITLE>?

Agora vamos finalizar a estrutura básica de uma pagina com o

Aqui vai ficar o corpo da sua pagina.

Como tudo que é iniciado tem que ser terminado o comando

Aqui vai ficar o corpo da sua pagina.

• Aplicativos para a pagina

Para iniciar uma linha utilizamos <BR>LINHA</BR>

<P>Bom Dia! Aqui vai ser um parágrafo!</P>

Olhem na imagem abaixo como a pagina vai ficar:

• Aplicativos para o texto.

Para mudar a cor da letra, utilizasse:

Para aumentar ou diminuir o tamanho da letra, utilizasse:

<font face="TIPO DE LETRA QUE VOCÊ QUER">

Para usar todos os atributos de uma vez só, utilizasse:

<font color="COR" size="TAMANHO DA LETRA" face="TIPO DE

<font color="COR" size="TAMANHO DA LETRA" face="TIPO

Olha na imagem abaixo como fica.

Mais exemplos de tabelas:

• Para o funda de uma pagina.

Para colocar cor no fundo de uma pagina utilizamos:

Sempre no corpo da pagina, entre <BODY> e </BODY>

<body bgcolor="A COR QUE VOCÊ QUER FICA ENTRE AS

Se você utilizar a cor azul, tem que colocar a palavra Blue ou o

Para colocar imagem no fundo, utilizasse:

<P>Bom Dia! Aqui vai ser um parágrafo!</P>

Aonde tem “Endereço da imagem.Extensão da imagem” você

A pagina ficou assim:

Para se colocar um link numa pagina HTML, é preciso digitar o

<a href="link que você deseja utilizar">DESCRIÇÃO DO

Sendo assim esses atributos iriam dentro da etiqueta <body> e

<a href="link que você deseja utilizar">DESCRIÇÃO DO

Primeiro o código do link e depois os aplicativos para o link.

Para colocar, por exemplo, o link CONTATO para o visitante poder

<a href="mailto:SEU E-MAIL">CONTATO</a>

Consiste na inserção de páginas web (arquivos) dentro de páginas

Atributos básicos de uma iFrame

<iframe id=apostilando_index name="iframe01"

Obs:Quando você tiver em seu site, por exemplo, um menu , você

Esse código faz aparecer o site http://dicashackers.vilabol.com.br

• Composição com Frames

Como montar dois frames em coluna:

• Redirecionando uma pagina

O numero 10 significa o tempo que vai demorar para pagina ser

Aqui vamos utilizar o CGI FormMail.

O funcionamento básico é chamar o script "formmail", que ao ser

<form name="form" method="post"

Telefone: <input type="text" name="telefone">

---- fim do codigo ----

LINHA 1: O form é declarado com o método POST, e o ACTION

LINHA 2 e 3: São os campos do formulário em HTML, você pode

LINHA 4: É um objeto de formulário HTML, do tipo HIDDEN

LINHA 5: É um objeto de formulário HTML, do tipo HIDDEN

LINHA 6: É um objeto de formulário HTML, do tipo HIDDEN

LINHA 7: É o botão de enviar, tradicional do formulário.

Há duas maneiras de inserir som em uma página:

<EMBED SRC="audio.som"> Insere o arquivo de som como objeto.

<BGSOUND SRC="audio.som"> Faz com que o som seja inserido como

Criado por: Elvis Ferreira Farias.

Você também pode gostar