FIS146 - Informática Aplicada a Fı́sica

Geral Doc. Cabe¸calhos... Format. Links Imagens Bib
Introdu¸cão a Linguagens de Marca¸cão
HTML - HyperText Markup Language
Marcilio N. Guimarães
UNIVERSIDADE FEDERAL DA BAHIA
INSTITUTO DE FÍSICA
FIS146 - Informática Aplicada a F´ısica
(1◦ semestre de 2017)
M. N. Guimarães HTML

Sumário
1 Visão Geral
2 Documento básico
3 Cabe¸calhos, Separadores e Listas
4 Formata¸cão de texto e caracteres
5 Liga¸cões (uso de links)
6 Imagens
7 Bibliografia

Linguagem de marca¸cão
Em informática, uma linguagem de marca¸cão é um conjunto de
códigos aplicados a um texto ou a dados, com o fim de adicionar
informa¸cões particulares sobre esse texto ou dado, ou sobre trechos
espec´ıficos.
A ideia e terminologia evolu´ıram da “marca¸cão”de manuscritos,
isto é, das instru¸cões de revisão pelos editores, tradicionalmente
escritas com caneta azul nos manuscritos dos autores. Exemplos
são instru¸cões de defini¸cão de tipo tais como aquelas encontradas
em LATEX, e marcadores estruturais tais como etiquetas XML.
A marca¸cão normalmente é omitida da versão do texto que é
mostrada para o usuário. Algumas linguagens de marca¸cão, tal
como HTML, possuem semântica de apresenta¸cão, o que significa
que sua especifica¸cão prescreve como o dado estruturado será
mostrado.

Linguagem HTML
A HTML (HyperText Markup Language ou Linguagem de
Formata¸cão de Hipertexto) é fruto da jun¸cão de dois padrões.
HyTime (Hypermedia/Time-based Document Structuring
Language) - padrão para representa¸cão estruturada de
hiperm´ıdia e informa¸cão baseada em tempo. Um documento é
visto como um conjunto de eventos concorrentes dependentes
de tempo (áudio, v´ıdeo, etc.), conectados por webs ou
hiperlinks;
SGML (Standard Generalized Markup Language) - é uma
metalinguagem através da qual se pode definir linguagens de
marca¸cão para documentos. Não foi desenvolvido para
hipertexto, mas torna-se conveniente para transformar
documentos em hiper-objetos e para descrever as liga¸cões.
Desde 1996, as especifica¸cões HTML vêm sendo mantidas pela
World Wide Web Consortium (W3C).

Outras linguagens de marca¸cão
XML (eXtensible Markup Language) - subconjunto da SGML,
projetada para ser mais simples de se analisar
gramaticalmente e de se processar.
XHTML (eXtensible Hypertext Markup Language) -
reformula¸cão da HTML, baseada em XML. Combina as tags
de marca¸cão HTML com regras da XML.
CSS (Cascading Style Sheets) - utilizada para definir a
apresenta¸cão de documentos escritos em uma linguagem de
marca¸cão, como HTML ou XML. O seu principal benef´ıcio é a
separa¸cão entre o formato e o conteúdo de um documento.
MathML (Mathematical Markup Language) - aplica¸cão do
XML para representar s´ımbolos e fórmulas matemáticas.
HTML5 (Hypertext Markup Language, versão 5) - será o
novo padrão para HTML e XHTML.

Editores HTML
Os documentos em HTML são arquivos de texto simples que
podem ser criados e editados em qualquer editor de textos comum.
Alguns editores de texto fonte facilitam a inser¸cão das etiquetas,
orientando o uso de atributos e marca¸cões:
Bluefish
GNU Emacs
SeaMonkey Composer
Komposer
Adobe Dreamweaver
Microsoft Expression Web
Sistemas de gerenciamento de conteúdo
São aplicativos usados para criar, editar, gerenciar e publicar
conteúdo de forma organizada e fácil:
WordPress
Joomla
Drupal
Moodle
O documento HTML terá extensão .html ou .htm.

Publica¸cão de documentos
Para que uma página esteja permanentemente dispon´ıvel pela
Web, ela precisa ter um endere¸co fixo, alojada em um servidor.
Existem vários provedores de espa¸co (hosting) gratuitos e também
os provedores de acesso geralmente oferecem espa¸co para os sites
de seus assinantes.
Definida a hospedagem, basta enviar para o provedor os arquivos
de seu site e suas páginas já estarão dispon´ıveis para visitas.

Etiquetas (tags)
Todo documento HTML apresenta elementos entre parênteses
angulares (< e > ); esses elementos são as etiquetas (tags). Elas
servem para definir a formata¸cão de uma por¸cão de texto e a
maioria tem sua correspondente de fechamento:
<etiqueta>...</etiqueta>
Alguns elementos são chamados “vazios”, pois não marcam uma
região de texto, apenas inserem alguma coisa no documento:
<etiqueta>
Todos os elementos podem ter atributos:
<etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>

Componentes
A estrutura de um documento HTML apresenta os seguintes
componentes:
<HTML>
<HEAD><TITLE>T i t u l o do Documento</TITLE></HEAD>
<BODY>
texto ,
imagem ,
l i n k s ,
. . .
</BODY>
</HTML>
As etiquetas HTML não são sens´ıveis à caixa, ou seja, tanto faz
escrever <HTML>, <Html>, <html>, <HtMl>, ...

A se¸cão <HEAD> I
<HEAD> contém informa¸cões sobre o documento.
O elemento <TITLE>, por exemplo, define um t´ıtulo, que é
mostrado no alto da janela do browser. Por exemplo, podemos
podemos defini-la como:
<HEAD><TITLE>FIS146 − Aula sobre HTML</TITLE></HEAD>
Todo documento WWW deve ter um t´ıtulo que é referenciado em
buscas pela rede.

A se¸cão <HEAD> II
Se você adicionar esta página aos seus Favoritos, o resultado será
semelhante a este:

Campos <META> I
Os campos <META> têm dois atributos principais:
NAME - indica um nome para a informa¸cão.
HTTP-EQUIV - faz uma correspondência com campos de
cabe¸calho do protocolo HTTP; a informa¸cão desse campo
pode ser lida pelos navegadores, e provocar algumas a¸cões.
<HEAD>
<TITLE>T´ı t u l o do Documento</TITLE>
<META NAME=”nome” CONTENT=” v a l o r ”>
<META HTTP−EQUIV=”nome” CONTENT=” v a l o r ”>
</HEAD>

Campos <META> II
Podemos criar um documento com as seguintes informa¸cões:
<HEAD>
<META HTTP−EQUIV=” content−type ” CONTENT=” t e x t / html ;
c h a r s e t=iso −8859−1”>
<TITLE>FIS146 − Aula sobre HTML</TITLE>
<META NAME=” Author ” CONTENT=” M a r c i l i o N. Guimarães ”>
<META NAME=” Generator ” CONTENT=” Blue Fish ”>
<META NAME=” D e s c r i p t i o n ” CONTENT=” Curso de L i c e n c i a t u r a
em F´ı s i c a da UFBA”>
<META NAME=”KeyWords” CONTENT=”HTML, Linguagens
de Marca¸cão”>
</HEAD>
Essas informa¸cões não têm qualquer efeito na apresenta¸cão da
página, mas servem como uma explica¸cão ou documenta¸cão sobre
as informa¸cões contidas nela.

A se¸cão <BODY> I
Tudo que estiver contido em <BODY> será mostrado na janela
principal do navegador, sendo apresentado ao leitor.
Abaixo temos um código-fonte:
<html>
<HEAD>
< t i t l e>Primeiro exemplo de documento HTML</ t i t l e>
</HEAD>
<body>
<H1>Primeiro exemplo</H1>
Este &eacute ; um exemplo b&aacute ; s i c o de documento
HTML.
<P> Voc&e c i r c ; tamb&eacute ;m pode ver o documento
fonte , c l i c a n d o com o bot&a t i l d e ; o d i r e i t o do mouse no
menu ”Ver c&oacute ; digo−fonte da p&aacute ; gina ” .
<P>
</body>
</ html>

A se¸cão <BODY> II
Abaixo temos um exemplo de um documento básico em HTML
gerado pelo código anterior.

Atributos de <BODY>
Através de atributos de <BODY>, podemos definir cores:
<BODY BGCOLOR=”#rrggbb ” TEXT=”#rrggbb ” LINK=”#rrggbb ”
ALINK=”#rrggbb ” VLINK=”#rrggbb ” BACKGROUND=”URL”>
onde,
BGCOLOR - cor de fundo (padrão = cinza ou branco);
TEXT - cor dos textos da página (padrão = preto);
LINK - cor dos links (padrão = azul);
ALINK - cor dos links, quando acionados (padrão =
vermelho);
VLINK - cor dos links, depois de visitados (padrão = azul
escuro ou roxo);
BACKGROUND - indica o URL da imagem a ser replicada no
fundo da página, como uma marca d’água.

Cabe¸calhos
Há seis n´ıveis de cabe¸calhos em HTML, de <H1> a <H6>:
<H1>Este é um cabe¸calho de n´ı v e l 1</H1>
· · ·
Esses cabe¸calhos são mostrados da seguinte forma:

Cabe¸calhos
Alinhamento
Os cabe¸calhos têm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabe¸calho c e n t r a l i z a d o</H2>
Cabe¸calho centralizado
<H3 ALIGN=RIGHT>Cabe¸calho alinhado à d i r e i t a</H3>
Cabe¸calho alinhado à direita
<H4 ALIGN=LEFT>Cabe¸calho alinhado à esquerda ( padrão )</H4>
Cabe¸calho alinhado à esquerda (padrão)

Separadores I
Quebra de linha
Para mudar de linha, usamos o elemento <BR>.
l i n h a 1 do parágrafo 1 ,<br>l i n h a 2 do parágrafo 1.
que produz:
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.
Parágrafos
Para separar blocos de texto, usamos o elemento <P>:
Parágrafo 1.<P>Parágrafo 2.
que produz:
Parágrafo 1.
Parágrafo 2.

Separadores II
A etiqueta <P> também tem atributo de alinhamento:
<P ALIGN=CENTER>O que sabemos é uma gota ; o que
ignoramos é um oceano .<BR>( I s a a c Newton )</P>
O que sabemos é uma gota; o que ignoramos é um oceano.
(Issac Newton)
<P ALIGN=RIGHT>Como d i s s e A l b e r t E i n s t e i n : ”É mais
d i f´ı c i l de quebrar um p r e c o n c e i t o do que um átomo” .</P>
Como disse Albert Einstein: “É mais dif´ıcil de quebrar um
preconceito do que um átomo”.
<P ALIGN=LEFT>Este é o alinhamento padrão e por i s s o
não vou c o l o c a r nenhuma f r a s e e s p e c i a l .</P>
Este é o alinhamento padrão e por isso não vou colocar nenhuma
frase especial.

Listas
Listas de defini¸cão
Estas listas são chamadas também “Listas de Glossário”. São
muito utilizadas para diversos efeitos de organiza¸cão de páginas,
por permitir a tabula¸cão do texto.
<DL>
<DT>Termo a s e r d e f i n i d o
<DD>D e f i n i ¸cã o
</DL>
Que produz:
Termo a ser definido
Defini¸c~ao
Termo a ser definido
Defini¸c~ao

Listas
Listas não-numeradas
São equivalentes às listas com marcadores do LibreOffice Writer:
<UL>
<LI>Item de uma l i s t a
<LI>Item de uma l i s t a , que pode s e r tão grande quanto se
queira , sem que s e j a n e c e s s á r i o se preocupar com a
formata¸cão das margens de texto
<LI>Item
</UL>
Que produz
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¸cão das
margens de texto
Item

Listas
Listas numeradas
São equivalentes às listas com numera¸cão do LibreOffice Writer:
<OL>
<LI>Item de uma l i s t a numerada
<LI>Item de uma l i s t a numerada , que pode s e r tão grande
quanto se queira , sem que s e j a n e c e s s á r i o se preocupar
com a formata¸cão das margens de texto
<LI>Item de l i s t a numerada
</OL>
Que produz
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¸cão das margens de texto
3. Item de lista numerada

Listas
Listas e sub-listas I
As listas podem ser aninhadas.
Por exemplo:
<DL>
<OL>
<UL>
<LI>Item de uma l i s t a
</UL>
</OL>
</DL>
Que produz:
Termo a ser definido
Defini¸cão
1. Item de uma lista
numerada
numerada
Item de uma lista
numerada
Termo a ser definido
Defini¸cão

Blocos de texto
HTML oferece as seguintes formata¸c˜oes de blocos de texto:
<PRE>
Apresenta o texto na mesma maneira em que foi digitado:
<pre>uma l i n h a aqui ,
outra a l i ,
etc .</ pre>
Resulta em
uma l i n h a aqui ,
outra a l i ,
etc .

Blocos de texto
<BLOCKQUOTE>
É usado para cita¸cões longas:
<blockquote>A massa do Sol a r q u e i a o espa¸co−tempo de t a l
maneira que , ainda que a Terra s i g a uma t r a j e t ó r i a r e t a
no espa¸co−tempo quadridimensional , parece−nos que se
d e s l o c a em ó r b i t a c i r c u l a r no espa¸co t r i d i m e n s i o n a l .
<blockquote>
( Stephen W. Hawking , ”Uma Breve H i s t ó r i a do Tempo” )
Resulta em
A massa do Sol arqueia o espa¸co-tempo de tal maneira
que, ainda que a Terra siga uma trajetória reta no
espa¸co-tempo quadridimensional, parece-nos que se
desloca em órbita circular no espa¸co tridimensional.
(Stephen W. Hawking, “Uma Breve História do Tempo”)

Formata¸cão de frases
Estilos Lógicos
Há a formata¸cão no estilo lógico (apresenta¸cão varia conforme o
navegador):
<CITE> - Para t´ıtulos de livros, filmes, e cita¸cões curtas.
<CODE> - Para indicar trechos de código de programas.
<EM> - Ênfase, normalmente apresentado em itálico.
<STRONG> - Forte ênfase, normalmente em negrito.
E no estilo f´ısico (apresenta¸cão não sofre grandes varia¸cões):
<B> - Negrito.
<I> - Itálico.
<U> - Sublinhado.
<BIG> ou <SMALL> - Fonte um pouco maior ou menor,
respectivamente.
<SUB> ou <SUP> - Frase em estilo indice ou expoente,
respectivamente.

Caracteres especiais I
Os caracteres ASCII &, ;, < e > têm significados especiais e são
usados dentro de documentos seguindo a correspondência:
Entidade Caractere
< <
> >
& &
; ;
O Bluefish, por exemplo, faz automaticamente as conversões de
caracteres comuns em entidades HTML e vice-versa. Basta ir no
menu “Ferramentas > Converter > Caracteres para entidades”.
No Bluefish, se você está com dificuldade de exibir palavras com
acentos vá ao menu “Editar > Preferências > Arquivos >
Codifica¸cão”em “Conjunto de caracteres padrão para novo
arquivos”troque UTF-8 por ISO-8859-15 e as palavras acentuadas
serão exibidas normalmente no navegador.

Caracteres especiais II
Tabela com os caracteres mais utilizados em Português:
Entidade Caractere
á á
â â
à à
ã ã
ç ¸c
é é
ê ê
í ´ı
ó ó
ô ô
õ õ
ú ú
ü ü
Entidade Caractere
Á Á
Â Â
À À
Ã Ã
Ç Ç
É É
Ê Ê
Í Í
Ó Ó
Ô Ô
Õ Õ
Ú Ú
Ü Ü

Cores e fontes
Cores
As cores são introduzidas através do elemento <FONT>, usando o
sistema RGB (Red, Green, Blue) para cores, cujo valores são dados
em hexadecimal:
<FONT COLOR=”#rrggbb ”>Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da defini¸cão
geral de cores, feita através dos atributos de <BODY>.
Existem tabelas de cores com esses valores, mas grande parte dos
editores já oferece uma interface bem amigável através da qual
escolhemos as cores desejadas, sem nos preocuparmos com
números esdrúxulos tais como #FF80A0.

Cores e fontes
Tamanho
A formata¸cão
<FONT SIZE=tamanho da letra>Texto</FONT>
permite que o autor do documento altere o tamanho das letras em
trechos espec´ıficos de texto. O tamanho básico dos textos é 3.
Podemos indicar tamanhos relativos a esse, por exemplo:
<FONT SIZE=+2>Letra maior</FONT>
Letra normal
<FONT SIZE=−2>Letra menor</FONT>
Que produz
Letra maior Letra normal Letra menor

Cores e fontes
Fontes
O que permite a escolha da fonte para os textos ´e o atributo FACE:
<FONT FACE=” f o n t e d a l e t r a ”>Texto</FONT>
Por exemplo:
<FONT FACE=”Verdana” COLOR=”#0000AA”>
Fonte Verdana azul
</FONT>
Que produz
Fonte Verdana azul

Liga¸cões de hipertexto
Podemos fazer liga¸cões de uma região de texto (ou imagem) a um
outro documento.
Para inserir um link, utilizamos a etiqueta <A>, da seguinte forma:
<A HREF = ” a r q d e s t i n o ”>âncora</A>
onde:
arq destino é o URL do documento de destino;
âncora é o texto ou imagem que servirá de hyperlink (ou
simplesmente link) para o documento de destino.
Exemplo:
<A HREF = ” http ://www. google . com . br ”>S i t e do Google</A>
Que terá o seguinte resultado:
Site do Google

Atributos
A etiqueta <A> tem vários atributos. Os mais usados são:
HREF - indica o arquivo de destino da liga¸cão de hipertexto;
TARGET - indica o frame em que será carregado o
arq destino. Maiores detalhes pode ser obtido quando
estudarmos sobre frames;
NAME - marca um indicador, isto é, uma região de um
documento como destino de uma liga¸cão.

Caminhos (uso de links)
Os links podem estar como caminhos relativos ou absolutos.
Caminho relativo
É usado para fazer referência a um documento armazenado no
mesmo servidor.
Se, por exemplo, este documento está localizado em um diretório
“˜/Documentos”do servidor atual podemos escrever um link para
o documento exemplo1.html no subdiretório “/Exemplos”como:
Veja o <A HREF=”˜/Documentos/Exemplos/ exemplo1 . html ”
>exemplo de caminho r e l a t i v o</A>.
Que é apresentado como
Veja o exemplo de caminho relativo.

Caminhos (uso de links)
Caminho absoluto
Utilizamos quando desejamos referenciar um documento que esteja
em outro servidor, por exemplo:
Veja o <A HREF=” http ://www. moodle . ufba . br / p l u g i n f i l e . php/
278554/ mod resource / content /6/HTML. pdf ”>
Curso : FIS146 − Introdu¸cão à HTML</A>
que oferece um link para um documento no servidor WWW:
Veja o Curso: FIS146 - Introdu¸cão à HTML.

Indicadores (uso de links)
O atributo NAME permite indicar um trecho de documento como
ponto de chegada de uma liga¸cão hipertexto.
A formata¸cão:
<A NAME=” i n i c i o ”>I n d i c a d o r e s ( uso de l i n k s )</A>
faz com que a âncora “Indicadores (uso de links)”seja o destino de
um link.
Se escrevermos:
<A HREF=”#i n i c i o ”>Topo do documento</A>.
teremos uma liga¸cão hipertexto para um trecho deste mesmo
documento:
Topo do documento.

Inser¸cão de Imagens
O elemento IMG insere imagens que são apresentadas junto com os
textos. Um atributo SRC deve estar presente, da seguinte forma:
<IMG SRC=”URL imagem”>
onde URL imagem é o URL do arquivo que contém a imagem que
se quer inserir.
Assim, escrevendo:
<IMG SRC = ” ./ Imagens /imagem1 . jpg ”>
inserimos a figura no documento.
As imagens usadas na Web são armazenadas em arquivos com
extensão .gif, .xbm, .jpg (ou .jpeg), .png.

Atributos básicos de imagem
WIDTH e HEIGHT
Atributos de dimensão da imagem, em pixels.
<IMG SRC=”imagem” WIDTH=” l a r g u r a ” HEIGHT=” a l t u r a ”>
ALIGN
<IMG SRC=”imagem” ALIGN=alinhamento>
Existem também atributos de alinhamento:
ALIGN=TOP Alinha o texto com o topo da imagem.
ALIGN=MIDDLE Alinha o texto com o meio da imagem.
ALIGN=BOTTOM Alinha o texto com a parte de baixo da
imagem (padrão).
ALIGN=RIGHT Alinha imagem à direita.
ALIGN=LEFT Alinha imagem à esquerda.

Molduras de imagem
Os atributos de moldura deﬁnem o espa¸co (vertical e horizontal)
deixado entre as imagens e os textos circundantes:
<IMG SRC=”imagem” VSPACE=e s p a ¸c o v e r t i c a l>
<IMG SRC=”imagem” HSPACE=e s p a ¸c o h o r i z o n t a l>
Note que no texto abaixo a imagem n˜ao tem atributo de moldura.

Molduras de imagem
No texto abaixo a imagem tem atributo de moldura.
<IMG SRC=” ./ imagem2 . jpg ” ALIGN=”LEFT” WIDTH=”500”
HEIGHT=”300” HSPACE=”20” VSPACE=”20”>

Referências
Maria A. S. de Castro
Tutorial HTML, (2006) - Editado, modificado e corrigido por
Márcio Albuquerque em 2010.
CDTC - Centro de Difusão de Tecnologia e Conhecimento
HTML, ITI - Instituto Nacional de Tecnologia da Informa¸cão,
Governo Federal do Brasil (2006).
Wikipédia, a enciclopédia livre:
https://pt.wikipedia.org/wiki/HTML.

FIS146 - Informática Aplicada a Fı́sica

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a FIS146 - Informática Aplicada a Fı́sica

Semelhante a FIS146 - Informática Aplicada a Fı́sica (20)

Mais de Marcilio Guimarães

Mais de Marcilio Guimarães (7)

Último

Último (20)

FIS146 - Informática Aplicada a Fı́sica