HTML
Æ <html> ... </html> *Todo arquivo html tem que ter esse corpo no início e no fim do arquivo.
Æ <head> ... </head> *É o cabeçalho, contém todas as informações necessárias para o navegador ou servidor processar o documento html, para coisas como título, informações de procura, etc.
Æ <title> ... </title> *É o título do documento, aparece apenas uma vez no cabeçalho. Æ <meta http-equiv=“ ## ”> *Protocolo de resposta (o que se deseja).
Æ <meta content=“ ## “>*Habilita a colocar qualquer informação que deseja processar no servidor, navegador ou bot.
Æ <body> ... </body> *Pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.
Æ <body BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL" > *BGCOLOR --- cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página). TEXT --- cor dos textos da página (padrão: preto). LINK --- cor dos links (padrão: azul). ALINK --- cor dos links, quando acionados (padrão: vermelho). VLINK --- cor dos links, depois de visitados (padrão: azul escuro ou roxo).
Æ <H1> ... </H1> ... <H6> ... </H6> *É para definir o tamanho da letra em determinada parte do texto. Æ <H2 ALIGN=”CENTER” > ... </H2> *Cabeçalho centralizado.
Æ <H3 ALIGN=“RIGHT” > ... </H3> *Cabeçalho alinhado à direita. Æ <H4 ALIGN=”LEFT” > </H4> *Cabeçalho alinhado à esquerda. Æ <BR> *Quebra de linha.
Æ <P> ... </p> *Onde começa o parágrafo e onde termina. Æ <P ALIGN=“CENTER” > ... </p> *Parágrafo centralizado. Æ <P ALIGN=“RIGHT” > ... </p> *Parágrafo alinhado a direita. Æ <P ALIGN=“LEFT” > ... </p> *Parágrafo alinhado a direita. Æ <HR SIZE=“7” > *Insere uma linha de largura 7 (pixels).
Æ <HR WIDTH=“50%” > *Insere uma linha que ocupa 50% do espaço horizontal disponível.
Æ <HR WIDTH=“30%” ALIGN=“RIGHT” NOSHADE> *Insere uma linha de comprimento 30% (do espaço horizontal disponível), 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, não aceita esta formatação de <HR>).
Æ <pre> ... </pre> *Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações.
Æ <blockquote> ... </blockquote> * É usado para citações longas.
Æ <CITE> ... </CITE> *Para títulos de livros, filmes, e citações curtas.
Æ <CODE> ... </CODE> *Para indicar trechos de código de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++));
Æ <DFN> ... </DFN> *Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo: CERN: Centre d’Éstudes et Recherches Nucleaires.
Æ <EM> ... </EM> *Ênfase, também normalmente apresentado em itálico. 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 seqüência 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 variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo: No campo Login, escreva guest.
Æ <B> ... </B> *Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado).
Æ <I> ... </I> *Itálico (em alguns casos, caracteres inclinados).
Æ <U> ... </U> *Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação 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>definição <DT>termo a ser definido <DD>definição </DL> *Listas de Definição.
Æ <UL> <LI> item de uma lista <LI>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto <LI>item </UL> *Listas não-numeradas.
Æ <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 tão grande quanto se queira, sem que seja necessário se preocupar com a formatação 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 definição geral de cores.
Æ <FONT SIZE=“tamanho_da_letra” > Texto </FONT> *Permite que o autor do documento altere o tamanho das letras em trechos específicos de texto.
Æ <FONT FACE="fonte_da_letra" > Texto </FONT> *Uma evolução que permite a escolha da fonte para os textos.
Æ <BLINK> frase </BLINK> *Efeitos que chamam a atenção do leitor.
Æ <MARQUEE BEHAVIOR=”efeito” > Texto </MARQUEE> ou <MARQUEE BEHAVIOR=“SCROLL” WIDTH=“30%” > Texto </MARQUEE> ou <MARQUEE BEHAVIOR=“SLIDE” DIRECTION=“RIGHT” > Texto </MARQUEE> *É possível obter o efeito de animação de texto.
Æ <A HREF="arq_destino" > âncora </A> *Para inserir um link em um documento, indica o arquivo de destino da ligação de hipertexto.
Æ <A TARGET="arq_destino" > âncora </A> *Indica o frame em que será carregado o arq_destino. Maiores detalhes na seção sobre frames.
Æ <A NAME="arq_destino" > âncora </A> *Marca um indicador, isto é, uma região de um documento como destino de uma ligação.
Æ <A HREF="exemplos/doc2.html" > exemplo de caminho relativo </A> *O caminho relativo pode ser usado sempre que queremos fazer referência a um documento armazenado no mesmo servidor do documento atual.
Æ <A HREF="http://www.labes.icmc.usp.br/" > Laboratório 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 são apresentadas junto com os textos.
Æ <IMG SRC="URL_imagem" ALT="descrição_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 gráficos.
Æ <IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura" > *Atributos de dimensão da imagem, em pixels.
Æ <A HREF="URL" > <IMG SRC="imagem" ALT="descrição" 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 condição.
Æ <IMG SRC="imagem" ALT="descrição" ALIGN=“alinhamento” > *ALIGN atributos de alinhamento. TOP, MIDDLE, BOTTOM, RIGHT, LEFT.
Æ <IMG SRC="imagem" VSPACE=“espaço_vertical” > ou <IMG SRC="imagem" HSPACE=“espaço_horizontal” > *Atributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os textos circundantes.
Æ <TABLE> ... </TABLE> *Delimita uma tabela.
Æ <TABLE BORDER="4" > *Um atributo básico é BORDER, que indica a apresentação da borda. Æ <CAPTION>...</CAPTION> *Define o título da tabela.
Æ <TR> ... </TR> *Delimita uma linha.
Æ <TH> ... </TH> *Define um cabeçalho para colunas ou linhas (dentro de <TR>). Æ <TD> ... </TD> *Delimita um elemento ou célula (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 célula</TD *Os alinhamentos padrão em tabelas. LEFT, CENTER, RIGHT.
Æ <TD VALIGN=“alin_vertical” >Texto da célula</TD> *TOP, MIDDLE, BOTTOM.
Æ <TR ALIGN= “alin_horizontal” VALIGN= “alin_vertical” >Texto da célula</TR> *Alinhamentos de linhas.
Æ <TABLE BORDER=“1” CELLPADDING=“20” CELLSPACING=“20” > *Atributos de espaçamento.
Æ <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 à página do assunto X!</h2><P>Blá blá blá blá blá</BODY></NOFRAME></FRAMESET></HTML> *Os frames são divisões 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” ><NOFRAME> <BODY> <H2>Bem-vindo à página do assunto X!</h2> <P>Blá blá blá blá blá</BODY></NOFRAME></FRAMESET></HTML> *Sempre que se aciona um link dentro de uma página, o default (isto é, o comportamento padrão) é que a página referente a esse link seja carregada na mesma janela da página 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=“método”>...</FORM> *Um formulário é um modelo para a entrada de um conjunto de dados. Method = POST ou GET.
Æ <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” > *número de caracteres aceitos em um campo de dados; este atributo só é válido para campos de entrada TEXT e PASSWORD.
Æ <INPUT TYPE=“CHECKBOX” NAME="esporte" VALUE="volei" CHECKED >Vôlei <br><INPUT TYPE=“CHECKBOX” NAME="esporte" VALUE="futebol" >Futebol *Múltipla escolha.
Æ<INPUT TYPE=“RADIO” NAME="time" VALUE="aea" CHECKED>AEA <br><INPUT TYPE=“RADIO” NAME="time" VALUE="naut" >Náutico *Escolha única.
Æ <INPUT TYPE=“SUBMIT” > *SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor.
Æ <INPUT TYPE=“SUBMIT” VALUE="Envia mensagem" > *É possível modificar o rótulo desse botão através do atributo VALUE.
Æ <INPUT TYPE=“RESET” > *RESET restaura os valores iniciais das entradas de dados.
Æ <INPUT TYPE=“RESET” VALUE="Apaga tudo!" > *É possível modificar o rótulo desse botão através do atributo VALUE.
Æ <SELECT NAME="sabor" ><OPTION>Abacaxi<OPTION>Crème<OPTION> Morango <OPTION>Chocolate</SELECT> *Apresenta uma lista de valores, através 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 comentário </TEXTAREA> *abre uma área para entrada de texto, de acordo com atributos para número 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 inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir em uma página.
