Acido Nucleico Hot Page
 
Aprenda HTML!!!!
 


Niski Home Page


















Introdu��o ao HTML






A linguagem HTML � relativamente f�cil. Em poucos
dias voc� aprende. O dif�cil � entender como explorar seus
recursos limitados para criar p�ginas atraentes e com
conte�do. A outra dificuldade � conceber textos interessantes
para serem colocados nas Home Pages. Existem programas
com a finalidade de criar p�ginas Web, os chamados editores
de HTML. Mas cuidado: a maioria deles apenas facilita a
inser��o de comandos e diretivas HTML em modo texto.








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: 

<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. Traduzindo: 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 <P>:


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 <BR>:


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
<A>, da seguinte forma:




<A HREF = "arq_dest">âncora</A>


onde:

arq_dest
é o documento destino da
ligação hipertexto;
âncora
é o texto ou imagem que
servirá de ligação hipertexto do documento sendo
apresentado para o documento destino.




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>

<blockquote>Para citações de livros etc</blockquote>:
Para citações de livros etc


<ADDRESS>

Usado para formatar endereços E-mail:

<address>[email protected]</address>:
[email protected]





Formatação de caracteres





Como visto anteriormente, HTML permite dois tipos de formatação:
lógico e físico.





Estilos Lógicos



<DFN>

Indica definição de uma palavra


<EM>

Ênfase - normalmente mostrado em itálico


<CITE>

Para títulos de livros, filmes etc.


<CODE>

Para indicar trechos de código (programas, shell scripts)


<KBD>

Indica uma entrada via teclado

Ex.: Entre <KBD>passwd</KBD> para acesso

Entre passwd para acesso


<SAMP>

Indica uma sequência de caracteres, por exemplo uma mensagem de erro


<STRONG>

Forte ênfase; mostrado normalmente em bold


<VAR>

Indica variáveis; em itálico







Estilos Físicos



<B>

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.




Caracteres Especiais





HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracter desejado, e um ; final.


Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência:








Entidade Caracter
&lt; <
&gt; >
&amp; &



Outras sequências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com os caracteres mais utilizados em Português:































Entidade>

Transferência interrompida!


th>		 Caracter
&aacute; á &Aacute; Á
&acirc; â &Acirc; Â
&agrave; à &Agrave; À
&atilde; ã &Atilde; Ã
&ccedil; ç &Ccedil; Ç
&eacute; é &Eacute; É
&ecirc; ê &Ecirc; Ê
&iacute; í &Iacute; Í
&oacute; ó &Oacute; Ó
&ocirc; ô &Ocirc; Ô
&otilde; õ &Otilde; Õ
&uacute; ú &Uacute; Ú
&uuml; ü &Uuml; Ü



Como vemos, as sequências de escape são sensíveis à caixa.




- Por que usar estas formatações??


Os browsers costumam também mostrar corretamente os caracteres acentuados normalmente. Essa prática, embora facilite sobremaneira a digitação dos documentos, não é recomendada "ainda", devido a um problema relativo à transmissão desses caracteres.


Chama-se conjunto de caracteres uma representação digital de texto. Um caracter é um símbolo cujas diversas representações devem significar a mesma coisa para uma comunidade de pessoas. Na prática, porém, existem alguns conjuntos que associam dois números distintos a um mesmo caracter.


Na World-Wide Web, os acentos da Língua Portuguesa chegam a travar os
browsers de usuários em outros países, que usam um conjunto de caracteres diferentes do ISO Latin 1 - apesar do ISO Latin 1 ser padrão na WWW.


A versão 2.0 do Netscape permite que se escolha a codificação adequada ao conjunto de caracteres relativo aos documentos a serem recuperados. Mesmo assim, caracteres japoneses às vezes travam browsers no Brasil. Para garantir a interpretação apropriada de um documento, pode-se inserir uma indicação do esquema de codificação, escrevendo por exemplo:



<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<TITLE>...






5 Ins>

Transferência interrompida!


h>

O comando img é utilizado para se fazer inserções de imagens em documentos, junto com os textos:



<img src="nome_imagem">

onde nome_imagem é o nome do arquivo que contém a imagem que se quer inserir; pode ser referenciado também um arquivo que esteja em um diretório diferente, ou mesmo de um outro servidor (o que, logicamente, não é conveniente).


Assim, escrevendo:

<img src = "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:


Terra<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


Terra<img align=middle src="imagem"> Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom


Terra<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:


Terra<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.



Terra<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">


Isso resulta em:


TerraTerra





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>


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:


<DL>

<DT>termo a ser definido

<DD>definição

<OL>

<LI>item de uma lista numerada

<LI>item de uma lista numerada

<UL>

<LI>item de uma lista

</UL>

<LI>item de uma lista numerada

</OL>

<DT>termo a ser definido

<DD>definição

</DL>


termo a ser definido
definição

  1. item de uma lista numerada
  2. item de uma lista numerada

    • item de uma lista

  3. item de uma lista numerada

termo a ser definido
definição


7. Estilo em listas




Netscape e Internet Explorer aceitam uma formatação alternativa para listas numeradas e não-numeradas:

*Listas não-numeradas
<UL type=square>

<LI>item de uma lista

<LI>item de uma lista

<LI>item de uma lista

</UL>



  • item de uma lista
  • item de uma lista
  • item de uma lista


<UL type=disc>

<LI>item de uma lista

<LI>item de uma lista

</UL>



  • item de uma lista
  • item de uma lista


<UL type=circle>

<LI>item de uma lista

<LI>item de uma lista

</UL>



  • item de uma lista
  • item de uma lista

É possível também modificar os bullets de apenas alguns ítens da lista:



<UL type=square>

<LI>item

<LI type=circle>item

</UL>


  • item
  • item




*Listas Numeradas
<OL type=I>

<LI>item de lista numerada

<LI>item de lista numerada

<LI>item de lista numerada

<LI>item de lista numerada

<LI>item de lista numerada

</OL>



  1. item de lista numerada
  2. item de lista numerada
  3. item de lista numerada
  4. item de lista numerada
  5. item de lista numerada



<OL type=i>

<LI>item de lista numerada

<LI>item de lista numerada

<LI>item de lista numerada

<LI>item de lista numerada

<LI>item de lista numerada

</OL>



  1. item de lista numerada
  2. item de lista numerada
  3. item de lista numerada
  4. item de lista numerada
  5. item de lista numerada


<OL type=a>

<LI>outro item

<LI>outro item

<LI>outro item

</OL>



  1. outro item
  2. outro item
  3. outro item


<OL type=A>

<LI>outro item

<LI>outro item

<LI>outro item

</OL>



  1. outro item
  2. outro item
  3. outro item






 
 
 
Favourite links
 


Email me on:
[email protected]

This page has been visited times.