SlideShare ist ein Scribd-Unternehmen logo
1 von 30
Aula 07
Washington Silva
Sumário
•   O que é HTML
•   O que são TAGS
•   Visualizando o documento em HTML
•   Principais TAGS
•   Formatação
•   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
• Lembrando que a grande maioria trabalha em pares.



      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


Cor da fonte    <font color=?></font>            Altera a cor da fonte
TEXTO

     <b></b>                      Texto negrito.
      <i></i>                   Texto em itálico.
                              Texto estilo máquina de
     <tt></tt>             escrever, mono espaçamento.
 <font size=?></font>           Tamanho das letras.

<font color=?></font>            Cor das letras.
• Faça os exemplos
• Faça conforme o texto abaixo siga as orientações cor
  sublinhado itálico
•   Realizar uma pesquisa sobre css
•   Sua pesquisa deve contes os seguintes tópicos
•   O que é css
•   Quando surgiu css
•   Importância em utilizar css
•   Quais as diferenças entre HTML e o CSS

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (11)

HTML - Introdução
HTML - IntroduçãoHTML - Introdução
HTML - Introdução
 
HTML, parte 1
HTML, parte 1HTML, parte 1
HTML, parte 1
 
HTML
HTMLHTML
HTML
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Css
Css   Css
Css
 
workshop Blog Wordpress passo a passo
workshop Blog Wordpress passo a passoworkshop Blog Wordpress passo a passo
workshop Blog Wordpress passo a passo
 
CSS Modules
CSS ModulesCSS Modules
CSS Modules
 
HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1
 
Unidade 2 - Processador de texto (Aula 1 e 2)
Unidade 2 - Processador de texto (Aula 1 e 2)Unidade 2 - Processador de texto (Aula 1 e 2)
Unidade 2 - Processador de texto (Aula 1 e 2)
 

Ähnlich wie Desenvolvimento sites 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
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
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
 
Aula 05
Aula 05Aula 05
Aula 05
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
Html
HtmlHtml
Html
 
Aula 2 internet
Aula 2   internetAula 2   internet
Aula 2 internet
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
Web02
Web02Web02
Web02
 
Aula 02
Aula 02Aula 02
Aula 02
 
Apostila+de+html
Apostila+de+htmlApostila+de+html
Apostila+de+html
 
Apostila HTML
Apostila HTMLApostila HTML
Apostila HTML
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Apostila Html completa e simples
Apostila Html completa e simplesApostila Html completa e simples
Apostila Html completa e simples
 

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
 

Desenvolvimento sites html

  • 2.
  • 3. Sumário • O que é HTML • O que são TAGS • Visualizando o documento em HTML • Principais TAGS • Formatação
  • 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 • Lembrando que a grande maioria trabalha em pares. 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 Cor da fonte <font color=?></font> Altera a cor da fonte
  • 23. TEXTO <b></b> Texto negrito. <i></i> Texto em itálico. Texto estilo máquina de <tt></tt> escrever, mono espaçamento. <font size=?></font> Tamanho das letras. <font color=?></font> Cor das letras.
  • 24.
  • 25. • Faça os exemplos
  • 26.
  • 27.
  • 28.
  • 29. • Faça conforme o texto abaixo siga as orientações cor sublinhado itálico
  • 30. Realizar uma pesquisa sobre css • Sua pesquisa deve contes os seguintes tópicos • O que é css • Quando surgiu css • Importância em utilizar css • Quais as diferenças entre HTML e o CSS