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

Ambiente web

  • 1.
  • 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 podeser 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>
  • 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>
  • 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>
  • 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 osexemplos
  • 28.
    • Faça conformeo texto abaixo siga as orientações cor sublinhado itálico
  • 29.
    • Sua pesquisadeve 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