HTML: Linguagem de Marcação de HiperTexto (HyperText Markup Language)

Pimentel, Morganna BSI - UNIRIO

DPW – 2017.2

1

DPW – 2017.2

2

WWW: uma breve história

• Tim Berners-Lee – pesquisador inglês na CERN (Organização Europeia para a Investigação Nuclear - Suíça). • Em março de 1989, Tim propôs a criação de uma tecnologia que hoje conhecemos como WEB no artigo “Information Management: A Proposal”. • Por volta de outubro de 1990, Tim apresentou 3 tecnologias HTML: HyperText Markup Language URI: Uniform Resource Identifier HTTP: Hypertext Transfer Protocol • Tim também escreveu o primeiro navegador e o primeiro servidor Web. • Tim é Diretor do World Wide Web Consortium (W3C) que supervisiona o desenvolvimento continuado da web. DPW – 2017.2

3 / 18

Primeira página da Web

Primeira Página criada por Tim Berners-Lee em 1991 DPW – 2017.2

4 / 18

Dicionário: alguns termos • A World Wide Web (Web ou WWW) é um sistema de documentos em hipermídia que são interligados e executados na Internet. • Internet é a rede mundial (infraestrutura). • HTTP (Hypertext Transfer Protocol) é um protocolo para distribuição de páginas. • URI (Uniforme Resource Identifier) corresponde a um conjunto de caracteres para identificar um recurso. • URL (Uniform Resource Locator) é uma URI que permite identificar um objeto e a sua localização na Internet. • URI identifica e URL localiza. Toda URL é uma URI, mas nem toda URI é uma URL.

http://bsi.uniriotec.br/institucional/imagens/organograma.png

DPW – 2017.2

5 / 18

HTML: Linguagem de Marcação de HiperTexto várias páginas interligadas (escrita não-linear)

várias mídias (multimídia x hipermídia)

DPW – 2017.2

6 / 18

HTML: Linguagem de Marcação de HiperTexto O que é HiperTexto?

O termo hipertexto foi criado por Theodore Nelson, na década de sessenta, para denominar a forma de escrita/leitura não linear na informática. DPW – 2017.2

7 / 18

HTML: Linguagem de Marcação de HiperTexto O que é HiperTexto?

DPW – 2017.2

“O que é hipertexto? Hipertexto é liberdade! Liberdade do peso das aplicações computacionais tradicionais. Liberdade do medo de falhar. Todo usuário de hipertexto tem sucesso por alcançar algum lugar e alguma coisa. Como um usuário de hipertexto você também é livre para ser criativo. Você pode descobrir relacionamentos que não foram percebidos por mais ninguém. Você pode ler sobre coisas que não previa encontrar. A alegria de inesperadamente ler sobre alguma coisa nova e a oportunidade de aprendizagem acidental durante a tentativa de localizar um fato específico faz do hipertexto uma aventura prazerosa para muitas pessoas que de outro modo evitariam os computadores.” (SHNEIDERMAN, 1989 - pg. 2) 8 / 18

HTML: Linguagem de Marcação de HiperTexto elemento h1 (heading= título, cabeçalho) etiqueta inicial

conteúdo atributo

etiqueta final

valor

Departamento de Informática Aplicada ANINHAMENTO das etiquetas (uma dentro da outra) Sim: [ ( ) ] p Não: [ ( ] )

em DIA (Departamento de Informatica Aplicada) tem a missão ... Contato - [email protected]
Universidade Federal do Estado do Rio de Janeiro
Avenida Pasteur, 458, sala 114
22280-240, Urca, Rio de Janeiro, RJ, Brasil DPW – 2017.2

9

HTML: Linguagem de Marcação de HiperTexto Linguagem = sistema de signos que serve de meio de comunicação (linguagem escrita, verbal, visual etc.) Língua = palavras (vocabulário) + sintaxe (regras) + uso dicionário

gramática

literatura

HTML define: • VOCABULÁRIO: conjunto de “palavras” (elementos, atributos e valores) para a escrita de páginas Web • SINTAXE: regras de como escrever as marcações • USO: • evolui ao longo do tempo (v 2.0 / 3.2 / 4.0 / 4.01 / 5.0), algumas palavras caem em desuso (deprecated) e outras são adicionadas.

http://www.w3.org DPW – 2017.2

10 / 18

HTML: Linguagem de Marcação de HiperTexto HTML (1991) – linguagem limitada (apenas texto) HTML 2.0 (1995) – novas formatações (voltada para design), hypermedia, consulta a base de dados, etc HTML 3.2 (1997) – suporta extensões dos navegadores HTML 4 (1999) – suporta CSS XHTML (2000) – HTML + rigor do XML HTML 5 (2014) – HTML 4 + XHTML (em desenvolvimento)

DPW – 2017.2

11 / 18

HTML x CSS (Folhas de Estilo em Cascata) HTML Estruturação do documento em elementos • (estrutura, semântica, tipos de informação)

CSS: Cascading Style Sheets Formatação dos elementos • (visual, apresentação, aparência das informações)

HTML: elemento parágrafo CSS: formatação do parágrafo ...

DPW – 2017.2

12 / 18

O que se constrói com HTML e CSS HTML e XHTML • • • • • • •

Estruturação do Documento Texto Imagem Ligações (links) Embutir Objetos (imagem, som, vídeo...) Tabela Formulário

CSS • Estilos para formatação dos elementos • Diagramação (sem Tabela, Tableless)

DPW – 2017.2

13 / 18

“Hello Word”, em HTML

DPW – 2017.2

14

Passo 1: Digite o texto da página Digite num editor de texto simples, como o Bloco de notas do Windows

Pense como seria a primeira página de sua homepage • • •

Elabore um pequeno texto apresentando a homepage. Não apresente todas as informações de uma só vez. Organize as informações em seções. Disponibilize informações para entrar em contato, geralmente, correio-eletrônico.

DPW – 2017.2

15 / 18

Passo 2: Salve o documento como “.html” Nomeie o documento e indique tipo “.html” Ex.: “dia.html”

Escolha um nome como “dia.html” No Bloco de notas, indique o tipo genérico de texto identificado por “Todos os arquivos”

DPW – 2017.2

16 / 18

Passo 3: Visualize o documento num navegador Abra o documento num navegador web (MS Internet Explorer, Mozila Firefox, Google Chrome) Arquivo > Abrir... Procurar... “C:\...\dia.html”

DPW – 2017.2

Arquivo visualizado: “dia.html”

17 / 18

Passo 4: Inclua etiquetas HTML (tags) Marque o documento com os elementos html: Título da Página

parágrafo


quebra de linha









DPW – 2017.2

18 / 18

Passo 5: Atualize a visualização Salve o documento html e atualize a visualização no navegador.

Repita o passo 4 e 5 até obter o documento desejado.

DPW – 2017.2

19 / 18

Estruture o documento: doctype, html, head, body Título na aba do navegador

Título do Conteúdo da Página Parágrafo... Parágrafo... Parágrafo...





DPW – 2017.2

20 / 18

Valide o Documento

http://validator.w3.org/ - Corrija o que for necessário

DPW – 2017.2

21 / 18

Para aprender e praticar HTML

DPW – 2017.2

22 / 18

Navegadores

DPW – 2017.2

23 / 18

Exercício

DPW – 2017.2

24 / 18