Aprenda a Fazer Sua Home Page


Nesta área da minha HP você vai aprender a fazer a sua Home Page. Começando primeiro com o HTML (Hyper Text Markup Language, um tipo de linguagem) e depois incrementar a sua HP com Java, Applet e outros. Se você é iniciante na Internet não deve estar entendendo nada do que eu estou falando mais lendo esse texto você entenderá.


Primeiro de tudo você precisa de um site que lhe disponibilize um bom espaço para sua HP. Abaixo eu dito uns.

Angelfire- Bom site que disponibiliza um bom espaço e simplifica a construção de sua HP, com contador próprio. (inglês)

Geocities- Um dos sites mais famosos para hospedagem de Home Pages distribui 1Mb de espaço para sua HP (inglês)

Fortunecity- Não é tão bom meio complicado mas legal. (inglês)

LOGO MAIS SITES


Primeiros Passos em HTML


Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
Ex.: < etiqueta>...< /etiqueta>
Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada pela etiqueta.
A estrutura de um documento HTML apresenta os seguintes elementos:
< HTML>
< HEAD>
< TITLE>Título do Documento< /TITLE>
< /HEAD>
< BODY>
texto,
imagem,
links, ...
< /BODY>
< /HTML>
As etiquetas HTML não são sensíveis à caixa. Tanto faz escrever < HTML>, < Html>, < html>, < HtMl>, ...

O Elemento < HEAD>


< HEAD> contém informações sobre o documento; o elemento < TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim:
< HEAD>
< TITLE>Primeiros Passos em HTML< /TITLE>
< /HEAD>
Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento.
É sugerido que os títulos dos documentos sejam sugestivos, evitando-se, portanto, títulos como "Introducao". Os títulos não devem conter acentos ou outros caracteres especiais (eles não serão mostrados corretamente por alguns browsers).

O Elemento < BODY>


O texto contido em < BODY> é mostrado na janela principal do browser, contendo o texto que será apresentado ao leitor. < BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, e imagens.
1. Cabeçalhos em HTML
Há seis níveis de cabeçalhos em HTML: de < H1> a < H6>:
< H1>Este é um cabeçalho de nível 1< /H1> < H2>Este é um cabeçalho de nível 2< /H2> < H3>Este é um cabeçalho de nível 3< /H3> < H4>Este é um cabeçalho de nível 4< /H4> < H5>Este é um cabeçalho de nível 5< /H5> < H6>Este é um cabeçalho de nível 6< /H6>
Esses cabeçalhos são mostrados da seguinte forma:
Este é um cabeçalho de nível
1

Este é um cabeçalho de nível
2

Este é um cabeçalho de nível
3

Este é um cabeçalho de nível
4

Este é um cabeçalho de nível
5

Este é um cabeçalho de nível
6
Obs.: Cabeçalhos não podem ser aninhados.
É bom notar que o título do documento não precisa ter necessariamente o mesmo texto do cabeçalho principal.
2. Parágrafos e quebra de linha
Como vimos no exemplo 1, as quebras de linha não são significativas em HTML. Para separar blocos de texto, precisamos usar o elemento:
Parágrafo 1;< P>Parágrafo 2.
Que produz:
Parágrafo1;
Parágrafo2.
Quando queremos apenas mudar de linha, sem acrescentar uma linha em branco entre blocos de texto, usamos o elemento:
Parágrafo 1;< br> linha 1 do parágrafo 1, < br>linha 2 do parágrafo 1.< P>Parágrafo 2;< br> linha 1 do parágrafo 2, < br>linha 2 do parágrafo 2.
Que é apresentado da seguinte forma:
Parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.
Parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2.
Usamos < BR> apenas quando queremos que a linha seja mudada em determinado ponto, porque os browsers já se encarregam de encaixar o texto apresentado dentro dos limites de sua janela.
Obs.: Como percebemos, tanto o elemento < P> quanto o elemento < BR> não exigem etiquetas de fechamento.
3. Como fazer ligações a outros documentos
HTML permite ligações de uma região de texto (ou imagem) a um outro documento. Nestas páginas, temos visto exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links.
Para inserir um link em um documento, utilizamos a etiqueta , da seguinte forma:
< A HREF="http://www.endereço.do.link.com.br">Link
Ou
< A HREF="http://www.endereço.do.link.com.br">< img src=https://www.angelfire.com/ar/hodif/images/folder.gif>< /a>
Que Produz: Link
http://www.endereço.do.link.com.br/http://www.endereço.do.link.com.br/
4. Formatação de texto e caracteres
Há dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação. A formatação lógica segue o significado lógico do texto marcado. A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final). Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc. Textos Especiais HTML permite três modos texto especiais. São chamados modos lógicos, porque definem blocos de texto por seus propósitos lógicos. A maneira em que os blocos serão mostrados é determinada pelo browser. < PRE>
Apresenta o texto na mesma maneira em que foi digitado:
< pre>uma linha aqui, outra ali, etc.< /pre>
Resulta:
uma linha aqui,
outra ali,
etc.
Todas as quebras de linha e espaços são respeitados.
< blockquote>Para citações de livros etc
Para citações de livros etc
Formatação de caracteres
Estilo
Quando disponível no browser, mostrado em bold (em alguns browsers, pode aparecer sublinhado < I> Itálico (em alguns casos, caracteres apenas inclinados) < TT> Tipo teletype - fonte de espaçamento fixo.
5 Inserção de Imagens
O comando img é utilizado para se fazer inserções de imagens em documentos, junto com os textos:
< img src="Endereço da imagem">
Assim, escrevendo:
< img src = "http:///www.fgsfg.com/bola.gif">
inserimos a figura no documento.
As imagens são arquivos com extensão *.gif, *.xbm, *.jpg.

Existem também alguns atributos de alinhamento, que produzem os seguintes resultados:
< img align=top src="imagem"> Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom
< img align=middle src="imagem"> Alinha o texto adjacente (junto) com o meio da imagem, embora com linhas compridas o resultado não seja muito bom
< img align=bottom src="imagem"> Alinha o texto adjacente com a parte de baixo da imagem (default)
O Netscape permite, ainda, os seguintes alinhamentos do HTML 3.0:
< img align=right src="imagem"> Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. É preciso testar o resultado para ver se surte o efeito desejado na tela.
< img align=left src="imagem"> Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. É preciso testar o resultado para ver se surte o efeito desejado na tela.
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
< IMG align=left SRC="bola.gif" alt="imagem">< IMG align=right SRC="bola.gif" alt="imagem">
6. Listas em HTML
Há vários tipos de listas em HTML, sendo estas as mais usadas: Listas de Definição
< DL> < DT>termo a ser definido < DD>definição < DT>termo a ser definido < DD>definição < /DL> Que produz:
termo a ser definido
definição
termo a ser definido
definição

Este tipo de lista é muito útil quando se deseja, por exemplo, escrever um parágrafo de texto tabulado para a direita:
< DL> < DD>Desta maneira é possível escrever parágrafos com uma apresentação diferente e agradável de se ler! < /DL>
Que Produz:
Desta maneira é possível escrever parágrafos com uma apresentação diferente e agradável de se ler!
Listas não-numeradas < UL> < LI>item de uma lista < LI>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto < LI>item < /UL>
· item de uma lista
· item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
· item
Listas Numeradas
< OL> < LI>item de uma lista numerada < LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto < LI>item de lista numerada < /OL>
1. item de uma lista numerada
2. item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
3. item de lista numerada

Observação: As listas podem ser aninhadas. Por exemplo:
7. Letras Coloridas
Para mudar a cor das letras é muito simples:
< font color=nome da cor em inglês>texto< /font>
Que Resulta: texto


Aprenda a construir a sua Home Page (2)

Significado das siglas
WWW
World Wide Web (Rede Mundial, ou Web (Teia), ou W3).
SGML
Standard Generalized Markup Language (Norma Padrão para Linguagem de Marcação) é uma norma para descrever a linguagem de marcação.
DTD
Document Type Definition (Definição de Tipo de Documento) esta é uma linguagem de marcação especifica, quando se usa SGML.
HTML
HyperTex Markup Language (Linguagem de Marcação Hypertexto HTML) é uma DTD SGML. Em termos práticos HTML é uma coleção de estilos (indicados para etiquetas de marcação) que define os vários componentes de um documento World Wide Web.

Criando documentos HTML
Os documentos HTML estão em formato texto padrão (conhecido como ASCII) e podem ser criados usando-se qualquer editor de texto, WordPad por exemplo do Windows , que incluem editores HTML rudimentares em ambiente WYSIWYG (What you see and what you get). Você pode fazer uma primeira tentativa com estes editores antes de explorar os detalhes do HTML.

Um Documento HTML (Mínimo)
Escreva isto assim que você abrir o seu Bloco de Notas (WordPad acima citado), e escolhendo no Menu Arquivo, Novo:
-----
<TITLE> Este é um exemplo de um simples HTML</TITLE>
<H1>Este é um cabeçalho de nível-1</H1>
Bem vindo ao mundo de HTML,
este é um parágrafo. <P>
E este é um outro parágrafo. <P>
-----
Salve o que acabou de fazer com o nome "teste.html" (sem as áspas) em qualquer diretório ("Teste" no seu diretório raiz). É importante você salvar em html para o seu browser entender o tipo de arquivo que é, e não um simples arquivo de texto.
O HTML usa etiquetas de marcação para dizer ao browser da Web, como deve mostrar o texto no video (display). No exemplo acima:
a etiqueta <TITLE> especifica o início de título de documento;
a etiqueta </TITLE> especifica o fim de título de documento;
a etiqueta <H1> especifica o início de cabeçalho nível-1
a etiqueta </H1> especifica o fim de cabeçalho nível-1
etiqueta <P> marca fim de parágrafo de documento
Para visualisar o resultado da versão formatada no exemplo acima, abra o seu browser e abra o arquivo teste.html que você acabou de editar no seu editor de texto e veja como ficou.
As etiquetas HTML consistem dos sinais: menor que (<) seguido de algum texto, e para fechar o sinal matemático - maior que (> ). São chamados diretivas. As etiquetas de marcação, em geral, são pares: <H1> e </H1>. O delimitador final de etiqueta é quase igual ao seu início, exceto pela presença de uma barra / antes do seu símbolo. Assim, no exemplo acima, a etiqueta <H1> diz ao browser para começar a escrever um cabeçalho de primeiro nível, ou nível-1 e, a etiqueta </H1> diz ao browser que o cabeçalho acabou. No entanto, uma primeira exceção à regra é a etiqueta <P> . Esta etiqueta dispensa o seu par </P> , para fim de parágrafo.
A lingüagem HTML é muito flexível: <title> é equivalente a <TITLE> ou <TiTLe> . Nem todas etiquetas são suportadas por todos browsers Web. Se um determinado browser não reconhece uma etiqueta, ele a desconsidera.
Títulos
Cada documento HTML deve ter um título. Um título é geralmente mostrado separadamente do documento e se usa principalmente para identificação do documento em outros contextos. Uma pesquisa WAIS, seleciona cerca de meia dezena de palavras que definem um certo documento.
A diretiva para a etiqueta título é <TITLE>. O título geralmente aparece na primeira linha do documento.
Cabeçalhos
O HTML tem seis níveis de cabeçalhos, numerados de 1 a 6, sendo o 1 o mais destacado. Os cabeçalhos podem ser mostrados em diferentes fontes e estilos (negrito, normal, etc.). O primeiro cabeçalho de um documento deve ser etiquetado com <H1> . A sintaxe para etiqueta de cabeçalho é:
<Hx> Texto do cabecalho</Hx>
onde x é um numero entre 1 e 6 que especifica o nível do cabeçalho.

Título X Primeiro Cabeçalho:
Em muitos documentos o primeiro cabeçalho é identico ao título. Para documentos multi-partes, o texto de primeiro cabecalho deve dar ao leitor a idéia de que a informação está relacionada (e.x., um titulo de capítulo), contudo a etiqueta de título deve identificar o documento em seu contexto mais amplo (e.x., incluindo ambos; o título do livro e o nome do capítulo).

Parágrafos
Diferentemente dos documentos da maioria dos processadores de texto, retorno de carro (Carriage Return ou Enter) em arquivos HTML nada significam. Troca de letras pode ocorrer em algum ponto de seu arquivo-fonte e vários espaços podem ser comprimidos em um único espaço, exceto na etiqueta <TITLE>. Espaços que precedem uma etiqueta <P> ou <Hx> são ignorados. Note-se que no exemplo mais simples, anteriormente apresentado, o primeiro parágrafo está codificado, da seguinte maneira:
Bem Vindo ao HTML.
este é o primeiro parágrafo.<P>
No arquivo fonte há uma quebra de linha entre as frases. Um browser Web ignora esta quebra de linha e inicia um novo parágrafo só quando encontra a etiqueta de marcação de parágrafo.
Importante:
Você deve separar parágrafos com <P> .O browser ignora quaisquer identações ou linhas em branco no texto fonte. O HTML se baseia somente nas etiquetas para instruções de codificação de formato, e sem as etiquetas <P> o documento se transforma num grande parágrafo. A exceção é o texto etiquetado como preformatado (preformatted), que será explicado mais a frente. No exemplo que segue, de texto preformatado, as etiquetas são as mesmas que no exemplo anterior, mas o resultado é outro:
----
<TITLE>O mais simples exemplo de HTML</TITLE> <H1>Este
é o nível-1
de cabeçalho</H1>Bem Vindo ao mundo de HTML. Este é
um
parágrafo.<P> E este é um outro.<P>
Atenção: Para se visualizar melhor a estrutura de um arquivo HTML, os cabeçalhos devem estar separados e, em linhas diferentes, e os parágrafos devem vir no início de linhas em branco, e após a etiqueta do parágrafo anterior.
Ligações à outros documentos
O principal recurso de linguagem HTML vem de sua habilidade em interligar -linking- partes de textos (e também imagens) à outros documentos. O browser coloca esses textos em vídeo reverso, comumente em cores e/ou sublinhados para indicar que eles são ligações hipertexto. Essas ligações são chamadas hyperlinks ou simplemente links )ligações).
Uma etiqueta HTML relacionada a hypertexto é <A> (âncora). Para incluir uma âncora no seu documento:
1.Inicie uma âncora com a etiqueta <A (há um espaço depois do A inicial de etiqueta.)
2.Especifique o documento que se deseja "linka" com o parâmetro HREF="filename.html", seguido pelo fechamento com >
3.Em seguida, entre o texto (ou palavra) que servirá como ligação hypertexto no documento corrente.
4.Entre com a etiqueta final de âncora </A>
----
Eis aqui, uma codificação em HTML hypertexto:
<A href="MaineStats.html">Maine</A>
----
Esta entrada torna a palavra Maine uma ligação hypertexto -hyperlink- ao documento MaineStats.html.

Recurso uniforme para localização
O World Wide Web (Rede Mundial) usa o Recurso Uniforme para Localização (Uniform
Resource Locators URL), para especificar o local de armazenamento físico de arquivos, em outros servidores. Um URL utiliza o mesmo tipo de recurso usado para se ter acesso ao endereço de um servidor (como o gopher WAIS, por exemplo), e também, para localizar um arquivo. A sintaxe é:
scheme://host.domain[:port]
/path/filename
onde scheme é um dos seguintes atributos:
file
um arquivo no seu sistema local, ou num servidor FTP anônimo.
http
um arquivo em um servidor World Wide Web.
gopher
um arquivo em um servidor Gopher.
WAIS
um arquivo em um servidor WAIS.
news
um grupo de discussão Usenet.
telnet
uma conexão a um serviço Telnet
O número de porta (:port) pode geralmente ser omitido numa ligação URL.
Âncoras para seções especificas de outros documentos
Pode-se usar âncoras também para integrar uma seção especifica num documento. Por exemplo, supondo-se que você está elaborando um documento, chamado de A. E, que você pretende ligá-lo a uma determinada seção de texto de um documento B, chamado documentB.html. Então, é preciso dar um nome à âncora para o arquivo-documento B, que pode ser "ChamandoDocB". E, a sintaxe seria:
<A NAME= "documentB">ChamandoDocB</A>
Quando você cria ligações para seções no documento A, deve incluir o nome de arquivo (filename), precedido pelo sinal jogo da velha (#) e, a palavra de ligação - âncora para o documento B. A sintaxe é:
----
Esta é uma <A HREF="documentB.html#documentB">ligacao</A>
para o documento B.
----
Agora, se você clicar sobre a palavra ligação no documento A, faz com que apareça no monitor o texto contido no documento B, denominado "documentoB.html".

Texto preformatado
Usa-se a etiqueta <PRE> (iniciais de PREformatted) para gerar texto com fontes de tamanho fixo, espaços em branco, nova linhas, e tabulações importantes. É muito útil para listagens de programas predefinidos. Por exemplo, as linhas seguintes estão neste arquivo-fonte:
----
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
----
Mostrado como:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Referencias Hipertexto (e outras etiquetas HTML) podem ser usadas dentro de seções <pre>.

Endereços
A etiqueta <ADDRESS> e usada geralmente dentro de um documento HTML para especificar o autor de um documento e, possibilitar contatos entre o autor e os consulentes do documento, por meio de seu "e-mail", por exemplo. Em geral, vem no último parágrafo do arquivo-documento, e numa nova linha justificada à esquerda. Por exemplo, a última parte deste arquivo HTML é:
<ADDRESS>
mailto: anykillator@fcmail.cim
</ADDRESS>
O resultado é:
anykillator@fcmail.cim

Caracter de formatação
Palavras sozinhas, ou frases podem ser codificadas com estilos especiais. Logical são estilos configurados pelo próprio viewer do consulente. Por exemplo, <CITE> pode ser configurado como itálico pelo viewer. Cada vez que se entrar com a etiqueta <CITE> o viewer automticamente mostra o texto em itálico. O estilo physical é aquele que você determina, e o viewer mostra de acordo com o que foi codificado. Por exemplo, <I> diz ao viewer para mostrar o texto em itálico.
Para documentos HTML-codificados, deve-se usar estilos lógicos, sempre que possível.
Itálico
<I>texto=HTML</i> põe o texto em itálico (HTML).
<em>texto=alguns</em>, também põe texto itálico, (somente alguns viewers).
<cite>texto</cite> é usado para citações de livros, manuais, nomes, seções.
<var>texto</var> indica uma variavel (filename)
Bold (Negrito)
<b>texto=Importante</b> poe texto em negrito (Importante)
<strong>texto=Notas:</strong> também destaca o texto (Notas:)
conjunto de caracteres de tamanho fixo.
<tt>texto</tt> poe texto em um conjunto de caracteres de tamanho fixo. (1 SU = 1 CPU hour)
<code>texto</code> também põe texto em um conjunto de caracteres de tamanho fixo. (1 SU = 1 CPU hour)
<samp>texto</samp> é um formato para mostras de textos, (-la)
<kbd>texto</kbd> mostra os nomes das teclas no teclado ( HELP)

Voltar