Vamos passar à criação do teu primeiro site. Recomendo que cries uma pasta para o conteúdo do site. Se estás impaciente, vê e testa o exemplo simples no fim deste post.
Antes de mais vamos ver os elementos principais de qualquer site:
<Html>
<header>
<title>O meu primeiro site</title>
</header>
<body>
Em Construção
</body>
</html>
Guarda este código num ficheiro com o nome "site.html", e de seguida abre esse ficheiro num browser. (não precisas de fechar o editor de texto)
Está feito o teu primeiro site, apenas com um título e texto. Se reparares, apenas surge escrito o que escreveres na secção . É esta a parte principal do site, em que vamos trabalhar.
Mas um site deste género seria bastante enfadonho.
Vamos adicionar mais conteúdo. É a partir deste momento é que a construção do site começa a ficar interessante.
Guarda temporariamente o código, (Ctrl+ G, no bloco de notas do windows, ou Ctrl + S no Notepad++), sempre que fizeres alterações no código, podes ir browser refrescar a página (tecla F5) para veres as alterações.
Tabelas
As tabelas são um elemento bastante útil para organizar o teu site. Um formato muito popular é o seguinte:
| Cabeçalho do site | ||
| menu 1 menu 2 menu 3 | Conteúdo do site | |
| Rodapé com informação sobre o site | ||
Para conseguires o aspecto anterior precisas de fazer o seguinte código:
<Html>
<header>
<title>O meu primeiro site</title>
</header>
<body>
<table align="center" border="1" width="80%" height=80%><tbody><tr><td colspan="2" height=100> O meu primeiro site</td></tr><tr><td width="15%">Home<br>
Item 1 <br>Item 2</td><td>Conteúdo do site
</td></tr><tr><td colspan="2" height=30 >Rodapé com informação sobre o site</td></tr></tbody></table>
</body>
</html>
Neste código existem vários conceitos que precisas de conhecer, para poderes alterar o código a teu gosto.
Width e Height correspondem a largura e largura. Ambos podem ser definidos por um valor fixo em pixeis, ou em percentagem, que se altera consoante o tamanho da janela.
Border define o tamanho da margem da tabela, neste caso foi de 1 pixel.
Align é o alinhamento do item. pode ser ajustado tanto a tabelas como texto, imagens, ou até vídeos. Center centra o item, left e right ajusta à esquerda e direita.
As tabelas são compostas por 3 elementos principais:
<table></table> define a tabela
<tr></tr> define as linhas
<td></td> define as colunas dentro das linhas
Se quisermos uma tabela com 3 linhas e 2 colunas o código é o seguinte:
<table border=1>
<tr><td>linha 1, coluna 1</td><td>linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
<tr><td>linha 3, coluna 1</td><td>linha 3, coluna 2</td></tr>
</table>
Mas comparando com o design anterior, repara que temos 3 linhas, mas apenas a linha central tem 2 colunas. Para ficar com o mesmo design, não basta eliminar a (linha 1, coluna 2), e (linha 3, coluna 2), temos de fundir as duas células de cada linha numa só.
Para isso dentro de <td> temos de definir a fusão, com o código colspan=2, que significa, união das duas celulas seguintes da mesma linha.
É possível fazer o mesmo nas colunas, mas em vez de colspan, usa-se o comando rowspan.
| Exemplo | Código | ||||
| <table border=1> <tr><td rowspan=3>linha 1, coluna 1</td><td>linha 1, coluna 2</td></tr> <tr><td>linha 2, coluna 2</td></tr> <tr></td><td>linha 3, coluna 2</td></tr> </table> |
Podem experimentar vários tipos de tabelas seguindo este esquema usando o colspan e o rowspan.
Também é possível colocar tabelas dentro de outras tabelas.
Hiperligações:
Um site sem ligações não se pode considerar um site.
Um link define-se do seguinte modo
<a href="http://enderço">Nome do Endereço</a>
Imagens:
Para publicares imagens precisas do seguinte código
<img src="imagem.jpg" />
"imagem.jpg" deve ser substituído pelo nome da tua imagem, e esta deve de estar na mesma directoria da página do site. Ou no caso de estar noutra localização, o endereço desta deve ser fixo (acessível independentemente da localização do site).
Vídeo:
O HTML5 suporta a tag <video>, e esta funciona do seguinte modo:
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<object data="video.mp4" width="400" height="300">
<embed src="video.swf" width="400" height="300" />
</object></video>
É possível reproduzir diversos tipos de vídeo: mp4, ogg, webm, swf, mas nem todos os browsers suportam todos estes formatos, e um video demasiado pesado, poderá levar muito tempo a carregar deste modo, portanto a solução mais segura será mesmo fazer upload dos teus vídeos para um site como o Youtube, e copiar o código disponibilizado pela plataforma para o teu site.
Audio:
Tal como o vídeo, também é possível colocar um leitor de audio embutido numa página html. Existem 3 formatos suportados, ogg, wav e MP3.
<audio controls="controls" height="50px" width="150px">
<source src="musica.mp3" type="audio/mpeg" />
<embed height="50px" width="150px" src="musica.mp3" />
</audio>
Texto e Formatação:
Existem diversos componentes que te ajudam a formatar o texto, um deles são as Headers desde <h1> a <h6>
<H2>Header 2</H2> |
<H3>Header 3</H3> |
<H4>Header 4</H4> |
<H6>Header 6</H6> |
Paragrafos <p>texto</p> podem ser usados para formatar o texto contido neles.
<br>define uma nova linha.
| <b>texto negrito</b> |
| <i>texto em italico</i> |
<pre>Texto predefinido</pre> |
Cores e estilos
Podemos modificar cada segmento de texto apenas utilizando estilos. Existem formas simples de aplicar os mesmos estilos a todos os textos do mesmo tipo, mas por enquanto vamos começar com algo mais simples.
<p style="font-family:arial;color:blue;font-size:15px;background-color:gold;">Texto.</p>
Neste segmento de código, apliquei todos os estilos definidos nele próprio. Tipo de letra é Arial, cor azul, tamanho 15 pixeis, e fundo dourado. Quando se define um estilo para um tipo de texto, podem-se definir todas estas características que quiseres, desde que delimitadas com ; entre cada definição.
Mas para os componentes, como a secção <body>, <tables> ou <td> podemos usar o seguinte código para alterar o seu fundo:
<body bgcolor=black > ou <body bgcolor=#000000 >
Estes dois códigos, tornam o teu fundo preto. Podes alterar a cor do fundo dando o nome da cor em inglês, ou usando um código desde #000000 a #ffffff (números de 0 a 9 e letras de a-f)
Se em vez de uma cor, queres ter uma imagem de fundo, podes usar o código background="nome_da_imagem.jpg" dentro do componente para o qual queres esta imagem.
Favicon
Este elemento é o ícone que surge na barra de endereço dos browsers. Este elemento deve ser definido na Header da página html. Podes usar diversos tipos de imagens, desde estáticas a gifs animados, mas alguns formatos ainda não são suportados por alguns navegadores de internet.
<link rel="icon"
type="image/jpg"
href="imagem.jpg">
Exemplo Prático:
Cria uma nova directoria(pasta), e guarda as duas imagens seguintes nela (clica nas imagens para as aumentar).A primeira com o nome "nng.jpg", e a segunda com o nome "cubos.jpg".
Copia para o notepad o código seguinte, e guarda com o nome indicado antes de cada segmento, e copia para dentro da mesma pasta onde estão as imagens.
Abre o ficheiro site.html e observa como funciona o código que fiz.
Não usei nada que não tenha falado neste post.
site.html:
<Html>
<header>
<title>O meu primeiro site</title>
<link rel="icon"
type="image/jpg"
href="cubos.jpg">
</header>
<body bgcolor=black>
<table align="center" border="1" width="80%" height=80% bgcolor=#aaaaff ><tbody><tr><td colspan="2" height=100 background=nng.jpg> <h1 align="center" style="color:gold">O meu primeiro site</h1></td></tr><tr>
<td width="15%">
<h2 style="background-color:gold;color:black;"><a href="site.html" >Home</a></h2><br>
<a href="about.html"><h2>About</h2></a></td>
<td align=center >
<img src="cubos.jpg" align=left /><h1 style="color:DarkBlue">HOME</h1>
Conteúdo do site
<br><br><br><br>
</td></tr><tr><td colspan="2" height=30 align=center ><a href="http:\\newnerdgeneration.blogspot.com" target="_blank">newnerdgeneration.blogspot.com </a>by A. Canilho</td></tr></tbody></table>
<p style="color:white" align=center>2011</p>
</body>
</html>
about.html:
<Html>
<header>
<title>O meu primeiro site</title>
<link rel="icon"
type="image/jpg"
href="cubos.jpg">
</header>
<body bgcolor=black>
<table align="center" border="1" width="80%" height=80% bgcolor=#aaaaff ><tbody><tr><td colspan="2" height=100 background=nng.jpg> <h1 align="center" style="color:gold">O meu primeiro site</h1></td></tr><tr>
<td width="15%">
<h2><a href="site.html">Home</a></h2><br>
<a href="about.html" bgcolor=white><h2 style="background-color:gold;color:black">About</h2></a></td>
<td align=center >
<h1 style="color:DarkBlue">ABOUT</h1>
Descrição do site<br>
<img src="cubos.jpg" align=center height=150 />
</td></tr><tr><td colspan="2" height=30 align=center > <a href="http:\\newnerdgeneration.blogspot.com" target="_blank">newnerdgeneration.blogspot.com </a>by A. Canilho</td></tr></tbody></table>
<p style="color:white" align=center>2011</p>
</body>
</html>
Sem comentários:
Enviar um comentário