Essa frase aparecerá

centralizada na página.

TER>

 Tag

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.

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:

 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 
.

 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 porc entagem em relação a página. 

Ex:

---

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.

Listas Ordenadas

Ordered Lists 








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.

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


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.

Exercício

Lista Não-Ordenada

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


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

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


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) (DT),, e a definição propriamente dita (DD) (DD).. Na exibição cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita.

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



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



 Texto Pré-Formatado

 







Apresenta o Texto da mesma maneira que foi digitado Com este tag, todos todos os espaços e entradas 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



 . . . . 




 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 Negrito Itálio Sublinhado



Sintaxe  Texto   Texto   Texto 



Fu n ç ã o Deixa o texto em Negrito Deixa o texto em Itálio Deixa o texto Sublinhado



 Fontes, Tamanhos e Cores  O Tag  é ultilizado para produzir a maioria das modificações em blocos de texto   Feliz 2008! 



 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)



 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 



 Caminhos Absolutos 



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



 Caminhos Relativos



 Links para seções de um documento



 Especificando um Destino