You are on page 1of 11

Anexo I - Cdigo HTML Bsico As cores so definidas por um nome (em sinal #.

Cr Nome Cdigo Cr Nome Black #000000 Gray #808080 Maroon #800000 Purple #800080 Lime #00FF00 Yellow #FFFF00 Blue #0000FF Aqua #00FFFF

ingls) ou um cdigo hexadecimal precedido pelo Cdigo Silver White Red Green Olive Teal Navy Fuchsia #C0C0C0 #FFFFFF #FF0000 #008000 #808000 #008080 #000080

#FF00FF

GERAL (todos os documentos HTML devem ter estes comandos. ) Tipo de Documento Titulo (Title ) exibido no topo da janela) Cabealho (Header) ttulo,etc. No exibida. ) Corpo (Body) exibido) <HTML></HTML> (incio e fim de arquivo) <TITLE></TITLE> (deve estar no cabealho. <HEAD></HEAD> (Informao descritiva, como o <BODY></BODY> (o conteudo da pgina a ser

DEFINIO ESTRUTURAL (APARNCIA CONTROLADA PELO NAVEGADOR) Titulo (Heading) Alinhamento do ttulo (Align Heading) Diviso (Division) Alinhamento da diviso(Align Division) > Bloco de Cdigo(Block Quote) ntado) Enfase (Emphasis) Forte enfase (Strong Emphasis) bold) Citao (Citation) Cdigo (Code) Exemplo de saida (Sample Output) Entrada p/ teclado (Keyboard Input) Variavel (Variable) Defino (Definition) tado) Endereo do autor (Author's Address) Fonte Grande (Large Font Size) Fonte Pequena (Small Font Size) <H?></H?> (the spec. defines 6 levels) <H? ALIGN=LEFT CENTER RIGHT></H?> <DIV></DIV> <DIV ALIGN=LEFT RIGHT CENTER JUSTIFY></DIV <BLOCKQUOTE></BLOCKQUOTE> (usualmente inde <EM></EM> (usually displayed as italic) <STRONG></STRONG> (usually displayed as <CITE></CITE> (usually italics) <CODE></CODE> (for source code listings) <SAMP></SAMP> <KBD></KBD> <VAR></VAR> <DFN></DFN> (ainda no foi largamente implemen <ADDRESS></ADDRESS> <BIG></BIG> <SMALL></SMALL>

FORMATAO DA APARNCIA (O autor especifica a apearncia do texto) Negrito (Bold) Itlico (Italic) Sublinhado (Underline) <B></B> <I></I> <U></U> (ainda no foi largamente implemen

tado) Riscado (Strikeout) e implementado) Riscado (Strikeout tado) Subscrito (Subscript) Sobrescrito (Superscript) Tipogrfico (Typewriter) ma mquina de escrever) Preformatado (Preformatted)

<STRIKE></STRIKE> (ainda no foi largament <S></S> (ainda no foi largamente implemen <SUB></SUB> <SUP></SUP> <TT></TT> (espaamento constante como o de u <PRE></PRE> (display text spacing as-is)

Largura (Width) <PRE WIDTH=?></PRE> (em caracteres) Centralizar (Center) <CENTER></CENTER> (for both text and ima ges) Cintilante (Blinking) <BLINK></BLINK> Tamanho da fonte (Font Size) <FONT SIZE=?></FONT> (varia de 1-7) Mudar tamanho da fonte(Change Font Size)<FONT SIZE="+ -?"></FONT> Tamanho Bsico (Base Font Size) <BASEFONT SIZE=?> (de 1-7; "default" 3) Cr da fonte (Font Color) <FONT COLOR="#$$$$$$"></FONT> Tipo de Fonte (Select Font) <FONT FACE="***"></FONT> Multiplas Colunas (Multi-Column) <MULTICOL COLS=?></MULTICOL> Gutter (Column Gutter) <MULTICOL GUTTER=?></MULTICOL> (espao ent re colunas) Largura da coluna (Column Width) <MULTICOL WIDTH=?></MULTICOL> Espaador (Spacer) <SPACER> Tipo de espaador(Spacer Type) <SPACER TYPE=horizontal vertical block> Tamanho do espao(Size) <SPACER SIZE=?> Dimenes do espao (Dimensions) <SPACER WIDTH=? HEIGHT=?> Alinhamento doespao (Alignment) <SPACER ALIGN=left right center> ELOS(LINKS) E GRFICOS Ligar a alguma coisa (Link Something ) <A HREF="URL"></A> A local especfico (Link to Target) <A HREF="URL#***"></A> (se em outro documen to) <A HREF="#***"></A> (se no mesmo document o) Janela especfica (Target Window) <A HREF="URL" TARGET="***"></A> (usado em f rames) Define um local (Define Target) <A NAME="***"></A> Exibe Imagem (Display Image) <IMG SRC="URL"> Alinhamento (Alignment) <IMG SRC="URL" ALIGN=TOP BOTTOM MIDDLE LE FT RIGHT> Centralizar (center) <center></center> Alternate <IMG SRC="URL" ALT="***"> (se a imagem na for exibida) Dimenses (Dimensions) <IMG SRC="URL" WIDTH=? HEIGHT=?> (em pixeis ) Borda (Border) <IMG SRC="URL" BORDER=?> (em pixeis) Espao ao redor (Runaround Space) <IMG SRC="URL" HSPACE=? VSPACE=?> (em pixei s) Proxi de baixa Resoluo(Low-Res Proxy)<IMG SRC="URL" LOWSRC="URL"> Mapa de Imagem(Imagemap) <IMG SRC="URL" ISMAP> (requires a script) Mapa de Imagem(Imagemap) <IMG SRC="URL" USEMAP="URL"> Mapa (Map) <MAP NAME="***"></MAP> (describes the map ) Seo(Section) <AREA SHAPE="RECT" COORDS=",,," HREF="URL " NOHREF> Extrair Cliente(Client Pull) <META HTTP-EQUIV="Refresh" CONTENT="?; UR L=URL">

Incrustar Objeto( Embed Object ina) Tamnho do Objeto( Object Size) DIVISORES Paragrafo (Paragraph) desnecessrio) Alinhar o texto(Align Text) Quebrade linha(Line Break) Limpar o texto(Clear Textwrap) Linha horizontal(Horizontal Rule) Alinhamento(Alignment) Espessura (Thickness) Largura(Width) Largura em porcentagem (Width Percent) idth) Linha slida (Solid Line) No Quebrar linha (No Break) No quebrar palavra(No Word Break)

<EMBED SRC="URL"> (insere o objeto na pag <EMBED SRC="URL" WIDTH=? HEIGHT=?>

<P></P> (o comando de fechamento pode ser <P ALIGN=LEFT CENTER RIGHT></P> <BR> (Retorna para o incio da prxima linha) <BR CLEAR=LEFT RIGHT ALL> <HR> <HR ALIGN=LEFT RIGHT CENTER> <HR SIZE=?> (em pixeis) <HR WIDTH=?> (em pixeis) <HR WIDTH="%"> (as a percentage of page w <HR NOSHADE> (without the 3D cutout look) <NOBR></NOBR> (prevents line breaks) <WBR> (where to break a line if needed)

LISTAS (As listas podem ser entremeadas) Sem ordem (Unordered List) ) Compacta (Compact) Bolas (Bullet Type) lista) intes) Lista ordenada (Ordered List) lista) Lista compacta (Compact) Numerada (Numbering Type) s) Numero inicial (Starting Number) Lista de definio(Definition List) ) Definio-compacta (Compact) Menu (Menu List) item da lista) Menu Compacta (Compact) Lista de Diretrio(Directory List) ) Lista de Diretrio Compacta) (Compact) FUNDO (BACKGROUNDS) E CORES Titulo do fundo (Tiled Bkground) Cor de fundo(Bkground Color) o/verde/azul) Cor do texto(Text Color) Cor dos elos(Link Color) Elo visitado(Visited Link) Elo ativo(Active Link <BODY BACKGROUND="URL"> <BODY BGCOLOR="#$$$$$$"> (a ordem vermelh <BODY <BODY <BODY <BODY TEXT="#$$$$$$"> LINK="#$$$$$$"> VLINK="#$$$$$$"> ALINK="#$$$$$$"> <UL><LI></UL> (<LI> before each list item <UL COMPACT></UL> <UL TYPE=DISC CIRCLE SQUARE> (para toda a <LI TYPE=DISC CIRCLE SQUARE> (este e segu <OL><LI></OL> (<LI> antes de cada item da <OL COMPACT></OL> <OL TYPE=A a I i 1> (para toda a lisat) <LI TYPE=A a I i 1> (este item e seguinte <OL START=?> (para toda a lista) <LI VALUE=?> (este itm e seguintes) <DL><DT><DD></DL> (<DT>=term, <DD>=definition <DL COMPACT></DL> <MENU><LI></MENU> (<LI> antes de cada <MENU COMPACT></MENU> <DIR><LI></DIR> (<LI> before each list item <DIR COMPACT></DIR>

CARACTERES ESPECIAIS (todos eles devem ser escritos em minsculas)

Caracter Especial &#?; Cdigo > &lt; Registered TM > &gt; Registered TM & &amp; Copyright &#169; " &quot; t &copy; &para; Espao sem quebra &Agrave; &ntilde; &Aacute; &Uacute &Acirc; &Atilde; &Auml; &Aring; &AElig;

(aonde ? o cdigo ISO Cdigo Cdigo &Ccedil; &#174; &ccedil; &reg; &rvbar; &deg;

8859-1) &frac14 &frac12 &frac34;

Cdigo

Cdigo &156; &laquo; &raquo;

&plusmn; &szlig; &167;

&sect; Copyrigh &micro; &Ocirc; &Otilde; &Uuml; &Oacute

&thorn; &nbsp &166; &Eacute

&acute

&Ntilde;

&Euml;

&Iuml;

&Ouml;

&aacute; &oacute &agrave; &acirc; &atilde; &auml; &aring; &aelig;

&eacute &uacute

&iacute

&ocirc; &otilde;

&ouml; &uuml; &oslash; &yuml;

&yacute;

FORMULRIOS (geralmente requerem um script em seu servidor) Define o formulrio Arquivo(File) Upload > Campo de entrada (Input Field) IMAGE HIDDEN SUBMIT RESET"> Nome do campo (Field Name) Valor do campo (Field Value) Assinalado(Checked?) boxes) Tamanho do campo(Field Size) Comprimento mximo(Max Length) Seleionar (Selection List) Nomeda lista(Name of List) Nmero de opes(# of Options?) Escolha mltipla(Multiple Choice) uma) Opo(Option) Opo padro(Default Option) Tamanho da Caiza de entrada (Box Size) <FORM ACTION="URL" METHOD=GET POST></FORM> <FORM ENCTYPE="multipart/form-data></FORM <INPUT TYPE="TEXT PASSWORD CHECKBOX RADIO <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED> (para checkboxes e radio <INPUT SIZE=?> (em caracteres) <INPUT MAXLENGTH=?> (em caracteres) <SELECT></SELECT> <SELECT NAME="***"></SELECT> <SELECT SIZE=?></SELECT> <SELECT MULTIPLE> (pode selecionar mais de <OPTION> (itens que podem ser selecionados) <OPTION SELECTED> <TEXTAREA ROWS=? COLS=?></TEXTAREA>

Nome da caixa (Name of Box) Borda (Wrap Text) TAREA> TABELAS Define a Tabela Borda da Tabela (Table Border) (off)] Borda da Tabela (Table Border) o valor) Espacamento da clula(Cell Spacing) Cell Padding Largura desejada(Desired Width) Largura em porcentagem(Width Percent) Linha da tabela (Table Row) Alinhamento(Alignment) Alinhamento vertical Clula da tabela(Table Cell) ) Alinhamento na clula(Alignment) IDDLE BOTTOM> No quebrar linhas(No linebreaks) Expandir colunas (Columns to Span) Linhas para expandir (Rows to Span) Largura desejada(Desired Width) Largura em %(Width Percent) Cr da Clula (Cell Color) Ttulo da tabela(Table Header) do e emnegrito) Alinhamento do ttulo(Alignment) DLE BOTTOM> No quebrar linhas(No Linebreaks) Colunas p/Expandir(Columns to Span) Linhas a Expandir (Rows to Span) Largura desejada (Desired Width) Largura em % (Width Percent) Cr da clula (Cell Color) Captao(Table Caption) Alinhamento(Alignment) table)

<TEXTAREA NAME="***"></TEXTAREA> <TEXTAREA WRAP=OFF VIRTUAL PHYSICAL></TEX

<TABLE></TABLE> <TABLE BORDER></TABLE> [ligado(on) ou no <TABLE BORDER=?></TABLE> (voc pode fixar <TABLE CELLSPACING=?> <TABLE CELLPADDING=?> <TABLE WIDTH=?> (em pixeis) <TABLE WIDTH=%> (percentagem da pagina) <TR></TR> <TR ALIGN=LEFT RIGHT CENTER (VALIGN=TOP MIDDLE BOTTOM> <TD></TD> (must appear within table rows <TD ALIGN=LEFT RIGHT CENTER VALIGN=TOP M <TD NOWRAP> <TD COLSPAN=?> <TD ROWSPAN=?> <TD WIDTH=?> (em pixeis) <TD WIDTH="%"> (percentagem da tabela) <TD BGCOLOR="#$$$$$$"> <TH></TH> (Exibido como dade,centralinha <TH ALIGN=LEFT RIGHT CENTER VALIGN=TOP MID <TH NOWRAP> <TH COLSPAN=?> <TH ROWSPAN=?> <TH WIDTH=?> (em pixeis) <TH WIDTH="%"> (percentagem da tabela) <TH BGCOLOR="#$$$$$$"> <CAPTION></CAPTION> <CAPTION ALIGN=TOP BOTTOM> (above/below

MOLDURAS(FRAMES) [define e manipula especificas regies da tela] Nome do Documento(Frame Document) >) Altura das linha(Row Heights) u %) Altura em linhas(Row Heights) o relativo) Largura das Colunas(Column Widths) u %) Largura das Colunas(Column Widths) o relativo) Bordas(Borders) Largura da Borda(Border Width Cr da Borda(Border Color) Define a Moldura(Define Frame) a) Exibe Documento(Display Document) <FRAMESET></FRAMESET> (em lugar de <BODY <FRAMESET ROWS=,,,></FRAMESET> (pixeis o <FRAMESET ROWS=*></FRAMESET> (* = tamanh <FRAMESET COLS=,,,></FRAMESET> (pixeis o <FRAMESET COLS=*></FRAMESET> (* = tamanh <FRAMESET FRAMEBORDER="yes no"> <FRAMESET BORDER=?> <FRAMESET BORDERCOLOR="#$$$$$$"> <FRAME> (conteudo de uma moldura especfic <FRAME SRC="URL">

Nome da Moldura(Frame Name) top> Largurada margem(Margin Width) direita) Altura da margem(Margin Height) e inferior) Barra de Seleo(Barra Scrollbar?) No alterar o tamanho(Not Resizable) Bordas (Borders) Cr da Borda(Border Color) Contedo sem molduras(Unframed Content) e no aceitam "frames") JAVA Applet Nome do arquivo(File Name) Parametros(Parameters) Localizao(Location) Identificador(Identifier) Texto alternativo(Alt Text) no aceitam Java) Alinhamento(Alignment) Tamanho(Size) Espaamento(Spacing) DIVERSOS Comentrios (Comment) Prlogo (Prologue) > Pesquisavel(Searchable) Pronto(Prompt) rada de dados) Envia pesquisa (Send Search) al) URL deste Arquivo(of This File) ) Nome bsico da janela o) Relasionamento (Relationship) eve estar no cabealho) Informao(Meta Information) Pginas de Estilo(Style Sheets) ado) Scripts portado)

<FRAME NAME="***" _blank _self _parent _ <FRAME MARGINWIDTH=?> (margens esquerdae <FRAME MARGINHEIGHT=?> (margens superior <FRAME SCROLLING="YES NO AUTO"> <FRAME NORESIZE> <FRAME FRAMEBORDER="yes no"> <FRAME BORDERCOLOR="#$$$$$$"> <NOFRAMES></NOFRAMES> (para navegadores qu

<APPLET></APPLET> <APPLET CODE="***"> <APPLET PARAM NAME="***"> <APPLET CODEBASE="URL"> <APPLET NAME="***"> (para referencias) <APPLET ALT="***"> (para avegadores que <APPLET ALIGN="LEFT RIGHT CENTER"> <APPLET WIDTH=? HEIGHT=?> (em pixeis) <APPLET HSPACE=? VSPACE=?> (em pixeis)

<!-- *** --> (no exibido pelo navegador) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN" <ISINDEX> (indica um indice de busca) <ISINDEX PROMPT="***"> (Texto para a ent <A HREF="URL?***"></a> (use uma questo re <BASE HREF="URL"> (deve estar no cabealho <BASE TARGET="***">(deve estar no cabealh <LINK REV="***" REL="***" HREF="URL"> (d <META> (deve estar no cabealho) <STYLE></STYLE> (ainda no amplamente suport <SCRIPT></SCRIPT> (ainda no amplamente su

Inserindo uma imagem como hyperlink . comum usar botes para entrar e sair de uma pgina. Vamos usar um boto para voltar para a primeira pgina teste. Digite:<a href= teste.htm > Isso aponta para a pgina teste. Insera a tag da figura agora, neste caso um boto para voltar. Digite:<img src= voltar.gif alt= voltar height=30 width=60> Agora feche o hyperlink com</a> Exemplo completo:

<a href= teste.htm > <img src= voltar.gif </a> Tag para cores Digite:

alt= voltar

height=30 width=60>

<font color="red">Texto aqui</font> Branco White Preto Black Azul Blue Amarelo Yellow Verde Green Laranja Orange Vermelho Red Rosa Pink Cinza Gray Ouro Gold Verde azulado Teal Azul marinho Navy Prata Silver Resultado vai ser: <p><font color= red >como vai</font></p> Tabela Vamos criar uma tabela para apostilas com preos e informaes sobre cada apostila. Como criar uma tabela com a linguagem Html. Digite: <p align="center">Compre uma apostila</p> <table border="2" cellpadding="2" cellspacing="1" width="80%"> <tr> <td width="33%">Apostila</td> <td width="33%">Atributos</td> <td width="33%">Valor em reais</td> </tr> <tr> <td width="33%">Delphi 3</td> <td width="33%">Aprenda a programar em Delphi</td> <td width="33%">R$ 20, 00 </td> </tr> <tr> <td width="33%">Visual Basic</td> <td width="33%">Aprenda a programar em Visual Basic</td> <td width="33%">R$ 40, 00 </td> </tr> </table> Resultado da tabela acima. Compre uma Apostila Delphi 3 em Delphi apostila Atributos Valor em reais Aprenda a programar R$ 20, 00

Visual Basic em Visual Basic

Aprenda a programar R$ 40,00

Veja o resultado tabela.htm O que voc precisa saber que, quanto mais voc inserir <td> entre <tr> e </tr> m ais partes sua tabela ter. A Tabela comea com <table> e termina com a tag de fecha mento</table>. Width faz referncia a largura. Border a borda, se voc no colocar bor der sua tabela no vai ter bordas. TR significa( Table row), que marca uma linha d e tabela. TD( Table Data) que so as clulas para os dados. Os valores em %, indica o tamanho ocupado em cada espao na tabela . Podendo ser um maior e outro menor. Formatar o texto Vamos ver agora alguns complementos que funcionem em ambos browser. Negrito e itlico. Basta digitar <p><i>texto aqui</i></p>. Resultado <p><i>como vai </i></p> Negrito digite <p><b>texto aqui</b></p>. Resultado<p><b>como vai </b></p> Linha divisria: <hr> Marcadores : <li>texto aqui</li> Isso faz com que o texto que voc tenha digitado tenha uma pequena bolinha em sua frente. O resultado vai ser este tudo bem. Teste de tamanhos . <h1>tamanho maior e <h6> tamanho menor. <h1>Texto aqui</h1> <h2>Texto aqui</h2> <h3>Texto aqui</h3> <h4>Texto aqui</h4> <h5>Texto aqui</h5> <h6>Texto aqui</h6> Para Netscape: Um testo que pisca . <blink> texto aqui</blink> Texto em duas colunas: <multicol > Exemplo: < multicol cols=2> texto aqui </multicol> Download

Como fazer com que o visitante possa baixar um arquivo ou mesmo um programa. Download simplesmente baixar para sua mquina algum arquivo. Ento par a que algum baixe um arquivo de sua pgina faa assim. Digite : <a href="nome.extenso">Baixar</a> Nome significa o nome do arquivo e extenso nada mais do que o formato do arqu ivo, geralmente .zip. No seu caso poderia ser <a href="programa.zip">Baixar</a> . Quando voc baixou esta apostila. Estava na verdade clicando em <a href="html4.zip">Baixar</a>. Como exemplo voc pode abrir o arquivo download da apostila e clicar em baixar , voc vai est baixando ou neste caso transferindo logotipos para alguma pasta: <html> <head> <title>Download</title> <head> <body> <h1>Download</h1> <h3>Apostila Html</h3> <a href="down/logo.zip">Baixar</a> </body> </html> Como pode observar a tag para fazer download a mesma que a tag usada para hyperl inks s mudando a extenso. Voc pode modificar usando tambm tabelas e o mtodo para que parea um boto. Ou como o e xemplo download.htm, inserir uma figura que define melhor a palavra download. Frame

O frame permite que voc veja o ndice e o contedo em uma nica pgina. Ou ver duas p inas de uma s vez, bonito e prtico. Digite: <html> <title>frame</title> <frameset cols="50%,50%"> <frame src="tabela.htm "> <frame src="teste2.htm "> </frameset> </html> Veja o resultado frame.htm Lembre que tabela.htm e teste2.htm so pginas de demonstrao. Sua pgina de frame ou outra qualquer dever ter nomes diferentes. O mesmo exemplo mas com um visual diferente, ao invs do frame ser em colunas cols vamos deixar com a divisria na horizontal. Modificando o nome co ls por rows. <html>

<title>frame</title> <frameset rows="50%,50%"> <frame src="tabela.htm"> <frame src="teste2.htm"> </frameset> </html> Caso o browser( navegador) do usurio no suportar frame digite: <noframe>Seu Browser no suporta frame . Clique no boto voltar</noframe>. Podemos ter tambm mais de dois frame( quadros em um pgina). Exemplo: <html> <title>frame</title> <frameset rows="50%,25%,25%"> <frame src="teste.htm"> <frame src="teste2.htm"> <frame src="java.htm"> </frameset> </html> Ento fica assim 1 frame< frame src="teste.htm"> o 2 frame< frame src="teste2.htm"> e o 3 frame<frame src="java.htm">. Java Usando JavaScript: O JavaScript uma implementao da linguagem Java, s que interp retada. O programa browser( navegador) l o cdigo fonte em JavaScript, interpreta a s instrues e as executa. A linguagem javascript comea com <script> e termina com </script> O que vamos fazer ter um boto uma resposta para este boto. Ou seja quando algum clicar neste boto ser chamado um evento. O evento no caso o onCLick. Para que fun cione precisamos claro de uma pergunta e ter ateno ao script que est na seo <head>, as executado na seo <body>. Digite: <html> <head> <h3>Qual o navegador mais usado no Brasil, Internet Explorer ou Netscape Navegator</h3> <script> <!-function clicou( form) { form.caixa.value="Internet Explorer 57%"; } //--> </script> </head> <body> <form> <input type="button" value="Resultado" onClick="clicou(this.form)">

<input type="text" name="caixa"> </form> </body> </html> Veja o resultado java.htm os. Veja mais sobre Javascript e Vbscript em script 1, script2, script 3 e efeit Exerccio Faa agora uma Home Page com frame, tabela, imagens, hyperlinks. Utilize as fi guras exemplos, tais como voltar.gif, brasil.gif, anuncie.gif, fundo2.gif, fag.g if. Caso tenha alguma imagem nos formatos Gif e Jpg utilize para dar seu prprio t oque a sua pgina.

You might also like