Você está na página 1de 86

HTML

Conceitos
1 - Web: Abreviao de World Wide Web, um
sistema
de
documentos
em
hipermdia
(hypertextos, vdeos, sons, imagens, etc.) que
so interligados.
2 - Site: Conjunto de pginas web que
representam uma pessoa, empresa ou instituio
na web.
3 - Browser: Tambm denominado de navegador,
software utilizado para ler e interpretar as
pginas web, possibilitando que os usurios
interajam com as mesmas.

Conceitos
4 - URL: Uniform Resource Locator
Localizador Uniforme de Recursos uma
sequncia de caracteres que define o
endereo de um site ou recurso da web.
5 - HTTP: O Hypertext Transfer Protocol,
Protocolo de Transferncia de Hipertexto
um protocolo de comunicao (presente na
camada de aplicao, segundo o Modelo de
Referncia OSI) muito utilizado na internet.

Introduo ao HTML
HTML significa Hyper Text Markup
Language e a linguagem de
marcao de hipertexto.
Princpios bsicos da Web:
HTTP (Hiper Text Transfer Protocol)
HTML (Hiper Text Markup Language).

Introduo ao HTML
Requisitos para o desenvolvimento de uma
pgina WEB:
Conhecer a linguagem HTML para escrever
o cdigo fonte de sua pgina;
Um editor de texto para gerar o seu cdigo
fonte (Bloco de notas, Front Page,
Dremweaver, entre outros);
Um navegador de internet (browser) para
visualizar as suas pginas (Internet
Explorer, Netscape, etc).

Sintaxe da HTML
Os comandos HTML so chamados de TAGs
(etiquetas);
Os comandos tm uma sintaxe prpria, e
seguem algumas regras:
As TAGs aparecem sempre entre sinais de
menor que (<) e maior que (>);
Geralmente so utilizadas aos pares,
sendo que a TAG de finalizao de um
comando qualquer finalizada com a
precedncia de uma barra (/).

Documento HTML
<Nome_da_TAG Atributo_1 = valor_1
Atributo_2 =
valor_2>.....</Nome_da_TAG>

TAGs bsicas
<html> ... </html>
<head> ... </head>
<title> ... </title>
<body> ... </body>

Atributos
Bgcolor
Background
Text
Link

Comentrios no HTML e Tag


meta
<!-- Comentrio -->
<head>
<meta http-equiv=Content-Type
content=text/html; charset=utf-8 >
</head>

Caracteres especiais

Caracteres especiais

Cabealhos <hn>.
<body>
<h1> cabealho
<h2> cabealho
<h3> cabealho
<h4> cabealho
<h5> cabealho
<h6> cabealho
</body>

nvel
nvel
nvel
nvel
nvel
nvel

1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>

Pargrafos <p>.
<p> ... </p>
<p align=right> ... </p>
<p align=center> ... </p>
<p align=justify> ... </p>

Quebra de linha <br>


<body>
Quebra de linha<br>
<p>Quebra de linha</p><br>
</body>

Fonte <font>
<body>
<font face=arial color=blue
size=10>
A fonte do meu texto vai ficar arial,
cor azul e tamanho 10.
</font>
</body>

Negrito<b>, Itlico<i>,
sublinhado<u> e riscado<s>
<body>
S a palavra
aqui </b>
S a palavra
</i>
S a palavra
aqui </u>
S a palavra
</s>
</body>

aqui em negrito <b>


aqui em itlico <i> aqui
aqui sublinhada <u>
aqui riscada <s> aqui

Inserindo linhas <hr>


<body>
<hr color=red>
Uma linha vermelha acima e uma
azul abaixo
<hr color=blue>
</body>

Listas de definio. dl dt dd
<html>
<head>
<title> Listas de Definicao em HTML </title>
</head>
<body>
<dl>
<dt>1 Termo que ser definido
<dd> Aqui definimos o termo acima
<br>
<dt>2 Termo que ser definido
<dd> Aqui definimos o termo acima
</dl>
</body>
</html>

Listas no numeradas.

<html>
<head>
<title> Listas nao-numeradas em HTML </title>
</head>
<body>
<ul>
<li> item da lista </li>
<li> item da lista </li>
<li> item da lista </li>
</ul>
</body>
</html>

Listas numeradas
<html>
<head>
<title> Listas numeradas em HTML </title>
</head>
<body>
<ol type= I>
<li>1o item da lista
<li>2o item da lista
<li>3o item da lista
</ol>
</body>
</html>

Inserindo imagens: Tag <img>


<body>
<img src=
imagens/html_logo.jpg>
</body>

Atributos da tag <img>


1.Alt;
2.Width;
3.Height;
4.Border;

Atributos da tag <img>


5.Align:
Align=left
Align=right
Align=top
Align=bottom
Align=middle

Inserindo udio e vdeo : Tag


<embed>
<body>
<embed src= 08 - Stone Sour Through Glass.mp3>
<embed src= piecePROJECT520.avi>
</body>

Atributos da tag <embed>

Bgsound
Width
Height
Autostart
False
True

<p>

Tag <a>
<body>
<a href=
nome_arquivo.extensao> texto ou
imagem </a>
</body>
Atributos:
Target;
Name.

Atributo name.
<body>
<a name= aqui>Aqui e um ponto
para desvios</a>...
<a href= #aqui>Desvia para o
ponto AQUI</a>
</body>

Layout
Layout: distribuio do espao de nossa
pgina web, ou seja, o layout definir
como nossa pgina web ser dividida,
qual espao cada elemento (texto,
imagem, animaes, etc.) ocupar.
Tags:
Frame
Table
Div

Tag <frame>
Frameset
Cols;
Rows.

Frame
Src

Noframe

Tag <table>
Table
Tr
Td
Th
Capition

Atributos tag table


Border: tamanho da borda da tabela.
Bordercolor: cor da borda da tabela.
Cellspacing: distncia entre a borda
da tabela e a borda das clulas.
Cellpadding: distncia entre a borda
interior da clula e o elemento dentro
da mesma (texto, imagem, etc.)
Colspan: mesclar colunas.

Atributos tag table


Rowspan: mesclar linhas.
Bgcolor: definir uma cor para a
clula (tambm vale para o atributo
td)

Tag colgroup
Especifica um grupo de uma ou mais
colunas de uma tabela para a
formatao.
<colgroup>
<col>
<col>
</colgroup>

Atributos de colgroup.
Align
Valign
Width

Divises Tag <div>


Style:
Border: definir as bordas da div;
Background-color:definir uma cor ou
imagem de fundo na div;
Width: definir a largura da div;
Height: definir altura da div.
Margin: forma genrica de definir as
quatro margens de uma s vez;

Subatributos de style.
Margin-left: utilizado para definir a margem
entre o extremo esquerdo do navegador e a
div;
Margin-right: utilizado para definir a margem
entre o extremo direito do navegador e a div;
Margin-top: utilizado para definir a margem
entre o elemento acima da div e a prpria div;
Margin-bottom: utilizado para definir a
margem entre o elemento abaixo da div e a
prpria div.

Subatributos de style.
Position: utilizado para definir o tipo de
posicionamento da div:
Zindex: utilizado para definir qual div ficar
sobreposta (caso uma div invada o espao
de outra div), a div que possuir o maior valor
ficar sobreposta a qualquer outra.
Float: A propriedade float especifica se ou
no uma caixa (um elemento) deve flutuar.
Os elementos posicionados absolutamente
ignoram a propriedade float.

Tag <form>
Tudo do formulrio fica dentro da tag form.
Atributos:
name:
serve
para
identificar
o
determinado formulrio;
method: define como as informaes do
formulrio sero enviadas:
get: Os dados inseridos fazem parte do URL
associado consulta, enviado para o servidor
e suporta at 128 caracteres.

Tag <form>
post: os dados inseridos fazem parte do
corpo da mensagem enviada para o
servidor e transfere grande quantidade
de dados.

Tag <input>
Especifica uma variedade de campos
editveis dentro de um formulrio.
Atributos:
name: associa o valor da entrada
algum
elemento
que
far
o
processamento dos dados;
type: determina o tipo de campo de
entrada de dados;

<input type= text name="nome"


size=8>

Tag <input>
Value: define um valor padro para um
determinado campo.

<input type= text


name="nome" size=8 value=
texto>

Elementos de type:
password
Serve para fazer um campo de senhas.
Quando a pessoa digitar, aparecer o
carcter
*
ou
:
<input
type="password"
name="senha"
maxlenght=6>
O atributo maxlength foi utilizado
para limitar o tamanho da senha,
neste caso, a senha poder ter no
mximo 6 caracteres.

Elementos de type: radio


Quando o usurio deve escolher uma
resposta em uma nica alternativa, de
um conjunto de alternativas.

Elementos de type: radio


<input type="radio" name="voc
gostou
dessa
home
page?
value="sim">sim<br>
<input type="radio" name="voc
gostou
dessa
home
page?
value="sim">sim<br>

Elementos de type:
checkbox
Prov outros botes atravs dos quais mais de uma alternativa
pode ser escolhida.
<input
type="checkbox"
name="Netscape
value="net">
Netscape<br>
<input
type="checkbox"
name="Explorer"
value="exp">
Internet Explorer<br>
<input type="checkbox" name="Mosaic" value="mos">
Mosaic<br>
<input
type="checkbox"
name="Hot
Java"
value="hot">
Hot Java<br>

Elementos de type:
checkbox

Elementos de type: submit


Cria um boto para submeter os dados
do formulrio quando pressionado, ou
seja, possibilita o envio dos dados para
o script que vai trat-los.
<input type="submit"
value="enviar">

Elementos de type: reset


Cria um boto para limpar todos os
dados de todos os campos de um
determinado formulrio.
<input type="reset"
value="Limpar">

Tag <textarea>
Cria uma janela para insero de
texto.Atributos:
cols: especifica o nmero de colunas
para mostrar ao usurio;
rows: especifica o nmero de linhas
para mostrar ao usurio;
name: especifica o nome da varivel
que ser associada a entrada do
cliente (navegador).

Tag <textarea>
<textarea name="texto" cols=20
rows=3>texto</textarea>

Tag: select
Podemos definir uma lista de opes, com
barra de rolagem ou fixa na tela do
navegador. Atributos:
name: Obrigatrio, serve para a
identificao da lista;
option: Item da lista;
selected: Indica o valor padro da lista;
value: Valor a ser retornado ao servidor.

Tag: select
<select name= Estados>
<option selected value= SP> So
Paulo
<option value= RJ> Rio de Janeiro
</option>
<option value= MG> Minas Gerais
</option>
<option value= ES> Esprito Santo
</option>
</select>

Tag: select

Tags label, fieldset e legend.


Label: apresenta algo que
identifique para o usurio do que se
trata o determinado campo;
Fieldset: dividi os campos de um
formulrio em diferentes reas:
Dados pessoais
Endereo

Legend: identifica cada rea da tag


fieldset.

HTML 5
Um dos principais objetivos do HTML5
facilitar a manipulao do elemento
possibilitando o desenvolvedor a
modificar
as
caractersticas
dos
objetos de forma no intrusiva e de
maneira que seja transparente para o
usurio final.

DOCTYPE
O DOCTYPE indica para o navegador
e
para
outros
meios
qual
a
especificao de cdigo utilizar. Na
verso 4.01 do HTML temos trs tipos
de DOCTYPE:

DOCTYPE strict
Usado em cdigos HTML limpos, ou
seja, que no possuem misturas entre
estilo e contedos. usada em
conjunto com estilos CSS.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN
"http://www.w3.org/TR/html4/stric
t.dtd">

DOCTYPE Transitional
Este tipo de DOCTYPE inclui tanto os
elementos
estruturais
como
os
elementos
de
apresentao
(desaconselhados porque misturam
estilo com contedos).
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loos
e.dtd">

DOCTYPE Frameset
Este tipo de DOCTYPE consiste
basicamente
no
DOCTYPE
transitional com suporte a utilizao
de frame (quadros).
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/fram
eset.dtd">

DOCTYPE em HTML 5
Com o HTML5, a referncia por qual
DTD(Document
Type
Definition)
utilizar responsabilidade do browser.
<!DOCTYPE html>

Metatag CHARSET
Verses Anteriores:
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 5:
<meta charset="utf-8">

Tag Link
<link rel="stylesheet" type="text/css"
href="estilo.css">
Atributo rel:
<link rel="alternate"
type="application/atom+xml"
title="feed" href="/feed/">

Categorias em HTML 5
Cada elemento pode ser classificado
de acordo com suas caractersticas,
desse modo, podemos categorizar
elementos
que
possuem
caractersticas simulares, em HTML 5
temos algumas categorias.

Metadata Content (Contedo de


metadados)
So responsveis por criar uma
relao entre um documento e seu
contedo com outros documentos que
distribuem informao por outros
meios:

Metadata Content (Contedo de


metadados)

base
command
link
meta
noscript
script
style
title

Flow Content ( Fluxo de contedo)


So a maioria dos elementos inseridos
na tag body:

Sectioning Content (Seccionamento


de contedo)
So os elementos responsveis por
definir cabealhos, rodaps, sees,
etc:
article
aside
nav
section
footer

Heading Content (Contedo em


rubrica)
So os elementos que definem uma seo de
cabealhos, esto contidos na categoria
Sectioning:
h1
h2
h3
h4
h5
h6
hgroup

Phrasing Content (Contedo da


frase)
Fazem parte desta categoria
elementos que marcam o texto do
documento, bem como os elementos
que marcam este texto dentro do
elemento de pargrafo:

Embedded Content (Contedo


incorporado)
Nessa categoria esto os elementos
que importam outra fonte de
informao para o documento html.

Interactive Content (Contedo


interativo)
So os elementos que fazem a
interao do usurio com a pgina
web:

Menus e Toolbars
O elemento menu usado para definir
menus e barras de ferramenta.
Submenus:
Elementos

Comandos.

Definindo comandos.
1. Um link, um elemento a com atributo href;
2. Um boto, um elemento button;
3. Um boto, um elemento input com o atributo
type contendo button, submit, etc;
4. Um radiobutton, um elemento input com o
atributo type contendo radio;
5. Um checkbox, um elemento input com o
atributo type contendo checkbox;
6. Um elemento select, contendo um ou mais
options, define um grupo de comandos;
7. Um elemento qualquer com o atributo
accesskey;
8. Um elemento command.

Tipos de comandos
Existem trs tipos de comandos, so eles:
command
Uma ao comum;
checkbox
Uma ao que pode estar no status de ligada ou
desligada e alterna entre esses dois status quando
clicada;
radio
Uma ao que pode estar no status de ligada ou
desligada, e quando clicada vai para o status de ligada,
desligando todas as aes com o mesmo valor no
atributo radiogroup.

Novos Elementos
Estruturais
SECTION: A tag section define uma nova
seo genrica no documento. Por
exemplo, a pgina inicial de um website
pode ser dividida em diversas sees;
NAV: O elemento nav representa uma
seo da pgina que contm links para
outras partes do website. Nem todos os
grupos de links devem ser elementos nav,
apenas aqueles grupos que contm links
importantes;

Novos Elementos
Estruturais
ARTICLE: O elemento article representa uma
parte da pgina que poder ser distribudo e
reutilizvel em FEEDs;
ASIDE: O elemento aside representa um bloco
de contedo que referencia o contedo
secundrio de um website;
HEADER: representa um grupo de introduo
ou elementos de navegao, podendo ser
utilizado para agrupar ndices de contedos,
campos de busca ou at mesmo logos e/ou
banners.

Novos Elementos
Estruturais
FOOTER: representa literalmente o
rodap da pgina.

Novos tipos de Campos para


Formulrios
DATE: Com esse novo campo
podemos inserir em nossa pgina
HTML um calendrio que possua
todas as datas entre uma data
mnima e uma data mxima:
<input name= data type= date
min= 1990-01-01 max= 2012-1231 value= 2012-10- 07>

Novos tipos de Campos para


Formulrios
NUMBER: Neste novo campo somos
capazes de criar uma caixa (box) que
captura valores numricos inseridos
manualmente ou utilizando um
incrementador/decrementador
existente.
<input name= numero type=
number min= 0 max= 20
value= 10 step= 0.5>

Novos tipos de Campos para


Formulrios
RANGE:
O
campo
range
tem
exatamente a mesma funo do
campo number (e os mesmos
atributos), a grande diferena est
no modo de visualizao do mesmo.
Enquanto no number temos um box,
no range temos uma interface de
controle deslizante.
<input name= numero type=
range min= 0 max= 20 value=

Novos tipos de Campos para


Formulrios
COLOR: Com o campo color somos
capazes
de
capturarmos
uma
determinada
cor
escolhida
pelo
usurio, para isso esse campo cria uma
paleta de cores, utilizamos o atributo
value para definir uma cor padro (a
que ser mostrada inicialmente).
<input name= cor type= color
value= #ff0000>

Tornando um campo de formulrio


obrigatrio
<input name= login type= text
required>

O Elemento Canvas
Sua utilizao permite criar desenhos
diretamente no browser, ou seja, as
animaes so renderizadas no prprio
navegador.
<canvas width="500" height="800"
id= canvas1>
</canvas>

O Elemento Canvas
Depois que a rea onde os desenhos
sero renderizados definida,
utilizamos JavaScript para desenhar:
context=document.getElementById('c
anvas1').getContext('2d')

Compatibilidade dos Browsers com


HTML5
Dentre os principais motores de renderizao
temos:
Webkit motor de renderizao do Safari e
Google Chrome;
Gecko motor de renderizao do Firefox,
Mozilla e Camino;
Trident motor de renderizao do Internet
Explorer 4 ao 9;
Presto motor de renderizao do Opera 7
ao 10;