Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)

Tamanho: px

Começar a partir da página:

Download "Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)"

Lara Aires Galvão
6 Há anos
Visualizações:

1 Módulo 17E Revisões de HTML A) Noções básicas de HTML (cont.)

2 Inserção de Imagens A inserção de imagens em documentos HTML é feita através da tag <IMG> (que não tem tag de fecho). A indicação do local e nome do ficheiro da imagem é feita no atributo SRC (de source que em inglês significa fonte). Exemplo: <IMG Src= Globo.gif > Isto quer dizer que o browser deve ir buscar uma imagem a um ficheiro que se chama Globo.gif. Este ficheiro é suposto encontrar-se na mesma directoria ou pasta em que se encontra o ficheiro HTML em que estamos a trabalhar.

3 Inserção de Imagens No caso de a imagem que pretendemos inserir na página se encontrar numa pasta diferente da corrente, teremos de indicar a sua localização. Ex.: <IMG Src= Imagens/Globo.gif > Neste caso, indica-se que o ficheiro da imagem Globo.gif se encontra na directoria Imagens (subdirectoria da directoria corrente). É boa prática colocar as imagens na directoria corrente ou em subdirectorias suas, com vista a evitar falhas na localização dos ficheiros, sobretudo quando os copiamos para outro local (por exemplo, para um servidor web).

4 Inserção de Imagens Para além do atributo Src (que indica a localização da imagem) a tag <IMG> permite indicar outros atributos relativos a uma imagem. O atributo Align permite definir a forma de alinhamento da imagem. Os seus valores possíveis são algo diferentes dos valores para o mesmo atributo Align quando aplicado a texto. Neste caso, os valores são: Left, Right, Middle, Bottom e Top. Se este atributo não for indicado, o alinhamento é feito pela base da linha de texto antes da indicação da tag <IMG> - o equivale ao valor Bottom.

5 Inserção de Imagens O atributo Border permite definir uma linha rectangular de contorno para a imagem. Deve ser indicado um valor numérico para a espessura da linha. Ex.: <IMG Src= Pirata.gif Border=2> O atributo Height permite definir a altura da imagem. O atributo Width permite definir a largura da imagem. Ex.: <IMG Src= Globo.gif Height=50 Width=150>

6 Exemplo 1

7 Composição de Tabelas A composição de uma tabela em HTML faz-se basicamente, com os seguintes tipos de tags: - <TABLE> </TABLE> - que define o início e o fim da tabela; - <TR> - que deriva de Table Row, ou seja, define uma linha dentro da tabela; - <TH> - que deriva de Table Head e define cada célula do cabeçalho da tabela; - <TD> - que deriva de Table Data e define o conteúdo de cada célula da tabela. Nota: apenas a tag <TABLE> necessita de ser fechada com </TABLE>; as outras tags que definem as linhas e células da tabela não exigem tags de fecho, embora se possam utilizar.

8 Composição de Tabelas Cada uma das tags que definem a estrutura de uma tabela pode ter os seus atributos próprios. Por exemplo, a tabela na sua totalidade pode ser alinhada com o atributo Align que pode assumir os valores: Left, Center e Right. Normalmente, as tabelas ficam com melhor apresentação com linhas de contorno. Na tag <TABLE> o atributo Border permite definir a espessura da linha; por exemplo Border =1.

9 Composição de Tabelas A tabela é construída linha a linha. Cada nova linha é definida com uma tag <TR>. Em cada linha (após cada tag <TR>) inserem-se as tags que definem células da tabela (<TD> ou <TH>). O mais usual é utilizar-se a tag <TD> para definir cada célula a inserir na linha. A tag <TH> costuma ser usada nas primeiras linhas da tabela; apenas difere da tag <TD> no seguinte: o conteúdo de uma célula definida com <TH> é destacado a negro.

10 Composição de Tabelas Com as tags <TH> e <TD> podemos usar o atributo Width para definir a largura das células. Ex.: <TD Width=90> Uma célula </TD> Define uma célula com uma largura de 90 píxeis.

11 Composição de Tabelas O atributo Colspan permite indicar o nº de colunas que uma célula ocupa. Ex.: <TD Colspan=2> ou <TH Colspan=2> Faz com que o conteúdo da célula ocupe duas colunas.

12 Composição de Tabelas Também é possível inserir imagens dentro de uma célula basta indicar como conteúdo da célula uma imagem com <IMG>. Ex.: <TD> <IMG Src= Pirata.gif >

13 Exemplo 2

14 Ligações e Hiperligações As ligações a outras páginas web ou a outros documentos ou secções de um documento os links ou hyperlinks é aquilo que mais caracteriza as páginas web como hipertexto. Existem três tipos de links ou ligações possíveis: 1. Ligações externas, ou seja, para outras páginas com endereços URL diferentes do local; 2. Ligações internas para outros documentos HTML no mesmo computador; 3. Ligações internas para outras secções dentro do mesmo documento.

15 Ligações e Hiperligações Em qualquer dos casos a forma de fazer estas ligações é semelhante; o esquema básico é: <A HREF= > </A> Na verdade, qualquer tipo de ligação (link) é feita sempre com base na tag <A> </A> - também chamada Anchor tag (etiqueta de âncora; âncora com base na qual se faz a ligação).

16 Ligações e Hiperligações O principal atributo da tag <A> é o atributo HREF (de Hypertext Reference). É este atributo que define o local (endereço URL, local do novo documento ou secção do documento corrente) para onde se pretende efectuar a ligação. Exemplos: 1. Ligação externa (um URL externo) <A HREF= O atributo HREF é igualado ao endereço URL que temos em vista para a ligação externa. Entre as tags <A> e </A> colocamos o texto que queremos que apareça na página. Na página, esse texto aparecerá, em princípio, a azul e sublinhado o que é, por norma, sinal de ligação ou link. Claro que o texto deve ser sugestivo em relação à ligação que está subjacente.

17 Ligações e Hiperligações 2. Ligação interna para outro documento HTML no mesmo computador <A HREF= doc2.htm >Mais informações</a> Neste caso, o atributo HREF é igualado ao nome do documento HTML para onde queremos remeter o leitor quando ele clica sobre o texto que é apresentado na página. É claro que se o documento se encontrar numa outra pasta ou directoria é necessário ter isso em conta. Podemos definir links a partir de imagens. Por exemplo: <A HREF= WebPy.htm ><IMG Src= Pirata.gif ></A>

18 Exemplo 3

19 Ligações e Hiperligações 3. Ligação interna para secções dentro do mesmo documento Para exemplificar as referências internas dentro de um documento, vamos supor que pretendemos escrever um documento em HTML sobre HTML. Como se pretende uma coisa simples, consideram-se apenas as seguintes secções: 1. formatação de texto 2. inserção de imagens 3. composição de tabelas

20 Ligações e Hiperligações Surgem 2 possibilidades: a) Criar uma página para cada secção e, na primeira dessas páginas colocam-se links para cada uma das páginas; b) Criar um só documento extenso e, logo no início desse documento, coloca-se um índice ou lista, em que cada item remete para a respectiva secção noutro ponto do documento.

21 Ligações e Hiperligações Tendo por base a segunda hipótese Há que sublinhar a importância das referências internas. Porém, antes de fazer essas referências internas, é necessário criar âncoras nas diferentes secções do documento. Por exemplo, para criar uma ligação a partir do item 1. Formatação de Texto, é necessário ir à secção do documento onde se começa a falar sobre esse assunto e colocar lá uma âncora: <A NAME= Texto >Formatação de Texto</A>

22 Ligações e Hiperligações E o mesmo para cada uma das outras secções. Depois disto, já se podem criar ligações internas a partir dos itens do índice. Por exemplo, para ligar o primeiro título à sua secção, escreve-se: <A HREF= #Texto >Formatação de Texto</A> Repare-se que: - para a colocação das âncoras utilizou-se <A NAME= > </A> - e para fazer referências utilizou-se <A HREF= > </A>.

23 Ligações e Hiperligações Depois disto, ao clicar sobre o primeiro item do índice (1. Formatação de Texto), o browser irá passar para a secção do documento onde foi colocada a âncora <A NAME= Texto >. No final de cada secção pode ser útil colocar uma referência para voltar ao topo do documento, onde está o índice e onde se deve colocar também uma âncora para o efeito.

24 Exemplo 4

25 Exemplo 4

Documentos relacionados

Síntese da aula anterior

Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações Foi também disponibilizado um formulário de ajuda em html com as tags principais Sítio da aula anterior: http://www.marcosoares.com/aia/11/aula_2010_04_16/