Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 1 FORMATAÇÃO DE FRASES (continuação) Estilos Físicos. Elemento Produz texto com estilo subscrito.. Elemento Produz texto com estilo expoente. Vamos verificar o efeito da formatação física de frases, através da digitação da home-page abaixo. Grave com o nome exerc12.htm Formatação física de frases Elemento B (Continua ->...)

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 2 Mostra o texto negrito (em alguns navegadores pode aparecer sublinhado). Elemento I Produz um texto em itálico – em alguns casos, produz apenas caracteres inclinados. Elemento TT Produz estilo teletype, usando fonte de espaçamento fixo. Elemento U Produz estilo Sublinhado. Deve ser usado com cuidado, pois confunde-se com a apresentação de links. Elemento STRIKE ou S Produz texto riscado. Elemento BIG Estabelece uma fonte com tamanho pouco maior do que o texto normal. Elemento SMALL Estabelece uma fonte com tamanho pouco menor do que o texto normal. Elemento SUB Produz texto com estilo subscrito. Elemento SUP Produz texto com estilo expoente.

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 3

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 4

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 5 CORES, TAMANHOS E FONTES Cores As cores são introduzidas através do elemento, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos): Texto Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de. Tamanho A formatação de tamanho de texto é semelhante à formatação de cores, porém utilizando a cláusula COLOR. Esta cláusula permite a alteração do tamanho das letras em trechos específicos de texto. O tamanho padrão dos textos é 3. Podemos indicar tamanhos fixos ou relativos ao tamanho padrão, utilizando os símbolos “+” para letras maiores e “-“ para letras menores, como exemplificado abaixo: texto com tamanho especificado Texto com tamanho maior do que o padrão Texto com tamanho menor do que o padrão

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 6 Fontes O HTML permite a escolha da fonte para compor os textos, através do atributo FACE, que obedece o formato abaixo: Texto Exemplos: Fonte Times azul Fonte Arial verde Fonte Courier vermelha Blink O elemento texto permite obter o efeito de texto piscante na homepage. Exemplo: texto piscante Marquee O efeito de animação de texto é obtido através do elemento, cujo formato é: Texto

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 7 Os atributos de largura e direção do efeito permitem diversas apresentações diferentes. Alguns efeitos não são interpretados por alguns navegadores. Exemplos: Texto com Efeito SCROLL e Largura 30% Texto com Efeito SLIDE e Direção RIGHT Texto com Efeito SLIDE e Direção LEFT Texto com Efeito SCROLL e Largura 80%

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 8 Vamos verificar o efeito da alteração de cores, tamanhos e estilo de letras, através dos exemplos apresentados anteriormente. Grave com o nome exerc13.htm Cores, tamanhos e fontes Texto normal para efeitos de comparação posteriores. Mudando cores Texto na cor 1 Texto na cor 2 Texto na cor 3 Texto na cor 4 Texto na cor 5 Mudando tamanho Texto com tamanho normal (3) texto com tamanho 9 texto com tamanho relativo + 3 (igual 6) texto com tamanho relativo - 3 (igual zero) Mudando estilo da fonte

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 9 Texto com estilo padrão Fonte Verdana Fonte Arial Fonte Courier Exemplo de BLINK - depende do browser Texto piscante. Cuidado no uso! É irritante, não é? Exemplo de MARQUEE - depende do browser Texto com Efeito SCROLL e Largura 30% Texto com Efeito SLIDE e Direção RIGHT Texto com Efeito SLIDE e Direção LEFT Texto com Efeito SCROLL e Largura 80%

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 10

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 11

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 12 Links CAMINHOS RELATIVOS E ABSOLUTOS Uma das grandes vantagens do HTML é justamente o hipertexto. É possível fazer ligações de uma região de texto (ou imagem) a um outro documento. Para inserir um link em um documento, utilizamos o elemento, com o seguinte formato: texto ou imagem onde: arq_dest - é o endereço do documento de destino; texto ou imagem - é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Os caminhos para o arquivo destino podem ser relativos ou absolutos. É muito importante prestar atenção na composição desses caminhos, pois deles dependem o funcionamento do site. O caminho relativo pode ser usado sempre que queremos fazer referência a um documento que esteja no mesmo servidor do documento atual. Deve-se prestar atenção no diretório no qual se encontra o documento destino e no seu nome correto (cuidado com o uso de letras minúsculas e maiúsculas)

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 13 Exemplos: Carrega o documento exerc1.htm, que está no mesmo diretório do documento atual.. Carrega o documento hp1.htm, que está no diretório teste, localizado sob o diretório atual.. Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor. Fapesp – Fundação de Amparo à Pesquisa do Estado de São Paulo Conselho Nacional de Pesquisa

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 14 LIGAÇÕES PARA TRECHOS DE DOCUMENTOS Além do atributo href, que indica um documento destino de uma ligação hipertexto, o elemento possui um atributo NAME que permite indicar um trecho de documento como ponto de destino de uma ligação hipertexto. Ponto de destino que faz com que a âncora Ponto de destino seja o destino de um link. Assim, quando escrevemos: Teste de links dentro do texto: ponto de destino estaremos referenciando o ponto de destino criado dentro do próprio texto. Da mesma forma, é possível construir links para determinados trechos de outros documentos, desde que as marcações feitas com o atributo NAME sejam conhecidas.

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 15 Neste exercício vamos testar os diversos tipos de links comentados. Para isso duas homepages serão criadas. Grave os comandos abaixo como exerc14.htm. Depois siga as instruções para criar a outra home-page. Uso de Links Uso de Links Caminhos relativos Carrega o documento exerc4.htm, que está no mesmo diretório do documento atual. Carrega o documento hp1.htm, que está no diretório teste, localizado sob o diretório atual. Caminhos absolutos Fundação de Amparo à Pesquisa do Estado de São Paulo - FAPESP Conselho Nacional de Desenvolvimento Científico e Tecnológico - CNPq Links dentro do texto Caminhos relativos Caminhos absolutos Links no próprio texto

Programação p/ INTERNET - HTML Prof. João Ricardo Andrêo 2/6/ :54 16 Agora complete o exercício para testar os caminhos relativos sem problemas: 1. Crie uma pasta com o nome “teste” sob a pasta atual 2. Grave os comandos abaixo com o nome hp1.htm dentro da pasta “teste”. Uso de Links Home-page chamada pela home-page exerc14.htm Deu certo! Vamos voltar à home-page <A HREF="../exerc14.htm">anterior.