Olá meus alunos e minhas alunas.
Hoje iremos aprender algumas noções básicas que vimos na sala de aula e que precisaremos relembrar para iniciarmos o nosso projeto, que é a criação de um site de acordo com o tema que vocês escolheram.
Vimos a maioria desses conceitos apresentados a seguir, porém algumas características específicas como alterar as bordas e cores das tabelas, inclusão de múltiplos atributos em uma tag, entre outros inúmeros recursos.
Então, faça bom proveito desse valioso conteúdo.
Noções Básicas
O código HTML é composto por TAGS (ou comandos), que são usadas no inicio e no final do texto que vai ser afetado pelo código.
Uma tag de inicio é por exemplo a tag <b> e/ou <strong> que é usada para colocar uma porção de texto em negrito. A tag correspondente será </b> que será usada no final desse texto que queremos formatar.
Assim, se quisermos colocar em negrito a palavra "Olá!" na frase abaixo, então o código HTML fica:
| <b>Olá!</b> O meu nome é Camily. |
e o resultado será:
Olá! O meu nome é Camily.
Pode experimentar você mesmo os códigos HTML indicados nesta aula, e ver automaticamente no DreamWeaver o seu resultado, introduzindo-os na página .
Estrutura Básica do Código HTML de um Documento
Comece por definir o layout básico do documento. Pode copiar e colar este código no Bloco de Notas ou outro editor de texto:
<html>
<head>
<title>Título da sua página</title>
<meta name="description" content="Breve descrição da sua página">
<meta name="keywords" content="Palavras chave da sua página">
</head>
<body>
Nesta área fica tudo aquilo que se visualiza no navegador da internet, texto e imagens, juntamente com todos as tags HTML de formatação.
</body>
</html>
|
As tags <html> e </html> dizem ao navegador de internet aonde começa e aonde acaba o código HTML.
As tags <title> e </title> dizem ao browser qual é o título da página. O título pode ser visto identificando o respectivo separador no seu navegador de internet. O texto que for definido entre estas tags é também o texto que é usado como título pelos motores de busca quando apresentam as páginas nos resultados de uma pesquisa.
A tag <meta name="description" ...> é informação que pode ser útil para os motores de busca. Eles podem usar o que você escreveu na descrição para descrever a página quando ela é apresentada nos resultados de uma pesquisa. Ou então, por vezes, os motores de busca usam também uma porção aleatória do que estiver no <body> da sua página.
A tag <meta name="keywords" ...> também pode ser usada pelos motores de busca na indexação da página. Coloque as palavras chave separadas por virgulas no interior desta tag.
Entre as tags <body> e </body> é colocado o conteúdo da página, que é o que é visualizado no browser.
Após inserir os códigos HTML e o conteúdo pretendido, deve-se guardar o ficheiro com a extensão ".html". Ou seja, damos-lhe um nome e acrescentamos a extensão ".html". Ficariamos por exemplo com o ficheiro "index.html". Depois disso, para visualizar a página no browser basta clicar sobre o ficheiro.
Tags Básicas para Fonte e Texto
Itálico: <i>texto</i>
Sublinhado: <u>texto</u>
Negrito: <b>texto</b>
Texto Riscado: <s>texto</s>
Novo Parágrafo: <p>texto</p>
Esta tag inicia um novo parágrafo introduzindo uma linha em branco entre o novo parágrafo e o anterior.
Quebra de linha: <br>
Esta tag faz com que o texto que vier a seguir mude para a linha seguinte. Introduzir esta tag duas vezes seguidas faz o mesmo efeito que a tag de parágrafo.
Centrar: <center>texto</center>
Alinhar texto à esquerda: <p align="left">texto</p>
Alinhar texto à direita: <p align="right">texto</p>
Mudar cor do texto: <font color="red">texto</font>
Pode também utilizar os códigos HEX para definir as mais variadas cores.
Mudar a fonte: <font face="Arial">texto</font>
Mudar o tamanho: <font size="2">texto</font>
(escolher entre 1 e 7)
Atenção:
Pode-se formatar um texto usando várias tags em simultâneo. Assim, por exemplo eu posso formatar um texto em negrito, itálico e sublinhado, colocando todas as tags ao mesmo tempo, acumulando os efeitos:
| <b><u><i>Olá Mundo!!</i></u></b> |
e o resultado é:
Olá Mundo!
Imagens de Fundo e Cores de Fundo
Cor de Fundo
Para usar cores de fundo deve-se procurar uma combinação entre a cor de fundo e a cor do texto que não dificulte a leitura. Normalmente as cores de fundo claras funcionam bem com uma cor de texto escura.
Para usar uma cor de fundo na sua página você deve usar o seguinte código dentro da tag <body>:
<body bgcolor="blue">
Inserir uma Imagem de Fundo
Se você quiser definir uma imagem de fundo use o seguinte código:
<body background="fotos/imagem.jpg">
Lembre-se que "fotos/imagem.jpg" é a localização do ficheiro da imagem. Trata-se de um URL relativo que aponta para a pasta "fotos" que está no seu site. Pode também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada algures na internet. Um exemplo do código da imagem de fundo com URL absoluto é:
<body background="http://www.seudominio.com/fotos/imagem.jpg">
Inserir Imagens
A tag para se inserir imagens é <img src="imagem.jpg"> .
Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:
<img src="fotos/imagem.jpg"> .
Atributo "alt"
O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está activa. A tag fica:
<img src="imagem.jpg" alt="Aniversário da Joana">
Definir Altura e Largura
Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:
<img src="imagem.jpg" width="200" height="100">
Definir Contorno da Imagem
Para o contorno usa-se o atributo "border". O valor 0 faz com que a imagem fique sem contorno. Quanto maior for o valor definido maior é a espessura do contorno. O código pode ser por exemplo:
<img src="imagem.jpg" border="5">
Múltiplos Atributos
Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:
<img src="imagem.jpg" border="5" alt="Aniversário da Joana" width="200" height="100">
Inserir Imagens em Links
Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir):
<a href="http://www.outra_pagina.com"><img src="fotos/imagem.jpg"></a>
Inserir Links
A tag para se inserir links é <a href="http://www.pagina.com">Nome do Link</a>.
O resultado deste código seria:
Abrir links em Novas Janelas
Se você não quer que as pessoas abandonem o seu site quando clicarem nos links, você pode definir seus links para abrirem numa nova janela com o atributo "target='_blank'":
<a href="http://www.pagina.com" target="_blank">Nome do Link</a>
Endereços Absolutos e Relativos
URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço dos sites. É aquele endereço que todos estamos habituados a colocar na barra de endereços do navegador de internet.
Pode-se linkar para outras páginas usando URLs absolutos ou relativos.
URLs absolutos
Um URL absoluto contém o caminho completo para a localização do ficheiro do site que se pretende.
Se por exemplo você quisesse abrir uma página chamada camoes.html, que se encontrava no interior de uma pasta chamada "poetas", e esta pasta se encontrava na raiz do seu site, então o URL absoluto seria:
<a href="http://www.seusite.com/poetas/camoes.html">Camões</a>
É preferível o uso de URLs absolutos em páginas que possam mudar de posição na estrutura de pastas do site. Dessa forma se a página que contém os links mudar de pasta, os links vão continuar a funcionar.
URLs relativos
Um URL relativo indica apenas o caminho a percorrer desde a posição em que estamos.
Se por exemplo estivessemos na página camoes.html (que se encontra dentro da pasta "poetas") e quisessemos linkar para trás para a página principal (para a página index.html da raiz do site), então o URL relativo seria:
<a href="../index.html">Página Principal</a>
os dois pontos, seguidos de uma barra, dizem ao browser para subir um nivel na hierarquia na estrutura de pastas do site.
O URL relativo permite que o site possa ser testado offline, quando tivermos as pastas e os ficheiros html no disco duro. Desta forma os links vão funcionar se abrirmos as páginas do site a partir do disco.
Links Âncora (ou Marcadores)
Um link âncora (ou marcador) é um link interior, é um link para dentro da própria página. É um link que leva o visitante para outra secção da mesma página (em vez de o levar para outra página ou site).
1- Para fazer um link âncora primeiro você deve ir ao local do seu código HTML para onde você quer que o link aponte. Este é o local para onde o seu visitante será encaminhado quando clicar no link âncora. Nesse local defina o seguinte código de link com o atributo "name":
<a name="nome1">Este é o Texto Onde a âncora vai parar</a>
"nome1" é o nome da âncora que você escolhe.
2 - Agora para linkar para aquele local da página, use a tag para links, e no endereço é só colocar cardinal seguido do nome escolhido para a âncora:
<a href="#nome1">clique aqui</a>
Link para E-mail
Para criar um link que permite que os seus visitantes lhe enviem e-mails basta colocar a função "mailto" na tag de link:
<a href="mailto:seuendereço@email.com">Envie-me um Email</a>
Mudar as Cores dos Links
Por defeito os links têm a cor azul. Mas você pode alterar as cores usando o código "link" no interior da tag <body> . Exemplo:
<body link="red" vlink="green" alink="yellow">
- link - cor dos links, vermelho neste caso
- vlink - links visitados, verde neste caso
- alink - links activos, amarelo neste caso
Você pode também usar os códigos HEX para definir estas cores:
Códigos HEX das Cores
Clique para selecionar uma cor e depois poderá copiar e colar o respectivo código HEX:
ou então copie diretamente do seguinte quadro o código da cor desejada:
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Criar Tabelas
Perceber como funcionam as tabelas em HTML é muito importante. Com elas podemos fazer muita coisa no design do nosso site. Podemos ordenar o nosso conteúdo de uma determinada forma, podemos ordenar imagens lado a lado, ou em fila, podemos criar colunas para o layout do site, criar uma barra lateral, etc.
Tags de tabela básicas
São 3 as tags básicas para inserir tabelas:
- <table> é a tag que inicia e finaliza uma tabela
- <tr> significa "table row"( linha de tabela), é a tag que representa uma linha na tabela
- <td> significa "table data" (dados da tabela), é a tag que representa uma célula da tabela dentro da linha
Vamos então criar uma tabela simples:
<table>
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
e o resultado desta tabela é:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Reparem que a tabela tem 3 linhas e 2 colunas. Reparem no código HTML acima como cada <tr> é uma linha. Como abrimos 2 tags <tr> vamos ter 2 linhas. E reparem como no interior de cada linha temos 3 tags <td> o que vai resultar em 3 células por cada linha, ou 3 colunas no aspeto final da tabela.
Definir um Contorno para a Tabela
Para definir um contorno para uma tabela basta colocarmos no atributo "border" a espessura do contorno que queremos:
<table border="2">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
e o resultado é:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Alterar a Cor do Contorno da Tabela
Para alterar o contorno da tabela colocamos no atributo "bordercolor" a cor que pretendemos:
<table border="2" bordercolor="red">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
neste caso vamos ter uma tabela com um contorno vermelho:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Definir Espaço que Envolve as Células - CELLSPACING
Podemos aumentar ou diminuir o espaço que envolve as células no interior da tabela. Para isso usamos o atributo "cellspacing".
<table border="2" cellspacing="15">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
temos assim:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Definir Espaço no Interior das Células - CELLPADDING
Para aumentar ou diminuir o espaço no interior das células usamos o atributo "cellspadding".
<table border="2" cellpadding="10">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
vejam como fica:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Definir a Largura de uma Tabela
Para definirmos a largura de uma tabela usamos o atributo "width". O valor pode ser em pixels ou em percentagem.
Se usarmos uma percentagem, por exemplo um valor de 100%, a tabela vai ocupar todo o espaço disponivel dentro da secção onde se encontra.
<table border="2" width="100%">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
resultado:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Se usarmos um valor em pixels, por exemplo 400px, a tabela vai ter uma largura fixa de 400px.
<table border="2" width="400">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
o resultado final desta tabela:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Definir a Largura das Colunas
Se não quisermos que todas as colunas tenham a mesma largura temos que definir um atributo de largura dentro da tag <td>. Se usarmos percentagens temos por exemplo o seguinte código:
<table border="2" width="400">
<tr> <td width="50%">Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td width="50%">Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>
e o resultado da tabela:
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
Reparem que nas duas linhas tivemos que definir uma largura de 50% para a primeira coluna. Se para as restantes colunas não definirmos nenhum valor, o espaço que sobra vai ser dividido de forma automática igualmente por todas elas.
Se usarmos um valor em pixels, por exemplo 250px, a primeira coluna terá 250px de largura e o que sobra vai para as restantes colunas até ao total 400px que é a largura definida para a tabela:
<table border="2" width="400">
<tr> <td width="250">C1</td> <td width="75">C2</td> <td width="75">C3</td> </tr>
<tr> <td width="250">C4</td> <td width="75">C5</td> <td width="75">C6</td> </tr>
</table>
o resultado da tabela:
Em cada linha a soma dos valor de largura definido para as colunas totaliza o valor da largura da tabela 250+75+75=400.
Definir a Altura de uma Tabela
Podemos também definir uma altura para a tabela adicionando o atributo "height":
<table border="2" height="200" width="400">
<tr> <td width="250">C1</td> <td width="75">C2</td> <td width="75">C3</td> </tr>
<tr> <td width="250">C4</td> <td width="75">C5</td> <td width="75">C6</td> </tr>
</table>
resultado:
Alinhamento Horizontal do Conteúdo das Células
Por defeito o conteúdo das células está alinhado à esquerda, mas é possivel também centrar o conteúdo e alinhar à direita. Para isso usamos o atributo "align" no interior da tag <td>:
<table border="2" width="400">
<tr> <td width="250" align="center">C1</td> <td width="75">C2</td> <td width="75">C3</td> </tr>
<tr> <td width="250" align="center">C4</td> <td width="75">C5</td> <td width="75">C6</td> </tr>
</table>
resultado:
Se quisermos alinhar à direita temos que usar align="right".
Alinhamento Vertical do Conteúdo das Células
Por defeito os dados ficam alinhados verticalmente no meio (middle) da célula, mas é possivel também alinhar o conteúdo e alinhar para o fundo (bottom) e para o topo (top) da célula. Para isso usamos o atributo "valign" no interior da tag <td>:
<table border="2" height="200" width="400">
<tr> <td width="250" valign="bottom">C1</td> <td width="75">C2</td> <td width="75">C3</td> </tr>
<tr> <td width="250" valign="top">C4</td> <td width="75">C5</td> <td width="75">C6</td> </tr>
</table>
resultado:
Reparem como o C1 ficou alinhado pelo fundo e o C4 pelo topo da célula.
Definir Listas
Lista numerada:
Para apresentar uma lista de itens numerada usamos a tag <ol>, iniciais de "ordered list", para a lista. E a tag <li>, iniciais de "list item", para cada item:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
e o código resulta em:
- Item 1
- Item 2
- Item 3
Lista não numerada:
Para apresentar uma lista de itens não numerada usamos a tag <ul>, iniciais de "unordered list", para a lista. E a tag <li>, iniciais de "list item", para cada item:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
e o código resulta em:
Comentários
Os comentários em qualquer linguagem de programação é muito útil pois ajuda a identificar o que faz determinado comando dentro do seu site.
A tag de comando é muito simples
Início do comando <!-- Tudo que você digitar aqui dentro não afetará o site e servirá para a identificação dos seus comentários --> Fim do comando
<!--
Isto é um comentário
<B>Ao ser um <i>comentário</i></B> não aparecerá nada na página
<p>Nem as etiquetas HTML terão valor</p>
-->
Caracteres Especiais
Código
|
Carácter
|
Descrição
|
| < |
<
| Menor que |
| > |
>
| Maior que |
| ™ |
™
| Trademark |
| & |
&
| Ampersand |
| ® |
®
| Marca Registada |
| © |
©
| Copyright |
| † |
†
| Cruz |
| " |
"
| Aspas |
| » |
»
| Seta de citação |
| « |
«
| Seta de citação |
| — |
———
| Tracejado |
| ° |
20°
| Grau |
| ¼ |
¼
| Um quarto |
| ½ |
½
| Um meio |
| ¾ |
¾
| Três quartos |
| · |
·
| Ponto no meio |
| ¡ |
¡
| Ponto exclamação invertido |
Para conseguir que apareça no seu site um dos simbolos da coluna amarela, basta colocar o respectivo código no HTML da página.
Até a próxima!!!
