Curso HTML 5

Silvio A Carro
Cassia A Perego
Cristiane M Rizo
Unoeste/FIPP
2014/20
Estrutura Principal (elementos)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Título</title>
</head>
<body>
Conteúdo, texto, imagens, links e etc…
</body>
</html>
Estrutura Principal (elementos com atributos)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Título</title>
</head>
<body bgcolor=“red” text=“green”>
Conteúdo, texto, imagens, links e etc…
</body>
</html>
Tag body
A tag <body>
<body>
<h2> HMTL é fácil de
aprender
</h2> A quebra de linha é obtida
com a tag <br>
<body>
Cabeçalhos
Estrutura de cabeçalho
As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador
que trata-se de um cabeçalho (h vem de "heading" - cabeçalho )
<H1>...</H1> 1º NÍVEL DE CABEÇALHO (fonte maior)
<H6> ... </H6> ÚLTIMO NÍVEL DE CABEÇALHO (fonte menor)
<h1> Título 1 </h1>

Parágrafos
<p>Este é um parágrafo</p>
<p>Este é um outro parágrafo</p>
Tags úteis
TAG Significado
<br> Insere linhas em branco, quebra de linha
<hr> Insere uma linha horizontal
<!- -> Define um comentário
<i> </i> Itálico
<b> </b> Negrito
<big> </big> Texto grande
<small> </small> Texto pequeno
<strong> </strong> Texto enfatizado
<sub> </sub> Subscrito
<sup> </sup> Sobrescrito
Tabelas
<table border="1“ width="200">
<tr>
<td width="30%">Primeira</td>
<td width="70%">Segunda</td>
</t r>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
Exemplos
Mais atributos...
BORDER  <TABLE BORDER=5>

ALIGN  <TD ALIGN="CENTER">
VALIGN  <TD VALIGN="TOP">
alinhamento em relação às
bordas superior e inferior
ROWSPAN  <TD ROWSPAN=”3”>
Célula com 3 linhas
COLSPAN  <TD COLSPAN=”3”>
Célula com 3 colunas
Exercício: crie a seguinte interface utilizando tabelas
Links
<a href="http://www.midiaindependente.org>
CMI Brasil
</a>
<a href="links.html">
Acesse os links!
</a>
<a href = http://wikipedia.org target="_blank">

Acesse a Wikipedia!
</a> Abre em
outra janela
Formulários (input)
<form action="URL para onde serão enviado os dados"
method="método HTTP (pode ser GET ou POST)“
target="nome da janela que mostrará a resposta" >
... corpo do formulário
(permite qualquer coisa permitida em <BODY>)
...
</form>
Atributos
ACTION: Especifica o URL do script ao qual serão enviados os
dados do formulário.
METHOD: Seleciona um método para acessar o URL de ação
GET
os dados enviados fazem parte do URL (endereço) associado à consulta enviada
para o servidor;
suporta até 128 caracteres. Ex: www.xxx.com.br?nome=teste
POST
os dados entrados fazem parte do corpo da mensagem enviada para o servidor;
transfere grande quantidade de dados.
EX: <form method="POST" action = “pagina.html">

<form action="processar.php" method="post">
<label>Nome:</label>
<input type="text”/><br>
<label>Complete a frase:</label><br>
<textarea>Html é uma linguagem de....</textarea><br>
<fieldset> <legend>Informe o gênero: </legend>
<select>
<option>masculino</option> <option>feminino</option>
</select>
</fieldset><br>
<button>Clique aqui</button>
</form>
<form action="processar.php" method="post">
Primeiro nome:
<input type=“text“ name="primeiro_nome“><br>
Último nome:
<input type=“text“ name="ultimo_nome">
</ form>
Formulários
<form action="processamento.asp">
<input type=“radio" name=“sexo“ value="masculino“ checked>
Masculino
<br>
<input type=“radio" name=“sexo“ value=“feminino“> Feminino
<form>
<form>
<input type="checkbox“ name=“carro">Eu tenho um carro
<br>
<input type="checkbox“ name=“surf">Eu tenho uma prancha de surf
<form>
Formulários
<form name=“input“ action="exemplos/action.html“ method="get">
Nome de usuário:
<input type=“text“ name="usuario">
<input type=“submit“ value="Submeter">
<form>
Formulários
<form name="input" action="exemplos/action.html" method="get">
Nome de usuário:<br/>
<input type=“text“ name="usuario"> <br/>
Descrição:<br/>
<textarea rows="3" cols="20">Digite algo...</textarea> <br/>
<input type="submit" value="Submeter">
<form>
Formulários (select)
Formulários (Upload)
O elemento <INPUT
TYPE="file"> cria
uma tela que permite
o Upload de arquivos
para o servidor
Formulário usado
deve ter a seguinte
sintaxe
<form action="/servlet/UploadServlet"
method="POST"
enctype="text/multipart-form-data">
<input type="file" name="up_arq" />
</form>
Formulários: novos tipos de input no HTML5
http://www.w3schools.com/tags/att_input_type.asp
search
define um input para busca. O atributo value tem efeito placeholder.
tel
define um input para telefone, e seu formato é independente de região.
url
define um input com entrada de URL absoluta.
email
define um input entrada de e-mail.
date, time, datetime e datetime-local
definem um input customizado para entrada de data, hora, e data e
hora.
http://www.w3schools.com/tags/att_input_type.asp
month e week
definem um input customizado para seleção de um mês e uma
semana respectivamente.
number
define um input para entrada de número.
range
define um input para entrada de número contido num intervalo.
Os atributos min e max determinam o valor mínimo e máximo
do intervalo, já o atributo step indica de quanto será o
incremento.
color
define um input para receber um valor RGB.
Atributos:
placeholder
define um texto estilo marca-da-água em elementos
inputs e textarea.
<input type="text" placeholder="Digite aqui seu nome"/>
autofocus
define qual elemento do formulário receberá o foco logo
que a página for carregada. Aplicado na maioria dos
elementos do formulário.
<input type="text" id="nome" autofocus="true"/>
required
define um elemento input, select ou textarea como requerido.
<input type="text" id="nome" required="required" />
pattern
valida o conteúdo de um input, utilizando uma expressão regular:
<input type="text" pattern="\d{5}-?\d{3}" title="99999-999" />
list
define uma lista de sugestões para inputs (combinado com a tag <datalist>).
<input id="lanche" type="text" list="dlLanches" />

<datalist id="dlLanches">
<option value="X-Frango"></option>
<option value="X-Salada"></option>
<option value="X-Egg"></option>
<option value="BigMac Pirata"></option>
</datalist>
Formulários (exercício)

Curso HTML 5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso HTML 5

Enviado por

Direitos autorais:

Formatos disponíveis

Silvio A Carro

<h1> Título 1 </h1>

<table border="1“ width="200">

BORDER  <TABLE BORDER=5>

<a href = http://wikipedia.org target="_blank">

EX: <form method="POST" action = “pagina.html">

<input type="text" placeholder="Digite aqui seu nome"/>

<input type="text" id="nome" required="required" />

<input id="lanche" type="text" list="dlLanches" />

Você também pode gostar