Tutorial de HTML - Completo

SUMÁRIO
O QUE É HTML? ........................................................................................... 3
CONSTRUINDO SEU PRIMEIRO SITE ......................................................... 4
CABEÇALHO .................................................................................................. 4
CORPO ............................................................................................................ 13
FONTE ............................................................................................................. 16
UTILIZANDO IMAGENS .................................................................................. 17
CRIAR TABELAS ............................................................................................. 22
MARCADORES DE TEXTO ............................................................................. 23
CRIAR FORMULÁRIOS .................................................................................... 24
FRAME ............................................................................................................... 27
IFRAMEs ............................................................................................................ 29
O QUE É HTML?
HTML, HyperText Markup Language, ou Linguagem de Marcação de

Hipertexto, é uma linguagem de marcação que serve para criar páginas na
WEB. Em contrapartida com outras linguagens, como C e Pascal, por exemplo,
a linguagem HTML não é compilada, e sim interpretada por navegadores. Dessa
forma, toda a estrutura de códigos criada nessa linguagem será convertida em
uma página.
Os documentos HTML são arquivos de textos que podem ser criados e

editados em editores de textos comuns, como o bloco de notas do Windows,
TextEdit do Macintosh, assim como ferramentas como o AEdix, que possui
funcionalidades práticas que pode facilitar o trabalho.
CONSTRUINDO SEU PRIMEIRO SITE
- ESTRUTURA BÁSICA
Todo site em HTML começa pela tag <html> e termina com a tag
</html>. Tag pode ser considerado como o código da linguagem HTML
propriamente dito. Desse modo, todas as palavras inseridas dentro de menor (<)
e maior (>) são chamadas de tag.
A estrutura básica de um documento em HTML possui as seguintes

tags:
Qualquer projeto feito nessa linguagem de marcação possui duas

estruturas simples: o cabeçalho e o corpo.
CABEÇALHO
Para escrever o cabeçalho, deve-se iniciar com <head> e terminar com

</head>.
Dentro do cabeçalho existe uma tag chamada TITLE. Usando <title> e

</title>, o usuário pode escrever dentro dessas duas tags o título da página, que
porventura será exibida na janela de visualizações. Veja o exemplo abaixo:
Esse exemplo gerou a seguinte página:

No próprio cabeçalho existem outras tags que podem ou não ser
usadas, isso vai depender do projeto seu, se vai precisar ou não.
<style> : Define a formatação em CSS
Assim como você faz a formatação do texto em HTML pode-se fazer em

CSS, veja o exemplo:
As Linhas acrescentadas foram a partir de <style>...</style>, a primeira

trata-se de uma folha de estilos escrita para CSS (“text/css”). A segunda linha
significa dizer que as regras de estilos a seguir aplicam-se ao elemento (“body”).
A terceira linha determina a cor do texto, que está representada em
hexadecimal, neste exemplo a cor do texto será azul (color: #0000FF). A quarta
linha refere-se ao estilo da fonte (font-family: Verdana). A linha a seguir refere-se
a cor para o fundo da página, que será amarelo (background-color: #FFFF00),
veja como ficou essa página:
Em CSS aplicam-se regras para a criação de documentos,

cada regra é composta por três etapas:
1- Um selector: informa ao browser qual é a parte do documento a qual se

aplica a regra (exemplo: “body”);
2- Uma propriedade: especifica qual é o aspecto do layout a ser utilizado

(exemplo: “color” e “background-color”, são duas propriedades distintas);
3- Um valor: fornece o valor da propriedade (blue ou #0000FF e yellow ou

#FFFF00);
No exemplo anterior as regras foram combinadas, elas valem para o

mesmo elemento body, escrevemos de uma só vez o elemento e colocamos
com suas propriedades juntas. Também poderia ser feito da seguinte maneira:
body {color: blue}
body {background: yellow}
<script> Define programação de funções em páginas com script, podendo

adicionar funções de JavaScript. A união do JavaScript com o CSS é conhecida
como DHTML, com o JavaScript é possível modificar dinamicamente os estilos
dos elementos da página em HTML. Veja o exemplo:
Com este código, foi possível exibir a data com dias da semana e mês
utilizando JavaScript, a data exibida é de acordo com a máquina do usuário.
Veja como ficou esse código:
<link> Define ligações da página com outros arquivos ou com outras páginas.
Os links são pontos clicáveis do documento HTML que levam a qualquer

documento da sua página ou outras páginas da internet, em ambos os casos a
tag será a mesma, o que vai mudar é o endereço, Vejamos:
<a href="nome-do-lugar-a-ser-levado">descrição</a>
O código a seguir levará para outra página da web:
Obs: Em “nome-do-lugar-a-ser-levado” você coloca o arquivo HTML que você

deseja, por exemplo: pagina2.htm ou uma URL como:
http://badoo.com/anneingrid/
Descrição: é o que vai aparecer sublinhado na sua home page indicando que
pode ser clicado.
Neste exemplo de código, a descrição: Perfil DELA, ficará sublinhado na

home Page, ao ser clicado levará para outra página, veja o exemplo:
Cores Dos Links

Podemos utilizar qualquer cor para o link, no entanto, recomenda-se a
cor padrão azul (blue) indicada pelo código rgb=#0000FF.
Isto porque quando se clica sobre um link sua cor é alterada para indicar
ao usuário que aquele link já foi consultado.
Vlink
Indica a cor dos links que já foram consultados.
Alink
Indica a cor do links ativados na página.
A notação para as cores dos links, alinks e vlinks é:
<body link= "#rrggbb" vlink= "#rrggbb" alink= "#rrggbb> </body>
Como fazer um link abrir em outra janela?
Se você desejar colocar um link para abrir em outra janela, para que o
visitante n ão saia do seu site, por exemplo, colocar um link para uma home
page fora do site. Para fazer isso é simples, basta inserir o atributo TARGET,
assim:
<a href= “http://badoo.com/anneingrid/” target= “_blank”> descrição</a>
Veja o exemplo como fica:
Como fazer uma imagem ter um link?

Assim como faz para inserir um link em uma palavra também é possível
fazer com que uma imagem possa ter um link, a diferença está apenas na
descrição, em vez de colocar o texto coloca-se a tag da imagem, veja o
exemplo:
<meta> Define as propriedades da página como: autor, descrição da página
para buscadores, etc. A meta facilita ao usuário encontrar seu site, como
também se pode assinar seu site, declarando sua autoria sobre o código fonte.
Como utilizar: devem ser incluídas no seu código HTML, dentro da tag
<head>, da seguinte maneira:
Author: define quem é o autor do site;
Description: o buscador apresentará como um resumo do seu site;
Keywords: nesta tag pode colocar maior numero de palavras, sempre

separadas por vírgula e em letras minúsculas pois alguns buscadores tem
problemas com letras maiúsculas e podem ignorar seu site. Procure usar
palavras coerentes com o conteúdo do site.
Refresh
Além de busca, a tag meta também serve para chamar outra página em um
determinado espaço de tempo, usando o refresh pode-se fazer isso, pode
inseri-la no corpo também <body> ... </body>. Veja o exemplo:
<meta http-equiv= "refresh" content= "5" url= "index.html">
Content: Tempo em segundos na qual irá para outra página;
Url: endereço, pode ser um link;

CORPO
Para redigir o corpo, inicia-se com <body> e conclui-se com </body>.
Subtítulo
Não deve ser confundido com o título do documento, o título é inserido

na seção do cabeçalho <head> <title>...</title> </head> enquanto o subtítulo é
colocado na seção do corpo documento HTML <body>...</body>
O subtítulo possui 6 níveis de tamanho, a tag usada é o <hy>, onde o “y”

é o tamanho que varia de 1 até 6, quanto menos o número, maior a letra.
<h1>...</h1>; <h2>...</h2>;...<h3>...</h3>; <h4>...</h4>; <h5>...</h5>;

<h6>...</h6>
Abaixo, tem-se um pequeno exemplo:
Esse código gerou a seguinte página:

Formatando o Texto
Quebra de Linha
<br> faz uma quebra de linha, não precisa fechar a tag.
Parágrafo
Quando for utilizar um parágrafo, deve-se implementar a tag <p>. Veja exemplo:
O código acima gerou a seguinte página:

Alinhamento
Você pode escolher alinhar seu parágrafo. Pra isso, basta usar a tag
ALIGN. Exemplo:
O código acima ficou da seguinte forma:
Texto Pré-formatado
Este recurso deixa o texto exatamente da forma que foi digitado. Usa-se
a tag <pre>...</pre>. Exemplo:
O exemplo anterior ficou da seguinte maneira:
FONTE
Negrito: podemos escrever o texto em negrito o incluindo dentro das etiquetas

<b> ... </b>. Esta mesma tarefa é desempenhada por <strong> ... </strong>
sendo ambas equivalentes.
Itálico: existem duas maneiras: <i> ... </i> e outra um pouco mais longa:
<em> e </em> é mais prático escrever da primeira forma, por isso que os sites
que encontramos escrevem dessa forma
Sublinhado: no uso de sublinhado devemos prestar atenção, pois os links

hipertexto também são sublinhados e pode confundir o leitor. Usa-se a tag
<u>...</u>.
Subscrito e sobrescrito: as tags empregadas são: <sup> ... </sup> para os

sobrescritos
e <sub> ... </sub> para os subscritos.
Veja o exemplo:
O código anterior fica dessa forma:
UTILIZANDO IMAGENS
Para utilizar imagens em HTML é simples, usamos a tag :
<img src="caminho-para-o-arquivo">
Onde <img> significa Imagem e <src> Source.
Esse "caminho-para-o-arquivo" pode ser uma área específica do computador,

ou pode ser um link .
Obs: É importante lembrar que as imagens possuem o tipo, seja JPG

(imagem), GIF (animações), PNG (fotos com mais definição), etc.
Veja o exemplo:
Veja o exemplo como fica:
Atributo ALT
A função do ALT é basicamente fazer uma "Etiqueta". Quando o

usuário deixar o mouse sobre a imagem irá aparecer algum texto identificando
a imagem.
Sintaxe:
<img src= "tux2.jpg" alt= "TUX FEMININO">
Você pode escrever qualquer frase no atributo alt, veja como fica:
Atributos HEIGHT e WIDTH
Esses dois atributos controlam a altura e a largura. Essa medida é

baseada em pixels.
Sintaxe:
<img src= “tux2.jpg” alt= “TUX FEMININO “ height=”30” width= “50”>
Veja como ficou ao acrescentar os atributos height e width, a imagem

“tux2.jpg” ficou menor:
Inserir Bordas:
Podemos inserir bordas nas imagens através do atributo border, veja o
exemplo:
<img src= "tux2.jpg" border= "2">
<img src= "tux1.jpg" border= "8">
Podemos brincar com as imagens, isso vai depender da sua criatividade,

além de cores e animações podemos inserir imagens como fundo do site. Veja
exemplos:
Imagem Fixa/marca d’água:
A imagem de fundo faz parte da tag body. Basta você incluir na tag body
um parâmetro (BGproperties=fixed) para fazer com que o fundo fique fixo.
<body background= “tux3.jpg” bgproperties= “fixed”>

O código anterior gerou a seguinte página:
Quando existe conteúdo na página, então o que vai descer é apenas o

conteúdo e a imagem ficará fixa.
Imagem não fixa no fundo da tela.
Usaremos o mesmo exemplo anterior, só que usando apenas o

BACKGROUND. Exemplo:
<body background= “tux3.jpg”>
Dessa maneira, a imagem descerá juntamente com o conteúdo do site.
CRIAR TABELAS
Tabela é um conjunto de células organizadas na qual podemos alojar

diversos conteúdos. No início pode ser difícil trabalhar com esta estrutura, mas,
se desejar criar uma pagina de qualidade verá que ela oferece muitas
possibilidades.
Para iniciar, usa-se a tag <table>...</table> , as tabelas são formadas

por linhas e colunas, na qual representamos:
<tr>...</tr> : são as linhas;
<td>...</td>: são as colunas;
Para inserir uma tabela com três colunas e duas linhas, com borda
número 10, possuindo o texto dentro da tabela de forma justificada, deve-se
implementar o seguinte código:
O exemplo anterior gerou a seguinte página:

A tag <table align = center color = "black" border = 10 width =
"700"> serve para criar uma tabela que ficará centralizada na página da WEB,
possuindo cor preta, borda 10 e largura de 700 pixels. A tag <th class = "Leis
de Trânsito do Brasil" colspan = 3> pode ser implementada para mesclar
colunas. Nesse caso, ela irá mesclar 3 colunas. Para adicionar textos com
corpo justificado dentro de uma coluna, usa-se a tag <td align = justify>.
MARCADORES DE TEXTO
Os marcadores de textos também são listas, existem as listas numéricas e com

símbolos.
Para criar marcadores numéricos usa-se a tag <ol>...</ol>;
Para criar marcadores com símbolos usa-se <ul>...</ul>;
Veja no exemplo a seguir:

O exemplo anterior gerou a página:
Também, para não digitar sempre a tag <li> podemos usar da seguinte
maneira:
<ol start= “10”> , começará do 10 os marcadores;
CRIAR FORMULÁRIOS
Os formulários HTML são estruturas que permitem que usuários

submetam dados a uma determinada página. Esses dados podem ser
armazenados dependendo da aplicação.
Os forms são definidos pela tag <form>...</form>
Parâmetros do form
Action: é para onde os dados serão submetidos(tratados);
Method: é o método de transmissão dos dados, pode ter dois valores:
GET- Passa os valores pela URL, ou seja, podemos ver as variáveis

passadas na Url da página destino definida no campo action.
POST- assa as variáveis de maneira transparente para o usuário. É o

método mais aconselhável.
Elementos do Form
Podemos inserir vários dados em um formulário, definimos pela tag <input> .
Name: identifica a variável;
Campo Texto: entrada de texto normal;
Campo Senha: quando o usuário digita aparece apenas (*), mas esse
campo não possui criptografia, pode ser visto;
Hidden: fica visível ao digitar.
Password: fica os (*) ao digitar.
Value: define um valor para o documento;
Button: chama uma função que roda no browser;
Rádio: o usuário só pode escolher uma única opção.
Para que o interpretador saiba que as opções fazem parte do mesmo

grupo, e permita que só uma seja selecionada, basta colocar o mesmo nome
no parâmetro name dos botões rádio.
CheckBox: o usuário escolhe mais de uma opção;
Reset: limpa os campos;
Submit: envia;
Exemplo de um Formulário:
O código anterior gerou a seguinte página:
Inserir Barra
Para inserir uma barra usa-se a tag <hr></hr>, para deixá-la mais
grossa use o termo size(volume) juntamente com a tag <hr>.
Veja exemplo:
Veja como ficou:

Podemos controlar a largura das barras usando width =”...%”
(porcentagem), exemplo:
<hr width= “50%”>
FRAME
Os FRAMES possibilitam o uso de vários documentos HTML dentro de

um só. Isso deixa você dividir a tela em linhas e/ou colunas. Normalmente uma
página que usa Frames basicamente é dividida em dois elementos, os
Framesets e os Frames.
O FRAMESET é um arquivo do html, que substitui o <BODY> </BODY>

por <FRAMESET> </FRAMESET>.
Atributos ROWS e COLS
Rows - Determina a divisão de tela em linhas.
Cols - Determina a divisão de tela em Colunas.
À medida pode ser em porcentagem (%). Exemplo:
<frameset rows="25%, 25%, 50%"> </frameset>
Também pode se usar o "*" para determinar o resto. Exemplo:
<frameset Cols="25%, 50%,*"> </frameset>

Atributos FRAMESPACING e FRAMEBORDER
Framespacing - Determina a distância dos frames em pixels.
Frameborder - Diz se vai existir ou não bordas (1 para sim e 0 para não).
<frameset rows="25%, 25%, 50%" framespacing="3" frameborder="0">

</frameset
Tag <Frame>
As tags <frame> deverão ser organizadas no código de acordo com a

ordem dada pelo frameset, por que será assim que será exibido na tela.
<frameset rows="15%,*,75">
<frame src="http://www.google.com.br">
<frame src="http://www.saraiva.com.br">
<frame src="http://www.submarino.com.br">
</frameset>
Esse código gerou a seguinte página:

Atributo NAME e SRC
Indica o nome desse frame, facilitando sua pesquisa por ele, caso
precise. O SRC é utilizado para mostrar o caminho de onde está a página que
vai ser carregada.
IFRAMEs
Iframes são basicamente quadros que podem ser adicionados dentro

da página, para fazer uma espécie de "Mural de recados".
<iframe width='700' height='546' frameborder='0'

src='http://www.google.com.br'> </iframe>
<iframe width='400' height='450' frameborder='0'
src='http://www.saraiva.com.br'> </iframe>
Como você pode ver, alguns atributos são:
Width - Define a Largura
Height - Define a Altura
O código acima gerou a seguinte página:

TUTORIAL CRIADO POR
Anne Ingrid Feitosa Bezerra
Hugo Felipe Bezerra da Silva
Janailton Mick Vitor da Silva

Tutorial de HTML - Completo

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial de HTML - Completo

Uploaded by

Copyright:

Available Formats

SUMÁRIO

O QUE É HTML? ........................................................................................... 3

CONSTRUINDO SEU PRIMEIRO SITE ......................................................... 4

UTILIZANDO IMAGENS .................................................................................. 17

CRIAR TABELAS ............................................................................................. 22

MARCADORES DE TEXTO ............................................................................. 23

CRIAR FORMULÁRIOS .................................................................................... 24

HTML, HyperText Markup Language, ou Linguagem de Marcação de

Os documentos HTML são arquivos de textos que podem ser criados e

A estrutura básica de um documento em HTML possui as seguintes

Qualquer projeto feito nessa linguagem de marcação possui duas

Para escrever o cabeçalho, deve-se iniciar com <head> e terminar com

Dentro do cabeçalho existe uma tag chamada TITLE. Usando <title> e

Esse exemplo gerou a seguinte página:

<style> : Define a formatação em CSS

Assim como você faz a formatação do texto em HTML pode-se fazer em

As Linhas acrescentadas foram a partir de <style>...</style>, a primeira

Em CSS aplicam-se regras para a criação de documentos,

1- Um selector: informa ao browser qual é a parte do documento a qual se

2- Uma propriedade: especifica qual é o aspecto do layout a ser utilizado

3- Um valor: fornece o valor da propriedade (blue ou #0000FF e yellow ou

No exemplo anterior as regras foram combinadas, elas valem para o

body {color: blue}

body {background: yellow}

<script> Define programação de funções em páginas com script, podendo

Os links são pontos clicáveis do documento HTML que levam a qualquer

O código a seguir levará para outra página da web:

Obs: Em “nome-do-lugar-a-ser-levado” você coloca o arquivo HTML que você

Neste exemplo de código, a descrição: Perfil DELA, ficará sublinhado na

Cores Dos Links

Indica a cor dos links que já foram consultados.

Indica a cor do links ativados na página.

A notação para as cores dos links, alinks e vlinks é:

<body link= "#rrggbb" vlink= "#rrggbb" alink= "#rrggbb> </body>

Como fazer um link abrir em outra janela?

<a href= “http://badoo.com/anneingrid/” target= “_blank”> descrição</a>

Veja o exemplo como fica:

Como fazer uma imagem ter um link?

Author: define quem é o autor do site;

Description: o buscador apresentará como um resumo do seu site;

Keywords: nesta tag pode colocar maior numero de palavras, sempre

<meta http-equiv= "refresh" content= "5" url= "index.html">

Content: Tempo em segundos na qual irá para outra página;

Url: endereço, pode ser um link;

Para redigir o corpo, inicia-se com <body> e conclui-se com </body>.

Não deve ser confundido com o título do documento, o título é inserido

O subtítulo possui 6 níveis de tamanho, a tag usada é o <hy>, onde o “y”

<h1>...</h1>; <h2>...</h2>;...<h3>...</h3>; <h4>...</h4>; <h5>...</h5>;

Abaixo, tem-se um pequeno exemplo:

Esse código gerou a seguinte página:

<br> faz uma quebra de linha, não precisa fechar a tag.

O código acima gerou a seguinte página:

O código acima ficou da seguinte forma:

Negrito: podemos escrever o texto em negrito o incluindo dentro das etiquetas

Sublinhado: no uso de sublinhado devemos prestar atenção, pois os links

Subscrito e sobrescrito: as tags empregadas são: <sup> ... </sup> para os

Para utilizar imagens em HTML é simples, usamos a tag :

Onde <img> significa Imagem e <src> Source.

Esse "caminho-para-o-arquivo" pode ser uma área específica do computador,

Obs: É importante lembrar que as imagens possuem o tipo, seja JPG

Veja o exemplo como fica:

A função do ALT é basicamente fazer uma "Etiqueta". Quando o

<img src= "tux2.jpg" alt= "TUX FEMININO">

Esses dois atributos controlam a altura e a largura. Essa medida é