

A principal diferença entre a página HTML e um editor de textos tradicional é que a página não reconhece o fim de um parágrafo com o pressionamento da tecla Enter. Se você simplesmente escrever palavras sem TAGS de formatação em um arquivo html elas serão formatadas em um grande único parágrafo. Você precisa forçar o fim do parágrafo e a quebra de linha usando TAGS especiais. O TAG responsável pela quebra de parágrafos é o TAG

. Ele iniciará um novo parágrafo e pulará uma linha entre o texto.

Web Design - Prof. Glauber Freitas

29

Observação



Os parágrafos são digitados normalmente. O tag

serve para indicar o início de um novo parágrafo. Se o tag

for colocado antes de um título (

, por exemplo), a marca de parágrafo é ignorada. Nesse caso, o próprio título se encarrega de colocar o espaço necessário.

Atributo align; alinhamento, left – center – right. ex:



Web Design - Prof. Glauber Freitas

30

Tag
 Linhas  Assim

como as marcas de parágrafo, as quebras de linha são indicadas por um tag simples. Para abrir uma nova linha, usa-se o tag
.

Web Design - Prof. Glauber Freitas

31

Tag

---

   

A tag

---

cria uma linha horizontal no documento. Tem função decorativa Utilizada normalmente para separar seções de informação Atributos:  Align; posição (right, left, center).  Size; espessura da linha em pixels.  Width;largura da linha em px ou porcentagem em relação a

página.

Ex:

---

Web Design - Prof. Glauber Freitas

32

Listas  Na

linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definições (DL).  Podem ser criadas listas aninhadas, ou seja, listas dentro de listas.

Web Design - Prof. Glauber Freitas

33

Listas Ordenadas

Ordered Lists 



TYPE=... START=... >


Entre os elementos de início e fim, os itens da lista são definidos pelos elementos
. O atributo opcional TYPE define como será o tipo de numeração de cada linha. Os tipos disponíveis são: “A” (A, B, ..., Z), “a” (a, b, ..., z), “I” (i, ii, ..., v), e “1” (1, 2, ..., 5). Se omitido, é utilizado o tipo padrão (1, 2, 3, 4). O atributo opcional START define a partir de que elemento a numeração deve se iniciar.

Web Design - Prof. Glauber Freitas

34

Exercício

Lista ordenada por números

1. Elemento 1
2. Elemento 2
3. Elemento 3
4. Elemento 4

Lista ordenada por letras, iniciando em D

4. Elemento 1
5. Elemento 2
6. Elemento 3
7. Elemento 4


Web Design - Prof. Glauber Freitas

35

Listas Não Ordenadas
Unordered Lists. 


...




A estrutura das listas sem ordenação é a mesma das listas ordenadas, sendo que, na apresentação, os itens serão precedidos por um marcador (bullet).



O atributo TYPE pode ser:  – square: É um quadrado preenchido.  – circle: É um círculo vazado.

.

 – disk: É um círculo preenchido

Web Design - Prof. Glauber Freitas

36

Exercício

Lista Não-Ordenada

• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4


Web Design - Prof. Glauber Freitas

Código do exercício continua no slide seguinte... 37

Exercício


continuação...



Duas listas Não-Ordenadas aninhadas

• Elemento 1
• Elemento 2
  • Elemento 2.1
  • Elemento 2.2
  • Elemento 2.3
• Elemento 3
• Elemento 4


Web Design - Prof. Glauber Freitas

38

Lista de Definição 



...

- São marcas que englobam uma lista de definições, ideais para a criação de glossários e coisas do gênero. A estrutura desta lista é diferente das outras, pois existem dois elementos – o termo a ser definido (DT), e a definição propriamente dita (DD). Na exibição cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita.

Web Design - Prof. Glauber Freitas

39

Exercício : Lista de Definição

Listas de Definição

HTML

HyperText Markup Language

OL

Listas Ordenadas

UL

Listas Sem Ordenação

LI

Elemento da Lista



Web Design - Prof. Glauber Freitas

40

Margem 

Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente em cada navegador). Às vezes, será necessário aumentar essa margem e fazer com que o texto comece mais para dentro da página. O par de tags

e

serve para aumentar a margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:





Texto com mais margem







Texto com mais margem ainda



Web Design - Prof. Glauber Freitas

41

Texto Pré-Formatado

  











Apresenta o Texto da mesma maneira que foi digitado Com este tag, todos os espaços e entradas de parágrafo (o resultado da tecla ENTER) são respeitados. Com a Pré-Formatação, pode-se controlar o espaçamento com abrra de espaço e colocar o texto em praticamente qualquer lugar da página



 . . . . 
 Web Design - Prof. Glauber Freitas



42



 Formatação de Texto 



Todos os TAGS de formatação e estilo de texto devem ter seus tag de fechamento, pois senão ele se espalhará em toda sua página e não apenas onde você escolheu.







Estilos de caracteres  Os principais estilos de texto são:



Estilo



Sintaxe



Função



Negrito



 Texto 



Deixa o texto em Negrito



Itálio



 Texto 



Deixa o texto em Itálio



Sublinhado



 Texto 



Deixa o texto Sublinhado



Web Design - Prof. Glauber Freitas



43



 Fontes, Tamanhos e Cores  



O Tag  é ultilizado para produzir a maioria das modificações em blocos de texto











 Feliz 2008! 



Web Design - Prof. Glauber Freitas



44



 Hyperlinks  



Com o HTML é possível fazer-se ligações a partir de um bloco de texto ou imagem à um outro documento e também ligações entre os elementos do próprio documento, como áreas ou seções diferentes no do decorrer do documento.







Os Hyperlinks são destacados nos browsers por cores distintas ou sublinhados. (obs.: Nem sempre)



Web Design - Prof. Glauber Freitas



45



 Hyperlinks  Criação de um hyperlink básico:  âncora* 







 url



= é o caminho absoluto ou relativo do documento/arquivo/seção de destino.  âncora = bloco de texto ou imagem que será ultilizado como ligação entre o elemento especificado no atributo HREF e o documento que possui o link. É ela que será clicada pelo usuário para que o hyperlink passe a funcionar 



Ex:  Visitar o Google 



Web Design - Prof. Glauber Freitas



46



 Caminhos Absolutos  Ultilizam



a URL completa do documento que está sendo referenciado pelo link



Web Design - Prof. Glauber Freitas



47



 Caminhos Relativos



Web Design - Prof. Glauber Freitas



48



 Links para seções de um documento



Web Design - Prof. Glauber Freitas



49



 Especificando um Destino



Web Design - Prof. Glauber Freitas



50