html construindo páginas. lembre-se salve todo o material que for utilizar na mesma pasta
TRANSCRIPT
![Page 1: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/1.jpg)
HTML
Construindo páginas
![Page 2: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/2.jpg)
Lembre-se
Salve todo o material que for utilizar na mesma pasta.
![Page 3: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/3.jpg)
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.
![Page 4: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/4.jpg)
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>
![Page 5: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/5.jpg)
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
![Page 6: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/6.jpg)
Estrutura do HTML
![Page 7: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/7.jpg)
Nome na Barra de Título
![Page 8: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/8.jpg)
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.
![Page 9: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/9.jpg)
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).
![Page 10: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/10.jpg)
Corpo da página – <BODY BACKGROUND =“imagem.extensão”>
![Page 11: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/11.jpg)
Inserindo Texto
• <BR>: troca para uma linha abaixo;
• <P>...</P>: troca para um parágrafo abaixo;
• <B>: negrito;
• <I> : itálico;
• <U>: sublinhado;
![Page 12: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/12.jpg)
Inserindo Texto
![Page 13: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/13.jpg)
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>
![Page 14: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/14.jpg)
Formatando o Texto <FONT>...</FONT>
![Page 15: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/15.jpg)
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>
![Page 16: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/16.jpg)
Inserindo Links - <A>...</A>
![Page 17: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/17.jpg)
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.
![Page 18: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/18.jpg)
Inserindo imagens - <IMG>
Sintaxe:<IMG SRC=“nomeimagem.extensão” ALT=“figura de core” HEIGHT=“100% WIDTH=“100%”>
![Page 19: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/19.jpg)
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
![Page 20: HTML Construindo páginas. Lembre-se Salve todo o material que for utilizar na mesma pasta](https://reader036.vdocuments.site/reader036/viewer/2022062318/552fc131497959413d8d5a3d/html5/thumbnails/20.jpg)
HTML
Construindo páginas