Apostila de HTML 5

Lógica I

ESTÁCIO

1
Dislike1
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éapá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.
2
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:
3
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:
4
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.
5
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:
6
c. Interligando Documentos
1. Para começar
2. Documentos em Outros Diretórios
3. Ligando URLs
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 raizdo 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 URLs
7
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 eginners 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çaNCSA'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>.
8
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..
9
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.
10
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