Apostila de HTML 5

Lógica I

•

ESTÁCIO

PG Redes d e Computadores

I. Características Gera is do HTML

·Documentos HTML são arquivos escritos em AS CII - texto.

·Podem ser criados em qualquer ed itor de texto ( vi, emacs, edit, notepad)

·Existem editores específicos pa ra várias plataformas

·Existem conversores de vários formatos, por exemplo , doc para html

·A unidade mínim a de informaçãoéa“página”

Hádiferenças entre os diversos clientes W eb, de forma que nem todas as m arcações

e seus correspondentes recursos são suportadas por todos eles. Quando um cliente

não entende um a determinada marcação, ele sim plesmente a ignora. Ao criar um

documento, éim portante testá-lo com vários clientes.

Vocêpode visuali zar um documento que esteja criando com NCSA Mosaic

(ou qualquer outro cliente Web). Basta abrí-lo com o comando Open Local

File disponível na opção F ile do menu.

HTML utiliza marcações específicas e distin tas para dizer ao W eb browser como exibir o

documento.

Importante: HTML não faz diferença entre maiúsculas e minúsculas (nãoé

"case sensitive"). Então a notação <title> éequival ente a <TITLE> ou <TiTlE>.

Como são as Marcaçõe s HT M L?

As marcações do H TML - tags - consistem do sinal (<), (o símbolo de "menor que"), seguida

pelo nome da m arcação e fechada por (>) ("maio r que").

De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O

símbolo que termina um a determinada marcaçãoéigual aquele que a inicia, antecedido por

uma barra (/) e precedido pelo texto referente.

No exemplo, <H1> avisa ao cliente W eb para ini ciar a formatação do primeiro nível de

cabeçalho e </H1> avisa que o cabeçalho acabou.

Háexcessões a esse funci onamento em pares das m arcações. Por exemplo, a que indica

um final de parágrafo: <P> . Não necessita de uma correspondente: </P>. A marcação que

indica quebra de lin ha - <br> - também não preci sa de uma correspondente, e outras tais

como <hr> e <li>..

Exemplos de M arcações

·A notação: <TITLE> (e a correspondente </TITLE>), especificam o título de um

documento.

·A notação: <H1> (e a correspondente </H1>), indica a aparência de um cabeçal ho.

·A notação: <P>éa marcação para final de parágrafo.

II. Criando Documentos HT ML

a. HTML "Mínimo"

Todo documento deve ser identificado com o HTML (<html> </html>), ter uma área de

cabeçalho (<head></head>) com o nome para o docum ento (<title> </title>), um título

principal e uma área def inida com o corpo(<body></body>) do conteúdo do documento. Como

o exemplo a seguir:

<HTML>

<HEAD>

<TITLE>Exemplo de HTML simpl es</TITLE>

</HEAD>

<BODY>

<H1>Este éo primeiro nível de cabeçalho</H1>

Bem-vindo ao mundo do HT ML.

Este éo primeiro parágrafo.<P>

E este éo segundo.<P>

</BODY>

</HTML>

Esta página vai aparecer assim:

b. Marcações Básicas

1. Títulos

2. Cabeçalhos

3. Parágrafos

4. Queb ras de linha

1. Títulos

Todo documento em H TML deve possuir um título. De um modo geral o título aparece em

lugar separado da página (por exem plo, alto da tela no N etscape), e éutilizado para

identificar o documento em outros contextos ( por exemp lo, buscas W ais). É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>

Apresenta-se assim:

2. Cabeçalhos

"Cabeçalhos" normalm ente 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 mai or

destaque. Cabeçalhos são exib idos em letras mai ores e em negrito. O primeiro cabeçalh o 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 especif icando 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 defini r o início de um novo parágrafo, deixando uma l inha

em branco entre cada parágrafo.HTML não reconhece o caracter de quebra de linha dos

editores de texto. Mesmo que exista um a linha em branco, os cli entes W eb sóreconhecem o

início de um novo parágrafo media nte a marcação apropriada.

Existem algum as exceções. Por exemp lo, inserindo um a marcação de parágrafo depois de

<P>, <lLI>,<Hy> e outras, esta seráignorada.

4. Quebras de lin ha

A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas.Vej a

a diferença do uso de <p> e <br> ,nos exemplos a seguir:

<html>

<body>

<h1>Utilizando p</h1>

Vamos separar esta sentença com m arcação de parágrafo.<p>

Para verificar a diferença.

</body>

</html>

<html>

<body>

<h1>Utilizando br</h1>

Diferença quando separamos duas l inhas utilizando<br>

a marcação de quebra de linha<br>

Diferença quando separamos duas l inhas utilizando<br>

a marcação de quebra de linha<br>

Deu pra notar?

</body>

</html>

Veja a diferença no uso das duas notações:

c. 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 H TML vem da sua capacidade de interligar partes de um texto (e

também im agens) a outros documentos. Os clie ntes exibem em destaque estas áreas ou

pontos chaves (normalm ente com cores diferentes ou subli nhado) para indicar que se trata

de um link , ou interligação, no hi pertexto.

A marcação<A>, que define o ponto de partida para os link s, édenominada de âncora. Pa ra

incluir um a âncora em seu docume nto:

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

2. E specifique o documento a ser interligado, inserindo parâmetro HR EF="filename"

seguido do sinal: >

3. Insira o texto que vai funcionar com o link no d ocumento corrente

4. A note a marcação de final da ân cora: </A>.

Um exempl o de referência a um hi pertexto:

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

A palavra “Praias'' édefinida como o marcador do li nk para se chegar ao documento

ListaPraias.html, que estáno m esmo diretório do documento corrente. Ou seja, "Praias"

aparece em negrito e se eu clicar nessa palavra seráexibido o documento apontado -

ListaPraias.html

2. Interligand o Documentos em Outros Di retórios

Épossível interligar docum entos em outro diretório especificando-se o cam inho relativo a

partir do documento corrente, em relação ao que estásendo interligado.

Por exemplo, um li nk para o arquivo Sergipe.html locali zado no

subdiretório Estados seria assim :

<A HREF="Estado s/Sergipe.html">Sergipe</A>

Estes são dos denominados l inks relativos. Étambém possível usar o cami nho

completo (pathnam e absoluta) d o 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 arqui vo incon1.gif deveráser buscado

no diretório imagens que estáim ediatamente acim a do diretório raiz do seu servidor W W W .

3. Ligando URL’s

O W orld W ide W eb utiliza-se das Uniform Resource Locators (UR Ls) para especificar a

localização de arquivos em servidores. Uma URL incl ui o tipo de recurso acessado (p.e,

gopher, W A IS), o endereço do servidor, e a localização do arquivo.

Se escreve de acordo com o esquema abaixo:

protocolo://servidor[:port]/path/filename

Onde protocolo éuma das seguintes definições

file um arquivo no seu sistema local, ou servidor de ftp

http um arquivo em um servidor W orld W ide W eb

gopher um arquivo em um servidor Gopher

W A IS um arquivo em um servidor W AIS

news um Usenet newsgroup

telnet uma conexão Telnet

Por exempl o, para incluir um li nk para o HTM L B eginner’s Guide, em um documento, deve

ser usado:

<A HREF = "http: //ww w .ncsa.uiuc.edu/General/Internet/WWW/

HTM LPrimer.html"> NCSA's Beginne r's Guide to HTM L</A>

O que torna a sentença”NCSA's Beginner's Guide to H TML '' um lin k para tal

documento.

Para mais inf ormações sobre URLs, veja em

·WWW Names and Addresses, URIs, URLs, UR Ns, escrito por pessoas do CERN,

disponível em http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html.

·A Begi nner's Guide to URLs, locali zado no menu de Help do NC SA Mosaic, e disponível

em http://ww w .ncsa.uiuc.edu /demow eb/url-primer.html

4. Ligando sessões específicas em outro documento

Para fazer link s com sessões de outros documen tos o processo éo mesmo da sessão

anterior. Faz-se uma âncora normalmente, e apenas éacrescentado, após a url do

documento de destino, o sinal #e um a palavra, ou identif icador. O identifi cador é"volta" no

nosso exemplo:

Este éo meu <a href="index20.htm#volta">link</a> para o último item do índice deste

tutorial.

No índice do tutorial - arquivo index20.htm - deveráhaver uma notação que reconheça a

palavra/identificador informa do no ponto de partida.

Pode ser: <a name="volta"><li>Formulários Eletrônicos</a>.

d. Interligand o sessões em uma página

HTML permite que se façam l igações entre dif erentes trechos de um documento. Vocêpode

apontar uma palavra ou trecho de um texto utilizando uma âncora de nome (named anchor).

Este recurso ébastante usado na geraçãodeíndices de conteúdo no início de uma página.

O passo a passo é:

1.Defina o "ponto de partida", atribuindo a ele um no me qualquer - no exempl o item1-,

precedido do caracter #,da seguinte forma:

Veja o início da <a href="#item1">segunda sessão</a>.

2.Defina o "ponto de chegada", atribuindo a el e uma âncora de nome, com o nome

correspondente ao do ponto de partida, assim:

Esta <a name="intem1">segunda sessão</a> trata de..

e. Listas

1. Listas Não Numeradas

2. Listas Numeradas

3. Listas de Defini ções

4. Listas In tercaladas

1. Listas Não Numeradas

Para criar uma lista não numerada:

1. Comece com a m arcaçã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 exempl o de uma lista com dois itens:

<UL>

<LI> maçãs

<LI> bananas

</UL>

Vai aparecer assim :

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

2. Listas Numeradas

Uma li sta numerada - ou ordenada - ésem elhante a uma li sta não numerada, exceto porque

utiliza marcação<OL> ao invés de <UL>. Os itens são identificados utili zando-se a

mesma notação<LI> .

Uma li sta criada assim:

<OL>

<LI> laranjas

<LI> peras

<LI> uvas

</OL>

Resulta neste formato:

3. Listas de Defini ções

Uma li sta de definições normal mente consiste em alternar um termo (abreviado como DT) e

uma defini ção (abreviado como DD). Clientes W eb browsers geralmente m ostram a

definição em nova linha com outro alinham ento.

Exemplo de um a lista de defini ção:

<DL>

<DT> NCSA

<DD> NCS A, the Natio nal Cen ter for Supercom puting Application s, is located on the campus

of the U niversity of Illin ois at U rbana-Champaign. NC SA is one of the participa nts in the

National MetaCenter for C omputational Sci ence and Engi neering.

<DT> Cornell Theory Center

<DD> CTC is lo cated on the campus of Cornell U niversity in Ithaca, New York. CTC is

another participant in the National MetaCenter for Computational S cience and

Engineering.

</DL>

Crie agora seu perfil grátis para visualizar sem restrições.

Você viu 3 do total de 57 páginas deste material