Your SlideShare is downloading. ×
  • Like
Tuturial Html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
202
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Tuturial de iniciação ao html 1-Irá proceder a criação da sua primeira página web.Usando o seu editor de texto crie um novo arquivo e escreva nele o texto seguinte: <html> <head> <title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está em negrito</b> </body> </html> Salve o arquivo com o nome "pagina.html". Abra o documento "pagina.html" no local em que você salvou o arquivo e observe o resultado. 2-Dentro da etiqueta body irá acrescentar uma tabela por recurso ao codigo: (verificar que esta tabela não apresenta border) <table border="0"> <tr> <td> Esta é a minha primeira tabela. </td> </tr> </table> Salvar e ver o resultado. 3-acrescentar uma segunda tabela verificando que esta já possui border: (Acrescentar este código ao código já existente) <table border="2"> <tr> <td> Esta é a minha segunda tabela. </td> </tr> </table> Salvar e ver o resultado. Prof. Tiago Martins
  • 2. 4-Acrescentar paragrafos recorrendo para isso ao código seguinte: <p>Isto é um parágrafo.</p> <p>Isto é outro parágrafo.</p> <p> Os parágrafos definem-se com o elemento &lt;p&gt; </p> Salvar e ver o resultado. 5-acrescentar paragrafos mas que apresentem quebra de linha. Para isso reccorrer ao seguinte código: <p> Isto<br> é um pará-<br>grafo com quebras de linha </p> Salvar e ver o resultado. 6-acrescentar vários parágrafos seguidos recorrendo ao código seguinte: <p> No código fonte este parágrafo tem três linhas, mas o browser ignora isso e pode apresentar outro número. </p> <p>No código fonte o texto deste parágrafo tem vários espaços seguidos, mas o browser trata-os como se eles formassem um único espaço. </p> <p>O número de linhas de um parágrafo depende do tamanho da janela do browser. Ao alterar a largura desta provocará alterações no número de linhas </p> Salvar e ver o resultado. 7- colocar cabeçalhos. Vamos experimentar os vários tipos de cabeçalhos.acrescente o seguinte código: <h1>Isto é um cabeçalho de nível 1</h1> <h2>Isto é um cabeçalho de nível 2</h2> <h3>Isto é um cabeçalho de nível 3</h3> <h4>Isto é um cabeçalho de nível 4</h4> <h5>Isto é um cabeçalho de nível 5</h5> <h6>Isto é um cabeçalho de nível 6</h6> Salvar e ver o resultado. Prof. Tiago Martins
  • 3. 8-vamos agora centrar um cabeçalho: <h1 align="center" >este é um cabeçalho alinhado ao centro</h1> Salvar e ver o resultado. 9- o elemento <hr> permite desenhar linhas em html para verificar isso acrescente ao seu código: <p>O elemento hr desenha uma linha horizontal:</p> <hr> <p>Isto é um parágrafo</p> <p>Isto é um parágrafo</p> Salvar e ver o resultado. 10-Colocar cometarios.é possivel colocar comentários entre o codigo que não são exibidos quando é mostrada a página. Para isso experimentar o código: (a segunda linha serve apenas para se verificar que de facto o comentário ficou omitido entre as linhas anteriores e esta) <!-- Este comentário não será visível --> <p>Isto é um parágrafo normal</p> Salvar e ver o resultado. 11-Vamos agora aplicar estilos. De seguida tem a palicação de alguns elementos que formatam o texto experimente acrescentar o seguinte codigo: <b>Isto é texto em negrito</b> <br> <strong>Isto é texto forte</strong> <br> <big>Isto é texto maior</big> <br> <em>Isto é texto enfatizado</em> <br> <i>Isto é texto itálico</i> <br> <small>Isto é texto mais pequeno</small> <br> Este texto contém uma parte alinhada mais <sub>abaixo</sub> <br> Este texto contém uma parte alinhada mais <sup>acima</sup> Salvar e ver o resultado. Prof. Tiago Martins
  • 4. 12-vamos experimentar alterar a cor do fundo para isso vamos alterar as propriedades do elemento <body>. Para isso deverão acrescentar bgcolor="yellow" a tag <body> para que fique com o seguinte aspecto: <body bgcolor="yellow"> Salvar e ver o resultado. 13-Acrescentar ancoras (links). Para acrescentar ancoras ou links como lhes costumamos chamar deveremos usar o seguinte código: <a href="url">Texto a mostrar</a> Exemplo: <a href="http://www.ojogo.pt">site do jogo</a> Acrescentar três links a seu gosto. Prof. Tiago Martins