Você está na página 1de 31

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