Abra o seu editor HTML (eu usarei o próprio Bloco de Notas do Windows).
Bem, vamos começar com as Tabelas.
Tabelas:
As tabelas são representadas pela tag <table> e </table>
Para alinhar a table no centro irei usar uma div, um elemento HTML que é representado pela tag <div> e </div>.
Basicamente, o código estará assim:
<html>
<head>
<title>Imagens, Tabelas e Links</title>
</head>
<table>
</table>
</body>
</html>
Mas, toda tabela é composta por linhas e colunas, que são representadas da seguinte maneira:
<tr></tr> - Coluna
<td></td> - Linha
Ex:
Tabela com 3 colunas e 3 linhas em cada colunas.
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Definições:
  - Serve para as linhas não ficarem vazias, ela não mostra nada só "enche" a linha.
border="1" - Significa que a borda terá 1 pixel, se não houver esse parâmetro, ela não terá borda.
Links:
Os links são "pontes" para outro site, ou até outro local do seu próprio domínio.
Os links são representados por: <a> e </a>
O link mesmo (ou seja, http://sitequevocequeira.com) vêem no parâmetro href.
Assim fica:
<a href="http://programacaodesoftwares.blogspot.com/"></a>
Mas, ainda não há nada que exiba o link, porém pode ser uma imagem ou um texto por exemplo.
O texto não tem segredo, vem entre a tag aberta e a tag fechada.
<a href="http://programacaodesoftwares.blogspot.com/">SEU TEXTO</a>
Para pôr uma imagem basta pôr as tags de imagem ao invés do texto. (Tags de Imagem abaixo!)
Imagem:
Pôr uma imagem em seu blog também é muito fácil! Basta usar as seguintes tags.
<img>e</img>
O parâmetro que localiza a imagem é o src
Ficaria então: <img src="LINK DA IMAGEM"></img>
O que você pôr entre a abertura e onde fecha a string será um texto que ficará ao lado da imagem.
Pular Linha:
Para pular linha basta usar a tag <br>, ela não precisa ser fechada, basta pôr <br>
Ex:
<body>
Texto
<br>
Pulou 1 linha
</body>
Atividade: Página usando tudo o que foi ensinado
Criei uma página que mostra o logotipo do blog, com link para o blog, um link para os marcadores de HTML do site e um pequeno texto que pulou linha.
Código:
<html>
<head>
<title>Imagens, Tabelas e Links</title>
</head>
<body bgcolor="#DDD">
<div align="center">
<table border="1" bgcolor="#CCC" >
<tr>
<td><a href="http://programacaodesoftwares.blogspot.com/"><img src="http://4.bp.blogspot.com/-OHCpQQpI-0k/T5NiXtRQZdI/AAAAAAAAADk/p9a5UgSVDBM/s1600/logo.png"></img></a></td>
<td><a href="http://programacaodesoftwares.blogspot.com.br/search/label/HTML">Posts sobre HTML</a></td>
</tr>
</table>
<br>
O Blog Programação de Softwares, explora o desenvolvimento de softwares desde o estágio inicial até o avançado.
<br>
Clique no Logotipo para ir ao blog, ou então <a href="http://programacaodesoftwares.blogspot.com/">clique aqui</a>.
</div>
</body>
</html>
Edite essa página e crie sua própria versão a partir daí.
Lembrando que os links tem que ser sempre da internet, e não de uma pasta do computador!!!
Até a próxima!
"Conhecimento é Poder"
Nenhum comentário:
Postar um comentário