Minicurso de HTML básico - Atualizado para HTML5

HTML Básico
(Atualizado para HTML5)
Compilado com base nas referências por
José Augusto Cintra
Professor da Faculdade Sumaré – SP
Analista deTI da Empresa PRODAM – SP
josecintra@josecintra.com
http://www.josecintra.com/blog

Introdução
O objetivo deste minicurso é fornecer conceitos básicos sobre a
HTML – Linguagem de marcação usada para exibir conteúdo na
web.
2

Considerações
A HTML passou por muitas alterações desde a sua criação até sua
versão atual (HTML5), o que mudou até mesmo o seu propósito
inicial.
Durante esse período, muitas práticas de design tais como Tableless,
DIV Mania e Design Responsivo surgiram no cenário de
desenvolvimento front-end.
Neste minicurso não vamos entrar no mérito de tais abordagens e
focaremos apenas na linguagem HTML e o que você pode fazer com
ela, embora hoje dia seja quase impossível dissociá-la de seus
companheiros, CSS e JavaScript.
O leitor interessado encontrará no final desta apresentação alguns
endereços onde pode buscar mais informações sobre as técnicas acima
citadas.
3

HTML - Conceito
Criada por Tim Bernes Lee com base na SGML, a HTML (HyperText
Markup Language) é uma linguagem de marcação usada para
apresentar conteúdo estático na Web. Uma linguagem de marcação
define um conjunto de códigos (tags) aplicados a um texto, com o fim
de estruturá-lo, adicionando informações sobre os elementos.
No caso da HTML essas tags são utilizadas para definir formatos e padrões
lógicos de exibição.
Inicialmente, a HTML era utilizada também para estilizar o documento (fontes,
cores, etc). Hoje essa função fica a cargo de arquivos CSS, enquanto que a
linguagem Javascript fica encarregada de produzir conteúdo dinâmico.
Uma boa fonte de referência sobre HTML na Internet é a organização que a
padroniza:
WorldWideWeb Consortium (W3C)
5

HTML - Conceito
Fonte: Davis’s Blog (adaptação) 6

HTML – Editores e IDEs
Os documentos HTML são arquivos textos simples que podem ser
escritos em qualquer editor comum, de preferência com suporte para
Unicode.Veja abaixo algumas sugestões:
 NetBeans – Trabalha com várias linguagens de programação, com
excelente suporte para HTML5, CSS3 e Javascript ;
 Aptana – Baseado no Eclipse, com ênfase para HTML5 eWEB
 SublimeText 3 – Leve, rápido e moderno.
 Web Storm –Amplo suporte para programação front-end.
7

HTML - Elementos
 Uma página HTML é formada por elementos.
 Elementos possuem etiquetas, marcações que são conhecidas
como tags, que são divididas entre tags de abertura de
fechamento.
 Tags de abertura possuem uma marca de início < e de fim >
(parênteses angulares).
 Tags de fechamento possuem uma marca de início </e de fim >
 Tags possuem nomes e atributos. Os atributos modificam os
resultados padrões dos elementos e assumem a forma nome-do-
atributo = "valor-do-atributo".
 Um elemento possui conteúdo (que podem ser outros elementos
ou textos).
 Alguns elementos não possuem tags de fechamento (void elements)
. 8

HTML - Elementos
 Para entender melhor os elementos HTML descritos na página
anterior, vejamos um exemplo com a tag P, usada para definir
parágrafos:
<p align = "left">Este é um parágrafo</p>
Obs: Em HTML5, o atributo “align” entrou em desuso.
Tag de início
com o nome P
Tag de
fechamento
(Observe a
barra /)
Conteúdo a
ser formatado
O atributo align, indicando que o
conteúdo do parágrafo será
alinhado à esquerda. Os valores
dos atributos devem estar entre
aspas (boa prática)
9

HTML –Tags Básicas
<!DOCTYPE>  Informa explicitamente o tipo do documento.
<html>  Define o início de um documento HTML e indica ao
navegador que todo conteúdo posterior deve ser tratado como uma
página HTML.
<head>  Define o cabeçalho de um documento HTML. Este
cabeçalho traz informações adicionais sobre o documento.
<body>  Define o conteúdo principal, o corpo do documento.
Esta é a parte do documento HTML que é exibida no navegador.
10

A linguagem HTML está estruturada sobre um modelo de objetos,
onde os seus elementos estão classificados dentro de uma cadeia
hierárquica.Vejamos a estrutura básica de um documento:
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
CONTEÚDO A SER EXIBIDO
</BODY>
</HTML>
HTML – Estrutura do documento
Marca o início do documento
Informações do cabeçalho
Corpo do documento
Fim do corpo
Fim do documento
Indica um documento HTML5
11

HTML –Tags Básicas - Cabeçalho
O cabeçalho (tag head) não é exibido. Ele é usado para definir
propriedades gerais da página. Entre outras, podemos
encontrar:
<title>  Define o título da página, que é exibido na
barra de título dos browsers.
<style>  Define formatação em CSS.
<script>  Define programação de certas funções em
página com scripts, principalmente JavaScript.
<link>  Define ligações da página com outros arquivos
como feeds, CSS, scripts, etc.
<meta>  Define propriedades da página, como
codificação de caracteres, descrição da página, autor, etc. 12

HTML –Tags Básicas - Corpo
Tags para formatação básica do texto:
<h1>, <h2>,... <h6>  cabeçalhos e títulos em diversos
tamanhos.
<p>  Define um parágrafo.
<br/>  Quebra de linha (void element).
<hr/>  Insere uma linha divisória (void element).
  Comentários em HTML
13

HTML –Tags Básicas - Corpo
Existem diversas tags para definir fontes, estilos, cores, etc.
Algumas estão em desuso, devido à popularização do CSS,
mas ainda são suportadas por motivos de compatibilização:
<b> Texto em negrito.
<i>  Itálico.
<u>  Sublinhado
<font>  Define fontes com seus estilos e cores
14

Hyperlinks ou simplesmente links são elos que ligam uma página a
outra (link) ou a si mesma (âncora).
O link é definido pela tag A, cujos principais atributos são:
 href  Endereço da página ser exibida
 target  Especifica onde vai ser aberta a página
Exemplo:
<a href="http://www.site.com" target="_blank">Clique aqui</a>
Neste exemplo, a página vai exibir o texto “Clique aqui” que, quando
for clicado, exibirá a página definida no parâmetro HREF em outra
janela do browser, conforme determinado pelo parâmetroTARGET.
HTML – Hiperlinks
15

HTML – Imagens
As imagens são definidas com a tag IMG (void element) cujos
principais atributos são:
 src  URL da imagem que você quer exibir na sua página.
 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 não esteja na pasta padrão, 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>Título do Documento</title>
</head>
<body>

<h3><u>Exemplo de página HTML</u></h3>
<hr/>
<img src="html5.png"/>
<hr/>
Clique aqui: <a href = “www.w3.org">w3c.org</a>
</body>
</html>
Veja no próximo slide como esse documento será exibido  17

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  Espessura da borda da tabela
cellpadding  Espaço entre a célula e seu conteúdo;
cellspacing  Espaço entre as células;
width  Largura da tabela;
Exemplo:
<table border="1" cellpading="2" cellspacing="2">
20

HTML –Tabelas – Linha e Colunas
Para definirmos o número 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 relação à tabela
 bgcolor  Cor de fundo da linha
 td  Define uma célula (coluna) de uma linha da tabela.
 align  Alinhamento em relação à célula
 bgcolor  Cor de fundo da célula
 colspan  Expande a célula um certo número de colunas
 rowspanExpande a célula um certo número de linha
 width Largura da célula
21

HTML –Tabelas – Exemplo
<table border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
22

HTML – Listas de Descrições
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 macarrão do pacote .</li >
<li >Colocar o macarrão na panela no fogo baixo .</li >
<li >Cozinhar o macarrão por 3 min .</li >
<li >Temperar a gosto .</li >
</ol >
24

HTML – Listas Não Ordenadas
Listas não ordenadas são criadas com as tags UL e LI.
Exemplo:
<ul >
<li >Ferver 600 ml de água em uma panela .</li >
<li >Retirar o macarrão do pacote .</li >
<li >Colocar o macarrão na panela no fogo baixo .</li >
<li >Cozinhar o macarrão por 3 min .</li >
<li >Temperar a gosto .</li >
</ul >
25

Parte III
Formulários em HTML
26

HTML – Formulários
Através dos formulários HTML podemos inserir elementos interativos
na página que permitem, por exemplo, realizar um diálogo com o
usuário da seguinte forma:
 O formulário apresenta campos como caixas de texto, botões, listas,
etc;
 O usuário interage com esses elementos, digitando as informações
requeridas;
 O usuário envia (submete) essas informações, clicando por exemplo,
em um botão.
 As informações são recebidas por um script no servidor que
processa as informações gravando-as em banco de dados, por
exemplo.
27

HTML – Formulários – Elemento FORM
O elemento FORM permite definir um formulário e suas
propriedades como:
 action  Endereço (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 requisição para envio dos dados ao
servidor. Os métodos mais utilizados são:
 post  Transfere grande quantidade de dados e estes vão
embutidos no corpo da mensagem enviada para o servidor;
 get  Transfere dados com no máximo 128 caracteres e estes
vão compor a URL (endereço) associado à consulta enviada para o
servidor. Ou seja, vão ser exibidos na barra de endereços do
browser
- 28

HTML – Formulários – Controles
Os controles são os elementos através dos quais o usuário pode
interagir com a página WEB, digitando, clicando ou selecionando
dados. Além disso, os formulários podem conter qualquer outro
elemento HTML como parágrafos, listas, tabelas, imagens, etc.
No entanto, somente os dados dos controles presentes no formulário é
que serão 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 – Formulários – Atributo Identificador
Antes de descrevermos os controles de formulários, vamos falar sobre
dois importantes atributos cuja finalidade é identificar os elementos de
uma página. São eles:
id  Atributo global que identifica de forma única um elemento em
uma página HTML para serem usados em scripts e estilos (CSS).
Dois elementos distintos não podem possuir o mesmo ID
name Identifica os campos do formulário que são enviados para
serem tratados pelos scripts nos servidores. Os nomes podem se
repetir para elementos do mesmo tipo.
30

HTML – Formulários – Caixas deTexto
Este controle permite a entrada de dados digitados em uma única linha e deve
ser usado quando forem solicitadas informações como: nome, endereço, CEP,
telefone, e-mail etc.
Para criar uma caixa de texto usamos a tag INPUT com TYPE = "TEXT ".
Principais atributos:
size Tamanho visível em caracteres
maxlenght Tamanho máximo em caracteres
placeholder  Insere uma texto inicial que é automaticamente apagado quando
o usuário inicia a digitação
Exemplo:
<input type = "text" id = "id_nome " name = "nome" size="40"
maxlength = "50" placeholder = "Digite seu nome" />
31

HTML – Formulários – Caixas deTexto
Podemos criar vários tipos de caixa de texto, mudando o atributo TYPE, de
acordo com o seguinte:
<password>  Digitação de senhas
<search>  Caixas de busca
<number>  Digitação de números
<range>  Faixa de números
<email>  Digitação de email
<telefone>  Digitação de telefone
<url>  Digitação de endereçosWWW
<color>  Seleção de cores
<date>,<datetime>,<time>,etc.  Digitação de datas e horários
Exemplos no próximo slide 
32

HTML – Caixas deTexto - 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 – Formulários – Rótulos
Os rótulos são textos que normalmente antecedem os campos, descrevendo seu
conteúdo. HTML5 definiu um elemento acessível 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 – Formulários –Textos Longos
Podemos definir uma entrada de dados para textos longos usando a tag
TEXTAREA, que possui os seguintes atributos:
rows  Número de linhas da caixa de texto
cols  Número colunas em caracteres
Exemplo:
<textarea id="msg_id" name ="mensagem" rows ="5" cols ="50">
</ textarea >
35

HTML – Formulários – Caixas deVerificação
Caixas de verificação, conhecidas também 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 opção 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 – Formulários – Botões Radio
Botões de Opção, conhecidos também como RADIO BUTTONS, podem ser
exibidos utilizando-se a tag INPUT com TYPE = RADIO. Para agrupar opções
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 opção 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 formulários permitem que os usuários selecionem um ou mais itens de
uma lista de opções. Essa seleção pode ser realizada através de um drop-down
list com a tag SELECTe sub-tags OPTION e OPTGROUP:
Atributos de SELECT (define uma caixa de seleção):
multiple  permite selecionar mais de uma opção
Atributos de OPTGROUP (Define subgrupos de opções)
label  Define os nome dos subgrupos
Atributos de OPTION (Define as opções da lista):
value Define o valor a ser enviado ao servidor
selected  Define um valor previamente selecionado
Exemplo no próximo slide 
38

HTML – Listas Drop-Down - Exemplo
<select id="estados_id " name ="estado" multiple ="multiple">
<optgroup label =" Região Sudeste ">
<option value ="SP" selected >São Paulo </ option >
<option value ="RJ">Rio de Janeiro </ option >
</ optgroup >
<optgroup label =" Região Sul ">
<option value ="RS" selected >Rio Grande do Sul </ option >
<option value ="PR">Paraná </ option >
</ optgroup >
<optgroup label =" Região Nordeste ">
<option value ="RN">Rio Grande do Norte </ option >
<option value ="BA">Bahia </ option >
</ optgroup >
</ select >
39

HTML – Botões de Comando
E possível criar vários tipos de botões para os formulários HTML, com a tag
INPUT eTYPE apropriadas, de acordo com o seguinte:
submit  Cria um botão que, ao ser pressionado, envia todos os dados definidos
no formulário para um script no servidor, de acordo com os atributos ACTION e
METHOD do elemento FORM
reset  Reinicializa o conteúdo de todos os controle do formulário
button  Botão 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 criação de botões. A diferença é que, com esta tag, os botões
podem ser estilizados com imagens. 40

HTML – Formulários - 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 próximo slide  41

HTML – Formulários - Exemplo
42

HTML – Semântica
A HTML possui alguns elementos com propósitos puramente
semânticos. Eles não recebem nenhum tipo de renderização especial,
mas servem para agrupar logicamente os elementos com vistas a
facilitar a estilização e a programação por scripts clientes.
Os mais conhecidos são os elementos DIV e SPAM. No entanto esses
elementos são muito genéricos e acabam poluindo o código.
Com o objetivo de organizar o código, a HTML5 introduziu vários
outros elementos com essa finalidade.
É o que descreveremos a seguir 
44

HTML5 – Semântica
Algumas das novas tags semânticas:
header  Marca textos que estarão localizados em Cabeçalhosde seções;
footer  Marca textos que estarão localizados em rodapés de seções;
article  Marca conteúdos com maior relevância;
section  Marca partes específicas da página (marcação genérica);
aside Marca textos que fazem referência ao conteúdo principal à sua volta;
nav Marca um conjunto de links.
Com esses novos elementos ficou mais fácil estilizar e formatar o documento,
através de CSS, como mostra a figura a seguir 
45

Referências
Links
WikiPedia
W3C
W3Schools
K19 Treinamentos
Caelum Ensino e Inovação
Livros
HTML5 e CSS3: Domine a web do futuro, Lucas Mazza, Casa Do Código Editora
Web Design Responsivo,Tárcio Zemel, Casa Do Código Editora
47

Minicurso de HTML básico - Atualizado para HTML5

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Minicurso de HTML básico - Atualizado para HTML5

Minicurso de HTML básico - Atualizado para HTML5