SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
HTML
A alma da internet
Prof. Mauro DuarteProf. Mauro Duarte
A História do HTML
● Hypertext Markup Language - Linguagem de
Marcação de Hypertexto.
● DesenvolvidoTim 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.
03/03/15
A História do HTML
● Hypertext Markup Language - Linguagem de
Marcação de Hypertexto.
● DesenvolvidoTim 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.
03/03/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 oW3C assumiu as especificações.
● 1997 é publicado HTML3.5 iniciando o foco no XHTML
● 1999 oW3C faz sua ultima publicação com HTML4
● 2000 se torna norma Internacional (ISO/IEC 15445:2000)
● 2008 é publicado o HTML5 e XHTML5
03/03/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 oW3C assumiu as especificações.
● 1997 é publicado HTML3.5 iniciando o foco no XHTML
● 1999 oW3C faz sua ultima publicação com HTML4
● 2000 se torna norma Internacional (ISO/IEC 15445:2000)
● 2008 é publicado o HTML5 e XHTML5
03/03/15
A História do HTML
● 2004 fundação doWHATWorking GroupWeb Hypertext Application
TechnologyWorking 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 doWHATWG passou ser conhecido pelo mundo e
principalmente peloW3C
● 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
03/03/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>
03/03/15
<!DOCTYPE HTML> Não é
umaTag é 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>
03/03/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>
03/03/15
Estrutura básica
<head>
ATag 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>
03/03/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>
03/03/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>
03/03/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.
03/03/15
...

Weitere ähnliche Inhalte

Was ist angesagt? (14)

Introdução a Tecnologias Web
Introdução a Tecnologias WebIntrodução a Tecnologias Web
Introdução a Tecnologias Web
 
Html5
Html5Html5
Html5
 
Conecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoConecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - Apresentação
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
As tecnologias fundamentais da web - EGI 2015
As tecnologias fundamentais da web - EGI 2015As tecnologias fundamentais da web - EGI 2015
As tecnologias fundamentais da web - EGI 2015
 
Fortaleza WordPress Meetup
Fortaleza WordPress MeetupFortaleza WordPress Meetup
Fortaleza WordPress Meetup
 
Websocket
WebsocketWebsocket
Websocket
 
Intro desenvolvimento-web
Intro desenvolvimento-webIntro desenvolvimento-web
Intro desenvolvimento-web
 
desenvolvimento-web-javascript
desenvolvimento-web-javascriptdesenvolvimento-web-javascript
desenvolvimento-web-javascript
 
Curso HTML Módulo 1
Curso HTML Módulo 1Curso HTML Módulo 1
Curso HTML Módulo 1
 
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
A Evolução do PHP - A Linguagem Número 1 da Web - PHP Conference Brasil 2013
 
Criando websites a jato com Django
Criando websites a jato com DjangoCriando websites a jato com Django
Criando websites a jato com Django
 

Andere mochten auch

Datamining 9th association_rule.key
Datamining 9th association_rule.keyDatamining 9th association_rule.key
Datamining 9th association_rule.keysesejun
 
Desnudos (carlos fidice)
Desnudos (carlos fidice)Desnudos (carlos fidice)
Desnudos (carlos fidice)Orion Aramayo
 
Sistema circulatori jordi
Sistema circulatori jordiSistema circulatori jordi
Sistema circulatori jordijordiclave
 
Excursie Enschede 2010
Excursie Enschede 2010 Excursie Enschede 2010
Excursie Enschede 2010 Verbouwkunst
 
Futbol
FutbolFutbol
Futbollmoras
 
Craciunescu emanuela
Craciunescu emanuelaCraciunescu emanuela
Craciunescu emanuelacemutza91
 
Discapacidad (web)
Discapacidad (web)Discapacidad (web)
Discapacidad (web)marilooo
 
3 basic steps for korean practice
3 basic steps for korean practice 3 basic steps for korean practice
3 basic steps for korean practice renangaurino
 
Teresina05 tcc e monografia r$300,00
Teresina05 tcc e monografia r$300,00Teresina05 tcc e monografia r$300,00
Teresina05 tcc e monografia r$300,00Mario Luciano Marques
 
Tarea 3 equipo gua,dl,wen, glo
Tarea 3 equipo gua,dl,wen, gloTarea 3 equipo gua,dl,wen, glo
Tarea 3 equipo gua,dl,wen, glocobao32
 
Tarea de mate diapositivas(guadalupe)
Tarea de mate diapositivas(guadalupe)Tarea de mate diapositivas(guadalupe)
Tarea de mate diapositivas(guadalupe)cobao32
 
La sociedad del riesgo y la evolución hacia la sociedad del riesgo global
La sociedad del riesgo y la evolución hacia la sociedad del riesgo globalLa sociedad del riesgo y la evolución hacia la sociedad del riesgo global
La sociedad del riesgo y la evolución hacia la sociedad del riesgo globalManuel José Morales Martinez
 
Como la tecnología contribuye en lo industrial al mejamiento de vida
Como  la  tecnología contribuye  en lo industrial  al mejamiento de vidaComo  la  tecnología contribuye  en lo industrial  al mejamiento de vida
Como la tecnología contribuye en lo industrial al mejamiento de vidadlg0510
 

Andere mochten auch (20)

Carbonero
CarboneroCarbonero
Carbonero
 
Progratele
PrograteleProgratele
Progratele
 
Gokremtekir blog Ekim 2009
Gokremtekir blog Ekim 2009Gokremtekir blog Ekim 2009
Gokremtekir blog Ekim 2009
 
Tipologtext (2)
Tipologtext (2)Tipologtext (2)
Tipologtext (2)
 
Datamining 9th association_rule.key
Datamining 9th association_rule.keyDatamining 9th association_rule.key
Datamining 9th association_rule.key
 
Desnudos (carlos fidice)
Desnudos (carlos fidice)Desnudos (carlos fidice)
Desnudos (carlos fidice)
 
Sistema circulatori jordi
Sistema circulatori jordiSistema circulatori jordi
Sistema circulatori jordi
 
Excursie Enschede 2010
Excursie Enschede 2010 Excursie Enschede 2010
Excursie Enschede 2010
 
Karaoke night!
Karaoke night!Karaoke night!
Karaoke night!
 
Futbol
FutbolFutbol
Futbol
 
Architecture
ArchitectureArchitecture
Architecture
 
Craciunescu emanuela
Craciunescu emanuelaCraciunescu emanuela
Craciunescu emanuela
 
Discapacidad (web)
Discapacidad (web)Discapacidad (web)
Discapacidad (web)
 
3 basic steps for korean practice
3 basic steps for korean practice 3 basic steps for korean practice
3 basic steps for korean practice
 
Teresina05 tcc e monografia r$300,00
Teresina05 tcc e monografia r$300,00Teresina05 tcc e monografia r$300,00
Teresina05 tcc e monografia r$300,00
 
Tarea 3 equipo gua,dl,wen, glo
Tarea 3 equipo gua,dl,wen, gloTarea 3 equipo gua,dl,wen, glo
Tarea 3 equipo gua,dl,wen, glo
 
Tarea de mate diapositivas(guadalupe)
Tarea de mate diapositivas(guadalupe)Tarea de mate diapositivas(guadalupe)
Tarea de mate diapositivas(guadalupe)
 
Quimica
QuimicaQuimica
Quimica
 
La sociedad del riesgo y la evolución hacia la sociedad del riesgo global
La sociedad del riesgo y la evolución hacia la sociedad del riesgo globalLa sociedad del riesgo y la evolución hacia la sociedad del riesgo global
La sociedad del riesgo y la evolución hacia la sociedad del riesgo global
 
Como la tecnología contribuye en lo industrial al mejamiento de vida
Como  la  tecnología contribuye  en lo industrial  al mejamiento de vidaComo  la  tecnología contribuye  en lo industrial  al mejamiento de vida
Como la tecnología contribuye en lo industrial al mejamiento de vida
 

Ähnlich wie 1 si introdução ao desenvolvimento web - estrutura básica

HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosGeorge Mendonça
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxJEANCLEVERSONPRATAS
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsNáiron Jcg
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdfNickMartinsgaspar
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTMLTales Augusto
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica TrabalhoAdagenor Ribeiro
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
 
DESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEBDESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEBPatrick Monteiro
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Ritielle de Souza
 

Ähnlich wie 1 si introdução ao desenvolvimento web - estrutura básica (20)

I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
HTML5 - (01) Visão Geral do HTML5
HTML5 - (01) Visão Geral do HTML5HTML5 - (01) Visão Geral do HTML5
HTML5 - (01) Visão Geral do HTML5
 
Html
HtmlHtml
Html
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
 
HTML5
HTML5HTML5
HTML5
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Html slide
Html slideHtml slide
Html slide
 
HTML e CSS - O que é?
HTML e CSS - O que é?HTML e CSS - O que é?
HTML e CSS - O que é?
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Aula 02
Aula 02Aula 02
Aula 02
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
DESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEBDESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEB
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1
 

1 si introdução ao desenvolvimento web - estrutura básica

  • 1. HTML A alma da internet Prof. Mauro DuarteProf. Mauro Duarte
  • 2. A História do HTML ● Hypertext Markup Language - Linguagem de Marcação de Hypertexto. ● DesenvolvidoTim 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.
  • 3. 03/03/15 A História do HTML ● Hypertext Markup Language - Linguagem de Marcação de Hypertexto. ● DesenvolvidoTim 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.
  • 4. 03/03/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 oW3C assumiu as especificações. ● 1997 é publicado HTML3.5 iniciando o foco no XHTML ● 1999 oW3C faz sua ultima publicação com HTML4 ● 2000 se torna norma Internacional (ISO/IEC 15445:2000) ● 2008 é publicado o HTML5 e XHTML5
  • 5. 03/03/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 oW3C assumiu as especificações. ● 1997 é publicado HTML3.5 iniciando o foco no XHTML ● 1999 oW3C faz sua ultima publicação com HTML4 ● 2000 se torna norma Internacional (ISO/IEC 15445:2000) ● 2008 é publicado o HTML5 e XHTML5
  • 6. 03/03/15 A História do HTML ● 2004 fundação doWHATWorking GroupWeb Hypertext Application TechnologyWorking 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 doWHATWG passou ser conhecido pelo mundo e principalmente peloW3C ● 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
  • 7. 03/03/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>
  • 8. 03/03/15 <!DOCTYPE HTML> Não é umaTag é 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>
  • 9. 03/03/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>
  • 10. 03/03/15 Estrutura básica <head> ATag 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>
  • 11. 03/03/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>
  • 12. 03/03/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>
  • 13. 03/03/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.