Estilo de Fonte

Descrio Negrito (Bold) Itlico (Italics) Sublinhado (Underline) Sobrescrito Subscrito Tag <b></b> <strong><strong> <i></i> <u></u>   Exemplo <b>Texto em negrito</b> <strong>Texto em negrito</strong> <i>Texto Itlico</i> <u>Texto Sublinhado</u> x² = x H₂O = H2O

Atributos especficos a Fonte

Atributo Color Face Valor =#000000 =Black =Arial Resultado Exibe fonte de cor preta. Exibe fonte de cor preta. Exibe a fonte no estilo arial.

Formatao de textos
Descrio Tag <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <p></p> <hr/> <br/> <blockquote></ blockquote > <pre></pre> <div></div> <!-- --> <blink></blink> <center></center> Exemplo

Ttulo de contedo (Heading)

<h1>Ttulo de contedo</h2>

Pargrafo (Paragraph) Linha Horizontal (Horizontal Ruling) Quebra de linha (Break) Bloco de texto Texto pr-formatado (Pre-Formatted) Bloco genrico de contedo Comentrio Piscar (Deixa texto piscando) Centralizar

<p>Pargrafo</p> <hr/> <br/> <blockquote>Bloco de texto </ blockquote > <pre>Texto pr-formatado</pre> <div>Bloco genrico</div> <! Comentrio --> <blink>Teste</blink> <center>Teste</center>

Listas
Descrio Ordenada (Numerada) De marcao (No numerada) Tag <OL> <LI></LI> </OL> <UL> <LI> </UL> <DL> <DT> <DD> </DL> <UL> <LI> <OL> <LI> </LI> </OL> <LI> </UL> Exemplo <OL> <LI>TESTE</LI> </OL> <UL> <LI> Teste </UL> <DL> <DT>Term <DD>Definition of term </DL> <UL> <LI> Teste <OL> <LI>Teste</LI> </OL> <LI> Teste </UL>

Definio

Intercaladas

Menu Diretrio

<MENU> <LI> </MENU> <DIR> <LI> </DIR>

<MENU> <LI> Teste </MENU> <DIR> <LI>Teste </DIR>

Atributos especficos s listas Atributo COMPACT PLAIN SEQNUM START CONTINUE 1 TYPE (listas ordenadas) A a I i TYPE (listas no ordenadas) circle Square Disc imagesrc Valor Resultado Reduz os espaos entre linhas Suprime os pontos Define o primeiro nmero Define o primeiro nmero Recomea a partir do nmero em que tinha parado na lista precedente Numerao (padro) Ordem alfabtica em maisculas Ordem alfabtica em minsculas Numerao romana em maisculas Numerao romana em minsculas <ul type="circle"> (ponto circular) <ul type="square"> ( ponto quadrado ) <ul type="disc"> ( ponto em disco ) <ul imagesrc="seu_boto.gif"> (sua imagem)

Botes
Descrio Tag <input type= name= id= value= onclick=/> Exemplo <input type=button name=btnteste id=btnteste value=teste onclick=alert()/> <input type=Submit name=btnteste id=btnteste value=teste onclick=alert()/> <input type=reset name=btnteste id=btnteste value=teste onclick=alert()/>

Boto

Imagens
Descrio Imagem Imagem mapeada Server-side (No servidor) Imagem mapeada Cliente-side (No cliente) Tag <img src= height= width=/> <img src= ismap usemap=#> <map name=> <area shape=rect cords= href=> </map> Exemplo <img src=teste.gif height=10width=10 /> <img src=imagem.gif ismap usemap=#map_section> <map name=map_section> <area shape=rect cords=0,0,115,39 href=teste.html> </map>

Atributos especficos s imagens

Atributo ALT ALIGN Valor left Center Right Top Middle Rect Circle Polygon Resultado Permite descrever a imagem. Alinha a esquerda. Alinha no centro Alinha a direita. Alinha no topo. Alinha no centro. Define rea quente como reta. Define rea quente como circulo. Define rea quente como polgono.

Shape

Links
Descrio Hypertext (ncora) Hypermedia (ncora) Tag <a href=></a> <a href= img src=</a> Exemplo <a href=exemplo.html></a> <a href=exemplo.html img src=imagem.jpg</a>

Atributos especficos aos links

Atributo Height Width Valor Resultado Altura largura

Tabelas
Descrio Tabela (table) com linhas (row) e colunas (data). Tag <table> <TR> <TD></TD> </TR> </table> Exemplo <table> <TR> <TD>Teste</TD> </TR> </table>

Atributos especficos s tabelas

Atributo Valor ALIGN VALIGN COLSPAN ROWSPAN BGColor=#000000 Em pixels. Ex =5. Width=3in Width=60% Align=valor. Ex: <caption align=left> Align=left Align=right Ex: =10 Ex: =10 Resultado Cabealho as linhas e colunas. (Em negrito) Alinha horizontalmente como: Left, right ou Center. Alinha verticalmente como: Top, Bottom ou Center. Uni colunas. Uni linhas. Exibe o fundo na cor preta. Adicionar uma borda a tabela. Ajustar a largura da tabela em polegadas. Ajustar a largura da tabela em porcentagem. Especifica um ttulo a uma tabela. Alinha uma tabela a esquerda. Alinha uma tabela a direita. Especifica o espao entre a borda da tabela e as clulas, em pixels. Especifica o espao entre os dados e a borda de uma clula, em pixels.

TH (Table Header) e TD

Border Width Caption Align Cellspacing Cellpadding

Formulrios
Descrio Formulrio Tag <FORM></FORM> Exemplo <Form method=post action=testeServlet> </Form>

Atributos especficos aos formulrios

Atributo Method Action Type=Text Type=Password Type=Hidden Type=Radio Type=Checked Type=Checkbox Type=Reset Type=Submit Value= Rows Cols <Select Name=> <option value=> Menu </option> </Select> Selected Size Multiple. Valor Post Get Resultado O browser enviar diretamente o fluxo de dados. O Fluxo de dados ser anexado a URL do script enviado, como uma URL nica. Especifica a URL do script que ir processar os dados do formulrio. Adiciona uma caixa de texto. Adiciona um campo de senha. Adiciona um campo oculto. Adiciona um radio Button. Exibe uma das opes de um radio selecionada por padro. Adiciona um conjunto de checkboxes. Adiciona um boto de reset. Envia ao servidor as informaes digitadas no formulrio. Permite exibir um texto padro e mudar o valor dos botes. Adicionar uma rea de texto em um formulrio. Especifica o tamanho da rea de texto pelo nmero de linhas. Especifica a largura da rea de texto pelo nmero de colunas. Cria um menu Pop-up, permitindo ao usurio selecionar uma nica opo. Exibe um item por padro no menu. Especifica o nmero de itens que sero exibidos no menu. Adiciona um menu scrolling, permitindo uma ou mais opes em um menu.

Input

Textarea

Select

Atributos especficos ao Body

Atributo Valor Background =url BGColor =#FFFFFF Text =#000000 Size=+1 Size=+2 Size=+3 (Padro) Size=+4 Size=+5 Size=+6 Size=+7 Link=cor VLink=cor ALink=cor Resultado Exibe uma imagem no background. Exibe a cor do fundo na cor branca. Exibe a cor do texto na cor preta.

body

Especifica o tamanho da fonte.

Especifica a cor dos links no visitados da pgina. Especifica a cor dos links que j foram clicados. Especifica a cor que o link dever apresentar quando o cursor est sobre ele.

Frames Descrio Frameset Tag <frameset></frameset> Exemplo <frameset cols=25%,*> <frame src=frame_a.html> <frame src=frame_a.html> </frameset>

Atributos especficos ao Frame

Atributo Frameset Valor rows=20%,80% cols=20%,80% src=*.html MarginWidth=0 MarginHeight=0 Scrolling=Yes NoResize Name=main target=main target=_blank target=_self target=_parent target=_top Resultado Define o primeiro frame horizontal com tamanho 20%, e o segundo com 80% Define o primeiro frame vertical com tamanho 20%, e o segundo com 80% Especifica a url que voc deseja carregar em um frame. Especifica a margem direita e esquerda do contedo em um frame, em pixels. Especifica a margem superior e inferior do contedo em um frame, em pixels. Adiciona uma barra de rolagem a um frame. Evita que o usurio redimensione um frame. Especifica o nome para o frame. Especifica o frame alvo. Abre o link numa nova janela. Abre o link no mesmo frame. Carrega a pgina no frame pai. Carrega a pgina no frame mais alto da pgina.

Frame

<a href=url> Teste </a>

Head Descrio Head Tag <head></head> Exemplo <head>Teste</head>

Atributos especficos Head

Atributo Valor Name=author content=Joo Name=Description Name=Keywords Name=Generetor Name=Robots Name=Copyright HTTP-equiv=content-type content=text/html charset=UTF-8 HTTP-equiv=expires HTTP-equiv=refresh content=segundos HTTP-equiv=set-cookie Resultado O valor de content se refere ao nome do autor. Define a descrio do documento. Define as palavras-chave que descrevem o documento. Define o programa utilizado para gerar o documento. Define regras para os robs (programas de busca.) Define informaes de direitos autorais do documento. Define o tipo de contedo da pgina, e codificao. Define quando o documento ser considerado obsoleto. Define o intervalo de tempo para que o documento recarregue. Define o valor de um cookie.

Meta

Tabela de Cores para Linguagem HTML Os 16 nomes de cores aceitos segundo o HTML:

aqua gray navy silver

black green olive teal

blue Lime Purple White

fuchsia maroon red yellow

Os cdigos de cores:
000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 663300 666600 669900 66CC00 000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 663333 666633 669933 66CC33 000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 663366 666666 669966 66CC66 000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 663399 666699 669999 66CC99 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 6633CC 6666CC 6699CC 66CCCC 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF 6633FF 6666FF 6699FF 66CCFF

66FF00 990000 993300 996600 999900 99CC00 99FF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

66FF33 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

66FF66 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

66FF99 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF