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 no...
4-Acrescentar paragrafos recorrendo para isso ao código seguinte:
<p>Isto é um parágrafo.</p>
<p>Isto é outro parágrafo.</...
8-vamos agora centrar um cabeçalho:

<h1 align="center"
>este é um cabeçalho alinhado ao centro</h1>

Salvar e ver o resul...
12-vamos experimentar alterar a cor do fundo para isso vamos alterar as propriedades
do elemento <body>. Para isso deverão...
Próximos SlideShares
Carregando em…5
×

Tuturial Html

343 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Tuturial Html

  1. 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. 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. 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. 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

×