HTML básico

950 views
912 views

Published on

Aula sobre HTML básico na disciplina de Técnicas Digitais, da Famecos/PUCRS

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
950
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML básico

  1. 1. LINGUAGEM HTMLProfa. Me. Karen SicaTécnicas Digitais 2013segunda-feira, 29 de abril de 13
  2. 2. AFINAL, O QUE É?HyperText Markup LanguageLinguagem padrão para criação de sitesLinguagem de marcação hipertextualLinguagem interpretada por navegadoresCriada por Tim Berners-Lee (1989)segunda-feira, 29 de abril de 13
  3. 3. HIPERTEXTUAL?Sim, são documentos com referências internas a elese a outros documentos.Extensões que englobam outras linguagens, além dotexto, claro...segunda-feira, 29 de abril de 13
  4. 4. COMO DECIFRAR?Não precisa, o computador faz isso para você!segunda-feira, 29 de abril de 13
  5. 5. DEVO APRENDER?É BOM SABER!segunda-feira, 29 de abril de 13
  6. 6. CARACTERÍSTICASPara criar as páginas ou os textos em HTML, sãoutilizadas etiquetas, conhecidas como TAGS.Estas etiquetas são os comandos de formatação dalinguagem.Um elemento é formado por um nome de etiqueta,tributos, valores e filhos (que podem ser outroselementos ou textos).segunda-feira, 29 de abril de 13
  7. 7. ENTENDENDO AS TAGSDeve-se sempre abrir e fechar as tagsOs textos ficam sempre entre < > ou </ >< e > podem afetar uma página ou todo oconteúdo. CUIDADO!<tag> é a etiqueta de abertura</tag> é a etiqueta de fechamentosegunda-feira, 29 de abril de 13
  8. 8. DOCUMENTOS HTMLSão compostos de texto HTML e texto planoExibem conteúdo de página da webPodem ser chamadas de páginas da webpropriamente ditasegunda-feira, 29 de abril de 13
  9. 9. DO QUEVOCÊ PRECISA?Não precisa de um siteNão precisa de um editor HTMLNão precisa de um servidor webPrecisa apenas de:editor de texto simples oubloco de notassegunda-feira, 29 de abril de 13
  10. 10. COMO CRIAR UM HTML?Abra o editor de textosCrie um arquivo em brancoSalve o arquivo com a extensão .htmlInicie a edição do arquivosegunda-feira, 29 de abril de 13
  11. 11. ESTRUTURA DE UMA PÁGINA<!DOCTYPE html> indica o tipo de HTML que será reconhecido pelo navegador<HTML> indica informações HTML<HEAD> cabeçalho<TITLE> início do título da página</TITLE> fecha título da página</HEAD> fecha cabeçalho<BODY> corpo principal da página</BODY> fecha corpo principal da página</HTML> fim do documento HTMLsegunda-feira, 29 de abril de 13
  12. 12. ARQUIVO BÁSICO HTML<!DOCTYPE html><html><head><title> minha página </title></head><body>.... conteúdo da página...</body></html>segunda-feira, 29 de abril de 13
  13. 13. MAIS TAGS IMPORTANTESCABEÇALHOS: são representados por <h1> até <h6>Exemplo:<h1> esse é o cabeçalho 1 </h1><h2> esse é o cabeçalho 2 </h2>segunda-feira, 29 de abril de 13
  14. 14. MAIS TAGS IMPORTANTESPARÁGRAFOS: são definidos com a tag <p>Exemplo:<p> aí está o parágrafo </p><p> agora temos outro parágrafo </p>LINKS: são representados pela tag <a>O endereço é representado no atributo href (hypertextreference)Exemplo:<a href=“http://www.confrariadopet.com.br”> Acesse aConfraria do Pet </a>segunda-feira, 29 de abril de 13
  15. 15. MAIS TAGS IMPORTANTESIMAGENS: são definidos com a tag <img>O nome e o tamanho da imagem são fornecidos nosatributos.src = sourceExemplo:<img src=“nomedaimagem.jpg” width= “500” height=“300”/>segunda-feira, 29 de abril de 13
  16. 16. MAIS TAGS IMPORTANTESELEMENTOSVAZIOS: são aqueles que após abertos nãosão mais fechadosExemplo:<br> - usado para dar quebra de linhasegunda-feira, 29 de abril de 13
  17. 17. FIQUE LIGADOINDENTAÇÃO:Recuo do texto em relação à margemRessalta a hierarquia entre os elementosTorna a leitura do código mais simples e fácilFacilita a alteração do código fontesegunda-feira, 29 de abril de 13
  18. 18. EXEMPLO<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><p>Este é um html</p><p><a href="http://www.confrariadopet.com.br/">Este é um link!</a></p><img src="http://confrariadopet.com.br/wp-content/uploads/2013/04/logook.jpg"><p>Esta é uma imagem!</p><h1>Título H1</h1><h2>Título H2</h2><h3>Título H3</h3><h4>Título H4</h4><h5>Título H5</h5><h6>Título H6</h6><p>Mais informações em: <a href="http://www.w3schools.com/html/"target="_blank">W3Schools</a></p></body></html>segunda-feira, 29 de abril de 13
  19. 19. EXEMPLOsegunda-feira, 29 de abril de 13
  20. 20. EXEMPLOsegunda-feira, 29 de abril de 13
  21. 21. DEMAIS POR HOJE?SEMANA QUEVEM TEM MAIS!segunda-feira, 29 de abril de 13

×