HTML Basico

por **Trinity** Sex maio 27, 2016 10:39 pm

HTML basico.

1. Títulos
Todo documento em HTML deve possuir um título. De um modo geral o título aparece em
lugar separado da página (por exemplo, alto da tela no Netscape), e é utilizado para
identificar o documento em outros contextos ( por exemplo, buscas Wais). É interessante que
o título possa sugerir claramente o conteúdo do documento.
Atenção porque o conceito de título é diferente de cabeçalho. O título está mais para o nome
do arquivo. Não é um elemento relevante na visualização do documento como acontece com
o cabeçalho.
A marcação utilizada para títulos é <title> e seu par </title>.
Escrito desta forma:

<html>
<title> Este é o título</title>
<body>
<h2>E este o cabeçalho de nível 2</h2>
Aqui entra o texto do documento ...
</body>
</html>

2. Cabeçalhos
"Cabeçalhos" normalmente são usados para títulos e sub-títulos de uma página.
HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior
destaque. Cabeçalhos são exibidos em letras maiores e em negrito. O primeiro cabeçalho em
cada documento deve estar marcado como <H1>.
ATENÇÃO: ao definir o tamanho de um cabeçalho, você não está definindo o tamanho da
letra (fonte 10, fonte 14). Você apenas define que ele aparecerá com maior tamanho e
destaque que o resto do texto. O tamanho exato com que ele será visualizado é definido pelo
programa visualizador de html (browser) de cada pessoa que acessar a informação.
As notações relativas a cabeçalhos são:
<Hy>Texto do cabeçalho </Hy >
onde y é um número entre 1 e 6 especificando o nível do cabeçalho.
O conjunto de notações possíveis é o que segue:

<H1>Headings</H1>
<H2>Headings</H2>
<H3>Headings</H3>
<H4>Headings</H4>
<H5>Headings</H5>
<H6>Headings</H6>

3. Parágrafos
A marcação <p> é utilizada para definir o início de um novo parágrafo, deixando uma linha
em branco entre cada parágrafo.HTML não reconhece o caracter de quebra de linha dos
editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o
início de um novo parágrafo mediante a marcação apropriada.

Existem algumas exceções. Por exemplo, inserindo uma marcação de parágrafo depois de
<P>, <lLI>,<Hy> e outras, esta será ignorada.

<p>Texto do paragrafo</p>

4. Quebras de linha
A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas.Veja
a diferença do uso de <p> e <br> ,nos exemplos a seguir:

<html>
<body>
<h1>Utilizando br</h1>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Deu pra notar?
</body>
</html>

INTERLIGANDO DOCUMENTOS

1. Para começar
2. Documentos em Outros Diretórios
3. Ligando URL’s
4. Ligando sessões específicas em outro documento

1. Para começar
O principal poder do HTML vem da sua capacidade de interligar partes de um texto (e
também imagens) a outros documentos. Os clientes exibem em destaque estas áreas ou
pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar que se trata
de um link, ou interligação, no hipertexto.

A marcação <A>, que define o ponto de partida para os links, é denominada de âncora. Para
incluir uma âncora em seu documento:

1. Inicie a âncora com <A . ( Há um espaço depois de A.)

2. Especifique o documento a ser interligado, inserindo parâmetro HREF="filename"
seguido do sinal: >

3. Insira o texto que vai funcionar como link no documento corrente

4. Anote a marcação de final da âncora: </A>.
Um exemplo de referência a um hipertexto:

<A HREF="ListaPraias.html">Praias</A>

A palavra “Praias'' é definida como o marcador do link para se chegar ao documento
ListaPraias.html, que está no mesmo diretório do documento corrente. Ou seja, "Praias"
aparece em negrito e se eu clicar nessa palavra será exibido o documento apontado -
ListaPraias.html

INTERLIGANDO DOCUMENTOS EM OUTROS DIRETORIOS

É possível interligar documentos em outro diretório especificando-se o caminho relativo a
partir do documento corrente, em relação ao que está sendo interligado.

Por exemplo, um link para o arquivo Sergipe.html localizado no
subdiretório Estados seria assim:

<A HREF="Estados/Sergipe.html">Sergipe</A>

Estes são dos denominados links relativos. É também possível usar o caminho
completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padrão do
sistema UNIX.

Importante: se você quiser referenciar um diretório a partir do “raiz” do seu servidor www,
inicie a notação com /. Isto é, se você tiver uma notação desta forma
<A HREF=“/imagens/incon1.gif”>, significa que o arquivo incon1.gif deverá ser buscado
no diretório imagens que está imediatamente acima do diretório raiz do seu servidor WWW.

3. Ligando URL’s.

Por exemplo, para incluir um link para o HTML Beginner’s Guide, em um documento, deve
ser usado:

<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>
O que torna a sentença ”NCSA's Beginner's Guide to HTML'' um link para tal
documento.

LISTAS

1. Listas Não Numeradas

2. Listas Numeradas

3. Listas de Definições

4. Listas Intercaladas

1. Listas Não Numeradas
Para criar uma lista não numerada:

1. Comece com a marcação de início de lista: <UL>.

2. Insira a marcação <LI> antes de cada item da lista item. (Não é necessário fechar
a marcação com </LI> )

3. Encerre com a marcação de fim de lista: </UL>.
Abaixo o exemplo de uma lista com dois itens:

<UL>
<LI> maçãs
<LI> bananas
</UL>

Cada marcação <LI> pode conter vários parágrafos.

2. Listas Numeradas

Uma lista numerada - ou ordenada - é semelhante a uma lista não numerada, exceto porque
utiliza marcação <OL> ao invés de <UL>. Os itens são identificados utilizando-se a
mesma notação <LI> .

Uma lista criada assim:

<OL>
<LI> laranjas
<LI> peras
<LI> uvas
</OL>

3. Listas de Definições

Uma lista de definições normalmente consiste em alternar um termo (abreviado como DT) e
uma definição (abreviado como DD). Clientes Web browsers geralmente mostram a
definição em nova linha com outro alinhamento.

Exemplo de uma lista de definição:

<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications, is located on the campus
of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC is
another participant in the National MetaCenter for Computational Science and
Engineering.
</DL>

As entradas <DT> e <DD> podem conter vários parágrafos (separados por <P> ), listas, ou
outras definições.

A marcação <DD> pode também ser utilizada, fora de uma lista de definições como se fosse
uma tabulação (insere um espaço no início da frase).

4. Listas Intercaladas

As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultados
bastante interessantes. A prática é que vai mostrar qual o número máximo de listas que vale
a pena intercalar. Pode-se inclusive ter um parágrafo, intercalado com uma lista que
contenha um único item.

Exemplo de lista intercalada:
<UL>
<LI> Estados da região sul do Brasil:
<UL>
<LI> Rio Grande do Sul
<LI> Santa Catarina
</UL>
<LI> Um estado da região nordeste:
<UL>
<LI> Pernambuco
</UL>
</UL>

TEXTO PRÉ-FORMATADO

A marcação <PRE>(derivada de ”preformatted”) delimita uma área de texto em que espaços,
novas linhas e tabulações são mantidas. Ou seja, o texto será apresentado exatamente da
forma como foi digitado, mesmo que não hajam marcações do html. É uma forma de se
preservar o formato de um texto.

Este recurso é utilizado por exemplo para listas de programas.Vejamos um exemplo:
<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>

Podem ser definidos links dentro de textos pré-formatados. No entanto, deve-se evitar utilizar
outros caracteres das marcações em áreas <PRE>. Isto porque caracteres como <, >, and &
possuem um significado específico no HTML.

O ideal é utilizar as sequências especiais, (<, >, and &, respectivamente) sempre
que precisar representar esses caracteres. Veremos mais sobre no próximo item.

CARACTERES ESPECIAIS

HTML permite que se apliquem estilos específicos a palavras ou sentenças.
Vamos ver algumas opções:

<B></B> texto em negrito
<I></I> texto em itálico

Para representar os caracteres das tags, utilize a seguintes notações:

< para representar <
> para representar >
& para representar &
"para representar "

Uma lista completa dessas notações especiais pode ser obtida no CERN, em:
http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html
Caso o editor que você esteja utilizando não acentue, é possível também utilizar
notações especiais para acentuação. Há uma lista delas ao final deste documento.

Atenção: Ao contrário do resto do HTML, as notações especiais diferenciam letras
maiúsculas de minúsculas. Não é possível usar &LT; no lugar de <.

ENDEREÇOS

A marcação <ADDRESS></ADDRESS> é habitualmente utilizada para especificar o autor do
documento e a forma de contato com ele (por exemplo, o endereço eletrônico). Geralmente é
o último item de uma página.

Por exemplo, a última linha do Beginer's Guide em que foi baseado este tutorial é assim:
<ADDRESS>

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
</ADDRESS>

Existe ainda um recurso para criar um item na página que, ao ser selecionado, abre uma
janela, e permite que se envie uma mensagem eletrônica para um endereço específico. Para
isso utiliza-se a variável "mailto:"

Veja o exemplo abaixo, para enviar mensagens de dúvidas para o
endereço eletrônico apoio@cr-df.rnp.br
Qualquer dúvida ou comentário, você pode enviar um email ao

<a href="mailto:apoio@cr-df.rnp.br">pessoal de apoio
</a> a usuários do CR-DF.

INSERIR IMAGENS

As imagens dentro de uma página devem estar preferencialmente no formato ".gif". Este é o
formato mais universalmente aceito pelos visualizadores de WWW (browsers). O Netscape
consegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade não é
comum a todos os programas.

Utiliza-se a seguinte notação para incluir uma imagem:

<img src="diretório/arquivo">

Alinhamento das imagens

Toda imagem incluída pode ser posicionada (align=...) na tela das seguintes
formas: TOP, MIDDLE, BOTTOM, LEFT e RIGHT.

Atenção: De um modo geral não é necessário incluir essa anotação para alinhar a
imagem a esquerda. Caso seja omitida a opção "align", a imagem aparecerá a
esquerda da página.

Uma imagem pode ser ainda um botão sensível: Para isso basta incluir uma imagem no
interior de uma âncora.

<a href="./index.htm"><img src="../images/stop.gif></a>

j. Controle de Cores e Gráficos de Fundo

1. Cores e elementos gráficos de fundo

2. Cores de letras e links

1. Cores e elementos gráficos de fundo

· O Atributo Background

O atributo Background deve ser aplicado à marcação <body>. Este atributo especifica a URL
de uma imagem que será utilizada como fundo (background) de uma página. Esta imagem
ocupará toda a área de fundo da tela.

Deve ser escrito desta forma:

<body background="images/fundo.gif"> .. toda a página .. </body>

É importante ter cuidado para que elementos de fundo não prejudiquem a leitura do texto em
tela. De um modo geral, esses elementos devem aparecer em cores bem claras e sutis.

Sempre vale a pena visitar outras páginas que utilizam esse recurso para recolher
boas idéias.

· O Atributo BGColor

Este atributo também deve acompanhar a marcação <body>. Ele permite que se defina uma
cor padrão para o fundo da página, sem necessidade de um arquivo imagem para isso.

O formato da marcação é:

<body bgcolor="#rrggbb">Aqui fica a página</body>

Onde "#rrggbb" é um código hexadecimal no padrão "red-green-blue" utilizado para
especificar a cor de fundo.

CORES DE LETRAS E LINKS

· O atributo TEXT

Este atributo é utilizado para controlar a cor do texto "normal" em uma página. Ou seja define
a cor de todo o texto do documento exceto os links. O atributo deve acompanhar a marcação
<BODY>, escrevendo-se da seguinte forma:

<body text="#rrggbb">Aqui entra o documento</body>

Onde "RGB" é um código hexadecimal do trio "red-green-blue", exatamente no mesmo
padrão daquele utilizado no atributo BGCOLOR. Para conhecer as variações desse padrão
sugerimos consulta a tabela disponível na INFINET citada anteriormente.

· Os atributos LINK, VLINK e ALINK

Este atributo controla a cor de textos que funcionem como link na página.

1. LINK define cores de links nao consultados

2. VLINK se referente a links já consultados e

3. ALINK determina cor de links quando ativados.

A notação é absolutamente igual à anterior, seguindo os mesmos padrões para definir as
cores. Uma definição completa incluiria então:

<body text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">
Aqui entra o documento
</body>

BARRAS HORIZONTAIS

A marcação <HR> produz uma linha horizontal no documento.

É possível determinar uma largura maior para as barras, utilizando-se a extensão "size".

É ainda possível determinar o quanto da largura da página a linha horizontal vai ocupar. Para
isso utiliza-se a extensão width= .

Atenção: a extensão width não determina o comprimento da linha (em cm ou mm),
mas o quanto da largura da página ela deve ocupar.

TABELAS EM HTML

a. Principais Marcações

b. Atributos de Tabelas

c. Outros Elementos de Controle

a.Principais Marcações

Segue abaixo o conjunto de marcações essenciais para desenhar tabelas em HTML. Alguns
atributos podem ser definidos para cada uma dessas marcações. Falaremos desses atributos mais
adiante.

· <TABLE></TABLE>

Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>.

ATENÇÃO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e células.

Para que a tabela apareça com bordas simples, defina dessa forma <table border></table>.

Antes e depois de uma tabela, acontece sempre uma quebra de linha.

· <TR></TR>

Cada linha de uma tabela deve sempre aparecer entre as marcações <tr> e </tr>. (TR = Table
Row)

· <TD></TD>

Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre
aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas células é alinhado
a esquerda.

· <TH></TH>

Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquer
célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito.

Vamos ver então o exemplo de uma tabela utilizando essas marcações básicas.

<table border>
<tr>
<td>Itens/Mês</td>
<th>Janeiro</th><th>Fevereiro</th><th>Março</th>
</tr>
<tr>
<th>Usuarios</th><td>80</td><td>93</td><td>120</td>
</tr>
<tr>
<th>Linhas</th><td>3</td><td>3</td><td>5</td>
</tr>
</table>

b. Atributos

As marcações das tabelas, podem apresentar resultados diferentes, se acompanhadas de alguns
atributos. Vamos ver os principais:

· <BORDER>

Esse atributo aparece junto a marcação TABLE. Caso esse atributo não apareça, a tabela não terá
bordas.

Ou seja, como já vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas
marcações <table border> </table>.

· <ALIGN>

Este atributo pode ser aplicado a TR,TH e TD, e controla como será o alinhamento do texto dentro
de uma célula, com relação às bordas laterais.

Aceita os valores left, center, right, respectivamente para alinhar a esquerda, centralizar ou alinhar
a direita.

Veja o exemplo:

<table border>
<tr>
<td>Primeira célula</td><td>Segunda célula</td><td>Terceira célula</td>
</tr>
<tr>
<td align=center>centro</td>
<td align=left>esquerda</td>
<td align=right>direita</td>
</tr>
</table>

<VALIGN>

Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas células com relação a borda
superior e inferior.

Aceita os valores top, middle e bottom

<table border>
<tr>
<td> Teste para linhamento<br>
com relação a bordas<br>
inferior e superior<br>
</td>
<td valign=top> TOP </td>
<td valign=middle>MIDDLE</td>
<td valign=botton>BOTTOM</td>
</tr>
</table>

<NOWRAP>

Este atributo evita que haja uma quebra de linha dentro de uma célula. Cautela ao utilizá-lo, para
não produzir células muito largas.

· <COLSPAN>

Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger. Por padrão
cada célula corresponde a uma coluna, ou seja COLSPAN=1.

Vejamos um exemplo

<table border>
<tr>
<td colspan=3>3colunas</td><td>normal</td><td>normal</td>
</tr>
<tr>
<td>col 1</td><td>col 2</td><td>col3</td><td>col 4</td><td>col 5</td>
</tr>
</table>

<ROWSPAN>

Este atributo pode ser aplicado a células (TH e TD) e define quantas linhas uma mesma célula
pode abranger. Assim como na marcação anterior, o padrão é uma célula corresponder a uma
linha.

Novamente, vamos ver exemplos:

<table border>
<tr>
<td rowspan=3>3 linhas</td>
<td>col 2</td><td>col 3</td><td>col4</td><td>col5</td> </tr>
<tr>
<td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td>
</tr>
<tr>
<td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td>
</tr>
</table>

c. Mais elementos de controle

Vamos ver agora mais um conjunto de extensões que permitem maior controle sobre tabelas.

Estas são especialmente úteis na criação de múltiplas tabelas intercaladas.

· BORDER=<value>

Acrescentando um valor ao atributo BORDER é possível colocar tabelas em maior destaque:

<table border=5>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
<td>teste4</td> <td>teste5</td> <td>teste6</td>
</tr>
</table>

CELLSPACING=<value>

Este atributo é aplicável à marcação TABLE. Como padrão, o Netscape 1.1 utiliza espaço 2 entre
as células. Este atributo define o espaço entre cada célula na tabela.

<table border cellspacing=5>

<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
<td>teste4</td> <td>teste5</td> <td>teste6</td>
</tr>
</table>

CELLPADDING=<value>

Este atributo é aplicado também à marcação TABLE e define a distância entre o texto e a borda
de cada célula.

Veja exemplo:

<table border cellpadding=8>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
<td>teste4</td> <td>teste5</td> <td>teste6</td>
</tr>
</table>

A tabela mais compacta possível seria definida como: <table border=0 cellspacing=0
cellpadding=0>

WIDTH=<value or percent>

Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser associado
um valor em "pixels" (ponto em tela gráfica), como um valor percentual. Ou seja, determina o
quanto da tela uma tabela ou célula de tabela deverá ocupar.

Vamos ver os exemplos:

<table border width=50%>
<tr>
<td>segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>

Segundo exemplo - aplicando width a uma célula:

<table border>
<tr>
<td width=50%>segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>