Capitulo 5 HTML

Captulo 5 Programar HTML
HTML o acrnimo de HyperText Markup Language. No uma linguagem de programao compilada como o C, Java ou o Basic. uma linguagem de interpretao, que funciona s com um tipo especfico de software, denominado browser. HTML um formato para mostrar de forma interactiva texto e grficos em conjunto. Tem mais em comum com um processador de texto do que com uma linguagem de programao. HTML no a primeira Markup Language. De longe. As Markup languages tm sido usadas ao longo de anos. Se j tiver utilizado computadores ao longo dos ltimos ano provvel que j tenha usado uma. Os melhores exemplos so os velhos programas de processamento de texto (sendo o mais popular o wordperfect). Os documentos eram criados em texto, mas quando se queria utilizar algo em bold, ou itlico, o programa criava um markup code para enviar para a impressora. Esses comandos pareciam-se com: <BOLD>bold<bold> impresso a bold. Se utilizou uma verso inicial do WordPerfect, quase de certeza que ter visto o cdigo markup atravs do comando 'Reveal Codes.' HTML trabalha de forma semelhante. Browsers, como o Netscape Navigator ou Microsoft Internet Explorer so essencialmente descodificadores e no tanto programas. Quando se diz a um Browser para abrir um documento, ele l primeiro o documento, e depois deixa o documento indicar como o ecr deve ser preenchido. Quando o browser l o documento, ele procura perceber como o texto e os grficos devem surgir. Se o cabealho do documento ler: <b>My home page</b>, ento ele ir apresentar o texto 'My home page' a bold. A forma como o browser marca o texto similar a como marcaramos um documento escrito para leitura. Se algum pretende-se chamar ateno para uma parte ou ttulo do documento, poderiam sublinhar com um lpis essa parte ou palavra. O HTML, esse lpis.
1. Como funciona o HTML

O HTML consiste em 'tags.' Tags so etiquetas contendo texto que define como o contedo dever surgir. Tags so simples commandos que se encontram separados por < >. A primeira tag, ou tag inicial, activa o markup, a segunda tag, ou tag final, desliga o markup. Um bom exemplo a tag do bold. Se quisermos fazer surgir as palavras 'My home page' a bold, devemos escrever: <b>My home page</b>
Gustavo Cardoso 2002
O <b> activa o bold. Tudo a seguir ao <b> mostrado a bold at que surja </b>. O </b> desactiva o markup para o bold.
1.1. Estrutura de um documento HTML

Um documento HTML necessita de 3 tags em ordem a funcionar correctamente. <HTML> - Esta tag inicia um documento. Diz ao browser que tudo a seguir (at ao /html) estar em formato HTML. <HEAD> - Este o cabealho do documento. onde informao como o ttulo da pgina web, o nome do criador, etc. visto. Nada na <HEAD> tag visto pelo utilizador da pgina. <BODY> - o corpo do documento. Todo o texto e grficos est contido na <BODY> tag. A hierarquia HTML funciona assim: <HTML> <HEAD> </HEAD> <BODY> <B>My home page</B> </BODY> </HTML>
1.2. A Tag <HEAD>

Como j foi dito a tag <HEAD>, contm informao no visualizada pelo utilizador. A nica tag contida no HEAD tag que o utilizador v a TITLE tag, aq ual mostra o ttulo da pgina na barra de topo dos browsers. Muita informao pode ser armazenada a: 1. Nome, descrio e plavras chave do document. Esta informao usada na maioria dos motores de pesquisa, como o Yahoo ou Lycos. 2. Define relaes entre outros documentos.
A TITLE tag, como j foi mencionado, onde o nome do documento guardado. Isto mostrado no topo do browser. Este um exemplo de como a TITLE tag utilizada: <HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY> </BODY> </HTML> Como j foi mencionado existem vrias tags que podem ser includas no <HEAD> e que iro determinar como a pgina ser mostrada num motor de pesquisa. Isto feito com <META> tags. As duas mais utilizadas <META> tags so DESCRIPTION and KEYWORDS. A META tag uma forma para o criador da pgina tentar definir a informao no includa no documento
HTML. Muitas destas funes, so funes avanadas e que no sero abordadas neste tutorial. S as tags DESCRIPTION e KEYWORDS sero analisadas. Este um exemplo de uma descrio do documento: <META NAME="Descrio" CONTENT="O meu nome ... e esta a minha home page. "> O campo Name a definio da tag, e o campo Content onde a informao guardada. Se a pgina fosse registada num motor de pesquisa, o ttulo apreceria como: 'My home page.' A descrio da pgina apareceria como: O meu nome ... e esta a minha home page.' As meta tags no necessitam de ser fechadas com uma tag </> tag. Pois, no so tags de armazenamento. As keywords (palavras chave) determinam que palavras pesquisveis se pode encontrar no site. Se criarmos um site de fotografia, devemos usar fotografia como uma das keywords. As Keywords so assim definidas: <META NAME="Keywords" CONTENT="home page, eu"> Se algum utilizar as pginas 'home page' ou 'eu' para pesquisar a pgina, esta pgina poder ser um dos resultados da pesquisa. Naturalmente temos de analisar as coisas de uma forma lgica , poucas pessoas fariam uma pesquisa com a palavra eu. assim que uma pgina com META comandos includos se assemelhar: <HTML> <HEAD> <TITLE>My home page</TITLE> <META NAME="Description" CONTENT=" O meu nome ... e esta a minha home page. "> <META NAME="Keywords" CONTENT="home page, eu"> </HEAD> <BODY> </BODY> </HTML>
1.3. A tag <BODY>

Para alm de ser um repositrio onde o corpo da informao do documento se concentra, tambm se pode definir na <BODY> tag a informao sobre como a a pgina ir surgir. Existem diversos atributos. Iremos ver alguns. Alguns atributos da tag BODY: ALINK - Define a cr do link que esteja activo. VLINK - Define a cr do link que j tenha sido visitado LINK - Define a cr do link que ainda no tenha sido visitado.
TEXT - Define a cr do texto. BGCOLOR - Define a cr de fundo do documento HTML. BACKGROUND Aponta para o ficheiro (URL) de uma imagem usada no fundo. BGPROPERTIES Quando na posio 'FIXED', a imagem no findo no se move . LEFTMARGIN define a largura da margem da pgina do lado esquerdo (pixels) TOPMARGIN - define a largura da pgina da margem de topo (pixels) Este o exemplo de um documento HTML com alguns dos atributos BODY utilizados: <HTML> <HEAD> <TITLE>My home page</TITLE> <META NAME="Description" CONTENT=" O meu nome ... e esta a minha home page. "> <META NAME="Keywords" CONTENT="home page, eu"> </HEAD>
<BODY alink="white" vlink="brown" link="blue" text="black" bgcolor="yellow" leftmargin="10" topmargin="10"> <a href="1-3.htm">eu sou um link j visitado (brown) </a> <a href="1-5.htm">Eu devia ser um link ainda no visiatado (blue) </a> <a href="1-4.htm">Eu sou um link activo (white)</a> </BODY> </HTML>
1.4. Cores em HTML

O HTML define cores baseando-se num sistema hexadecimal. As cores so baseadas no RGB (combinaes de Vermelho-Red, Verde-Green, Azul-Blue). A cada componente associado um valor que varia de 00 a FF. Os trs valores 3 so combinados em um nico valor, o qual produz a cr. Como o sistema hexadecimal muito difcil de meorizar, o HTML utiliza algumas cores standard ,recorrendo a nomes. Os nomes usados no HTML so: Black Maroon Green Olive Navy Purple Teal Gray Silver Red Lime Yellow Blue Fuchsia Aqua White
1.5. Imagens e Fundos

Antes de iniciar a nossa discusso em torno de fundos e outras imagens, iremos primeiro discutir alguma terminologia. Um bitmap uma imagem composta por muitos pequenos pontos. Esses pontos so denominados de pixels. A maior parte das imagens so bitmaps. Existem tambm imagens vectoriais, mas no so to comuns. Imagens vectoriais so calculos computorizados que designam uma rea para ser de dada cr. As imagens vectoriaisso mais pequenas em tamanho e mais perfeitas. Existem dois formatos comuns de formatos bitmap. Eles so o GIF e o JPEG. GIF's tiveram origem nos servios online da compuserve. So baseados numa palette de 256 cores. GIF's podem ser muito pequenos e so normalmnete utilizados para botes, logos, fundos, e outros grficos que no necessitam de muitas cores. Digitalizar uma fotografia a cores como GIF um acto pouco realstico . Quanto menos cores o GIF usar, mais pequena ser a imagem. Quanto menos espao fsico possuir o GIF, menor ser o seu tamanho.
JPEG's, tambm conhecidos por JPG, so comprimidos baseando-se na qualidade. JPEG's so recomendados para fotografias a cores. Podem utilizar milhares d cores e serem pequenos em tamanho de ficheiro. A forma como o JPEG optimizado depende do nvel de compresso escolhido pelo utilizador. Quanto mais compresso, pior a qualidade da imagem, mas tambm menor o tamanho do ficheiro. Existem muitas formas de criar imagens para fundos. Uma forma criar uma imagem do tamanho do ecr. Pode-se criar uma imagem de 640 por 480 pixels (a resoluo minima do browser), e quase de certeza que encher a quase totalidade do ecr. Ter uma imagem dessa dimenso ficaria muito bem, mas seria uma opo irrealista, uyma vez que se tornaria demasiado pesada. Assim, sendo a melhor forma criar uma imagem em mosaico. Isto , criar uma imagem pequena que depois repetida, parecendo muito maior do que na realidade. Aqui est um exemplo de fundos:
Este grfico est preparado para 40 x 800 pixels. A maior parte do grfico branco. Este tipo de grfico o ideal se pretendermos criar uma barra lateral.
Este grfico tem 50 x 50 pixels.
1.6. Plataformas, browsers e resoluo de ecrs

Um dos maiores problemas de escrever HTML a formatao da pgina para todos os utilizadores. O maior problema com o HTML a resoluo dos ecrs. Podemos afirmar que quase de certeza que os utilizadores iro utilizar uma das seguintes resolues: 640 x 480, 800 x 600, 1024 x 768, sendo 800 x 600 provavelmente a mais comum. Se uma pgina for formata para 1024 x 768, um utilizador com 640 x 480 teria de percorrer verticalmente um grande espao. Ou se fosse ao contrrio, a pgina pareceria muito pequena em 1024 x 768. Uma boa soluo usar tabelas baseadas numa percentagem do tamanho da largura do ecr.
1.7. Tamanho dos ficheiros

Outra material difcil de prever a velocidade de ligao dos utilizadores. Hoje em dia, muitos utilizadores da Internet tm ligaes cabo e RDIS, mas h ainda milhes de utilizadores com 33.6, and 56k, pelo que se deve reduzir ao mnimo o tamanho dos grficos. As pessoas no visitaro um site demasiado pesado. Existem alguns truques sobre como reduzir o tamanho dos ficheiros de imagem. Se pretendemos mostrar imagens grandes uma boa ideia criar um thumbnail (uma verso mais pequena) com um link para a verso mais pesada. Isto permite ao utilizador uma escolha sobre se pretendem demorar mais tempo a ver essa imagem. Existem outros truques. H programas que podem optimizar o tamanho de um ficheiro de HTML. Existem tambm programas como o Macromedia's Fireworks, and Adobe's ImageReady
que fazem diminuir o tamanho das imagens. H alguns truques que o prprio Photoshop permite. Por exemplo, assegurar que os JPEGs so guardados numa compresso pequena, retendo ao mesmo tempo qualidade de imagem. Outro exemplo pode ser exportar GIFs com o menor nmero possvel de cores. No existe um valor apropriado para a dimenso de um ficheiro web. O tamanho da pgina depende do contedo da prpria pgina. A melhor prtica provavelmente manter uma pgina entre 30-50k.
1.8. Criar texto em HTML

Como j foi mencionado, o HTML um mtodo de formatao de texto e imagens. Iremos primeiro observar como se trabalha texto e pargrafos. Existem duas tags para formatar o fluxo de texto, elas so: <P> - Pargrafo <BR> - Quebra de linha De forma a criar um novo pargrafo, basta usar a tag <P>.Quando o pargrafo est completo utiliza-se a tag </P>. Quando a tag /P usada, cria-se uma linha extra que separa o texto. A <BR> cria uma simples quebra de linha. Podemos pensar na <BR> como a nossa tecla HTML de Enter. Por exemplo, para quebrar esta linha agora utilizaria o comando <BR>. A tag <P> ao ser utilizada para este pargrafo deixar uma linha depois </P>. Existem algumas regras bsicas para escrever HTML. Quando usamos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes quanto quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. Aqui fica um exemplo:: <HTML> <HEAD> <TITLE>I'm learning HTML</TITLE> <BODY> <P> Existem algumas regras bsicas para escrever HTML. Quando usamos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes quando quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. Existem algumas regras bsicas para escrever HTML. Quando usamos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes quanto quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. Existem algumas regras bsicas para escrever HTML. Quando usamos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes quanto quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. Vamos ver esta pgina </P> </BODY> </HTML>
O texto que parecia bem formatado no editor de texto mas no browser saiu como um grande bocado de texto. Ele deveria ter sido formatado assim: <HTML> <HEAD> <TITLE>I'm learning HTML</TITLE> <BODY> <P> Existem algumas regras bsicas para escrever HTML. Quando usarmos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes quanto quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. </P> <P> Existem algumas regras bsicas para escrever HTML. Quando usramos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes cquanto quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. </P> <P> Existem algumas regras bsicas para escrever HTML. Quando usamos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes cquanto quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. </P> <P> Existem algumas regras bsicas para escrever HTML. Quando usamos um editor de texto, podemos usar a tecla Enter e a barra de espaos, tantas vezes quanto quisermos. Mas com o HTML no esse o caso. O browser s detecta o primeiro espao ou o primeiro Enter e esquecer o resto. O browser ir ignorar todas as quebras de linha criadas com a tecla Enter. </P> <P> tudo por agora, obrigado. </P> </BODY> </HTML> Agora surge como aparecia ao nosso olhar: Nota: a tag <P> boa para organizar o nosso texto, mas no pode ser usada repetidamente para criar espaos em branco. O browser s reconhecer o primeiro <p> A <BR> pode ser til para um poema ou receita culinria. Ao contrrio da tag <P>, a <BR> no uma tag de armazenagem. No temos de a fazer acompanhar por uma tag </BR>. Este um exemplo de como uma <BR> tag pode ser usada. <HTML> <HEAD> <TITLE>Roses are Red</TITLE> </HEAD> <BODY> Roses are Red<BR> Violets are Blue<BR> You Love me<BR> and I Love You too!<BR> </BODY> </HTML>
No est mal, mas um pouco simples. Ficaria melhor se fosse centrada. Felizmente alinhar um atributo da tag <P>. Existem trs formas de alinhar um paragrafo: Left O paragrafo ser alinhado esquerda Right - O paragrafo ser alinhado direita Center - O paragrafo ser centrado Podemos centrar o poema da seguinte forma: <HTML> <HEAD> <TITLE>Roses are Red</TITLE> </HEAD> <BODY> <P ALIGN="CENTER"> Roses are Red<BR> Violets are Blue<BR> You Love me<BR> and I Love You too!<BR> </P> </BODY> </HTML> O texto pode tambm ser centrado utilizando a tag <CENTER>. Tudo que estiver entre <CENTER> e </CENTER> ser centrado na pgina.
1.9. Headings
Headings so uma forma de aplicar uma chamada de ateno num documento. Existem ao todo seis tipos diferentes de headings cada um usando a tag <H#>, representando o nmero o tamanho, com 1 sendo a maior e 6 a menor. Os headings podem tambm ser alinhados da mesma forma que um paragrafo. Voltando ao poema das rosas de novo. Aqui fica um exemplo de headings: <HTML> <HEAD> <TITLE>Roses are Red</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER"> Roses are Red </H1> <P ALIGN="CENTER"> Roses are Red<BR> Violets are Blue<BR> You Love me<BR> and I Love You too!<BR> </P> </BODY> </HTML> Aqui est um exemplo de todos os seis headings: <HTML> <HEAD>
<TITLE>6 Headings</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> Como se pode verificar os ltimos headings so j muito pequenos
1.10 Formatao de Texto

Mesmo recorrendo aos headings, o texto ainda por vezes parece pouco conseguido. Outra forma de trabalhar o texto a formatao. Aqui onde se pode escolher o tipo de fonte, ou utilizar itlico, bold e muitas outras. A formatao de texto dividida em dois tipos. Formatao lgica e formatao fsica. Muitas vezes tags diferentes obtm os mesmo resultados em plataformas diferentes, o que por vezes no faz grande sentido. Alguns exemplos de formatao: <B> - utilizar uma fonte font <I> - utilizar uma fonte em itlico <U> - utilizar sublinhado <BIG> - utilizar uma fonte grande <SMALL> - utilizar uma fonte pequena <SUB> - diminu o texto <SUP> - aumenta o texto <STRIKE> - mostra uma linha atravessando o texto Aqui est um exemplo HTML desses elementos: <HTML> <HEAD> <TITLE>Formatao Fsica<TITLE> </HEAD> <BODY> <B>isto bold</B><BR> <I>isto itlico</I><BR> <U>isto sublinhado </U><BR> <BIG>este o BIG</BIG><BR> <SMALL>este o small</SMALL><BR> <SUB>este diminu</SUB><BR> <SUP>este aumenta</SUP><BR> <STRIKE>isto uma linha atravs do texto</STRIKE><BR> </BODY> </HTML>
Agora iremos ver a formatao lgica: <CITE> - utilizado quando necessrio fazer uma citao geralmente em itlico. <CODE> - utilizada para apresentar cdigos de computador. <EM> - nfase. Geralmente em itlico. <KBD> - Fazer entrada de resposta <SAMP> - Exemplo de caracteres <STRONG> Salientar uma linha de texto importante. <VAR> - Utilizada para mostrar uma varivel. <DFN> - Para definies. Outra forma de apresentar texto a tag <BLOCKQUOTE>. Apresenta o texto citado num bloco. <HTML> <HEAD> <TITLE>Block Quote</TITLE> </HEAD> <BODY> <BLOCKQUOTE>Pode-se utilizar o blockquote para mostrar um grande bloco de texto. mais fcil do que colocar texto numa tabela.</BLOCKQUOTE> </BODY> </HTML>
1.11 A tag <FONT>

Quando pretendemos apresentar texto noutra fonte diferente da default (que normalmente Times ou Courier), utilizamos a tag <FONT>. Com este tag, pode-se mudar a fonte, ajustar o seu tamanho, e mudar a cr do texto. Uma coisa que importante lembrar que no h pacotes standard de fonts. Por exemplo, os Macintosh's usam a Helvetica, enquanto a maioria dos PC's usa a Arial. por isso que com a tag <FONT> podemos dar uma lista das fontes que podem ser utilizadas ao ler o documento. Se escolhermos Verdana, Helvetica, e depois Arial, o browser ir verificar cada uma para ver se esto instaladas e depois escolhe a primeira da nossa lista, caso no exista a primeira escolher a seguinte. Os atributos da tag <FONT> so os seguintes: FACE aqui que se escolhe o tipo de rosto da nossa pgina. COLOR aqui que se escolhe o tipo de cor para as letras do texto. SIZE pode-se mudar o tamanho da fonte com este atributo. Ele pode variar entre 1-7, sendo 7 a maior fonte. Se o tamanho no for definido ser utilizado o tamanho 3. Pode-se escrever aumentando SIZE="+1", ou subtraindo (SIZE="-1"). Um exemplo de atributos de fonte, outra vez as rosas: <HTML> <HEAD> <TITLE>Roses are Red</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER"> Roses are Red </H1> <P ALIGN="CENTER"> <FONT FACE="Helvetica", "Arial", "Verdana", "Garamond" SIZE="5" COLOR="blue">
10
Roses are Red<BR> Violets are Blue<BR> You Love me<BR> and I Love You too!<BR> </FONT> </P> </BODY> </HTML>
1.12 A tag <BASEFONT>

Temos de escrever a tag <FONT> em cada pargrafo ? No. Isto pode ser conseguido com a tag <BASEFONT>. Pode-se definir uma fonte base e depois o html ir continuar a mostrar o texto nessa fonte at que uma nova tag de fonte surja. A tag <BASEFONT> utiliza os mesmos atributos que a tag <FONT> - FACE, SIZE, and COLOR. Nota: a <BASEFONT> tag no tem de ser desligada.
1.13 Dividir texto em grupos com a tag <DIV>

A tag <DIV> uma forma til de dividir textos em grupos. Este um exemplo da tag <DIV>: <HTML> <HEAD> <TITLE>Roses are Red</TITLE> </HEAD> <BODY> <DIV ALIGN="left"> Roses are Red<BR> Violets are Blue<BR> </DIV> <DIV ALIGN="right"> You Love me<BR> And I Love You too<BR> </DIV> </BODY> </HTML>
1.14 Rgua Horizontal

Uma rgua horizontal uma forma simples de colocar uma linha na nossa pgina. A tag <HR> coloca uma rgua na nossa pgina a separar duas partes de texto. Como no uma tag de armazenamento, no tm de ser desligada. Se pretendermos adapt-la s nossas necessidades, podemos recorrer aos seguintes elementos:
11
ALIGN tal como nas tags <P> e <DIV>, Left, Right, e Center WIDTH d a largura da rgua face pgina do browser, em pixels. SIZE d a altura da rgua em pixels. NOSHADE um simples comando de on/off. Se este atributo for utilizado a rgua no mostra um efeito 3D. COLOR d uma cor rgua. Alguns exemplos da tag <HR> e dos seus atributos: <HTML> <HEAD> <TITLE>Roses are Red</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER"> Roses are Red </H1> <HR ALIGN="CENTER" SIZE="2" WIDTH="80%" COLOR="blue"> <P ALIGN="CENTER"> Roses are Red<BR> Violets are Blue<BR> You Love me<BR> and I Love You too!<BR> </P> </BODY> </HTML>
1.15 Texto Pr-formatado

Mencionou-se anteriormente que o browser ignora espaos extra e mudanas de linhas feitas com a tecla Enter. Mas isso, no totalmente verdade. Existe uma maneira de utilizar texto pr-formatado, em que o browser ir interpretar o texto tal qual foi formatado num editor de texto. O texto pr-formatado tambm uma boa maneira de importar texto de outro documento, como por exemplo do Microsoft Word. Se um documento Word for colado num editor de texto, tudo sera apresentado como um bloco nico. Se o documento Word for colado dentro da tag <PRE>, a maioria da formatao sair intacta. O texto pr-formatado activado utilizando a tag <PRE> tag e desactivado com </PRE>. Um exemplo: <HTML> <HEAD> <TITLE> texto pr-formatado</TITLE> </HEAD> <BODY> <PRE> # de feijo e porco em stock ----------------------------
12
Porco Feijes Total 5/1 5/2 1 2 2 5 3 7
</PRE> </BODY> </HTML>
1.16 Caracteres especiais

Existem muitos caracteres especiais que podem ser utilizados no HTML. Estes so apenas alguns exemplos: &cent - &copy - &reg - &lt - < &gt - > Uma lista completa de caracteres pode ser encontrada em: http://www.w3.org/TR/WD-entities961125 Por agora j sabemos fazer uma pgina. Mas, infelizmente, ainda no parece grande coisa e tambm ningum ser capaz de sair dela. No prximo captulo iremos abordar as imagens e os links.
2.1 URLs
URL (Uniform Resource Locator) o caminho local (o nosso computador) ou remoto (na internet) para chegar a um ficheiro. Com certeza, j deve ter visto muitas URLs sem o saber. A URL da nossa pgina : http://www.iscte.pt O 'http' o protocolo. Diz aos browsers como mostrar o ficheiro que iro abrir. Existem muitos outros protocolos como o FTP (File Transfer Protocol), News (Newsgroups), Gopher (Searching), e Mailto (enviar e-mail). Os protocolos so usualmente separados usando dois pontos (:) e duas barras (//). A excepo so os News e Mailto, que so seguidos de apenas dois pontos. 'www.iscte.pt' o servidor em que o ficheiro colocado. O browser ir procurar um ficheiro em www, no domnio iscte.pt, o qual aponta para um endereo IP. Um endereo IP uma srie de 4 nmeros que identifica um utilizador na Internet. Quase toda a gente conectada Internet falo atravs de um endereo IP. O ficheiro de partida para a maioria das pginas web o 'index.html', sendo esse o primeiro ficheiro que mostrado quando algum visita www.iscte.pt. Esta a URL em que te encontras: http://www.iscte.pt/Ciiscte/ Olha para o barra do teu Browser e confirma qual o endereo que a surge.
13
Nota as barras // . Muitas pessoas que utilizam o Windows como sistema operativo ficam confundidas porque a se usa "\" para separara o seu sistema de ficheiros. Depois do servidor , a URL aponta o caminho exacto e o nome da pasta onde o ficheiro se encontra. assim que o web browser localiza todos os ficheiros que vai encontrando. As URL's podem tambm ser utilizadas localmente, algo que irs perceber logo que te inicies na criao de pginas. Pode parecer uma tarefa ingrata ter de escrever o caminho todo de uma url cada vez que se cria uma nova pgina e se faz um link. Felizmente existe forma de dar a volta a isso. Existem dois tipos de URLs, Absolutas e Relativas. A URL que surge no browser e que podes ver algumas linhas atrs, uma URL Absoluta. Uma URL absoluta uma URL onde surge o caminho completo at ao ficheiro. O browser mostra sempre URLs absolutas. Se estiveres a utilizar um servidor baseado em UNIX server e tens um domnio de topo adstrito, pode-se utilizar um tipo diferente de URL absoluta. Pode-se utilizar as barras ("/") a partir da directoria de raiz (root) para as URLs. Por exemplo, a URL absoluta desta pgina seria: /Ciiscte/ A / especifica a directoria raiz. A /ensino tambm uma directoria. Sabemos isso porque tm associada uma /. Pensa estas URLs como sendo o topo das URLs. Isto torna mais fcil mudar os ficheiros de local. Assumindo o topo de uma directoria como o nosso ponto de partida, a nossa homepage seria: /index.html A barra direita (/) indica o topo da URL e 'index.html' o ficheiro. Nota que no existe mais nenhuma barra depois do ficheiro. As URLs relativas so algo diferentes, e so o que a maioria dos criadores de pginas usa. Com uma URL relativa, ns navegamos a partir da URL presente, tanto para a frente como para trs. '../' (2 pontos) quer dizer descer um nvel. Se estivssemos em http://www.iscte.pt/ensino.php?tipo=sebentas.php - ento utilizando../ iria levar-nos directoria principal. / - quer dizer subir um nvel, e a tenho de especificar a minha directoria de destino. Assim, se estivssemos na home page de iscte.pt localizada em : http://www.iscte.pt/ e quisssemos criar um novo link para o centro de informtica utilizaramos este link: Ciiscte/index.htm Agora, se quisermos criar um link para a homepage a partir de Ciiscte, utilizaramos este link:: ../../index.htm
14
2.2 Adicionar imagens pgina

As pginas Web necessitam de imagens. Houve um tempo, h no muito tempo atrs, em que no existiam browsers capazes de mostrar imagens, o que tornava a Internet pouco atractiva. Felizmente os browsers comearam h j algum tempo a suportar imagens e por isso no nos temos de preocupara com compatibilidade entre formatos de imagem. Existem ainda alguns browsers s de texto, por isso continua a ser importante que os utilizadores que os usam consigam visualizar o contedo. Para fazer um link com uma imagem, usamos o tag <IMG>. A seguir utiliza-se o atributo SRC para especificar o caminho at imagem. Aqui est um exemplo de um grfico a surgir numa pgina web, se estivermos em http://www.iscte.pt/Ciiscte/index.htm: <HTML> <HEAD> <TITLE>colocar um grfico na pgina</TITLE> <BODY> <IMG SRC="/imagens/simbolo_iscte.jpg "> </BODY> <HTML> O caminho SRC aponta dois nveis acima para a directoria imagens. Se o ficheiro de imagem estiver na mesma directoria que o ficheiro HTML, ento no h que dar qualquer caminho. Basta utilizar o nome do ficheiro como SRC: <IMG SRC="simbolo_iscte.jpg"> Podemos tambm fazer um link para uma imagem que sesida em outro servidor da Internet. Para isso temos de digitar a URL absoluta da imagem. Por exemplo se quisermos utilizar este logo na nossa pgina, e se no quisermos fazer o seu download para o nosso servidor, podemos utilizar a sua URL como SRC. Ateno que se deve obter permisso para fazer isto, uma regra de bom relacionamento e civilidade.
2.3 Atributos da tag <IMG>

Devemos lembrar-nos que nem toda a gente ter um browser com imagens, embora quase todos o tenham, ou poder haver quem tenha a opo de imagem desligada para poupar tempo nos downloads. Se plaearmos utilizar botes para navegar no site e um utilizador os no puder ver, tudo se tornar algo confuso. Por essa razo existe o ALT text. ALT text permite utilizar uma linha de texto para descrever a imagem. Por exemplo, eu posso querer que as pessoas possam saber que a imagem que no surge na realidade o logo do ISCTE, para fazer isso tenho de utilizar o ALT text. Um exemplo: <HTML> <HEAD> <TITLE>colocar uma imagem</TITLE> <BODY> <IMG SRC=simbolo_iscte.jpg" ALT="O logo do ISCTE na Internet"> </BODY> <HTML>
15
Se a imagem no surgir isso porque o caminho para ela no estava correctoo. A isso chamase link quebrado (ou broken link). O ALT text funciona at com links quebrados, e surge antes da imagem ser carregada. Similar tag <P>, existem tambm atributos de <IMG>, embora o seu funcionamento seja algo diferente. Em vez de alinhar a imagem, eles alinham o texto que existir junto imagem. TOP - Alinha texto junto ao topo da imagem. MIDDLE Alinha o texto no meio da imagem. BOTTOM Alinha o texto no final da imagem. Temos no entanto de utilizar outra tag, como a <P> para alinhar a imagem. Exemplo: <HTML> <HEAD> <TITLE>alinhar texto em torno da imagem</TITLE> <BODY> <P ALIGN="left"> <IMG SRC="/imagens/simbolo_iscte.jpg" ALIGN="top">algum texto para alinhar. </P> </BODY> <HTML> Existem outras funes para o atributo ALIGN, no que respeita a imagens. Se quisermos envolver texto em torno da imagem, podemos usar LEFT e RIGHT. Um exemplo poder ser: <HTML> <HEAD> <TITLE> alinhar texto em torno da imagem </TITLE> <BODY> <P> <IMG SRC="/imagens/simbolo_iscte.jpg" ALIGN="left"> Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido </P> </BODY> <HTML> E se a imagem e o texto estiverem muito prximos? Tambm h maneira de resolver isto. Existem dois outros atributos que podem definir o quanto o texto dever estar longe da imagem VSPACE Espao vertical em pixels HSPACE - Espao Horizontal em pixels Um exemplo: <HTML> <HEAD> <TITLE> alinhar texto em torno da imagem </TITLE>
16
<BODY> <P> <IMG SRC="/imagens/simbolo_iscte.jpg" ALIGN="left" VSPACE="15" HSPACE="15"> Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido Aqui est algum texto sem sentido </P> </BODY> <HTML>
2.4 Escala das Imagens

E, se a imagem for grande demais? Podemos utilizar HEIGHT e WIDTH para trabalhar a escala das imagens. Podemos atravs destes atributos trabalhar a altura e a largura atravs de um nmero absoluto em pixels, ou uma percentagem. O ficheiro que temos estado a utilizar, simbolo_iscte.jpg , tem W 70 x H 80 pixels. Podemos alterar a imagem utilizando os atributos HEIGHT e WIDTH: <IMG SRC="/imagens/simbolo_iscte.jpg" WIDTH="125" HEIGHT="108">
Teremos de ter cuidado com estes comandos, pois se no mantivermos as propores a imagem poder ficar comprometida, pois ficar desproporcionada. Um exemplo: <IMG SRC="/imagens/simbolo_iscte.jpg" WIDTH="125" HEIGHT="215"> melhor tentar mexer na imagem fazendo-o atravs de um editor de imagens.
2.5 Dar imagem uma moldura

Para dar uma moldura imagem (border), basta utilizar o atributo border. Pode-se especificar o tamanho da moldura dando-lhe um nmero (em pixels). Este um exemplo:
17
<IMG SRC="simple.gif" border=5>
Agora que j abordamos como manipular imagens, iremos trabalhar os links.
2.6 Ligar pginas entre si

J abordmos formas de apontar URLs. Iremos agora ver como criar um link no nosso web site ou para outro site. Para podermos ligar um documento, a tag <A> tem de ser utilizada. A tag <A> parecida com a tag <IMG>, pelo que temos de definir a origem do link. A tag <A> uma tag de armazenamento. Primeiro o link tem de ser definido e depois o seu contedo tem de ser activado. Tudo o que se encontra entre <A> e </A>, sera enviado para a URL definida no tag inicial. Uma vez, que j discutimos as URLs deve ser fcil realizar a sua ligao. Iremos utilizar a tag <A> da seguinte forma: <HTML> <HEAD> <TITLE>ligar a outra pgina</TITLE> </HEAD> <BODY> <A HREF="index.htm">V-me esta pgina </A> </BODY> </HTML> Para alm de texto , podemos usar imagens nos nossos links. Este um exemplo de como o logo do ISCTE pode ser utilizado para criar um link para uma pgina. <HTML> <HEAD> <TITLE>Ligaes a outras pginas</TITLE> </HEAD> <BODY> <A HREF="http://www.papaleguas.com"><IMG SRC="="/imagens/simbolo_iscte.jpg" ></A> </BODY> </HTML>
2.7 links Internos

Para alm dos links para dentro e for a do nosso site, podemos ainda ligar seces dentro da nossa prpria pgina..Estes links chama-se ancoras (anchors). Utilizam-se anchors quando temos uma pgina longa, com muita informao. Nesses casos bom dar um indice no topo da pgina, para que os utilizadores possam saltar para a parte que mais lhes interesa, sem terem de percorrer toda a informao.
18
Para criar uma ncora, temos de criar primeiro um link. S que em vez de colocar a URL na parte HREF, iremos utilizar o smbolo #, seguido do nome da anchor. A seguir cria-se o link e fecha-se a tag. A sintaxe a seguinte: <A HREF="#final">click aqui para o final da pgina</A> Uma vez criado o link para a ncora temos de definir a prpria ncora. Isto faz-se indo para o local onde pretendemos que o utilizador v. O que se faz tambm com a tag <A>. S que desta vez, definimos a ncora s pelo seu nome, neste caso o nome seria final. <A NAME=final>Chegou ao final da pgina</A> Usando estes exemplos o utilizador seria transportado para o final da pgina.
2.8 Outros Links

Existem muitas outras maneiras de utilizar links. Por exemplo, imaginemos que h um ficheiro de um trabalho para algum fazer um download. Pode-se colocar esse ficheiro na nossa pgina e ele ficar disponvel para quem o quizer descarregar para o seu computador. Pode-se igualmente criar um link para algum nos enviar uma mensagem de email. Neste caso usarimos a URL 'mailto:' : <HTML> <HEAD> <TITLE>Link para mail</TITLE> </HEAD> <BODY> <A HREF="mailto:gustavo@cav.iscte.pt">Manda-me um email</A> </BODY> </HTML> Este comando faz activar o cliente de e-mail do utilizador preenchendo automaticamente o campo 'To' , pode-se tambm especificar o campo Subject no HTML: <A HREF=" mailto:gustavo@cav.iscte.pt"?subject=queixar-se de no perceber a aula!"> Pode-se tambm fazer links para outros recursos Internet, como sites FTP. O FTP (File Transmission Protocol) usado para transmitir ficheiros. De facto, ter de se ter um entendimento bsico do FTP para fazer o upload do site que se construir. Este sera um exemplo de commando para um link a um site FTP: <A HREF="ftp://ftp.iscte.pt/files/file.zip>Download de ficheiro</A> Pode-se tambm fazer links para Newsgroups para obter alguma informao extra. Basta saber o nome do newsgroup. <A HREF="news:news.group.here">Newsgroup</A>
19
2.9 Fazer o Upload do Site

Pode-se fazer o upload de um web site de maneiras diferentes. Muitos ISPs oferecem hoje em dia um upload em HTTP, o que facilita a tarefa dos novos utilizadores. A forma mais corrente de o fazer continua a ser via FTP. Para se fazer um upload atravs de FTP, recomenda-se que se tenha um cliente FTP (h um na tua desktop do windows) . Por forma a aceder a um site FTP tens de ter uma password e user name (que devem ser os emsmos que usas para aceder tua rea). Um cliente FTP funciona de forma similar ao Windows Explorer. S que iremos ver uma estrutura de directorias do nosso lado e outra no site remoto, para onde pretendemos enviar os ficheiros que constituem a a nossa pgina. Para realizar o upload temos de navegar no nosso site local e fazer um click duplo nas directorias que tiverem os ficheiros para o upload. Ters de fazer por ter as directorias, no site remoto, ordenadas tal e qual estavam no teu site local, ou os teus links e imagens no funcionaro. Uma vez feito o upload, ters a tua pgina na Internet. Parabns.
Nota: este tutorial produto da compilao de informao disponibilizada online sobre HTML em diversos sites, entre eles destacam-se:
NCSA Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/ Internet/WWW/HTMLPrimer.html Introduction to HTML http://www.cwru.edu/help/introHTML/toc.html Authoring HTML hotwired.lycos.com/webmonkey/teachingtool/ Basic HTML Tutorial http://www.iboost.com/build/programming/html/basic/ HTML Tutorial http://icarus.weber.edu/tutorial/
Para maior aprofundamento consultas a seguinte bibliografia na biblioteca do ISCTE: Musciano, C., Kennedy, B., HTML the definitive guide, Cambridge, O'Reilly, 1997.
20

Capitulo 5 HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Capitulo 5 HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Captulo 5 Programar HTML

1. Como funciona o HTML

Gustavo Cardoso 2002

1.1. Estrutura de um documento HTML

1.2. A Tag <HEAD>

Gustavo Cardoso 2002

1.3. A tag <BODY>

Gustavo Cardoso 2002

1.4. Cores em HTML

1.5. Imagens e Fundos

Gustavo Cardoso 2002

Este grfico tem 50 x 50 pixels.

1.6. Plataformas, browsers e resoluo de ecrs

1.7. Tamanho dos ficheiros

Gustavo Cardoso 2002

1.8. Criar texto em HTML

Gustavo Cardoso 2002

Gustavo Cardoso 2002

Gustavo Cardoso 2002

1.10 Formatao de Texto

Gustavo Cardoso 2002

1.11 A tag <FONT>

Gustavo Cardoso 2002

1.12 A tag <BASEFONT>

1.13 Dividir texto em grupos com a tag <DIV>

1.14 Rgua Horizontal

Gustavo Cardoso 2002

1.15 Texto Pr-formatado

Gustavo Cardoso 2002

Porco Feijes Total 5/1 5/2 1 2 2 5 3 7

</PRE> </BODY> </HTML>

1.16 Caracteres especiais

Gustavo Cardoso 2002

Gustavo Cardoso 2002

2.2 Adicionar imagens pgina

2.3 Atributos da tag <IMG>

Gustavo Cardoso 2002

Gustavo Cardoso 2002

2.4 Escala das Imagens

2.5 Dar imagem uma moldura

Gustavo Cardoso 2002

<IMG SRC="simple.gif" border=5>

Agora que j abordamos como manipular imagens, iremos trabalhar os links.

2.6 Ligar pginas entre si

2.7 links Internos

Gustavo Cardoso 2002

2.8 Outros Links

Gustavo Cardoso 2002

2.9 Fazer o Upload do Site

Gustavo Cardoso 2002

Você também pode gostar