SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Aula 08
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 grande parte 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
• Sua pesquisa deve contes os seguintes tópicos
• O que é html
• Quando surgiu html
• Faça uma lista com as tag mais comuns e importantes
  do html
• Faça uma pagina em html com todo o conteúdo
  pesquisado acima

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

HTML
HTMLHTML
HTML
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Introdução a HTML5 - Tags e Conceitos
Introdução a HTML5 - Tags e ConceitosIntrodução a HTML5 - Tags e Conceitos
Introdução a HTML5 - Tags e Conceitos
 
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
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
UFCD 0754 - Processador de Texto
UFCD 0754  - Processador de TextoUFCD 0754  - Processador de Texto
UFCD 0754 - Processador de Texto
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
HTML, parte 1
HTML, parte 1HTML, parte 1
HTML, parte 1
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1HTML - HyperText Markup Language - 1
HTML - HyperText Markup Language - 1
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Minicurso HTML
Minicurso HTMLMinicurso HTML
Minicurso HTML
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
HTML introdução
HTML  introduçãoHTML  introdução
HTML introdução
 
Css
Css   Css
Css
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
Html e css
Html e cssHtml e css
Html e css
 
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 Ambiente web (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
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
426 curso html
426 curso html426 curso html
426 curso html
 
Aula 2 internet
Aula 2   internetAula 2   internet
Aula 2 internet
 
Html
HtmlHtml
Html
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
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
 
Html
HtmlHtml
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
 
HC - HTML - CSS.pdf
HC - HTML - CSS.pdfHC - HTML - CSS.pdf
HC - HTML - CSS.pdf
 

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
 

Ambiente web

  • 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 grande parte 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. • Faça os exemplos
  • 25.
  • 26.
  • 27.
  • 28. • Faça conforme o texto abaixo siga as orientações cor sublinhado itálico
  • 29. • Sua pesquisa deve contes os seguintes tópicos • O que é html • Quando surgiu html • Faça uma lista com as tag mais comuns e importantes do html • Faça uma pagina em html com todo o conteúdo pesquisado acima