1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
Tuturial Html
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 <p>
</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