 |
<<<
voltar
::
Curso de HTML ::
:: Iniciando os primeiros
TAGs
:: Formatando
Texto
:: Links, Imagens e
Background
:: Tabelas
:: Frames
:: Comando Básicos de
HTML
:: Tabela de Caracteres
Especiais
Módulo 01
INTRODUÇÃO
Hoje em dia a linguagem HTML, usada na Internet, não é um bicho muito feio.
Trata-se mais de comandos conveniados do que programação em si, e talvez seja
por isso que há uma grande quantidade de tutoriais na rede, já que seu
aprendizado não requer nenhum dom especial para entendê-lo.
O primeiro passo para se produzir textos em HTML e ter um editor apropriado,
que possa facilitar em muito o aprendizado. Segue alguns disponíveis para
download na rede: Arachnophilia
Coffe Cup
Top Dawg E caso vc não
encontre, vc pode usar o Notepad do Windows, mas não se esqueça de salvar o
arquivo com a extensão html, em minúsculo. OK.
TAGS E ARQUIVO HTML - Parte 1
A linguagem HTML é composta por comandos que indicam ao navegador
(browser)
de como devem ser lidos os textos, por isso para cada arquivo que se inicia, um
TAG deve indicar as intruções para o navegador. Esclarecendo, os TAGS são
comandos que informam ao navegador determinada ação que ele deve executar, como
comparação, já que toda comparação é burra, e como se fossem os comandos
Arquivos, Editar e Formatar etc.; do Word.
Todo o documento HTML deve ter os seguintes TAGS para leitura: <HTML> </HTML>, que indica o começo e fim de um documento
HTML
<HEAD></HEAD>, que indica o cabeçalho da página, isto é, o
que deve ser lido primeiro.
<TITLE></TITLE>, que indica o título
da página. Nota: este comando é importante para que o navegante se localize,
pois o seu conteúdo constará na parte superior do navegador e no botão de
documento aberto da barra de tarefas.
Bem vamos exemplificar o que foi dito até agora:
A estrutura básica de um Arquivo HTML é: <HTML>
<HEAD>
<TITLE>Bem-vindo ao mundo
do web
designer</TITLE>
</HEAD>
</HTML>
Vc percebeu que o título (<TITLE>) da página ficou entre o<HEAD>,
por quê? Porque o título deve obrigatoriamente estar entre o cabeçalho e deve
ser lido primeiro, caso contrário, ele será visto no corpo do texto e sua
página, infelizmente, ficará sem nome.
Outra coisa, vc percebeu que para cada abertura de um <TAG> há um
fechamento</TAG>? Isto!! A barra significa que vc está fechando aquela
ação, por isso lembre-se: para cada <AÇÃO> iniciada, ela deve ser fechada
com </AÇÃO>, senão ela se prolongará por todo o documento.
Vamos a parte dois da nossa aula: escrever um texto, dar cor e trabalhar com
fontes diferentes, certo?
Como vc sabe em diagramação tudo que é texto chama-se corpo de texto, certo?
Bem em HTML não será diferente, só que com uma diferença, o termo usado será em
inglês, isto é, BODY=corpo.
Tudo o que vc colocar entre o BODY, será lido pelo navegador como corpo de
texto e, portanto estará disponível para visualização. Vamos a um
exemplo: Inicie os seguintes comandos no seu editor:
<HTML>
<HEAD>
<TITLE>Bem-vindo ao mundo
do web
designer</TITLE>
</HEAD>
<BODY>
Aqui vc
vai usar toda a sua imaginação e talento para criar páginas Hiper visitadas na
internet
</BODY>
</HTML>
Agora salve este arquivo com extensão html e visualize-o em seu
navegador.
Nota: por convênio estebeleceu-se o seguinte - todo arquivo de abertura de
qualquer site, deve-se ter o nome index.html, pois esse será o primeiro arquivo
procurado pela platarforma do servidor para abrir o seu site e , portanto, a sua
primeira página. Outro fator importante, salve sempre os arquivos em letras
minúsculas, pois alguns servidores convertem automaticamente para minúsculas.
Pronto?... ficou horrível, né?
Bem vamos melhorar as coisas. Existem outros comandos que o navegador
responde, esses são comandos que dão forma e caraterísticas aos TAGS, conhecidos
como atributos. Para vc melhor entender: uma camisa é um TAG; uma camisa amarela
é um TAG e um atributo, no caso: amarela, uma camisa amarela, número 3, manga
curta, é um TAG e três atributos: amarela, número 3, manga curta. Passando
isso para o HTML: o TAG <BODY> pode possuir atributos, que
são:
BGCOLOR= indica a cor do fundo da
página
TEXT= indica a cor do texto da página
LINK= indica a cor do
link a ser visitado
VLINK= indica a cor do link
visitado
Por serem atributos do BODY, eles devem estar próximo a
ele, por isso vejamos o exemplo:
<HTML>
<HEAD>
<TITLE>Bem-vindo ao mundo
do web designer</TITLE>
</HEAD>
<BODY BGCOLOR="pink"
TEXT="red" LINK="black" VLINK="white">
Aqui vc vai
realizar toda a sua imaginação e seu talento em diagramar páginas para a
internet
</BODY>
</HTML>
Note: todos os atributos são seguidos do sinal de = e a sua especificação
está entre "aspas", o esquecimento de qualquer um deles causará problema para a
leitura do navegador.
Agora vc pode visualizar o seu arquivo. Gostou? Não? Ora, então mude as
cores... por enquanto vc pode ir alterando as cores, mas sempre usando o nome em
inglês: green, yellow, gray etc...
>>>
|
