Html - introdução e exemplos

HTML
Hypertext Markup Language

Prof Evandro Manara Miletto
evandro.miletto@poa.ifrs.edu.br

Sumário
Elementos Básicos
Tabelas
Formulários

O que é HTML?
O HTML é fruto do "casamento" de dois padrões
HyTime e
SGML

O HTML (HyperText Markup Language) é a linguagem de
Marcação que permite a publicação de informações na rede
(www)

HTML
Todo documento HTML apresenta elementos entre
parênteses angulares (< e >);
Esses elementos são as etiquetas (tags) de HTML;
Toda tag possui uma abertura e um fechamento
Todo o documento html possui
1 cabeçalho (não aparece)
1 corpo (conteúdo visível)

Exemplo simples
<html>
<head>
! <title>Título</title>
</head>

<body bgcolor=“white”>

Corpo do texto, links, imagens, videos
(conteúdo)

</body>
</html>

Comentários e Quebra de Linha

Código: Resultado:

...
<body>
Revisão
 Revisão de html
de html
</body>
...

Código:
...
<body>
Revisão <br /> HTML Revisão
</body> HTML
...

inserindo Links
a=ancora, href=url + texto que aparece
<a href=“http://www.google.com.br">google</a>

Envio de E-mail Simples: (abre o cliente de e-mail do
visitante)
<a href="mailto:pedro@gmail.com">Pedro</a>

Outras opções:
Determinar o assunto
<a href="mailto:pedro@gmail.com?subject=Assunto da msg">pedro@gmail.com</a>

Determinar assunto e envio para mais de 1 E-mail
<a href="mailto:pedro@gmail.com, jose@gmail.com >pedro@gmail.com,
jose@gmail.com</a>

Envio com assunto e cópia oculta
<a href="mailto:pedro@gmail.com?bcc=jose@gmail.com?subject=Assunto da
msg">pedro@gmail.com </a>

Imagens

Código:

<img src=“computer.gif">

Resultado:

Formataçao de texto
<h1>Título grande</h1>
<h2>Título menor</h2>
<p> Parágrafo</p>
<ul>Início de lista não-ordenada </ul>
<ol>Início de lista ordenada </ol>
<li>item de uma lista </li>
<table>início de uma tabela </table>
<tr>linha de uma tabela </tr>
<td>dados de uma tabela (celula) </td>
<img src=”imagem.jpg” alt=”descrição” height=”20” width=”10”>
<a href=”http://www.google.com”>link para o google</a>
<div>delimita uma área / caixa</div>

atenção - marcação obsoleta

<b> - Negrito </b>
<i> - Itálico </i>
<u> - Sublinhado </u>
<strike> ou <s> - Frase riscada </strike>
<sub> - Frase subscrita </sub>
<sup> - Frase sobrescrita </sup>
<big> - Texto menor </big>
<small> - Texto menor </small>

<p align="center">Revisão de Html</p>
<p align="left"> Revisão de Html</p>
<p align="right">Revisão de Html</p>

http://www.w3.org/TR/html4/index/attributes.html

atenção

<a href=”#”><h2>Eu estou certo!</h2></a>
<h2><a href=”#”>Não! Eu estou certo!</a></h2>

?

Tabelas (linhas e dados)

Código: Resultado:

<table border=”1”>
<tr> td td
<td> tr
início e final td
de uma célula
Agosto tr
início e final </td>
de uma linha
<td>
Setembro
</td>
</tr>
<tr>
<td>
Outubro
</td>
</tr>
</table>
tr = table row (1 linha)
td = table data (um dado / célula da tabela)

Tabelas (altura e largura de uma célula)

Código: Resultado:

<table border=1>
<tr>
<td width="100" height="40">
Agosto
</td>
<td>
Setembro
</td>
</tr>
<tr>
<td>
Outubro
</td>
</tr>
</table>

Tabelas (espaçamento interno e externo de uma célula)

Código: Resultado:

<table border=1 cellpadding="30" cellspacing="20">
<tr>
<td >
Agosto
</td>
<td>
Setembro
</td>
</tr>
<tr>
<td>
Outubro
</td>
</tr>
</table>

Tabelas (possibilidades não-recomendadas)
Códigos: Resultados:

<table border=1>
<tr>
<td>
Agosto
</td>
<td>
Setembro
<br /><br /><br />
</td>
</tr>
</table>
<table border=1 >
<tr>
<td valign="top">
Agosto
</td>
<td>
Setembro
<br /><br /><br />
</td>
</tr>
</table>

Tabelas (uso ultrapassado - recomenda-se uso de CSS)

Código: Resultado:

<table border=1 bgcolor="#ffff00">
<tr bgcolor="#ff0000">
<td bgcolor="#00ffff">
Agosto
</td>
<td>
Setembro
</td>
</tr>
</table>

Input (entradas: sempre tem um “tipo” e um “nome”)

Código:

Nome: <input type="text" name="nome" />

Ou apenas,

Nome: <input name="nome" />

Resultado:

Nome:

Input (quebrando a linha “br” para posicionar)
Código:
Login: <input type="text" name="login" /> <br />
Password: <input type="password" name="senha" />

Resultado:
Login:
Password:

Código:

Login: <br /> <input type="text" name="login" /> <br />
Password: <br /> <input type="password" name="senha" />

Resultado:
Login:

Password:

Input pré-carregando um valor no campo

Código:

Nome: <input type="text" name="nome" value="Seu nome" />

Resultado:

Nome:

Input largura do campo (em caracteres)

Código:

Endereço: <input type="text" name="ex" size="35" />

Resultado:

Endereço:

Input tamanho maximo que exibe (máscara)

Código:

Dia do mês: <input type="text" name="ex" maxlenght="2" />

Resultado:

Dia do mês:

Input (alinhando pela direita)
Código:

<input type="text" name="data" dir="rtl">

Resultado:

Input (alterando tipos e valores)

<input type="submit" />

<input type="submit" value="Envia mensagem" />

<input type="reset" />

<input type="reset" valeu="Apaga tudo!" />

Checkbox permite múltiplas opções

Código:

<input type= "checkbox" name="esporte" value="futebol" />Futebol
<br />
<input type= "checkbox" name="esporte" value="volei" checked />Vôlei

Resultado:

Futebol

Vôlei

Radio permite apenas 1 opção

Código:

<input type="radio" name="time" value="Internacional" />Inter
<br />
<input type="radio" name="time" value="Grêmio" checked />Grêmio

Resultado:

Inter

Grêmio

Select (menu drop down )

Código:

<select name="sabor">
<option>Abacaxi</option>
<option>Creme</option>
<option>Morango</option>
<option>Chocolate</option>
</select>

Resultado:

Select (valor pré-selecionado)

Código:

<select name="sabor">
<option selected>Creme</option>
</select>

Resultado:

Select (exibe todos os valores - seleciono apenas 1)

Código:

<select name="sabor" size="4">
</select>

Resultado:

Chocolate

Select (seleção de múltiplos valores)

Código:

<select name="sabor" size="4" multiple>
</select>

Resultado:

Chocolate

Select
Código:

<select style="width: 8.216cm;">
<option>Esporte Clube Internacional</option>
<option>Grêmio Esportivo Brasil</option>
</select>

Resultado:

obs.: o atributo style permite inserção de código CSS

Textarea

Código:

<textarea cols="40" rows="5" name="comentario">
Comentário
</textarea>

Resultado:

os dados do Form
<html> necessitam de um script para serem processados
...
<body> necessitam de um método para serem enviados

<form action="resposta.php" method="GET">
Nome: <br />
<input type="text" name="nome" /> <br />
<input type="submit" value="Enviar" />
</form>

</body>
</html>

O Método pode ser GET (envio aberto via barra de endereços do navegador)
ou POST (envio encapsulado nos pacotes do http)

Referências
HTML 4.01 Speciﬁcation
http://www.w3.org/TR/1999/REC-html401-19991224/

Introdução a Linguagem HTML
http://www.icmc.usp.br/ensino/material/html/intro.html

Html - introdução e exemplos

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Html - introdução e exemplos

Semelhante a Html - introdução e exemplos (20)

Mais de Evandro Manara Miletto

Mais de Evandro Manara Miletto (20)

Html - introdução e exemplos