HTML: Linguagem de Marcação de HiperTexto (HyperText Markup Language) Pimentel, Morganna BSI -UNIRIO 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. 3/ 18
Primeira página da Web Primeira Página criada por Tim Berners-Lee em 1991 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. URIidentifica e URLlocaliza. Toda URLé uma URI, mas nem toda URIé uma URL. http://bsi.uniriotec.br/institucional/imagens/organograma.png 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) 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. 7/ 18
HTML: Linguagem de Marcação de HiperTexto O que é HiperTexto? 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 etiqueta inicial atributo valor elemento h1 (heading= título, cabeçalho) conteúdo etiqueta final <h1 style= text-align:center >Departamento de Informática Aplicada</h1> ANINHAMENTO das etiquetas (uma dentro da outra) Sim: [( )] Não: [(]) p <p>dia (<em>departamento de Informatica Aplicada</em>) tem a missão...</p> em <p><strong>contato</strong> - ccet@uniriotec.br<br> Universidade Federal do Estado do Rio de Janeiro<br> Avenida Pasteur, 458, sala 114<br> 22280-240, Urca, Rio de Janeiro, RJ, Brasil</p> 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 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) 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 <p style="font-family: Arial, Helvetica, sans-serif; text-align:justify; ">...</p> 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) 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 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 Arquivo visualizado: dia.html 17/ 18
Passo 4: Inclua etiquetas HTML (tags) Marque o documento com os elementos html: <h1>título da Página</h1> <p>parágrafo</p> <br/>quebra de linha <h1> <br> <br> <br> <br> 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 <!DOCTYPE html> <html lang="pt-br"> <head> <title>título na aba do navegador</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1>título do Conteúdo da Página</h1> <p>parágrafo... </p> <p>parágrafo... </p> <p>parágrafo... </p> </body> </html> 20/ 18
Valide o Documento http://validator.w3.org/- Corrija o que for necessário 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