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.

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

<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>

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

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/