O que um URL ou URI URL significa

O que é um URL ou URI • URL significa Uniform Resource Locator, ou

O que é um documento HTML • Um documento HTML é um documento de

As tags no HTML • • • O HTML é uma linguagem de formatação

As tags estruturais • Apesar de não ser obrigatório um documento HTML deve conter

Um Exemplo de HTML <html> <head> <TITLE>Um Pequeno Exemplo</TITLE> </head> <body> <H 1>HTML é

As Tags <H>: Headings • Os headings servem para estruturar o documento em títulos.

A Tag <P>: Parágrafo • As mudanças de linha no HTML são ignoradas. Uma

Formatar o estilo das letras • <B> define texto a bold, ou negrito. <B>Este

Introduzir Links • Para introduzir links utiliza-se a tag <A> • A tag <A>

Referências absolutas e relativas • Suponhamos que nos encontramos na seguinte página www. pagina.

Inserção de imagens • Para a inserção de imagens utiliza-se a tag img. •

Composição de Tags • O HTML permite que se componham tags. • Por exemplo,

Backgrounds • Pode-se definir uma cor ou uma imagem para o fundo da página.

Front. Page • O Front. Page é um programa que permite a definição do

Ambientes • O Front. Page tem três ambientes: – O normal onde se faz

Frames • Quando se inicia o desenvolvimento de uma página no Front. Page, podemos

Frames • Quando se define um conjunto de frames é necessário definir quais as

Inserção de Links endereço • Para se inserir um link deve-se ir ao meunu

Bookmarks • Para se fazer uma bookmark na página coloca-se o cursor no sitio

Escolher a frame • Podemos querer clicar num link numa frame e que a

Imagens e Backgrounds • Para se inserir uma imagem deve-se ir ao menu Insert

Tabelas • O Front. Page permite inserir tabelas, para tal deve-se aceder ao menu

Aceder a Botões • Além dos menus, várias das capacidades do Front. Page podem

Slides: 23

Download presentation

O que é um URL ou URI • URL significa Uniform Resource Locator, ou Identifier, no caso de URI. • Servem para localizar qualquer recurso na Internet. • http: //www. fct. unl. pt/inscrições. html Protocolo Máquina Recurso • O protocolo define como o recurso deve ser transferido. Existem vários protocolos como o http, o ftp, o mailto (smtp), etc. • A máquina define em que máquina se encontra o recurso. • O recurso é o que se quer obter, pode ser um ficheiro de qualquer tipo, html, uma imagem, uma música, etc.

O que é um documento HTML • Um documento HTML é um documento de texto que pode ser criado em qualquer editor de texto, por exemplo, Bloco de Notas do Windows. • Para que o browser reconheça que o ficheiro contém código HTML este deve ser guardado com a extensão. html, ou. htm, caso o sistema operativo obrigue que as extensões sejam de apenas 3 caracteres. • No entanto, existem programas onde o texto é inserido da forma como quer ser visualizado, como por exemplo no Word, e o próprio programa faz a tradução para HTML. Exemplos: Front. Page, Dreamweaver, Netscape Composer, etc.

As tags no HTML • • • O HTML é uma linguagem de formatação de texto. A formatação é realizada através de tags. Uma tag consiste em < nome_da_tag > São usadas aos pares, por exemplo, <h 1> </h 1> O texto formatado encontra-se entre as duas tags, por exemplo, olá resulta em olá. • As tags não são case sensitive. <h 1> é equivalente a <H 1> • Algumas tags têm atributos, por exemplo, <body bgcolor=“white”>.

As tags estruturais • Apesar de não ser obrigatório um documento HTML deve conter as seguintes tags: – <HTML> Indica ao browser que o documento é HTML. – <Head> Define o cabeçalho • <Title> Situada dentro do cabeçalho define o título da página. – <Body> Onde deve ser colocado o texto formatado a ser mostrado na página.

Um Exemplo de HTML <html> <head> <TITLE>Um Pequeno Exemplo</TITLE> </head> <body> <H 1>HTML é fácil de aprender</H 1> Aqui está o primeiro parágrafo. E aqui está o segundo. </body> </html>

As Tags <H>: Headings • Os headings servem para estruturar o documento em títulos. Existem 6 níveis de headings h 1, . . . , h 6. • Exemplo: <html> <head> <TITLE>Um Pequeno Exemplo</TITLE> </head> <body> <H 1>Heading 1</H 1> <H 2>Heading 2</H 2> <H 3>Heading 3</H 3> <H 4>Heading 4</H 4> <H 5>Heading 5</H 5> <H 6>Heading 6</H 6> </body> </html>

A Tag : Parágrafo • As mudanças de linha no HTML são ignoradas. Uma mudança de linha necessita da tag . • Para se definir um parágrafo é necessário utilizar a tag . • A tag tem um argumento opcional: ALIGN. Pode tomar os valores CENTER e RIGHT, por omissão é LEFT. • Por exemplo: isto é um parágrafo isto é outro parágrafo, mas centrado • Terá o seguinte resultado, com uma linha de intervalo entre os dois parágrafos. : isto é um parágrafo isto é outro parágrafo, mas centrado

Formatar o estilo das letras • define texto a bold, ou negrito. Este texto está a negrito. Este texto está a negrito. • define texto a itálico. Este texto está a itálico. Este texto está a itálico. • <TT> define texto com letras de tamanho fixo, tipo Courier. <TT>Este texto está a TT. </TT> Este texto está a TT.

Introduzir Links • Para introduzir links utiliza-se a tag <A> • A tag <A> tem um argumento: HREF que define o URL para o qual se quer fazer o link. • Exemplo: <A HREF=“http: //www. fct. unl. pt”>Faculdade de Ciências e Tecnologia</A> Faculdade de Ciências e Tecnologia

Referências absolutas e relativas • Suponhamos que nos encontramos na seguinte página www. pagina. pt/inicial. html • A referência <A HREF=“estudo. html”>estudo</A> é relativa. • E é relativa à página actual. Portanto obtemos www. pagina. pt/estudo. html • Um outro link relativo é <A HREF=“trabalhos/relatório. html”>relatório</A> • O resultado é: www. pagina. pt/trabalhos/relatório. html • A referência absoluta para o mesmo endereço seria: <A HREF=“http: //www. pagina. pt/trabalhos/relatório. html”>relatório</A> • A vantagem das referências relativas é a mobilidade do trabalho, pois todas as páginas são relativas à primeira.

Inserção de imagens • Para a inserção de imagens utiliza-se a tag img. • Esta tem como atributo obrigatório o SRC; que define a a localização da imagem a inserir e os opcionais: WIDTH e HEIGHT; que definem a largura e altura da imagem. Por omissão estes valores são os definidos pela imagem. • Exemplo: – <IMG SRC=“imagem. jpg” WIDTH=50 HEIGHT=50>

Composição de Tags • O HTML permite que se componham tags. • Por exemplo, um link que é uma imagem. <A HREF=“http: //www. fct. unl. pt”><IMG SRC=“logo. gif”></A>

Backgrounds • Pode-se definir uma cor ou uma imagem para o fundo da página. • Para definir a cor ou a imagem de fundo configura-se a tag Body. • Exemplo: formatar a cor de fundo para vermelho. <body bgcolor=“red”> • Exemplo: formatar o fundo com a imagem img. jpg <body background=“img. jpg”> • Existem várias cores pré-definidas: white, black, blue, etc. Quem quiser cores diferentes pode utilizar a palete RGB, por exemplo, bgcolor=“#FF 02 DF”. Os dois primeiros digitos definem a quantidade de vermelho em hexadécimal (00 a FF), os segundos de verde e os terceiros de azul.

Front. Page • O Front. Page é um programa que permite a definição do conteúdo da página de forma muito similar ao Word. • A tradução para código HTML é feita instântanea e automaticamente. • Por omissão os ficheiros são gravados com a extensão. html logo não é necessário ter essa preocupação. • O Front. Page integra o pacote de software “Microsoft Office”, sendo portanto fácil de se obter.

Ambientes • O Front. Page tem três ambientes: – O normal onde se faz a edição do dococumento. – O HTML onde se pode ver o código HTML. – O preview que mostra a página como esta será vista num browser.

Frames • Quando se inicia o desenvolvimento de uma página no Front. Page, podemos escolher o esquema de frames. • O que é uma frame? – Permite dividir uma página em várias páginas. Por exemplo uma para navegação e outra para mostrar o conteúdo. • Esta opção obtem-se da seguinte forma: File New Page Frames Pages

Frames • Quando se define um conjunto de frames é necessário definir quais as páginas a incluir em cada frame. • No Front. Page existem duas hipoteses: – Set Initial Page: coloca na frame uma página desenvolvida préviamente. – New Page: coloca na frame uma página em branco para ser desenvolvida. Como no caso da frame de cima. – Cada frame contem uma página. Portanto neste caso temos quatro páginas: uma por cada frame e uma com a definição da estrutura.

Inserção de Links endereço • Para se inserir um link deve-se ir ao meunu Insert Hyperlink • O Front. Page possibilita a inserção de diversos tipos de links: – Pode-se colocar o endereço da página na entrada URL – Pode-se clicar num dos botões à direita para se obter links de diversos tipos. – Pode-se fazer links para bookmarks na própria página – Definir a frame que deve mostrar a página URL ficheiro local de email novo documento

Bookmarks • Para se fazer uma bookmark na página coloca-se o cursor no sitio onde se quer o bookmark e vai-se ao menu Insert Bookmark • Depois basta colocar o nome que se quer dar ao bookmark

Escolher a frame • Podemos querer clicar num link numa frame e que a página a mostrar seja colocada numa outra frame. • Para tal basta escolher a frame clicado no seu nome ou na sua posição na imagem.

Imagens e Backgrounds • Para se inserir uma imagem deve-se ir ao menu Insert Picture – Clipart: Se se quiser uma imagem do clipart – From File: se se quiser uma imagem proveniente de um ficheiro. • Para alterar o tamanho da imagem basta arrastar um dos seus cantos até se obter o tamanho desejado. • Para se definir um novo fundo deve-se ir ao menu Format Background • Pode-se escolher uma cor ou uma imagem.

Tabelas • O Front. Page permite inserir tabelas, para tal deve-se aceder ao menu Table Insert Table. • O resultado é uma janela com vários parâmetros a definir: – – – número de linhas, número de colunas, alinhamento do texto, tamanho das células, espessura dos limites, etc.

Aceder a Botões • Além dos menus, várias das capacidades do Front. Page podem ser acedidas directamente através de botões. • Na figura ao lado estão três exemplos: – Tabelas – Imagens – Links