introdução a tecnologias e

aplicações para a web

(html) sir
pedro moreira
2007-2011
história – linha de tempo (fonte: wikipedia)
sir

sir pedro moreira 2007-2011

referências sir

  HTML 4.01 Specification

  http://www.w3.org/TR/REC-html40
  XHTML™ 1.0 The Extensible HyperText Markup
Language (Second Edition)
  http://www.w3.org/TR/xhtml1
  HTML5 (draft)
  http://www.w3.org/TR/html5/

sir pedro moreira 2007-2011

(alguns) sítios de partida sir
  World Wide Web Consortium
  www.w3c.org

sir pedro moreira 2007-2011

URI : uniform resource identifier sir

http:// alunos.estg.ipvc.pt/~pmoreira/exs/exemplo.html
1 2 3 4
protocolo endereço caminho recurso

hostname . sub-domínio . domínio . domínio de topo

sir pedro moreira 2007-2011

arquitectura cliente-servidor sir

sir pedro moreira 2007-2011

HTML : definições sir
  Documento HTML (HTML Document)
  um documento HTML é um documento SGML que está de
acordo com a especificação HTML

  Autor (Author)
  um autor é uma pessoa ou programa que escreve ou gera
documentos HTML. Uma ferramenta de autoria é um caso
especial de um autor, mais precisamente, é um programa
que gera HTML.

sir pedro moreira 2007-2011

HTML : definições sir
  Utilizador (User)
  um utilizador é uma pessoa que interage com um agente
para ver, ouvir ou usar de uma qualquer outra forma um
documento HTML interpretado (“rendered”).

  Agente HTML (HTML user agent)

  Um agente HTML é uma qualquer dispositivo que interpreta
documentos HTML. Os “browsers” visuais, os “browsers” não
visuais (audio, braille), os proxies, robots de pesquisa, etc,
são agentes HTML.

sir pedro moreira 2007-2011

HTML : definições sir
  Descontinuado (Deprecated)
  elementos ou atributos descontinuados são aqueles, que
fazendo parte de especificações anteriores, foram
substituídos por novos elementos, atributos ou construções.
Os elementos e atributos descontinuados continuam a ser
suportados, de forma transitória, pelos agentes HTML.
  Obsoleto (Obsolete)
  um elemento ou atributo obsoleto é aquele para o qual já
não existem garantias de suporte por parte de um agente
HTML.

sir pedro moreira 2007-2011

HTML : definições sir
  Elementos e Marcadores (Elements and Tags)
  Elementos são as estruturas que descrevem partes de
documentos HTML. Por exemplo o elemento P representa
um parágrafo enquanto o elemento EM dá ênfase ao seu
conteúdo
  Um elemento possui três partes:
  um marcador de início (start tag)
  conteúdo (content)
  marcador de fim (end tag)

sir pedro moreira 2007-2011

HTML : definições sir
  Um marcador (tag) é um texto (especial) delimitado por "<"
e ">". Um marcador de fim inclui uma "/" depois do "<". Por
exemplo, o elemento EM possui um marcador de início
<EM>, e um marcador de fim </EM>. Os marcadores de
início e fim delimitam o conteúdo do elemento EM:
<EM>texto com ênfase</EM>

  Os nomes dos elementos não são sensíveis a maiúsculas

(case-insensitive) então: <em>, <eM>, and <EM>são tudo o
mesmo.
  Os elementos não se devem sobrepor.Se o marcador de
início para um elemento EM ocorre dentro do conteúdo de
um elemento P então o marcador de fim desse elemento
EM deve ocorrer dentro do conteúdo do mesmo elemento
P.

sir pedro moreira 2007-2011

HTML : definições sir
  Alguns elementos permitem que os marcadores de início e/
ou de fim sejam omitidos. Por exemple, o marcador de fim
do elemento P é sempre opcional, dado que o o fim deste
elemento é implicitamente determinado pelo início do
próximo elemento P:
<P> um parágrafo
<P> outro parágrafo
  Alguns elementos não possuem marcador de fim pois não
possuem conteúdo.Estes elementos, tal como o BR, são
representados apenas pelo marcador de início e dizem-se
elementos vazios (empty elements)

sir pedro moreira 2007-2011

HTML : definições sir
  atributos (attributes)
  Os atributos de elementos definem diversas propriedades
para esse elemento. Por exemplo, o elemento IMG possui
um atributo SRC para fornecer a localização do ficheiro de
imagem e um atributo ALT para uma descrição alternativa
em texto caso a imagem não seja visualizada:
<IMG SRC=”estglogo.gif" ALT=”Logotipo da ESTG">
  Um atributo está incluído sempre no marcador de início e
toma a forma:
nome-atributo =”valor-do-atributo"
  O valor do atributo é delimitado por aspas. Estas podem ser
opcionais em determinados casos.
  Os nomes dos atributos são insensíveis a maiúsculas (case-
insensitive), mas os valores podem ser sensíveis (case-
sensitive).

sir pedro moreira 2007-2011

URI : universal resource identifier sir
  universal resource identifier (URI)
  cada recurso disponibilizado na Internet (documentos HTML,
imagens, vídeos, programa, etc), possui um endereço.
  este endereço pode ser codificado numa URI (universal
resource identifier)
  uma URI tem tipicamente três partes:
  o mecanismo de acesso ao recurso (tipicamente o protocolo de
acesso)
  a identificação (endereço lógico ou endereço físico) do servidor
que aloja o recurso
  o path (caminho) até ao recurso

sir pedro moreira 2007-2011

URI : universal resource identifier sir
  exemplos (fonte wikipedia)
  ftp://ftp.is.co.za/rfc/rfc1808.txt
  gopher://spinaltap.micro.umn.edu/00/Weather/
California/Los%20Angeles
  http://www.linux.ime.usp.br/~andrew/mac499/
index.htm
  mailto:andrew@linux.ime.usp.br
  news:comp.infosystems.www.servers.unix
  telnet://melvyl.ucop.edu/

sir pedro moreira 2007-2011

HTML : estrutura global de um documento sir
  Um documento HTML é constituído por duas partes:
  uma linha HTML contendo informação sobre a versão de HTML
utilizado
  uma secção declarativa delimitada pelo elemento <HTML>,
que conterá duas partes:
  uma secção declarativa delimitada pelo elemento <HEAD>
  um secção corpo, que contém o conteúdo do documento. O
corpo deverá ser delimitado pelo elemento <BODY> no caso de
documentos “mono-página” ou pelo elemento <FRAMESET> no
caso de documentos “multi-página”

sir pedro moreira 2007-2011

estrutura global de um documento
html sir
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://
www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>O Título do Documento</TITLE>
</HEAD>
<BODY>
<H1>Título / Destaque Principal</H1>
<P>Um parágrafo.</P>
<P>Outro parágrafo.</P>
<UL>
<LI> Um elemnto de uma lista.</LI>
<LI> Outro elemnto de uma lista.</LI>
</UL>
</BODY>
</HTML>

sir pedro moreira 2007-2011

indicação da versão sir
  Um documento HTML válido declara qual a versão de
HTML que é utilizada.
  A declarção document type declaration refere qual a
“documente Type Definition” (DTD) que o documento
utiliza
  HTML 4.0 especifica três DTDs, pelo que os autores
deverão incluir uma delas nos seus documentos. As DTDs
diferem no tipo de elementos que são suportados.

sir pedro moreira 2007-2011

indicação da versão sir
  A HTML 4.01 “Strict” DTD inclui todos os elementos e
atributos que não foram descontinuados ou que não são
elementos específicos de documentos “multi-
página” (frameset):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN""http://www.w3.org/TR/REC-html40/
strict.dtd">

  A HTML 4.0 “Transitional” DTD incluiu todos os elementos da

“Strict” DTD mais todos os elementos e atributos que foram
descontinuados.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN” "http://www.w3.org/TR/REC-
html40/loose.dtd">

  A HTML 4.0 “Frameset” DTD inclui tudo o que inclui a

“transitional” DTD mais “frames” :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN” "http://www.w3.org/TR/REC-
html40/frameset.dtd">

sir pedro moreira 2007-2011

atributos comuns sir
  Um determinado número de atributos em HTML 4.0 são
comuns à maioria dos elementos. Estes atributos comuns
dividem-se em:
  nucleares (core attributes)
  ID, CLASS, STYLE e TITLE
  internacionalização (internationalization)
  LANG e DIR
  eventos para scripting (scripting events)
  ONCLICK, ONMOUSEOVER, ONMOUSEOUT, etc

sir pedro moreira 2007-2011

atributos comuns - nucleares sir
  ID
  O atributo ID identifica de forma única um elemento dentro
de um documento. Nenhuns dois elementos deverão
partilhar o mesmo valor para o atributo ID dentro de um
mesmo documento.
  O valor do atributo deverá começar por uma letra e
poderá ser seguido de letras (A-Za-z), dígitos (0-9), hífenes
("-"), underscores ("_"), dois pontos (":") e pontos (".").

sir pedro moreira 2007-2011

atributos comuns - nucleares sir
  ID
  Exemplo (identifica dois parágrafos de um documento) :
<P ID=firstp>My first paragraph.</P>
<P ID=secondp>My second paragaph.</P>
  Os parágrafos poderão ter regras de estilo (“Style Rules”)
diferentes, associadas através do valor do seu atributo ID:
P#firstp {
color: navy;
background: transparent
}
P#secondp {
color: black;
background: transparent
}

sir pedro moreira 2007-2011

atributos comuns - nucleares sir
  CLASS
  O atributo CLASS especifica que o elemento é membro de
uma ou mais classes.
  Ao contrário do atributo ID, qualquer número de elementos
pode partilhar a mesma classe. Um elemento poderá
também pertencer a múltiplas classes, neste caso o valor
do atributo CLASS será uma lista separada por espaços de
nomes de classes (nota: múltiplas classes ainda não são
suportadas pela maior parte dos browsers actuais).

sir pedro moreira 2007-2011

atributos comuns - nucleares sir
  CLASS
  O atributo CLASS é de bastante usado em combinação
com folhas de estilos (“style sheets”). Por exemplo:
  O seguinte exemplo permite o uso do atributo CLASS para
associar estilos aos elementos:
<DIV CLASS=navbar>
<P> <A href="http://www.htmlhelp.com/">Home</A> |
<A HREF="./">Index</A> |
<A href="http://www.htmlhelp.com/search.html">Search</A>
</P>
<P> <A href="http://www.htmlhelp.com/”>
<IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A>
</P>
</DIV>

sir pedro moreira 2007-2011

atributos comuns - nucleares sir
  CLASS
  Este exemplo permite o uso do atributo CLASS para associar
estilos aos elementos:

.navbar {
margin-top: 2em;
padding-top: 1em;
border-top: solid thin navy
}

.navbar IMG { float: right }

sir pedro moreira 2007-2011