HTML. Sessão 2 HTML. A mais utilizada é a definição de um título. A tag <title> permite especificar o título do documento.

(1)

Sessão 2

HTML

•O conteúdo do cabeçalho do documento

<

head>

não irá, portanto,

aparecer no documento, mas irá incluir outras tags que definam

propriedades da página.

•A mais utilizada é a definição de um título. A tag

<title>

permite

especificar o título do documento.

O texto afectado pela tag

<title>

será considerado pelo browser

Cabeçalho e Título <title>

Criação de Páginas WEB

HTML

(2)

Estas tags especiais servem para especificar detalhes das

páginas HTML, tais como o seu autor, descrição ou

palavras-chave, e são utilizadas por alguns motores de

busca para indexar e catalogar os seus conteúdos.

<meta name=“nome” value=“valor”> </meta>

OU

<meta name=“nome” value=“valor” />

Cabecalho e Meta-tags <meta>

As principais meta-tags são as seguintes:

<meta name=“author” value=“…nome do autor …” />

<meta name=“description” value=“… descrição da página

…” />

<meta name=“keywords” value=“… palavras-chave da

página …” />

<meta name=“date” value=“… data da última alteração da

página …” />

<meta name=“contact” value=“… contacto do autor …” />

Cabecalho e Meta-tags <meta>

Criação de Páginas WEB

HTML

(3)

Na linguagem HTML, podemos alterar a formatação de um pedaço de

texto a meio do documento, mas também é possível aplicar

definições globais que serão respeitadas por toda a página. A

maneira mais fácil de o fazer consiste em utilizar os atributos da tag

<body>

, dos quais se destacam os seguintes:

Atributo

Descrição

text

Cor do texto

bgcolor

Cor do fundo

background

Imagem de fundo

link, alink, vlink Cor, respectivamente, das hiperligações

não visitadas seleccionadas e já visitadas

Definições globais da página WEB

Criação de Páginas WEB

</head> <body >

1) Abrir o ficheiro modelo2.txt com o bloco de

notas e digitar o seguinte código HTML:

HTML

(4)

Definições globais da página WEB

</head>

<body bgcolor="green" text="white"> Texto normal branco </body>

</html>

2) Guardar o ficheiro com o nome TextoColorido.html e observar o resultado no IE

1) Abrir o ficheiro modelo.txt com o bloco de

notas e digitar o seguinte código HTML:

• <p>texto</p> : define um parágrafo

• <br> : insere uma quebra de linha

•  : define um comentário

• <hr> : desenha uma linha horizontal

• <b>texto</b> : texto em negrito

• <i>texto</i> : texto em itálico

• <tt>texto</tt> : Apresenta texto parecido com o de uma máquina de

escrever antiga ("teletype text")

• <div>texto</div> : define alinhamento do texto

• <span>texto</span> : Agrupa elementos mantendo a continuidade das

linhas

Tags Mais utilizadas (Formatação de texto)

Criação de Páginas WEB

(5)

Tags Mais utilizadas – Exemplo01

<title>Exemplo Um</title>  </head>

<body>

<p>Parágrafo 1 – aqui podemos constatar que a * mudança de linha (indicadas pelo *) não produz * efeito na página </p>

<p>Parágrafo 2 – Deixar múltiplos espaços também não tem efeito na página. Para mudar de linha utiliza-se a tag br <br></p> <br>

<b>Este texto irá ficar em negrito</b><br> <hr>

<i>Última actualização: <b>8 de Janeiro de 2006</b></i> </body>

</html>

1) Abrir o ficheiro modelo.txt com o bloco

de notas e digitar o seguinte código HTML:

2) Guardar o ficheiro com o nome exemp01.html e observar o resultado no IE

Tags Mais utilizadas – Exemplo01

Criação de Páginas WEB

(6)

Tag de alinhamento do texto:

<div> texto </div>

O atributo de alinhamento é:

align

As opções de alinhamento são:

–

center - texto centralizado

–

right - texto à direita

–

left - texto à esquerda

Tags Mais utilizadas - <div> (Alinhamento de texto)

Tags Mais utilizadas – Exemplo01a

<html> <head> <title>Exemplo UmA</title>  </head> <body>

<div align="center">Meu curso de HTML ao Centro</div> <div align="left">Meu curso de HTML à Esquerda</div> <div align="right">Meu curso de HTML à Direita</div> </body>

</html>

1) Abrir o ficheiro modelo.txt com o bloco

de notas e digitar o seguinte código HTML:

2) Guardar o ficheiro com o nome exemp01a.html e observar o resultado no IE

Criação de Páginas WEB

(7)

Tags Mais utilizadas – Exemplo01a

• <strong>texto</strong> : Semelhante ao estilo negrito

• <em>texto</em> : Semelhante ao estilo itálico

• <big> texto </big> :Aumenta a fonte e atribui negrito

• <small>texto</small> : Reduz e altera a fonte.

• <sup>texto</sup> :Eleva o texto e o seu corpo

• <sub>texto</sub> : Rebaixa o texto e diminui o seu corpo

Outras Tags utilizadas (Formatação de texto)

Criação de Páginas WEB

HTML

(8)

outras Tags utilizadas – Exemplo01O

<title>Exemplo Um</title>  </head>

<body>

<tt>"Teletype text"</tt><br><br> <i>Texto itálico</i><br><br>

<em>Semelhante ao Texto itálico</em><br><br>

<strong>Semelhante ao Texto em negrito</strong><br><br> <b>Texto em negrito</b><br><br>

<big>Texto maior</big><br><br> <small>Texto menor</small><br><br>

Este texto contém uma parte alinhada um pouco <sub>abaixo</sub><br><br> Este texto contém uma parte alinhada um pouco <sup>acima</sup><br><br> </body>

</html>

1) Abrir o ficheiro modelo.txt com o bloco

de notas e digitar o seguinte código HTML:

2) Guardar o ficheiro com o nome exemp01o.html e observar o resultado no IE

Outras Tags utilizadas – Exemplo01o

Criação de Páginas WEB

(9)

Uma das desvantagens do HTML (estático) é que não é possível esconder o

código que digitamos dos olhares alheios…embora possamos dificultar a sua

leitura. Por outro lado esta aparente fraqueza dá-nos a possibilidade de

aprendermos com o código dos outro.

Como observar o código HTML de

uma página da Web?

Como dificultar a observação do código HTML de

uma página da Web?

Menu Ver

Fonte (IE)

HTML crunching

Aprendendo com os outros

<html><head><title>Exemplo Um</title></head><body><p>Parágrafo 1 – aqui podemos constatar que a * mudança de linha (indicadas pelo *) não produz * efeito na renderização da página </p><p>Parágrafo 2 – Deixar múltiplos espaços também não tem efeito na renderização. Para mudar de linha utiliza-se a tag br <br><br> <b>Este texto irá ficar em negrito</b><br><hr><i>Última actualização: <b>8 de Janeiro de

2005</b></i></body></html>

HTML crunching : consiste em compactar o código

produzido de modo a dificultar a sua leitura

HTML Crunching

Criação de Páginas WEB

HTML

(10)

• <h1>texto</h1> : cabeçalho n1, o maior. • <h2>texto</h2> : cabeçalho n2

• <h3>texto</h3> : cabeçalho n3 • <p>texto</p> : texto normal

• <h4>texto</h4> : cabeçalho n4, menor que o texto normal • <h5>texto</h5> : cabeçalho n5

• <h6>texto</h6> : cabeçalho n6, o menor

• <hr> : mudança de linha com um traço horizontal a toda a largura da página.

Método 1: velhinho e ainda válido

Como mudar o tamanho do texto (M1)

<title>Exemplo Dois</title>  </head> <body> <h1>Cabeçalho n1</h1> <hr> <p>Vários cabeçalhos…</p> <h2>Cabeçalho n2</h2> <h3>Cabeçalho n3</h3>

<p>Texto normal dentro de um parágrafo</p> <h4>Cabeçalho n4: é o texto normal em negrito</h4> <h5>Cabeçalho n5</h5>

<h6>Cabeçalho n6</h6> </body>

</html>

2) Guardar o ficheiro com o nome exemp02.html e observar o resultado no IE

O aspecto final

depende das

definições do

browser!!!!

Como mudar o tamanho do texto (M1)

Criação de Páginas WEB

1) Abrir o ficheiro modelo.txt com o bloco

de notas e digitar o seguinte código HTML:

(11)

Como mudar o tamanho do texto (M1)

Método 2: maior controlo sobre tipo letra e cor

(embora HTML 4.01 stric o desaconselha CSS (Cascading

Style Sheets)

<font color=“nome da cor ou #rrggbb”

face = “lista de tipos de letra”

size = “1 a 7 ou +1 a +6 ou -1 a -6”> texto

Como mudar o tamanho do texto (M2)

Criação de Páginas WEB

HTML

(12)

<font color=“nome ou #rrggbb” face = “lista de tipos de letra”

size = “1 a 7 ou +1 a + 6 ou -1 a -6”>texto </font>

O atributo size

Permite escolher o tamanho de letra de dois modos: absoluto ou relativo.

• Modo absoluto: 3 utiliza o tamanho padrão, 1 menor e 7 maior.

• Modo Relativo: + ou – em relação ao tamanho actual até a um tamanho

relativo máximo de +6 ou até um tamanho relativo mínimo de -6

Como mudar o tamanho do texto (M2)

– Os principais atributos da tag <font>

<title>Exemplo Três</title>  </head>

<body>

Texto no seu tamanho normal

<font size=“3”>Texto size 3</font><br> <font size=“+1”>Texto size + 1</font>

agora o texto novamente no seu tamanho normal<br> <font size=“+6”>Texto size + 6</font><br> <font size=“7”>Texto size 7</font><br> <font size=“-6”>Texto size -6</font><br> <font size=“1”>Texto size 1</font><br> </body>

</html>

2) Guardar o ficheiro com o nome exemp03.html e observar o resultado no IE

O aspecto final

depende das definições

do browser!!!!

Como mudar o tamanho do texto (M2)

Criação de Páginas WEB

1) Abrir o ficheiro modelo.txt com o bloco

de notas e digitar o seguinte código HTML:

(13)

Como mudar o tamanho do texto (M2)

O atributo face

• Permite seleccionar o tipo de letra.

size = “1 a 7 ou +1 a + 6 ou -1 a -6”>texto </font>

Como mudar o tamanho do texto (M2)

– Os principais atributos da tag <font>

Criação de Páginas WEB

(14)

<title>Exemplo Quatro</title>  </head>

<body>

<p align=“center”><font size=7 face=“verdana, arial, sans-serif”>Grande Promoção</font></p>

<p><font size=3 face=“serif, sans-serif”><b>O supermercado <i>PreçoCerto</i> tem a honra de convidar V. Exa. <br>

para a inauguração da nossa loja na vila de Arouca <br> <br>Contamos consigo!</b></font>

</p> <hr>

<h3 align=“right”><i>Ultima actualização em 05.11.2006</i></h3> </body>

</html>

2)Guardar o ficheiro com o nome exemp04.html e observar o resultado no IE

O aspecto final

depende das

definições do

browser!!!!

Como mudar o tamanho do texto (M2)

1) Abrir o ficheiro modelo.txt com o bloco

de notas e digitar o seguinte código HTML:

Como mudar o tamanho do texto (M2)

Criação de Páginas WEB

(15)

size = “1 a 7 ou +1 a + 6 ou -1 a -6”>texto</font>

O atributo color

• Permite seleccionar a cor da letra.

• A cor pode ser especificada com um nome (p. ex.: “red”, “green”, …) ou

através de um código númerico hexadecimal chamado código RGB (iniciais

de Red, Green, Blue). Representamos cada cor por 6 dígitos ( 2 para cada

cor) que variam entre 0 e F. Exemplo de um código RGB=“#FAD9A1”

• O monitor possui 3 canhões que emitem electrões, cada um associado a uma

cor diferente. A cor resultante obtém-se com o controlo da intensidade de

cada um desses feixes, atribuindo-se a cada código um valor númerico.

Como mudar o tamanho do texto (M2)

– Os principais atributos da tag <font>

size = “1 a 7 ou +1 a + 6 ou -1 a -6”>texto</font>

O atributo color (continuação). Exemplo:

<font size=“5” color=“red”>Texto em vermelho</font>

<font color=“#FF0000” size=“5”>Texto em vermelho</font>

Como mudar o tamanho do texto (M2)

– Os principais atributos da tag <font>

Criação de Páginas WEB

(16)

<title>Exemplo Cinco</title>  </head>

<body>

Texto no seu tamanho normal <font size=“3”>Texto size 3</font><br>

<font size=“+1”>Texto size + 1</font> agora o texto novamente no seu tamanho normal<br> <font size=“+6” color=“black”>Texto size + 6</font><br>

<font size=“7” face=“happy face, serif” color=“#FFFFFF”>Texto size 7</font><br> <font size=“-6” color="#FF0000">Texto size -6</font><br>