Introdução ao desenvolvimento de páginas web

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

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

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. 3

Leitura não linear 4

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

Tag (linguagens de marcação) Tags são estruturas de linguagem de
marcação contendo instruções, tendo uma marca de início e outra de ﬁm para que o navegador possa renderizar uma página. 6

Tag (linguagens de marcação) 7

2. Por que Linguagem? HTML: Linguagem de Marcação HiperTexto 8

Linguagem HTML HTML deﬁne: • 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. 9

Linguagem HTML × 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) 10

Exercício Quais das ﬁguras a seguir representam a noção de
Tags? Quais representam a noção de hipertexto? 11

12 [A] [C] [B] [D] [E]

Resposta: A , D e E representam a noção de
HiperTexto. B e C representam a noção de Tags (Marcações) 13

HTML x CSS: Para que servem? × 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) 14

O que se constroi com HTML e CSS? 15

HTML × 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) 16

17 Javascript

× Não é Java × É uma linguagem de programação
do lado do cliente (client-side). × Não é uma linguagem mantida pela W3C. × É uma linguagem orientada a objeto. × Permite moldar um comportamento dinâmico das páginas. O que é Javascript? 18

Resumindo: 19

Exercício Relacione as ﬁguras a seguir com as expectativas ao
utilizar HTML, CSS e JavaScript? Exemplo: Fig A - HTML, Fig B - CSS etc. 20

21 [C] [A] [B] [F] [E] [D]

Resposta: HTML: A e C, que são respectivamente a estrutura
de um prédio e a estrutura óssea CSS: B e F, representando a estética JavaScript: D e E, representam o comportamento mediante uma ação. 22

Exercício Destaque do código a seguir tudo o que corresponde
a CSS. 23

<!DOCTYPE html> <html> <head> <title>Teste de HTML</title> <meta charset="UTF-8"> </head>
<body> <h1 style="text-align: center;">Título do Conteúdo da Página</h1> <p style="color: red;">Parágrafo... </p> <p style="font-weight: bold;">Parágrafo... </p> <p style="color: red; font-weight: bold;">Parágrafo... </p> </body> </html> 24

Resposta: <!DOCTYPE html> <html> <head> <title>Teste de HTML</title> <meta charset="UTF-8">
</head> <body> <h1 style="text-align: center;">Título do Conteúdo da Página</h1> <p style="color: red;">Parágrafo... </p> <p style="font-weight: bold;">Parágrafo... </p> <p style="color: red; font-weight: bold;">Parágrafo... </p> </body> </html>

Fim 26

Introdução ao desenvolvimento de páginas web

Introdução ao desenvolvimento de páginas web

GABRIELLA

Other Decks in Education

Featured

Transcript

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

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

O que é HiperTexto? O termo hipertexto foi criado por

Leitura não linear 4

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

Tag (linguagens de marcação) Tags são estruturas de linguagem de

Tag (linguagens de marcação) 7

2. Por que Linguagem? HTML: Linguagem de Marcação HiperTexto 8

Linguagem HTML HTML deﬁne: • VOCABULÁRIO: conjunto de “palavras” (elementos,

Linguagem HTML × HTML (1991) – linguagem limitada (apenas texto)

Exercício Quais das ﬁguras a seguir representam a noção de

12 [A] [C] [B] [D] [E]

Resposta: A , D e E representam a noção de

HTML x CSS: Para que servem? × HTML × Estruturação

O que se constroi com HTML e CSS? 15

HTML × Estruturação do Documento × Texto × Imagem ×

17 Javascript

× Não é Java × É uma linguagem de programação

Resumindo: 19

Exercício Relacione as ﬁguras a seguir com as expectativas ao

21 [C] [A] [B] [F] [E] [D]

Resposta: HTML: A e C, que são respectivamente a estrutura

Exercício Destaque do código a seguir tudo o que corresponde

<!DOCTYPE html> <html> <head> <title>Teste de HTML</title> <meta charset="UTF-8"> </head>

Resposta: <!DOCTYPE html> <html> <head> <title>Teste de HTML</title> <meta charset="UTF-8">

Fim 26