Aula 3 Fundamentos de Construção de Sites

Prévia do material em texto

Fundamentos de 
Construção de Sites
Aula 3
1
Entidades
2
• Entidades: Algumas existem pelo fato de estarem 
relacionados ao HTML (< >)
© &copy;
® &reg;
< &lt;
> &gt;
& &amp;
€ &euro;
§ &sect;
“ &quot;
‘ &apos;
Lista: http://www.w3schools.com/tags/ref_entities.asp
Listas
• Não ordenadas
• Ordenadas
• Lista de Definição
3
Listas Não Ordenadas
<p>Software instalado</p>
<ul>
<li>Word</li>
<li>Excel</li>
<li>PowerPoint</li>
</ul>
4
Listas de Definição
<p>Informática - Conceitos Básicos</p>
<dl>
<dt>Hardware</dt>
<dd>- the collection of physical...</dd>
<dt>Software</dt>
<dd>- any set of machine-readable...</dd>
</dl> 
5
Listas Ordenadas
<p>Goleadores Brasileiro 2013</p>
<ol>
<li>Willian</li>
<li>Éderson</li>
<li>Maxi Biancucchi</li>
</ol>
6
Formatação de Listas
• Deve ser feito com CSS
<style type = "text/css">
ol {list-style-type: square;}
</style>
7
Hyperlinks
• Uma referência em um documento em hipertexto 
a outras partes deste documento ou a outro 
documento. 
• Elemento âncora <a>
<p>
<a href="http://www.ufsm.br">Site da UFSM</a>
</p>
8
Hyperlinks
• Atributo href
– Identifica o URI – Uniform Resource Identifier – o endereço Web 
onde está o documento a ser aberto.
• Caminho absoluto
– O endereço completo é utilizado
– Normalmente, o documento apontado não está no mesmo 
diretório
• Caminho relativo
– O documento está no mesmo servidor do documento atual
9
Caminho Absoluto
<a href="http://www.ufsm.br" > Site da UFSM</a>
10
Caminho Relativo (acessar exemplo: universidades)
• Para vincular um documento que está localizado em um 
diretório (pasta) dentro do diretório 
(subdiretório/subpasta) do documento que possuir o link, 
especifica-se o nome do subdiretório acrescido de uma 
barra “/” mais o nome do documento que o link está 
referenciando
<a href=“pasta/doc1.html">Documento 1</a>
11
Caminho Relativo
<a href="universidades/ufsm.html"> UFSM - Universidade 
Federal de Santa Maria</a>
12
Caminho Relativo
• De um documento para outro que está localizado no 
mesmo diretório (pasta), especifica-se apenas o nome 
do arquivo
<a href=“doc1.html"> Documento 1</a>
<a href=“./doc1.html"> Documento 1</a>
13
Caminho Relativo
<a href="ufsm.html"> UFSM - Universidade Federal de 
Santa Maria</a>
14
Caminho Relativo
• Para vincular um documento que está localizado no 
diretório pai do documento que irá possuir o link, deve-
se preceder o nome do arquivo especificado com “../”
<a href=“../doc1.html">Documento 1</a>
15
Caminho Relativo
<a href="../index.html"> Home </a>
*** Colocado dentro dos documentos ufrgs.html, ufsm.html, ulbra.html 
e unifra.html
 unifra.html
16
Elemento <a>
• Outros atributos para o elemento <a>
– title. Mostra quadro com a descrição do hyperlink 
quando o mouse é posicionado sobre ele (sem 
“clicar”).
– target. Indica onde o documento será carregado
Exemplo: target=“_blank” uma nova janela do 
browser é aberta
*** Não pode ser usado com xhtml strict ***
17
Hyperlinks Internos (acessar exemplo: TCC)
• Hyperlinks podem ser internos: apontam para outras partes 
do mesmo documento
<p>O texto é organizado da seguinte forma. No <a href="#cap1">Capítulo 1</a> 
são apresentados os principais conceitos da área. Após no 
<a href="#cap2">Capítulo 2</a> é apresentada a solução proposta. Já no 
<a href="#cap3">Capítulo3</a> são feitos testes usando a solução proposta. 
Finalmente no <a href="#cap4">Capítulo 4</a> são apresentadas as considerações 
finais.</p> 
<h2><a id="cap1">Capítulo 1</a></h2>
<p>Este capítulo...</p>
p>texto..</p>
<h2><a id="cap2">Capítulo 2</a></h2>
<p> Este capítulo...</p>
18
id é um atributo comum 
a muitos elementos – 
Identifica de forma 
única um elemento 
	Slide 1
	Entidades
	Listas
	Listas Não Ordenadas
	Listas de Definição
	Listas Ordenadas
	Formatação de Listas
	Hyperlinks
	Hyperlinks
	Caminho Absoluto
	Caminho Relativo (acessar exemplo: universidades)
	Caminho Relativo
	Caminho Relativo
	Caminho Relativo
	Caminho Relativo
	Caminho Relativo
	Elemento <a>
	Hyperlinks Internos (acessar exemplo: TCC)