Arquivo referência de HTML e CSS
Este é o resultado de uma experiência para criar um documento que contenha o máximo de elementos HTML e CSS que eu costumo utilizar em um único documento.
O resultado é o seguinte:
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="pt-br">
<HEAD>
<TITLE>Referência de HTML</TITLE>
<META http-equiv="Expires" content="Wed, 31 Dec 2008 23:59:59 GMT">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META name="Author" content="Cid Rodrigues de Andrade">
<META name="keywords" lang="en-us" content="html, reference">
<META name="keywords" lang="pt-br" content="html, referência">
<META name="copyright" content="© 2008 Cid R Andrade">
<META name="date" content="2007-01-11F13:00:00-02:00">
<LINK rel="Index" href="http://blog.cidandrade.pro.br">
<LINK rel="Next" href="http://www.w3.org/TR/html401/cover.html#minitoc">
<LINK title="English HTML Reference" rel="alternate" hreflang="en" href="#">
<STYLE type="text/css">
* {
margin : 0 ;
padding : 0 ;
vertical-align : baseline ;
background-color : #CFF ;
text-decoration : none ;
color : #003 ;
}
#pagina {
color : #003 ;
font-family : sans-serif ;
font-size : 14px ;
margin : 30px 40px 30px 40px ;
background-color : #FFF ;
}
#cabeca {
background-color : #06C ;
padding : 15px ;
color : #FFC ;
}
#esquerda {
background-color : #09C ;
width : 150px ;
float : left ;
position : relative ;
color : #FFC ;
padding : 5px ;
}
#direita {
margin-left : 200px ;
padding : 5px 20px 5px 5px ;
}
#rodape {
background-color : #3CF ;
clear : both ;
padding : 6px ;
}
P {
text-align : justify ;
padding : 5px ;
}
P:first-letter {
font-size : 200% ;
font-family : serif ;
font-style : italic ;
color : FFC ;
}
SPAN.naoport {
font-style : oblique ;
text-decoration : underline ;
}
CODE {
border-width : thin ;
border-style : dashed ;
border-color : #063 ;
padding : 5px ;
margin : 6px ;
}
H1 , H2 {
color : #933 ;
letter-spacing : 0.3em ;
}
ABBR {
color : #933 ;
}
A:link, A:visited: A:active {
text-decoration : none ;
color : #003 ;
}
A:hover {
text-decoration : underline ;
color : #003 ;
}
BLOCKQUOTE {
padding : 5px 20px 5px 20px ;
}
SAMP {
font-variant : small-caps ;
}
PRE {
font-size : 70% ;
}
UL {
list-style-position : outside ;
list-style-type : circle ;
}
OL {
list-style-position : inside ;
list-style-type : lower-alpha ;
}
DT {
font-weight : bold ;
font-style : italic ;
}
DD {
padding-left : 15px ;
}
TABLE {
border-collapse : collapse ;
}
TABLE , TR , TH , TD {
border : 3px solid #6F6 ;
}
TD , TH {
padding : 7px ;
}
FORM {
width : 500px ;
}
LABEL , INPUT {
margin : 8px 2px 3px 4px ;
}
</STYLE>
<SCRIPT type="text/javascript">
window.onload = function() {
alert( "Bem vindo ao documento de referência a HTML" ) ;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="pagina">
<DIV id="cabeca">Cabeçalho</DIV> <!-- Fim do DIV cabeca -->
<DIV id="corpo">
<DIV id="esquerda">Coluna da esquerda</DIV> <!-- Fim do DIV esquerda -->
<DIV id="direita">
<H1>Referência de <ABBR title="Hypertext Markup Language">HTML</ABBR></H1>
<H2>Documento de consulta para HTML e <ABBR title="Cascade Style Sheet">CSS</ABBR></H2>
<!-- Existem seis níveis de cabeçalho, de H1 a H6 -->
<P>Referência de HTML, como definido pelo <ABBR title="World Wide Web Consortium">W3C</ABBR>, o
<SPAN class="naoport" lang="en-us">World Wide Web Consortium</SPAN>. Acesse-o clicando
<A href="http://www.w3.org/">aqui</A>.</P> <!-- Fechar o parágrafo é opcional -->
<P>Os elementos de um texto podem ser <EM>enfatizados</EM>, <STRONG>fortemente enfatizados</STRONG>, citações (Como o que disse
<CITE>Ayrton Senna</CITE>: <Q cite="http://pt.wikiquote.org/wiki/Senna">Canalizo todas as minhas energias para ser o melhor do mundo.</Q> ou
<CITE>Martin Luther King</CITE>: <Q lang="en-us" cite="http://en.wikiquote.org/wiki/Martin_Luther">
Nothing in the world is more dangerous than sincere ignorance and conscientious stupidity.</Q>), definições (Como dizer que
<DFN>Java é uma linguagem de programação de excelência</DFN>), abreviaturas ou <ABBR title="abreviatura">abrev.</ABBR>, acrônimos como
<ACRONYM>modem</ACRONYM>, subscritos e superscritos (como os necessários para indicar os isóbaros <SUB>18</SUB>A<SUP>40</SUP> e
<SUB>20</SUB>Ca<SUP>40</SUP>) e indicações de <DEL>troca</DEL><INS>substituição</INS> de textos.
<P>Temos ainda grandes citações como a de <CITE>Alberto Caeiro, heterônimo de Fernando Pessoa</CITE><BR>
<BLOCKQUOTE cite="http://pt.wikiquote.org/wiki/Fernando_Pessoa">Se depois de eu morrer, quiserem escrever a minha biografia, não há nada mais simples.
Tem só duas datas - a da minha nascença e a da minha morte. Entre uma e outra todos os dias são meus.</BLOCKQUOTE>
<P>Trechos de código como:<BR>
<CODE>
System.out.println("Texto") ;
</CODE><BR>
<P>Exemplos como o da saída do comando acima que é:<BR>
<SAMP>Texto</SAMP>
<P>Textos com formatação pré-definida como este soneto de <CITE>Augusto dos Anjos</CITE><BR>
<PRE>
Meu coração tem catedrais imensas,
Templos de priscas e longínquas datas,
Onde um nume de amor, em serenatas,
Canta a aleluia virginal das crenças. Na ogiva fúlgida e nas colunatas
Vertem lustrais irradiações intensas
Cintilações de lâmpadas suspensas
E as ametistas e os florões e as pratas.
Como os velhos Templários medievais
Entrei um dia nessas catedrais
E nesses templos claros e risonhos …
E erguendo os gládios e brandindo as hastas,
No desespero dos iconoclastas
Quebrei a imagem dos meus próprios sonhos!
</PRE>
<P>Podemos utilizar listas não-ordenadas
<UL>
<LI>Um item
<LI>Outro item
<LI>E mais um item
</UL>
<P>Listas ordenadas
<OL>
<LI>Primeiro item
<LI>Segundo item
<LI>Terceiro item
</OL>
<P>E listas de definições
<DL>
<DT>Lista não-ordenada</DT>
<DD>Não torna explícita a ordem dos elementos</DD>
<DT>Lista ordenada</DT>
<DD>Torna explícita a ordem dos elementos</DD>
<DT>Lista de definições</DT>
<DD>Como esta aqui</DD>
</DL>
<P>Temos também as tabelas
<TABLE summary="Exemplo de tabela">
<CAPTION>Tabela exemplo</CAPTION>
<THEAD><TR><TH>Nome<TH>Preço
<TBODY>
<TR><TD>Coisa 1<TD>3,56
<TR><TD>Coisa 2<TD>7,38
<TFOOT><TR><TD>Total<TD>10,94
</TABLE>
<P>Formulários
<FORM action="#" method="post" enctype="application/x-www-form-urlencoded">
<FIELDSET>
<LEGEND>Informações pessoais</LEGEND>
<LABEL for="f1">Nome: </LABEL>
<INPUT type="text" name="nome" id="f1"><BR>
<LABEL for="f2">Senha: </LABEL>
<INPUT type="password" name="senha" id="f2" size="10" maxlength="8"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Outros dados</LEGEND>
<LABEL for="f3">Aceita mensagens?</LABEL>
<INPUT type="checkbox" name="aceita" id="f3" checked="true"><BR>
Sexo:
<INPUT type="radio" name="sexo" value="M">Masculino
<INPUT type="radio" name="sexo" value="F">Feminino<BR>
<LABEL for="f4">Escolha</LABEL><BR>
<SELECT name="prato" multiple size="4" id="f4">
<OPTGROUP label="Acompanhamentos" value="base">
<OPTION selected value="arroz">Arroz Branco</OPTION>
<OPTION selected value="feijao">Feijão carioquinha</OPTION>
<OPTION value="fritas">Batatas Fritas</OPTION>
<OPTGROUP label="Saúde" value="saude">
<OPTION value="salada">Salada</OPTION>
<OPTION value="legumes">Legumes cozidos no vapor</OPTION>
<OPTGROUP label="Principal" value="principal">
<OPTION value="bife">Bife grelhado</OPTION>
<OPTION value="file">Filé de Frango no molho</OPTION>
</SELECT><BR>
<LABEL for="f5">Arquivo a enviar</LABEL>
<INPUT type="file" name="arquivo" id="f5"><BR>
<LABEL for="f6">Observações</LABEL><BR>
<TEXTAREA name="obs" rows="10" cols="60" id="f6"></TEXTAREA>
<INPUT type="hidden" name="segredo">
</FIELDSET>
<INPUT type="submit">
<INPUT type="reset">
<!-- Ainda temos os INPUT dos tipos image e button -->
</FORM>
<P>Imagens<BR>
<IMG src="http://tdias.files.wordpress.com/2007/05/pg-procap-icone-rec-internet.gif" alt="A Internet">
<P>Objetos<BR>
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/nsa5ZTRJQ5w&rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/nsa5ZTRJQ5w&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
<DIV id="enderecos">
<ADDRESS>
<A href="http://blog.cidandrade.pro.br" title="Endereço do autor">
Blog de Cid Rodrigues de Andrade
</A>
</ADDRESS>
</DIV> <!-- Fim do DIV enderecos -->
</DIV> <!-- Fim do DIV direita -->
</DIV> <!-- Fim do DIV corpo -->
<DIV id="rodape">Rodapé</DIV> <!-- Fim do DIV rodape -->
</DIV> <!-- Fim do DIV pagina -->
</BODY>
</HTML>
Para obter o arquivo, clique aqui. Espero sugestões para incrementar este exemplo.
Quase criei um assim essa semana! Valeu! :-)
Maravilhoso!
Um arquivo para se ter sempre por perto. Sempre presiso procurar sobre algum elemento e como utiliza-lo e tenho que ficar caçando na internet…
[...] O padrão HTML 4 ainda é mal interpretado. Vemos muitos sítios de internet com tags indicadas para não serem mais utilizadas, como FONT ou CENTER, indicações de formatação sem uso de CSS e organização espacial com uso de tabelas. Este blog chegou a publicar um exemplo de referência do HTML 4 com CSS. [...]
[...] Referência de HTML e CSS [...]
[...] Referência de HTML e CSS [...]