HTML

1. HTML Material desenvolvido por Alan Carvalho

2. Objetivos • Introduzir conceitos fundamentais sobre a Web, como hipertexto, hipermídia, linguagens de marcação e outros. • Permitir que o Aluno conheça e saiba aplicar recursos da linguagem de marcação de hipertexto HTML na criação de sites. • Permitir que o Aluno conheça e saiba aplicar recursos da linguagem de definição de estilos CSS na criação de sites.

3. Tópicos Principais • Conceitos Fundamentais sobre a Web • HTML • CSS

4. Conceitos Fundamentais sobre a Web

5. Introdução 1 • Conceito de Hipertexto • O que é a World Wide Web • Origem da Web • Características da Web • W3 Consortium

6. Conceito de Hipertexto • Hipertexto é um texto construído para ser não-linear, contendo pontos de ligação para outros textos. • Hipermídia é um termo usado para hipertexto que não é formado somente por texto, mas por imagens, vídeo ou sons, por exemplo. • Ted Nelson definiu o termo “hipertexto” por volta de 1965 e provavelmente “hipermídia” também.

7. O que é a World Wide Web • Numa tradução livre do original obtido no W3 Consortium: • “A WorldWideWeb (W3) é uma iniciativa de larga escala para acesso e recuperação de documentos por hipermídia, com o intuito de permitir acesso universal a uma grande variedade de documentos.”

8. Origem da Web (1/2) • Em 1989, Tim Berners-Lee e Robert Caillau começaram a pensar num modelo de sistema de integração de documentos que pudesse ser usado pelos diferentes tipos de computadores do CERN (laboratório de pesquisa nuclear onde trabalhavam, em Genebra). • Não havia uma linguagem comum que permitisse essa integração. Alguns usavam PostScript, TeX e SGML.

9. Origem da Web (2/2) • A partir da linguagem de marcação SGML eles projetaram a linguagem HTML e o protocolo HTTP, para transporte dos dados através da rede. • O projeto foi iniciado em 1989 e em 1992 a Web passou a existir como parte da Internet.

10. Características da Web (1/3) • Fornecer um meio simples de buscar informações armazenadas em sistemas remotos, de forma que possam ser lidas por seres humanos. • Permitir que a informação possa ser definida em um formato comum entre fornecedor e consumidor da informação. • Permitir a exibição de textos e gráficos nos diversos dispositivos existentes.

11. Características da Web (2/3) • Permitir a criação e manutenção de conjuntos de documentos por seus próprios autores. • Permitir a ligação entre esses documentos ou conjuntos de documentos. • Permitir um meio de busca, baseado em palavras-chave, além de poder ser navegada através dos links.

12. Características da Web (3/3) • Permitir o uso de software de domínio público, livre de taxas e que este possa fazer a interface com eventuais sistemas proprietários.

13. W3 Consortium (1/2) • É uma associação de empresas, entidades de pesquisa e grupos de usuários ao redor do mundo com o intuito de definir especificações técnicas que regulem o funcionamento da Web. • Possui hoje mais de 500 membros, entre eles Netscape, Microsoft, IBM, Novell, Cisco, entre outros.

14. W3 Consortium (2/2) • Exemplos: HTML, HTTP, CSS, SMIL, PICS, XHTML, SVG, PNG, DOM, XML etc. • Todas as especificações estão disponíveis para consulta e, em alguns casos, download. • http://www.w3.org

16. HTML

17. Introdução 2 • O que é a HTML • Tags e Atributos • Estrutura Básica de uma Página • Ambiente de Desenvolvimento • Publicação e Recuperação

18. O que é a HTML • HTML (HyperText Markup Language) é a língua padrão para publicação de hipertexto e hipermídia na Web. • É uma linguagem baseada na SGML, mas sem a complexidade dessa última. • HTML não é uma linguagem de programação.

19. Tags ou Elementos • Tags ou elementos são marcações que permitem definir a estrutura do documento. • <enciclopédia> <volume> <tópico> conteúdo </tópico> </volume></enciclopédia> Algumas tags não possuem o respectivo fechamento

20. Atributos (1/2) • São propriedades relativas às tags, que possuem valores definidos por default ou pelo autor do documento. • <enciclopédia nome=“Saber Total”> <volume numero=“1”> <tópico nome=“Internet”> conteúdo </tópico> </volume></enciclopédia> Nem todas as tags têm atributos

21. Atributos (2/2) • Quando a tag tiver vários atributos, estes devem aparecer separados por um espaço. • É recomendado que seus valores sejam escritos entre aspas. • Não é necessário escrever os atributos no fechamento da tag. • A ordem dos atributos dentro de uma tag não é importante.

22. Estrutura Básica de uma Página • Uma página típica possui: • Document Type Definition (às vezes) • A tag <HTML> • Uma seção delimitada pela tag <HEAD> • Uma seção delimitada pela tag <BODY> • Em alguns casos usa-se a tag <FRAMESET>

23. DTD (1/4) • A DTD (Document Type Definition) é uma declaração SGML colocada no início do documento. • Define o “dicionário” utilizado na construção da página. • Importante no processo de validação. • Opcional nos outros casos, em se tratando de HTML.

24. DTD (2/4) • Na HTML 4 existem três DTDs: • Strict – inclui todos os elementos que não foram considerados “depreciados” ou não aparecem em definições de framesets. • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN""http://www.w3.org/TR/html4/strict.dtd">

25. DTD (3/4) • Transitional – inclui a Strict DTD e todos os elementos considerados “depreciados”. É considerada uma forma de manter a compatibilidade com versões anteriores da HTML. • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

26. DTD (4/4) • Frameset – inclui todos os elementos necessários para a criação de frames. • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

27. <HTML> • Colocada após a DTD e fechada no final da página, define que a página é um documento HTML. • É opcional e considerada depreciada quando se declara a DTD pois acaba sendo redundante.

28. <HEAD> • Colocada logo após a tag <HTML> ou a DTD. • Opcional porém, se usada, precisa ser aberta e fechada. • Define uma seção da página onde aparecem informações sobre a mesma como título e palavras-chave para pesquisa.

29. <TITLE> • Opcional e definida dentro da seção aberta por <HEAD>. • Toda página deve ter um título. • Precisa ser aberta e fechada. • Alguns browsers podem ler o título para pessoas com limitações visuais.

30. <BODY> • Opcional e definida após o final da seção aberta por <HEAD>. • Se for utilizada, precisa ser aberta e fechada. • Define a seção onde o conteúdo da página é inserido, seja ele texto, imagem, animação, som, vídeo etc.

31. <html><head> <title>Web Sites - HTML</title></head><body> <h1>A Linguagem HTML</h1> <p>HTML e a linguagem fundamental para marcacao de hipertexto e publicacao de conteudo na World Wide Web.</p></body></html>

32. Ambiente de Desenvolvimento • Ambiente básico de desenvolvimento: • Editor de textos que salve em formato ASCII sem formatação. • Browsers para testar as páginas • Microsoft Internet Explorer • Netscape Communicator 4.7x • Netscape 6.01

33. Ambiente de Desenvolvimento • Outros softwares, como editores WYSIWYG (ou quase), podem aumentar a produtividade do desenvolvedor, desde que este saiba o que está fazendo. • Macromedia Dreamweaver • Adobe GoLive • Microsoft FrontPage • Allaire HomeSite

34. Publicação e Recuperação (1/3) • Os documentos (páginas) e todos os arquivos que compõem o site necessitam ser disponibilizados para visualização a partir de um servidor Web ou servidor HTTP. • Para isso, utiliza-se algum software que trabalhe com o protocolo FTP ou a simples gravação dos arquivos em algum diretório configurado para receber o site no disco do servidor Web.

35. Publicação e Recuperação (2/3) • Após a publicação, as páginas estão disponíveis para visualização através do browser. • Para acessar uma página qualquer: • 1. O visitante requisita a URL da página no browser.2. O browser envia através da rede a requisição para o servidor.

36. Publicação e Recuperação (3/3) • 3. O servidor recebe a solicitação e pesquisa na estrutura de diretórios se a página desejada existe.Se não existir: devolve uma mensagem de erroSe existir: envia a página para o browser, que começa a interpretar e exibir seu conteúdo4. Para cada arquivo referenciado na página, uma nova requisição será feita pelo browser.

38. Formatação de Página e Texto 3 • Cores de Texto e Fundo • Cabeçalhos • Parágrafos e Blocos • Negrito, Itálico, Sublinhado e outros efeitos • Réguas • Definindo Características de Fonte • Listas

39. O sistema sRGB (1/2) • As cores são definidas por tons de vermelho (R), verde(G) e azul(B). • São 255 tons para cada cor, formando aproximadamente 16M cores definidas por um código hexadecimal de seis dígitos. • Em alguns casos, o nome da cor pode ser usado no lugar do código. • Uso da paleta segura de 216 cores.

40. O sistema sRGB (2/2)

41. Acentuação • Não se recomenda acentuar o texto diretamente, como se estivesse usando um processador de textos. • No lugar disso, recomenda-se usar as chamadas “referências de caracteres”, que são códigos para símbolos especiais, como acentos e outros sinais. • Na especificação HTML existe a relação completa de códigos.

42. Cores de Texto e Fundo • <body bgcolor=“cor” text=“cor”> • bgcolor – define a cor de fundo • text – define a cor do texto • Se não definidas, usa-se o padrão do browser. • A cor obedece ao padrão sRGB (single RGB) e pode ser definida com seu nome ou código hexadecimal.

43. Cabeçalhos • <hn align=“val”>texto</hn> • Define um padrão de título • O “n” é um número de 1 a 6 (1 é o maior título; 6 é o menor título) • O atributo align permite definir o alinhamento do cabeçalho (left, right, center ou justify).

44. Parágrafos e Quebras de Linha • São definidos pela tag <p>, que tem seu fechamento opcional. • <p align=“val”>texto</p> • Os parágrafos serão separados por uma linha em branco. • As quebras de linha são definidas pela tag <br>, que não tem fechamento.

45. Blocos Definidos pela tag <div>, que tem seu fechamento obrigatório. <div align=“val”>texto</div> Muito utilizados na definição de camadas para efeitos de HTML dinâmica. Assemelham-se também a parágrafos.

46. Efeitos de Texto <b>texto</b> - negrito<i>texto</i> - itálico<u>texto</u> - sublinhado^texto - sobrescrito (expoente)_texto - subscrito (índice)<big>texto</big> - aumenta o texto<small>texto</small> - diminue o texto<tt>texto</tt> - usa fonte monoespaçada<pre>texto</pre> - obedece formatação

47. Réguas Definidas pela tag <hr>, que não têm fechamento. <hr width=“larg” align=“val” size=“alt” noshade> width – largura da réguaalign – alinhamento horizontalsize – espessura da linha em pixelsnoshade – se definido, preenche a linha

48. Definindo Fontes • Através da tag <font>, cujo fechamento é obrigatório, definem-se três atributos para a fonte. • <font size=“tam” color=“cor” face=“tipos”>texto</font> • size – tamanho do texto (entre 1 e 7)color – cor (código ou nome)face – lista de tipos

49. Definindo Fontes • O nome da fonte não é case-sensitive. • Caso o usuário não tenha a 1ª fonte da lista instalada em seu computador, será assumida a próxima fonte e assim sucessivamente, até utilizar a fonte padrão do browser. • Não há uma correspondência entre o tamanho da cor e qualquer medida tipográfica (pt, por exemplo).

50. Listas • Usadas para exibir listas de ítens. Podem ser: • Não-ordenadas • Ordenadas • Definição