Marca um parágrafo e acrescenta uma linha em branco.


Insere uma quebra de linha

Agora, que você viu o resultado do exemplo2.html a cada vez mais feliz, por está entendendo esta linguagem, vamos passar para o Exercício 3.

Exercício 3 –  TAGS DE ALINHAMENTO

Assim, como num documento comum, há necessidade de melhorar a aparência do documento,  e a primeira providência a tomar é cuidar do alinhamento do texto. O Alinhamento padrão que vem configurado nos navegadores, é a esquerda.  Para entender isto, digite a listagem 1.4, e salve como exemplo3.html, e acompanhe o conceito de tag que marcam o alinhamento dos títulos e paragráfos nas páginas.


Listagem 1.4


   

       


   
       

Título Centralizado

Título À Direita

Título À Esquerda

   
   

---

       

Parágrafo ao Centro
       

Parágrafo a direita
       

Paragráfo a esquerda
       

Este é um texto justificado. Na linguagem HTML temos vários tipos de alinhamentos que você poderá aplicar em sua página. Nesta parte do livro,veremos como alinhar linhas, parágrafos e cabeçalhos.
   

   

   

---

       

Texto com mais margem

       

Tem com mais margem ainda

   
   


Fim da Listagem 1.4
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo3.html. Veja a figura 1.4

Figura 1.4

CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO

TAG
O QUE FAZ

Alinha o trecho (texto, imagem ou tabela ao centro>
align=center, right, left ou justify
Atribuídos dentro do tag

que marca o início de um parágrafo modificam o alinhamento do título.
Center= alinha ao centro
Right = alinha a direita
Left = alinha a esquerda
Justify = faz a justificação do parágrafo.

Adiciona uma margem de cerca de um centímetro

---

Atributos
Size = define a altura da linha. Exemplo:

---

Width = define a largura da linha horizontal.
Exemplo:

---

ou

---

Noshade = desenha a linha sem a sombra para dar o efeito de três dimensões.  Exemplo:

---

Exercício 4 –  FORMATAÇÃO DE ESTILOS

Muito bem caro estudante, perceba que a cada exemplo sua página vai melhorando ainda mais sua aparência. Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de fonte,  estilo, e etc..
Bem, preparado? Vamos lá novamente para mais um estudo!

Para entender isto, digite a listagem 1.5, e salve como exemplo4.html,

Listagem 1.5


     
       
     

     
      Mudando o Estilo dos Caracteres

     

      Texto em Negrito

      Texto em Itálico

      Texto sublinhado

      Texto Monoespaçado


     
Texto em Vermelho

     
Texto em Tamanho 5

     
Texto com a letra Verdana

     
Você pode fazer combinações

     

      Editora Érica
     
Você poderá os atributos para cada tipo de letra!
     

      Editora Érica
     

     

       Estamos progredindo
         no curso de HTML.
                Este tag permite que todos os espaços feitos no código fonte
                        sejam respeitados. Certo?
      

     
 

Fim da Listagem 1.5
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo4.html. Veja a figura 1.5
Figura 1.5


CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO

TAG
O QUE FAZ

Coloca o texto em negrito

Coloca o texto em itálico

Coloca o texto sublinhado

Coloca o texto em  fonte monoespaçada. (fonte Courier,como máquina de escrever)

Modifica a formatação do texto.
Atributos:
Size = define o tamanho da letra. Ex: Texto
Face = define o estilo da letra. Ex: Texto
Color = define a cor da letra. Ex:Texto

Marca um trecho formatado com fonte monoespaçada. A formatação com espaços e entrada de parágrafos é respeitada.

Modifica a formatação padrão do texto.
Ex: 


TABELA DE CORES

Você percebeu que as cores a fonte obedecem o idioma inglês, no entanto, as cores da fonte podem ser adicionados através do nome ou de seus respectivos códigos. Então para você ficar mais feliz, relacionei aqui algumas cores para colorir e diversificar sua home page. Veja a figura 1.6

Figura 1.6


Exercício 5 –  LISTAS NUMERADAS E MARCADAS

E lá vamos nós para um mais  exercício. Desta vez trabalharemos com listas numeradas e marcadores. Assim como em uma carta ou qualquer outro documento comum, precisamos listar tópicos através de  símbolos ou números.

Para entender isto, digite a listagem 1.6, e salve como exemplo5.html,






Listagem 1.6

         
         
             
             
Isto é uma lista


             

                     
Item 1
                     
Item 2
                     
Item 3
                

  


         

                 
Item 1
                 
Item 2
                 
Item 3
            


         
       

Fim da Listagem 1.6
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo5.html. Veja a figura 1.7
Figura 1.7







CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO

TAG
O QUE FAZ

Marca o início e o fim de uma lista ordenada. Recebem na primeira linha um número ou letra. Devem ser usados com tag 

Atributos
Start = especifica o número  a partir do qual os itens começam a ser contados. Ex: 

Type = modifica o tipo do numerador  que pode ser: número, letras ou algarismo romano.
Ex: 
 
  

Marca o início e o fim de uma lista não ordenada, ou seja, os itens da lista recebem símbolos na primeira linha. Devem ser usados com tag 

Atributos
Type = modifica o tipo do marcador (símbolo), que pode ser: 
Circle = um círculo vazio.              Ex: 

Disc =  um círculo cheio.               Ex: 

Square = um quadrado cheio        Ex: 



Ficou confuso? Quer mais um exemplo para entender legal?  Vamos nessa!
Para entender isto, digite a listagem 1.7, e salve como exemplo6.html,

Listagem 1.7

     
     
      
     
Isto é uma listagem iniciando no número 4

         

                     
Item 1
                     
Item 2
                     
Item 3
            

Isto é uma listagem com letras

         

                     
Editora 
                     
Érica
                     
Livros
            

Isto é uma listagem em algarismo romano

         

                     
Editora 
                     
Érica
                     
Livros
            


Esta é uma listagem em algarismo romano a partir do número 3



                     
Editora 
                     
Érica
                     
Livros
            


     
  
   

Fim da Listagem 1.7
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo6.html. Veja a figura 1.8
Figura 1.8

Vamos terminar esta lição com mais um exemplo? Desta vez, faremos uma listagem com subníveis. 

Para entender isto, digite a listagem 1.8, e salve como exemplo7.html







Listagem 1.8




     
Listagem e SubListagem

     

       
Item 1
          

              
Item 1.1
               
Item 1.2
               
Item 1.3
               


       
 Item 2
            

              
Item 2.1
                 

                    
Item 2.1.1
                        
Item 2.1.2
                    
Item 2.1.3
                 

             
                 
Item 2.2
                 
Item 2.3

             

      
 Item 3
    
    

  

Fim da Listagem 1.8

Ufa! Terminamos mais uma etapa! Esse código foi grande, mas valeu!
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxempl7.html. Veja a figura 1.9




Figura 1.9









Exercício 6 –  DEFININDO O CORPO DA PÁGINA

Você teve Ter observado em algumas sites, que as cores de fundo da página são bem diversificados, ou em outros casos, uma imagem é adicionado no fundo da página, como uma marca d’água. Então, todas estas definições são feitas dentro do tag .  Vamos praticar?
Para entender isto, digite a listagem 1.9, e salve como exemplo8.html,

Listagem 1.9





     
Definfo cor de fundo para a página




Fim da Listagem 1.9
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo8.html. O resultado, será uma página como fundo de cor bege e o texto na cor azul. Certo?. Veja figura 1.10

Figura 1.10

Observação:  Você poderá adicionar a cor que desejar, tanto para o fundo quanto para o texto. Os dois só não podem ser da mesma cor!(risos). Para escolher a cor, consulte na Tabelade Cores (figura 1.6)


Como comentei linhas acima, você também pode colocar um imagem no fundo da página. Mas, antes de fazer o exercício,  observe as seguintes recomendações:
As imagens suportadas são do tipo GIF e JPG. Na dúvida sobre imagens aconselho, consultar um livro de PhotoShop 5.0 ou outra versão.
As imagens devem estar na mesma pasta, onde estará o documento HTML, ou numa subpasta. 
Exemplo: Imagine que você tem uma pasta chamada projeto e nessa pasta você armazena todos os documentos HTML referente a página que por hora desenvolve. Certo até aí? Então, basta que os arquivos de imagens, também fiquem na mesma pasta projeto, assim não terá problema na hora de visualizar no Browser.
Outro exemplo que posso citar é o seguinte. Imagine agora outra situação:
Você agora resolveu organizar ainda mais o desenvolvimento de sua página.
Criou uma pasta projeto e dentro armazenou todos os arquivos HTML. Certo? 
Depois resolveu criar uma subpasta dentro da pasta projeto chamada imagens. Muito bem garoto! Excelente atitude e nela você colocou todas as imagens. Então, tudo está correto, mas não esqueça de na hora de especificar a imagem que deseja inserir no fundo dentro do tag , o caminho, ou seja, o nome da subpasta. Entendeu? Não se preocupe você fará exemplo para as duas situações, eu prometo!

Muito bem, caro web designer, entendido tudo isso, vamos praticar.

Para entender isto, digite a listagem 1.10, e salve como exemplo9.html,

Listagem 1.10




    
         
Editora Érica

            
        

                 
Livros
                 
Dicas
                 
Volte Sempre
         

            
    

Fim da Listagem 1.10
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo9.html. Veja figura 1.11



Figura 1.11

Observação:  Caso a imagem estivesse em uma subpasta  bastaria apontar o caminho para ela no tag. Veja o exemplo:
Exemplo: 
                                                   
Onde:
imagens= é o nome da subpasta
parede.gif = o nome do arquivo.


CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO

TAG
O QUE FAZ

Marca o início e o fim do corpo da página
Atributos
Bgcolor = define a cor do fundo da página
Text = define a cor do texto padrão da página
Background = permite inserir uma imagem como fundo da página
Bgproperties = fixa a imagem no fundo da página quando a página é rolada, criando um efeito de marca d’água. 

Exercício 7 –  IMAGENS

Muito bem, você está evoluindo a cada exercício. Neste exemplo exercitaremos os tags que permitem a inserção de imagens em sua home page. 

Antes de iniciar o estudo sobre imagens, quero lembrar-lhe  que uma imagem só poderá ser exibida no browser, se ela estiver na mesma pasta, ou então, você deverá apontar o caminho onde está, conforme o exemplo de número 6. Lembra?  
Outro fato é que, você poderá escolher as imagens que desejar, basta substituir o nome da imagem que está no exemplo pela a que você escolheu.

Tudo certinho agora? Vamos em frente!

Para entender isto, digite a listagem 1.11, e salve como exemplo10.html,

Listagem 1.11




Agora estamos trabalhando com imagens

 Esta é sua primeira imagem. Sorria?


Veja se consegue enxergar, as seguintes imagens?

O rosto de um velho

Uma moça

Um cachorro

Um outro velho
    
Um pássaro

E algo mais




Fim da Listagem 1.11
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo10.html. Veja figura 1.12

Figura 1.12

É isso aí, não se preocupe se você não conseguiu enxergar todas as imagens, o mais importante para mim é que você tenha entendido a aula. (risos!!!)

Vamos para um exemplo? Desta vez, trabalharemos com o alinhamento da imagem e do texto.

Para entender isto, digite a listagem 1.12, e salve como exemplo11.html
Listagem 1.12

    
    
    
Note neste exemplo que a imagem  está entre o texto


Imagem está à esquerda e o texto no topo


Imagem está à esquerda e o texto no centro

    
Neste exemplo a imagem ficou alinhada  è esquerda,         permitindo que o texto ficasse todo à direita ao redor da imagem. Utilize este recurso         toda vez que desejar que o texto fique ao lado da imagem 




Fim da Listagem 1.12
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo11.html. Veja figura 1.13
Figura 1.13



CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO

TAG
O QUE FAZ

Insere uma imagem
Atributos
src  indica o nome da imagem a ser carregado.
align=middle  centraliza o base do texto com o centro da imagem
align=left  faz a imagem flutuar a esquerda enquanto o texto circunda imagem à direita.
align=top  alinha o texto no topo 
align=right faz a imagem flutuar a direita enquanto o texto circunda imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegador não exibe a imagem. Sendo que n é o título que identifique a imagem.
Exemplo: 
 

Exercício 8 –  TABELAS

Nesta etapa conheceremos os tags responsáveis pela construção de tabelas. Na parte II deste estudo através do Front Page Express, utilizaremos a tabela como recurso para a definição dos layouts de nossas páginas. Por hora, vamos aos principais tags. Tudo Bem? 

Como sempre, digite a listagem 1.13, e salve como exemplo12.html
Listagem 1.13

   
   
    
           
               
                   
                   
                   
               
               
                
                    
                    
                    
                
           
 
Célula1
Célula2
Célula3
Frase 1
Frase 2
Frase 3

         

Listagem 1.13
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo12.html. Veja figura 1.14

Figura 1.13

Você pode também controlar as dimensões de sua tabela.  Vamos para mais uma listagem?
Como sempre, digite a listagem 1.14, e salve como exemplo13.html

Listagem 1.14

   
   
    
           
             
                 
                
                  
             
              
                 
               
                 
             
          
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

      

Fim da Listagem 1.14
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo13.html. Veja figura 1.15




Figura 1.15


Alinhamentos
Os elementos dentro da tabela também podem ser alinhados da mesma que um parágrafo. Veja mais um exemplo através da listagem 1.15

Listagem 1.15

   
   
    

             
                 
               
                 
            

             
                 
       
                 

            
          
No Centro
Para Direita
Para a Esquerda
Em baixo
No Topo
Centro na Vertical

      

Fim da Listagem 1.15
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo14.html. Veja figura 1.16




Figura 1.16


Cor de Fundo
Você pode ainda adicionar cores no fundo da tabela ou apenas de uma célula que deseja. Lembra do atributo bgcolor, então é com este mesmo que você pode adicionar um cor padrão para tabela ou para a célula.

Veja o exemplo:


O resultado seria assim: Toda Tabela teria um preenchimento azul

Veja mais este exemplo:

            
                 
                 
Bege
 Vermelho

O resultado seria assim: As células teriam cores diferentes






CONCEITO DOS TAGS USADOS NESTE EXERCÍCIO

TAG
O QUE FAZ

Marca o início e o fim de uma tabela
Atributos
Width define a largura da tabela ou da célula
Height define a altura da tabela ou da célula
Cellpadding define a margem dentro das células
Cellspacing define o espaço entre as células
Bgcolor define a cor de fundo da tabela ou da célula

Marca o início e o fim de uma linha

Marca o início e o fim de uma célula
border=”n”
Coloca uma borda na tabela, onde n é o valor em pixels da borda
align=left
Alinha o conteúdo da célula a esquerda na horizontal
align=right
Alinha o conteúdo da célula a direita na horizontal
align=center
Alinha o conteúdo da célula ao centro na horizontal
valign=top
Alinha o conteúdo da célula no topo (vertical)
valign=bottom
Alinha o conteúdo da célula na base da célula (vertical)
valign=middle
Alinha o conteúdo da célula no centro na vertica


Observação:  O  atributo de alinhamento ALIGN, faz o alinhamento na horizontal.
O  atributo de alinhamento VALIGN, faz o alinhamento na vertical.

E assim meu caro leitor, concluímos mais uma etapa de nosso curso. Espero que te guia esteja sendo realmente um farol em seu aprendizado. 

Exercício 9 –  LINKS

Como falei no início, estamos produzindo páginas de hipertextos, ou seja, textos que podem fazer ligações com outros textos, ligando páginas entre si e a WEB. Então, este pontos nós chamamos de links ou hyperlinks, âncoras de hipertexto, todos com a mesma função, de através de um único clique sobre a frase ou imagem conduzir a algum lugar no site ou na WEB.
O Tag responsável é o , onde dentro deste, através de um atributo coloco a referência, ou seja, A URL (Uniform Resource Locator).
Para criar um link usamos a seguinte sintaxe:
SINTAXE:  Frase que aparece na página
Onde:
 tag que marca o início e o fim do link
href= atributo que especifica o nome da referência
“URL”  é o nome do local para onde desejar linkar (ir)

Nada de complicação, que tal um exercício para entendermos legal tudo isso?
Vamos nessa!
Como sempre, digite a listagem 1.16, e salve como exemplo15.html


Listagem 1.16

     
     
     
    
Exemplo de Links Internos

         
Seção de Exemplos

    Exemplo1
    Exemplo2
         

Exemplo de Links Externos

Conheça a Editora Érica

        Apple Computer
Você pode usar imagens para usar nos links

       Imagens        

    


Fim da Listagem 1.16
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereço digite C:Meus documentosxemplo15.html. Veja figura 1.17
Figura 1.17


WEB DESIGNER – PASSO A PASSO PARA INICIANTES

	    	
   	
    
	

	  

        




Total de visitas: 2636
                 
        
    
      
 
    
    
    
 
    
    

	

    	






Criar uma Loja online Grátis
 - 
Criar um Site Grátis Fantástico
 - 
Criar uma Loja Virtual Grátis
 - 
Criar um Site Grátis Profissional