Buscar

Conceitos de Redes de Computadores

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 24 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 24 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 24 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

XHTML / CSS 
Professora: Lucélia Alves de Oliveira 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2 
 
 
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 várias 
formas como os recursos de vários equipamentos interligados podem ser compartilhados, mediante meios de acesso, 
protocolos e requisitos de segurança. 
 
Internet: A Internet é uma rede de redes em escala mundial de milhões de computadores. Ao contrário do que se pensa 
comumente, Internet não é sinônimo de World Wide Web. Esta é parte daquela, sendo a World Wide Web, que utiliza 
hipermídia em sua formação básica, um dos muitos serviços oferecidos na Internet. A Web é um sistema de informação 
muito mais recente que emprega a Internet como meio de transmissão. 
 
www: Significa World Wide Web. É um dos serviços básicos da Internet, é a parte gráfica que possibilita acesso 
simultâneo a imagens, animações, sons, vídeos e textos. Sua maior característica é a possibilidade de navegação 
através dos "links". 
 
Intranet: É uma rede de computadores privativa que utiliza as mesmas tecnologias que são utilizadas na Internet. O 
protocolo de transmissão de dados de uma intranet é o TCP/IP e sobre ele podemos encontrar vários tipos de serviços 
de rede comuns na Internet, como, por exemplo, o e-mail, chat, grupo de notícias, HTTP, FTP entre outros. 
 
Extranet: Pode ser definida como um conjunto de duas ou mais intranets ligadas em rede. 
 
Protocolo IP: Significa em português, Protocolo Internet, e é utilizado para a comunicação através da rede Internet. Os 
dados são enviados em grupos intitulados "pacotes". Daí a designação de pacote IP. É o endereço de um computador 
em uma rede TCP/IP. Todo computador na Internet possui um endereço IP. Clientes têm um endereço IP permanente ou 
um que é atribuído dinamicamente a eles cada vez que eles conectam à rede. 
 
Host: Computador principal num ambiente de processamento distribuído ou o computador central que controla uma rede. 
Na Internet é qualquer computador ligado à rede, não necessariamente um servidor. 
 
Navegador: Também conhecido como browser. É o programa usado para visualizar a parte gráfica da Internet. Alguns 
exemplos: Netscape, Internet Explorer, Ópera. Navegadores com código aberto muito ágeis são o Mozilla e o Firefox. 
 
Provedor de Acesso à Internet: É uma empresa ou organização que oferece à seus clientes o acesso à Internet. Além 
de oferecer aos seus usuários o acesso à Internet, podem oferecer outros serviços adicionais, ou de valor agregado, 
relacionados: registro de domínios e hospedagem de páginas (Web-Hosting), contas de e-mail, são alguns exemplos 
destes serviços. 
 
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: Página inicial de um site da Web. Referenciado por um endereço eletrônico ou hiperlinks. É a página de 
apresentação da empresa. Escrita em HTML, pode conter textos, imagens, sons, ponteiros ou links para outras páginas 
ou outros servidores da Internet, etc. 
 
File Transfer Protocol (FTP): É um protocolo pra transferência de arquivos na Internet. É utilizado para fazer upload e 
download através do qual os arquivos são carregados e baixados. Muitos sites FTP na Internet restringem o acesso; 
somente os usuários autorizados e com senhas têm permissões para acessá-los. 
 
URL: É o endereço da página Web exibido na janela do navegador. Cada página está associada a um único URL. Os 
URLs normalmente iniciam com http: / / 
 
HTTP: Significa HyperText Transfer Protocol, é o padrão da indústria para transeferir documentos Web pela Internet. 
Vários métodos estão disponíveis para navegar entre os URLs diferentes. Em um método o usuário digita o URL de uma 
página no campo Endereço e pressiona a tecla Enter. Outra maneira de navegar pela Web é através dos elementos 
3 
 
visuais em páginas Web, através dos chamados hiperlinks que ao serem clicados, carregam um documento Web 
especificado. Tanto imagens como textos podem estar vinculados a um hyperlink. 
 
Hyperlink: Faz referência a outras páginas Web, endereços de correio eletrônico 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 ação tinha que esperar a próxima linha de comando para executar a próxima ação e 
assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode ir de onde estiver para onde 
quiser. Exemplificando: não é necessário que você tenha visitado o site MSN.com antes de visitar o site 
HTML.net. 
• Text é texto e nada mais. 
• Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve 
em um editor: seus cabeçalhos, 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 são tags HTML? 
Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. 
Todas as tags têm o mesmo formato: começam 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 
diferença 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 exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se 
dão na mesma tag. Tais tags contêm comandos que não necessitam de um conteúdo para serem processados, isto é, 
são 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 cabeçalho e todo o conteúdo que estiver entre <h1> e 
</h1> deve ser mostrado em tamanho maior, significando o nível de importância do texto. 
As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que se trata de um cabeçalho (h vem de 
"heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível (maior) e <h6> o cabeçalho de sexto nível e aquele 
apresentado com o menor tamanho de texto. 
Exemplo 2:
<h1>Este é um título</h1> 
<h2>Este é um sub título</h2> 
As tags devem ser escritas com letras maiúsculas ou minúsculas? 
Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas. 
<COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta é usar 
minúsculas. Então, crie o hábito de escrever suas tags com minúsculas.
4 
 
O que é necessário para construir um website: 
• Um navegador e 
• Um bloco de notas (ou um editor de texto similar). 
HTML é simples e lógico. O navegador lê HTML de modo idêntico 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 página 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>. Então, 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 não iremos esquecer-nos de fechar a tag HTML, faça 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 conteúdo nomeu website? 
 Um documento HTML é composto de duas partes: um head e um body. Na seção head você escreve 
informações sobre a página e na seção body você coloca as informações que constituem a página.
 Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você 
deverá usar a seção"head". A tag para acresentar um título é <title>: 
Exemplo: 
 <title>Minha primeira página web</title> 
 
 O título não aparece na página propriamente dita. Tudo o que você quer que apareça na página é conteúdo e 
deverá ser colocado entre as tags "body". 
Queremos uma página dizendo: "Esta é a minha primeira página web". Este é o texto que queremos comunicar 
e ele deverá ser colocado na seção body. Então digite na seção body o seguinte: 
< body> 
 <p>Esta é a minha primeira página web.</p> 
 </body>
A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é - um texto 
parágrafo. 
Seu documento HTML agora está como mostrado a seguir: 
 
<html> 
 
 <head> 
 <title>Minha primeira p&aacute;gina web</title> 
 </head> 
 
 <body> 
 <p>Esta é a minha primeira p&aacute;gina web</p> 
 </body> 
 
</html> 
 
Pronto! Você acaba de construir seu primeiro website! 
5 
 
Agora basta que você salve seu trabalho no HD (com a extensão .html) e depois visualize no navegador. 
Coloque sempre o título do seu documento na seção head: <title>Título da sua página</title>. O título <title> é muito 
importante porque é usado pelos mecanismos de busca (tais como o Google). 
Exemplos de Tags: 
<br /> Pula linha 
<hr /> Linha Horizontal 
<blockquote>Indentação</blockquote> 
 
Criação de Listas 
 Existem dois tipos de listas: listas ordenadas e listas não ordenadas. 
 O elemento ul cria uma lista não ordenada, em que cada item da lista inicia com um símbolo marcador. Este 
marcador pode ser modificado através do atributo type. 
 O elemento ol cria uma lista ordenada, em que cada item da lista inicia com um número para organizar a lista. 
Este número pode ser modificado para algarismos romanos, por exemplo, através do atributo type. 
 O elemento li serve para indicar cada item da lista. 
 É possível colocar uma lista dentro de outra lista, isso se chama listas aninhadas. 
Exemplos: 
Diferentes tipos de listas não 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 anéis como marca:</h4> 
 <ul type="circle"> 
 <li>Bagaceira</li> 
 <li>Aguardente de Medronho</li> 
 <li>Cachaça</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>Cachaça</li> 
 <li>Ginja com Elas</li> 
 </ul> 
6 
 
 
 </ul> 
 </body> 
</html> 
 
 
Diferentes tipos de listas ordenadas 
 
<html> 
 <head> 
 <title>Exemplo</title> 
 </head> 
 
 <body> 
 <h4>Lista Ordenada com números:</h4> 
 
 <ol> 
 <li>Espinafres</li> 
 <li>Ervilhas</li> 
 <li>Cenouras</li> 
 <li>Alfaces</li> 
 </ol> 
 
 <h4>Lista Ordenada com letras maiúsculas:</h4> 
 
 <ol type="A"> 
 <li>Espinafres</li> 
 <li>Ervilhas</li> 
 <li>Cenouras</li> 
 <li>Alfaces</li> 
 </ol> 
 
 <h4>Lista Ordenada com letras minúsculas:</h4> 
 
 <ol type="a"> 
 <li>Espinafres</li> 
 <li>Ervilhas</li> 
 <li>Cenouras</li> 
 <li>Alfaces</li> 
 </ol> 
 
 <h4>Lista Ordenada com números romanos (maiúsculas):</h4> 
 
 <ol type="I"> 
 <li>Espinafres</li> 
 <li>Ervilhas</li> 
 <li>Cenouras</li> 
 <li>Alfaces</li> 
 </ol> 
 
 <h4>Lista Ordenada com números romanos (minúsculas):</h4> 
 
 <ol type="i"> 
 <li>Espinafres</li> 
 <li>Ervilhas</li> 
 <li>Cenouras</li> 
 <li>Alfaces</li> 
 </ol> 
7 
 
 
 </body> 
</html> 
 
 
Exercícios 
 
1. Enumere as colunas: 
a) Intranet ( ) É utilizado para a comunicação através da 
rede Internet. É o endereço de um computador em 
uma rede TCP/IP. 
b) www ( ) É o programa usado para visualizar a parte 
gráfica da Internet. 
c) Protocolo IP ( ) Rede de computadores privativa, utiliza as 
mesmas tecnologias da Internet 
d) Navegador ( ) É um dos serviços oferecidos pela Internet, é a 
parte gráfica. Possibilita acesso simultâneo a 
imagens, animações, sons, vídeos e textos. 
e) Servidor Web ( ) É uma rede de redes em escala mundial de 
milhões de computadores 
f) Redes de Computadores ( ) Programa que fornece o material apresentado 
pelo browser 
g) Internet ( ) Consiste de dois ou mais computadores ligados 
entre si e compartilhando dados, impressoras, 
trocando mensagens (e-mails), etc. 
 
2. Diga se as afirmações são verdadeiras ou falsas. Se forem falsas, explique por quê. 
a. ( ) O atributo type, quando utilizado com um elemento ol, especifica um tipo de seqüência. 
b. ( ) Uma lista ordenada não pode ser aninhada dentro de uma lista não ordenada. 
c. ( ) XHTML é a junção de XML com HTML. 
d. ( ) O elemento br representa uma quebra de linha 
e. ( ) Os hiperlinks são marcados com a tag <link> 
 
Justificativas: 
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________ 
 
3. Preencha as lacunas em cada uma das afirmações: 
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 cabeçalho menos importante é____e o elemento mais importante de cabeçalho é _____. 
d. O elemento ____ marca uma lista não-ordenada. 
e. O elemento ____ marca um parágrafo. 
f. Os comentários 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 Informação são essenciais para se conquistar um lugar no 
mercado de trabalho atual. 
 
Segundo artigo divulgado pelo site UOL, daqui a cinco anos faltarão profissionais para atuar nessa área. 
8 
 
 
5. Por que a seguinte marcação é inválida? 
 <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 página deve conter 
o título: 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 não ordenada e seus sabores e/ou frutas favoritas. 
Forneça no mínimo 3 sabores em cada lista não-ordenada. 
 
Imagens 
 
Inserção de Imagens 
 
Para inserir uma imagem na página utilizamos: 
• O elemento “img” para informar que se trata da inserção de uma imagem. 
• O atributo “src” para informar o caminho da imagem. 
• O atributo “alt” é para fazer uma descrição da imagem, quando a imagem não for aberta, esse texto irá aparecer. 
• O atributo “height” indica a largura em que a imagem deve aparecer na página. 
 
Exemplo de sintaxe parainserção de figura: 
<body> 
<img src=”imagens/nomeDaImagem.jpg” alt=”Descriçao da imagem” width=”28px” height=”50px”> 
</body> 
 
Ajuste de imagens 
 
<body> 
<p><img alt="Caminho para peões" src="imagem/caminho.jpg" width= 
"75px" height="50px"><p> 
 
<p><img alt="Caminho para peões" src="imagem/caminho.jpg" width= 
"150px" height="100px"><p> 
 
<p><img alt="Caminho para peões" 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> 
 
 
Construção de links 
 
Para construir um link é necessário 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> 
 
9 
 
No exemplo acima o atributo href tem o valor "http://www.google.com.br", que é o endereço completo do site Google e é 
chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluído 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 própria página 
 
Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para 
cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo name e o símbolo "#". 
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 símbolo "#" no atributo do link. O símbolo "#" informa 
ao navegador para ficar na mesma página que está. O símbolo "#" deve ser seguido pelo valor atribuído ao name para 
onde o link vai. 
 
Exemplo: 
<a href="#menu">Link para o cabeçalho 1</a> 
 
Links para e-mail 
Você pode criar link para um endereço 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 Lucélia</a> 
Será renderizado no navegador assim: 
Enviar e-mail para Professora Lucélia
A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo endereço de e-mail. 
Quando o link é clicado o programa de e-mail padrão do usuário é aberto com o endereço do link já digitado na linha para 
destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de e-mail (como o Outlook Express) 
instalado na sua máquina. 
 
Imagens como Links 
 
Para substituir o texto clicável por uma imagem clicável, 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> 
 
EXERCÍCIOS 
Exercício 01- 
INSTRUÇÕES 
 
 Criar uma página web contendo 3 imagens de cachorros da raça São Bernardo e uma breve descrição 
(características) sobre essa raça. Salvar a página com o nome: saobernardo.htm (NÃO COLOCAR ACENTUAÇÃO) 
 
 
Exercício 02- 
INSTRUÇÕES 
 
10 
 
 Criar uma página web contendo 3 imagens de cachorros da raça Pastor Alemão e uma breve descrição 
(características) sobre essa raça. Salvar a página com o nome: pastoralemao.htm (NÃO COLOCAR 
ACENTUAÇÃO) 
 
Exercício 03- 
INSTRUÇÕES 
 
 Criar uma página web contendo 3 imagens de cachorros da raça Cocker e uma breve descrição (características) 
sobre essa raça. Salvar a página com o nome: cocker.htm 
 
Exercício 04- 
INSTRUÇÕES 
 
 Criar uma página web contendo 3 linkamentos para as páginas da raça São Bernardo, Pastor Alemão e Cocker. 
Contendo uma breve descrição sobre os cachorros e o título da página como: index.htm. Seja criativo!! Salvar a 
página com o nome: guiaderacas.htm (NÃO COLOCAR ACENTUAÇÃO) 
 
 
 
 
Tabelas 
 
Tabelas são usadas para apresentar "dados tabulares", isto é, informação que deva ser apresentada em linhas e colunas, 
de forma lógica. 
Criar tabelas em HTML pode parecer complicado, mas, acompanhando passo a passo a explicação, verá que tudo é 
evidente - tal como acontece com tudo no HTML. 
<table> 
 <tr> 
 <td>Célula 1</td> 
 <td>Célula 2</td> 
 </tr> 
 <tr> 
 <td>Célula 3</td> 
 <td>Célula 4</td> 
 </tr> 
</table> 
Será renderizado no navegador assim: 
Célula 1 Célula 2 
Célula 3 Célula 4 
 
Considerações: 
 
• As tabelas constroem-se com o elemento <table>. 
• As linhas da tabela obtêm-se com o elemento <tr>. 
• As células de dados criam-se com o elemento <td> 
• Para que a apareçam as linhas da tabela, use o atributo “border”. 
 
Exemplos: 
 
11 
 
<body> 
 <h4>Uma coluna:</h4> 
<table border = "1"> 
<tr> 
<td>100</td> 
</tr> 
</table> 
 
<h4>Uma linha e três colunas:</h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 
 
<h4>Duas linhas e três 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> 
 
Decoração 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 células específicas 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> 
12 
 
</table> 
 
<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 célula contém 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 célula contém 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 contém apenas texto.<br/> 
</td> 
<td> 
Esta contem uma imagem que linka: 
<a href=”pagina.htm”><img src=”imagem/magoo.gif”></a> 
</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>três linhas</td> 
</tr> 
</table> 
</body> 
 
EXERCÍCIOS 
 
 
INSTRUÇÕES 
 
Construa as tabelas a seguir: Cada exercício é uma página. 
 
Exercício 01- 
 
Relação de alunos e notas 
 
Nome do Aluno Matéria Nota Resultado 
 Joaquim Matemática 7,0 Aprovado 
 Pedro Física 6,5 Aprovado 
 Maria Eduarda Química 10,0 Aprovado 
 Pedro Henrique Português 4,0 Reprovado 
 
Exercício 02- 
 
 
 
13 
 
Exercício 03- 
 
Quantidade de alunos por turma 
 
Curso Turma Número de alunos 
Sistemas de Informação A 35 
Sistemas de Informação B 25 
Tecnologia de Informação A 45 
Exercício 04- 
 
Relação de Jogos 
 
Marca do game Nome do Jogo Gênero 
Mario Party Aventura 
Mario Kart Corrida 
Nintendo 64  Turok Aventura 
Bomberman Aventura 
Road Rash Corrida de moto 
Tomb Raider Ação PlayStation 
007 Ação 
 
 
 
Exercício 05- 
 
Áreas e cursos da Faculdade 
 
Informática 
Sistema de Informação Tecnologia de Informação 
Administração 
Administração de Empresas Administração Hospitalar 
 
Exercício 06- 
 
 
Trabalhando imagens e links dentro de tabelamento 
 
Fazer um link para a página 
do exercício 1Clique na imagem ao lado e 
veja o exercício 5. 
 
 
Formulários 
 
14 
 
15 
 
Um formulário é basicamente uma página Web com campos de entrada que permitem que você envie 
informações. Quando o formulário é enviado,tais informações são empacotadas e enviadas a um servidor Web 
para serem processadas por uma outra aplicação Web. Quando o processo termina você obtémoutra página 
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> 
 
 <br /><br /> 
 Resumo:<br /> 
<textarea name="comentario" cols="30" rows="20">Insira aqui um resumo do seu 
curr&iacuteculo</textarea><br /><br /> 
 
 
 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 código irá resultar no formulário abaixo: 
 
 
 
Exercícios 
 
Criar um Documento XHTML para apresentar e enviar para o servidor o formulário abaixo: 
 
Ficha de Inscrição 
 
Nome do candidato: 
 
Endereço: 
 
CEP: 
 
Telefones: 
 
RG: CPF: Sexo: Masc. Fem. 
 
16 
 
Escolaridade: email: 
 
Curso: Senha de acompanhamento: 
 
 
 
_________________________________________________________________________________________ 
 
Observações: 
 
Cidades: 
- Brasília 
- Taguatinga 
- Sobradinho 
- Águas Claras 
Escolaridade: 
- Ensino Fundamental 
- Ensino Médio 
- Superior Incompleto 
- Superior Completo 
- Pós-Graduação 
UF: 
- DF 
- GO 
 
Curso: 
- Web Design 
- Lógica de Programação 
- Java 
- Delphi 
 
 
 
 
 
17 
 
18 
 
 
Folhas de Estilo - CSS 
 
 
O CSS (Cascading Style Sheets) - Folhas de Estilos em Cascata, permite projetar websites com uma técnica 
completamente diferente da convencional e possibilita uma considerável redução 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 opções e é 
mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. 
O XHTML é usado para estruturar conteúdos. A CSS é usado para formatar conteúdos estruturados. 
Para as necessidades de formatação 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 destinar-
se a layout — e não à 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 página" tornou-se comum nos websites. 
A CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers, meios sofisticados de 
projetar layouts suportados por todos os navegadores. E ao mesmo tempo, a separação dos estilos de apresentação da 
marcação dos conteúdos, torna a manutenção dos sites bem mais fácil. 
Funcionamento da CSS 
Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML. Assim, se você 
está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que usaremos. Vamos dar uma olhada em 
um exemplo concreto. 
Sintaxe básica das CSS: 
Suponha que desejamos uma cor de fundo vermelha para a página 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 códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para 
demonstrar o fundamento do modelo CSS: 
 
Onde colocar o código CSS 
O código CSS pode ser aplicado a um documento de três maneiras distintas. O método mais recomendado é o método 
externo. 
Método 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 página pode ser aplicada conforme mostrado a seguir: 
<html>
 <head>
 <title>Exemplo</title>
 </head>
 <body style="background-color: #FF0000;">
 
 <p>Esta é uma página com fundo vermelho</p>
 </body>
</html> 
 
Método 2: Interno (a tag style) 
Uma outra maneira de aplicar CSS é pelo uso da tag <style> do HTML no cabeçalho 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 página com fundo vermelho</p>
 
 </body>
</html> 
 
Método 3: Externo (link para uma folha de estilos) 
O método mais recomendado é o de lincar para uma folha de estilos externa. 
Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como qualquer outro tipo de arquivo, 
você pode colocar uma folha de estilos tanto no servidor como no disco rígido. 
19 
 
Vamos supor, por exemplo, que uma folha de estilos tenha sido nomeada de style.css e está localizada no diretório 
style. Tal situação 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 código 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 código deve ser inserida na seção 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 renderização e apresentação do layout do documento HTML. 
A coisa realmente inteligente disso é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em 
outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos 
HTML. 
 
Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de 
um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma, as , para fazer a mudança nos 
100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de 
estilos central. 
20 
 
21 
 
style.css 
body {
 background-color: #FF0000;
}
 
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>
</html>
Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".html") 
Exercícios 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;">
 
 <p>Esta é uma página com fundo vermelho</p>
 </body>
</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> 
</html> 
 
 
3. Crie o seguinte documento externo para formatação, chamado de básico.css 
a{text-decoration:none} Æ Tira o sublinhado de todos os links 
a:link{color:green} Æ Muda para verde a cor dos links ainda não 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
22 
 
 
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 padrão</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 
padrão, mudando apenas o nome do arquivo CSS, no caso “básico.css” 
 
5. Coloque uma imagem de fundo no documento cssExterno.html, para isso salve uma imagem no mesmo 
diretório dos seus arquivos e altere o arquivo basico.css, acrescentando: 
body { 
 background-image: url("imagem.jpeg");
} 
 
6. Faça 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. Faça com que a imagem permaneça 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 exercício, o texto deverá ser grande, sendo necessário o uso do scroll. 
 body { 
 background-image: url("imagem.jpeg"); 
 background-repeat: no-repeat; 
 background-attachment: fixed;
} 
 
8. Faça 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;
 } 
 
9. Crie um Documento XHTML para chamar as três páginas criadas anteriormente e salve-a com o nome 
index.html: 
 
10. Retire o sublinhado de todos os links criados no exercício 9. 
 
 
EXERCÍCIOS 2 
 
 
23 
 
Tomando como base um documento XHTML, introduza as modificações propostas nos itens abaixo, na ordem sugerida. 
Para a realização dos testes das diversas propriedades CSS, use uma referência para consulta. Após cada alteração, 
abrir o documento no navegador e verificar os resultados. 
 
1. Alterar a cor de fundo de toda a página para azul. 
 
2. Alterar a cor de fundo de um parágrafo para vermelho. Use uma classe como seletor. 
 
3. Alterar a cor de fonte do mesmo parágrafo para branco. Use outra classe como seletor. 
 
4. Na segunda classe criada, defina outra cor de fundo e verifique o resultado da precedência. Desfaça esta última 
alteração. 
 
5. Acrescente uma imagem de fundo que se repita ao longo de toda a página. 
 
6. Acrescente uma propriedade que evite a repetição da imagem de fundo. 
 
7. Faça a imagem de fundo repetir-se apenas horizontalmente. 
 
8. Faça 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 dimensões, 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 parágrafo para 150px. 
 
14. Decore um parágrafo com uma linha sobre suas linhas. 
 
15. Decore outro parágrafo sublinhando-o. 
 
17. Para as duas questões anteriores, repita o procedimento em apenas um trecho do parágrafo, usando o elemento 
<span>. 
 
18. Justifique um dos parágrafos. 
 
19. Centralize um dos parágrafos. 
 
20. Em um dos parágrafos, force o recuo da primeira linha de texto em 100px. 
 
21. Transforme todas as letras em minúsculas em um parágrafo. 
 
22. Transforme todas as letras em maiúsculas em um parágrafo. 
 
23. Transforme a primeira letra de cada palavra em maiúscula de todo um parágrafo. 
 
30. Defina bordas para o parágrafo anterior com 2px, estilo sólido e cor preta; 
 
31. Altere as bordas de outro parágrafo, fazendo com que cada um dos lados tenha um estilo, uma cor e uma 
espessura diferente de borda. 
 
34. Defina as propriedades do parágrafo anterior width e height para 30% e 80% respectivamente. 
 
35. Insira conteúdo nesse parágrafo de modo a extrapolar o tamanho definido. 
 
36. Defina a propriedade overflow com o valor scroll e verifique a diferença. 
24 
 
 
 
 
	O que significa H-T-M-L? 
	O que são tags HTML? 
	As tags devem ser escritas com letras maiúsculas ou minúsculas? 
	Exercício 01- 
	Exercício 02- 
	Exercício 03- 
	Exercício 04- 
	 
	Exercício 01- 
	Exercício 02- 
	Exercício 03- 
	Exercício 04- 
	Nintendo 64
	Exercício 05- 
	Exercício 06- 
	Funcionamento da CSS 
	Sintaxe básica das CSS: 
	Método 1: In-line (o atributo style) 
	Método 2: Interno (a tag style) 
	Método 3: Externo (link para uma folha de estilos) 
	style.css 
	 
	index.html

Outros materiais