Embed Size (px)
Citation preview
HTML
Construindo páginas
Lembre-se
Salve todo o material que for utilizar na mesma pasta.
O que é HTML
O documento em HTML é um arquivo texto comum (ASCII) que pode ser escrito através de
qualquer editor de textos comum (Edit, E , Norton Editor, notepad, ...) e tem a terminação .htm
ou .html .
Como é uma linguagem interpretada, a partir do momento em que se salva um arquivo HTML, o
mesmo já pode ser aberto por qualquer navegador.
Estrutura do HTML
TAGs: elementos de marcação;
– é definida através de seu nome cercado pelos sinais de “menor” (<) e “maior” (>).
• Exemplo <TAG>
– normalmente tem uma TAG correspondente para finalização, com o mesmo nome e precedido por uma barra (/).
• Exemplo </TAG>
Estrutura do HTML
<HTML> início do documento
<HEAD> início do cabeçalho
<TITLE> início do título da Barra de Título
</TITLE> fim do título da Barra de Título
</HEAD> fim do cabeçalho
<BODY> início do corpo da página
</BODY> fim do corpo da página
</HTML> fim do documento
Estrutura do HTML
Nome na Barra de Título
Corpo da página - <BODY>...</BODY>
• Todo o conteúdo do documento HTML deve estar entre as tags <BODY> e </BODY>
• Atributos da TAG <BODY>:
– BGCOLOR: cor de fundo (RGB, hexadecimal)– BACKGROUND: imagem de fundo (gif, pjg,
png ...)– LINK, ALINK e VLINK: cor do link não
visitado, link ativo e link visitado.
Corpo da página - <BODY BGColor=“#FFFF00”>Alguns exemplos :#FFFFFF (Branco), #00FF00 (Verde), #00FFFF (Cian), #C0C0C0 (Cinza), #000000 (Preto), #0000FF (Azul), #FFFF00 (Amarelo), #BC8F8F (Pink),#FF0000 (Vermelho), #FF00FF (Magenta), #A8A8A8 (Cinza claro), #4F2F4F (Violeta).
Corpo da página – <BODY BACKGROUND =“imagem.extensão”>
Inserindo Texto
• <BR>: troca para uma linha abaixo;
• <P>...</P>: troca para um parágrafo abaixo;
• <B>: negrito;
• <I> : itálico;
• <U>: sublinhado;
Inserindo Texto
Formatando o Texto <FONT>...</FONT>
• Atributos– Size: tamanho da fonte entre 1 e 7;– Color: cor da fonte;– Face: tipo de fonte
• Sintaxe: <FONT SIZE=“5” COLOR= “blue” FACE=“verdana”> não é necessário a presença de todos estes atributos</FONT>
Formatando o Texto <FONT>...</FONT>
Inserindo Links - <A>...</A>
• Para outras páginas da mesma pasta:– <A HREF=“nomeDaPagina.html”>Página</A>
• Para outro endereço ou site:– <A HREF=“http://www.site.com.br”>site</A>
• Para enviar e-mail:
<A HREF=“mailto:endereç[email protected]”>Contato</A>
Inserindo Links - <A>...</A>
Inserindo imagens - <IMG>
• SRC : Especifica o nome do arquivo de imagem. Sem esse atributo a tag <IMG> não tem finalidade.
• ALT: Texto alternativo para a imagem (muito útil quando o usuário não está exibindo as figuras.).
• ALIGN: Alinhamento do texto em relação à imagem. Pode ser CENTER, TOP, LEFT ou RIGHT.
• HEIGHT: Altura da figura em pixels ou porcentagem (se não utilizada, a figura será mostrada em sua altura original).
• WIDTH: Largura; semelhante a HEIGHT.
Inserindo imagens - <IMG>
Sintaxe:<IMG SRC=“nomeimagem.extensão” ALT=“figura de core” HEIGHT=“100% WIDTH=“100%”>
Considerações finais
Existem ainda várias outras TAGs com formatações específicas que podem ser pesquisadas na internet, digitando no google “apostila de html”. Recomendo alguns:
http://www.interney.net/blogfaq.php?p=6541494
http://www.sosdesigners.com/downloads-baixar5.html
http://www.crieseuwebsite.com/apostilas/abrecategoria.php?cat=9&nomecat=HTML
http://www.linhadecodigo.com.br/tutoriais.asp?id_tutorial=86&sub=53
http://www.apostilando.com/sessao.php?cod=5
HTML
Construindo páginas
