HTML Básico: Guia Completo

HTML Bsico
(Atualizado para HTML5)
Compilado com base nas referncias por

Jos Augusto Cintra
Professor da Faculdade Sumar SP
Analista de TI da Empresa PRODAM SP
jose.cintra@html-apps.info
htttp://www.html-apps.info
Introduo
O objetivo deste minicurso fornecer conceitos bsicos sobre a
HTML Linguagem de marcao usada para exibir contedo na
web.
Consideraes
A HTML passou por muitas alteraes desde a sua criao at sua
verso atual (HTML5), o que mudou at mesmo o seu propsito
inicial.
Durante esse perodo, muitas prticas de design tais como Tableless,

DIV Mania e Design Responsivo surgiram no cenrio de
desenvolvimento front-end.
Neste minicurso no vamos entrar no mrito de tais abordagens e
focaremos apenas na linguagem HTML e o que voc pode fazer com
ela, embora hoje dia seja quase impossvel dissoci-la de seus
companheiros, CSS e JavaScript.
O leitor interessado encontrar no final desta apresentao alguns

endereos onde pode buscar mais informaes sobre as tcnicas acima
citadas.
3
Parte I
Conceitos Bsicos
HTML - Conceito
Criada por Tim Bernes Lee com base na SGML, a HTML (HyperText
Markup Language) uma linguagem de marcao usada para
apresentar contedo esttico na Web. Uma linguagem de marcao
define um conjunto de cdigos (tags) aplicados a um texto, com o fim
de estrutur-lo, adicionando informaes sobre os elementos.
No caso da HTML essas tags so utilizadas para definir formatos e padres

lgicos de exibio.
Inicialmente, a HTML era utilizada tambm para estilizar o documento (fontes,
cores, etc). Hoje essa funo fica a cargo de arquivos CSS, enquanto que a
linguagem Javascript fica encarregada de produzir contedo dinmico.
Uma boa fonte de referncia sobre HTML na Internet a organizao que a
padroniza:
World Wide Web Consortium (W3C)
5
HTML - Conceito
Fonte: Daviss Blog (adaptao)
HTML Editores e IDEs

Os documentos HTML so arquivos textos simples que podem ser
escritos em qualquer editor comum, de preferncia com suporte para
Unicode. Veja abaixo algumas sugestes:
NetBeans Trabalha com vrias linguagens de programao, com
excelente suporte para HTML5, CSS3 e Javascript ;

Aptana Baseado no Eclipse, com nfase para HTML5 e WEB
Sublime Text 3 Leve, rpido e moderno.
Web Storm Amplo suporte para programao front-end.
HTML - Elementos
Uma pgina HTML formada por elementos.
Elementos possuem etiquetas, marcaes que so conhecidas
como tags, que so divididas entre tags de abertura de

fechamento.
Tags de abertura possuem uma marca de incio < e de fim >
(parnteses angulares).
Tags de fechamento possuem uma marca de incio </e de fim >
Tags possuem nomes e atributos. Os atributos modificam os
resultados padres dos elementos e assumem a forma nome-doatributo = "valor-do-atributo".
Um elemento possui contedo (que podem ser outros elementos
ou textos).
Alguns elementos no possuem tags de fechamento (void elements)
8
.
HTML - Elementos
Para entender melhor os elementos HTML descritos na pgina
anterior, vejamos um exemplo com a tag P, usada para definir

pargrafos:
Contedo a
ser formatado
<p align = "left">Este um pargrafo</p>

Tag de incio
com o nome P
O atributo align, indicando que o

contedo do pargrafo ser
alinhado esquerda. Os valores
dos atributos devem estar entre
aspas (boa prtica)
Obs: Em HTML5, o atributo align entrou em desuso.
Tag de
fechamento
(Observe a
barra /)
9
HTML Tags Bsicas

<!DOCTYPE> Informa explicitamente o tipo do documento.
<html> Define o incio de um documento HTML e indica ao
navegador que todo contedo posterior deve ser tratado como uma
pgina HTML.
<head> Define o cabealho de um documento HTML. Este
cabealho traz informaes adicionais sobre o documento.
<body> Define o contedo principal, o corpo do documento.
Esta a parte do documento HTML que exibida no navegador.
10
HTML Estrutura do documento

A linguagem HTML est estruturada sobre um modelo de objetos,
onde os seus elementos esto classificados dentro de uma cadeia
hierrquica. Vejamos a estrutura bsica de um documento:
Indica um documento HTML5
<!DOCTYPE HTML>
<HTML>
Marca o incio do documento
<HEAD>
Informaes do cabealho
</HEAD>
Corpo do documento
<BODY>
CONTEDO A SER EXIBIDO
Fim do corpo
</BODY>
</HTML>
Fim do documento
11
HTML Tags Bsicas - Cabealho

O cabealho (tag head) no exibido. Ele usado para definir
propriedades gerais da pgina. Entre outras, podemos
encontrar:
<title> Define o ttulo da pgina, que exibido na
barra de ttulo dos browsers.
<style> Define formatao em CSS.
<script> Define programao de certas funes em
pgina com scripts, principalmente JavaScript.
<link> Define ligaes da pgina com outros arquivos
como feeds, CSS, scripts, etc.
<meta> Define propriedades da pgina, como
codificao de caracteres, descrio da pgina, autor, etc.
12
HTML Tags Bsicas - Corpo

Tags para formatao bsica do texto:
<h1>, <h2>,... <h6> cabealhos e ttulos em diversos
tamanhos.
<p>
Define um pargrafo.
<br/> Quebra de linha (void element).
<hr/> Insere uma linha divisria (void element).
 Comentrios em HTML
13
HTML Tags Bsicas - Corpo

Existem diversas tags para definir fontes, estilos, cores, etc.
Algumas esto em desuso, devido popularizao do CSS,
mas ainda so suportadas por motivos de compatibilizao:
<b>
<i>
<u>
<font>
Texto em negrito.
Itlico.
Sublinhado
Define fontes com seus estilos e cores
14
HTML Hiperlinks
Hyperlinks ou simplesmente links so elos que ligam uma pgina a
outra (link) ou a si mesma (ncora).
O link definido pela tag A, cujos principais atributos so:
href Endereo da pgina ser exibida
target Especifica onde vai ser aberta a pgina
Exemplo:
<a href="http://www.site.com" target="_blank">Clique aqui</a>
Neste exemplo, a pgina vai exibir o texto Clique aqui que, quando
for clicado, exibir a pgina definida no parmetro HREF em outra
janela do browser, conforme determinado pelo parmetro TARGET. 15
HTML Imagens
As imagens so definidas com a tag IMG (void element) cujos
principais atributos so:
src URL da imagem que voc quer exibir na sua pgina.
alt Atributo de acessibilidade, usado para definir um "texto
alternativo" para a imagem.
Exemplo:
<img src="boat.png" alt="Figura de um barco" />
Obs: Caso a imagem no esteja na pasta padro, deve ser fornecido

todo o caminho para que ela seja localizada e, caso esteja em outro
servidor, deve ser fornecida a URL completa.
16
HTML Exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Ttulo do Documento</title>
</head>
<body>

<h3><u>Exemplo de pgina HTML</u></h3>
<hr/>
<img src="html5.png"/>
<hr/>
Clique aqui: <a href = www.w3.org">w3c.org</a>
</body>
</html>
Veja no prximo slide como esse documento ser exibido
17
HTML Exemplo
18
Parte II
Tabelas e listas em HTML
19
HTML Tabelas
Para exibirmos os dados em forma de tabelas (com linhas e colunas),
podemos usar um conjunto de tags subordinadas tag TABLE que
possui os seguintes atributos:
border
cellpadding
cellspacing
width
Espessura da borda da tabela

Espao entre a clula e seu contedo;
Espao entre as clulas;
Largura da tabela;
Exemplo:
<table border="1" cellpading="2" cellspacing="2">
20
HTML Tabelas Linha e Colunas

Para definirmos o nmero de linhas e colunas de uma tabela usamos as
tags TR e TD respectivamente. Vejamos seus principais atributos
tr Define uma linha em uma tabela
align
Alinhamento em relao tabela
bgcolor Cor de fundo da linha
td Define uma clula (coluna) de uma linha da tabela.
Alinhamento em relao clula

bgcolor Cor de fundo da clula
colspan Expande a clula um certo nmero de colunas
rowspanExpande a clula um certo nmero de linha
width Largura da clula
align
21
HTML Tabelas Exemplo

<table border="1">
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
22
HTML Listas de Descries

Podemos criar listas com as tags DL, DT e DD.
Exemplo:
<dl>
<dt>Linguagens orientada a objetos</dt>
<dd>Java</dd>
<dd>C++</dd>
<dt>Linguagens procedurais</dt>
<dd>C</dd>
<dd>Pascal</dd>
</dt>
</dl>
23
HTML Listas Ordenadas

Podemos criar listas com as tags OL e LI.
Exemplo:
<ol >
<li >Ferver 600 ml de gua em uma panela .</li >
<li >Retirar o macarro do pacote .</li >
<li >Colocar o macarro na panela no fogo baixo .</li >
<li >Cozinhar o macarro por 3 min .</li >
<li >Temperar a gosto .</li >
</ol >
24
HTML Listas No Ordenadas

Listas no ordenadas so criadas com as tags UL e LI.
Exemplo:
<ul >
<li >Ferver 600 ml de gua em uma panela .</li >
<li >Retirar o macarro do pacote .</li >
<li >Colocar o macarro na panela no fogo baixo .</li >
<li >Cozinhar o macarro por 3 min .</li >
<li >Temperar a gosto .</li >
</ul >
25
Parte III
Formulrios em HTML
26
HTML Formulrios
Atravs dos formulrios HTML podemos inserir elementos interativos
na pgina que permitem, por exemplo, realizar um dilogo com o
usurio da seguinte forma:
O formulrio apresenta campos como caixas de texto, botes, listas,
etc;
O usurio interage com esses elementos, digitando as informaes
requeridas;
O usurio envia (submete) essas informaes, clicando por exemplo,
em um boto.
As informaes so recebidas por um script no servidor que
processa as informaes gravando-as em banco de dados, por
exemplo.
27
HTML Formulrios Elemento FORM

O elemento FORM permite definir um formulrio e suas
propriedades como:
action Endereo (URL) do script que vai receber e processar
os dados no servidor (Normalmente um programa PHP, Java, ASP
.NET, etc.)
method Seleciona o tipo de requisio para envio dos dados ao
servidor. Os mtodos mais utilizados so:
post Transfere grande quantidade de dados e estes vo
embutidos no corpo da mensagem enviada para o servidor;
get Transfere dados com no mximo 128 caracteres e estes
vo compor a URL (endereo) associado consulta enviada para o
servidor. Ou seja, vo ser exibidos na barra de endereos do
browser
-
28
HTML Formulrios Controles

Os controles so os elementos atravs dos quais o usurio pode
interagir com a pgina WEB, digitando, clicando ou selecionando
dados. Alm disso, os formulrios podem conter qualquer outro
elemento HTML como pargrafos, listas, tabelas, imagens, etc.
No entanto, somente os dados dos controles presentes no formulrio
que sero enviados ao servidor para processamento.
Para entrada de dados, podemos usar 3 tipos de controle:
<INPUT>, <SELECT> e <TEXTAREA>
Veremos cada um deles a seguir

29
HTML Formulrios Atributo Identificador

Antes de descrevermos os controles de formulrios, vamos falar sobre
dois importantes atributos cuja finalidade identificar os elementos de
uma pgina. So eles:
id Atributo global que identifica de forma nica um elemento em
uma pgina HTML para serem usados em scripts e estilos (CSS).
Dois elementos distintos no podem possuir o mesmo ID
name Identifica os campos do formulrio que so enviados para
serem tratados pelos scripts nos servidores. Os nomes podem se
repetir para elementos do mesmo tipo.
30
HTML Formulrios Caixas de Texto

Este controle permite a entrada de dados digitados em uma nica linha e deve
ser usado quando forem solicitadas informaes como: nome, endereo, CEP,
telefone, e-mail etc.
Para criar uma caixa de texto usamos a tag INPUT com TYPE = "TEXT ".
Principais atributos:
size Tamanho visvel em caracteres
maxlenght Tamanho mximo em caracteres
placeholder Insere uma texto inicial que automaticamente apagado quando
o usurio inicia a digitao
Exemplo:
<input type = "text" id = "id_nome " name = "nome" size="40"
maxlength = "50" placeholder = "Digite seu nome" />
31
HTML Formulrios Caixas de Texto

Podemos criar vrios tipos de caixa de texto, mudando o atributo TYPE, de
acordo com o seguinte:
<password> Digitao de senhas
<search>
Caixas de busca
<number> Digitao de nmeros
<range>
Faixa de nmeros
<email>
Digitao de email
<telefone> Digitao de telefone
<url>
Digitao de endereos WWW
<color>
Seleo de cores
<date>,<datetime>,<time>,etc. Digitao de datas e horrios
Exemplos no prximo slide
32
HTML Caixas de Texto - Exemplos

<input id = "senha_id " name = "senha" type = "password">
<input id ="data_id" name = "data" type = "date">
<input id ="numero1_id" name = "numero1" type = "number">

<input id="numero2_id" name ="numero2" type ="range">
33
HTML Formulrios Rtulos

Os rtulos so textos que normalmente antecedem os campos, descrevendo seu
contedo. HTML5 definiu um elemento acessvel para defini-los, cujo principal
atributo :
for Descreve o ID do campo associado ao label.

Exemplo:
<label for ="nome_id">Nome : </ label >
<input type = "text" name = "nome" id = "nome_id />
34
HTML Formulrios Textos Longos

Podemos definir uma entrada de dados para textos longos usando a tag
TEXTAREA, que possui os seguintes atributos:
rows Nmero de linhas da caixa de texto
cols Nmero colunas em caracteres
Exemplo:
<textarea id="msg_id" name ="mensagem" rows ="5" cols ="50">
</ textarea >
35
HTML Formulrios Caixas de Verificao

Caixas de verificao, conhecidas tambm como CHECKBOX, podem ser exibidas
utilizando-se a tag INPUT com TYPE = CHECKBOX. Para agrupar checkbox
relacionados, defina o mesmo NAME para cada um.
Atributos:
value Determina qual o valor ser enviado ao servidor caso esse checkbox
estiver marcado
checked apresenta a opo previamente selecionada
Exemplo:
<input id="jv_id" type ="checkbox" value ="jv" name ="lang"
checked>Java</input>
<input id="ph_id" type ="checkbox" value ="ph " name
="lang">PHP</input>
36
HTML Formulrios Botes Radio

Botes de Opo, conhecidos tambm como RADIO BUTTONS, podem ser
exibidos utilizando-se a tag INPUT com TYPE = RADIO. Para agrupar opes
relacionadas, defina o mesmo NAME para cada um.
Atributos:
value Determina qual o valor ser enviado ao servidor, caso esse checkbox
estiver marcado;
checked apresenta a opo previamente selecionada.
Exemplo:
<input id="masc_id" name ="sexo" type ="radio" value
="Masculino">Masculino</input>
<input id= fem_id" name ="sexo" type ="radio" value
="Feminino">Feminino</input>
37
HTML Listas Drop-Down

Muitos formulrios permitem que os usurios selecionem um ou mais itens de
uma lista de opes. Essa seleo pode ser realizada atravs de um drop-down
list com a tag SELECTe sub-tags OPTION e OPTGROUP:
Atributos de SELECT (define uma caixa de seleo):

multiple permite selecionar mais de uma opo
Atributos de OPTGROUP (Define subgrupos de opes)
label Define os nome dos subgrupos
Atributos de OPTION (Define as opes da lista):
value Define o valor a ser enviado ao servidor
selected Define um valor previamente selecionado
Exemplo no prximo slide
38
HTML Listas Drop-Down - Exemplo

<select id="estados_id " name ="estado" multiple ="multiple">
<optgroup label =" Regio Sudeste ">
<option value ="SP" selected >So Paulo </ option >
<option value ="RJ">Rio de Janeiro </ option >
</ optgroup >
<optgroup label =" Regio Sul ">
<option value ="RS" selected >Rio Grande do Sul </ option >
<option value ="PR">Paran </ option >
</ optgroup >
<optgroup label =" Regio Nordeste ">
<option value ="RN">Rio Grande do Norte </ option >
<option value ="BA">Bahia </ option >
</ optgroup >
</ select >
39
HTML Botes de Comando

E possvel criar vrios tipos de botes para os formulrios HTML, com a tag
INPUT e TYPE apropriadas, de acordo com o seguinte:
submit Cria um boto que, ao ser pressionado, envia todos os dados definidos
no formulrio para um script no servidor, de acordo com os atributos ACTION e
METHOD do elemento FORM
reset Reinicializa o contedo de todos os controle do formulrio
button Boto comum
Exemplo:
<input id="botao_id" type ="submit" value ="enviar"/>
Obs: Pode-se obter o mesmo ofeito, utilizando-se a tag BUTTON com TYPE
apropriado para a criao de botes. A diferena que, com esta tag, os botes
podem ser estilizados com imagens.
40
HTML Formulrios - Exemplo

<FORM action="http://site.com/user/adduser.php" method="post">
<P>
<LABEL for="firstname">Primeiro nome: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">ltimo nome: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">Email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="M"> Masculino<BR/>
<INPUT type="radio" name="sex" value="F"> Feminino<BR/>
<INPUT type="submit" value="Enviar"> <INPUT type="reset">
</P>
</FORM>
Resultado no prximo slide
41
HTML Formulrios - Exemplo
42
Parte IV
Semntica HTML
43
HTML Semntica
A HTML possui alguns elementos com propsitos puramente
semnticos. Eles no recebem nenhum tipo de renderizao especial,
mas servem para agrupar logicamente os elementos com vistas a
facilitar a estilizao e a programao por scripts clientes.
Os mais conhecidos so os elementos DIV e SPAM. No entanto esses
elementos so muito genricos e acabam poluindo o cdigo.
Com o objetivo de organizar o cdigo, a HTML5 introduziu vrios
outros elementos com essa finalidade.
o que descreveremos a seguir
44
HTML5 Semntica
Algumas das novas tags semnticas:
header
footer
article
section
aside
nav
Marca textos que estaro localizados em Cabealhosde sees;

Marca textos que estaro localizados em rodaps de sees;
Marca contedos com maior relevncia;
Marca partes especficas da pgina (marcao genrica);
Marca textos que fazem referncia ao contedo principal sua volta;
Marca um conjunto de links.
Com esses novos elementos ficou mais fcil estilizar e formatar o documento,
atravs de CSS, como mostra a figura a seguir
45
HTML Semntica
46
Referncias
Links
WikiPedia
W3C
W3Schools
K19 Treinamentos
Caelum Ensino e Inovao
Livros
HTML5 e CSS3: Domine a web do futuro, Lucas Mazza, Casa Do Cdigo Editora
Web Design Responsivo, Trcio Zemel, Casa Do Cdigo Editora
47
<fim>Obrigado !!!</fim>

HTML Básico: Guia Completo

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Básico: Guia Completo

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML Bsico

(Atualizado para HTML5)

Compilado com base nas referncias por

Durante esse perodo, muitas prticas de design tais como Tableless,

O leitor interessado encontrar no final desta apresentao alguns

No caso da HTML essas tags so utilizadas para definir formatos e padres

Fonte: Daviss Blog (adaptao)

HTML Editores e IDEs

excelente suporte para HTML5, CSS3 e Javascript ;

como tags, que so divididas entre tags de abertura de

anterior, vejamos um exemplo com a tag P, usada para definir

<p align = "left">Este um pargrafo</p>

O atributo align, indicando que o

Obs: Em HTML5, o atributo align entrou em desuso.

HTML Tags Bsicas

HTML Estrutura do documento

HTML Tags Bsicas - Cabealho

HTML Tags Bsicas - Corpo

HTML Tags Bsicas - Corpo

Obs: Caso a imagem no esteja na pasta padro, deve ser fornecido

Espessura da borda da tabela

HTML Tabelas Linha e Colunas

Alinhamento em relao clula

HTML Tabelas Exemplo

HTML Listas de Descries

HTML Listas Ordenadas

HTML Listas No Ordenadas

HTML Formulrios Elemento FORM

HTML Formulrios Controles

Veremos cada um deles a seguir

HTML Formulrios Atributo Identificador

HTML Formulrios Caixas de Texto

HTML Formulrios Caixas de Texto

HTML Caixas de Texto - Exemplos

<input id ="data_id" name = "data" type = "date">

<input id ="numero1_id" name = "numero1" type = "number">

HTML Formulrios Rtulos

for Descreve o ID do campo associado ao label.

HTML Formulrios Textos Longos

HTML Formulrios Caixas de Verificao

HTML Formulrios Botes Radio

HTML Listas Drop-Down

Atributos de SELECT (define uma caixa de seleo):

HTML Listas Drop-Down - Exemplo

HTML Botes de Comando

HTML Formulrios - Exemplo

HTML Formulrios - Exemplo

Marca textos que estaro localizados em Cabealhosde sees;

Anda mungkin juga menyukai