Tecnologia Internet I

XHTML / CSS

FACEB Faculdade Cenecista de Braslia Professora: Luclia Oliveira

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

2. Semestre de 2007

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Conceitos Redes de Computadores: Uma rede de computadores consiste de dois ou mais computadores ligados entre si e compartilhando dados, impressoras, trocando mensagens (e-mails), etc.Internet um exemplo de Rede. Existem vrias formas como os recursos de vrios equipamentos interligados podem ser compartilhados, mediante meios de acesso, protocolos e requisitos de segurana. Internet: A Internet uma rede de redes em escala mundial de milhes de computadores. Ao contrrio do que se pensa comumente, Internet no sinnimo de World Wide Web. Esta parte daquela, sendo a World Wide Web, que utiliza hipermdia em sua formao bsica, um dos muitos servios oferecidos na Internet. A Web um sistema de informao muito mais recente que emprega a Internet como meio de transmisso. www: Significa World Wide Web. um dos servios bsicos da Internet, a parte grfica que possibilita acesso simultneo a imagens, animaes, sons, vdeos e textos. Sua maior caracterstica a possibilidade de navegao atravs dos "links". Intranet: uma rede de computadores privativa que utiliza as mesmas tecnologias que so utilizadas na Internet. O protololo de transmisso de dados de uma intranet o TCP/IP e sobre ele podemos encontrar varios tipos de servios de rede comuns na Internet, como por exemplo o e-mail, chat, grupo de notcias, HTTP, FTP entre outros. Extranet: Pode ser definida como um conjunto de duas ou mais intranets ligadas em rede. Protocolo IP: Significa em portugus, Protocolo Internet, e utilizado para a comunicao atravs da rede Internet. Os dados so enviados em grupos intitulados "pacotes". Da a designao de pacote IP. o endereo de um computador em uma rede TCP/IP. Todo computador na Internet possui um endereo IP. Clientes tm um endereo IP permanente ou um que atribudo dinamicamente a eles cada vez que eles conectam rede. Host: Computador principal num ambiente de processamento distribudo ou o computador central que controla uma rede. Na Internet qualquer computador ligado rede, no necessariamente um servidor. Navegador: Tambm conhecido como browser. o programa usado para visualizar a parte grfica da Internet. Alguns exemplos: Netscape, Internet Explorer, pera. Navegadores com cdigo aberto muito geis so o Mozilla e o Firefox. Provedor de Acesso Internet: uma empresa ou organizao que oferece seus clientes o acesso Internet. Alm de oferecer aos seus usurios o acesso Internet, podem oferecer outros servios adicionais, ou de valor agregado, relacionados: registro de domnios e hospedagem de pginas (Web-Hosting), contas de e-mail, so alguns exemplos destes servios. Servidor Web: Programa que fornece o material apresentado pelo browser. Pode conectar-se a bancos de dados. Exemplos: JSP, PHP, ASP.Net, Cold Fusion, CGI. Home Page: Pgina inicial de um site da Web. Referenciado por um endereo eletrnico ou hiperlinks. a pgina de apresentao da empresa ou instuio. Escrita em HTML, pode conter textos, imagens, sons, ponteiros ou links para outras pginas ou outros servidores da Internet, etc. File Transfer Protocol (FTP): um protocolo pra transferncia de arquivos na Internet. utilizado para fazer upload e downloadI atravs do qual os arquivos so carregados e baixados. Muitos sites FTP na Internet restringem o acesso; somente os usurios autorizados e com senhas tm permisses para acess-los. URL: o endereo da pgina Web exibido na janela do navegador. Cada pgina est associada a um nico URL. Os URLs normalmente iniciam com HTTP: / /

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

HTTP: Significa HyperText Transfer Protocol, o padro da indstria para transeferir documentos Web pela Internet. Vrios mtodos esto disponveis para navegar entre os URLs diferentes. Em um mtodo o usurio digita o URL de uma pgina no campo Endereo e pressiona a tecla Enter. Outra maneira de navegar pela Web atravs dos elementos visuais em pginas Web, atravs dos chamados hiperlinks que ao serem clicados, carregam um documento Web especificado. Tanto imagens como textos podem estar vinculados a um hyperlink. Hyperlink: Faz referncia a outras pginas Web, endereos de correio eletrnico e arquivos. O que significa H-T-M-L? HTML a abreviatura de "HyperText Mark-up Language"

Hyper o oposto de linear. Nos tempos antigos, os programas de computadores rodavam linearmente: quando o programa executava uma ao tinha que esperar a prxima linha de comando para executar a prxima ao e assim por diante de linha em linha. Com HTML as coisas so diferentes - voc pode ir de onde estiver para onde quiser. Exemplificando: no necessrio que voc tenha visitado o site MSN.com antes de visitar o site HTML.net. Text texto e nada mais. Mark-up significa marcao e o texto que voc escreve. Voc cria a marcao da mesma forma que escreve em um editor: seus cabealhos, marcadores, negrito, etc Language significa linguagem e exatamente o que HTML : uma linguagem.

XHTML (Extensible HyperText Mark-up Language) nada mais do que uma maneira mais bem estruturada de escrever HTML. O que so tags HTML? Tags so rtulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags tm o mesmo formato: comeam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferena entre elas que na tag de fechamento existe uma barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento ser processado segundo o comando contido na tag. Mas, como toda regra tem sua exceo, aqui no HTML a exceo que para algumas tags a abertura e o fechamento se d na mesma tag. Tais tags contm comandos que no necessitam de um contedo para serem processados, isto , so tags de comandos isolados, por exemplo, um pulo de linha conseguido com a tag <br />. Exemplo: a tag <h1> informa ao navegador que se trata de um cabealho e todo o contedo que estiver entre <h1> e </h1> deve ser mostrado em tamanho maior, significando o nvel de importncia do texto. As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabealho (h vem de "heading" - cabealho ), sendo <h1> o cabealho de primeiro nvel (maior) e <h6> o cabealho de sexto nvel e aquele apresentado com o menor tamanho de texto. Exemplo 2: <h1>Este um ttulo</h1> <h2>Este um sub ttulo</h2>

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

As tags devem ser escritas com letras maisculas ou minsculas? Para a maioria dos navegadores indiferente se voc usa maiscula, minscula ou mesmo uma mistura delas. <COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta usar minsculas. Ento, crie o hbito de escrever suas tags com minsculas. O que necessrio para construir um website: Um navegador e Um bloco de notas (ou um editor de texto similar). HTML simples e lgico. O navegador l HTML de modo idntico ao que voc l um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na pgina e termina com a ltima coisa a aparecer. A primeira coisa a fazer dizer ao navegador que voc vai "falar" com ele na linguagem HTML. Isto feito com a tag <html>. Ento, antes de qualquer coisa digite <html> na primeira linha do documento.
<html> uma tag de abertura e deve ser fechada com a tag de fechamento quando voc acabar de digitar

seu documento HTML. Para termos certeza que no iremos esquecer-nos de fechar a tag HTML, faa isso agora mesmo, digitando </html> localizada a algumas linhas abaixo, assim voc ir escrever seu documento entre as tags digitadas <html> e </html>. Como colocar contedo no meu website? Um documento HTML composto de duas partes: um head e um body. Na seo head voc escreve informaes sobre a pgina e na seo body voc coloca as informaes que constituem a pgina. Por exemplo, para dar um ttulo ao documento, ttulo este que aparea no topo da barra do navegador voc dever usar a seo"head". A tag para acresentar um ttulo <title>: Exemplo: <title>Minha primeira pgina web</title> O ttulo no aparece na pgina propriamente dita. Tudo o que voc quer que aparea na pgina contedo e dever ser colocado entre as tags "body". Queremos uma pgina dizendo: "Esta a minha primeira pgina web". Este o texto que queremos comunicar e ele dever ser colocado na seo body. Ento digite na seo body o seguinte: < body> </body> A letra p na tag <p> a abreviatura para "paragraph" (pargrafo) que exatamente o que o texto - um texto pargrafo. Seu documento HTML agora est como mostrado a seguir: <html>
<head> </head> <title>Minha primeira p&aacute;gina web</title> <p>Esta a minha primeira pgina web.</p>

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

<body> </body> </html> <p>Esta a minha primeira p&aacute;gina web</p>

Pronto! Voc acaba de construir seu primeiro website! Agora basta que voc salve seu trabalho no HD (com a extenso .html) e depois visualize no navegador. Coloque sempre o ttulo do seu documento na seo head: <title>Ttulo da sua pgina</title>. O ttulo <title> muito importante porque usado pelos mecanismos de busca (tais como o Google). Exemplos de Tags: <br /> Pula linha <hr /> Linha Horizontal <blockquote>Indentao</blockquote> Texto em movimento Para que o texto fique em movimento utiliza-se o elemento marquee. Este est em desuso! Exemplos: <html> <head> <title>Textos em movimento</title> <head> <body> <marquee behavior="scroll" width="30%">Texto.</marquee> <marquee behavior="slide" direction="right">Texto.</marquee> <marquee behavior="slide" direction="left">Texto.</marquee> <marquee behavior="slide" direction="up">Texto.</marquee> <marquee behavior="slide" direction="down">Texto.</marquee> <marquee behavior="slide" direction="right">Texto.</marquee> <marquee behavior="alternate">Texto</marquee> </body>

</html> Criao de Listas Existem dois tipos de listas: listas ordenadas e listas no ordenadas. O elemento ul cria uma lista no ordenada, em que cada item da lista inicia com um smbolo marcador. Este marcador pode ser modificado atravs do atributo type. O elemento ol cria uma lista ordenada, em que cada item da lista inicia com um nmero para organizar a lista. Este nmero pode ser modificado para algarismos romanos, por exemplo, atravs do atributo type.

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

O elemento li serve para indicar cada item da lista. possvel colocar uma lista dentro de outra lista, isso se chama listas aninhadas. Exemplos: Diferentes tipos de listas no ordenadas <html> <head> <title>Exemplo de listas n&atilde;o ordenadas</title> </head> <body> <h4>Lista com discos como marca:</h4> <ul type="disc"> <li>Bagaceira</li> <li>Aguardente de Medronho</li> <li>Cacha&ccedil;a</li> </ul> <h4>Lista com anis como marca:</h4> <ul type="circle"> <li>Bagaceira</li> <li>Aguardente de Medronho</li> <li>Cachaa</li> <li>Ginja com Elas</li> </ul> <h4>Lista com quadrados como marca:</h4> <ul type="square"> <li>Bagaceira</li> <li>Aguardente de Medronho</li> <li>Cachaa</li> <li>Ginja com Elas</li> </ul> </ul> </body> </html> Diferentes tipos de listas ordenadas <html> <head> <title>Exemplo</title> </head> <body> <h4>Lista Ordenada com nmeros:</h4> <ol> <li>Espinafres</li> <li>Ervilhas</li>

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

<li>Cenouras</li> <li>Alfaces</li> </ol> <h4>Lista Ordenada com letras maisculas:</h4> <ol type="A"> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol> <h4>Lista Ordenada com letras minsculas:</h4> <ol type="a"> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol> <h4>Lista Ordenada com nmeros romanos (maisculas):</h4> <ol type="I"> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol> <h4>Lista Ordenada com nmeros romanos (minsculas):</h4> <ol type="i"> <li>Espinafres</li> <li>Ervilhas</li> <li>Cenouras</li> <li>Alfaces</li> </ol> </body> </html> Exerccios 1. Enumere as colunas: a) Intranet b) www c) Protocolo IP d) Navegador ( ) utilizado para a comunicao atravs da rede Internet. o endereo de um computador em uma rede TCP/IP. ( ) o programa usado para visualizar a parte grfica da Internet. ( ) Rede de computadores privativa, utiliza as mesmas tecnologias da Internet ( ) um dos servios oferecidos pela Internet, a

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

e) Servidor Web f) Redes de Computadores g) Internet

parte grfica. Possibilita acesso simultneo a imagens, animaes, sons, vdeos e textos. ( ) uma rede de redes em escala mundial de milhes de computadores ( ) Programa que fornece o material apresentado pelo browser ( ) Consiste de dois ou mais computadores ligados entre si e compartilhando dados, impressoras, trocando mensagens (e-mails), etc.

2. Diga se as afirmaes so verdadeiras ou falsas. Se forem falsas, explique por qu. a. ( ) O atributo type, quando utilizado com um elemento ol, especifica um tipo de seqncia. b. ( ) Uma lista ordenada no pode ser aninhada dentro de uma lista no ordenada. c. ( ) XHTML a juno de XML com HTML. d. ( ) O elemento br representa uma quebra de linha e. ( ) Os hiperlinks so marcados com a tag <link> Justificativas: _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ _________________________________________________________________________________________________ 3. Preencha as lacunas em cada uma das afirmaes: a. O elemento ________ insere uma linha horizontal b. O sebrescrito marcado com o elemento _______, e o subscrito marcado com o elemento ________. c. O elemento de cabealho menos importante ____e o elemento mais importante de cabealho _____. d. O elemento ____ marca uma lista no-ordenada. e. O elemento ____ marca um pargrafo. f. Os comentrios de XHTML iniciam com <!--- e terminam com _____. g. Em XHTML os valores de atributos devem estar entre _____. 4. Utilize a XHTML para criar um documento para o seguinte texto. Fundamentos de Linguagens para Web Os conhecimentos relacionados Tecnologia da Informao so essenciais para se conquistar um lugar no mercado de trabalho atual. Segundo artigo divulgado pelo site UOL, daqui a cinco anos faltaro profissionais para atuar nessa rea. 5. Por que a seguinte marcao invlida? <p> Aqui tem um texto.... <hr /> <p> E aqui mais texto!!! </p> 6. Crie um documento XHTML que contenha uma lista ordenada de seus sites Web favoritos. A pgina deve conter o ttulo: Meus sites favoritos. 7. Crie um documento XHTML que contendo 3 listas ordenadas: sorvete, salada de frutas e iogurte gelado. Cada lista ordenada deve conter uma lista uma lista aninhada no ordenada e seus sabores e/ou frutas favoritas. Fornea no mnimo 3 sabores em cada lista no-ordenada.

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Imagens Insero de Imagens Para inserir uma imagem na pgina utilizamos: O elemento img para informar que se trata da insero de uma imagem. O atributo src para informar o caminho da imagem. O atributo alt para fazer uma descrio da imagem, quando a imagem no for aberta, esse texto ir aparecer. O atributo height indica a largura em que a imagem deve aparecer na pgina. Exemplo de sintaxe para insero de figura: <body> <img src=imagens/nomeDaImagem.jpg alt=Descriao da imagem width=28px height=50px> </body> Ajuste de imagens <body> <p><img alt="Caminho para pees" src="imagem/caminho.jpg" width= "75px" height="50px"><p> <p><img alt="Caminho para pees" src="imagem/caminho.jpg" width= "150px" height="100px"><p> <p><img alt="Caminho para pees" src="imagem/caminho.jpg" width= "300px" height="200px"><p> <p><b>Nota:</b> Para alterar o tamanho de uma imagem utilize os atributos "height" (altura) e "width" (largura). </body> Construo de links Para construir um link necessrio um elemento e um atributo: O elemento a indica que se trata de um link; O atributo href indica para onde ir quando o link for clicado.

Exemplo: <a href="http://www.google.com.br">Aqui um link para o Google</a> No exemplo acima o atributo href tem o valor "http://www.google.com.br", que o endereo completo do site Google e chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser includo nas URLs. A frase "Aqui um link para o Google" o texto mostrado no navegador como link. Lembre-se de fechar a tag com um </a>. Links dentro da prpria pgina Voc pode criar links internos, dentro da prpria pgina - por exemplo, uma tabela de contedos ou ndice com links para cada um dos captulos em uma pgina. Tudo o que voc precisa usar o atributo name e o smbolo "#".

10

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Use o atributo name para marcar o elemento que o destino do link. Por exemplo: <a name="menu"></a> Voc agora pode criar um link que leve quele elemento usando o smbolo "#" no atributo do link. O smbolo "#" informa ao navegador para ficar na mesma pgina que est. O smbolo "#" deve ser seguido pelo valor atribudo ao name para onde o link vai. Exemplo: <a href="#menu">Link para o cabealho 1</a> Links para e-mail Voc pode criar link para um endereo de e-mail. Isto feito de modo semelhante aos links para documentos. Exemplo: <a href="mailto:lucelia.com@gmail.com">Enviar e-mail para Professora Luclia</a> Ser renderizado no navegador assim: Enviar e-mail para Professora Luclia A nica diferena que no lugar do endereo do documento voc escreve mailto: seguido pelo endereo de e-mail. Quando o link clicado o programa de e-mail padro do usurio aberto com o endereo do link j digitado na linha para destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um programa de e-mail (como o Outlook Express) instalado na sua mquina. Imagens como Links Para substituir o texto clicvel por uma imagem clicvel, basta substituir o texto entre as tags <a> e </a> por uma imagem, como no exemplo abaixo: <a href="paginaDeDestino.html"><img src=imagens/nomeDaImagem.jpeg alt=Texto alternativo></a> EXERCCIOS Exerccio 01INSTRUES Criar uma pgina web contendo 3 imagens de cachorros da raa So Bernardo e uma breve descrio (caractersticas) sobre essa raa. Salvar a pgina com o nome: saobernardo.htm (NO COLOCAR ACENTUAO)

Exerccio 02INSTRUES Criar uma pgina web contendo 3 imagens de cachorros da raa Pastor Alemo e uma breve descrio (caractersticas) sobre essa raa. Salvar a pgina com o nome: pastoralemao.htm (NO COLOCAR ACENTUAO) Exerccio 03INSTRUES

11

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Criar uma pgina web contendo 3 imagens de cachorros da raa Cocker e uma breve descrio (caractersticas) sobre essa raa. Salvar a pgina com o nome: cocker.htm Exerccio 04INSTRUES Criar uma pgina web contendo 3 linkamentos para as pginas da raa So Bernardo, Pastor Alemo e Cocker. Contendo uma breve descrio sobre os cachorros e o ttulo da pgina como: index.htm. Seja criativo!! Salvar a pgina com o nome: guiaderacas.htm (NO COLOCAR ACENTUAO)

Tabelas Tabelas so usadas para apresentar "dados tabulares", isto , informao que deva ser apresentada em linhas e colunas, de forma lgica. Criar tabelas em HTML pode parecer complicado, mas, acompanhando passo a passo a explicao, ver que tudo evidente - tal como acontece com tudo no HTML. <table> <tr> <td>Clula 1</td>

<td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td> </tr> </table>

Ser renderizado no navegador assim: Clula 1 Clula 2 Clula 3 Clula 4 Consideraes: As tabelas constroem-se com o elemento <table>. As linhas da tabela obtm-se com o elemento <tr>. As clulas de dados criam-se com o elemento <td> Para que a apaream as linhas da tabela, use o atributo border.

Exemplos: <body> <h4>Uma coluna:</h4> <table border = "1"> <tr>

12

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

<td>100</td> </tr> </table> <h4>Uma linha e trs colunas:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Duas linhas e trs colunas:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> Decorao da tabela <body> <h4>Uma linha de fronteira normal, com um plano de fundo colorido: </h4> <table border="1" style="background-color:pink;"> <tr> <td>Primeira</td> <td>Linha</td> </tr> <tr> <td>Segunda</td> <td>Linha</td> </tr> </table> <h4>Uma linha de fronteira mais espessa com as clulas especficas coloridas:</h4> <table border="8"> <tr> <td style="background-color:yellow; color: red;" >Primeira</td> <td>Linha</td> </tr> <tr> <td>Segunda</td> <td style="background-color:yellow;"> Linha</td> </tr> </table>

13

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

<h4>Uma linha de fronteira muito espessa:</h4> <table border="15"> <tr> <td>Primeira</td> <td>Linha</td> </tr> <tr> <td>Segunda</td> <td>Linha</td> </tr> </table> </body> Utilizando elementos em uma tabela <body> <table border="1"> <tr> <td> <p>Isto uma frase</p> <p>Isto outa frase</p> </td> <td>Esta clula contm uma tabela: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Esta clula contm uma lista: <ul> <li>livros</li> <li>revistas</li> <li>jornais</li> </ul> </td> <td>Esta contem uma imagem <img src=imagem/magoo.gif> </td> </tr> <tr> <td>Esta contm apenas texto.<br/> </td> <td> Esta contem uma imagem que linka: <a href=pagina.htm><img src=imagem/magoo.gif></a>

14

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

</td> </table> </body> Mesclando linhas e colunas <body> <table border="1"> <tr> <td colspan="2">Colunas 1 e 2</td> </tr> <tr> <td>Linha 1, coluna 1</td><td>linha 1, coluna 2</td> <tr> <td>linha 2, coluna 1</td><td>linha 2 coluna 2</td> </tr> <tr> <td rowspan="3"> 3linhas</td><td>uma linha</td> </tr> <tr> <td> Duas linhas</td> <tr> <td>trs linhas</td> </tr> </table> </body> EXERCCIOS

INSTRUES Construa as tabelas a seguir: Cada exerccio uma pgina.

Exerccio 01-

Relao de alunos e notas Nome do Aluno Joaquim Pedro Maria Eduarda Pedro Henrique
Exerccio 02-

Matria Matemtica Fsica Qumica Portugus

Nota 7,0 6,5 10,0 4,0

Resultado Aprovado Aprovado Aprovado Reprovado

15

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Exerccio 03-

Quantidade de alunos por turma Curso Sistemas de Informao Sistemas de Informao Tecnologia de Informao
Exerccio 04-

Turma A B A

Nmero de alunos 35 25 45

Relao de Jogos Marca do game Nome do Jogo Mario Party Mario Kart Turok Bomberman Road Rash Tomb Raider 007 Gnero Aventura Corrida Aventura Aventura Corrida de moto Ao Ao

Nintendo 64

PlayStation

Exerccio 05-

reas e cursos da Faculdade Informtica Sistema de Informao Administrao Administrao de Empresas

Exerccio 06-

Tecnologia de Informao Administrao Hospitalar

Trabalhando imagens e links dentro de tabelamento 16

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Fazer um link para a pgina do exerccio 1

Clique na imagem ao lado e veja o exerccio 5.

Formulrios Um formulrio basicamente uma pgina Web com campos de entrada que permitem que voc envie informaes. Quando o formulrio enviado,tais informaes so empacotadas e enviadas a um servidor Web para serem processadas por uma outra aplicao Web. Quando o processo termina voc obtmoutra pgina Web com uma resposta. Exemplo: <html> <head> <title>Untitled</title> </head> <body> <form action="http://www.vqv.com.br/tratador.jsp"> <h1>Preencha seu curr&iacute;culo</h1> Nome do candidato:<br /> <input type="text" size="50" maxlength="3"/><br /><br /> Sexo:<br /> <input type="radio" name="sexo" value="M" />Masc<br /> <input type="radio" name="sexo" value="F" />Fem<br /><br /> &Aacute;reas de interesse:<br /> <input type="checkbox" />T&eacute;cnica<br /> <input type="checkbox" />Administrativa<br /> <input type="checkbox" />Recursos Humanos<br /><br /> Estado Civil:<br /> <select name="est_civil"> <option value="0">Escolha uma Op&ccedil;&atilde;o</option> <option value="1">Casado</option> <option value="2">Solteiro</option> </select> 17

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

<br /><br /> Resumo:<br /> <textarea name="comentario" cols="30" curr&iacuteculo</textarea><br /><br />

rows="20">Insira

aqui

um

resumo

do

seu

Escolha uma senha de acompanhamento: <br /> <input type="password" name="senha" size="25"/><br /><br /> Confirme sua senha:<br /> <input type="password" name="senha" size="25"/><br /><br /> </form> </body> </html> -------------------------------------------------------------------------------------------------------------------------------------Este cdigo ir resultar no formulrio abaixo:

18

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Exerccios Criar um Documento XHTML para apresentar e enviar para o servidor o formulrio abaixo:

Ficha de Inscrio
Nome do candidato: Endereo: CEP: Telefones: RG: Escolaridade: Curso: CPF: email: Senha de acompanhamento: Sexo: Masc. Fem.

_________________________________________________________________________________________ Observaes: Cidades: - Braslia - Taguatinga - Sobradinho - guas Claras UF: - DF - GO Escolaridade: - Ensino Fundamental - Ensino Mdio - Superior Incompleto - Superior Completo - Ps-Graduao Curso: - Web Design - Lgica de Programao - Java - Delphi

19

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Folhas de Estilo - CSS

O CSS (Cascading Style Sheets) - Folhas de Estilos em Cascata, permite projetar websites com uma tcnica completamente diferente da convencional e possibilita uma considervel reduo de tempo e trabalho. CSS uma linguagem para estilos que define o layout de documentos XHTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. O XHTML pode ser indevidamente usado para definir o layout de websites. Contudo, CSS proporciona mais opes e mais preciso e sofisticado. CSS suportado por todos os navegadores atuais. O XHTML usado para estruturar contedos. A CSS usado para formatar contedos estruturados. Para as necessidades de formatao de layouts, os fabricantes de navegadores (quela poca a Netscape e a Microsoft) inventaram novas tags HTML tais comoa tag <font> que se diferenciava das tags originais do HTML pelo fato de destinarse a layout e no estrutura. Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura, como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Voc precisa do navegador X para visualizar esta pgina" tornou-se comum nos websites. A CSS foi inventada para solucionar esta situao, colocando disposio dos web designers, meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo, a separao dos estilos de apresentao da marcao dos contedos, torna a manuteno dos sites bem mais fcil. Funcionamento da CSS Muitas das propriedades usadas em Cascading Style Sheets (CSS) so semelhantes quelas do HTML. Assim, se voc est acostumado a usar HTML para layout ir reconhecer muitos dos cdigos que usaremos. Vamos dar uma olhada em um exemplo concreto. Sintaxe bsica das CSS: Suponha que desejamos uma cor de fundo vermelha para a pgina web: Usando HTML podemos fazer assim: <body bgcolor="#FF0000"> Com CSS o mesmo resultado ser obtido assim: body {background-color: #FF0000;} Como voc pode notar os cdigos HTML e CSS so mais ou menos parecidos. O exemplo acima serve tambm para demonstrar o fundamento do modelo CSS:

20

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Onde colocar o cdigo CSS O cdigo CSS pode ser aplicado a um documento de trs maneiras distintas. O mtodo mais recomendado o mtodo externo. Mtodo 1: In-line (o atributo style) Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da pgina pode ser aplicada conforme mostrado a seguir: <html> <head> <title>Exemplo</title> </head> <body style="background-color: #FF0000;">
</body>

<p>Esta uma pgina com fundo vermelho</p>

</html> Mtodo 2: Interno (a tag style) Uma outra maneira de aplicar CSS pelo uso da tag <style> do HTML no cabealho do documento. Como mostrado a seguir: <html> <head> <title>Exemplo<title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta uma pgina com fundo vermelho</p>
</body>

</html> Mtodo 3: Externo (link para uma folha de estilos) O mtodo mais recomendado o de lincar para uma folha de estilos externa.

21

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Uma folha de estilos externa um simples arquivo de texto com a extenso .css. Tal como qualquer outro tipo de arquivo, voc pode colocar uma folha de estilos tanto no servidor como no disco rgido. Vamos supor, por exemplo, que uma folha de estilos tenha sido nomeada de style.css e est localizada no diretrio style. Tal situao est mostrada a seguir:

O "truque" criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link criado em uma simples linha de cdigo HTML como mostrado a seguir: <link rel="stylesheet" type="text/css" href="style/style.css" /> Observe que o caminho para a folha de estilos indicado no atributo href. Esta linha de cdigo deve ser inserida na seo header do documento HTML, isto , entre as tags <head> e </head>, conforme mostrado abaixo: <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ... Este link informa ao navegador para usar o arquivo CSS na renderizao e apresentao do layout do documento HTML. A coisa realmente inteligente disso que vrios documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo ser capaz de controlar a apresentao de muitos documentos HTML.

22

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

Esta tcnica pode economizar uma grande quantidade de trabalho. Se por exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita que voc edite manualmente uma a uma, as , para fazer a mudana nos 100 documentos HTML. Usando CSS a mudana se far em uns poucos segundos trocando-se a cor em uma folha de estilos central. style.css body { } index.html <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Minha primeira folha de estilos</h1>
</body> background-color: #FF0000;

</html> Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com a extenso apropriada (".css" e ".html") Exerccios CSS 1. Crie um Documento XHTML para inserir o CSS Inline abaixo e salve-o com o nome cssInline.html: <html> <head> <title>Exemplo</title> </head> <body style="background-color: #FF0000;">
</body>

<p>Esta uma pgina com fundo vermelho</p>

</html> 2. Crie um Documento XHTML para inserir o CSS Interno ou incorporado abaixo e salve-o com o nome cssInterno.html: <html> <style type="text/css"> <!-h1 {color: #0000FF; font-size: 30px; font-family: Comic Sans MS} p {text-indent: 1cm; background-color: yellow; font-family: arial} body {background-color:#00000F} --> </style> <head> <title> Meu primeiro style sheet</title> </head> <body> <h1>Meu primeiro style sheet</h1> <p>Agora terei o controle total!</p> </body>

23

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

</html> 3. Crie o seguinte documento externo para formatao, chamado de bsico.css a{text-decoration:none} Tira o sublinhado de todos os links a:link{color:green} Muda para verde a cor dos links ainda no visitados a:visited{color:brown} Muda para marrom a cor dos links j visitados a:hover{color:yellow} Muda para amarelo a cor dos links ao passar o mouse 4. Crie um Documento XHTML para inserir o CSS Externo abaixo e salve-o com o nome cssExterno.html: <html> <head> <title>Meu documento</title> <link rel="stylesheet" type="text/css" href="basico.css" /> </head> <body> <h2>Estes links est&atilde;o formatados de forma diferenciada da padro</h2> <a href="http://www.faceb.edu.br">FACEB</a> <br /> <br /> <a href="http://www.google.com">GOOGLE</a> </body> </html> OBS. A linha de comando em negrito, a que est chamando o arquivo CSS externo. Siga sempre este padro, mudando apenas o nome do arquivo CSS, no caso bsico.css 5. Coloque uma imagem de fundo no documento cssExterno.html, para isso salve uma imagem no mesmo diretrio dos seus arquivos e altere o arquivo basico.css, acrescentando: body { background-image: url("imagem.jpeg");
}

6. Faa com que a imagem se repita no fundo do documento XHTML, altere o arquivo basico.css, acrescentando: body { background-image: url("imagem.jpeg"); background-repeat: repeat; } 7. Faa com que a imagem permanea fixa, mesmo quando a barra de rolagem rolar para baixo ou para cima, altere o arquivo basico.css, acrescentando: Nota: para ver a funcionalidade deste exerccio, o texto dever ser grande, sendo necessrio o uso do scroll. body { background-image: url("imagem.jpeg"); background-repeat: no-repeat; background-attachment: fixed;
}

8. Faa com que a imagem role junto com o texto quando a barra de rolagem rolar para baixo ou para cima, altere o arquivo basico.css, mudando o atributo background-attachment para scroll: body { background-image: url("imagem.jpeg"); background-repeat: no-repeat; background-attachment: scroll;
}

24

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

9. Crie um Documento XHTML para chamar as trs pginas criadas anteriormente e salve-a com o nome index.html: 10. Retire o sublinhado de todos os links criados no exerccio 9. EXERCCIOS 2 Tomando como base um documento XHTML, introduza as modificaes propostas nos itens abaixo, na ordem sugerida. Para a realizao dos testes das diversas propriedades CSS, use uma referncia para consulta. Aps cada alterao, abrir o documento no navegador e verificar os resultados. 1. Alterar a cor de fundo de toda a pgina para azul. 2. Alterar a cor de fundo de um pargrafo para vermelho. Use uma classe como seletor. 3. Alterar a cor de fonte do mesmo pargrafo para branco. Use outra classe como seletor. 4. Na segunda classe criada, defina outra cor de fundo e verifique o resultado da precedncia. Desfaa esta ltima alterao. 5. Acrescente uma imagem de fundo que se repita ao longo de toda a pgina. 6. Acrescente uma propriedade que evite a repetio da imagem de fundo. 7. Faa a imagem de fundo repetir-se apenas horizontalmente. 8. Faa a imagem de fundo repetir-se apenas verticalmente. 9. Posicione a imagem de fundo no canto superior direito da janela. 10. Posicione a imagem de fundo no centro da janela, nas duas dimenses, usando a palavra reservada center. 11. Posicione a imagem de fundo a 20% do topo e a 30% da margem esquerda. 12. Defina a fonte de um pargrafo para 150px. 14. Decore um pargrafo com uma linha sobre suas linhas. 15. Decore outro pargrafo sublinhando-o. 17. Para as duas questes anteriores, repita o procedimento em apenas um trecho do pargrafo, usando o elemento <span>. 18. Justifique um dos pargrafos. 19. Centralize um dos pargrafos. 20. Em um dos pargrafos, force o recuo da primeira linha de texto em 100px. 21. Transforme todas as letras em minsculas em um pargrafo. 22. Transforme todas as letras em maisculas em um pargrafo.

25

FACULDADE CENECISTA DE BRASLIA - FACEB Linguagem de Programao I Professora Luclia

23. Transforme a primeira letra de cada palavra em maiscula de todo um pargrafo. 30. Defina bordas para o pargrafo anterior com 2px, estilo slido e cor preta; 31. Altere as bordas de outro pargrafo, fazendo com que cada um dos lados tenha um estilo, uma cor e uma espessura diferente de borda. 34. Defina as propriedades do pargrafo anterior width e height para 30% e 80% respectivamente. 35. Insira contedo nesse pargrafo de modo a extrapolar o tamanho definido. 36. Defina a propriedade overflow com o valor scroll e verifique a diferena.

26