html - introdução e exemplos
DESCRIPTION
Exempls de tags html. Tabelas, links e formuláriosTRANSCRIPT
SumárioElementos Básicos
Tabelas
Formulários
Elementos Básicos
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 possui1 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<!-- Comentário--> Revisão de htmlde html</body>...
Código:...<body>Revisão <br /> HTML Revisão</body> HTML...
inserindo Linksa=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:[email protected]">Pedro</a>
Outras opções:Determinar o assunto<a href="mailto:[email protected]?subject=Assunto da msg">[email protected]</a>
Determinar assunto e envio para mais de 1 E-mail<a href="mailto:[email protected], [email protected] >[email protected], [email protected]</a>
Envio com assunto e cópia oculta<a href="mailto:[email protected][email protected]?subject=Assunto da msg">[email protected] </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>
<p align="center">Revisão de Html</p><p align="left"> Revisão de Html</p><p align="right">Revisão de Html</p>
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>
http://www.w3.org/TR/html4/index/attributes.html
<a href=”#”><h2>Eu estou certo!</h2></a>
<h2><a href=”#”>Não! Eu estou certo!</a></h2>
?
atenção
Tabelas
Tabelas (linhas e dados)
Código: Resultado:
<table border=”1”> <tr> <td> Agosto </td> <td> Setembro </td> </tr> <tr> <td> Outubro </td> </tr></table>
início e final de uma linha
início e final de uma célula
tr
tr
td td
td
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>
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 (espaçamento interno e externo de uma célula)
16
Tabelas (possibilidades não-recomendadas)
17
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>
Código: Resultado:
<table border=1 bgcolor="#ffff00"> <tr bgcolor="#ff0000"> <td bgcolor="#00ffff"> Agosto </td> <td> Setembro </td> </tr></table>
Tabelas (uso ultrapassado - recomenda-se uso de CSS)
Formulários
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:
Código:
<select name="sabor"> <option>Abacaxi</option> <option selected>Creme</option> <option>Morango</option> <option>Chocolate</option></select>
Resultado:
Select (valor pré-selecionado)
Select (exibe todos os valores - seleciono apenas 1)
Código:
<select name="sabor" size="4"> <option>Abacaxi</option> <option selected>Creme</option> <option>Morango</option> <option>Chocolate</option></select>
Resultado:
Chocolate
Select (seleção de múltiplos valores)
Código:
<select name="sabor" size="4" multiple> <option>Abacaxi</option> <option selected>Creme</option> <option>Morango</option> <option>Chocolate</option></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>...
<body>
<form action="resposta.php" method="GET"> Nome: <br />
<input type="text" name="nome" /> <br /><input type="submit" value="Enviar" />
</form>
</body></html>
necessitam de um script para serem processados
necessitam de um método para serem enviados
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 Specificationhttp://www.w3.org/TR/1999/REC-html401-19991224/
Introdução a Linguagem HTMLhttp://www.icmc.usp.br/ensino/material/html/intro.html