Curso De HTML

Felinto

16:11

Produzindo uma página WEBpor Denis Master

Esta página foi feita com o objetivo de lhe fornecer informações suficientes para você fazer aprender a fazer um pagina HTML simples.

Quais as ferramentas para começar a aprender HTML?
Basicamente precisa-se de duas coisas: um editor de textos (bloco de notas ou wordpad) e um navegador (internet explorer ou netscape).

Importante saber!
* Fazer páginas web não é um bixo de sete cabeças.
* Fazemos e armazenamos nossas paginas web em nosso próprio computador. Deste modo elas não estão disponíveis na internet ainda. Elas só vão estar disponiveis na internet quando as enviarmos para algum servidor web.
* Ter curiosidade para testar os comandos html é fundamental.
* Organização é fundamental: crie uma pasta para salvar suas páginas web e as imagens que vc usa pois assim fica muito dificil de você se perder.
* Os pré requisitos para se começar a estudar web design são saber usar arquivos de texto, salvar arquivos, renomear, criar pastas e saber navegar na net.
* Os arquivos são diferenciados primariamente por sua extensão, ou seja, aquelas 3 ou 4 letras depois do ponto. Ex: sorria.jpg (arquivo de imagem), index.html (página web), joguinho.exe (programa). Ajuda muito este conhecimento neste curso!

Mas como isso funciona?Usamos o bloco de notas para escrevermos os comandos HTML.
Este conjunto organizado de comandos HTML chamamos de Código Fonte.
Para criar a página web basta gravar o fonte, escrito no editor de texto, com um nome qualquer com extensão .htm ou .html.
Após a gravação ela pode ser visualizada usando um navegador, por exemplo o internet explorer:

* Nesta figura podemos ver uma página web chamada index.html salva na pasta chamada "meu_site". Ela fica com o simbolo do internet explorer porque é o navegador padrão da maquina onde esta foto foi tirada. Se fosse o navegador Netscape o ícone seria outro.

No final desta primeira lição você pode conferir um passo a passo para facilitar sua aprendizagem.
Começando!!!
Pra começar a praticar é importante saber onde os comandos HTML devem ser colocados no arquivo fonte e como que eles serão lidos pelo navegador.
Abaixo podemos observar na esquerda no programa bloco de notas alguns comandos html. Esses comandos são como um esqueleto da pagina web pois eles indicam onde nós colocaremos comandos para que o navegador possa interpretá-los.

Estes comandos HTML que aparecem no bloco de notas da figura da esquerda são a estrutura básica de uma página HTML sendo que:1 - <html> indica para o navegador que ele irá ler uma página html e que </html> determina o fim da página.
2 - <title> serve para indicar o titulo da página. Portanto tudo o que escrevermos de <title> até </title> será mostrado no topo do navegador como titulo da página. O titulo desta página por exemplo (olhem lá em cima) é "Iniciação ao HTML".
3 - <body> até </body> é o espaço onde se deve colocar os textos, comandos de formatação de texto, comandos de inserção de imagens, etc. Portanto, tudo o que escrevermos entre estas tags aparecerá no corpo da pagina web. Esta parte é a parte principal para nós que estamos começando a aprender HTML. Lembrem-se de que devemos colocar os comandos e textos somente entre <body> e </body>!!

Exemplo Prático 1

Este exemplo tem por objetivo mostrar como o Navegador interpreta o que é escrito no codigo fonte. É bom que você entenda muito bem essa parte!
Imagine que queremos fazer uma página que se chame "Dias da Semana" e que apareça uma lista dos dias em nossa pagina web. Observe este codigo fonte...

Agora observem o que o navegador mostrou:

Conclusões...
Pois é, saiu diferente do jeito que foi escrito no código... por quê?
É caracteristica dos navegadores não darem bolas pros espaços a mais que colocamos entre as palavras e nem pro nosso ENTER que quebra a linha em editores de texto. Ele irá somente reconhecer um espaço entre cada palavra. Para realmente o navegador mostrar um quebra de linha ou mais de um espaço entre palavras devemos usar comandos que façam isso.
Ah, mas o titulo saiu direitinho, pelo menos!

Podemos chamar os comandos HTML de TAGS
ou seja
TAGS = Comandos HTML

Exemplo Prático 2

Vamos deixar um pouco mais claro. Observe as seguintes alterações no codigo fonte anterior..

Com o acréscimo de alguns comandos o navegador mostrou o seguinte:

Agora saiu bonitinho, não acham?
No caso, o comando <font> coloriu de vermelho (por causa do atributo COLOR=red) as palavras "Os dias da semana são:" e o comando <br> fez a quebra de linhas.
Quase ia esquecendo... viram que o comando <i> fez itálico na palavra domingo?
Pergunta: Porque "segunda, terça, quarta, quinta..." não ficaram em vermelho?
Ah, olhem bem o comando </font>. Foi ele que fez a formatação em vermelho acabar por ali... mas se não tivesse esse comando, certamente tudo iria ficar bem vermelho!
Mas esse </font> só termina o comando font, porque pros outros comandos é diferente, mas é bem fácil... se o comando inicial é <i>, por exemplo, ele vai terminar em </i>.

Usar as TAGS é relativamente fácil...Geralmente nossas TAGS são compostas de um inicio e um fim.
O inicio e o seu fim delimitam um trecho de texto que sofrerá um efeito. Por exemplo o caso do itálico na palavra "Domingo". Ele ficou em itálico porque foi isolado pelas TAGs <i> e </i>.
Existem também tags que são solitárias... como o <BR>: ele quebra a linha e pronto!
Existem TAGS que fazem um monte de coisas ao mesmo tempo, dependendo do que queremos: por exemplo a TAG <FONT>. No exemplo anterior a usamos (com ajuda do seu atributo COLOR) para colorir de vermelho uma frase. Mas se quiséssemos mudar o tamanho da letra e a cor ao mesmo tempo bastariamos adicionar outro atributo a <FONT>. No caso o comando ficaria assim:

<FONT COLOR="RED" SIZE="5"> Os Dias da Semana são: </FONT>
Nas próximas aula veremos com calma esses comandos! Por enquanto é só uma palhinha... mas quem sabe antes de ir pra próxima aula você possa tentar este exercício abaixo?

Prontos para fazer sua própria página?

Vamos a um exercício!
Faça uma página WEB com o titulo "Minha Pagina HTML". No corpo da página deverá aparecer as palavras "Meus dados pessoais" de forma centralizada e na cor que vc mais gosta. Abaixo deverá aparecer seus dados pessoais listados um abaixo do outro (Nome, Endereço, Telefone, E-mail, Esportes preferidos, Tipos de Musica Preferidas). As respostas devem aparecer sublinhadas
A seguir os passos e comandos necessários:

1 - Abra o bloco de notas.
2 - Escreva antes de tudo a estrutura básica HTML.
3 - Para fazer o corpo da página vc irá utilizar estes comandos:
<CENTER> </CENTER> - serve pra centralizar palavras, imagens, tabelas.

<FONT> </FONT> - serve pra definir cor(atributo COLOR="cor"), tamanho(SIZE="tamanho") e tipo de letras(FACE="tipo")

<BR> - define quebra de linha. Este é um comando que não tem terminação com /.

<U> </U> - sublinha palavras.

4 - Faça uma pasta em seu HD e nela salve sua página com o nome de index.html (IMPORTANTE- Na caixa de dialogo opte por Salvar com o tipo: todos os arquivos *.*)
5 - Depois de salvo vá até a pasta onde salvou e abra o arquivo index.html para ver como ficou sua página.
6 - Se algo saiu errado, altere o código fonte, salve de novo e clique no botão atualizar de sua página web

Explorando os comandos FONT e IMGpor Denis Master

Na Lição anterior vimos que existe alguns comandos que devem ser escritos no bloco de notas antes de começar a montar a página. Dizemos que estes comandos são a estrutura basica do HTML pois eles definem o que e onde será mostrado pelo browser.
É interessante saber que os comandos de HTML são chamados de TAGS. Você já deve ter reparado que algumas tags tem que ter um complemento, por exemplo <b> com seu complemento </b>, e outros não precisam, como a tag <br>.
No final da aula anterior você deve ter feito um exercicio que já lhe deu uma boa idéia que HTML não é tão difícil quanto parece a princípio. Se por ventura você não conseguiu ter muito sucesso com o exercicio da primeira lição então verifique se não ocorreu estes casos comuns com você:
* Eu salvo mas não aparece minha pagina web, fica sempre texto.- Correção: na hora de salvar o fonte marque a opção "Salvar como: todos os arquivos *.*", dê um nome com extensão .html (EX: index.html, fotos.html) e clique OK.
* Fiz a pagina mas o navegador não mostra nada.- Correção: Você deve colocar a estrutura HTML direitinho, se algum comando não tiver seu complemento corretamente escrito provavelmente haverá coisas sumindo na sua página.
* Tá tudo de uma cor só.
Correção: Procure a tag Font que está mandando dar essa cor, ou ela esta escrita aberta ou sem complento </font>
* Centralizei o Titulo direito mas todo o resto ficou centralizado também.
- Correção: Logo após o titulo complemente o comando center com </center>.
Antes de explorar os comandos FONT e IMG, vamos registrar aqui os comandos básicos de formatação da fonte:

Para Negrito: <b> </b> ------ Negrito
Para Itálico: <i> </i> ------ Itálico
Para Sublinhado: <u> </u> ------ Sublinhado
Para Riscado: <s> </s> ------ ~~Riscado~~
Comando <FONT> </FONT>Este comando é usado para formatar a cor, tamanho e ou tipo de letra das palavras.
Sintaxe completa:
<FONT COLOR="cor" SIZE="tamanho" face="tipo"> texto </FONT>
A cor deve ser escrita em inglês ou em código RGB. O tamanho da letra é definida em um numero de 1 a 7, onde 1 é o menor e 7 o maior.
O tipo de letra é o nome da fonte que se quer visualizar. Ex. Arial, Times, Verdana. O padrão é times.

Exemplo usando os três atributos
<FONT COLOR="brown" SIZE="5" face="arial"> Texto </FONT>
Comando <IMG SRC>É uma tag usada para inserir imagens na pagina web.

Alterando o tamanho e colocando mensagens em uma imagem:

Agora vamos ver como alterar o tamanho da imagem(em pixels) e como colocar uma mensagem alternativa que pode ser visualizada com o ponteiro do mouse em cima da foto.
Se não definirmos o tamanho da imagem, ela será exibida no tamanho original.
Sintaxe:
<IMG SRC="endereço imagem" WIDTH="largura" HEIGHT="altura" ALT="mensagem">
O endereço da imagem deve ser escrito completo quando você estiver inserindo imagem de outros sites. Quando a imagem estiver no seu próprio site e na mesma pasta da pagina html basta informar o nome da imagem ou se a imagem estiver dentro de uma pasta basta informar o nome da pasta e em seguida o nome da imagem.

Exemplos

<IMG SRC="yoshi.jpg" WIDTH="100" HEIGHT="200" ALT="Olá Pessoal">

<IMG SRC="http://guiahtml.vila.bol.com.br/yoshi.gif" ALT="Tchau Pessoal">

Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador.
Alinhando imagens e texto:

É possível alinhar imagem e blocos de texto com utilizando-se do atributo ALIGN dentro do comando IMG, informando a este atributo se a imagem ficará na esquerda ou na direita(left ou right).

Exemplos

<IMG SRC="yoshi.jpg" ALIGN="LEFT" > texto...

Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador. Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador. Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador.

<IMG SRC="imagens/yoshi.gif" ALIGN="RIGHT">texto...

Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador. Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador. Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador. Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador.

Colocando Borda em uma imagem:

Você pode inserir um borda em uma imagem usando o atributo Border, basta informar a este atributo o tamanho que você quer que a borda tenha:
No caso da sua imagem ser um link ela automaticamente criará uma borda mesmo que você não use o atributo border. Se você não quer que sua imagem, qué é link, tenha borda, use o atributo Border="0"

Exemplo

<IMG SRC="imagens/yoshi.gif" BORDER="10">

Efeitos especiais Ipor Denis Master

Nesta lição falaremos sobre alguns recursos HTML que servem para deixarmos nossas páginas um pouco mais interessantes.

Comando <HR>

Este comando faz aparecer na página web uma linha horizontal. Seus atributos são:
SIZE - Define a espessura da linha.
WIDTH - Define o comprimento horizontal da linha.
COLOR - Define a cor da linha. A cor pode ser dada por uma cor escrita em inglês ou por código.

Exemplo

<HR COLOR="RED" SIZE="4" WIDTH="600">
Como resultado você pode ver abaixo uma linha vermelha, com 4 pixels de espessura por 600 pixels de comprimento:

Este comando pode ser usado sem nenhum atributo, sendo que, neste caso, será exibida um linha cinza, de espessura de 1 pixel e todo o comprimento de tela possível (fora de uma tabela ou do efeito do comando BLOCKQUOTE).

Comando <MARQUEE>

Este comando faz um letreiro ou uma imagem correr horizontalmente ou verticalmente pela página.
Atributos de largura e direção do efeito permitem diversas apresentações diferentes(para o Internet Explorer e em versões recentes do Netscape, de maneiras diferentes). Seus atributos são estes:

BEHAVIOR - Define o tipo de efeito: SCROLL, SLIDE, ALTERNATE.
DIRECTION - Define a direção do efeito: LEFT (esquerda), RIGHT (direita), Up (para cima) ou Down (para baixo).
WIDTH - Define, em pixels ou %, o comprimento horizontal do efeito.
HEIGHT - Define, em pixels ou %, o comprimento vertical do efeito.
BGCOLOR - Serve para definir a cor de fundo do letreiro. A cor pode ser dada por uma cor escrita em inglês ou por código.
ALIGN - Alinha o texto/imagem: "top" (no topo), "middle" (no meio) ou "bottom" (em baixo).
SCROLLAMOUNT - Especifica, em pixels, de quantos em quantos pixels o texto aparecerá na tela. Assim pode-se definir a velocidade de deslocamento do letreiro pois quanto maior o número, maior será a velocidade.
SCROLLADELAY - Especifica, em milissegundos, o tempo que o texto/imagem permanecerá na tela, assim, quanto menor o numero, maior será a velocidade.
HSPACE - Determina, em pixels, as margens esqueda e direita.
VSPACE - Determina, em pixels, as margens superior e inferior.
VSPACE - Determina, em pixels, as margens superior e inferior.
LOOP - Determina o numero de vezes que o texto rolará na tela. Sem usar este atributo, por padrão, o numero de vezes é infinito.

Este comando pode ser usado sem nenhum atributo, sendo que, neste caso, o efeito saírá da direita para esquerda e será so tipo SCROLL, por todo o comprimento de tela possível (fora de uma tabela ou do efeito do comando BLOCKQUOTE).
Exemplos

<MARQUEE BEHAVIOR="scroll" DIRECTION="right">Guia HTML</MARQUEE>
Guia HTML
<MARQUEE BEHAVIOR="alternate" WIDTH="400">Guia HTML</MARQUEE>
Guia HTML
<CENTER>
<MARQUEE BEHAVIOR="alternate" WIDTH="200"><IMG SRC="yoshi.gif"></MARQUEE>
</CENTER>

<MARQUEE DIRECTION="up" WIDTH="220" HEIGHT="50" SCROLLAMOUNT="2" BGCOLOR="SILVER">
<B><I>
HTML avançado... <BR>
que nunca nos passam...<BR>
Aqui você vai encontrar! <BR>
</I></B></MARQUEE>
HTML avançado...
que nunca nos passam...
Aqui você vai encontrar!

Efeitos Especiais do <BODY>
Agora veremos como fazer para mudar a cor do fundo ou colocar uma imagem de plano de fundo das páginas web através dos atributos BGCOLOR e BACKGROUND.

Definir a Cor de Fundo:

No comando BODY insira o atributo BGCOLOR="cor". A cor pode ser dada por uma cor escrita em inglês ou por código.

Exemplo:

Definir um plano de Fundo:

No comando BODY insira o atributo BACKGROUND="imagem". Procure usar imagens do tipo GIF ou JPG em suas páginas web pois elas são de boa qualidade e são mais leves que outros tipos e portanto a página demora menos para ser exibida no navegador.
Pode-se ainda acrescentar o atributo BGPROPERTIES com o valor "fixed" para fixar a imagem na tela.

Exemplo:

Exercício
Nos links abaixo você encontrará a imagem de duas páginas web diferentes. Seu trabalho, neste exercicio é de construir uma página idêntica a desta imagem. Você pode escolher qualquer uma das duas para fazer(a fácil ou a dificil). Use somente os comandos vistos nestas três ultimas aulas.
Após terminar mande o código fonte para meu e-mail para correção.
Pagina +- Fácil
Página +- Difícil

Alinhamentopor Denis Master

Agora que estamos mais familiarizados com o HTML podemos começar a falar sobre comandos de alinhamento que servem para posicionar os objetos e textos, como nós desejarmos, em nossas páginas. Alguns desses comandos vimos e utilizamos desde a primeira aula, no caso o <CENTER> e o <BR>, devido sua simplicidade: mesmo assim vamos relembrá-lo agora destes comandos e acrescentar outros para que você possa ficar cada vez mais expert em HTML.

Comando <BR>

Este comando força a quebra de linha.
É usado geralmente após o fim de um parágrafo ou para simplesmente fazer o espaçamento horizontal na página:
Exite um atributo para este comando, mas é raramente utilizado: o <BR CLEAR=ALL> - que só é recomendado utilizar após uma figura para que, com isso, as palavras e ou outros objetos sejam postos imediatamente abaixo da figura. Em outras palavras, poupa tempo por não escrever vários <BR>.
Comando <CENTER>

Este comando centraliza texto e objetos.
Sua sintaxe é simples:

<CENTER>textos ou objetos a centralizar</CENTER>

Comando <H>

É utilizado para criar uma espécie de Título ou Cabeçalho, com padrões pré-definidos.
Existem seis padrões de cabeçalhos, variando do maior <H1> até o menos que é o <H6> Além do tamanho, pode-se usar o parâmetro align para alinhar o cabeçalho: center (centralizar), left (esquerda), right(direita), justify (justificado).
Sintaxe/exemplos:

<H1>Isto vai aparecer grande</H1>
<H6 ALIGN="center">Pequeno e centralizado</H1>

Comando <DIV ALIGN>

Este comando é usado para alinhar blocos de texto: a direita, a esquerda, justificado ou centralizado.
Sua sintaxe é:

<DIV ALIGN="tipo de alinhamento">bloco de texto e ou objetos</DIV>
Os tipos de alinhamento possíveis são estes: center (centralizar), left (esquerda), right (direita), justify (justificado).

Comando <P ALIGN>

Este comando é usado para alinhar blocos de texto: a direita, a esquerda, justificado ou centralizado.
Este comando se diferencia do comando <DIV> porque que entre um bloco de textos e outros, o <P> faz pular uma linha enquanto o <DIV> não.
Sua sintaxe é:

<P ALIGN="tipo de alinhamento">bloco de texto e ou objetos</P>
Os tipos de alinhamento possíveis são estes: center (centralizar), left (esquerda), right (direita), justify (justificado).

Comando <BLOCKQUOTE>

Este comando é usado para exibir o texto e objetos, sob seu controle, com espaçamento horizontal em suas margens esquerda e direita.
Se simplesmente escrevermos um texto ele naturalmente será exibido logo apartir da margem esquerda e mudará de linha ao alcançar a margem esquerda mas com o uso do comando BLOCKQUOTE este texto sofreria um pequeno espaçamento horizontal (mais ou menos 1 centímetro) em suas margens esquerda e direita.
Sua sintaxe é:

<BLOCKQUOTE>texto e ou objetos</BLOCKQUOTE>

Usando o comando BLOCKQUOTE dentro de outro BLOCKQUOTE o texto ficará ainda mais longe da margem.

Exercício
Faça uma página web segundo as dicas abaixo:

1 - Procure na internet algum artigo qualquer de seu interesse mas que seja mais ou menos comprido. 2 - O Titulo (<TITLE>) da página web deve ser o título do artigo.
3 - O corpo da página deve ser branco.
4 - Agora use o comando <H2> para escrever o titulo do artigo.
5 - Formate o título do artigo de modo que ele fique com alinhamento centralizado, em negrito, sublinhado e de cor vermelha.
6 - A fonte das palavras do texto devem ser do tipo arial, tamanho 2 e cor preta.
7 - Todo o texto deve estar sob o controle de um <BLOCKQUOTE>
8 - Use o comando <DIV> para justificar todo o texto e para começar novos parágrafos.
9 - No fim do texto coloque o nome do autor do artigo alinhado a direita e em itálico. 10 - No final crie uma linha horizontal azul, escreva seu nome centralizado e com letras de tamanho 1, da cor que quizer, e crie outra linha horizontal.
11 - Salve sua página com nome de capitulo1.html
12 - Agora substitua todos os <DIV> por <P> e veja se ficou diferente.
13 - Salve esta pagina alterada como capitulo2.html.14 - Qual ficou mais bonita?

Após terminar sua página, veja se ela se parece com a página de um livro pois se sim, vc fez direitinho.
Se quizer mandar seus trabalhos para correção mande o código fonte para meu e-mail.

Linkspor Denis Master

Links ou hiperlinks são meios de ligação entre páginas web ou entre locais dentro da mesma página (âncoras). Um link é reconhecido em uma página por estar em cor normalmente diferente do resto do texto e, ao passar com o mouse sobre esse texto o cursor muda para uma mão apontando para o link.

Comando <A HREF>

Este comando é o responsável por criar os links em nossas páginas web.
Link para outras páginas:

Sua sintaxe básica é esta:

<A HREF="endereço para onde se quer ir"> Texto do Link </A >

Exemplos comentados:
<A HREF="index.html"> Clique Aqui </A>
Este exemplo criará um link que acessa a página web de nome index.html que está na mesma pasta do documento atual. Para linkar paginas alocadas na mesma pasta do servidor web não se necessita colocar o endereço completo.

<A HREF="http://www.sol.com.br/flores.html"> Clique Aqui </A>
Este link acessa a página flores.html que está no site www.sol.com.br. Para linkar páginas de outros sites é necessário colocar o endereço completo da página onde se quer ir.

O parâmetro TARGET

O comando <A HREF> pode definir, usando o parâmetro TARGET, onde a pagina web irá abrir quando o usuário clicar no link.
Seus atributos mais usados são:
TARGET="_self" - Abre a nova página na janela atual.
TARGET="_blank" - Abre a nova página sempre em nova janela.

Exemplo:
<A HREF="aula4.html" Target="_blank"> Aula 4 </A>
+ Aula 4 +

Aqui está o código de um link que servirá para abrir a página aula4.html em uma nova janela.

O parâmetro TITLE

Este parâmetro tem a função de pôr uma mensagem em cima de um link. Tem a mesma finalidade do parametro ALT usado em imagens. Para visualizar a mensagem do link basta deixar o ponteiro do mouse em cima do link por alguns segundos.

Exemplo:
<A HREF="aula5.html" TITLE="Estude HTML"> Aula 5 </A>

* Aula 5 *

Ao pousar o cursor do mouse sobre o link irá ser exibido a mensagem "Estude HTML".

Âncoras

Este recurso serve para fazer links que acessam locais da própria pagina web.
Se você está fazendo uma página muito grande e que será dividida em vários tópicos pode-se dar um endereço de referência a cada um deles para serem acessados rapidamente por meio de links que são geralmente dispostos no inicio do documento (como um índice).

Em outras palavras uma Âncora é uma referência dentro de uma página HTML que pode ser acessada por um link.

Para se criar uma âncora em algum lugar da página deve se dar um nome de referência para o link poder acessá-lo.

Criando a Âncora:

<A NAME="nome de referencia">

Este nome de referencia é uma palavra que você mesmo cria. Note que este comando fica invisível aos visitantes. Ele apenas marca um local da página web para que os links (estes sim visíveis e provavelmente dispostos no início da página) possam acessá-los.
Para se criar o link que acessará a âncora usa-se o comando:

<A HREF="#nome de referência"> Texto do Link </A>

Atenção: sinal de cerquilha (#) deve anteceder o nome de referência do link, pois avisa ao browser que ele irá procurar uma âncora.

Exemplo:

<A HREF="exercicio"> Vai para o exercicio de hoje </A>

Vai para o exercicio de hoje

Aqui está o link que irá acessar a âncora disposta no final desta página. A âncora foi criada como comando <A name="trabalho"> no local exato do tópico Exercicio desta página. Note que o nome referencia utilizado foi a palavra trabalho.
É possivel criar um link para acessar uma âncora disponível em outra página web. É só nomear a âncora na página que você quer e em sua página atual fazer o link com o nome da página seguido pela âncora

Exemplo:

<A HREF="aula2.HTM#imagem"> Estude o comando IMG </A>

Estude o comando IMG

Neste exemplo, ao clicar no link, você irá acessar a âncora imagem criada na página aula2.html. Note que esta âncora foi criada com o simples comando <A name="imagem"> no local exato do topico sobre inserção de imagems da aula 2. O nome referencia utilizado desta vez foi a palavra trabalho.

Exercício (pode ser feito em duplas ou trios)
Faça uma unica página com conteúdo sobre um destas três sugestões: Evolução do DOS aos Windows(tipos de windows), Dicas de Windows, Computador e seus componentes:

1 - Divida o conteúdo em tópicos, crie âncoras em todos estes tópicos.
2 - Faça um índice/sumário com os links para acessar as âncoras.
3 - Use o background desta página para fazer a sua.
4 - O Design é por sua conta.
5 - No final use links para listar sites com bom conteúdo sobre seu assunto.
6 - Assine seu trabalho e coloque seu e-mail de contato.
7 - Se você quizer vamos publicar aqui no site o seu trabalho.

Tabelas - 1ª Partepor Denis Master

*** Revisado por Jorge Carioca ***

Somente com os comandos de alinhamento, existentes em HTML, nem sempre é possível deixar os textos, imagens e etc, do jeito que o webdesigner deseja. Para complementar os recursos de alinhamento existem as Tabelas que, por sua vez, podem estruturar uma página para receber os textos, imagens e etc, auxiliando o webdesigner a realizar seu realizar seu projeto como planejado.
O layout e o conteúdo da maioria das páginas são feitas com tabelas. Elas são necessárias para posicionar os objetos em uma página web de maneira mais precisa. A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional. Aprender a fazer e utilizar as tabelas é muito importante!

Comentários em uma página HTML

Quando se utiliza tabelas, principalmente para iniciantes, o código HTML pode parecer muito difícil de se ler. Portanto, antes de se aprender a montar uma tabela é importante saber organizar o código fonte e assim evitar confusões.
Para auxiliar na organização do código podemos inserir comentários dentro do código através do comando mostrado abaixo. Estes comentários ficarão visíveis somente no código fonte.



Como visto acima, fazer um comentário no código é simples. É só escrever o comentário dentro de . É claro que só os comentários não bastam para tornar o código fonte mais legível mas também devemos ter bom senso no modo de escrevermos os códigos.
Geralmente escrever um comando em cada linha ajuda muito a leitura no código fonte, bem como não escrever todos os comandos a partir da margem esquerda.

Um exemplo de código organizado:

Montando Tabelas

Para fazer uma tabela utilizamos três comandos:
<TABLE> - Para inserir a tabela.
<TR> - Para inserir uma linha
<TD> Para inserir uma coluna

Para fechar estas TAGS utilizamos </TD>, </TR> e </TABLE>.

Como a tabela mais simples tem somente um célula e esta é formada por uma linha e uma coluna, a tabela mais simples fica assim:

Note, no exemplo, que primeiro abrimos uma linha para depois abrir uma coluna.
Note, também, que primeiro fechamos a coluna para depois fechar a linha.
Faça sempre assim!!

Importante: Os dados, imagens e etc, dentro de uma tabela, devem ser inseridos somente entre as tags <TD> </TD>.

Agora vamos para um exemplo mais complicado: Uma tabela com duas linhas e duas colunas:

Regra básica: Numa linha podemos colocar N colunas , mas se quisermos ter outra linha na tabela, devemos colocar exatamente o mesmo número de colunas que a primeira linha. (Fugir desta regra é possível, mas será apresentada em outra aula).

Veja o resultado no Navegador Internet Explorer:

Propriedades das Tabelas

Existem vários atributos que podemos configurar nas tabelas, tais como colocar bordas, aumentar o tamanho e cor das bordas, adicionar plano de fundo em cada célula, aumentar ou diminuir a largura de uma célula, inserir cor de fundo dentro da célula etc.

Atributos do comando <TABLE>

Atributo Border - Especifica a visibilidade da borda e ou a espessura da borda
Por padrão uma tabela não apresenta bordas. Quando utilizamos o atributo border com valor diferente de zero definimos sua visibilidade e proporcional espessura. Nos dois primeiros exemplos desta página o atributo border foi utilizado com dois pixels de espessura.

Atributo bordercolor - define a cor de toda borda

Exemplo:

<TABLE border="10" bordercolor="red">
<TR>
<TD>Oh Yes!!</TD>
</TR>
</TABLE>

Efeito:

Oh Yes!!

Atributo bordercolorlight - define a cor da borda lateral esquerda e superior
Atributo bordercolordark - define a cor da borda lateral direita e inferior

Exemplo:

<TABLE border="10" bordercolorlight="yellow" bordercolordark="purple">
<TR>
<TD>YMCA!!</TD>
</TR>
</TABLE>
Efeito:

YMCA!!

Atributo WIDTH - define a largura da tabela. Pode ser configurado em numero de pixel ou em porcentagem
Atributo HEIGHT - define a altura da tabela. Pode ser configurado em numero de pixel ou em porcentagem

Exemplo:

<TABLE border="2" width="50%" height="80">
<TR>
<TD>YMCA!!</TD>
</TR>
</TABLE>
Efeito:

YMCA!!

Atributo Background - Insere uma imagem de plano de fundo na tabela. Use somente imagens GIF ou JPG.

Exemplo:

<table background="yoshi.gif" border="1" bordercolor="blue" width="160" height="210">
<TR>
<TD> Olá Pessoal</TD>
</TR>
</TABLE>
Efeito:

Olá Pessoal

Atributo Cellspacing - Define, em pixels, um espaço entre as células da tabela.

Exemplo:

<table border="2" width="240" height="120" cellspacing=10>
<TR>
<TD> <font face=wingdings size=6> J </font> </TD>
</TR>
<TR>
<TD> <font face=wingdings size=6> K </font> </TD>
</TR>
</TABLE>
Efeito:

JKL

JKL

Atributo Cellpadding - Define, em pixels, um espaço entre o conteúdo da célula e suas margems.

Exemplo:

<table border="2" width="240" height="120" cellspacing=10 cellpadding=20>
<TR>
<TD> <font face=wingdings size=6> JKL </font> </TD>
</TR>
<TR>
<TD> <font face=wingdings size=6> JKL </font> </TD>
</TR>
</TABLE>
Efeito:

JKL

JKL

Atributo Frame - Este atributo tem por finalidade definir quais as bordas externas, da tabela, serão visíveis.

Os valores possíveis para este atributo são estes:

ABOVE - Borda externa visível será somente a superior

BELOW - Borda externa visível será somente a inferior

LHS - Borda externa visível será somente a esquerda

RHS - Borda externa visível será somente a direita

VOID - Nenhuma Borda externa ficará visível

BOX ou BORDER - Todas as Bordas externas ficarão visíveis

HSIDES - As Bordas externas visíveis seráo a inferior e a superior

VSIDES - As Bordas externas visíveis serão a esquerda e a direita

Atributo RULES - Define quais bordas internas, da tabela, serão visíveis.

Seus valores podem ser:

ALL - Todas as Bordas interiores visíveis

NONE - Nenhuma Borda interior visível

COLS - Bordas interiores verticais visíveis

ROWS - Borda interiores horizontais visíveis

GROUPS - Bordas em um grupo de células definidas pelos atributos THEAD, TFOOT, TBODY, COLGROUP e COL (serão estudadas em outra oportunidade)

Exemplos do uso de Frame e Rules:

Para um melhor controle do resultado visual, de sua tabela, é recomendado utilizar os atributos Frame e Rules em conjunto, como nos exemplos a seguir:

<table bgcolor="#FFFFCC" border="4" width="240" height="120" frame="box" rules="none">
<TR>
<TD> <font face=wingdings size=6> J </font> </TD>
<TD> <font face=wingdings size=6> J </font> </TD>
</TR>
<TR>
<TD> <font face=wingdings size=6> J </font> </TD>
<TD> <font face=wingdings size=6> J </font> </TD>
</TR>
</table> Efeito

J J

J J

<table bgcolor="#66FFFF" border="4" width="240" height="120" frame="void" rules="all">
<TR>
<TD> <font face=wingdings size=4> J </font> </TD>
<TD> <font face=wingdings size=4> J </font> </TD>
</TR>
<TR>
<TD> <font face=wingdings size=4> J </font> </TD>
<TD> <font face=wingdings size=4> J </font> </TD>
</TR>
</table> Efeito

J J

J J

<table bgcolor="#FFFF00" border="4" width="240" height="120" frame="hsides" rules="cols">
<TR>
<TD> <font face=wingdings size=4> J </font> </TD>
<TD> <font face=wingdings size=4> J </font> </TD>
</TR>
<TR>
<TD> <font face=wingdings size=4> J </font> </TD>
<TD> <font face=wingdings size=4> J </font> </TD>
</TR>
</table> Efeito

J J

J J

Exercício
Tente fazer uma página semelhante a proposta abaixo, usando somente 1 tabela (vc vai usar quase todos os atributos de <TABLE> apresentados nesta aula.
Regras do Jogo: Adicione um background a sua tabela a torne mais interessante do que a apresentada abaixo, mas cuidado com o contraste entre background e o texto. Você pode modificar a vontade as cores e tipos de fontes do texto, trocar as cores das bordas. A imagem da página é a do antigo, bom e famoso seriado "O gordo e o Magro". Para encontrá-la vá na página do google, clique na opção IMAGENS e procure pelas palavras chaves "O Gordo e o Magro".
Você não pode usar os comandos das aulas posteriores a esta!

Clique aqui para ver a imagem da página sugerida

Tabelas - 2ª Partepor Denis Master

Na lição anterior, aprendemos a montar tabelas simples e vimos uma série de atributos do comando <TABLE>. Nesta lição, veremos atributos dos comandos <TR> (que serve para definir uma linha) e <TD> (que serve para definir uma célula).

Atributos de <TR> (Table Row)

Este comando, como vimos abre uma nova linha em uma tabela. E uma linha pode conter uma ou várias células. Usamos os atributos de <TR> quando temos várias celulas em uma linha e desejamos que todas elas tenham as mesmas caracteristicas, como cor de fundo, cor de bordas, alinhamento, etc.
Atributo bordercolor - define a cor de borda das células de uma linha.

Exemplo:

<TABLE border="5" width=40%>
<TR bordercolor="red">
<TD>Linha 1</TD>
<TD>Linha 1</TD>
</TR>
<TR bordercolor="blue">
<TD>Linha 2</TD>
<TD>Linha 2</TD>
</TR>
</TABLE>

Efeito:

Linha 1 Linha 1

Linha 2 Linha 2

Atributo bordercolorlight - define a cor da borda lateral direita e inferior de todas as células da linha
Atributo bordercolordark - define a cor da borda lateral esquerda e superior de todas as células da linha

Exemplo:

<TABLE border="5" width=40%>
<TR bordercolorlight="red" bordercolordark="blue">
<TD>Linha 1</TD>
<TD>Linha 1</TD>
</TR>
<TR bordercolorlight="green" bordercolordark="black">
<TD>Linha 2</TD>
<TD>Linha 2</TD>
</TR>
</TABLE>
Efeito:

Linha 1 Linha 1

Linha 2 Linha 2

Atributo ALIGN - define a alinhamento horizontal do conteúdo das células de uma linha. Seus valores podem ser: Left (esquerda), right (direita) ou center (centralizado)

Exemplo:

<TABLE border="2" width="50%" bordercolor=black>
<TR ALIGN="CENTER">
<TD>Centro</TD>
<TD>Centro</TD>
<TD>Centro</TD>
</TR>
<TR ALIGN="RIGHT">
<TD>Direita</TD>
<TD>Direita</TD>
<TD>Direita</TD>
</TR>
</TABLE>
Efeito:

centro centro centro

Direita Direita Direita

Atributo VALIGN - define o alinhamento vertical do conteúdo das células de uma linha. Seus valores podem ser: top (superior), bottom (inferior) ou middle (centralizado verticalmente)

Exemplo:

<TABLE border="2" height="100" bordercolor=black>
<TR VALIGN="TOP">
<TD>Centro</TD>
<TD>Centro</TD>
<TD>Centro</TD>
</TR>
<TR ALIGN="BOTTOM">
<TD>Direita</TD>
<TD>Direita</TD>
<TD>Direita</TD>
</TR>
</TABLE>

Efeito:

no topo no topo no topo

embaixo embaixo embaixo

Atributos de <TD> (Table Data)

Este comando define uma célula dentro de uma linha. É entre <TD> e </TD> onde inserimos dados e comandos para formatação, imagens, outras tabelas. Seus atributos são os seguintes:
Atributo BGCOLOR - Insere uma cor de fundo em uma célula.

Exemplo:

<table border="1" bordercolor="blue" width="160" height="100">
<TR>
<TD bgcolor=brown> </TD>
<TD bgcolor=silver> </TD>
</TR>
</TABLE>
Efeito:

Atributo Background - Insere uma imagem de plano de fundo em uma célula. Use somente imagens GIF ou JPG.

Exemplo:

<table border="1" bordercolor="blue" width="320" height="100">
<TR>
<TD background="fundo3.gif"> Background 1</TD>
<TD background="fundo1.gif"> Background 2</TD>
</TR>
</TABLE>
Efeito:

Background 1 Background 2

Atributo Bordercolor - Especifica a cor da borda de uma célula.
Atributo bordercolorlight - define a cor da borda lateral direita e inferior de todas as células da linha
Atributo bordercolordark - define a cor da borda lateral esquerda e superior de todas as células da linha

Exemplo:

<table border="1" width="320" height="100">
<TR>
<TD bordercolor="RED"> Célula 1 </TD>
<TD bordercolorlight="BLUE" bordercolordark="WHITE"> Célula 2 </TD>
<TD bordercolorlight="RED" bordercolordark="BLUE"> Célula 3 </TD>
</TR>
</TABLE>
Efeito:

Célula 1 Célula 2 Célula 3

Atributo Width - Especifica a largura de uma célula, em % ou pixels. No caso de uma tabela com mais de uma linha, a célula com valor maior em "width", define a largura da coluna inteira.
Atributo Height - Especifíca a altura de uma célula, em % ou em pixels. No caso de uma tabela com mais de uma coluna, a célula com valor maior em "height", define a altura da linha inteira.

Exemplo:

<TABLE border="2" bordercolor=blue>
<TR>
<TD width=50 height=50>50 de altura, 50 de largura</TD>
<TD>100 de largura</TD>
<TD>200 de largura</TD>
</TR>
<TR>
<TD width=100 height="200">100 de altura</TD>
<TD>...</TD>
<TD>...</TD>
</TR>
</TABLE>
Efeito:

50 de altura
50 de largura 100 de largura 200 de largura

100 de altura ... ...

Atributo ALIGN - define a alinhamento horizontal do conteúdo de uma célula. Seus valores podem ser: Left (esquerda), right (direita) ou center (centralizado)
Atributo VALIGN - define o alinhamento vertical do conteúdo de uma célula. Seus valores podem ser: top (superior), bottom (inferior) ou middle (centralizado verticalmente)

Exemplo:

<TABLE border="2" bordercolor=blue height=240 width=440>
<TR>
<TD width=220 height=120 align=center valign=top>1, no topo e centralizado</TD>
<TD align=right valign=bottom>2, embaixo e a direita</TD>
</TR>
<TR>
<TD align=center valign=middle>centralizado</TD>
<TD width=220 height=120 align=left valign=top>4, esquerda e no topo</TD>
</TR>
</TABLE>
Efeito:

1, no topo e centralizado 2, embaixo e a direita

centralizado 4, esquerda e no topo

Exercício
Tente fazer uma página semelhante a proposta abaixo, usando somente 2 tabelas, utilizando os comandos HTML aprendidos até esta aula.
Regras do Jogo:
Não vale copiar o código fonte de minha página.
Você pode modificar as cores e trocar as cores das bordas.
As imagens da página foram feitas no paint brush e salvas como jpg. Não vale copiar os meus jogadores, pegue o paint brush ou outro editor de imagens e faça o seu.
Você não pode usar os comandos das aulas posteriores a esta!

Clique aqui para ver a página sugerida

Tabelas - 3ª Partepor Denis Master

Uma vez dominado a construção de tabelas com os comandos e seus atributos, apresentados nas duas aulas anteriores, pode-se seguir a aprendizagem de alguns recursos mais complexos e interessantes referentes as tabelas em HTML, apresentados nesta aula.

Tabelas Complexas

Uma tabela feita com os comandos apresentados até agora apresentam sempre o mesmo número de células em cada linha. Agora veremos comandos para montar tabelas quebrando essa regra, ou seja, montando tabelas com numero diferentes de células em linhas de uma mesma tabela ou numero de células diferente em cada coluna.

Tabela Simples

Tabela Complexa

Para montar tabelas complexas utilizamos os seguintes atributos da tag <TD>:

COLSPAN - Determina o número de colunas que uma célula pode ocupar em linha.

ROWSPAN - Determina o número de linhas que uma célula pode ocupar em uma coluna.

Atributo COLSPAN:

Usamos colspan quando uma célula deve ocupar o espaço de duas ou mais colunas em uma linha.
Exemplo:
Para montar uma tabela com duas linhas, duas colunas, sendo que a primeira célula ocupará duas colunas, basta informar nesta, que colspan=2, ou seja, ela ocupará o espaço igual ao número de células da segunda linha.

<TABLE border=2 bgcolor=yellow width=200 height=100>
<TR><TD HEIGHT="50" COLSPAN="2"> Tabela Complexa </TD>
<TR><TD HEIGHT="50"> Linha 2 Célula 1 </TD>
<TD> Linha 2 Célula 2 </TD><TR>
</TABLE>

Tabela Complexa

Linha 2
Célula 1 Linha 2
Célula 2

Atributo ROWSPAN

Usamos rowspan quando uma célula deve ocupar o espaço de duas linhas ou mais linha em uma coluna.
Exemplo:
Vamos contruir uma tabela com duas colunas, sendo que a primeira delas tenha uma célula e a segunda coluna contenha duas células.

<TABLE border=2 bgcolor=yellow width=200 height=100>
<TR><TD ROWSPAN="2"> Tabela Complexa </TD>
<TD HEIGHT="50"> Célula 2 Linha 1 </TD>
<TR><TD> Célula 2 Linha 2 </TD><TR>
</TABLE>

Tabela Complexa Linha 1
Célula 2

Linha 2
Célula 2

Obs: 1- Note no exemplo acima que ROWSPAN foi usado na primeira célula porque queríamos que ela ocupasse espaço de duas células(duas linhas) na primeira coluna. Logicamente, se quiséssemos fazer isso com a segunda coluna, deveríamos utilizar ROWSPAN na segunda célula da primeira linha.
2- Na segunda linha abrimos somente uma célula (equivalente a celula 2, linha 2) porque já havíamos usado rowspan para preencher o local da 1ª célula, linha 2.
Um exemplo mais complicado:

linha 1(colspan=2) linha 1 (colspan=2)

linha 2 (colspan=4)

linha 3 (rowspan=2) linha 3 (normal) linha 3 (normal) linha 3 (rowspan=2)

linha 4 (colspan=2)

Solução:
<table border=4 width=300 bgcolor=aqua> <tr> <td width=150 height=50 colspan=2> linha 1 (colspan=2) </td> <td width=150 colspan=2> linha 1 (colspan=2) </td> </tr> <tr> <td height=50 colspan=4> linha 2 (colspan=4) </td> </tr> <tr> <td rowspan=2 height=100> linha 3 (rowspan=2) </td> <td height=50> linha 3 (normal) </td> <td> linha 3 (normal) </td> <td rowspan=2 height=100> linha 3 (rowspan=2) </td> </tr> <tr> <td height=50 colspan=2> linha 4 (colspan=2) </td> </tr> </table>

Exercício

Arte na Tabela

Tente montar a tabela abaixo. As medidas das células e da tabela não precisam ser iguais a desta página. Os textos são só sugestões.
Só não vale copiar o código fonte de minha página.
Você pode modificar as cores e trocar as cores das bordas. Pode inserir imagens, textos o que quizer. Após concluir seu sua página web envie-a para meu e-mail para eu colocá-lo na nossa página de exercícios resolvidos.

Titulo ou nome do Site

Links Textos, etc propaganda

propaganda

Copyright

Personalizando a Barra de Rolagem

propriedade css função cor

scrollbar-arrow-color Cor da seta white

scrollbar-3dlight-color Cor do sombreamento externo superior blue

scrollbar-highlight-color Cor do sombreamento interno superior yellow

scrollbar-face-color Cor da barra red

scrollbar-shadow-color Cor do sombreamento interno inferior orange

scrollbar-darkshadow-color Cor do sombreamento externo inferior silver

scrollbar-track-color Cor da faixa de rolagem white

Exemplo:
<style type="text/css"> BODY { scrollbar-arrow-color: white; scrollbar-3dlight-color: blue; scrollbar-highlight-color: yellow; scrollbar-face-color: red; scrollbar-shadow-color: orange; scrollbar-darkshadow-color: silver; scrollbar-track-color: white} </style>
O exemplo acima é o utilizado para personalizar a barra de rolagem desta página web.

Para personalizar a barra de rolagem de sua página web copie o código acima e cole entre as tags <head> e </head> de seu código fonte. Altere as cores conforme o seu gosto.