HTML HyperText Markup Language Uma linguagem de marcação Vantagens da HTML Formatação de um documento para web; Possibilidade de inclusão de vínculos que apontam para outros documentos; Capacidade de criar tabelas e texto pré-formatada; Capacidade de incorporar imagens; Criação de imagens mapeadas; Condições de inserção de recursos interativos como formulários. Documento básico <HTML> <HEAD> <TITLE> Título da Página </TITLE> </HEAD> <BODY> Corpo do documento </BODY> </HTML> META TAG <META HTTP-EQUIV="author" CONTENT="O seu nome"> <META HTTP-EQUIV="description" CONTENT="Breve descrição da pagina"> <META HTTP-EQUIV="keywords" CONTENT="Palavras-chave da pagina"> <META HTTP-EQUIV="generator" CONTENT="O editor de html que usa"> <META HTTP-EQUIV="copyright" CONTENT="Ultima atualização"> META PARA FAZER REDIRECIONAMENTO AUTOMATICO: <meta http-equiv="REFRESH" content="3;URL=http://www.unifacs.br"> Indicação para ficar 3 segundos na página atual, depois redirecionar para a pagina indicada META TAG EXEMPLO <HTML> <HEAD> <TITLE>Criando um documento básico em html </TITLE> <META HTTP-EQUIV="author" CONTENT=“Meire dias"> <META HTTP-EQUIV="description" CONTENT="Tutorial de HTML: estrutura,texto,links,imagens,listas,tabelas,formulários"> <meta http-equiv="imagetoolbar" content="no"> <META HTTP-EQUIV="keywords" CONTENT="html,unix,aulas"> <META HTTP-EQUIV="generator" CONTENT="vi,pico (Unix)"> <META HTTP-EQUIV="copyright" CONTENT=“setembro 2006"> </HEAD> <BODY> Corpo do documento </BODY> </HTML> ATRIBUTOS DO BODY <BODY BGCOLOR=“#FF00AB” BACKGROUND=“imagem.jpg" TEXT="#FFFFFF" LINK="#ff00ff" VLINK="#0000FF" ALINK="#AAAA00"> Onde: TEXT - Cor do texto ao longo do documento; BACKGROUND - Padrão do background (fundo) do documento; BGCOLOR - Cor do background (fundo) do documento; LINK - Cor da palavra de link (ainda não visitado); VLINK - Cor da palavra de link já visitado; ALINK - Cor da palavra de link activo (clicando sem largar) CABEÇALHOS <h1>Um cabeçalho</h1><p>texto, texto texto,</p> <h2>Subtítulo</h2><p>texto, texto texto, texto</p> <h3>Subtítulo</h3><p>texto, texto texto, texto</p> <h4>Subtítulo</h4><p>texto, texto texto, texto</p> <h5>Subtítulo</h5><p>texto, texto texto, texto</p> <h6>Subtítulo</h6><p>texto, texto texto, texto</p> CARACTERÍSTICAS DO TEXTO <i>Este texto deve ser itálico.</i> <small>Este texto deve ser com letras em tamanho small.</small> <b><i>Texto em negrito e itálico.</i></b> Cores As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores. <FONT COLOR="#rrggbb">Texto</FONT> Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>. Tamanho <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 SIZE=-2>Letra menor</FONT> Fontes <FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT> <FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT> <FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT> LINKS Link para um site na internet <a href="http://www.unifacs.br/">Aqui um link para a unifacs</a> Link para um arquivo no mesmo diretório <a href=“arquivo.htm">Aqui um link para um arquivo no mesmo dir</a> Link para um e-mail <a href="mailto:[email protected]">Enviar e-mail para meire</a> Imagem como link <a href=“arquivo.htm"><img src=“imagem.jpg" alt=“titulo da imagem"></a> IMAGENS Inserindo a imagem <img src=“imagem.jpg" alt=“titulo da imagem"> Formatos mais comuns GIF (Graphics Interchange Format) JPG (Joint Photographic Experts Group) Informando o tamanho da imagem <img src="logo.gif" width="141" height="32"> IMAGENS Atributo SRC SRC = “URL”; especifica a URL da imagem. Atributo ALT ALT = “texto”; permite que um navegador (incapaz de exibir imagens) apresente um texto sobre o que a figura mostraria; recomendado para formatos gráficos não suportados amplamente; formato GIF: suportado por TODOS os navegadores! Atributo BORDER BORDER = n; define a largura da borda da imagem em n pontos. TABELAS <table> <tr> <td>Célula 1</td> <td>Célula 2</td> </tr> <tr> <td>Célula 3</td> <td>Célula 4</td> </tr> </table> ATRIBUTOS DA TABELA <table border="1" width="30%"> <table border=1 bgcolor=darkblue width=30%> <td align="right" valign="top">Célula 1</td> Agrupando células (Quantas colunas em uma célula) <table border="1"> <tr> <td colspan="3" bgcolor="yellow">Célula 1 </td> </tr> <tr bgcolor=green> <td>Célula 2</td> Célula 1 <td>Célula 3</td> <td>Célula 4</td> Célula 2 Célula 3 </tr> </table> Célula 4 ATRIBUTOS DA TABELA <table border="1"> <tr> <td rowspan="3">Célula 1</td> <td>Célula 2</td> </tr> Célula 2 <tr> <td>Célula 3</td> <tr> <td>Célula 4</td> </table> Célula 3 Célula 4 </tr> </tr> Célula 1 ATRIBUTOS DA TABELA Atributos de espaçamento de uma tabela Dois atributos permitem o controle de espaçamento em tabelas: CELLPADDING - espaço entre o texto e as bordas da célula CELLSPACING - espaço entre células Ex.1: Espaço entre o texto e as bordas <TABLE BORDER=1 CELLPADDING=20> Ex.2: Espaço entre células <TABLE BORDER=1 CELLSPACING=20> LISTAS Listas não-numeradas São equivalentes às listas com marcadores do MS Word: <UL> <LI>item de uma lista ... <LI>item de uma lista... <LI>item ... </UL> Listas Numeradas <OL> <LI>item de uma lista numerada <LI>item de uma lista numerada <LI>item de lista numerada </OL> ATRIBUTOS DE UMA LISTA <OL START=4 TYPE=A> <LI>um item <LI>outro item <LI>mais um item </OL> A = Letra 1 = Número SEPARADORES Linha Horizontal <HR> insere uma linha horizontal: Atributos do HR <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.
Download
