HTML

O que HTML?
a lngua me de seu navegador!

HTML foi inventado em 1990 por um cientista
chamado TimBerners-Lee. A finalidade inicial
era a de tornar possvel o acesso e a troca de
informaes e de documentao de pesquisas,
entre cientistas de diferentes universidades.
O que HTML?
HTML uma linguagem que possibilita
apresentar informaes na Internet.
O que voc v quando abre uma pgina na
Internet a interpretao que seu navegador faz
do HTML.
Abra a pgina http://www.terra.com.br
Clique no menu Exibir -> Cdigo Fonte
O que HTML?
HTML: Linguagem de Marcao de HiperTexto:
HyperText Mark-up Language
HiperText: o oposto de linear. Nos tempos antigos -
quando mouse era apenas um rato caado por gatos -
os programas de computadores rodavam linearmente:
quando o programa executava uma ao tinha que
esperar a prxima linha de comando para executar a
prxima ao e assim por diante de linha em linha.
Com HTML as coisas so diferentes - voc pode
ir de onde estiver para onde quiser.
O que HTML?
O que so tags?
Tags so rtulos usados para informar ao
navegador como deve ser apresentado o website.
Todas as tags tm o mesmo formato: comeam
com um sinal de menor "<" e acabam com um
sinal de maior ">".
O que HTML?
O que so tags?
Tags so rtulos usados para informar ao
navegador como deve ser apresentado o website.
As tags tm o mesmo formato: comeam com um
sinal de menor "<" e acabam com um sinal de
maior ">".
Exemplo:
<strong>Este texto est em negrito!</strong>
O que HTML?
Mas, como toda regra tem sua exceo, e no
HTML a exceo que para algumas tags a
abertura e o fechamento se d na mesma tag. Tais
tags contm comandos que no necessitam de um
contedo para serem processados, isto , so tags
de comandos isolados.
Exemplo:
Um pulo de linha conseguido com a tag <br />.
O que XHTML?
Foi criada dentro do conceito de XML
XML (Extensible Marckup Language) uma
metalinguagem poderosa onde possvel criar
seus prprias tags para seus HiperTextos.
Ou seja, HTML reformulado para XML onde
as tags e atributos j esto definidos.
Qual a diferena entre XHTML e
HTML?
Em XHTML os documentos devem ser bem
formados;
Todas as tags devem ser escritas com letras
minsculas;
Tags devem estar convenientemente
aninhadas;
Uso de tags ou referncias de fechamento
obrigatrio;
Atributos id e alt.
O Consrcio W3C
rgo internacional com cerca de 300
membros, que agrega empresas, rgos
governamentais e organizaes
independentes, e que visa
desenvolver padres para a criao e a
interpretao de contedos para a Web.
Iniciando...
Quais programas preciso para construir uma
pgina da internet com HTML?
Voc precisa apenas de um editor de texto, como o
bloco de notas. Hoje em dia existem diversos editores
que auxiliam no desenvolvimento de pginas web
como o Dreamweaver, da Adobe.
As tags devem ser escritas com letras maisculas
ou minsculas?
Geralmente os navegadores reconhecem tanto letras
mausculas quanto minsculas, porm por conveno
utiliza-se apenas letras minsculas.
Atributos de tags
So informaes adicionais sobre um
elemento HTML.
Os atributos so definidos dentro da tag de
abertura do elemento.
A sintaxe para atributos consiste no nome do
atributo seguido de um sinal de = (igual) e o
valor do atributo entre aspas duplas.
Desenvolvendo a Primeira Pgina em
HTML
Ateno!
altamente recomendado que voc adote uma
estrutura clara e ntida para seu HTML, usando
linhas e indentao!
HTML
Como a estrutura de uma pgina HTML?
<html>
<head>
<title>Minha Pgina</title>
</head>
<body>
<p>Ol Mundo!</p>
</body>
</html
HTML
<html> uma tag de abertura e deve ser
fechada com a tag de fechamento quando
voc acabar de digitar seu documento HTML.
<head> uma tag que fornece informaes
sobre o documento.
<body> uma tag que abriga o contedo do
documento.
Principais Tags HTML
<html> uma tag de abertura e deve ser
fechada com a tag de fechamento quando
voc acabar de digitar seu documento HTML.
<head> uma tag que fornece informaes
sobre o documento.
<body> uma tag que abriga o contedo do
documento.
Tag HTML
Declarao DOCTYPE
A declarao DOCTYPE deve ser a primeira
coisa em um documento HTML, antes da tag
<html>.
DOCTYPE no uma tag HTML, uma instruo
para o navegador web sobre qual verso da
linguagem de marcao a pgina est sendo
escrita.
A declarao DOCTYPE se refere a Document
Type Definition (DTD). O DTD especifica as regras
para a linguagem de marcao, de modo que os
navegadores possam processar o
contedo corretamente.
Tag HTML
Tipos de DOCTYPE
Strict: Possuem todo os elementos e tags, menos os
elementos em desuso. No admite uso de Framesets.
Trasitional: Possuem todo os elementos e tags,
incluindo os elementos em desuso. No admite uso de
Framesets.
Frameset: Possuem todo os elementos e tags,
incluindo os elementos em desuso. Admite uso de
Framesets.
HTML 4.01 Strict
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML
4.01 / /
EN""http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01
Transitional / / EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML
4.01 Frameset / / EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0
Strict / / EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0
Transitional / /
EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML Frameset 1.0
<DOCTYPE html PUBLIC "- / / W3C / /
DTD XHTML Frameset 1.0 / / EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Exemplo:
A tag <center> est em desuso, portanto ao utilizar o
doctype do tipo strict, essa tag no ter efeito algum
no documento. J se utilizarmos o doctype do tipo
transitional ou frameset, essa tag ter efeito no
documento HTML.
Tag meta
A tag <meta> fornece metadados sobre o
documento HTML. A tag no ser exibida na pgina.
Os elementos <meta> normalmente usados para
especificar descrio da pgina,palavras-chave, autor
do documento, modificada pela ltima vez, e outros
metadados.
A tag <meta> sempre vai dentro do elemento head.
Os metadados podem ser utilizados pelos
navegadores (para exibir contedo ou uma pgina
de reload), mecanismos de busca (palavras-chave),
ou outros servios da web.
Tag meta
Atributos:
Name: identificador da tag;
Content: descrio das informaes relevantes;
http-equiv: ao a ser realizada pelo navegador;
Exemplo:
<meta name=author content=Vanessa dos Anjos
Borges />
<meta http-equiv=refresh
content=0;URL=www.terra.com.br/>
Tag meta
Mais sobre as tags meta
https://developer.mozilla.org/pt/Utilizando_meta
_tags
Tag title
A tag <title> indica o ttulo do documento
para o navegador;
A tag <title> sempre vai dentro do elemento
head.
Exemplo:
<title>
Minha primeira pgina em HTML.
</title>
Tag link
A tag <link> um elemento destinado a definir um link
identificador de um recurso relacionado com o
documento html. Difere-se da tag <a> pois restringe-se
a identificar elementos especficos do documento
html.
A tag <link> sempre vai dentro do elemento head.
Atributos:
rel: informa o tipo de relacionamento entre o documento
e o recurso linkado;
type: informa o tipo de MIME do recurso;
href: informa o endereo do recurso.
Tag link
Exemplo:
<link rel="shortcut icon" href="favicon.ico"
type="image/gif" />
Mais sobre a tag link
http://www.w3schools.com/tags/tag_link.asp
Tag body
Elemento que engloba todo o contedo de um
documento web.
<html>
<head>
<title>Minha Pgina</title>
</head>
<body>
<p>Ol Mundo! Esse contedo ser
exibido pelo browser!</p>
</body>
</html
Tag a
Elemento ncora ou hiperlink marca um
contedo que se destina a servir como uma
espcie de gatilho para navegao entre
documentos.
Exemplo:
<a href=index.xhtml>Isso um link!</a>
Atributos:
href: Atributo que informa o destino do hiperlink.
Tag abbr
Elemento para marcao de abreviaturas.
Exemplo
<abbr title=Instituto Nacional do Seguro
Social>INSS</abbr>
Atributo title
Informa o significado da abreviatura.
Tag acronym
Elemento para marcao de acrnimos.
Exemplo
<acronymtitle=Organizao do Tratado do Atlntico
Norte> OTAN </acronym>
Atributo title
Informa o significado da abreviatura.
Qual a diferena entre Abreviatura e
Acrnimo?
Basicamente...
Abreviatura: quando cada letra pronunciada
separadamente.
Exemplo: INSS
Acrnimo: quando lida como uma palavra.
Exemplo: OTAN
Tag adress
Elemento contendo informaes de contato
com autor do documento.
Exemplo:
<address>
Desenvolvido por Vanessa dos Anjos Borges
Fone: 123 4567
Cidade: Presidente Epitcio
</address>
Tag b
Elemento para marcao de textos em
negrito.
Exemplo:
<p>Dentro deste pargrafo <b>uma palavra
diferente</b> e segue o pargrafo </p>
O contedo uma palavra diferente ser em negrito.
E a tag <strong> ?
Copie o cdigo acima e substitua a tag <b> pela
tag <strong>
Funes similares!
Tag big
Elemento para marcar um trecho do texto
com tamanho de fonte maior.
Exemplo:
<p> Dentro deste pargrafo <big>uma palavra
diferente</big> e segue o pargrafo.
As letras que formam o contedo uma palavra
diferente sero em tamanho maior do que o restante
do pargrafo.
Tag blockquote
Elemento para marcar uma citao longa.
<blockquote>
Recomendamos fortemente que os autores de
documentos web usem as folhas de estilos em cascatas
para inserir aspas nas citaes delimitadas pelo
elemento blockquote. Lembramos que deve se evitar o
uso desse elemento para endentar textos.
< /blockquote >
Tag q
J a tag <q> marca citaes que no requerem
quebra de linhas por pargrafo.
<p> Joo disse: <q lang=pt-br> Eu amo a
Maria</q></p>
Atributo lang: especifica o cdigo da lngua corrente.
Fragmentos de texto marcados com essa tag
deveria ser renderizados com sinais
indicativos de citao, porm esse mecanismo
falho ou inexistente na maioria dos
browsers.
Tag br
Causa uma quebra de linha.
Exemplo:
<p>Este pargrafo possui
<br/>uma
<br/>duas
<br/>trs quebras de linha</p>
Tag code
Elemento para marcar fragmento de cdigo de
computador.
Exemplo:
<p> A seguir uma regra CSS para definir a cor de um
pargrafo:</p>
<code>
p:{color:red;}
</code>
Tag hr
Cria uma linha horizontal.
Exemplo:
<p>Este um trecho de texto superior.</p>
<hr />
<p>Este um trecho de texto inferior.</p>
Tags <h1> ... <h6>
Elementos destinados a marcar ttulos de um
documento. Esto previstos seis tipos de
ttulos, sendo o primeiro o mais importante.
Exemplo:
<h1>Este o ttulo mais importante.</h1>
<h2>Ttulo 2</h2>
<h3>Ttulo 3</h3>
<h4>Ttulo 4</h4>
<h5>Ttulo 5</h5>
<h6>Este o ttulo menos importante.</h6>
Tags del e ins
del: elemento que marca trechos de texto que
foram eliminados devido a atualizao ou
publicao de uma nova verso do
documento.
Exemplo:
<p>Neste pargrafo <del>estas palavras </del> foram
excludas do texto!</p>
Tag del e ins
ins: elemento que marca trechos de texto que
foram inseridos devido a atualizao ou
publicao de uma nova verso do
documento.
Exemplo:
<p>Neste pargrafo <del>estas palavras </del>
<ins>foramsubstitudas por estas</ins> no texto!</p>
Tag i
Elemento para marcao de texto em itlico.
Exemplo:
<p>Neste pargrafo <i>estas palavras </i> esto em
itlico!</p>
Tag p
Elemento que marca um pargrafo no
documento HTML.
Exemplo:
<p>Primeiro pargrafo.</p>
<p>Segundo pargrafo.</p>
<p>Terceiro pargrafo.</p>
<p>Quarto pargrafo.</p>
<p>Quinto pargrafo.</p>
Tag pre
Texto em ema tag pre exibido em uma
fonte de largura fixa (geralmente Courier), e
preserva os espaos e quebras de linha.
Exemplo:
<pre>
Todo o texto dentro de uma tag pre
exibido emuma fonte de largura fixa
e tambmso preservados
tanto espaos
quanto quebras de linha.
</pre>
Tag small
Elemento para marcar um trecho do texto
com tamanho de fonte menor.
Exemplo:
<p> Dentro deste pargrafo <small>uma palavra
diferente</small> e segue o pargrafo.
As letras que formam o contedo uma palavra
diferente sero em tamanho menor do que o restante
do pargrafo.
Tag sub e sup
A tag sup cria um efeito sobrescrito no texto.
Exemplo:
<p> O nome do 1<sup>o</sup> colocado Joo .</p>
A tag sub cria um efeito subescrito no texto.
Exemplo:
<p>A frmula qumica da gua H<sub>2</sub>O.</p>
Tag img
Elemento que possibilita inserir uma imagem
no documento.
Exemplo:
<img src="angry.gif" alt="Angry face" />
Atributos
src = indica o caminho da imagem
alt = mensagem que exibida caso a imagem no seja
encontrada
Tags referentes a listas
dl: Elemento destinado a marcar listas de
definio.
Exemplo:
<dl>
<dt>Caf</dt>
<dd>- Bebida quente e de colorao escura.</dd>
<dt>Leite</dt>
<dd>- Bebida gelada de colao branca.</dd>
</dl>
dt: elemento que marca o ttulo na lista de definio.
Dd: elemento que marca a descrio na lista de definio.
ol: Esta tag usada para criar uma lista
ordenada.
Exemplo:
<ol>
<li>Avio</li>
<li>nibus</li>
</ol>
li: elemento que marca o item da lista.
ul: Esta tag usada para criar uma lista no
ordenada.
Exemplo:
<ul>
<li>Avio</li>
<li>nibus</li>
</ul>
li: elemento que marca o item da lista.
Tags referentes a tabela
table: elemento que define uma tabela
tr: elemento que define uma linha da tabela.
td: elemento que define uma coluna da tabela.
Exemplo:
<table>
<tr>
<td>Ms</td>
<td>Investimento</td>
</tr>
<tr>
<td>Janeiro</td>
<td>R$100,00</td>
</tr>
</table>
thead: define o cabealho da tabela.
th: define as colunas do cabealho da tabela.
tbody: define o corpo da tabela.
tfoot: define o rodap da tabela.
Exemplo:
<table>
<thead>
<tr>
<th>Ms</th>
<th>Investimento</th>
</tr>
</thead>
</tbody>
<tr>
<td>Janeiro</td>
<td>R$100,00</td>
</tr>
</tbody>
</tfoot>
<tr>
<td>1 ms</td>
<td>Total: R$100,00</td>
</tr>
</tfoot>
</table>
Atributos da tag table:
border: define a largura das bordas da tabela (px);
cellpadding: define o espao entre o contedo de uma
clula e a borda da clula (px);
cellspacing: define o espao entre as clulas (px);
width: define a largura da tabela (px e %).
Exemplo:
<table border=1 cellpadding =2 cellspacing =1
width =50%>
...
</table>
Tag caption: Tag que informa o ttulo da tabela. Essa tag
precisa ser colocada logo abaixo da tag table
<table width="100%" border="1">
<caption> Livraria Epitaciana</caption>
<tr>
<th>ISBN</th>
<th>Ttulo</th>
<th>Preo</th>
</tr>
<tr>
<td>3476896</td>
<td>Use a cabea! Web Designer</td>
<td>R$100,00</td>
</tr>
</table>
<table width="100%" border="1">
<caption> </caption>
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Elemento <tr>
Atributo rowspan: mescla linhas
Elemento <td>
Atributo colspan: mescla colunas
<table border=1>
<tr>
<td rowspan=3>Production</td>
<td>Raha Mutisya</td>
<td>1493</td>
</tr>
<tr>
<td>ShalomBuraka</td>
<td>3829</td>
</tr>
<tr>
<td>Brandy Davis</td>
<td>0283</td>
</tr>
</table>
<table border=1>
<tr>
<td colspan=2>Production</td>
</tr>
<tr>
<td>Raha Mutisya</td>
<td>1493</td>
</tr>
<tr>
<td>ShalomBuraka</td>
<td>3829</td>
</tr>
<tr>
<td>Brandy Davis</td>
<td>0283</td>
</tr>
</table>
Formulrio HTML
Formulrios so sees especficas de um
documento HTML projetados para coletar
dados fornecidos pelo usurios e envi-los
para serem processados por um script.
Tag <form>
Ele contm um layout composto pelos
contedos do formulrio.
Atributos
Name: nome do formulrio
Action: Especifica para onde mandar os dados
contidos no formulrio
Method: o mtodo no qual os dados sero
mandados (POST e GET)
Tag <label>
Define um rtulo para um controle.
Atributos:
For: identifica o seu respectivo controle pelo
atributo id.
Exemplo:
<label for=firstname>Primeiro nome: </label>
<input type="text" name="firstname
id="firstname">
Tag <input />
Cria objetos do formulrio como caixas de
texto, caixa de senha, radio button, checkbox,
seleo de arquivo, botes atravs do atributo
type.
Tag <select> e Tag <option>
Cria objetos de seleo mltiplas (lista ou
caixa de seleo)
Select: define a abertura e o fechamento do
objeto
Option: define os itens de opo do objeto
Tag <textarea>
Cria objetos de rea de texto
Tag <fieldset> e Tag <legend>
Organiza os objetos do formulrio.
Fieldset: delimita o agrupamento dos objetos
Legend: d um ttulo ao agrupamento
<form>
<fieldset>
<legend>Formulrio de Cadastro</legend>
<label for=firstname>Primeiro nome: </label>
<input type="text" name="firstname"/>
<br/>
<label for=lastname> ltimo nome: </label>
<input type="text" name="lastname"/>
<br/>
<input type="radio" name="sex" value="male"/> Masculino <br/>
<input type="radio" name="sex" value="female"/> Feminino
<br/>
<input type="checkbox" name="bike"/> Eu tenho uma bicicleta
<br/>
<input type="checkbox" name="car">/ Eu tenho um carro
<br/>
<label for="unittype1">Select unit type:</label>
<select name="unittype1">
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3" selected> Snipey </option>
<option value="4"> Max </option>
</select>
<label for="unittype2">Select unit type:</label>
<select name="unittype2 multiple>
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3" selected> Snipey </option>
<option value="4"> Max </option>
</select>
<br/>
<textarea cols="80" rows=80 name="comments"></textarea>
<br/>
<input type="submit" value=Enviar dados" />
</fieldset>
</form>
Comentrio em HTML
<html>
<head>
<title>Pgina</title>
</head>
<body>
<p>
Este texto est normal.
</p>
<p>
Este texto <b>tambm</b> normal
</p>

Isto est fora do comentrio.
</body>
</html>
Fontes
SILVA, MAURICIO SAMY. Construindo Sites Com Css E
(x)html. NOVATEC, 2007.

HTML

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

HTML

Uploaded by

Copyright:

Available Formats

O que HTML?

a lngua me de seu navegador!

You might also like