SlideShare uma empresa Scribd logo
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
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:
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>
<!-- 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
 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
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>

Mais conteúdo relacionado

Mais procurados

Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Leonardo Soares
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Introdução CSS
Introdução CSSIntrodução CSS
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
André Constantino da Silva
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
Jorge Ávila Miranda
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
Pablo Sanches
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
Daniel Brandão
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
CSS
CSSCSS
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
Centro Paula Souza
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
Jessyka Lage
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
DESIGN DIGITAL UNIARA 2012
 

Mais procurados (20)

Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
CSS
CSSCSS
CSS
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 

Destaque

Regras básicas na construção de um site
Regras básicas na construção de um siteRegras básicas na construção de um site
Regras básicas na construção de um site
Ana Santos
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
Html5 aula 01
Html5 aula 01Html5 aula 01
Html5 aula 01
Jose Berardo
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Uni Buscapé Company
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Alamo Saravali
 
HTML Básico
HTML BásicoHTML Básico
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
marioreis
 
Etapas de desenvolvimento de um website
Etapas de desenvolvimento de um websiteEtapas de desenvolvimento de um website
Etapas de desenvolvimento de um website
Rafael Marques
 
Proposta de criação de site
Proposta de criação de siteProposta de criação de site
Proposta de criação de site
Cincinato Amorim
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
Devmedia
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
Gustavo Zimmermann
 
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEOElementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Diego Ivo
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fábio Flatschart
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Html (tabela)
Html (tabela)Html (tabela)
Html (tabela)
andreluizlc
 
Apresentação + html (tags)
Apresentação + html (tags)Apresentação + html (tags)
Apresentação + html (tags)
andreluizlc
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
Campus Party Brasil
 
Css básico
Css básicoCss básico
Css básico
Carlos Almada
 

Destaque (20)

Regras básicas na construção de um site
Regras básicas na construção de um siteRegras básicas na construção de um site
Regras básicas na construção de um site
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Html5 aula 01
Html5 aula 01Html5 aula 01
Html5 aula 01
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
 
Etapas de desenvolvimento de um website
Etapas de desenvolvimento de um websiteEtapas de desenvolvimento de um website
Etapas de desenvolvimento de um website
 
Proposta de criação de site
Proposta de criação de siteProposta de criação de site
Proposta de criação de site
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
 
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEOElementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
Elementos HTML e Autoridade de Página - Aula 2 - Curso de SEO #OpenSEO
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Html (tabela)
Html (tabela)Html (tabela)
Html (tabela)
 
Apresentação + html (tags)
Apresentação + html (tags)Apresentação + html (tags)
Apresentação + html (tags)
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 
Css básico
Css básicoCss básico
Css básico
 

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

Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 
Html
HtmlHtml
Html
HtmlHtml
Html
Ana Roger
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
Curso html
Curso htmlCurso html
Curso html
richard_romancini
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
Gustavo Passos
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
blackbanks
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Marcelo Mattos
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
Vasco Ferreira
 
Html e css
Html e cssHtml e css
Html e css
maxrosan
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Dra. Camila Hamdan
 
Html manual
Html manualHtml manual
Html manual
tiagosurf
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
José Willams
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
Cesar Braz
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
Marco Pinheiro
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Fabio Moura Pereira
 

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

Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Html completo
Html completoHtml completo
Html completo
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Curso html
Curso htmlCurso html
Curso html
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Html e css
Html e cssHtml e css
Html e css
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Html manual
Html manualHtml manual
Html manual
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 

Minicurso de HTML básico - Atualizado para HTML5

  • 1. 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
  • 2. 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
  • 3. 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
  • 5. 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
  • 6. HTML - Conceito Fonte: Davis’s Blog (adaptação) 6
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 19. Parte II Tabelas e listas em HTML 19
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. HTML – Formulários - Exemplo 42
  • 44. 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
  • 45. 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
  • 47. 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