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.

Transcrição

1 Sessão 2 Cabeçalho e Título <title> O conteúdo do cabeçalho do documento 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 como o título do documento. A maioria dos browsers colocam-no na barra de título. <title>texto</title> : define o título do documento Formador: Cosmin Constantinescu 1

2 Cabecalho e Meta-tags <meta> Estas tags especiais servem para especificar detalhes das páginas, 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 /> Formador: Cosmin Constantinescu 2

3 Definições globais da página WEB Na linguagem, 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 <body >  <meta name="author" value= Cosmin Constantinescu" /> <meta name="date" value="novembro de 2006" /> <meta name="contact" value= cosmin@gmail.com" /> <title>página Colorida</title> Texto normal branco 1) Abrir o ficheiro modelo2.txt com o bloco de notas e digitar o seguinte código : 2) Guardar o ficheiro com o nome modelo.html e observar o resultado no IE Formador: Cosmin Constantinescu 3

4 Definições globais da página WEB  <meta name="author" value= Cosmin Constantinescu" /> <meta name="date" value="novembro de 2006" /> <meta name="contact" value= /> <title>página Colorida</title> <body bgcolor="green" text="white"> Texto normal branco 1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código : 2) Guardar o ficheiro com o nome TextoColorido.html e observar o resultado no IE Tags Mais utilizadas (Formatação de texto) <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 Formador: Cosmin Constantinescu 4

5 Tags Mais utilizadas Exemplo01 <body> <title>exemplo Um</title>  1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código : <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> 2) Guardar o ficheiro com o nome exemp01.html e observar o resultado no IE Tags Mais utilizadas Exemplo01 Formador: Cosmin Constantinescu 5

6 Tags Mais utilizadas - <div> (Alinhamento de texto) 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 Exemplo01a <body> <title>exemplo UmA</title>  <div align="center">meu curso de ao Centro</div> <div align="left">meu curso de à Esquerda</div> <div align="right">meu curso de à Direita</div> 1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código : 2) Guardar o ficheiro com o nome exemp01a.html e observar o resultado no IE Formador: Cosmin Constantinescu 6

7 Tags Mais utilizadas Exemplo01a Outras Tags utilizadas (Formatação de texto) <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 Formador: Cosmin Constantinescu 7

8 outras Tags utilizadas Exemplo01O <body> <title>exemplo Um</title>  1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código : <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> 2) Guardar o ficheiro com o nome exemp01o.html e observar o resultado no IE Outras Tags utilizadas Exemplo01o Formador: Cosmin Constantinescu 8

9 Aprendendo com os outros Uma das desvantagens do (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 de uma página da Web? Menu Ver Fonte (IE) Como dificultar a observação do código de uma página da Web? crunching Crunching crunching : consiste em compactar o código produzido de modo a dificultar a sua leitura <title>exemplo Um</title><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> Formador: Cosmin Constantinescu 9

10 Como mudar o tamanho do texto (M1) Método 1: velhinho e ainda válido <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. Como mudar o tamanho do texto (M1) <body> <title>exemplo Dois</title>  <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> 1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código : O aspecto final depende das definições do browser!!!! 2) Guardar o ficheiro com o nome exemp02.html e observar o resultado no IE Formador: Cosmin Constantinescu 10

11 Como mudar o tamanho do texto (M1) Método 2: maior controlo sobre tipo letra e cor (embora 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 </font> Formador: Cosmin Constantinescu 11

12 Os principais atributos da tag <font> <font color= nome ou #rrggbb </font> face = lista de tipos de letra size = 1 a 7 ou +1 a + 6 ou -1 a -6 >texto 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 <body> <title>exemplo Três</title>  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> 1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código : O aspecto final depende das definições do browser!!!! 2) Guardar o ficheiro com o nome exemp03.html e observar o resultado no IE Formador: Cosmin Constantinescu 12

13 Os principais atributos da tag <font> <font color= nome ou #rrggbb </font> face = lista de tipos de letra size = 1 a 7 ou +1 a + 6 ou -1 a -6 >texto O atributo face Permite seleccionar o tipo de letra. Permite definir uma lista de tipos de letras a ser aplicado As listas mais comuns: Verdana, Arial, Helvetica, sans-serif ou Times New Roman, Times, serif Devemos seleccionar tipos de letras que sejam prováveis existir no computador do visitante do site senão resultados imprevisíveis Formador: Cosmin Constantinescu 13

14 <body> <title>exemplo Quatro</title>  <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> 1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código : </p> <hr> <h3 align= right ><i>ultima actualização em </i></h3> O aspecto final depende das definições do browser!!!! 2)Guardar o ficheiro com o nome exemp04.html e observar o resultado no IE Formador: Cosmin Constantinescu 14

15 Os principais atributos da tag <font> <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 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. Os principais atributos da tag <font> <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 color (continuação). Exemplo: <font size= 5 color= red >Texto em vermelho</font> <font color= #FF0000 size= 5 >Texto em vermelho</font> <font color = #CCCCCC size= 5 >Texto em cinza</font> <font color= grey size= 7 >Texto em cinza</font> Como criar cores personalizadas? Paint e Calculadora. Formador: Cosmin Constantinescu 15

16 1) Abrir o ficheiro modelo.txt com o bloco <title>exemplo Cinco</title> de notas e digitar o seguinte código :  <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> <font size= 1 color= green >Texto size 1</font><br> O aspecto final depende das definições do browser!!!! 2)Guardar o ficheiro com o nome exemp05.html e observar o resultado no IE Formador: Cosmin Constantinescu 16