SlideShare una empresa de Scribd logo
1 de 26
Aula 09
Washington Silva
Sumário
•   O que é HTML
•   O que são TAGS
•   Visualizando o documento em HTML
•   Principais TAGS
•   HTML – é uma linguagem de marcação de hipertexto.
•   H - Hyper
•   T – Text
•   M - Markup
•   L – Language
• HTML pode ser feito em qualquer editor de texto, até
  mesmo o simples Bloco de Notas:

• Clique em:
• Botão Iniciar > Executar > NotePad
• Tag é uma palavra-chave (comando) que define um item
  (imagens, texto, hyperLink, etc.) que irá fazer parte da
  página.




      As tags são identificadas por
      estarem entre os sinais < > e < />
• <Comando>    Seu Texto

  </Comando>
<HTML> </HTML>
    Marca o início e o fim do documento

   <HEAD> </HEAD>
     Marca o início e o fim do Cabeçalho


  <TITLE> </TITLE>
     Mostra o título na barra de
     título

<BODY> </BODY>
  Determina o que vai ser o “corpo” do
  programa.
• <HTML>
• <HEAD>
• <TITLE> Minha primeira Aula de HTML
• </TITLE>
• </HEAD>
• <BODY>
• Bom dia a todos, quem esta com sono levanta a
  mão ..
• </BODY>
• </HTML>
•   <HTML>
•   <HEAD>
•   <TITLE> Minha primeira Página </TITLE>
•   </HEAD>
•   <BODY>
•   Sejam bem vindo ao mundo HTML!
•   </BODY>
•   </HTML>
• <BODY>
   <H1> Cabeçalho de tamanho 1 </H1>
   <H2> Cabeçalho de tamanho 2 </H2>
   <H3> Cabeçalho de tamanho 3 </H3>
   <H6> Cabeçalho de tamanho 6</H6>
 </BODY>
•   <H1>
•   Cabeçalho de tamanho 1
•   <H2>
•   Cabeçalho de tamanho 2
•   <H3>
•   Cabeçalho de tamanho 3
•   <H6>
•   Cabeçalho de tamanho 6
•   <HTML>
•   <HEAD>
•   <TITLE> Minha primeira Página HEHEHE </TITLE>
•   </HEAD>
•   <BODY>
•   Sejam bem vindo ao mundo HTML, <P>agora viajaremos
•   <P>no html<P>!!!!!
•   </BODY>
•   </HTML>
• O comando <br> faz uma quebra de linha. Este comando
  também insere uma linha em branco no seu local ou na
  linha seguinte á qual ele foi inserido
• <HTML>
• <HEAD>
• <TITLE> Minha primeira página HTML </TITLE>
• </HEAD>
• <BODY>
• Quando um comando <BR> é inserido em um local do
  programa, o browser irá<BR> fazer uma quebra de
  linha, <BR> posiciona-se na linha seguinte ao
  comando.<BR>
• </BODY>
• </HTML>
Formatação          Sintaxe                           Função

NEGRITO        <b>texto</b>           Aplica o estilo negrito

ITÁLICO        <I>texto</I>           Aplica o estilo itálico

SUBLINHADO     <u>texto</u>           Aplica um sublinhado


SMALL          <small>texto</small>   Reduz e altera a fonte


BIG            <big>texto</big>       Aumenta a fonte e aplica negrito

SOBRESCRITO    <sup>texto>/sup>       Eleva o texto e diminui seu corpo


SUBSCRITO      <sub>texto</sub>       Rebaixa o texto e diminui seu corpo
• Abrir o bloco de notas e fazer as atividades de exemplos
  feitas aqui anteriormente!
• Fazer uma pesquisa na net sobre algum assunto que lhe
  interesse. Onde você fará uma pagina. Com os textos
  escolhidos
• E que na aula que vem colocaremos imagens e links.

Más contenido relacionado

La actualidad más candente

Copy of drupal camp campinas 2016 drupal para administradores (marcelo soares)
Copy of drupal camp campinas 2016   drupal para administradores (marcelo soares)Copy of drupal camp campinas 2016   drupal para administradores (marcelo soares)
Copy of drupal camp campinas 2016 drupal para administradores (marcelo soares)Marcelo Soares
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3Israel Messias
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2Israel Messias
 

La actualidad más candente (7)

Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
HTML
HTMLHTML
HTML
 
Copy of drupal camp campinas 2016 drupal para administradores (marcelo soares)
Copy of drupal camp campinas 2016   drupal para administradores (marcelo soares)Copy of drupal camp campinas 2016   drupal para administradores (marcelo soares)
Copy of drupal camp campinas 2016 drupal para administradores (marcelo soares)
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 

Destacado (20)

D fdatos
D fdatosD fdatos
D fdatos
 
Primera parte cuestionario
Primera parte cuestionarioPrimera parte cuestionario
Primera parte cuestionario
 
Metasip
MetasipMetasip
Metasip
 
Avaliação de windows 5 8
Avaliação de windows 5 8Avaliação de windows 5 8
Avaliação de windows 5 8
 
Andrea
AndreaAndrea
Andrea
 
Fotos
FotosFotos
Fotos
 
Mapas
MapasMapas
Mapas
 
Ufba12mat1
Ufba12mat1Ufba12mat1
Ufba12mat1
 
Apresentação Institucional
Apresentação InstitucionalApresentação Institucional
Apresentação Institucional
 
10 reglas para diseñar un sitio web móvil
10 reglas para diseñar un sitio web móvil10 reglas para diseñar un sitio web móvil
10 reglas para diseñar un sitio web móvil
 
Coursera certificate
Coursera certificateCoursera certificate
Coursera certificate
 
Ufba11qui2
Ufba11qui2Ufba11qui2
Ufba11qui2
 
Tema neoliberalismo y globalización
Tema  neoliberalismo y globalizaciónTema  neoliberalismo y globalización
Tema neoliberalismo y globalización
 
Higiene en jovenes 2.0
Higiene en jovenes 2.0Higiene en jovenes 2.0
Higiene en jovenes 2.0
 
Proyecto en el ámbito legal
Proyecto en el ámbito legalProyecto en el ámbito legal
Proyecto en el ámbito legal
 
N&c 02
N&c 02N&c 02
N&c 02
 
Bases de datos relacionales
Bases de datos relacionalesBases de datos relacionales
Bases de datos relacionales
 
Ingrina - Sophia de Mello Breyner
Ingrina - Sophia de Mello BreynerIngrina - Sophia de Mello Breyner
Ingrina - Sophia de Mello Breyner
 
Deportes fútbol
Deportes fútbolDeportes fútbol
Deportes fútbol
 
Schmdinger "Der Fenstergucker" - 2. Ausgabe unserer Kundenzeitschrift
Schmdinger "Der Fenstergucker" - 2. Ausgabe unserer KundenzeitschriftSchmdinger "Der Fenstergucker" - 2. Ausgabe unserer Kundenzeitschrift
Schmdinger "Der Fenstergucker" - 2. Ausgabe unserer Kundenzeitschrift
 

Similar a Sistemas operacionais html 09

Similar a Sistemas operacionais html 09 (20)

Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Html
HtmlHtml
Html
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
HTML - Formatação de Textos
HTML - Formatação de TextosHTML - Formatação de Textos
HTML - Formatação de Textos
 
Manual HTML
Manual HTMLManual HTML
Manual HTML
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
HC - HTML - CSS.pdf
HC - HTML - CSS.pdfHC - HTML - CSS.pdf
HC - HTML - CSS.pdf
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
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
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
 

Más de Washington Oliveira (20)

Prova
ProvaProva
Prova
 
Aula 08
Aula 08Aula 08
Aula 08
 
Virus
VirusVirus
Virus
 
Ppt web.pptx 04
Ppt web.pptx 04Ppt web.pptx 04
Ppt web.pptx 04
 
Aula 3
Aula 3Aula 3
Aula 3
 
Aula 02 nova
Aula 02 novaAula 02 nova
Aula 02 nova
 
Ppt web.pptx 02
Ppt web.pptx 02Ppt web.pptx 02
Ppt web.pptx 02
 
Ppt web.pptx 02
Ppt web.pptx 02Ppt web.pptx 02
Ppt web.pptx 02
 
Aula 1
Aula 1Aula 1
Aula 1
 
Aula 03
Aula 03Aula 03
Aula 03
 
Aula 02
Aula 02Aula 02
Aula 02
 
Aula 01
Aula 01Aula 01
Aula 01
 
Word 16
Word 16Word 16
Word 16
 
Aula 07
Aula 07Aula 07
Aula 07
 
Atividade revisão
Atividade revisãoAtividade revisão
Atividade revisão
 
Excel 7 e 8
Excel 7 e 8Excel 7 e 8
Excel 7 e 8
 
Aula06
Aula06Aula06
Aula06
 
Aula 05
Aula 05Aula 05
Aula 05
 
Aula 04
Aula 04Aula 04
Aula 04
 
Ppt web.pptx 03 e 04
Ppt web.pptx 03 e 04Ppt web.pptx 03 e 04
Ppt web.pptx 03 e 04
 

Sistemas operacionais html 09

  • 2.
  • 3. Sumário • O que é HTML • O que são TAGS • Visualizando o documento em HTML • Principais TAGS
  • 4. HTML – é uma linguagem de marcação de hipertexto. • H - Hyper • T – Text • M - Markup • L – Language
  • 5. • HTML pode ser feito em qualquer editor de texto, até mesmo o simples Bloco de Notas: • Clique em: • Botão Iniciar > Executar > NotePad
  • 6. • Tag é uma palavra-chave (comando) que define um item (imagens, texto, hyperLink, etc.) que irá fazer parte da página. As tags são identificadas por estarem entre os sinais < > e < />
  • 7. • <Comando> Seu Texto </Comando>
  • 8. <HTML> </HTML> Marca o início e o fim do documento <HEAD> </HEAD> Marca o início e o fim do Cabeçalho <TITLE> </TITLE> Mostra o título na barra de título <BODY> </BODY> Determina o que vai ser o “corpo” do programa.
  • 9. • <HTML> • <HEAD> • <TITLE> Minha primeira Aula de HTML • </TITLE> • </HEAD> • <BODY> • Bom dia a todos, quem esta com sono levanta a mão .. • </BODY> • </HTML>
  • 10.
  • 11.
  • 12. <HTML> • <HEAD> • <TITLE> Minha primeira Página </TITLE> • </HEAD>
  • 13. <BODY> • Sejam bem vindo ao mundo HTML! • </BODY> • </HTML>
  • 14. • <BODY> <H1> Cabeçalho de tamanho 1 </H1> <H2> Cabeçalho de tamanho 2 </H2> <H3> Cabeçalho de tamanho 3 </H3> <H6> Cabeçalho de tamanho 6</H6> </BODY>
  • 15. <H1> • Cabeçalho de tamanho 1 • <H2> • Cabeçalho de tamanho 2 • <H3> • Cabeçalho de tamanho 3 • <H6> • Cabeçalho de tamanho 6
  • 16. <HTML> • <HEAD> • <TITLE> Minha primeira Página HEHEHE </TITLE> • </HEAD> • <BODY> • Sejam bem vindo ao mundo HTML, <P>agora viajaremos • <P>no html<P>!!!!! • </BODY> • </HTML>
  • 17.
  • 18.
  • 19. • O comando <br> faz uma quebra de linha. Este comando também insere uma linha em branco no seu local ou na linha seguinte á qual ele foi inserido
  • 20. • <HTML> • <HEAD> • <TITLE> Minha primeira página HTML </TITLE> • </HEAD> • <BODY> • Quando um comando <BR> é inserido em um local do programa, o browser irá<BR> fazer uma quebra de linha, <BR> posiciona-se na linha seguinte ao comando.<BR> • </BODY> • </HTML>
  • 21.
  • 22. Formatação Sintaxe Função NEGRITO <b>texto</b> Aplica o estilo negrito ITÁLICO <I>texto</I> Aplica o estilo itálico SUBLINHADO <u>texto</u> Aplica um sublinhado SMALL <small>texto</small> Reduz e altera a fonte BIG <big>texto</big> Aumenta a fonte e aplica negrito SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo SUBSCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo
  • 23.
  • 24.
  • 25. • Abrir o bloco de notas e fazer as atividades de exemplos feitas aqui anteriormente!
  • 26. • Fazer uma pesquisa na net sobre algum assunto que lhe interesse. Onde você fará uma pagina. Com os textos escolhidos • E que na aula que vem colocaremos imagens e links.