14
HTML A alma da internet Prof. Mauro Duarte Prof. Mauro Duarte

1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

Embed Size (px)

Citation preview

Page 1: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

HTMLA alma da internet

Prof. Mauro DuarteProf. Mauro Duarte

Page 2: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

A História do HTML

● Hypertext Markup Language - Linguagem de Marcação de Hypertexto.

● Desenvolvido Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic ganhou força na década de 1990.

● Desenvolvedores e fabricantes de browsers utilizam o HTML como base, compartilhando as mesmas convenções.

Page 3: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

A História do HTML

● Hypertext Markup Language - Linguagem de Marcação de Hypertexto.

● Desenvolvido Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic ganhou força na década de 1990.

● Desenvolvedores e fabricantes de browsers utilizam o HTML como base, compartilhando as mesmas convenções.

Page 4: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

A História do HTML

● 1993 foi publicado por Berners-Lee e Dan Connolly.● 1994 a IETF criou um grupo de trabalho para o HTML.● 1995 a IETF publicou o HTML 2.0.● 1996 o W3C assumiu as especificações.● 1997 é publicado HTML3.5 iniciando o foco no XHTML● 1999 o W3C faz sua ultima publicação com HTML4 ● 2000 se torna norma Internacional (ISO/IEC 15445:2000)● 2008 é publicado o HTML5 e XHTML5

Page 5: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

A História do HTML

● 1993 foi publicado por Berners-Lee e Dan Connolly.● 1994 a IETF criou um grupo de trabalho para o HTML.● 1995 a IETF publicou o HTML 2.0.● 1996 o W3C assumiu as especificações.● 1997 é publicado HTML3.5 iniciando o foco no XHTML● 1999 o W3C faz sua ultima publicação com HTML4 ● 2000 se torna norma Internacional (ISO/IEC 15445:2000)● 2008 é publicado o HTML5 e XHTML5

Page 6: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

A História do HTML

● 2004 fundação do WHAT Working Group Web Hypertext Application Technology Working Group.● Desenvolvedores de empresas como Mozilla, Apple e Opera não estavam felizes com o caminho

que a Web tomava e nem com o rumo dado ao XHTML.● 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C ● Outubro de 2006, Tim Berners-Lee anuncia que trabalhara com o WHATWG na produção do

HTML5 em detrimento do XHTML 2.● XHTML continua sendo mantido paralelamente de acordo com as mudanças causadas no HTML. ● 2009 o grupo que estava cuidando do XHTML 2 foi descontinuado

Page 7: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

Estrutura básica, tag's (etiquetas)<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

</body>

</html>

● Cada “comando” em HTML é chamado de TAG.

● Inicia em<nomeDaTag>

● Termina em</nomeDaTag>

Page 8: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

<!DOCTYPE HTML> Não é uma Tag é uma informação para o navegador ele define qual é a versão do (X)HTML que o documento está usando e esta é uma informação fundamental para que os browsers processem corretamente o documento.

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

</body>

</html>

Estrutura básica<!DOCTYPE>

Page 9: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

Estrutura básica <html>

● Todas as tag são colocadas umas dentro das outras como galhos de um arvore, a raiz de tudo isto é a tag <html>.

● O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.

● LANG pode ser usado em outras tags para informar o idioma do elemento especifico.

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

</body>

</html>

Page 10: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

Estrutura básica <head>

A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

</body>

</html>

Page 11: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

Estrutura básica<meta charset=” “>

● o nosso exemplo há uma metatag responsável por chavear qual tabela de caracteres a página está utilizando.

● <meta charset="utf-8">● Nas versões anteriores ao HTML5, essa

tag era escrita da forma diferente

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

</body>

</html>

Page 12: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

Estrutura básica<title>

● Esta tag é responsável pela exibição de textos na barra de titulo do navegador.

(Cuidado para não confundir)

<!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

</body>

</html>

Page 13: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

Estrutura básica<body><!DOCTYPE HTML>

<html lang=”pt-br”>

<head>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

</body>

</html>

● Dentro desta tag fica o site propriamente dito, tudo que vemos no navegador deve estar dentro desta tag.

Page 14: 1 - Introdução Ao Desenvolvimento Web - Estrutura Básica

23/02/15

...