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)
Terravista - Este aqui não é tão famoso, mas eu gosto
muito, pois é em Portugues,eu pelo menos prefiro fazer por
aqui.
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=http://www.angelfire.com/ar/hodif/images/folder.gif><
/a>
Que Produz: Link
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%e7o%20da%20imagem/index.html">
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/index.html"> 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/index.html"> 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/index.html"> 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/index.html"> 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/index.html"> 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.html" alt="imagem">< IMG
align=right SRC="bola.html" 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
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 aformataçã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
Se você tiver alguma Sugestão ou Critica me mande um e-Mail.
