HTML

479 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
479
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
39
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML

  1. 1. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames Programa¸˜o para Web ca HTML Ivo Calado Instituto Federal de Educa¸˜o, Ciˆncia e Tecnologia de Alagoas ca e 20 de Mar¸o de 2012 c1 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  2. 2. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesRoteiro 1 Introdu¸˜o ca 2 Introdu¸ao linguagem HTML c 3 Formata¸˜o de texto ca 4 Referenciamento 5 Tabelas e *frames2 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  3. 3. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ Internet? eO que ´ Internet? e3 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  4. 4. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ Internet? eO que ´ Internet? e Estamos acostumados a ouvir que... Internet ´ a “grande rede mundial de computadores” e3 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  5. 5. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ Internet? eO que ´ Internet? e Estamos acostumados a ouvir que... Internet ´ a “grande rede mundial de computadores” e Entretanto, essa defini¸˜o n˜o ´ exata... ca a e3 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  6. 6. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ Internet? eO que ´ Internet? e Estamos acostumados a ouvir que... Internet ´ a “grande rede mundial de computadores” e Entretanto, essa defini¸˜o n˜o ´ exata... ca a e Internet ´ “o conjunto de diversas redes de computadores que se e comunicam atrav´s dos protocolos TCP/IP” e3 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  7. 7. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eO que ´ a World Wide Web? e4 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  8. 8. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eO que ´ a World Wide Web? e Defini¸˜o ca ´ E um sistema de documentos hipertexto inteligados atrav´s de e hiperlinks4 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  9. 9. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eO que ´ a World Wide Web? e Defini¸˜o ca ´ E um sistema de documentos hipertexto inteligados atrav´s de e hiperlinks Qual a diferen¸a entre WWW e a Internet? c4 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  10. 10. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eO que ´ a World Wide Web? e Defini¸˜o ca ´ E um sistema de documentos hipertexto inteligados atrav´s de e hiperlinks Qual a diferen¸a entre WWW e a Internet? c Internet ´ toda a infraestrutura de rede, enquanto que a WWW ´ e e apenas um servi¸o provido. c Quais seriam outros exemplos de servi¸os providos pela Internet c4 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  11. 11. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eO que ´ a World Wide Web? e Defini¸˜o ca ´ E um sistema de documentos hipertexto inteligados atrav´s de e hiperlinks Qual a diferen¸a entre WWW e a Internet? c Internet ´ toda a infraestrutura de rede, enquanto que a WWW ´ e e apenas um servi¸o provido. c Quais seriam outros exemplos de servi¸os providos pela Internet c Email, FTP, P2P, transmiss˜es multim´ etc o ıdia4 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  12. 12. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eDefini¸˜o de Hipertexto I ca Conjunto de documentos que fazem referˆncia entre si, e possibilitando navega¸˜o entre os diferentes t´picos ca o A partir da interreferˆncia entre as diversas p´ginas ´ criado e a e uma malha de inteconex˜es (de onde vem o termo Web). o5 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  13. 13. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eDefini¸˜o de Hipertexto II ca O conceito de hipertexto n˜o ´ unico da WWW. Ele ´ bem a e´ e anterior a Internet. Qual seria um outro exemplo de Hipertexto?6 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  14. 14. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesO que ´ World Wide Web? eDefini¸˜o de Hipertexto II ca O conceito de hipertexto n˜o ´ unico da WWW. Ele ´ bem a e´ e anterior a Internet. Qual seria um outro exemplo de Hipertexto? O dicion´rio! No a dicion´rio os termos existentes se auto-referenciam a6 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  15. 15. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesHist´ria oComo surgiu a WWW? Criado entre os anos de 1989-1991 (proposi¸˜o do projeto, ca desenvolvimento e apresenta¸˜o p´blica) ca u Criado pelo f´ısico Tim Berners-Lee que ainda se mant´m no e comitˆ para o desenvolvimento da WWW, chamado W3C e A ideia original era criar uma infraestrutura para acesso a documentos em uma abordagem de comunica¸˜o ca cliente-servidor.7 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  16. 16. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesHist´ria oComo surgiu a WWW? Criado entre os anos de 1989-1991 (proposi¸˜o do projeto, ca desenvolvimento e apresenta¸˜o p´blica) ca u Criado pelo f´ısico Tim Berners-Lee que ainda se mant´m no e comitˆ para o desenvolvimento da WWW, chamado W3C e A ideia original era criar uma infraestrutura para acesso a documentos em uma abordagem de comunica¸˜o ca cliente-servidor. Mas o que seria uma abordagem cliente-servidor?7 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  17. 17. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesHist´ria oComo surgiu a WWW? Criado entre os anos de 1989-1991 (proposi¸˜o do projeto, ca desenvolvimento e apresenta¸˜o p´blica) ca u Criado pelo f´ısico Tim Berners-Lee que ainda se mant´m no e comitˆ para o desenvolvimento da WWW, chamado W3C e A ideia original era criar uma infraestrutura para acesso a documentos em uma abordagem de comunica¸˜o ca cliente-servidor. Mas o que seria uma abordagem cliente-servidor? Trata-se de uma abordagem de comunica¸˜o em que uma ca m´quina, chamada servidora, disponibiliza recursos a serem a acessados por outras m´quinas, chamadas de clientes. a7 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  18. 18. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesHist´ria oModelo cliente-servidor8 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  19. 19. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantes Trˆs conceitos s˜o de fundamental importˆncia no estudo da e a a WWW: HTTP, URL e HTML A partir dessas 3 ferramentas, os recursos podem ser acessados na Web fazendo-se uso de programas conhecidos como Browsers9 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  20. 20. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantesHTTP Abrevia¸˜o de Hypertext Transfer Protocol ca Trata-se de um protocolo de camada de aplica¸˜o, utilizado ca para recupera¸˜o de recursos na Internet ca Diferentemente do TCP, o protocolo HTTP ´ um e protocolo textual (ou human-readable) Possui um conjunto limitado de opera¸˜es poss´ co ıveis: GET, POST, PUT, HEAD etc. Ver Wireshark...10 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  21. 21. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantesContextualizando... O que s˜o protocolos da camada de aplica¸˜o? a ca11 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  22. 22. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantesContextualizando... O que s˜o protocolos da camada de aplica¸˜o? a ca S˜o protocolos respons´veis por prover servi¸os `s aplica¸˜es a a c a co Representam a 7ª camada no modelo OSI ou a 5ª no modelo TCP/IP Normalmente s˜o os protocolos que diretamente s˜o a a acessados pelas aplica¸˜es co Outros exemplos de protocolos incluem: FTP, SSH, Bitorrent etc.11 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  23. 23. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantes O que ´ um protocolo textual? e12 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  24. 24. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantes O que ´ um protocolo textual? e S˜o protocolos que apresentam uma estrutura textual nas suas a descri¸˜es de mensagens co12 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  25. 25. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantesURL Abrevia¸˜o de Uniform Resource Locator ca ´ uma forma padr˜o para representa¸˜o da localiza¸˜o de um E a ca ca recurso Pode ser utilizado por diversos protocolos (inclusive o HTTP) para identificar um recurso remoto Possui o seguinte formato: protocolo://m´quina/caminho/recurso a13 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  26. 26. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantesHTML Linguagem de marca¸˜o para transmitir documentos ca formatados atrav´s da rede e Trata-se de uma das formas mais b´sicas de transmiss˜o de a a informa¸˜o pela Web ca Conte´do ´ considerado est´tico u e a14 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  27. 27. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantesHTML Linguagem de marca¸˜o para transmitir documentos ca formatados atrav´s da rede e Trata-se de uma das formas mais b´sicas de transmiss˜o de a a informa¸˜o pela Web ca Conte´do ´ considerado est´tico u e a N˜o ´ uma linguagem de programa¸˜o!!! a e ca14 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  28. 28. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesConceitos importantesHTML Linguagem de marca¸˜o para transmitir documentos ca formatados atrav´s da rede e Trata-se de uma das formas mais b´sicas de transmiss˜o de a a informa¸˜o pela Web ca Conte´do ´ considerado est´tico u e a N˜o ´ uma linguagem de programa¸˜o!!! a e ca Conte´do Est´tico x Conte´do Dinˆmico u a u a No conte´do est´tico as p´ginas HTML criadas previamente e u a a s˜o apenas requisitadas a No conte´do dinˆmico, h´ uma requisi¸˜o por uma p´gina e a u a a ca a p´gina HTML ´ gerada em tempo real e entregue ao a e requisitante14 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  29. 29. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesHist´ria oHist´ria o A linguagem HTML foi desenvolvida em 1990 a partir de dois padr˜es existentes: o SGML: padr˜o que possibilitava a formata¸˜o de texto a ca HyTime: padr˜o para representa¸˜o de documentos a ca hipertextos A partir da uni˜o das funcionalidades do SGML e HyTime foi a poss´ a cria¸˜o do HTML. Atualmente o HTML est´ na vers˜o ıvel ca a a 5.0 (draft) e sua especifica¸˜o pode ser encontrada em ca http://www.w3.org/TR/html5/15 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  30. 30. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesPrimeiros passosNossa primeira p´gina HTML a Crie um arquivo texto com a seguinte estrutura: <HTML> <HEAD > <TITLE>Minha p r i m e i r a p a g i n a</TITLE> </HEAD > <BODY > H e l l o World </BODY > </HTML> Salve o arquivo com extens˜o .html ou .htm e abra-o com o a navegador padr˜o (ex.: firefox index.html) a16 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  31. 31. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesPrimeiros passosEstrutura hierarquica da p´gina a HTML | −HEAD | | | −TITLE | | | −" T ´ tulo da p´ gina " ı a | −BODY | " Corpo do d o c u m e n t o "17 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  32. 32. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesPrimeiros passosEstrutura da p´gina HTML a Formado por tags que especificam a estrutura e a formata¸˜o ca do documento Possui como elemento inicial a tag HTML As tags HTML n˜o s˜o sens´ a a ıveis ` caixa. Traduzindo: tanto a faz escrever <HTML>, <Html>, <html>, <HtMl>, ...18 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  33. 33. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesPrimeiros passosEstrutura da p´gina HTML a Formado por tags que especificam a estrutura e a formata¸˜o ca do documento Possui como elemento inicial a tag HTML As tags HTML n˜o s˜o sens´ a a ıveis ` caixa. Traduzindo: tanto a faz escrever <HTML>, <Html>, <html>, <HtMl>, ... Mas o que s˜o tags a18 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  34. 34. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesPrimeiros passosEstrutura da p´gina HTML a Formado por tags que especificam a estrutura e a formata¸˜o ca do documento Possui como elemento inicial a tag HTML As tags HTML n˜o s˜o sens´ a a ıveis ` caixa. Traduzindo: tanto a faz escrever <HTML>, <Html>, <html>, <HtMl>, ... Mas o que s˜o tags a S˜o elementos de formata¸˜o da linguagem HTML. A partir delas a ca ´ poss´ definir a formata¸˜o de algumas por¸˜es de texto e ıvel ca co18 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  35. 35. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Se¸˜o Head ca O elemento HEAD cont´m informa¸˜es sobre o documento. e co Nele, o t´ ıtulo da p´gina pode serO elemento ¡TITLE¿, por a exemplo, define um t´ ıtulo, que ´ mostrado no alto da janela e do browser. <HEAD><TITLE>Nossa primeira p´gina</TITLE></HEAD> a19 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  36. 36. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Sobre o t´ ıtulo da p´gina a Todo documento WWW deve ter um t´ ıtulo Esse t´ ıtulo ´ referenciado em buscas pela rede, dando uma e identidade ao documento Para ver na pr´tica a importˆncia do t´ a a ıtulo, se vocˆ adicionar e a p´gina criada aos favoritos do seu navegador o t´ a ıtulo da p´gina ser´ usado como ˆncora de acesso a a a ´ sugerido que os t´ E ıtulos dos documentos sejam sugestivos, evitando-se t´ ıtulos gen´ricos como “Introdu¸˜o” e ca20 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  37. 37. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Campos META Al´m do t´ e ıtulo, <HEAD> cont´m outras informa¸˜es de e co importˆncia para os robˆs de pesquisa, indicadas nos campos a o <META> Os campos <META> tˆm dois atributos principais: e NAME, indicando um nome para a informa¸˜o ca HTTP-EQUIV, que faz uma correspondˆncia com campos de e cabe¸alho do protocolo HTTP (ex.: definir a codifica¸˜o c ca utilizada)21 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  38. 38. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Exemplo META <HEAD> <META HTTP−EQUIV=" content - type " CONTENT text / html ; =" c h a r s e t = iso -8859 -1 "> <TITLE> T u t o r i a l HTML </TITLE> <META NAME A u t h or " CONTENT Ivo Calado - ivo . =" =" c a l a d o @ e e . ufcg . edu . br "> <META NAME G e n e r a t o r " CONTENT Namo W e b E d i t o r v5 .0 "> =" =" <META NAME D e s c r i p t i o n " CONTENT Manual de =" =" r e f e r ˆ n c i a para w e b d e s i g n e r s e d e s e n v o l v e d o r e s de e sites "> <META NAME K e y W o r d s " CONTENT HTML , WWW , =" =" W e b p u b l i s h i n g , Internet , W e b d e s i g n "> </HEAD>22 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  39. 39. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Ainda sobre a tag META... Alguns valores dos atributos META NAME s˜o inseridos a automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classifica¸˜o ca da p´gina em algumas ferramentas de busca. a As informa¸˜es nas tags META n˜o tˆm qualquer efeito na co a e apresenta¸˜o da p´gina, mas servem como uma explica¸˜o ou ca a ca documenta¸˜o sobre as informa¸˜es contidas nela. ca co23 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  40. 40. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Ainda sobre a tag META... H´ poucos valores para META HTTP-EQUIV em uso a Os parˆmetros mais utilizados s˜o content-type e Refresh a a content-type Indica a codifica¸˜o que o browser deve utilizar para decodificar o ca documento recuperado. Existem diversos padr˜es de codifica¸˜o o ca como UTF-8 e ISO 8859-124 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  41. 41. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Ainda sobre a tag META... Refresh Define uma URL a ser carregada ap´s a expira¸˜o de um per´ o ca ıodo espec´ ıfico <HEAD> <TITLE> . . . </TITLE> <META HTTP−EQUIV=" R e f r e s h " CONTENT s e g u n d o s ; URL = =" pag i n a . html "> </HEAD> onde, pagina.html ´ a p´gina a ser carregada automaticamente e a segundos ´ o n´mero de segundos passados at´ que a p´gina e u e a indicada seja carregada25 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  42. 42. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Ainda sobre a tag META... Ver exemplo Refresh...26 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  43. 43. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Ainda sobre a tag META... Ver exemplo Refresh... Mas quando um recurso como refresh deveria ser utilizado?26 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  44. 44. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Head>Ainda sobre a tag META... Ver exemplo Refresh... Mas quando um recurso como refresh deveria ser utilizado? Em situa¸˜es onde o conte´do da p´gina necessita ser atualizado co u a constantemente, como em uma p´gina de chat a26 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  45. 45. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *frames<Body>Se¸˜o Body ca O objetivo da se¸˜o Body ´ conter o conte´do que ser´, de ca e u a fato, visualizado pelo usu´rio a Deste modo ´ poss´ adicionar cabe¸alhos, par´grafos, listas, e ıvel c a tabelas, links para outros documentos, imagens, formul´rios, a anima¸˜es, v´ co ıdeos, sons e scripts embutidos.27 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  46. 46. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesAtributosAtributos da Se¸˜o Body ca <BODY BGCOLOR=" # r rggbb " TEXT=" # rrggbb " LINK=" # rrggbb " ALINK=" # r r g g b b " VLINK=" # rrggbb " BACKGROUND URL "> =" Bgcolor: cor de fundo (quando n˜o ´ indicada, o browser ir´ a e a mostrar uma cor padr˜o, geralmente o cinza ou branco; alguns a editores poder˜o estabelecer o branco para o fundo da p´gina) a a Text: cor dos textos da p´gina (padr˜o: preto) a a Link: cor dos links (padr˜o: azul) a Alink: cor dos links, quando acionados (padr˜o: vermelho) a Vlink: cor dos links, depois de visitados (padr˜o: azul escuro a ou roxo)28 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  47. 47. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesAtributosAtributos da Se¸˜o Body ca Seus valores s˜o dados em hexadecimal, equivalentes a cores no a padr˜o RGB (Red, Green, Blue). a29 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  48. 48. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesAtributosAtributos da Se¸˜o Body ca Seus valores s˜o dados em hexadecimal, equivalentes a cores no a padr˜o RGB (Red, Green, Blue). a Como definir a cor a ser utilizada?29 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  49. 49. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesAtributosAtributos da Se¸˜o Body ca Seus valores s˜o dados em hexadecimal, equivalentes a cores no a padr˜o RGB (Red, Green, Blue). a Como definir a cor a ser utilizada? Existem tabelas de cores com esses valores, como http://immigration-usa.com/html_colors.html. Al´m disso, a e partir da vers˜o HTML 3.2, uma s´rie de constantes foram a e definidas para facilitar (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)29 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  50. 50. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesAtributosAtributos da Se¸˜o Body ca Background: Indica a URL da imagem a ser replicada no fundo da p´gina, como uma marca d’´gua. a a30 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  51. 51. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cCabe¸alhos c H´ seis n´ a ıveis de cabe¸alhos em HTML, de <H1> a <H6>: c <H1>E s t e ´ e um cabecalho ¸ de n´ v e l ı 1</H1> <H2>E s t e ´ e um cabecalho ¸ de n´ v e l ı 2</H2> <H3>E s t e ´ e um cabecalho ¸ de n´ v e l ı 3</H3> <H4>E s t e ´ e um cabecalho ¸ de n´ v e l ı 4</H4> <H5>E s t e ´ e um cabecalho ¸ de n´ v e l ı 5</H5> <H6>E s t e ´ e um cabecalho ¸ de n´ v e l ı 6</H6> O prop´sito dos cabe¸alhos ´ possibilitar a demarca¸˜o de se¸˜es o c e ca co no texto31 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  52. 52. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cAninhamento de cabe¸alhos c Os cabe¸alhos n˜o podem ser aninhados, isto ´, a formata¸˜o: c a e ca <H2>E s t e ´ <H1>um c a b e c a l h o de n´ v e l 1</H1> d e n t r o de e ¸ ı um c a b e c a l h o de n´ v e l 2</H2> ¸ ı32 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  53. 53. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cAninhamento de cabe¸alhos c Os cabe¸alhos n˜o podem ser aninhados, isto ´, a formata¸˜o: c a e ca <H2>E s t e ´ <H1>um c a b e c a l h o de n´ v e l 1</H1> d e n t r o de e ¸ ı um c a b e c a l h o de n´ v e l 2</H2> ¸ ı O que acontece com forma¸˜es dessa forma? co32 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  54. 54. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cAninhamento de cabe¸alhos c Os cabe¸alhos n˜o podem ser aninhados, isto ´, a formata¸˜o: c a e ca <H2>E s t e ´ <H1>um c a b e c a l h o de n´ v e l 1</H1> d e n t r o de e ¸ ı um c a b e c a l h o de n´ v e l 2</H2> ¸ ı O que acontece com forma¸˜es dessa forma? co pode produzir redutados diferentes dependendo de como o browser interprete, visto que ele pode adotar duas abordagens: Considerar o aninhamento, ou (caso do firefox) Considerar que o programador esqueceu de fechar o primeiro cabe¸alho H2 e de abrir o segundo cabe¸alho H2 (caso do c c Opera)32 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  55. 55. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cAlinhamento de cabe¸alhos c ´ E poss´ alinhas os cabe¸alho (em rela¸˜o as margens direita, ıvel c ca esquerda ou centro) a partir do uso de atributos dos cabe¸alhos... c Ex.: <H2 ALIGN=CENTER>C a b e ¸ a l h o c e n t r a l i z a d o</H2> c <H3 ALIGN=RIGHT>C a b e c a l h o a l i n h a d o ` d i r e i t a</H3> ¸ a <H4 ALIGN=LEFT>C a b e ¸ a l h o a l i n h a d o ` e s q u e r d a ( d e f a u l t ) c a </H4>33 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  56. 56. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas c O que acontece quando usamos a quebra de linha em um documento HTML? (abrir exemplo separadores/index.html em editor de texto)34 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  57. 57. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas c O que acontece quando usamos a quebra de linha em um documento HTML? (abrir exemplo separadores/index.html em editor de texto) Nada, pois os Browsers desconsideram tais quebras de linha unindo o texto... (ver novamente o exemplo, agora no browser). Sendo assim para organizar os textos, precisamos de separadores!! Existem diferentes separadores poss´ ıveis: <Br> <P> <HR>34 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  58. 58. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas c<Br> Quando queremos mudar de linha, usamos o elemento <BR> Isso s´ ´ necess´rio quando queremos uma quebra de linha em oe a determinado ponto, pois os browsers j´ quebram as linhas a automaticamente para apresentar os textos. (exemplo br.html) Deste modo ´ poss´ inserir diversas linhas no nosso e ıvel documento... U t i l i z a n d o o <BR> e l e m e n t o BR <BR><BR><BR> ´ <BR> e p o s s´ v e l <BR><BR> a d i c i o n a r d i v e r s a s l i n h a s <BR><BR ı ><BR><BR> no documento35 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  59. 59. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas c<P> Para separar blocos de texto, usamos o elemento <P> P a r ´ g r a f o 1 ;<P>P a r ´ g r a f o 2 . a a que possui como efeito a cria¸˜o de um par´grafo ca a36 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  60. 60. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas c<P> Para separar blocos de texto, usamos o elemento <P> P a r ´ g r a f o 1 ;<P>P a r ´ g r a f o 2 . a a que possui como efeito a cria¸˜o de um par´grafo Combinando ca a par´grafos e quebras de linha, podemos construir estruturas mais a organizadas de texto como o apresentado no exemplo separadores/paragrafo.html36 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  61. 61. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cAtributos da tag <P> Assim como nos cabe¸alhos, a tag P possibilita o alinhamento c a partir da utiliza¸˜o do parˆmetro ALIGN ca a <P ALIGN=CENTER>Assim como o s t r e n s , a s b o a s i d ´ i a s ` s e a v e z e s chegam com a t r a s o . <BR>( G i o v a n i G u a r e s c h i )< /P>37 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  62. 62. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cListas Uma das formas mais comuns de estruturar uma por¸˜o de um ca documento ´ no formato de listas. Nesse sentido, existem diversas e maneiras de estruturar o documento no formato de listas em HTML, sendo as mais conhecidas: Listas de Defini¸˜o ou Listas de gloss´rio ca a Listas n˜o-numeradas: s˜o equivalentes `s listas com a a a marcadores do MS Word Listas Numeradas38 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  63. 63. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cListas de defini¸oes c˜ Esta classe de lista s˜o chamadas tamb´m de “Listas de a e Gloss´rios”, uma vez que tem o formato semelhante ao utilizado a em estruturas de gloss´rios. Ex.: a termo a s e r d e f i n i d o definic˜o ¸a termo a s e r d e f i n i d o definic˜o ¸a Este tipo de lista ´ muito utilizado para diversos efeitos de e organiza¸˜o de p´ginas, por permitir a tabula¸˜o do texto. ca a ca39 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  64. 64. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cListas n˜o-numeradas a S˜o equivalentes `s listas com marcadores do MS Word: a a <UL> <L I>i t e m de uma l i s t a <L I>i t e m de uma l i s t a , que pode s e r t ˜ o g r a n d e q u a n t o a s e q u e i r a , sem que s e j a n e c e s s ´ r i o s e p r e o c u p a r a com a f o r m a t a c ˜ o d a s margens de t e x t o ¸a <L I>i t e m </UL> UL: Define o in´ da lista ıcio LI: Define um novo item40 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  65. 65. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cListas n˜o-numeradas a Em listas n˜o-numeradas ´ poss´ a adi¸˜o de subn´ a e ıvel ca ıveis Para tal, adiciona-se novos elementos UL Exemplo: <UL> <L I>N´v e l ı <UL> <L I>S u b n´v e l ı </UL> <L I>N´v e l 2 ı </UL>41 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  66. 66. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cAlterando o indicador da lista Um recurso dispon´ ´ a escolha de qual ser´ o marcador ıvel e a utilizado para identificar os itens. Por default o pr´prio browser faz o a escolha de acordo com o n´ da lista, por´m ´ poss´ fazer um ıvel e e ıvel controle mais apurado. Para isso basta fazer uso dos atributos disc, circle e square Exemplo: <UL> <L I TYPE=DISC>um i t e m <L I TYPE=CIRCLE>m a i s um i t e m <L I TYPE=SQUARE>´ l t i m o i t e m u </UL>42 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  67. 67. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cListas Numeradas Nas listas numeradas ´ poss´ fazer a adi¸˜o de diversos itens a e ıvel ca serem representados de maneira ordenada. <OL> <L I>i t e m de uma l i s t a numerada <L I>i t e m de uma l i s t a numerada , que pode s e r t ˜ o g r a n d e a quanto se queira <L I>i t e m de l i s t a numerada </OL>43 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  68. 68. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCabe¸alhos, separadores e listas cListas Numeradas Nas listas numeradas ´ poss´ fazer a adi¸˜o de diversos itens a e ıvel ca serem representados de maneira ordenada. <OL> <L I>i t e m de uma l i s t a numerada <L I>i t e m de uma l i s t a numerada , que pode s e r t ˜ o g r a n d e a quanto se queira <L I>i t e m de l i s t a numerada </OL> 1 item de uma lista numerada 2 item de uma lista numerada, que pode ser t˜o grande quanto a se queira 3 item de lista numerada43 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  69. 69. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesBlocos de texto: PRE At´ agora, sempre que criamos um arquivo HTML o browser e fica respons´vel pelo espa¸amento e quebra de linhas a c Ver exemplo bloco texto Mas e se desejassemos que o texto fosse exibido como digitado?44 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  70. 70. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesBlocos de texto: PRE At´ agora, sempre que criamos um arquivo HTML o browser e fica respons´vel pelo espa¸amento e quebra de linhas a c Ver exemplo bloco texto Mas e se desejassemos que o texto fosse exibido como digitado? Para isso fazemos uso da tag <PRE> Estrutura <p r e> texto a ser exibido . . . </ p r e>44 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  71. 71. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesBlocos de texto: PRE Mas quais os riscos de se utilizar a tag PRE?45 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  72. 72. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesBlocos de texto: PRE Mas quais os riscos de se utilizar a tag PRE? Dispositivos com diferentes resolu¸˜es de tela! co Rever exemplos...45 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  73. 73. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesBlocos de texto: Blockquote e Address A tag Blockquote possibilita a estrutura¸˜o de textos no formato ca de cita¸˜es longas: co <b l o c k q u o t e>A massa do S o l a r q u e i a o e s p a c o −tempo de ¸ t a l m a n e i r a que , a i n d a que a T e r r a s i g a uma t r a j e t ´ r i a r e t a no e s p a c o −tempo q u a d r i d i m e n s i o n a l o ¸ , p a r e c e −n o s que s e d e s l o c a em ´ r b i t a c i r c u l a r no o e s p a c o t r i d i m e n s i o n a l .</ b l o c k q u o t e> ( S t e p h e n W. ¸ Hawking , " Uma Breve H i s t ´ r i a do Tempo " ) o46 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  74. 74. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesBlocos de texto: Blockquote e Address A tag Blockquote possibilita a estrutura¸˜o de textos no formato ca de cita¸˜es longas: co <b l o c k q u o t e>A massa do S o l a r q u e i a o e s p a c o −tempo de ¸ t a l m a n e i r a que , a i n d a que a T e r r a s i g a uma t r a j e t ´ r i a r e t a no e s p a c o −tempo q u a d r i d i m e n s i o n a l o ¸ , p a r e c e −n o s que s e d e s l o c a em ´ r b i t a c i r c u l a r no o e s p a c o t r i d i m e n s i o n a l .</ b l o c k q u o t e> ( S t e p h e n W. ¸ Hawking , " Uma Breve H i s t ´ r i a do Tempo " ) o Por sua vez a tag address estrutura o conte´do no formato de u endere¸o de email. c E n v i e c r´ t i c a s e s u g e s t o e s p a r a <a d d r e s s>i v o . c a l a d o @ e e ı ˜ . u f c g . edu . b r</ a d d r e s s>46 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  75. 75. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesEstilos f´ ısicos e l´gicos o A linguagem HTML permite dois tipos de estilos de formata¸˜es: co f´ ısico e l´gico o Estilo f´ ısico: a formata¸˜o f´ ca ısica especifica explicitamente o estilo que se quer para o texto: it´lico, grifado etc. Sua a apresenta¸˜o final n˜o sofre grande altera¸˜o entre os ca a ca navegadores Estilo l´gico: a formata¸˜o l´gica segue o significado l´gico o ca o o do texto marcado. Deste modo, sua interpreta¸˜o depende ca grandemente de cada navegador47 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  76. 76. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesBlocos de texto e FrasesEstilos f´ ısicos <b> => Texto em negrito <I> => Texto em it´lico a <TT> => Texto monoespacado (espa¸o entre letras ¸ c reduzido) <U> => Texto sublinhado <strike> => Texto riscado <big> => Texto um pouco maior <small> => Texto um pouco menor <sub> => Frase em estilo indice , como em H2 O <sup> => Frase em estilo expoente , como em Km248 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  77. 77. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCaracteres especiaisProblem´tica a Alguns caracteres como <, >, & tem significados na linguagem e n˜o podem ser usados diretamente a49 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  78. 78. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCaracteres especiaisProblem´tica a Alguns caracteres como <, >, & tem significados na linguagem e n˜o podem ser usados diretamente a HTML foi originalmente desenvolvido tendo como base a tabela ASCII (sem caracteres especiais) Neste sentido, a utiliza¸˜o de tais caracteres requerem o uso ca de um sistema de codifica¸˜o espec´ ca ıfica Qual seria a defini¸˜o de sistema de codifica¸˜o e quais seriam os ca ca exemplos?49 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  79. 79. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCaracteres especiaisProblem´tica a Alguns caracteres como <, >, & tem significados na linguagem e n˜o podem ser usados diretamente a HTML foi originalmente desenvolvido tendo como base a tabela ASCII (sem caracteres especiais) Neste sentido, a utiliza¸˜o de tais caracteres requerem o uso ca de um sistema de codifica¸˜o espec´ ca ıfica Qual seria a defini¸˜o de sistema de codifica¸˜o e quais seriam os ca ca exemplos? UTF-8, ISO8859-1, latin1 ...49 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  80. 80. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCaracteres especiaisExemplos de codifica¸˜o ca &alt; ==> < &gt; ==> > &amp; ==> & &aacute; ==> ´ a &acirc; ==> ˆ a Lista completa: http://www.degraeve.com/reference/specialcharacters.php50 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  81. 81. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCaracteres especiaisOutra abordagem... Al´m dessa abordagem, vimos uma abordagem anterior mais e simples, qual ´ ela? e51 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  82. 82. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCaracteres especiaisOutra abordagem... Al´m dessa abordagem, vimos uma abordagem anterior mais e simples, qual ´ ela? e <META HTTP−EQUIV=" Content - Type " CONTENT text / html ; c h a r s e t = ISO -8859 -1 "> =" A abordagem de caracteres especiais era mais utilizada em navegadores antigos51 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  83. 83. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCores e fontesCores As cores s˜o introduzidas atrav´s do elemento FONT, usando a e o sistema RGB A mesma tabela de cores que vimos pode ser utilizada para as fontes Os valores definidos neste elemento sobrescrever os atributos do elemento body <FONT COLOR=" # r r ggbb ">Texto</FONT>52 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  84. 84. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCores e fontesTamanho Um outra forma de manipula¸˜o poss´ ´ a altera¸˜o do ca ıvel e ca tamanho da fonte Fazemos uso tamb´m do elemento FONT, por´m utilizando o e e atributo size O tamanho 3 ´ o valor default e Pode ser utilizado valores absolutos ou relativo ao default53 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  85. 85. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCores e fontesTamanho Um outra forma de manipula¸˜o poss´ ´ a altera¸˜o do ca ıvel e ca tamanho da fonte Fazemos uso tamb´m do elemento FONT, por´m utilizando o e e atributo size O tamanho 3 ´ o valor default e Pode ser utilizado valores absolutos ou relativo ao default <FONT SIZE=−2>Qual ´ e s s e tamanho ?</FONT e > <FONT SIZE=+2>E e s s e ?</FONT > <FONT SIZE=2>e e s s e o u t r o ?</FONT>53 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  86. 86. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesCores e fontesFontes At´ agora, sempre utilizamos a mesma fonte e Por´m, ´ poss´ customizar a fonte a ser utilizada e e ıvel Novamente fazemos uso da tag FONT, mas com o atributo face <FONT FACE=" V e r d a n a " COLOR=" #0000 AA ">F o n t e Verdana a z u l </FONT > <FONT FACE=" Arial " COLOR=" #00 AA00 ">F o n t e A r i a l v e r d e</ FONT> <FONT FACE=" C o u r i e r New " COLOR=" # AA0000 ">F o n t e C o u r i e r New v e r m e l h a</FONT >54 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  87. 87. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesLinksUsando links Um dos mais importantes recursos do HTML ´ a capacidade e de referenciar outros documentos Al´m disso ´ poss´ fazer referˆncia a pontos dentro do e e ıvel e pr´prio documento (chamado ˆncoras) o a Tudo isso ´ poss´ atrav´s da tag <a> e ıvel e55 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  88. 88. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesLinksUsando links Um dos mais importantes recursos do HTML ´ a capacidade e de referenciar outros documentos Al´m disso ´ poss´ fazer referˆncia a pontos dentro do e e ıvel e pr´prio documento (chamado ˆncoras) o a Tudo isso ´ poss´ atrav´s da tag <a> e ıvel e <A HREF = " www . g o ogle . com ">meu l i n k</A>55 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  89. 89. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesLinksLinks Al´m disso, os seguintes atributos podem ser utilizados: e href: indica a URL que ser´ carregada a target: indica o frame em que ser´ carregado. Possibilita a a abertura do link em uma nova p´gina atrav´s do valor blank a e name: marca um ponto de referˆncia a ser utilizado como e ˆncora. Geralmente ´ utilizado em p´ginas Web longas para a e a possibilitar um retorno para um ponto espec´ ıfico <A NAME i n i c i o "> I n d i c a d o r e s ( u s o de l i n k s )</A> =" <A HREF=" # i n i c i o ">Topo do documento</A>56 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  90. 90. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesInser¸˜o de imagens caInserindo imagens Para inser¸˜o de imagens fazemos uso da tag img, com os ca seguintes parˆmetros a src: indica a url para a imagem a ser carregada alt: texto a ser exibido caso a imagem n˜o possa ser carregada a width: largura da imagem height: altura da imagem border: define a largura da linha que circunda a imagem Exemplo: <IMG SRC = " http :// l i b r a r y . t h i n k q u e s t . org / 1 5 0 7 4 / media / html2 . gif ">57 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  91. 91. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesTabelasO que s˜o? a As tabelas foram uma das primeiras abordagens utilizadas para a organiza¸˜o das p´ginas Web ca a A ideia original era organizar a p´gina Web como uma grade, a onde cada parte do documento se encaixava em c´lulas e espec´ ıficas58 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  92. 92. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesTabelasO que s˜o? a As tabelas foram uma das primeiras abordagens utilizadas para a organiza¸˜o das p´ginas Web ca a A ideia original era organizar a p´gina Web como uma grade, a onde cada parte do documento se encaixava em c´lulas e espec´ ıficas Deste modo, torna-se poss´ a inser¸˜o de textos, ıvel ca par´grafos, imagens, formul´rios, e v´rias outras formata¸˜es, a a a co inclusive outras tabelas!!58 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  93. 93. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesTabelasElementos b´sicos a Para constru¸˜es de tabelas, os seguintes elementos s˜o utilizados: co a Table: elemento que delimita uma tabela. Cont´m como um e dos atributos border para indicar apresenta¸˜o de borda: ca <TABLE BORDER=" borda "> ... </TABLE> T´ ıtulos, linhas e elementos: Caption: define o t´ ıtulo da tabela Tr: delimita uma linha Th: delimita um cabe¸alho para colunas ou linhas c Td: delimita um elemento ou c´lula e59 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  94. 94. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesTabelasExemplo de tabela <TABLE BORDER=4> <CAPTION>P r i m e i r o e x e m p l o</CAPTION> <TR><TH o l u n a 1</TH >C ><TH o l u n a 2</TH >C ></TR> <TR><TD i n h a 1 , c o l u n a 1</TD >l ><TD l i n h a 1 , c o l u n a 2</TD > ></TR> <TR><TD l i n h a 2 , c o l u n a 1</TD > ><TD l i n h a 2 , c o l u n a 2</TD > ></TR> </TABLE>60 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  95. 95. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesTabelasMesclando colunas e c´lulas e Uma das tarefas mais comuns ao se trabalhar com tabelas ´ a e possibilidade de mesclar v´rias colunas ou c´lulas em um a e unico elemento ´ Para tal, s˜o utilizados os atributos Colspan e rowspan a <TABLE BORDER=1> <TR><TH COLSPAN=2>C o l u n a s 1 e 2</TH ></TR> <TR><TD i n h a 1 , c o l u n a 1</TD >l ><TD l i n h a 1 , c o l u n a 2</TD > ></TR> <TR><TD l i n h a 2 , c o l u n a 1</TD > ><TD l i n h a 2 , c o l u n a 2</TD > ></TR> <TR><TH ROWSPAN=3>3 l i n h a s</TH ><TD>uma l i n h a</TD ></TR> <TR><TD u a s l i n h a s</TD >d ></TR> <TR><TD t r e s l i n h a s</TD > ></TR> </TABLE>61 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  96. 96. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesTabelasCriando tabelas sem bordas At´ aqui, trabalhamos com tabelas que apresentam bordas e das c´lulas e Por´m, ´ poss´ eliminar as bordas, tornando a visualiza¸˜o e e ıvel ca mais “limpa” Para tal, basta definir o atributo border para “0” <TABLE BORDER=" 0 "> ... </TABLE>62 / 85 Ivo Calado IFALPrograma¸˜o para Web ca
  97. 97. Introdu¸˜o ca Introdu¸ao linguagem HTML c Formata¸˜o de texto ca Referenciamento Tabelas e *framesTabelasAlinhamento Um outro recurso, bastante interessante ´ a possibilidade de e alinhamento do conte´do dentro de cada c´lula. Por padr˜o, o u e a alinhamento segue as seguintes regras:63 / 85 Ivo Calado IFALPrograma¸˜o para Web ca

×