SlideShare uma empresa Scribd logo
4
Mais lidos
11
Mais lidos
18
Mais lidos
HTMLHyperText Markup Language
O que veremos
O que é o HTML?
Para que serve o HTML?
História do HTML
Começando…(mãos na massa)
O que é o HTML?
HTML é...
1. um arquivo que pode ser
interpretado por navegadores.
2. uma linguagem de marcação,
Linguagem de Marcação de
Hipertexto
3. a linguagem base da internet.
4. para ser de fácil entendimento
por seres humanos e também
por máquinas.
A principal característica do HTML é de ser uma
linguagem de hipertexto, isto é, as páginas podem
ser ligadas uma a outra. Ou seja, você lê sobre
algo, lá já há links contendo informações que
podem aprofundar o mesmo tema, ou
simplesmente, uma sequência de páginas.
Para que serve o HTML?
Para...
1. desenvolver websites.
2. Criarmos contéudo de
pesquisas, bem como wikis,
blogs, portais, etc...
O fato dela ser interpretada significa que o
programa, o browser, vai lendo suas tags e
"traduzindo" para a formatação, ou seja, assim
criar parágrafos, cabeçalhos, títulos, formulários,
enfim, tudo o que vemos em uma página de
internet.
História do HTML?
Timothy John Berners-Lee é o criador da
World Wide Web (Rede Mundial de
Computadores - Internet)…
Enquanto ele atuava no CERN (Organização
Europeia para a Pesquisa Nuclear), de Junho a
dezembro de 1980, Berners-Lee propôs um
projeto baseado no conceito de hipertexto para
facilitar a partilha e atualização de informações
entre os pesquisadores, tendo feito a primeira
proposta para sua criação a 25 de março de
1989.
Tim Bernes Lee
World Wide Web
A World Wide Web também conhecida como Web ou WWW, é um sistema
de documentos em hipermídia que são interligados e executados na
Internet.
Os documentos podem estar na forma de vídeos, sons, hipertextos e
figuras. Para consultar a informação, pode-se usar um programa de
computador chamado navegador para descarregar informações
(chamadas "documentos" ou "páginas") de servidores web (ou "sítios") e
mostrá-los na tela do usuário. O usuário (utilizador) pode então seguir as
hiperligações na página para outros documentos ou mesmo enviar
informações de volta para o servidor para interagir com ele. O ato de
seguir hiperligações é, comumente, chamado "navegar" ou "surfar" na
Web.
O primeiro site foi construído no CERN e foi
posto on line em 6 de Agosto de 1991.
A primeira imagem só foi colocada on line
um ano depois, em 1992. A Internet mudou
o mundo: computadores, tablets e
smartphones invadiram o dia-a-dia e são
encarados como algo natural por todos
aqueles que já nasceram na Era Digital.
A revolução chamada World
Wide Web
Mais um pouco de
história...
Links com informações e
infográficos
● Tim Berners-Lee: o passado e o
futuro da Internet
● Conheça o primeiro website da
história da Internet
● A evolução da Web
Começando…(mãos na massa)
A estrutura basica de uma página HTML é
<!DOCTYPE html>
<html>
<head>
<title>COLOQUE AQUI O TÍTULO DA PÁGINA</title>
</head>
<body>
DAQUI EM DIANTE Você DESENVOLVE SUA PÁGINA.
</body>
</html>
Estrutura inicial HTML
Observe que a construção de páginas exige o uso de marcadores chamados
de “TAGS”. Vejamos o conceito das tags usadas no exemplo anterior.
Tags
TAG O QUE FAZ
<html> Marca o início e o fim do documento HTML. Com ele você inicia e finaliza a
construção da página Web.
<head> Marca o início e o fim do cabeçalho, ou seja, a área onde serão descritos
cabeçalhos e o título da página.
<title> Marca o início e o fim do título do cabeçalho. O título da página aparecerá na
barra superior do browser/ navegador.
<body> Marca o início e o fim do corpo da página.
Observação importante: toda tag aberta deve ser fechada
em algum ponto. Para isso se usa a barra “/” dentro de uma
tag semelhante a de abertura. Por exemplo, a tag <table>
deve ser fechada com a tag </table>. Existem ainda as tags
que são abertas e fechadas em um único marcador, por
exemplo, a tag <br/> que representa uma quebra de linha,
não precisa de outra de fechamento, pois ela fecha a si
própria com a barra posta no final.
Conclusão
Segue links para praticar e aprender mais sobre html:
- http://www.comofazerumsite.com/criarsite/tutorial_html.html
- http://www.clem.ufba.br/tuts/html/default.htm
- http://www.linhadecodigo.com.br/artigo/81/html-basico.aspx

Mais conteúdo relacionado

PDF
Apresentação HTML e CSS
PDF
Curso de HTML5 - Aula 01
PDF
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
PPT
Introdução ao HTML
PPT
PDF
Introdução ao HTML e CSS
PDF
Programação Web com HTML e CSS
PDF
Minicurso de HTML básico - Atualizado para HTML5
Apresentação HTML e CSS
Curso de HTML5 - Aula 01
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Introdução ao HTML
Introdução ao HTML e CSS
Programação Web com HTML e CSS
Minicurso de HTML básico - Atualizado para HTML5

Mais procurados (20)

PDF
Aula 1 linguagem html (1)
PDF
PDF
Curso de Desenvolvimento Web - Módulo 02 - CSS
PPTX
Material aula informática básica
PDF
Curso de Desenvolvimento Web - Módulo 01 - HTML
PDF
Plano de aula sobre HTML básico
PPTX
Introdução ao Front-end no Desenvolvimento Web
PDF
Curso de css3 unidade 1 - introdução ao css
PPTX
Introdução sobre desenvolvimento web
PPTX
Introdução a HTML5
PDF
Introdução a Linguagem Java
PDF
Introdução a JavaScript
PPTX
01 - Microsoft Office Excel Básico
PDF
Minicurso de App Inventor
PPTX
Front End x Back End
PPTX
Introdução a programação para a Internet
PPTX
Curso de Básico de Excel 2013 - Parte I
PPTX
Aula 01 - JavaScript: Introdução
PPT
Aula 07 Css - Parte 1
PPTX
01 Introdução à programação web
Aula 1 linguagem html (1)
Curso de Desenvolvimento Web - Módulo 02 - CSS
Material aula informática básica
Curso de Desenvolvimento Web - Módulo 01 - HTML
Plano de aula sobre HTML básico
Introdução ao Front-end no Desenvolvimento Web
Curso de css3 unidade 1 - introdução ao css
Introdução sobre desenvolvimento web
Introdução a HTML5
Introdução a Linguagem Java
Introdução a JavaScript
01 - Microsoft Office Excel Básico
Minicurso de App Inventor
Front End x Back End
Introdução a programação para a Internet
Curso de Básico de Excel 2013 - Parte I
Aula 01 - JavaScript: Introdução
Aula 07 Css - Parte 1
01 Introdução à programação web
Anúncio

Destaque (9)

PPTX
Culture, Trust And Leadership
PPTX
E festo ogik
PPTX
The Dominators
PPTX
Master OGIK Konferencia
PPT
Sociale media voor scholen: pr en communicatie
PDF
Linkedin Visuals
PPT
Lezing BCPL
PPTX
Hpm 02.12
PPT
Start impaact june 7 2011
Culture, Trust And Leadership
E festo ogik
The Dominators
Master OGIK Konferencia
Sociale media voor scholen: pr en communicatie
Linkedin Visuals
Lezing BCPL
Hpm 02.12
Start impaact june 7 2011
Anúncio

Semelhante a Html (20)

PPTX
Introducao_HTML - PT02 Uma abordagem mais dinamica
PDF
Curso HTML Módulo 1
ODP
1 - Introdução Ao Desenvolvimento Web - Estrutura Básica
PDF
Curso básico HTML5
PPT
Html E Websemantica Trabalho
PPTX
I.h aula 6 7 8 9 10 11 12
PDF
PDF
5098 html
PPTX
Introducao-a-Linguagem-de-Marcacao-HTML.pptx
PPSX
W3C Web Standards HTML
PPT
Aula1web html
PPTX
AULA 01 - Conceitos de HTML.pptx
PDF
1 si introdução ao desenvolvimento web - estrutura básica
PDF
Html tutorial
PPTX
Conecte - Curso de HTML - Apresentação
PPTX
HTML5 + CSS3 - Aula01
PDF
Html 01
PPTX
O que é HTML a historia de como tudo começou
Introducao_HTML - PT02 Uma abordagem mais dinamica
Curso HTML Módulo 1
1 - Introdução Ao Desenvolvimento Web - Estrutura Básica
Curso básico HTML5
Html E Websemantica Trabalho
I.h aula 6 7 8 9 10 11 12
5098 html
Introducao-a-Linguagem-de-Marcacao-HTML.pptx
W3C Web Standards HTML
Aula1web html
AULA 01 - Conceitos de HTML.pptx
1 si introdução ao desenvolvimento web - estrutura básica
Html tutorial
Conecte - Curso de HTML - Apresentação
HTML5 + CSS3 - Aula01
Html 01
O que é HTML a historia de como tudo começou

Mais de Morvana Bonin (10)

PDF
Arquitetura hexagonal
PDF
Arquitetura Hexagonal: uma introdução
PDF
Sistemas de Recomendação com Neo4j + Surprise
PDF
Talk conexao
PDF
Introdução a Machine Learning
PDF
Oficina docker
PDF
Práticas Jedi eXtreme Programming
PDF
A tríade do tempo
PDF
Css cascading style sheet
PDF
Internet of Things
Arquitetura hexagonal
Arquitetura Hexagonal: uma introdução
Sistemas de Recomendação com Neo4j + Surprise
Talk conexao
Introdução a Machine Learning
Oficina docker
Práticas Jedi eXtreme Programming
A tríade do tempo
Css cascading style sheet
Internet of Things

Último (20)

PPTX
O Romantismo e a identidade brasileira..
PDF
A Revolução Francesa de 1789 slides história
PPTX
HISTÓRIA DO BRASIL - anos de Democracia.pptx
PPT
HISTOLOGIA VEGETAL - tecidos vegetais.ppt
PDF
O retorno a origem (islã Islamismo)
PPTX
Filosofia Ocidental Antiga 2025 - versão atualizada
PPTX
16. MODERNISMO - PRIMEIRA GERAÇÃO - EDIÇÃO 2021 (1).pptx
PPTX
QuestõesENEMVESTIBULARPARAESTUDOSEAPRENDIZADO.pptx
PDF
GESTÃO DA FASE PRÉ-ANALÍTICA- Recomendações da SBPC-ML (3).pdf
PPTX
GUERRAFRIA.pptdddddddddddddddddddddddddx
PPTX
Trabalho Cidades sustentáveis ou Utopia.pptx
PPTX
Ciências da Natureza e suas áreas de desenvolvimento
PPTX
MENDEL - Aula sobre Mendel - Genética EM
PDF
A relação entre funções executivas e desempenho acadêmico em crianças com Tra...
PPT
Imperio Bbrasileiro-1822-1889 - aspectos gerais
PPTX
ELEMENTOS E FUNÇÕES DE LINGUAGEM (EMOTIVA, REFERENCIAL, CONATIVA, POÉTICA, FÁ...
PDF
A provisão de jojuador (ramadã) islamismo
PPTX
Aula 13 - Tópico Frasal - Argumentação.pptx
PPTX
disciplulado curso preparatorio para novos
PDF
Cantores.pdf-Deslandes, Tinoco e Zambujo
O Romantismo e a identidade brasileira..
A Revolução Francesa de 1789 slides história
HISTÓRIA DO BRASIL - anos de Democracia.pptx
HISTOLOGIA VEGETAL - tecidos vegetais.ppt
O retorno a origem (islã Islamismo)
Filosofia Ocidental Antiga 2025 - versão atualizada
16. MODERNISMO - PRIMEIRA GERAÇÃO - EDIÇÃO 2021 (1).pptx
QuestõesENEMVESTIBULARPARAESTUDOSEAPRENDIZADO.pptx
GESTÃO DA FASE PRÉ-ANALÍTICA- Recomendações da SBPC-ML (3).pdf
GUERRAFRIA.pptdddddddddddddddddddddddddx
Trabalho Cidades sustentáveis ou Utopia.pptx
Ciências da Natureza e suas áreas de desenvolvimento
MENDEL - Aula sobre Mendel - Genética EM
A relação entre funções executivas e desempenho acadêmico em crianças com Tra...
Imperio Bbrasileiro-1822-1889 - aspectos gerais
ELEMENTOS E FUNÇÕES DE LINGUAGEM (EMOTIVA, REFERENCIAL, CONATIVA, POÉTICA, FÁ...
A provisão de jojuador (ramadã) islamismo
Aula 13 - Tópico Frasal - Argumentação.pptx
disciplulado curso preparatorio para novos
Cantores.pdf-Deslandes, Tinoco e Zambujo

Html

  • 2. O que veremos O que é o HTML? Para que serve o HTML? História do HTML Começando…(mãos na massa)
  • 3. O que é o HTML?
  • 4. HTML é... 1. um arquivo que pode ser interpretado por navegadores. 2. uma linguagem de marcação, Linguagem de Marcação de Hipertexto 3. a linguagem base da internet. 4. para ser de fácil entendimento por seres humanos e também por máquinas.
  • 5. A principal característica do HTML é de ser uma linguagem de hipertexto, isto é, as páginas podem ser ligadas uma a outra. Ou seja, você lê sobre algo, lá já há links contendo informações que podem aprofundar o mesmo tema, ou simplesmente, uma sequência de páginas.
  • 6. Para que serve o HTML?
  • 7. Para... 1. desenvolver websites. 2. Criarmos contéudo de pesquisas, bem como wikis, blogs, portais, etc...
  • 8. O fato dela ser interpretada significa que o programa, o browser, vai lendo suas tags e "traduzindo" para a formatação, ou seja, assim criar parágrafos, cabeçalhos, títulos, formulários, enfim, tudo o que vemos em uma página de internet.
  • 10. Timothy John Berners-Lee é o criador da World Wide Web (Rede Mundial de Computadores - Internet)… Enquanto ele atuava no CERN (Organização Europeia para a Pesquisa Nuclear), de Junho a dezembro de 1980, Berners-Lee propôs um projeto baseado no conceito de hipertexto para facilitar a partilha e atualização de informações entre os pesquisadores, tendo feito a primeira proposta para sua criação a 25 de março de 1989. Tim Bernes Lee
  • 12. A World Wide Web também conhecida como Web ou WWW, é um sistema de documentos em hipermídia que são interligados e executados na Internet. Os documentos podem estar na forma de vídeos, sons, hipertextos e figuras. Para consultar a informação, pode-se usar um programa de computador chamado navegador para descarregar informações (chamadas "documentos" ou "páginas") de servidores web (ou "sítios") e mostrá-los na tela do usuário. O usuário (utilizador) pode então seguir as hiperligações na página para outros documentos ou mesmo enviar informações de volta para o servidor para interagir com ele. O ato de seguir hiperligações é, comumente, chamado "navegar" ou "surfar" na Web.
  • 13. O primeiro site foi construído no CERN e foi posto on line em 6 de Agosto de 1991. A primeira imagem só foi colocada on line um ano depois, em 1992. A Internet mudou o mundo: computadores, tablets e smartphones invadiram o dia-a-dia e são encarados como algo natural por todos aqueles que já nasceram na Era Digital. A revolução chamada World Wide Web
  • 14. Mais um pouco de história... Links com informações e infográficos ● Tim Berners-Lee: o passado e o futuro da Internet ● Conheça o primeiro website da história da Internet ● A evolução da Web
  • 16. A estrutura basica de uma página HTML é <!DOCTYPE html> <html> <head> <title>COLOQUE AQUI O TÍTULO DA PÁGINA</title> </head> <body> DAQUI EM DIANTE Você DESENVOLVE SUA PÁGINA. </body> </html> Estrutura inicial HTML
  • 17. Observe que a construção de páginas exige o uso de marcadores chamados de “TAGS”. Vejamos o conceito das tags usadas no exemplo anterior. Tags TAG O QUE FAZ <html> Marca o início e o fim do documento HTML. Com ele você inicia e finaliza a construção da página Web. <head> Marca o início e o fim do cabeçalho, ou seja, a área onde serão descritos cabeçalhos e o título da página. <title> Marca o início e o fim do título do cabeçalho. O título da página aparecerá na barra superior do browser/ navegador. <body> Marca o início e o fim do corpo da página.
  • 18. Observação importante: toda tag aberta deve ser fechada em algum ponto. Para isso se usa a barra “/” dentro de uma tag semelhante a de abertura. Por exemplo, a tag <table> deve ser fechada com a tag </table>. Existem ainda as tags que são abertas e fechadas em um único marcador, por exemplo, a tag <br/> que representa uma quebra de linha, não precisa de outra de fechamento, pois ela fecha a si própria com a barra posta no final.
  • 19. Conclusão Segue links para praticar e aprender mais sobre html: - http://www.comofazerumsite.com/criarsite/tutorial_html.html - http://www.clem.ufba.br/tuts/html/default.htm - http://www.linhadecodigo.com.br/artigo/81/html-basico.aspx