Você está na página 1de 5

HTML

<html> ... </html> *Todo arquivo html tem que ter esse corpo no incio e no fim do arquivo. <head> ... </head> * o cabealho, contm todas as informaes necessrias para o navegador ou servidor processar o documento html, para coisas como ttulo, informaes de procura, etc. <title> ... </title> * o ttulo do documento, aparece apenas uma vez no cabealho. <meta http-equiv= ## > *Protocolo de resposta (o que se deseja). <meta content= ## >*Habilita a colocar qualquer informao que deseja processar no servidor, navegador ou bot. <body> ... </body> *Pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. <body BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb"

VLINK="#rrggbb" BACKGROUND="URL" > *BGCOLOR --- cor de fundo (quando no indicada, o browser ir mostrar uma cor padro, geralmente o cinza ou branco; alguns editores podero estabelecer o branco para o fundo da pgina). TEXT --- cor dos textos da pgina (padro: preto). LINK --- cor dos links (padro: azul). ALINK --- cor dos links, quando acionados (padro: vermelho). VLINK --- cor dos links, depois de visitados (padro: azul escuro ou roxo). <H1> ... </H1> ... <H6> ... </H6> * para definir o tamanho da letra em determinada parte do texto. <H2 ALIGN=CENTER > ... </H2> *Cabealho centralizado. <H3 ALIGN=RIGHT > ... </H3> *Cabealho alinhado direita. <H4 ALIGN=LEFT > </H4> *Cabealho alinhado esquerda. <BR> *Quebra de linha. <P> ... </p> *Onde comea o pargrafo e onde termina. <P ALIGN=CENTER > ... </p> *Pargrafo centralizado. <P ALIGN=RIGHT > ... </p> *Pargrafo alinhado a direita. <P ALIGN=LEFT > ... </p> *Pargrafo alinhado a direita. <HR SIZE=7 > *Insere uma linha de largura 7 (pixels). <HR WIDTH=50% > *Insere uma linha que ocupa 50% do espao horizontal disponvel. <HR WIDTH=30% ALIGN=RIGHT NOSHADE> *Insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional. <HR SIZE=70 WIDTH=2 ALIGN=LEFT > insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de <HR>). <pre> ... </pre> *Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulaes. <blockquote> ... </blockquote> * usado para citaes longas. <address> ... </address> *Usado para formatar endereos E-mail e referncias a autores de documentos.

<CITE> ... </CITE> *Para ttulos de livros, filmes, e citaes curtas. <CODE> ... </CODE> *Para indicar trechos de cdigo de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++)); <DFN> ... </DFN> *Indica definio de uma palavra, em geral apresenta o texto em itlico. Exemplo: CERN: Centre dstudes et Recherches Nucleaires. <EM> ... </EM> *nfase, tambm normalmente apresentado em itlico. Exemplo: preciso pesquisar muito para encontrar o termo exato. <KBD> ... </KBD> *Indica uma entrada via teclado. Exemplo: Para ler mensagens recebidas, digite pine i. <SAMP> ... </SAMP> *Indica uma seqncia de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo: O resultado do primeiro applet : Hello, World! <STRONG> ... </STRONG> *Forte nfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, confira o campo Subject:! <VAR> ... </VAR> *Indica variveis, ou valores que o usurio dever escrever; geralmente mostrado em itlico. Exemplo: No campo Login, escreva guest. <B> ... </B> *Quando disponvel no browser, mostrado em negrito (em alguns browsers, pode aparecer sublinhado). <I> ... </I> *Itlico (em alguns casos, caracteres inclinados). <U> ... </U> *Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentao de links. <STRIKE> ... </STRIKE> ou <S> </S> *Frase riscada. <BIG> ... </BIG> *Fonte um pouco maior. <SMALL> ... </SMALL> *Fonte um pouco menor. <SUB> ... </SUB> *Frase em estilo ndice, como em H2O. <SUP> ... </SUP> *Frase em estilo expoente, como em Km2. <DL> <DT>termo a ser definido <DD>definio <DT>termo a ser definido <DD>definio </DL> *Listas de Definio. <UL> <LI> item de uma lista <LI>item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item </UL> *Listas nonumeradas. <OL> ou <OL TYPE=I> ou <OL START=4 TYPE=A> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item de lista numerada </OL> *Listas Numeradas. <FONT COLOR="#rrggbb" > Texto </FONT> *Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores. <FONT SIZE=tamanho_da_letra > Texto </FONT> *Permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. <FONT FACE="fonte_da_letra" > Texto </FONT> *Uma evoluo que permite a escolha da fonte para os textos.

<BLINK> frase </BLINK> *Efeitos que chamam a ateno do leitor. <MARQUEE BEHAVIOR=efeito WIDTH=30% > > Texto Texto </MARQUEE> </MARQUEE> ou ou <MARQUEE <MARQUEE

BEHAVIOR=SCROLL

BEHAVIOR=SLIDE DIRECTION=RIGHT > Texto </MARQUEE> * possvel obter o efeito de animao de texto. <A HREF="arq_destino" > ncora </A> *Para inserir um link em um documento, indica o arquivo de destino da ligao de hipertexto. <A TARGET="arq_destino" > ncora </A> *Indica o frame em que ser carregado o arq_destino. Maiores detalhes na seo sobre frames. <A NAME="arq_destino" > ncora </A> *Marca um indicador, isto , uma regio de um documento como destino de uma ligao. <A HREF="exemplos/doc2.html" > exemplo de caminho relativo </A> *O caminho relativo pode ser usado sempre que queremos fazer referncia a um documento armazenado no mesmo servidor do documento atual. <A HREF="http://www.labes.icmc.usp.br/" > Laboratrio de Engenharia de Software </A> *Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo. <IMG SRC="URL_imagem" > *O elemento IMG insere imagens que so apresentadas junto com os textos. <IMG SRC="URL_imagem" ALT="descrio_da_imagem" > *Indica um texto alternativo, descrevendo brevemente a imagem, que apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers grficos. <IMG SRC="imagem" ALT="descrio" WIDTH="largura" HEIGHT="altura" > *Atributos de dimenso da imagem, em pixels. <A HREF="URL" > <IMG SRC="imagem" ALT="descrio" BORDER=4 > </A> *Quando uma frase marcada como ncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de ncora, ganha uma borda que indica sua condio. <IMG SRC="imagem" ALT="descrio" ALIGN=alinhamento > *ALIGN atributos de alinhamento. TOP, MIDDLE, BOTTOM, RIGHT, LEFT. <IMG SRC="imagem" VSPACE=espao_vertical > ou <IMG SRC="imagem"

HSPACE=espao_horizontal > *Atributos de moldura. Estes atributos definem o espao - vertical e horizontal - deixado entre as imagens e os textos circundantes. <TABLE> ... </TABLE> *Delimita uma tabela. <TABLE BORDER="4" > *Um atributo bsico BORDER, que indica a apresentao da borda. <CAPTION>...</CAPTION> *Define o ttulo da tabela. <TR> ... </TR> *Delimita uma linha. <TH> ... </TH> *Define um cabealho para colunas ou linhas (dentro de <TR>). <TD> ... </TD> *Delimita um elemento ou clula (dentro de <TR>).

<TABLE BORDER=4 > <CAPTION>Primeiro exemplo</CAPTION> <TR><TH>Coluna 1</TH><TH>Coluna 2</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></TABLE> *Exemplo. <TABLE BORDER=1 ><TR><TH COLSPAN=2 >Colunas 1 e 2</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 >3 linhas</TH><TD>uma linha</TD></TR><TR><TD>duas linhas</TD></TR><TR><TD>tres linhas</TD></TR></TABLE> *Exemplo. <TD ALIGN=alin_horizontal >Texto da clula</TD *Os alinhamentos padro em tabelas. LEFT, CENTER, RIGHT. <TD VALIGN=alin_vertical >Texto da clula</TD> *TOP, MIDDLE, BOTTOM. <TR ALIGN= alin_horizontal VALIGN= alin_vertical >Texto da clula</TR> *Alinhamentos de linhas. <TABLE espaamento. <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" > *Cor de fundo. <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00" > *Cor de borda. <TABLE BORDER=5 BACKGROUND="imagem" > *Imagem de fundo. <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%" > <FRAME SRC="indice1.html" ><FRAME SRC="apresenta.html" NAME="principal" ><NOFRAME><BODY><H2>Bem-vindo pgina do assunto X!</h2><P>Bl bl bl bl bl</BODY></NOFRAME></FRAMESET></HTML> *Os frames so divises da tela do browser em diversas telas (ou quadros). <HTML><HEAD><TITLE>Assunto X</TITLE></HEAD><FRAMESET COLS = "20%, 80%" ><FRAME SRC="indice1.html" ><FRAME SRC="apresenta.html" NAME=principal BORDER=1 CELLPADDING=20 CELLSPACING=20 > *Atributos de

><NOFRAME> <BODY> <H2>Bem-vindo pgina do assunto X!</h2> <P>Bl bl bl bl bl</BODY></NOFRAME></FRAMESET></HTML> *Sempre que se aciona um link dentro de uma pgina, o default (isto , o comportamento padro) que a pgina referente a esse link seja carregada na mesma janela da pgina anterior. <FRAMESET COLS="x,y"><FRAME SRC="col1.html"><FRAME

SRC="col2.html"></FRAMESET> *Montar dois frames em coluna. <FRAMESET ROWS="x,y"><FRAME SRC="lin1.html"><FRAME

SRC="lin2.html"></FRAMESET> *Dois frames em linha. <FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM> *Um formulrio um modelo para a entrada de um conjunto de dados. Method = POST ou GET. <INPUT TYPE=TEXT NAME="Nome"> *Campo de dados texto.

<INPUT TYPE=PASSWORD NAME="senha"> *Campo de dados senha. <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome"> *Exemplo. <INPUT TYPE=TEXT SIZE=35 > *Exemplo. <INPUT TYPE=TEXT NAME="ex" MAXLENGHT=2 > *nmero de caracteres aceitos em um campo de dados; este atributo s vlido para campos de entrada TEXT e PASSWORD. <INPUT TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED >Vlei

<br><INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol" >Futebol *Mltipla escolha. <INPUT TYPE=RADIO NAME="time" VALUE="aea" CHECKED>AEA <br><INPUT

TYPE=RADIO NAME="time" VALUE="naut" >Nutico *Escolha nica. <INPUT TYPE=SUBMIT > *SUBMIT apresenta o boto que causa o envio dos dados de entrada para o servidor. <INPUT TYPE=SUBMIT VALUE="Envia mensagem" > * possvel modificar o rtulo desse boto atravs do atributo VALUE. <INPUT TYPE=RESET > *RESET restaura os valores iniciais das entradas de dados. <INPUT TYPE=RESET VALUE="Apaga tudo!" > * possvel modificar o rtulo desse boto atravs do atributo VALUE. <SELECT NAME="sabor" ><OPTION>Abacaxi<OPTION>Crme<OPTION> Morango

<OPTION>Chocolate</SELECT> *Apresenta uma lista de valores, atravs de campos OPTION. <SELECT NAME="sabor" SIZE=4 MULTIPLE> *Com o atributo MULTIPLE, define-se que se pode selecionar mais de um item (pressionando a tecla Shift do teclado enquanto se selecionam os itens). <TEXTAREA COLS=40 ROWS=5 NAME="comentario" > Deixe seu comentrio </TEXTAREA> *abre uma rea para entrada de texto, de acordo com atributos para nmero de colunas, linhas, e se for o caso - um valor inicial. <EMBED SRC="audio.som"> *Insere o arquivo de som como objeto. <BGSOUND SRC="audio.som" > *Faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma. <EMBED SRC="arquivo.mov" > *A insero de vdeo depende bastante do tipo de arquivo de vdeo que temos para inserir em uma pgina.