SlideShare uma empresa Scribd logo
1 de 12
CODIFICAÇÕES BÁSICAS
HTML e XML
Carolina Nunes
Felipe Lamarão
Gladson Brendo
Hyago Cavalcante
Renan Augusto
HTML
 O documento HTML sempre inicia com o que
chamamos de estrutura básica. Esta
estrutura é quase que imutável. Sempre será
dessa forma e você sempre, sempre
começará seu HTML começando por esse
código. Geralmente os editores como o
Sublime Text já tem atalhos para iniciar os
documentos HTMLs com essa estrutura,
logo, você não precisa se preocupar em
decorá-la, mas é bom que faça.
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
 <title>Título da página</title>
 <meta charset="utf-8">
 </head>
 <body>
 Aqui vai o código HTML que fará seu site aparecer.
 </body>
 </html>
 É possível compreender o documento em HTML de uma maneira muito simples,
através de uma divisão de blocos das tags essenciais, conforme a seguinte
estrutura:
 Definição do documento (doctype)
 Cabeça (head)
 Corpo (body)
VEJA COMO ELA SE INICIA:
DOCTYPE - DEFININDO O DOCUMENTO
 Uma coisa importante: SEMPRE deve existir o
doctype, que é este código <!DOCTYPE html>.
 O doctype não é uma tag HTML, mas uma
instrução para o navegador e outros programas
que podem ler seu site. O código encontrado é
um código HTML. Assim eles sabem o que
fazer para mostrar seu site da melhor forma
possível. Lembre-se: o doctype é
OBRIGATÓRIO e deve ser sempre a
PRIMEIRA LINHA do seu documento.
HEAD
 Contém informações que não são
transpostas visivelmente para o usuário/leitor
do documento. São dados implícitos, de uso
e controle do documento: vinculação com
outros arquivos, aplicação de lógica de
programação de scripts e metadados. Na
prática, todo o conteúdo do cabeçalho fica
delimitado entre a abertura e fechamento
tag head.
BODY
 Trata-se do documento em si, ou seja, a
informação legível para o usuário/leitor do
documento. É todo e qualquer texto que se
deseja apresentar, assim como toda e qualquer
forma de mídia de saída (imagens, sons, mini
aplicativos embutidos, conteúdo multimídia,
etc). Além disso, toda a apresentação de
entrada de dados (formulários) também se
aplica neste seção do documento. Na prática, o
corpo do documento é delimitado pelo par de
tags <body> e </body>.
XML
 É uma linguagem designada para descrever
e estruturar informações.
 Como uma linguagem de marcação, o XML
se assemelha com a linguagem HTML,
possuindo marcações para descrever dados.
 Porém, estas marcações não são pré-
definidas na linguagem, tornando possível a
criação de marcações de acordo com
necessidades específicas.
HTML X XML
 HTML (HyperText Markup Language) –
Descreve aparência e ações.
 XML (Extensible Markup Language) –
Descreve a representação de algo.
HTML XML
 XML permite criar qualquer marca que você
precisa descrever seus dados e a estrutura
dos dados. Por exemplo, digamos que você
precisa armazenar e compartilhar
informações sobre animais. Você pode criar
o seguinte código XML:
HTML X XML
 <?xml version="1.0"?>
<CACHORRO>
<NOME>Zeus</NOME>
<RACA>Rottweiler</RACA>
<IDADE>6</IDADE>
<PROPRIETARIO>REAL
MADRID</PROPRIETARIO>
</CACHORRO>
 Você pode ver que marcas XML possibilitam saber exatamente
que tipo de dados que você está analisando. Por exemplo, você
sabe dados sobre um animal, e você pode localizar facilmente o
animal nome, idade e assim por diante. A capacidade de criar
tags que definem quase qualquer estrutura de dados é o que
torna o XML "extensível".
 Mas não confunda as marcas desse código de exemplo com
marcas em um arquivo HTML. Por exemplo, se você cola essa
estrutura XML em um arquivo HTML e exibir o arquivo no seu
navegador, os resultados serão algo parecido com isto:
 Zeus Rottweiler 6 Real Madrid
 O navegador ignora as marcas XML e exibe apenas os dados.
HTML X XML

Mais conteúdo relacionado

Mais procurados (20)

Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
0151
01510151
0151
 
HTML & CSS ninja - Material do curso
HTML & CSS ninja - Material do cursoHTML & CSS ninja - Material do curso
HTML & CSS ninja - Material do curso
 
01-Introdução HTML - DDW II
01-Introdução HTML - DDW II01-Introdução HTML - DDW II
01-Introdução HTML - DDW II
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
Curso html basico_aula-001
Curso html basico_aula-001Curso html basico_aula-001
Curso html basico_aula-001
 
Introdução ao HTML
Introdução ao HTML Introdução ao HTML
Introdução ao HTML
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Disciplina de Laboratório WEB
Disciplina de Laboratório WEBDisciplina de Laboratório WEB
Disciplina de Laboratório WEB
 
Aula1
Aula1Aula1
Aula1
 
Xml
XmlXml
Xml
 
Aula02 webdesign
Aula02 webdesignAula02 webdesign
Aula02 webdesign
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTML
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
Curso de html - Como Criar Furmulários em HTML
Curso de html  - Como Criar Furmulários em HTMLCurso de html  - Como Criar Furmulários em HTML
Curso de html - Como Criar Furmulários em HTML
 
W3 c
W3 cW3 c
W3 c
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 

Destaque

Mobile App for Movie Ticket Booking Screenshots
Mobile App for Movie Ticket Booking ScreenshotsMobile App for Movie Ticket Booking Screenshots
Mobile App for Movie Ticket Booking ScreenshotsIniya Kannan
 
Online Movie Ticket Booking
Online Movie Ticket BookingOnline Movie Ticket Booking
Online Movie Ticket BookingAstha Patel
 
Online movie ticket reservation1
Online movie ticket reservation1Online movie ticket reservation1
Online movie ticket reservation1vidhipc
 
Qa 00501--online ticket-booking_pvr_cinemas
Qa 00501--online ticket-booking_pvr_cinemasQa 00501--online ticket-booking_pvr_cinemas
Qa 00501--online ticket-booking_pvr_cinemassokkary
 
Powerpoint Mini Project.Pdf
Powerpoint  Mini Project.PdfPowerpoint  Mini Project.Pdf
Powerpoint Mini Project.PdfSanea
 
E-Ticket presentation
E-Ticket presentationE-Ticket presentation
E-Ticket presentationSergio Santos
 
Ppt of mini project.
Ppt of mini project.Ppt of mini project.
Ppt of mini project.saikiran_gone
 
Online movie ticket booking
Online movie ticket bookingOnline movie ticket booking
Online movie ticket bookingmrinnovater007
 

Destaque (10)

Mobile App for Movie Ticket Booking Screenshots
Mobile App for Movie Ticket Booking ScreenshotsMobile App for Movie Ticket Booking Screenshots
Mobile App for Movie Ticket Booking Screenshots
 
Aula 03
Aula 03Aula 03
Aula 03
 
Online Movie Ticket Booking
Online Movie Ticket BookingOnline Movie Ticket Booking
Online Movie Ticket Booking
 
Online movie ticket reservation1
Online movie ticket reservation1Online movie ticket reservation1
Online movie ticket reservation1
 
Qa 00501--online ticket-booking_pvr_cinemas
Qa 00501--online ticket-booking_pvr_cinemasQa 00501--online ticket-booking_pvr_cinemas
Qa 00501--online ticket-booking_pvr_cinemas
 
Powerpoint Mini Project.Pdf
Powerpoint  Mini Project.PdfPowerpoint  Mini Project.Pdf
Powerpoint Mini Project.Pdf
 
E-Ticket presentation
E-Ticket presentationE-Ticket presentation
E-Ticket presentation
 
Ppt of mini project.
Ppt of mini project.Ppt of mini project.
Ppt of mini project.
 
Mini project ppt
Mini project pptMini project ppt
Mini project ppt
 
Online movie ticket booking
Online movie ticket bookingOnline movie ticket booking
Online movie ticket booking
 

Semelhante a Codificações basicas em HTML e XML

Html completo
Html completoHtml completo
Html completoEMSNEWS
 
Html e css
Html e cssHtml e css
Html e cssmaxrosan
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxJEANCLEVERSONPRATAS
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTMLjoaorvb
 
Apostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério FernandesApostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério FernandesMatheus Henrique
 
Apostila Html completa e simples
Apostila Html completa e simplesApostila Html completa e simples
Apostila Html completa e simplesLuiz Avelar
 
html basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptxhtml basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptxLeonardoPaz31
 
Webpages
WebpagesWebpages
WebpagesEMSNEWS
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 

Semelhante a Codificações basicas em HTML e XML (20)

Html completo
Html completoHtml completo
Html completo
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Html e css
Html e cssHtml e css
Html e css
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Html manual
Html manualHtml manual
Html manual
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 
Apostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério FernandesApostila de Html - Marcos Rogério Fernandes
Apostila de Html - Marcos Rogério Fernandes
 
Html - Apostila
Html - ApostilaHtml - Apostila
Html - Apostila
 
Apostila Html completa e simples
Apostila Html completa e simplesApostila Html completa e simples
Apostila Html completa e simples
 
XML - Parte 1
XML - Parte 1XML - Parte 1
XML - Parte 1
 
html basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptxhtml basico primeiro slide para iniciantes- 1.pptx
html basico primeiro slide para iniciantes- 1.pptx
 
Html manual
Html manualHtml manual
Html manual
 
Webpages
WebpagesWebpages
Webpages
 
Webpages
WebpagesWebpages
Webpages
 
Apostila html1
Apostila html1Apostila html1
Apostila html1
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 

Codificações basicas em HTML e XML

  • 1. CODIFICAÇÕES BÁSICAS HTML e XML Carolina Nunes Felipe Lamarão Gladson Brendo Hyago Cavalcante Renan Augusto
  • 2. HTML  O documento HTML sempre inicia com o que chamamos de estrutura básica. Esta estrutura é quase que imutável. Sempre será dessa forma e você sempre, sempre começará seu HTML começando por esse código. Geralmente os editores como o Sublime Text já tem atalhos para iniciar os documentos HTMLs com essa estrutura, logo, você não precisa se preocupar em decorá-la, mas é bom que faça.
  • 3.  <!DOCTYPE html>  <html lang="pt-br">  <head>  <title>Título da página</title>  <meta charset="utf-8">  </head>  <body>  Aqui vai o código HTML que fará seu site aparecer.  </body>  </html>  É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme a seguinte estrutura:  Definição do documento (doctype)  Cabeça (head)  Corpo (body) VEJA COMO ELA SE INICIA:
  • 4. DOCTYPE - DEFININDO O DOCUMENTO  Uma coisa importante: SEMPRE deve existir o doctype, que é este código <!DOCTYPE html>.  O doctype não é uma tag HTML, mas uma instrução para o navegador e outros programas que podem ler seu site. O código encontrado é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.
  • 5. HEAD  Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento tag head.
  • 6. BODY  Trata-se do documento em si, ou seja, a informação legível para o usuário/leitor do documento. É todo e qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, mini aplicativos embutidos, conteúdo multimídia, etc). Além disso, toda a apresentação de entrada de dados (formulários) também se aplica neste seção do documento. Na prática, o corpo do documento é delimitado pelo par de tags <body> e </body>.
  • 7. XML  É uma linguagem designada para descrever e estruturar informações.  Como uma linguagem de marcação, o XML se assemelha com a linguagem HTML, possuindo marcações para descrever dados.  Porém, estas marcações não são pré- definidas na linguagem, tornando possível a criação de marcações de acordo com necessidades específicas.
  • 8. HTML X XML  HTML (HyperText Markup Language) – Descreve aparência e ações.  XML (Extensible Markup Language) – Descreve a representação de algo.
  • 10.  XML permite criar qualquer marca que você precisa descrever seus dados e a estrutura dos dados. Por exemplo, digamos que você precisa armazenar e compartilhar informações sobre animais. Você pode criar o seguinte código XML: HTML X XML
  • 12.  Você pode ver que marcas XML possibilitam saber exatamente que tipo de dados que você está analisando. Por exemplo, você sabe dados sobre um animal, e você pode localizar facilmente o animal nome, idade e assim por diante. A capacidade de criar tags que definem quase qualquer estrutura de dados é o que torna o XML "extensível".  Mas não confunda as marcas desse código de exemplo com marcas em um arquivo HTML. Por exemplo, se você cola essa estrutura XML em um arquivo HTML e exibir o arquivo no seu navegador, os resultados serão algo parecido com isto:  Zeus Rottweiler 6 Real Madrid  O navegador ignora as marcas XML e exibe apenas os dados. HTML X XML