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: FrontPage, 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, <h1> </h1> O texto formatado encontra-se entre as duas tags, por exemplo, <b>olá</b> resulta em olá. • As tags não são case sensitive. <h1> é equivalente a <H1> • 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> <H1>HTML é fácil de aprender</H1> <P>Aqui está o primeiro parágrafo. </P> <P>E aqui está o segundo.</P> </body> </html> As Tags <H>: Headings • Os headings servem para estruturar o documento em títulos. Existem 6 níveis de headings h1, ..., h6. • Exemplo: <html> <head> <TITLE>Um Pequeno Exemplo</TITLE> </head> <body> <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </body> </html> A Tag <P>: Parágrafo • As mudanças de linha no HTML são ignoradas. Uma mudança de linha necessita da tag <BR>. • Para se definir um parágrafo é necessário utilizar a tag <P>. • A tag <P> tem um argumento opcional: ALIGN. Pode tomar os valores CENTER e RIGHT, por omissão é LEFT. • Por exemplo: <P>isto é um parágrafo</P> <P ALIGN=CENTER>isto é outro parágrafo, <BR>mas centrado</P> • 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 • <B> define texto a bold, ou negrito. <B>Este texto está a negrito.</B> Este texto está a negrito. • <I> define texto a itálico. <I>Este texto está a itálico.</I> 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=“#FF02DF”. Os dois primeiros digitos definem a quantidade de vermelho em hexadécimal (00 a FF), os segundos de verde e os terceiros de azul. FrontPage • O FrontPage é 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 FrontPage integra o pacote de software “Microsoft Office”, sendo portanto fácil de se obter. Ambientes • O FrontPage 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 FrontPage, 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 FrontPage 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 FrontPage 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 FrontPage 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 FrontPage podem ser acedidas directamente através de botões. • Na figura ao lado estão três exemplos: – Tabelas – Imagens – Links
Download
