Aula:   06   Data   8/12/2012
                            :




  Professor:

  Washington
  Silva
Turma:
Sumário
 O que é HTML
 O que são TAGS

 Visualizando o documento em HTML

 Principais TAGS

 Formatação




           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
        Lembrando que a grande maioria trabalha em
         pares.



           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

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




               Instrutor: Washington Silva
FORMATAÇÃO
                        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.




         Instrutor: Washington Silva
FORMATAÇÃO
   Mais algumas tags
             ATRIBUTOS DO CORPO


       <body bgcolor=?>        Cor de fundo.


        <body text=?>          Cor de texto.
FORMATAÇÃO

                        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.
Formatação
                   GRAFISMO


<img src=“imagem.jpg">   Insere uma imagem.


<img src=“imagem.jpg“    Alinha uma imagem em
       align=?>          relação ao resto do texto.

<img src=“imagem.jpg“
      border=?>
                         Define a borda da imagem.


  <img src=“ imagen"     Define o tamanho da exibição da
     width=“ %">         Imagem.
EXERCÍCIO
 Vamos montar uma nova pagina
 Inserir texto fomatar cor, fonte, tamanho da fonte

 Inserir 15 imagens

 Inserir 10 gif animados

Não quero que reste nenhuma duvida sobre inserir
  imagem na pagina de vcs .....
ATIVIDADES
   Faça os exemplos
ATIVIDADE
   Faça conforme o texto abaixo siga as orientações
    cor sublinhado itálico
ATIVIDADE 2
 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
Ppt web.pptx 11 e 12

Ppt web.pptx 11 e 12

  • 1.
    Aula: 06 Data 8/12/2012 : Professor: Washington Silva Turma:
  • 3.
    Sumário  O queé HTML  O que são TAGS  Visualizando o documento em HTML  Principais TAGS  Formatação 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  Lembrando que a grande maioria trabalha em pares. 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 – NAPRÁ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 – NAPRÁTICA Instrutor: Washington Silva
  • 11.
    TAGS – NAPRÁTICA Instrutor: Washington Silva
  • 12.
    TAGS – NAPRÁTICA  <HTML>  <HEAD>  <TITLE> Minha primeira Página </TITLE>  </HEAD> Instrutor: Washington Silva
  • 13.
    TAGS – NAPRÁ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
  • 18.
  • 19.
    TAG - QUEBRADE 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 - QUEBRADE 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 - QUEBRADE 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 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 Instrutor: Washington Silva
  • 23.
    FORMATAÇÃO 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. Instrutor: Washington Silva
  • 24.
    FORMATAÇÃO  Mais algumas tags ATRIBUTOS DO CORPO <body bgcolor=?> Cor de fundo. <body text=?> Cor de texto.
  • 25.
    FORMATAÇÃO 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.
  • 26.
    Formatação GRAFISMO <img src=“imagem.jpg"> Insere uma imagem. <img src=“imagem.jpg“ Alinha uma imagem em align=?> relação ao resto do texto. <img src=“imagem.jpg“ border=?> Define a borda da imagem. <img src=“ imagen" Define o tamanho da exibição da width=“ %"> Imagem.
  • 27.
    EXERCÍCIO  Vamos montaruma nova pagina  Inserir texto fomatar cor, fonte, tamanho da fonte  Inserir 15 imagens  Inserir 10 gif animados Não quero que reste nenhuma duvida sobre inserir imagem na pagina de vcs .....
  • 28.
    ATIVIDADES  Faça os exemplos
  • 31.
  • 32.
    Faça conforme o texto abaixo siga as orientações cor sublinhado itálico
  • 33.
    ATIVIDADE 2  Realizaruma 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