1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

Tamanho: px

Começar a partir da página:

Download "1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão"

Sílvia Câmara Domingos
8 Há anos
Visualizações:

1 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena dimensão 1

linguagem de programação Portável Não depende da

2 1. HTML - Introdução Um ficheiro html é um ficheiro de texto com uma determinada estrutura Pode ser criado usando um editor de texto simples (Notepad, etc) Pode ser usada a extensão htm ou html (preferível) Consiste num conjunto de tags, que são comandos de formatação, que indicam de que forma a informação é representada 2

ser usada a extensão htm ou html (preferível) Consiste num conjunto de tags, que

3 1. HTML - Tags Uma tag é delimitado por < e > (ie. <html>) Quase todas as tags têm de ser fechadas (ie. depois de fazer <html> é necessário fazer </html> À tag podem estar associados atributos: <tag atributo1= valor atributo2= valor >... </tag> O encadeamento de tags deve ser feito da forma: <tag1> <tag2>... </tag2> </tag1> 3

depois de fazer <html> é necessário fazer </html> À tag podem estar associados

4 1.1 HTML Formato geral O formato de um documento html é: <html> <head>... </head> <body>... </body> </html> html identifica o tipo de documento Este organiza-se em duas secções: head: onde está o título, autor e informação sobre o tipo de conteúdo Pode ser usada a tag title body: onde está a informação propriamente dita 4

5 1.1 HTML Formato geral Crie um ficheiro de texto usando o Notepad, escreva: <html> <head> </head> <body> <p align=center> Olá! /p> </body> </html> No final grave o ficheiro com o nome texto.html Abra o Word, e coloque uma linha de texto contendo Olá!, alinhada ao centro do documento. No final grave o documento em formato html, com o nome word.html. 5

/p> </body> </html> No final grave o ficheiro com o nome texto.

6 1.2 HTML - Sintaxe Atributos para o body : bgcolor : cor de fundo text: cor do texto link: cor dos links vlink: cor dos links já visitados alink: cor do link ao ser clicado As cores podem ser indicadas pelo seu nome (black, green, gold, etc) ou por um valor numérico #rrggbb (com os valores das componentes RGB em hexadecimal) Exemplo: <body bgcolor= yellow text=#33ff33>... </body> 6

ser indicadas pelo seu nome (black, green, gold, etc) ou por um valor numérico #rrggbb (com os

7 1.2 HTML - Sintaxe Atributos para formatação de parágrafos: p: delimita um parágrafo hx : cabeçalho x, podendo x ser de 1 (maior) a 6 (menor) b: texto em negrito i: texto em itálico align: alinhamento do parágrafo (left, right ou center) Exemplo: <p align= center > <b> ESTA </b> <br> IPT </p> 7

texto em negrito i: texto em itálico align: alinhamento do parágrafo

8 1.2 HTML - Sintaxe Atributos para formatação de texto: font face: fonte a usar ( arial, verdana, etc) font size: dimensão relativa do texto (de 1 para dimensão normal a 7) font color: cor do texto Exemplo: <p> <font size= 2 face= arial > ESTA IPT </font> </p> Exemplo: <p> <font size= 2 face= arial > ESTA </font> <font face= verdana > IPT </font> </p> 8

color: cor do texto Exemplo: <p> <font size= 2 face= arial > ESTA IPT </font> </p>

9 1.2 HTML - Sintaxe Âncoras (anchor) são elementos que permitem a navegação e delimitação de localizações num documento. São identificadas pelo tag a. Âncoras internas permitem saltar para pontos específicos de um documento <a href= #paragrafo2 > Saltar para o texto 2</a> <p>texto 1</p> <br> <br> <br> <a name= paragrafo2 > <p>texto 2</p></a> 9

Âncoras internas permitem saltar para pontos específicos de um documento <a href=

10 1.2 HTML - Sintaxe Âncoras externas permitem saltar para outras páginas <a href= >Página da ESTA</a> Existe um atributo de particular interesse, target, que define em que janela se aplica a referência. Valores possíveis são: _blank : abre o link numa nova janela; _self : abre o link na própria janela; _parent : abre o link na página onde se define o frameset (ver 1.5 Frames) _top : abre o link na própria janela, que é ocupada na totalidade (ver 1.5 Frames) 10

11 1.3 HTML Elementos Multimédia Elementos gráficos: <img src= name > : insere a imagem name Outros atributos usáveis são align (alinhamento) e border (dimensão do contorno da imagem) <hr>: linha horizontal Atributos: size (dimensão) e width (dimensão em percentagem da largura da janela) É possível inserir elementos multimédia criados em aplicações externas, usando para tal a tag object. 11

horizontal Atributos: size (dimensão) e width (dimensão em percentagem da largura da janela) É

12 1.4 HTML - Tabelas O HTML define dois tipos de lista: ordenada e (tag ol) e desordenadas (tag ul). Nas listas ordenadas a sequência pode ser 1,2,... (type 1); A,B,... (type A); a,b,... (type a); I,II,... (type I); i,ii,... (type i); Nas listas desordenadas o tipo pode ser disc, circle ou square Em ambos os casos podem-se criar listas dentro de listas. 12

.. (type A); a,b,... (type a); I,II,... (type I); i,ii,.

13 1.4 HTML - Tabelas A utilização de tabelas permite versatilizar muito a forma como a informação é representada. A correcta formatação das tabelas pode no entanto ser problemática. A tag table permite definir os atributos globais da tabela: altura (height), largura (width), cor de fundo (bgcolor), imagem de fundo (background), espessura de linha (border), espaçamento entre células (cellspacing) e espaçamento entre os limites da célula e o seu conteúdo (cellpadding). A altura e largura podem ser definidas em valor absoluto (ie width=200) ou relativo à dimensão da janela (width=50%). 13

A tag table permite definir os atributos globais da tabela: altura (height), largura (width), cor de fundo (bgcolor), imagem de fundo (background),

14 1.4 HTML - Tabelas O número de elementos que compoêm a janela é definido por tags específicas. Para criar uma linha usa-se tr (Table Row) e para depois usa-se a tag td (Table Data) para criar células dentro da linha. Visualize o resultado de <table width=400 border=1> <tr> <td width=75%> 1,1 </td> <td width=25%> 1,2 </td> </tr> </table> 14

Para criar uma linha usa-se tr (Table Row) e para depois usa-se a tag td (Table Data)

15 1.4 HTML - Tabelas Como fazer para ter número de células diferentes em linhas (ou colunas)? A tag colspan agrupa várias células numa linha; A tag rowspan agrupa várias células numa coluna; <table width=400 border=1> <tr> <td width=50% rowspan=2> texto </td> <td width=25%> texto </td> <td width=25%> texto </td> </tr> <tr> <td> texto </td> <td> texto </td> </tr> <tr> <td> texto </td> <td colspan=2> texto </td> </tr> </table> 15

width=400 border=1> <tr> <td width=50% rowspan=2> texto </td> <td width=25%> texto </td> <td width=25%>

16 1.4 HTML - Tabelas O conteúdo das células, toda a linha ou mesmo toda a tabela, pode ser alinhado. O alinhamento horizontal é feito pelo atributo ALIGN (left/center/right/justify) e o vertical por VALIGN (top/middle/bottom) 16

O alinhamento horizontal é feito pelo atributo ALIGN

17 1.5 HTML Frames e IFrames As frames permitem criar àreas específicas numa página, e que são trabalhadas de forma independente. Se devidamente criadas, podem facilitar bastante a criação e navegação num site. 17

18 1.5 HTML Frames e IFrames Criar uma estrutura como a da figura, implica definir 4 ficheiros html diferentes, um para cada um dos campos e um último que gere o conjunto (e será este o ficheiro a ser aberto para visualização). No caso anterior, criamos uma estrutura no ficheiro principal (ver página seguinte). Existirão ainda 3 ficheiros com o conteúdo de cada uma das zonas. Como nem todos os browsers suportam frames, é também conveniente prever essa situação. 18

No caso anterior, criamos uma estrutura no ficheiro principal (ver página seguinte).

19 1.5 HTML Frames e IFrames <html> <head> <title>conjunto de Frames</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <frameset rows="80,*" cols="*" border="0" framespacing="0"> <frame src="topo.htm" name="topframe" scrolling="no" noresize > <frameset rows="*" cols="154,*" framespacing="0" border="0"> <frame src="navega.htm" name="leftframe" scrolling="no" noresize> <frame src="central.htm " name="mainframe"> </frameset> </frameset> <noframes> <body> O seu browser não consegue abrir frames. </body> </noframes> </html> 19

htm" name="topframe" scrolling="no" noresize > <frameset rows="*" cols="154,*" framespacing="0" border="0"> <frame src="navega.

20 1.5 HTML Frames e IFrames Um problema que pode surgir nesta estrutura é como relacionar as acções feitas entre as várias janelas. No exemplo, é usada uma frame de navegação e uma outra sobre a qual essa visualização será feita. Assim, os links indicados na janela de navegação deverão ser abertos na janela de visualização. Para tal os links criados na janela de navegação devem ser criados da seguinte forma (recorde que cada frame é criada com um nome e a frame de visualização é denominada mainframe): <a href=" target= mainframe">visit W3Schools!</a> 20

Assim, os links indicados na janela de navegação deverão ser abertos na janela de visualização.

21 1.5 HTML Frames e IFrames As IFrames podem ser utilizadas dentro de um documento HTML, e permitem inserir um outro documento dentro deste. É possível definir as dimensões dessa àrea. <p><iframe src= documento.htm width= 500 heigth= 250 ></iframe></p> 21

Documentos relacionados

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1