SlideShare a Scribd company logo
1 of 29
05                    20/11/2012




Instrutor: Washington Silva
Sumário
•   O que é HTML
•   O que são TAGS
•   Visualizando o documento em HTML
•   Principais TAGS




           Instrutor: Washington Silva
O que é HTML?
• HTML – é uma linguagem de
  marcação de hipertexto.
• H - Hyper
• T – Text
• M - Markup
• L – Language



        Instrutor: Washington Silva
• HTML pode ser feito em qualquer
  editor de texto, até mesmo o simples
  Bloco de Notas:

• Clique em:
• Botão Iniciar > Executar > NotePad




          Instrutor: Washington Silva
TAGS
• 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 < />



          Instrutor: Washington Silva
Tags

• <Comando>          Seu Texto    </Comando>




    Instrutor: Washington Silva
Tags - Principais
   <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.



             Instrutor: Washington Silva
Tags – Na prática
• <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>

         Instrutor: Washington Silva
Tags – Na prática




   Instrutor: Washington Silva
Tags – Na prática




Instrutor: Washington Silva
Tags – Na prática
•   <HTML>
•   <HEAD>
•   <TITLE> Minha primeira Página </TITLE>
•   </HEAD>




             Instrutor: Washington Silva
Tags – Na prática

•   <BODY>
•   Sejam bem vindo ao mundo HTML!
•   </BODY>
•   </HTML>




         Instrutor: Washington Silva
Tags - Principais
• <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>




           Instrutor: Washington Silva
•   <H1>
•   Cabeçalho de tamanho 1
•   <H2>
•   Cabeçalho de tamanho 2
•   <H3>
•   Cabeçalho de tamanho 3
•   <H6>
•   Cabeçalho de tamanho 6


       Instrutor: Washington Silva
TAG – Parágrafo <P>
• <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>



            Instrutor: Washington Silva
TAG – Parágrafo <P>




     Instrutor: Washington Silva
Instrutor: Washington Silva
TAG - QUEBRA DE LINHA <BR>

• 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




          Instrutor: Washington Silva
TAG - QUEBRA DE LINHA <BR>
  • <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>


              Instrutor: Washington Silva
TAG - QUEBRA DE LINHA <BR>




      Instrutor: Washington Silva
Formatação            Sintaxe                            Função
NEGRITO        <b>texto</b>                 Aplica o estilo negrito
ITÁLICO        <I>texto</I>                 Aplica o estilo itálico
SUBLINHAD      <u>texto</u>                 Aplica um sublinhado
  O
SMALL          <small>texto</sm             Reduz e altera a fonte
                 all>
BIG            <big>texto</big>             Aumenta a fonte e aplica negrito
SOBRESCRIT <sup>texto>/sup>                 Eleva o texto e diminui seu
  O                                            corpo
SUBSCRITO      <sub>texto</sub>             Rebaixa o texto e diminui seu
                                               corpo



              Instrutor: Washington Silva
Instrutor: Washington Silva
Instrutor: Washington Silva
Atividades
• Abrir o bloco de notas e fazer as
  atividades abaixo




          Instrutor: Washington Silva
Instrutor: Washington Silva
Instrutor: Washington Silva
Instrutor: Washington Silva
Atividade 2
• 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.




        Instrutor: Washington Silva

More Related Content

Viewers also liked

Viewers also liked (9)

การพัฒนาบุคลากร
การพัฒนาบุคลากรการพัฒนาบุคลากร
การพัฒนาบุคลากร
 
A propostade ecoparceria
A propostade ecoparceriaA propostade ecoparceria
A propostade ecoparceria
 
3 primera parte quimica
3 primera parte quimica3 primera parte quimica
3 primera parte quimica
 
Ressonâncias
RessonânciasRessonâncias
Ressonâncias
 
Resolucao 095 2009 regulamento de estagio letras
Resolucao  095 2009 regulamento de estagio letrasResolucao  095 2009 regulamento de estagio letras
Resolucao 095 2009 regulamento de estagio letras
 
Ufbagab mat 2013
Ufbagab mat 2013Ufbagab mat 2013
Ufbagab mat 2013
 
Linguística ii
Linguística iiLinguística ii
Linguística ii
 
5 lições de empreendedorismo
5 lições de empreendedorismo5 lições de empreendedorismo
5 lições de empreendedorismo
 
Apresentação sebrae 22 agosto
Apresentação sebrae 22 agostoApresentação sebrae 22 agosto
Apresentação sebrae 22 agosto
 

Similar to Introdução ao HTML

Similar to Introdução ao HTML (20)

Ppt web.pptx 07 e 08
Ppt web.pptx 07 e 08Ppt web.pptx 07 e 08
Ppt web.pptx 07 e 08
 
Desenvolvimento sites html
Desenvolvimento sites htmlDesenvolvimento sites html
Desenvolvimento sites html
 
Ambiente web
Ambiente webAmbiente web
Ambiente web
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
PW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdfPW00 - Programação Web html e estilo CSS.pdf
PW00 - Programação Web html e estilo CSS.pdf
 
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
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Html
HtmlHtml
Html
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
HTML, parte 1
HTML, parte 1HTML, parte 1
HTML, parte 1
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
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
 

More from 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
 

Introdução ao HTML

  • 1. 05 20/11/2012 Instrutor: Washington Silva
  • 2.
  • 3. Sumário • O que é HTML • O que são TAGS • Visualizando o documento em HTML • Principais TAGS Instrutor: Washington Silva
  • 4. O que é HTML? • HTML – é uma linguagem de marcação de hipertexto. • H - Hyper • T – Text • M - Markup • L – Language Instrutor: Washington Silva
  • 5. • HTML pode ser feito em qualquer editor de texto, até mesmo o simples Bloco de Notas: • Clique em: • Botão Iniciar > Executar > NotePad Instrutor: Washington Silva
  • 6. TAGS • 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 < /> Instrutor: Washington Silva
  • 7. Tags • <Comando> Seu Texto </Comando> Instrutor: Washington Silva
  • 8. Tags - Principais <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. Instrutor: Washington Silva
  • 9. Tags – Na prática • <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> Instrutor: Washington Silva
  • 10. Tags – Na prática Instrutor: Washington Silva
  • 11. Tags – Na prática Instrutor: Washington Silva
  • 12. Tags – Na prática • <HTML> • <HEAD> • <TITLE> Minha primeira Página </TITLE> • </HEAD> Instrutor: Washington Silva
  • 13. Tags – Na prática • <BODY> • Sejam bem vindo ao mundo HTML! • </BODY> • </HTML> Instrutor: Washington Silva
  • 14. Tags - Principais • <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> Instrutor: Washington Silva
  • 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 Instrutor: Washington Silva
  • 16. TAG – Parágrafo <P> • <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> Instrutor: Washington Silva
  • 17. TAG – Parágrafo <P> Instrutor: Washington Silva
  • 19. TAG - QUEBRA DE LINHA <BR> • 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 Instrutor: Washington Silva
  • 20. TAG - QUEBRA DE LINHA <BR> • <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> Instrutor: Washington Silva
  • 21. TAG - QUEBRA DE LINHA <BR> Instrutor: Washington Silva
  • 22. Formatação Sintaxe Função NEGRITO <b>texto</b> Aplica o estilo negrito ITÁLICO <I>texto</I> Aplica o estilo itálico SUBLINHAD <u>texto</u> Aplica um sublinhado O SMALL <small>texto</sm Reduz e altera a fonte all> BIG <big>texto</big> Aumenta a fonte e aplica negrito SOBRESCRIT <sup>texto>/sup> Eleva o texto e diminui seu O corpo SUBSCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo Instrutor: Washington Silva
  • 25. Atividades • Abrir o bloco de notas e fazer as atividades abaixo Instrutor: Washington Silva
  • 29. Atividade 2 • 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. Instrutor: Washington Silva