html 5 introdução
DESCRIPTION
Introdução a html 5TRANSCRIPT
HTML Básico (Atualizado para HTML5)
Compilado com base nas referências por
José Augusto Cintra
Professor da Faculdade Sumaré – SP
Analista de TI da Empresa PRODAM – SP
htttp://www.html-apps.info
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
Parte I Conceitos Básicos
4
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:
World Wide Web 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 e WEB
Sublime Text 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âmetro TARGET.
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>
<!-- Aqui fica o conteúdo que será visível -->
<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
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 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
rowspanExpande 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 de Texto
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 de Texto
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ços WWW
<color> Seleção de cores
<date>,<datetime>,<time>,etc. Digitação de datas e horários
Exemplos no próximo 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 – 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 de Verificaçã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 e TYPE 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
Parte IV Semântica HTML
43
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
HTML – Semântica
46
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
<fim>Obrigado !!!</fim>