Aplicativos em PHP/Referências/HTML
HTML na Wikipedia
http://pt.wikipedia.org/wiki/Html
HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.
HyTime é um padrão para a representação estruturada de hipermédia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiper-ligações. O padrão é independente de outros padrões de processamento de texto em geral.
Título - Este aparece como título no Navegador
<HTML><HEAD><TITLE>Exemplo de Página HTML</TITLE></HEAD>
Body - Entra as tags <body> e </body> aparece praticamente toda a área útil da página
Terá texto verde, fundo branco e a imagem "background.gif" de fundo.
<body text="green" bgcolor="white" link="#FFFF00" vlink="#FF0000" background="http://www.seudominio.com/imagens/background.gif">
H1 - Texto para Título de tamanho 1. Tem tamanhos até o 6 (H6)
<H1 ALIGN="center">Exemplo de Página HTML</H1>
Tag form - Formulários são muito utilizadados para recceber informações do visitante
Veja que existem diversos controles nos forms: text, radio, select, textarea, etc.
<form method="POST" action="teste.php">
<input type="hidden" name="recipient" value>
Nome:<input type="text" name="nome" size="40" maxlength="40">
Senha:<input type="password" name="senha" size="10" maxlength="10">
Radio - Observe a prática de usar o mesmo name para agrupar vários radios
<input type="radio" name="estadocivil" value="solteiro">Solteiro
<input type="radio" name="estadocivil" value="casado">Casado
<input type="radio" name="estadocivil" value="desquitado">Desquitado
<input type="radio" name="estadocivil" value="naoinformado">Não informado
<input type="checkbox" name="personalidade" value="Hostil">Hostil
<input type="checkbox" name="maturidade" value="Adulto">Adulto
<textarea name="comentario" rows="4" cols="60" wrap="virtual" style="color:green;background-color:yellow">Texto default</textarea>
Campo Desabilitado e Somente Leitura
<input type ="text" value ="Valor" disabled readonly>
<select name=selecao>
<option name="leite" value=1 SELECTED>Leite</option>
<option name="cafe" value=2>Café</option>
<option name="cha" value=3>Chá</option>
</select>
<SELECT NAME="grupo">
<OPTION VALUE="1">Equipamento
<OPTION VALUE="2">Mão de Obra
<OPTION VALUE="3">Ferramentas
<OPTION VALUE="4" SELECTED>Material
<OPTION VALUE="5">Serviços Auxiliares
<OPTION VALUE="6">Transporte
</SELECT>
<input type="submit" name="Request" value="Enviar"><input type="reset" name="Clear" value="Limpar">
</form>
Formatação
<b>Negrito</b> <i>Itálico</i> <u>Sublinhado</u> <s>Riscado</s> <sup>Sobrescrito</sup> <sub>Subscrito</sub>
Negrito Itálico Sublinhado Riscado Sobrescrito Subscrito
Fontes
<font COLOR="#00FF00">This text is Green</font> <!-- ou "green" --> <font face="arial,helvetica,courier" size=1>Múltiplas Font Faces</font>
This text is Green
Múltiplas Font Faces
Links(âncoras)
<a HREF="http://www.2kweb.net" target="_BLANK">This links to 2K Communications</a>
<a HREF="mailto:sales@2kweb.net">Click here to e-mail our Sales Department</a>
Links para a página atual
1 - Criar destino - <a NAME="destino1"></a>
2 - Criar link - <a HREF="http://yourdomain.com/index.html#destino1">Click here to go there</a>
Imagem
<img src="http://www.2kweb.net/image-file.gif" alt="Explicação sobre a imagem" TITLE="Explicação sobre a imagem" ALIGN="LEFT" height=50 width=50>
Incorporar Vídeo e Som
<bgsound src="http://www.2kweb.net/sound.mid" loop=0"> (IE em loop. loop = -1 para parar)
<embed src="http://www.2kweb.net/sound.mid">
Títulos
<h1>Heading Size 1 - Maior</h1> <h2>Heading Size 2 - Tamanho 2</h2> <h3>Heading Size 3 - Tamanho 3</h3> <h4>Heading Size 4 - Tamanho 4</h4> <h5>Heading Size 5 - Tamanho 5</h5> <h6>Heading Size 6 - Menor</h6>
Tabelas
<table border="1" width="630">
<tr>
<td width="630" colspan=2> Largura de 630 pixels </td>
</tr>
<tr>
<td width="550">Largura de 550 pixels</td> <td width="80">Largura de 80 pixels</td>
</tr>
</table>
| Largura de 630 pixels | |
| Largura de 550 pixels | Largura de 80 pixels |
colspan = funde colunas
rowspan = funde linhas
<TABLE BORDER=1> <TR><TH COLSPAN=2>Fusão de 2 colunas</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>Fusão de 3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE>
| Fusão de Colunas | |
|---|---|
| linha1, coluna 1 | linha 1, coluna 2 |
| linha 2, coluna 1 | linha 2, coluna 2 |
| Fusão de 3 linhas | uma linha |
| duas linhas | |
| tres linhas | |
Select Múltiplo
<select name="combomulti" size="4" multiple> <option value="lista1">Seleção 1</option> <option value="lista2">Seleção 2</option> <option value="lista3">Seleção 3</option> <option value="lista4">Seleção 4</option> <option value="lista5" selected>Seleção 5</option> <!--dEFAULT--> <option value="lista6">Seleção 6</option> </select>
Pressiona-se Ctrl ou Shift enquanto seclica ou move as setas para selecionar.
</BODY>
</HTML>
Upload
<FORM NAME="form1">
Arquivo a enviar: <INPUT TYPE="file" NAME="myUploadObject">
<P>Receber as propriedades<BR>
<INPUT TYPE="button" VALUE="Nome" onClick="alert('name: ' + document.form1.myUploadObject.name)">
<INPUT TYPE="button" VALUE="Valor" onClick="alert('value: ' + document.form1.myUploadObject.value)">
<BR></FORM>
Linha Horizontal
<HR width="40%" align="center">
Frames
Criar arquivo index.html com:
<frameset rows="25%,75%" frameborder="1" framespacing="0"> <frame src=superior.html name=superior> <frameset cols=50%,50%> <frame src=esquerda.html name=esquerda frameborder="1" framespacing="0" scrolling="yes"> <frame src=direita.html name=direita frameborder="1" framespacing="0" > </frameset> </frameset><br>
Arquivo esquerda.html:
<a href="conteudohist.html" target="direita">História</a><br> <a href="conteudomat.html" target="direita">Matemática</a><br> <a href="conteudoport.html" target="direita">Português</a><br>
Criar os três arquivos acima (conteudohist.html, conteudomat.html e conteudoport.html).
Veja também um pequeno assistente de frames em:
http://ribafs.net/down/tut/html/wizards/
Respeitando a posição de digitação
Para que o navegador respeite todo o texto da mesma forma que digitamos devemos utilizar as tags
<pre> ... </pre>
<pre>
Este texto
apareçerá nesta posição. </pre>
Ótimo Tutorial sobre HTML do Tiago Daniel de Souza no site Linha de Código
Guia Prático de HTML - Parte 1
Guia Prático de HTML - Parte 2
Guia Prático de HTML - Parte 3