SlideShare ist ein Scribd-Unternehmen logo
1 von 26
Downloaden Sie, um offline zu lesen
Aula 06
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
  abaixo
• 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.

Weitere ähnliche Inhalte

Was ist angesagt?

HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3Israel Messias
 
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 - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2Israel Messias
 
HTML - Introdução
HTML - IntroduçãoHTML - Introdução
HTML - IntroduçãoGuto Xavier
 

Was ist angesagt? (6)

Front-end 001
Front-end 001Front-end 001
Front-end 001
 
HTML
HTMLHTML
HTML
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
 
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 - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
HTML - Introdução
HTML - IntroduçãoHTML - Introdução
HTML - Introdução
 

Andere mochten auch

Andere mochten auch (20)

Clase box y scribd
Clase box y scribdClase box y scribd
Clase box y scribd
 
Animales
AnimalesAnimales
Animales
 
Fiestas del ecuador
Fiestas del ecuadorFiestas del ecuador
Fiestas del ecuador
 
Rio 20 com chegamos ate aqui nf
Rio 20 com chegamos ate aqui nfRio 20 com chegamos ate aqui nf
Rio 20 com chegamos ate aqui nf
 
Tema neoliberalismo y globalización
Tema  neoliberalismo y globalizaciónTema  neoliberalismo y globalización
Tema neoliberalismo y globalización
 
Regulamento prova mar 2012 oficial
Regulamento prova mar 2012 oficialRegulamento prova mar 2012 oficial
Regulamento prova mar 2012 oficial
 
Licitação
LicitaçãoLicitação
Licitação
 
Wall e el robot limpia ventanas
Wall e el robot limpia ventanasWall e el robot limpia ventanas
Wall e el robot limpia ventanas
 
Medios de comunicacionkfkfkf
Medios de comunicacionkfkfkfMedios de comunicacionkfkfkf
Medios de comunicacionkfkfkf
 
Informe red.es
Informe red.esInforme red.es
Informe red.es
 
defcon (websocial)
defcon (websocial)defcon (websocial)
defcon (websocial)
 
O conhecimento da_lingua_desenv_consciencia_fonologica.pdf
O conhecimento da_lingua_desenv_consciencia_fonologica.pdfO conhecimento da_lingua_desenv_consciencia_fonologica.pdf
O conhecimento da_lingua_desenv_consciencia_fonologica.pdf
 
La dialectoca del chacal e imbunche
La dialectoca del chacal e imbuncheLa dialectoca del chacal e imbunche
La dialectoca del chacal e imbunche
 
Medios de comunicacionkfkfkf
Medios de comunicacionkfkfkfMedios de comunicacionkfkfkf
Medios de comunicacionkfkfkf
 
Bitmap & vectorial
Bitmap & vectorialBitmap & vectorial
Bitmap & vectorial
 
Bioética santa barbara
Bioética santa barbaraBioética santa barbara
Bioética santa barbara
 
Programas
ProgramasProgramas
Programas
 
Excel geral
Excel geralExcel geral
Excel geral
 
Fotos
FotosFotos
Fotos
 
El mercader de venecia
El mercader de veneciaEl mercader de venecia
El mercader de venecia
 

Ähnlich wie Aula 06 HTML - Introdução à linguagem HTML

Ähnlich wie Aula 06 HTML - Introdução à linguagem HTML (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
 
Aula 05
Aula 05Aula 05
Aula 05
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Html
HtmlHtml
Html
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Manual HTML
Manual HTMLManual HTML
Manual 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
 
HTML, parte 1
HTML, parte 1HTML, parte 1
HTML, parte 1
 
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
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
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
 
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
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 

Mehr von 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
 

Aula 06 HTML - Introdução à linguagem HTML

  • 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. • Abrir o bloco de notas e fazer as atividades de exemplos abaixo
  • 24.
  • 25.
  • 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.