SlideShare une entreprise Scribd logo
1  sur  9
Télécharger pour lire hors ligne
Esc. Sec. José Belchior Viegas                                             2009/2010


                                 Resumo HTML
Tags Básicos existem 4 Tag que quando quiserem criar uma página vocês iram
utilizar quase sempre:
     1. <HTML> serve para indicar ao Browser que se trata de um documento em
         HTML;
     2. <HEAD> O documento está dividido em duas partes, esta é
         cabeça/cabeçalho..;
     3. <BODY> …a segunda parte é o corpo do texto;
     4. <TITLE> O elemento principal da/o cabeça/cabeçalho é o titulo do
         documento, é um elemento importante pois o título vai aparecer na barra de
         título do nosso browser.
     É preciso não esquecer que quando utilizarem estes tag’s têm sempre que fechar as
     mesmas, ou seja, vão ter sempre de utilizar as seguintes tag’s </HTML>,
     </HEAD>; <TITLE>; <BODY>, no fundo só têm de se lembrar que estas tag’s têm
     sempre que ser acompanhadas pelo seu par.

   Isto quer dizer, que quando queremos criar uma nova página, a partida vamos ter de
   utilizar pelo menos o seguinte código:

         <HTML>
           <HEAD>
                <TITLE> Aqui escreve-mos o título </TITLE>
           </HEAD>

            <BODY>
            Aqui no corpo do programa inseri-mos o resto do código para que
            possa ser visto o que deseja-mos (Listas, texto, imagens, vídeos, etc)
            </BODY>
         </HTML>

                                                                            Quadro 1

   Muito importante no final temos de gravar sempre o ficheiro com o nome
   seguido de .html ou .htm

   Comentários serve para que a mesma fique só visível para quem tem acesso ao
   código-fonte, tudo o que escrever-mos entre <! > ficara invisível no browser.

   Títulos no texto podemos utilizar até seis níveis de título (<H1>,
   <H2>….<H6>) para realçar-mos informação embora o H5 e H6 muitas vezes
   deixem de ser perceptíveis. Ex: <H1> Título da página de carros XPto </H1>

   Parágrafos para indicar o inicio de um novo parágrafo utilizamos o tag <p>.
   Ex: Olá estão bons <P>

   Linhas para elaborar-mos uma quebra de linha utilizamos o <BR>.
   Ex: Espero bem que sim <BR>




Prof. Cláudio Pedras                 08-01-2010                         Página 1 de 9
Esc. Sec. José Belchior Viegas                                             2009/2010

   Listas o inicio de cada linha é indicado pelo tag <UL> sendo que o final da
   mesma é indicado por o tag </UL>, entre os dois é que vamos inserir tantos <LI>
   consoante a nossa necessidade de item que queremos utilizar, ou seja, se queremos 2
   vamos utilizar 2, se queremos três vamos utilizar três, por ai fora.
   Ex:

     <H3>Tabela classificativa da Liga Sagres<H3>
          <UL>
                 <LI> Sp. Braga
                 <LI> S.L. Benfica
                 <LI> F. C. Porto
                 <LI> Sporting C. P.gal
          </UL>

                                                                             Quadro 2

Então agora vamos lá fazer uma nova página:
   1. Vamos abrir um novo documento no “wordpad” (para aceder ao WordPad
       vamos clicar em iniciar todos os programas acessórios WordPad).
   2. Agora vamos inserir o código do quadro 1.
   3. Guardar o documento nos meus documentos com o seguinte nome “Ex2 Liga
       Sagres.html” e fecha-lo.
   4. Agora vamos clicar duas vezes no mesmo documento.
   O documento deve aparecer assim:




              A vermelho o que escreve-mos entre as tag’s: <TITLE> </TITLE>
              E em baixo o que escreve-mos entre as tag’s: <BODY> </BODY>

   5. Como o que escreve-mos no BODY é apenas uma informação vamos pô-la
      como um comentário para que a mesma fique só visível para quem tem acesso
      ao código-fonte. (vamos ter que abrir o documento com o botão direito do rato,
      abrir com .., e depois escolher o programa “wordpad”).

           <BODY>
           <! Aqui no corpo do programa inseri-mos o resto do código para
           que possa ser visto o que deseja-mos (Listas, texto, imagens, vídeos,
           etc) >
           </BODY>

   Depois da alteração vamos guardar o documento e de seguida voltar a clicar duas
   vezes no mesmo.

   E página vai passar a ficar desta forma:


Prof. Cláudio Pedras                  08-01-2010                        Página 2 de 9
Esc. Sec. José Belchior Viegas                                             2009/2010




   Ou seja, em branco e o título vais se manter o mesmo (Aqui escreve-mos o título)
   6. A seguir no mesmo documento vamos mudar o título do documento para:
      “Primeira divisão do futebol português”
   Ou seja, vamos fazer a seguinte alteração e gravar:

              <HEAD>
                   <TITLE> Primeira divisão do futebol português </TITLE>
              </HEAD>


   7. Se ainda tivermos o documento aberto com o browser basta clicar na tecla “F5”
      e verificar a alteração.
   Passa a ficar assim:




   8.     Vamos agora inserir alguma informação no corpo do programa:
        <BODY>
             <H3>Tabela classificativa da Liga Sagres<H3>
                  <UL>
                         <LI> Sp. Braga
                         <LI> S.L. Benfica
                         <LI> F. C. Porto
                         <LI> Sporting C. P.gal
                  </UL>
        </BODY>

   Vai ficar assim:




Prof. Cláudio Pedras                 08-01-2010                         Página 3 de 9
Esc. Sec. José Belchior Viegas                                    2009/2010




   9. Alinhamento para mudar o alinhamento padrão vamos adicionar o atributo
      ALIGN dentro das tags que marcam os títulos e parágrafos.
   Ex:
             <H3 ALIGN=CENTER> Tabela classificativa da Liga Sagres <H3>
             <P ALIGN=CENTER> 1ª Divisão Portuguesa </P>




  10. Alterar caracteres
         a. Estilos de caracteres
            Negrito: <B> Texto Negrito </B><P>
            Itálico: <I> Texto Itálico </I><P>
            Com duplo espaço entre as palavras:
            <TT> Texto duplo espaço </TT><P>
Outro Exemplo:
 <B><I> Texto em negrito e itálico </I></B><P>
 <B><TT> Texto com duplo espaço em negrito </TT></B><P>
 <I><TT> Texto com duplo espaço em itálico </TT></I><P>
 <B><TT><I> Texto com duplo espaço em negrito e itálico </I></TT></B>


Nesta altura a página têm que estar assim:




Prof. Cláudio Pedras               08-01-2010                  Página 4 de 9
Esc. Sec. José Belchior Viegas                                      2009/2010




           b. Tamanhos de caracteres Aqui vamos utilizar o tag “<FONT>” para
              modificar o tamanho do texto

    <FONT SIZE=7> Texto com FONT SIZE=7 </FONT><P>
    <FONT SIZE=6> Texto com FONT SIZE=6 </FONT><P>
    <FONT SIZE=5> Texto com FONT SIZE=5 </FONT><P>
    <FONT SIZE=4> Texto com FONT SIZE=4 </FONT><P>
    <FONT SIZE=3> Texto com FONT SIZE=3 </FONT><P>
    <FONT SIZE=2> Texto com FONT SIZE=2 </FONT><P>
    <FONT SIZE=1> Texto com FONT SIZE=1 </FONT>


E a nossa página ficara assim:




Prof. Cláudio Pedras              08-01-2010                     Página 5 de 9
Esc. Sec. José Belchior Viegas                                              2009/2010



   11. Alterar cores do texto e do fundo da janela do documento.
Por exemplo se escrever-mos <BODY BGCOLOR=FFFFFF TEXT=000000> ou
<BODY BGCOLOR=WHITE TEXT=BLACK> ou seja, texto a preto e fundo a branco

Vamos então alterar o fundo e o tipo de letras da nossa página, vamos passar o fundo
para verde (GREEN) e o texto para azul (BLUE)

<BODY BGCOLOR=GREEN TEXT=BLUE>
      <P ALIGN=CENTER> Uma ligação de hipertexto: </P>
      <P ALIGN=CENTER>
      <A HREF=http://www.google.pt> Motor de busca Google </A>
      </P>
A nossa página vai ficar assim:




   12. Hyperlinks podemos fazer ligações para outras páginas Web como por
       exemplo para o motor de busca GOOGLE
   Ex:
            <P ALIGN=CENTER> Uma ligação de hipertexto: </P>
            <P ALIGN=CENTER>
            <A HREF=http://www.google.pt> Motor de busca Google </A>
            </P>
   A nossa página vai ficar assim:




Prof. Cláudio Pedras                  08-01-2010                          Página 6 de 9
Esc. Sec. José Belchior Viegas                                             2009/2010




   13. Agora têm de elaborar uma página com um resumo da vossa vida em que
       apliquem o que aprenderam até aqui. (nome do ficheiro: “vida 1º e ultimo
       nome.html”)

   14. Agora tem de criar uma página igual a está: (nome do ficheiro: “Liga Sagres 27
       de Outubro.html”)




   15. Cores dos Hyperlinks
   LINK determina a cor dos links não visitados
   ALINK determina a cor que os links devem piscar quando clicados
   VLINK determina a cor dos links já visitados
   No BODY, vamos inserir LINK=RED ALINK=BLUE VLINK=GREEN
   Ou seja, onde está <BODY LBGCOLOR=yellow TEXTO=Blue> passa a estar:

        <BODY LINK=RED ALINK=BLUE VLINK=GREEN
        BGCOLOR=YELLOW TEXT=BLUE >

   16. Como inserir imagens para inserir uma imagem basta indicar o nome do
       arquivo dentro do tag <IMG>
   Exemplo:

     Imagem da Campeão 2008/2009:<P>
     <IMG SRC=porto.gif>
     <FONT SIZE=5> F.C. do Porto </FONT>




Prof. Cláudio Pedras                 08-01-2010                          Página 7 de 9
Esc. Sec. José Belchior Viegas                                            2009/2010

   17. Várias cores da mesma página: <FONT COLOR=white> texto na cor
       branca </FONT>
         <FONT SIZE=5 COLOR=GREEN> F.C. do Porto </FONT>

   18. Uma borda em volta da imagem
         <FONT SIZE=5 COLOR=GREEN BORDER=2> F.C. do Porto
         </FONT>


   19. Tabelas as tabelas são constituídas por linhas, dentro das quais são colocadas
       células com conteúdo. Se uma linha tiver varias células vai formar uma tabela
       com várias colunas.
   Os tags para construir uma tabela são:
   <TABLE> e </TABLE> para indicar o início e o fim de uma tabela
   <TR> e </TR> para indicar o início e o fim de uma linha
   <TH> e </TH> para indicar o inicio e o fim de uma célula – título (fica a negrito)
   <TD> e </TD> para indicar o inicio e o fim de uma célula
   Exemplo:
     <TABLE>
          <TABLE BORDER>
          <TR>
               <TD> Célula 1 </TD><TD> Célula 2</TD>
          </TR>
          <TR>
               <TD> Célula 3 </TD> <TD> Célula 4</TD>
          </TR>
     </TABLE>


   Agora para expandir-mos uma coluna, vamos inserir

   Exemplo:
     <TABLE BORDER=2>
           <TR>
                 <TD COLSPAN=2> Célula expandida</TD>
           </TR>
           <TR>
                 <TD Célula 1 </TD> <TD> Célula 2</TD>
           </TR>
           <TR>
                 <TD> Célula 3 </TD> <TD> Célula 4</TD>
           </TR>
     </TABLE>



   Outro exemplo:




Prof. Cláudio Pedras                08-01-2010                          Página 8 de 9
Esc. Sec. José Belchior Viegas                                            2009/2010




           <TABLE BORDER=3>
                 <TR>
                       <TD ROWSPAN=2> Célula expandida</td>
                       <TD> Célula 1 </TD><TD> Célula 2 </TD>
                 </TR>
           </BODY>
     </TABLE>



   20. Agora vamos aproveitar o que aprendemos de tabelas para elaborar a tabela
       classificativa para ficar assim:




   21. Alinhamento:
   Experimentem os seguintes comandos ALIGN=LEFT; ALIGN=Right;
   ALIGN=CENTER no <TABLE> e no <TR>
   E no <TR> experimentem também o VALIGN=TOP; VALIGN=MIDDLE;
   VALIGN=BOTTOM.
   22. Agora vão elaborar uma página com a classificação do grupo de Portugal para o
       apuramento do Mundial da África do Sul. Deve conter: vitorias, derrotas e
       empates em casa, vitorias, derrotas e empates Fora, Golos marcados e sofridos
       (em casa e fora), pontos e classificação. Boa sorte.

   23. Agora vão abrir um novo ficheiro Word e elaborar a vossa página da mesma
       maneira, não recorrendo ao código HTML. No final vão guardar como pagina
       WEB com o seguinte nome Liga Word.html




Prof. Cláudio Pedras                08-01-2010                          Página 9 de 9

Contenu connexe

Tendances (17)

Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
HTML
HTMLHTML
HTML
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
 
Exercicios office2007
Exercicios office2007Exercicios office2007
Exercicios office2007
 
Portifolio net
Portifolio netPortifolio net
Portifolio net
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Word Aula 19
Word Aula 19Word Aula 19
Word Aula 19
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
O que é html
O que é htmlO que é html
O que é html
 
Como númerar páginas no word -Andreucci
Como númerar páginas no word -AndreucciComo númerar páginas no word -Andreucci
Como númerar páginas no word -Andreucci
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Html básico
Html básicoHtml básico
Html básico
 
Apostila word-2010
Apostila word-2010Apostila word-2010
Apostila word-2010
 

Similaire à Pequeno resumo de comandos HTML

Similaire à Pequeno resumo de comandos HTML (20)

Html básico
Html básicoHtml básico
Html básico
 
Html manual
Html manualHtml manual
Html manual
 
Html manual
Html manualHtml manual
Html manual
 
Html
HtmlHtml
Html
 
Linguagem de-programacao-html 2
Linguagem de-programacao-html 2Linguagem de-programacao-html 2
Linguagem de-programacao-html 2
 
Html
HtmlHtml
Html
 
Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdf
 
Curso html
Curso htmlCurso html
Curso html
 
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)
 
Introdução ao HTML.pptx
Introdução ao HTML.pptxIntrodução ao HTML.pptx
Introdução ao HTML.pptx
 
Html básico 1
Html básico 1Html básico 1
Html básico 1
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Sistemas operacionais html
Sistemas operacionais html Sistemas operacionais html
Sistemas operacionais html
 
HTML e Hipertexto
HTML e HipertextoHTML e Hipertexto
HTML e Hipertexto
 
Sistemas operacionais html 09
Sistemas operacionais html 09Sistemas operacionais html 09
Sistemas operacionais html 09
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantes
 
Apostila de html
Apostila de htmlApostila de html
Apostila de html
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Aula01 webdesign
Aula01 webdesignAula01 webdesign
Aula01 webdesign
 

Pequeno resumo de comandos HTML

  • 1. Esc. Sec. José Belchior Viegas 2009/2010 Resumo HTML Tags Básicos existem 4 Tag que quando quiserem criar uma página vocês iram utilizar quase sempre: 1. <HTML> serve para indicar ao Browser que se trata de um documento em HTML; 2. <HEAD> O documento está dividido em duas partes, esta é cabeça/cabeçalho..; 3. <BODY> …a segunda parte é o corpo do texto; 4. <TITLE> O elemento principal da/o cabeça/cabeçalho é o titulo do documento, é um elemento importante pois o título vai aparecer na barra de título do nosso browser. É preciso não esquecer que quando utilizarem estes tag’s têm sempre que fechar as mesmas, ou seja, vão ter sempre de utilizar as seguintes tag’s </HTML>, </HEAD>; <TITLE>; <BODY>, no fundo só têm de se lembrar que estas tag’s têm sempre que ser acompanhadas pelo seu par. Isto quer dizer, que quando queremos criar uma nova página, a partida vamos ter de utilizar pelo menos o seguinte código: <HTML> <HEAD> <TITLE> Aqui escreve-mos o título </TITLE> </HEAD> <BODY> Aqui no corpo do programa inseri-mos o resto do código para que possa ser visto o que deseja-mos (Listas, texto, imagens, vídeos, etc) </BODY> </HTML> Quadro 1 Muito importante no final temos de gravar sempre o ficheiro com o nome seguido de .html ou .htm Comentários serve para que a mesma fique só visível para quem tem acesso ao código-fonte, tudo o que escrever-mos entre <! > ficara invisível no browser. Títulos no texto podemos utilizar até seis níveis de título (<H1>, <H2>….<H6>) para realçar-mos informação embora o H5 e H6 muitas vezes deixem de ser perceptíveis. Ex: <H1> Título da página de carros XPto </H1> Parágrafos para indicar o inicio de um novo parágrafo utilizamos o tag <p>. Ex: Olá estão bons <P> Linhas para elaborar-mos uma quebra de linha utilizamos o <BR>. Ex: Espero bem que sim <BR> Prof. Cláudio Pedras 08-01-2010 Página 1 de 9
  • 2. Esc. Sec. José Belchior Viegas 2009/2010 Listas o inicio de cada linha é indicado pelo tag <UL> sendo que o final da mesma é indicado por o tag </UL>, entre os dois é que vamos inserir tantos <LI> consoante a nossa necessidade de item que queremos utilizar, ou seja, se queremos 2 vamos utilizar 2, se queremos três vamos utilizar três, por ai fora. Ex: <H3>Tabela classificativa da Liga Sagres<H3> <UL> <LI> Sp. Braga <LI> S.L. Benfica <LI> F. C. Porto <LI> Sporting C. P.gal </UL> Quadro 2 Então agora vamos lá fazer uma nova página: 1. Vamos abrir um novo documento no “wordpad” (para aceder ao WordPad vamos clicar em iniciar todos os programas acessórios WordPad). 2. Agora vamos inserir o código do quadro 1. 3. Guardar o documento nos meus documentos com o seguinte nome “Ex2 Liga Sagres.html” e fecha-lo. 4. Agora vamos clicar duas vezes no mesmo documento. O documento deve aparecer assim: A vermelho o que escreve-mos entre as tag’s: <TITLE> </TITLE> E em baixo o que escreve-mos entre as tag’s: <BODY> </BODY> 5. Como o que escreve-mos no BODY é apenas uma informação vamos pô-la como um comentário para que a mesma fique só visível para quem tem acesso ao código-fonte. (vamos ter que abrir o documento com o botão direito do rato, abrir com .., e depois escolher o programa “wordpad”). <BODY> <! Aqui no corpo do programa inseri-mos o resto do código para que possa ser visto o que deseja-mos (Listas, texto, imagens, vídeos, etc) > </BODY> Depois da alteração vamos guardar o documento e de seguida voltar a clicar duas vezes no mesmo. E página vai passar a ficar desta forma: Prof. Cláudio Pedras 08-01-2010 Página 2 de 9
  • 3. Esc. Sec. José Belchior Viegas 2009/2010 Ou seja, em branco e o título vais se manter o mesmo (Aqui escreve-mos o título) 6. A seguir no mesmo documento vamos mudar o título do documento para: “Primeira divisão do futebol português” Ou seja, vamos fazer a seguinte alteração e gravar: <HEAD> <TITLE> Primeira divisão do futebol português </TITLE> </HEAD> 7. Se ainda tivermos o documento aberto com o browser basta clicar na tecla “F5” e verificar a alteração. Passa a ficar assim: 8. Vamos agora inserir alguma informação no corpo do programa: <BODY> <H3>Tabela classificativa da Liga Sagres<H3> <UL> <LI> Sp. Braga <LI> S.L. Benfica <LI> F. C. Porto <LI> Sporting C. P.gal </UL> </BODY> Vai ficar assim: Prof. Cláudio Pedras 08-01-2010 Página 3 de 9
  • 4. Esc. Sec. José Belchior Viegas 2009/2010 9. Alinhamento para mudar o alinhamento padrão vamos adicionar o atributo ALIGN dentro das tags que marcam os títulos e parágrafos. Ex: <H3 ALIGN=CENTER> Tabela classificativa da Liga Sagres <H3> <P ALIGN=CENTER> 1ª Divisão Portuguesa </P> 10. Alterar caracteres a. Estilos de caracteres Negrito: <B> Texto Negrito </B><P> Itálico: <I> Texto Itálico </I><P> Com duplo espaço entre as palavras: <TT> Texto duplo espaço </TT><P> Outro Exemplo: <B><I> Texto em negrito e itálico </I></B><P> <B><TT> Texto com duplo espaço em negrito </TT></B><P> <I><TT> Texto com duplo espaço em itálico </TT></I><P> <B><TT><I> Texto com duplo espaço em negrito e itálico </I></TT></B> Nesta altura a página têm que estar assim: Prof. Cláudio Pedras 08-01-2010 Página 4 de 9
  • 5. Esc. Sec. José Belchior Viegas 2009/2010 b. Tamanhos de caracteres Aqui vamos utilizar o tag “<FONT>” para modificar o tamanho do texto <FONT SIZE=7> Texto com FONT SIZE=7 </FONT><P> <FONT SIZE=6> Texto com FONT SIZE=6 </FONT><P> <FONT SIZE=5> Texto com FONT SIZE=5 </FONT><P> <FONT SIZE=4> Texto com FONT SIZE=4 </FONT><P> <FONT SIZE=3> Texto com FONT SIZE=3 </FONT><P> <FONT SIZE=2> Texto com FONT SIZE=2 </FONT><P> <FONT SIZE=1> Texto com FONT SIZE=1 </FONT> E a nossa página ficara assim: Prof. Cláudio Pedras 08-01-2010 Página 5 de 9
  • 6. Esc. Sec. José Belchior Viegas 2009/2010 11. Alterar cores do texto e do fundo da janela do documento. Por exemplo se escrever-mos <BODY BGCOLOR=FFFFFF TEXT=000000> ou <BODY BGCOLOR=WHITE TEXT=BLACK> ou seja, texto a preto e fundo a branco Vamos então alterar o fundo e o tipo de letras da nossa página, vamos passar o fundo para verde (GREEN) e o texto para azul (BLUE) <BODY BGCOLOR=GREEN TEXT=BLUE> <P ALIGN=CENTER> Uma ligação de hipertexto: </P> <P ALIGN=CENTER> <A HREF=http://www.google.pt> Motor de busca Google </A> </P> A nossa página vai ficar assim: 12. Hyperlinks podemos fazer ligações para outras páginas Web como por exemplo para o motor de busca GOOGLE Ex: <P ALIGN=CENTER> Uma ligação de hipertexto: </P> <P ALIGN=CENTER> <A HREF=http://www.google.pt> Motor de busca Google </A> </P> A nossa página vai ficar assim: Prof. Cláudio Pedras 08-01-2010 Página 6 de 9
  • 7. Esc. Sec. José Belchior Viegas 2009/2010 13. Agora têm de elaborar uma página com um resumo da vossa vida em que apliquem o que aprenderam até aqui. (nome do ficheiro: “vida 1º e ultimo nome.html”) 14. Agora tem de criar uma página igual a está: (nome do ficheiro: “Liga Sagres 27 de Outubro.html”) 15. Cores dos Hyperlinks LINK determina a cor dos links não visitados ALINK determina a cor que os links devem piscar quando clicados VLINK determina a cor dos links já visitados No BODY, vamos inserir LINK=RED ALINK=BLUE VLINK=GREEN Ou seja, onde está <BODY LBGCOLOR=yellow TEXTO=Blue> passa a estar: <BODY LINK=RED ALINK=BLUE VLINK=GREEN BGCOLOR=YELLOW TEXT=BLUE > 16. Como inserir imagens para inserir uma imagem basta indicar o nome do arquivo dentro do tag <IMG> Exemplo: Imagem da Campeão 2008/2009:<P> <IMG SRC=porto.gif> <FONT SIZE=5> F.C. do Porto </FONT> Prof. Cláudio Pedras 08-01-2010 Página 7 de 9
  • 8. Esc. Sec. José Belchior Viegas 2009/2010 17. Várias cores da mesma página: <FONT COLOR=white> texto na cor branca </FONT> <FONT SIZE=5 COLOR=GREEN> F.C. do Porto </FONT> 18. Uma borda em volta da imagem <FONT SIZE=5 COLOR=GREEN BORDER=2> F.C. do Porto </FONT> 19. Tabelas as tabelas são constituídas por linhas, dentro das quais são colocadas células com conteúdo. Se uma linha tiver varias células vai formar uma tabela com várias colunas. Os tags para construir uma tabela são: <TABLE> e </TABLE> para indicar o início e o fim de uma tabela <TR> e </TR> para indicar o início e o fim de uma linha <TH> e </TH> para indicar o inicio e o fim de uma célula – título (fica a negrito) <TD> e </TD> para indicar o inicio e o fim de uma célula Exemplo: <TABLE> <TABLE BORDER> <TR> <TD> Célula 1 </TD><TD> Célula 2</TD> </TR> <TR> <TD> Célula 3 </TD> <TD> Célula 4</TD> </TR> </TABLE> Agora para expandir-mos uma coluna, vamos inserir Exemplo: <TABLE BORDER=2> <TR> <TD COLSPAN=2> Célula expandida</TD> </TR> <TR> <TD Célula 1 </TD> <TD> Célula 2</TD> </TR> <TR> <TD> Célula 3 </TD> <TD> Célula 4</TD> </TR> </TABLE> Outro exemplo: Prof. Cláudio Pedras 08-01-2010 Página 8 de 9
  • 9. Esc. Sec. José Belchior Viegas 2009/2010 <TABLE BORDER=3> <TR> <TD ROWSPAN=2> Célula expandida</td> <TD> Célula 1 </TD><TD> Célula 2 </TD> </TR> </BODY> </TABLE> 20. Agora vamos aproveitar o que aprendemos de tabelas para elaborar a tabela classificativa para ficar assim: 21. Alinhamento: Experimentem os seguintes comandos ALIGN=LEFT; ALIGN=Right; ALIGN=CENTER no <TABLE> e no <TR> E no <TR> experimentem também o VALIGN=TOP; VALIGN=MIDDLE; VALIGN=BOTTOM. 22. Agora vão elaborar uma página com a classificação do grupo de Portugal para o apuramento do Mundial da África do Sul. Deve conter: vitorias, derrotas e empates em casa, vitorias, derrotas e empates Fora, Golos marcados e sofridos (em casa e fora), pontos e classificação. Boa sorte. 23. Agora vão abrir um novo ficheiro Word e elaborar a vossa página da mesma maneira, não recorrendo ao código HTML. No final vão guardar como pagina WEB com o seguinte nome Liga Word.html Prof. Cláudio Pedras 08-01-2010 Página 9 de 9