Anda di halaman 1dari 15

Tutorial

1. O que HTML?
HTML uma linguagem para descrever pginas web.
HTML vem do ingles Hyper Text Markup Language que significa Linguagem de Marcao de
Hipertexto.
Para entender este concepto vamos a separar os termos que o conformam:
Linguagem: um mtodo padronizado para comunicar instrues para um computador.
Marcao: ou anotao marcar o documento para indicar algo. Em HTML, a marcao
feita com tags para indicar a estrutura do documento.
Tags: so marcas especiais definidas por uma etiqueta que descreve o papel de cada
elemento dentro do texto. As tags em HTML permitem ao browser interpretar e exibir a pgina
conforme ela foi concebida.
Hipertexto: um modelo de documento que contem blocos de textos, palavras, imagens entre
outros e que tm referncias especficas denominadas hiperlinks (ou simplesmente links) que
ligam o documento com outros documentos de hipertexto.
Basicamente, um documento composto por pginas e ligaes entre elas.
Resumindo:
HTML (linguagem de marcao de hipertexto) ento seria uma linguagem que me permite marcar
hipertextos com o fim de adicionar informaes particulares sobre esse texto. Basicamente, HTML
indica a estrutura de um documento mediante o uso de tags; poderia se dizer ento que os comandos
usados para passar instrues ao computador com a linguagem HTML so as tags.
Um arquivo HTML deve ter uma extenso de arquivo htm ou html e pode ser criado usando um
simples editor de textos. Os documentos ou arquivos html tambm so chamados pginas web.

2. Breve Historia
A linguagem de HTML foi originalmente concebida por Tim Berners-Lee, e popularizada pelo browser
Mosaic. No decorrer dos anos 90 HTML floresceu com o crescimento explosivo da Web. Durante este
tempo, o cdigo HTML expandiu-se de variadas maneiras. A Web depende do fato em que autores das
pginas web e as empresas compartilhem as mesmas convenes HTML. Isso levou a que se realizasse
um trabalho conjunto na criao das especificaes HTML [1].
Foi assim, que a partir do meio da dcada dos 90, foi criado o W3C, entidade com objetivo especfico
de desenvolver padres para serem usados na Web. Dessa maneira surgiram rapidamente diversas
verses que mostraram o processo de evoluo da linguagem.
Version
HTML
HTML+
HTML 2.0
HTML 3.2

Year
1991
1993
1995
1997

Recommendations (recomendaes do W3C)


HTML inicial no estandarizado
No chegou a ser recomendao
W3C Recommendation
W3C Recommendation
1

HTML 4.01
XHTML 1.0

1999
2000

HTML5

2012

W3C Recommendation
W3C Recommendation
W3C Candidate Recommendation
(Em caminho de ser recomendao oficial)

Cada verso do HTML tentou refletir um maior consenso entre os industriais, de modo que o
investimento feito pelos fornecedores satisfeitos no se desperdice e ainda que os seus documentos no
se tornem ilegveis ou invlidos num perodo de tempo curto [1].

3. HTML e XHTML
Quando o HTML foi criado, ele baseou-se na metalinguagem 1 SGML (Standard Generalized Markup
Language). A SGML permite definir linguagens de marcao para documentos, HTML uma
linguagem definida com SGML (exceto HTML 5).
XML (eXtensible Markup Language) outra metalinguagem baseada em SGML. XML uma
recomendao da W3C para gerar linguagens de marcao para necessidades especiais. Pode-se
considerar ento que XML um subtipo/subconjunto da SGML projetada para ser mais simples de se
analisar gramaticalmente e de se processar do que SGML (tentativa de simplificar SGML).
XHTML (Extensible HyperText Mark-up Language) 1.0 nasceu como uma restruturao do HTML 4
existente nessa poca. XHTML uma maneira mais bem estruturada de escrever cdigo para pginas
web. Ele se baseia em XML no lugar de se basear em SGML. XHTML faz uso de uma sintaxe mais
rigorosa e menos ambgua para tornar o HTML mais simples de ser processado e estendido.
O World Wide Web Consortium (W3C) continuam mantendo a recomendao HTML 4.01, e a
especificao para HTML5 e XHTML5 est sendo ativamente desenvolvida.

SGML
HTML

XML
XHTML

4. Sintaxe 2
HTML usa tags para descrever um documento.
Todas as tags comeam com um sinal de menor "<" e acabam com um sinal de maior ">" como por
exemplo <html>.
1

Metalinguagem: linguagem existente para definir outras linguagens.

2 Sintaxe a forma como as instrues de uma linguagem so escritas, mas sem atender ao seu significado
2

Usualmente encontramos dois tipos de tags:

tags de abertura: <comando>

tags de fechamento: </comando>. A diferena entre elas que na tag de fechamento existe um
barra "/".

O contedo que estiver contido entre uma tag de abertura e uma tag de fechamento ser processado
segundo o comando (nome-tag) contido na tag como mostra a figura a seguir.

5. Elementos
Os elementos HTML constituem um documento html. Os elementos HTML so definidos usando
tags (etiquetas) HTML. As tags servem para definir elementos HTML. Um elemento HTML tudo
o que estiver contido entre a tag de abertura e a tag de fechamento, incluindo as tags.

Exemplo: O elemento pargrafo indicado pela tag p que informa ao navegador que todo o texto
colocado entre <p> e </p> um pargrafo

6. Atributos
As tags podem ter atributos. Os atributos podem prover informao adicional sobre os elementos
HTML na sua pgina.
Os atributos vem em pares nome/valor como este: nome="valor".
Os atributos so sempre adicionados tag de abertura de um elemento HTML.

7. Diferenas entre HTML e XHTML


HTML

XHTML

Permite maisculas e minsculas.


Exemplos:
<LINK REL="stylesheet" HREF="styles.css">
<link REL="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css">

Todas as tags e os atributos devem ser escritos em


minsculas
Exemplo:
<link rel="stylesheet" href="styles.css">

No precisamente dever se fechar todas as tags. Tags de fechamento so obrigatrias.


Exemplo: elementos vazios
Elementos vazios no precisam de fechamento
na mesma tag.
Exemplos:
<link rel="stylesheet" href="styles.css">
<br>

Elementos vazios* (aqueles que no possuim tag de


fechamento) devem ser fechados com:
espao + /
Exemplos:
<link rel="stylesheet" href="styles.css" />
<br />

Em html os valores podem ou no ir entre aspas Todos os valores dos atributos devem ir entre aspas:
Exemplo:
Exemplo:
<link rel="stylesheet" href=styles.css>
<link rel="stylesheet" href=styles.css>
Alguns atributos no possuem igualdade
Todo atributo deve ter um valor associado a ele. Se
Exemplo: <input checked>
o atributo no possuir igualdade em html, no xhtml
O exemplo correto em html e errado em xhtml deve ser igual a ele mesmo entre aspas.
Exemplo: <input checked= checked>
Tem o atributo name

Inutilizao do atributo "name" em troca do atributo


"id".

*Elementos vazios possuem apenas uma tag de abertura que possui os seus respectivos atributos.
Como no possuem tag de fechamento, no XHTML deve-se adicionar espao + / no final do tag de
abertura. Exemplo: <br />
Recomenda-se a escrita de um cdigo mais estrito seguindo as especificaes do XHTML.

8. Estrutura
A estrutura bsica de uma pgina html ilustrada na Figura a seguir.

<html>
<head>
<title> ttulo do documento (no visvel no
texto do documento). </title>
</head>
<body>
<h1> Este meu ttulo visvel .
</h1>
<p> Este um pargrafo.</p>
</body>
</html>
Como pode ser visto na Figura, um documento html est formado por vrios elementos bsicos. (para
fines ilustrativos, botaram-se alguns elementos em uma caixa. Os elementos identificam-se mediante
de seus tags respectivos. Dessa maneira podemos definir os elementos mais importantes:

HTML: O texto colocado entre <html> e </html> descreve o site web. Dentro dessas tags
temos duas sees : head e body que indicam o cabealho do documento e o corpo,
respectivamente.
Em XHTML, o elemento HTML deve conter o atributo xmlns para associa-lo com um
namespace XHTML. O namespace para XHTML http://www.w3.org/1999/xhtml.
Exemplo: <html xmlns="http://www.w3.org/1999/xhtml">
O atributo xmlns requerido em XHTML, mas invlido em HTML.

Cabealho: O texto entre <head> e </head> a informao de cabealho. As informaes de


cabealho so configuraes da pgina. O texto dentro de head no mostrado na janela do
navegador.

Corpo: O texto entre as tags <body> e </body> define o incio e o fim do corpo do documento
HTML e o texto que ser mostrado no seu navegador (contedo visible).

Ttulo: O texto entre <title> e </title> o ttulo do seu documento. O ttulo mostrado na barra
de ttulo do navegador (a barra mais superior do navegador). Deve ser utilizado sempre dentro
do cabealho.

Cabealho: O texto entre as tags <h1> e </h1> representa um ttulo.


5

Pargrafo: O texto entre as tags <p> e </p> representa um pargrafo.

A seguir estudaremos cada elemento com maior detalhe:

9. Cabealhos ou Ttulos
Ttulos so definidos com as tags <h1> at <h6>.
<h1> define o ttulo maior. A <h6> define o ttulo menor.
<h1>Este
<h2>Este
<h3>Este
<h4>Este
<h5>Este
<h6>Este

um
um
um
um
um
um

ttulo</h1>
ttulo</h2>
ttulo</h3>
ttulo</h4>
ttulo</h5>
ttulo</h6>

A HTML automaticamente adiciona uma linha em branco extra antes e aps um ttulo.
Lembre-se de usar cabealhos para por ttulos ao seu documento e no para fazer q o texto se veja
maior ou em negrito. Os motores de busca usam os cabealhos para indexar a estrutura e o contedo
das suas pginas web.
Lembre-se que um cabealhos indica um ttulo visvel no documento como visto no exemplo. O
elemento que usa as tags <title> e </title> no cabealho representa o ttulo do documento de uma
maneira abstrata e no fica visvel dentro do documento (geralmente fica na aba ou na barra superior da
janela do navegador).
Como os usurios acostumam ver rapidamente os ttulos de uma pgina web antes que o contedo,
importante que os ttulos mostrem a estrutura de um documento.
H1 deve ser usado para os cabealhos mais importantes, seguido de h2 e assim sucessivamente.

10.

Pargrafos

Os pargrafos so definidos com a tag<p>.


<p>Este um pargrafo</p>
<p>Este outro pargrafo</p>

A HTML adiciona automaticamente uma linha em branco extra antes e aps um pargrafo.

11.

Links/hiperlink (vnculo/hipervnculo)

HTML usa um link para vincular-se a qualquer recurso na Web.


Um link pode ser usado para direcionar o usurio para uma outra pgina, para um ponto da mesma
pgina, abrir uma imagem, fazer download de um arquivo, enviar um e-mail, etc.
HTML usa a tag <a> e </a> (ncora) para criar um link.
6

Um link composto por duas ncoras:

A ncora-fonte: no documento de partida usando a tag <a> para criar uma ncora desde onde
vincular. Neste documento de partida, as palavras entre as tags de abertura e fechamento da
ncora sero exibidas como um link fonte (de partida).

A ncora-alvo: representaria o documento a ser aberto, o arquivo a ser baixado, etc. Para indicar
o recurso alvo do link, adiciona-se o atributo href (do ingls Hyperlink Reference) dentro do
tag de abertura <a>.

Assim, a sintaxe de um link seria:


<a href="url">Texto a ser exibido</a>

Exemplo
Esta ncora define um vnculo para o google:
<a href="http://www.google.com/">Visite o Google!</a>

Atributo Alvo (Target)


Pode-se adicionar o atributo target para definir onde o documento vinculado ser aberto. Se o valor do
atributo for _blank, ento o documento ser aberto numa nova janela do navegador.
Exemplo:
<a href="http://www.google.com/" target="_blank">Visite as W3Schools!</a>

Links internos a uma pgina


O atributo nome usado para criar uma ncora nomeada. Quando usamos ncoras nomeadas podemos
criar vnculos que saltam diretamente para uma seo especfica em uma pgina, em vez de deixar o
usurio rolar [a janela (scroll)] por todo parte para encontrar o que ele/ela est procurando.
Abaixo est a sintaxe de uma ncora nomeada:
<a name="tips">Seo de Dicas teis</a>

O atributo nome usado para criar uma ncora nomeada. O nome da ncora pode ser qualquer texto
que voc quiser usar.
Voc deve observar que a ncora nomeada no exibida de maneira especial.
Um hipervnculo para a Seo de Dicas teis de DENTRO do arquivo "html_links.asp" seria assim:
<a href="#tips">Saltar para a Seo de Dicas teis</a>

ncoras nomeadas so geralmente usadas para criar "sumrios" ("table of contents") no incio de um
documento grande. A cada captulo dentro do documento dado um nome de ncora, e vnculos para
7

cada uma destas ncoras so colocados no topo do documento.


Se um navegador no puder encontrar uma ncora nomeada que foi especificada, ele vai para o topo do
documento. Nenhum erro ocorre.

12.

Imagens

Em HTML, as imagens so definidas com a tag <img>


Para exibir uma imagen em uma pgina, voc necessita usar o atributo src. Src significa "source"
[fonte]. O valor do atributo src a URL da imagem que voc quer exibir na sua pgina.
A sintaxe para definir uma imagem :
<img src="url">

O URL aponta para o local onde a imagem est armazenada. Se a imagem estiver na mesma pasta na
qual esta o documento web que voc est editando, basta escrever o nome da imagem.
<img src="dog.jpg">

Se o recurso est na web, pode se escrever o endereo web completo da imagem.


<img src="https://www.cachorro.com.br/dog.jpg" >

A tag <img> vazia (serve para representar um elemento vazio), o que significa que ela somente tem
atributos e no tem tag de fechamento.
O navegador mostra a imagem onde encontra o tag image. Se voc coloca uma tag image entre dois
pargrafos, o navegador mostra o primeiro pargrafo, depois a imagem, e depois o segundo pargrafo.
Atributo Alt
O atributo alt usado para definir um "texto alternativo" para uma imagem. O valor do atributo alt
um texto definido pelo autor:
<img src="boat.gif" alt="Big Boat">

O atributo "alt" provee informao alternativa para uma imagem em caso o navegador no possa
carregar a imagem.
Atributos width e height
So usados para indicar uma altura e largura.
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

uma boa prtica especificar estes atributos para uma imagem pois assim o navegador reserva espao
para a imagem enquanto a pgina carrega, de outro modo, a disposio de elementos poderia variar
quando terminar de carregar a imagem.

13.

Tabelas

As tabelas so definidas com a tag <table>. Uma tabela dividida em linhas (com a tag <tr> de table
row), e cada linha dividida em clulas de dados (com a tag <td> de table data). Uma clula de
dados pode conter texto, imagens, listas, pargrafos, formulrios, outras tabelas, etc.
Exemplo
<table border="1">
<tr>
<td>linha
<td>linha
</tr>
<tr>
<td>linha
<td>linha
</tr>
</table>

Como aparece no navegador:

1, clula 1</td>
1, clula 2</td>
2, clula 1</td>
2, clula 2</td>

O atributo border serve para especificar a grossura da borda. Sem o atributo border, a tabela ser
mostrada sem bordas. O valor do atributo representa a grossura da borda comeando com 1. A maior
nmero a grossura vai se incrementando.
Cabealhos em uma Tabela
Os cabealhos em uma tabela so definidos com a tag <th> para representar uma clula no lugar de
<td>.
Exemplo

Como aparece no navegador:

<table border="1">
<tr>
<th>Cabealho</th>
<th>Outro Cabealho</th>
</tr>
<tr>
<td>linha 1, clula 1</td>
<td>linha 1, clula 2</td>
</tr>
<tr>
<td>linha 2, clula 1</td>
<td>linha 2, clula 2</td>
</tr>
</table>

14.

Listas

Servem para representar um conjunto de itens.


A HTML suporta listas ordenadas, no ordenadas e de definies.
Dentro de um item de uma lista voc pode colocar pargrafos, quebras de linha, imagens, vnculos,
outras listas, etc.
Listas No Ordenadas
Representa uma lista de itens onde os elementos no precisam de uma ordem especfica.
As listas de itens so marcadas com bullets (tipicamente pequenos crculos pretos).
Uma lista no ordenada comea com a tag <ul> (do ingls unordered list). Cada item da lista comea
com a tag <li> (do ingls list item)
Exemplo:
<ul>
<li>Caf</li>
<li>Leite</li>
</ul>

Como aparece no navegador:


Caf
Leite

Dentro de um item de uma lista voc pode colocar pargrafos, quebras de linha, imagens, vnculos,
outras listas, etc.
Listas Ordenadas
Uma lista ordenada tambm uma lista de itens. As listas de itens so marcadas com nmeros.
Uma lista ordenada comea com a tag <ol> (do ingls ordered list). Cada item da lista comea com a
tag <li> (do ingls list item).
Exemplo:
<ol>
</ol>

15.

<li>Caf</li>
<li>Leite</li>

Como aparece no navegador:


1. Caf
2. Leite

Outros elementos

Comentrios em HTML
A tag de comentrio usada para inserir um comentrio no cdigo fonte HTML. Um comentrio ser
ignorado pelo navegador.
Exemplo
<!-- Este um comentrio -->

10

Observe que voc necessita de um ponto de exclamao aps a chave de abertura, mas no antes da
chave de fechamento.

Quebras de linha
A tag br usada quando voc quer terminar uma linha, mas no quer comear um novo pargrafo. A
tag br fora a quebra de linha onde quer que voc a coloque.
<p>Este <br /> um pargrafo com quebras de linha</p>

A tag br uma tag vazia. Portanto em html pode-se usar a tag <br>. Porm em xhtml deve-se usar a
tag <br />.

16.

Formatao de texto

HTML define uma srie de elementos para formatar a sada, como texto em negrito ou itlico.
A seguir mostram-se alguns tags de formatao :
Tag

Descrio vem do ingls:

Descrio em portugues

<b>

bold

negrito

<i>

italic

itlico

<em>

emphasized

enfatizado

<strong>

strong

Texto importante

<sub>

subscript

subescrito

<sup>

superscript

superescrito

<ins>

inserted

inserido

<del>

deleted

cancelado (riscado)

*Lembre-se que geralmente o nome dos tags vm do nome em ingls daquilo que representam (2 col).
Exemplo:
<!DOCTYPE html>
<html>
<body>
<b>Este texto est em negrito</b>
<br>
<i>Este texto est em itlico</i>
<br>
<em>Este texto est enfatizado </em>
<br>
<strong> Este texto importante </strong><br>
Este texto contm <sub>subescrito</sub>
<br>
Este texto contm <sup>superescrito</sup> <br>
<ins>Este texto est inserido </ins>
<br>
<del>Este texto est riscado </del>
<br>
</body>
</html>

11

17.

Estilos - CSS

Junto com a verso 4.0 de HTML, o CSS foi introduzido. O intuito do CSS fornecer uma forma
melhor para dar estilo aos elementos HTML. CSS vem do ingls: Cascading Style Sheets que
significa Folha de Estilos em Cascata.
CSS uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS
controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito
mais.
HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona
mais opes e mais preciso e sofisticado. CSS suportado por todos os navegadores atuais.
HTML usado para estruturar contedos. CSS usado para formatar contedos estruturados.

Sintaxe do CSS
Para definir a formatao precisamos definir regras.
Uma regra CSS tem dois partes principais: um seletor, e um conjunto de declaraes como mostra a
Figura a seguir.

O seletor indica o elemento(s) HTML ao qual se deseja dar estilo. Cada declarao consiste de uma
propriedade (atributo visual que se deseja mudar/definir) e um valor atribudo a essa propriedade.
12

Para definir um conjunto de propriedades visuais para o mesmo seletor, usaremos varias declaraes
como mostra a Figura a seguir.

Como Usar Estilos


Quando um navegador l uma folha de estilo, ele formata o documento html de acordo com ela. H trs
maneiras de inserir uma folha de estilo:

Inline (local)

Um estilo local (inline) deve ser usado quando um estilo nico deve ser aplicado a uma nica
ocorrncia de um elemento.
Para usar estilos locais (inline) voc usa o atributo de estilo na tag relevante. O atributo de estilo pode
conter qualquer propriedade CSS. O exemplo mostra como mudar a cor e a margem esquerda de um
pargrafo:
<p style="color: red; margin-left: 20px;">
Este um pargrafo
</p>

Internal (Incorporada no head)

Uma folha de estilo interna ideal quando um documento especfico tem um estilo nico. Voc define
estilos internos dentro do elemento <head> com a tag <style>.
<head>
<style type="text/css">
body {background-color:red;}
p {color:blue;}
</style>
</head>

External (Folha de Estilo Externa)

Uma folha de estilo externa ideal quando o estilo aplicado em muitas pginas. Com uma folha de
estilo externa, voc pode mudar a aparncia de um stio Web inteiro pela mudana de um arquivo nico
CSS. Cada pgina deve vincular-se folha de estilo usando a tag <link>. A tag <link> vai dentro do
elemento <head>.
<head>
<link rel="stylesheet" type="text/css"
href="meuestilo.css">

13

</head>

Contudo, a forma mais aconselhvel para adicionar CSS a um documento HTML pondo a sintaxe
CSS em um arquivo separado (external).

18.

DOCTYPE

Um DOCTYPE deve ir posicionado na primeira declarao de um documento HTML.


Um DOCTYPE (do ingls Document Type) indica ao navegador qual o tipo e verso do documento
que deve analisar aps essa declarao. Como existem muitos tipos de documentos diferentes na web,
um navegador exibir adequadamente uma pagina HTML se conhece o seu tipo e verso.
importante notar que a declarao DOCTYPE no uma tag HTML, seno uma instruo para o
navegador antes de comear com a sintaxe HTML.
O DOCTYPE da maior parte dos documentos HTML e XHTML requerem uma referencia para uma
DTD (Document Type Definition) que significa Definio do Tipo de Documento. Uma DTD
especifica as regras de uma linguagem de marcao. J o HTML5 no requer um DTD. Mas ainda no
uma verso oficial.
Exemplos:
HTML5 (no precisa DTD)
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Tipos de DOCTYPE para XHTML


Existem trs tipos de DOCTYPE para XHTML:

Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

a mais rgida das declaraes. Documentos neste modo no admitem qualquer item de
formatao dentro dos elementos e nem elementos em desuso (deprecated) segundo as
especificaes do W3C. So indicados para o uso com folhas de estilo em cascata, com marcao
totalmente independente da apresentao

Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Possui maior flexibilidade e indicada para documentos que ainda utilizam formatao embutida
em tags e elementos em desuso (deprecated).No admite marcao para frames

14

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">

Admite tudo o que admite a declarao Transitional e acrescenta os elementos especficos para
frames.
Bibliografia
[1] http://www.w3.org/TR/html401/intro/intro.html.
[2] http://www.w3schools.com/
[3] http://html.net/

15

Anda mungkin juga menyukai