Carregar apresentação
A apresentação está carregando. Por favor, espere
1
HTML HyperText Markup Language Uma linguagem de marcação
2
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.
3
Documento básico <HTML> <HEAD>
<TITLE> Título da Página </TITLE> </HEAD> <BODY> Corpo do documento </BODY> </HTML>
4
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= Indicação para ficar 3 segundos na página atual, depois redirecionar para a pagina indicada
5
META TAG EXEMPLO <meta http-equiv="imagetoolbar" content="no">
<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>
6
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)
7
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>
8
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>.
9
Tamanho Fontes <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>
10
LINKS Link para um site na internet
<a href=" 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 <a para meire</a> Imagem como link <a href=“arquivo.htm"><img src=“imagem.jpg" alt=“titulo da imagem"></a>
11
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">
12
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.
13
TABELAS <table> <tr> <td>Célula 1</td>
14
ATRIBUTOS DA TABELA Agrupando células (Quantas colunas em uma célula)
<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> <td>Célula 3</td> <td>Célula 4</td> </table> Célula 1 Célula 2 Célula 3 Célula 4
15
ATRIBUTOS DA TABELA <table border="1"> <tr>
<td rowspan="3">Célula 1</td> <td>Célula 2</td> </tr> <td>Célula 3</td> <td>Célula 4</td> </table> Célula 1 Célula 2 Célula 3 Célula 4
16
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>
17
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 lista numerada </OL>
18
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
19
SEPARADORES Linha Horizontal Atributos do HR
<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.
Apresentações semelhantes
