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
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
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
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
Continue navegando
Prévia do material em texto
1
HTML e CSS
Introdução
HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de
Hypertexto. De maneira simples, pode-se dizer que o o HTML é uma linguagem para
publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer coisa
(imagem,texto, vídeo, áudio ou qualquer outro elemento criado).
Os navegadores precisam de um código que “explique” ou traduza aquilo que o desenvolvedor
queira que seja apresentado ao usuário.
Para que se possam exibir as informações desejadas com a formatação, é necessário que cada
trecho de texto tenha uma marcação indicando qual é o significado dele.
Essas marcações são chamadas de Tags.
Ex: <html>, <head>, <body> <meta> <h1> <ul> entre outras.
Um dos principais objetivos do HTML é facilitar a manipulação do elemento possibilitando o
desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira
que seja transparente para o usuário final.
Ao contrário das versões anteriores, o HTML fornece ferramentas para a CSS e o Javascript
fazerem seu trabalho da melhor maneira possível. O HTML permite por meio de suas APIs a
manipulação das características destes elementos, de forma que o website ou a aplicação
continue leve e funcional.
O CSS é uma ferramenta para o designer web, que permite reutilização de código com mais
semântica e menos código.
Estrutura fundamental do HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
2
Inserindo título
<!DOCTYPE html>
<html>
<head><title> Nome do título </title>
</head>
<body>
</body>
</html>
Inserindo o idioma do site (Português Brasil)
<!DOCTYPE html>
<html lang=”pt-br”>
<head><title> Nome do título </title>
</head>
<body>
</body>
</html>
Para encontrar a listagem de códigos das linguagens, acesse:
http://www.w3.org/International/questions/qa-choosing-language-tags.
Informando que o site usará os caracteres do Português do Brasil
<!DOCTYPE html>
<html lang=”pt-br”>
<head><title> Nome do título </title>
<meta charset=”utf-8”> <!-- meta especial, sem fechamento -->
</head>
<body>
</body>
</html>
O Doctype
O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
<!DOCTYPE html!>
O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual
versão do HTML deve ser utilizada para renderizar a página. Utilizaremos<!DOCTYPE html>,
que indica para o navegador a utilização da versão mais recente do HTML - a versão 5,
atualmente.
Há muitos comandos complicados nessa parte de DOCTYPE que eram usados em versões
anteriores do HTML e do XHTML. Hoje em dia, nada disso é mais importante. O recomendado
é sempre usar a última versão do HTML, usando a declaração de DOCTYPE simples:
<!DOCTYPE html>
3
A tag HTML
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de
outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.
<html lang=”pt-br”>
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do
documento.
A tag HEAD
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados.
Metadados são informações sobre a página e o conteúdo ali publicado.
A tag Metatag Charset
Metatag responsável por chavear qual tabela de caractéres a página está utilizando.
<meta charset=”utf-8”>
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8”>
A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o
acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por
isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode.
A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região
ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com o maior
número de caracteres possível. Atualmente a maioria dos sistemas e browsers utilizados por
usuários suportam plenamente Unicode. Por isso, fazendo o sistema usando Unicode é
garantido que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.
A tag <body>
A tag <body> contém o corpo do site, que é exibido pelo navegador em sua janela. É
necessário que o <body> tenha ao menos um elemento "filho", ou seja, uma ou mais tags
HTML dentro dele.
<!DOCTYPE html>
<html lang=”pt-br”>
<head><title> Nome do título </title>
<meta charset=”utf-8”> </head>
<body>
<h1> texto qualquer </h1>
</body>
</html>
4
Nesse exemplo, usamos a tag <h1>, que indica um título dentro do corpo da página.
Principais Tags do HTML
O HTML é composto de diversas tags, cada uma com sua função e significado. O HTML , então,
adicionou muitas novas tags, que veremos ao longo do curso.
Nesse momento, vamos focar em tags que representam títulos, parágrafo e ênfase.
Títulos
Quando queremos indicar que um texto é um título em nossa página, utilizamos as tags de
heading em sua marcação:
<h1> Título 1 </h1>
<h2> Título 2 </h2>
As tags de heading são tags de conteúdo e vão de <h1> a <h6>, seguindo a ordem de
importância, sendo <h1> o título principal, o mais importante, e <h6> o título de menor
importância.
Utilizamos, por exemplo, a tag <h1> para o nome, título principal da página, e a tag <h2> como
subtítulo ou como título de seções dentro do documento.
A ordem de importância, além de influenciar no tamanho padrão de exibição do texto, tem
impacto nas ferramentas que processam HTML. As ferramentas de indexação de conteúdo
para buscas, como o Google, Bing ou Yahoo! levam em consideração essa ordem e relevância.
Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de
maneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento.
Parágrafos
Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre
conteúdo de alguma tag filha da tag <body>. A marcação mais indicada para textos comuns é a
tag de parágrafo:
<p>Nenhum item na sacola de compras.</p>
Se você tiver vários parágrafos de texto, use várias dessas tags <p> para separá-los:
<p>Um parágrafo de texto.</p>
<p>Outro parágrafo de texto.</p>
Marcações de ênfase
Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as
marcações de ênfase. Podemos deixar um texto "mais forte" com a tag <strong> ou deixar o
texto com uma "ênfase acentuada" com a tag <em>. Também há a tag <small>, que diminui o
tamanho do texto.
5
Por padrão, os navegadores renderizarão o texto dentro da tag <strong> em negrito e o texto
dentro da tag <em> em itálico. Existem ainda as tags <b> e <i>, que atingem o mesmo
resultado visualmente, mas as tags <strong> e <em> são mais indicadas por definirem nossa
intenção de significado ao conteúdo, mais do que uma simples indicação visual.
<p>Compre suas roupas e acessórios na <strong>Mirror Fashion</strong>.</p>
Imagens
A tag <img> define uma imagem em uma página HTML e necessita de dois atributos
preenchidos: src e alt. O primeiro aponta para o local da imagem e o segundo, um texto
alternativo para a imagem caso essa não possa ser carregada ou visualizada.
O HTML 5 introduziu duasnovas tags específicas para imagem: <figure> e <figcaption>. A tag
<figure> define uma imagem com a conhecida tag <img>. Além disso, permite adicionar uma
legenda para a imagem por meio da tag <figcaption>.
O atributo title poderá ser utilizando dentro da tag <img> para definição de legenda (que
aparece sempre que o mouse é posicionado sobre a imagem).
<figure>
<img src="img/produto1.png" alt="Foto do produto">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
Lista de Exercícios 1
1) Escreva, em HTML, o código para a estrutura fundamental de uma página web.
2) Insira, no código do exercício 1, o atributo que informa ao navegador que a
página será do Brasil.
3) Insira, no código do exercício 2, a tag que informa ao navegador que os
caracteres a serem exibidos na página serão os do Português do Brasil.
4) Insira o título “Lista 1” na página que você criou após a finalização do exercício
3.
5) Digite o texto abaixo no corpo da sua página:
HTML e CSS
Flávio Félix
Crie páginas elegantes de forma simples! HTML e CSS, quando bem utilizados, podem ser o sucesso de um projeto e, com
os novos recursos, muito do que antes era trabalhoso agora não é mais. Aprenda as melhores técnicas para escrever seu
site através de exemplos práticos de funcionalidades úteis do cotidiano. Construa menus, aplique efeitos, estilize elementos
visuais, melhore a semântica da sua página e muito mais!
6
6) Para o texto digitado no exercício 5, utilize a tag <h1> para o título: “HTML e
CSS” e a tag <h2> para o autor: “Flávio Félix”. Coloque também um parágrafo
no início do texto: “Crie páginas elegantes... e muito mais!” Coloque as palavras
“HTML” e “CSS” do texto em itálico e a palavra “semântica” em negrito.
7) Baixe no portal do aluno a imagem “mao_fundo_transparente.JPG”.
Insira a imagem após o texto que você apresentou no exercício 6. Insira
também uma legenda para a imagem que será exibida sempre que o mouse
passar sobre ela.
Estilizando com CSS
Quando escrevemos o HTML, marcamos o conteúdo da página com tags que melhor
representam o significado daquele conteúdo. Aí quando abrimos a página no navegador é
possível perceber que o navegador mostra as informações com estilos diferentes.
Um h1, por exemplo, fica em negrito numa fonte maior. Parágrafos de texto são espaçados
entre si, e assim por diante. Isso quer dizer que o navegador tem um estilo padrão para as tags
que usamos. Mas, claro, pra fazer sites bonitões vamos querer customizar o design dos
elementos da página.
Antigamente, isso era feito no próprio HTML. Se quisesse um título em vermelho, era só fazer:
<h1><font color="red">Título do H1</font></h1>
Além da tag font, várias outras tags de estilo existiam. Mas isso é passado. Tags HTML para
estilo são má prática hoje em dia e jamais devem ser usadas.
Em seu lugar, surgiu o CSS, que é uma outra linguagem, separada do HTML, com objetivo único
de cuidar da estilização da página. A vantagem é que o CSS é bem mais robusto que o HTML
para estilização, como veremos. Mas, principalmente, escrever formatação visual misturado
com conteúdo de texto no HTML se mostrou algo bem impraticável. O CSS resolve isso
separando as coisas.
7
Sintaxe e inclusão de CSS
A sintaxe do CSS tem estrutura simples: é uma declaração de propriedades e valores separados
por um sinal de dois pontos ":", e cada propriedade é separada por um sinal de ponto e vírgula
";" da seguinte maneira:
background-color: yellow;
color: blue;
O elemento que receber essas propriedades será exibido com o texto na cor azul e com o
fundo amarelo. Essas propriedades podem ser declaradas de três maneiras diferentes.
Atributo style
A primeira delas é como um atributo style no próprio elemento:
<p style="color: blue; background-color: yellow;">
O conteúdo desta tag será exibido em azul com fundo amarelo no navegador!
</p>
Mas tínhamos acabado de discutir que uma das grandes vantagens do CSS era manter as
regras de estilo fora do HTML. Usando esse atributo style não parece que fizemos isso.
Justamente por isso não se recomenda esse tipo de uso na prática, mas sim os que veremos a
seguir.
A tag style
A outra maneira de se utilizar o CSS é declarando suas propriedades dentro de uma tag
<style>.
Como estamos declarando as propriedades visuais de um elemento em outro lugar do nosso
documento, precisamos indicar de alguma maneira a qual elemento nos referimos. Fazemos
isso utilizando um seletor CSS. É basicamente uma forma de buscar certos elementos dentro
da página que receberão as regras visuais que queremos.
No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e
background:
8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nome do título</title>
<style>
p {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<p>
O conteúdo desta tag será exibido em azul com fundo amarelo!
</p>
<p>
<strong>Também</strong> será exibido em azul com fundo amarelo!
</p>
</body>
</html>
O código anterior da tag <style> indica que estamos alterando a cor e o fundo de todos os
elementos com tag p. Dizemos que selecionamos esses elementos pelo nome de sua tag, e
aplicamos certas propriedades CSS apenas neles.
Arquivo externo
A terceira maneira de declararmos os estilos do nosso documento é com um arquivo externo,
geralmente com a extensão .css. Para que seja possível declarar nosso CSS em um arquivo à
parte, precisamos indicar em nosso documento HTML uma ligação entre ele e a folha de estilo.
Além da melhor organização do projeto, a folha de estilo externa traz ainda as vantagens de
manter nosso HTML mais limpo e do reaproveitamento de uma mesma folha de estilos para
diversos documentos.
A indicação de uso de uma folha de estilos externa deve ser feita dentro da tag <head> do
nosso documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nome do título</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>
O conteúdo desta tag será exibido em azul com fundo amarelo!
</p>
<p>
<strong>Também</strong> será exibido em azul com fundo amarelo!
</p>
</body>
</html>
9
E dentro do arquivo estilos.css colocamos apenas o conteúdo do CSS:
p {
color: blue;
background-color: yellow;
}
Propriedades tipográficas e fontes
Da mesma maneira que alteramos cores, podemos alterar o texto. Podemos definir fontes com
o uso da propriedade font-family.
h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
p {
font-family: monospace;
}
Alinhamento e decoração de texto
Já vimos uma série de propriedades que determinam o estilo do tipo (fonte). Vamos conhecer
algumas maneiras de alterarmos as disposições dos textos.
Uma das propriedades mais simples, porém muito utilizada, é a que diz respeito ao
alinhamento de texto: a propriedade text-align.
p {
text-align: right;
}
O exemplo anterior determina que todos os parágrafos da nossa página tenham o texto
alinhado para a direita. Também é possível determinar que um elemento tenha seu conteúdo
alinhado ao centro ao definirmos o valor center para a propriedade text-align, ou então definir
que o texto deve ocupar toda a largura do elemento aumentandoo espaçamento entre as
palavras com o valor justify. O padrão é que o texto seja alinhado à esquerda, com o valor left,
porém é importante lembrar que essa propriedade propaga-se em cascata.
Imagem de fundo
A propriedade background-image permite indicar um arquivo de imagem para ser exibido ao
fundo do elemento. Por exemplo:
body{
background-image: url(mao_fundo_transparente.jpg);
10
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 800px 600px;
}
Com essa declaração, o navegador vai requisitar um arquivo nome_do_arquivo.jpg, que deve
estar na mesma pasta do arquivo CSS onde consta essa declaração. Irá retirar a repetição da
imagem, posicionará a imagem ao centro de maneira fixa.
Bordas
As propriedades do CSS para definirmos as bordas de um elemento nos apresentam uma série
de opções. Podemos, para cada borda de um elemento, determinar sua cor, seu estilo de
exibição e sua largura. Por exemplo:
h1 {
border-color: red;
border-style: solid;
border-width: 6px;
}
Para que o efeito da cor sobre a borda surta efeito, é necessário que a propriedade border-
style tenha qualquer valor diferente do padrão none.
Exemplo de valores para a propriedade border-style:
Dotted;
Double;
Solid;
Conseguimos fazer também comentários no CSS usando a seguinte sintaxe:
/* deixando o fundo dourado */
body {
background: gold;
}
Lista de Exercícios 2
Esta lista deverá ser resolvida considerando a saída da lista de Exercícios 1 (utilize o
código em HTML desenvolvido na lista 1).
1) Estilize o título do texto usando o atributo style. Coloque o texto em Vermelho
e o fundo na cor preta (ou então utilize as cores que você preferir).
2) Refaça o exercício 1 utilizando agora a tag style em vez do atributo style.
3) Agora refaça novamente o exercício 1, porém, crie uma folha de estilo para
estilizar o título do texto (Coloque o texto em Vermelho e o fundo na cor preta
- ou então utilize as cores que você preferir).
11
4) Utilizando folhas de estilo, altere a fonte do parágrafo “Crie páginas elegantes...
e muito mais!” para a fonte “Verdana”.
5) Utilizando folhas de estilo, coloque todo o fundo da página na cor verde (ou na
cor que você preferir).
6) Utilizando folhas de estilo, centralize a imagem que você inseriu na sua página.
7) Utilizando folhas de estilo, diminua a imagem que você inseriu na sua página.
O Elemento Div
O nome div vem de divisão, e esta tag permite dividir qualquer trecho do código. Você pode
criar um bloco, uma divisão, e dentro deste bloco ter uma imagem, links, textos e o que mais
você quiser.
E qual a vantagem disso? Você vai poder aplicar o CSS nesse bloco, e tudo que estiver dentro
da div, seja imagem, texto, link ou o que mais for, vai receber aquelas regras de estilo.
É bem comum dizer que a tag <div> é um container para armazenar diversos elementos.
As divs são importantes para estruturar, criar uma ordem lógica e organizar um site.
Você cria uma div para o cabeçalho, outra para o conteúdo, outra div para os menus e uma
última para o rodapé, então usa o CSS para estilizar cada uma dessas divs separadamente.
Você também poderá criar outras divisões dentro destas divs.
Por exemplo, na <div> do conteúdo, você terá uma região com o título e talvez alguma
imagem, que você queria chamar de "cabecalho-conteudo", pois é o cabeçalho do conteúdo.
Ou seja, você definiu uma região no site, depois outras sub-regiões.
A sintaxe da tag div é:
<div>
Todo, qualquer e quantos
elementos do HTML você queira
colocar aqui.
</div>
Exemplo:
<body>
<div id="Div1">
</div>
</body>
12
Vamos agora criar nossa folha de estilos CSS.
Nosso arquivo CSS, estilo.css, fica:
#Div1 {
width: 100px;
height: 200px;
background-color: red;
border-style: solid;
border-color: green;
}
Links HTML
Para indicarmos que um trecho de um texto se refere a outro conteúdo, seja ele no mesmo
documento ou em outro endereço, utilizamos a tag de âncora <a>.
Existem dois diferentes usos para as âncoras. Um deles é a definição de links:
<p>
Visite o site da <a href="http://www.facpoli.edu.br">Faculdade
Politécnica</a>.
</p>
Note que a âncora está demarcando apenas as palavras "Faculdade Politécnica" de todo o
conteúdo do parágrafo exemplificado. Isso significa que, ao clicarmos com o cursor do mouse
nas palavras " Faculdade Politécnica ", o navegador redirecionará o usuário para o site
da Faculdade Politécnica, indicado no atributo href.
Outro uso para a tag de âncora é a demarcação de destinos para links dentro do próprio
documento, o que chamamos de bookmark.
<p>Mais informações <a href="#info">aqui</a>.</p>
<p>Conteúdo da página...</p>
<h2 id="info">Mais informações sobre o assunto:</h2>
<p>Informações...</p>
De acordo com o exemplo acima, ao clicarmos sobre a palavra "aqui", demarcada com um link,
o usuário será levado à porção da página onde o bookmark "info" é visível. Bookmark é o
elemento que tem o atributo id.
13
O atributo target
O atributo target permite abrir uma nova janela ou moldura ("frame") diferente daquela em
que se clicou.
O target _blank é útil em especial para links externos ou seja, o visitante abre o link de outro
site, mas a janela atual não se fecha.
Lista de exercícios
1) Implemente a seguinte lista não ordenada utilizando HTML e CSS.
o Facebook;
o Google;
o Youtube;
o Faculdade Politécnica;
2) Crie um link para cada um dos elementos da lista do exercício 1 (O link deverá
direcionar o site correspondente ao nome do elemento da lista. Além disse o link
deverá ser aberto na mesma guia do navegador).
3) Repita o exercício 2, porém faça com que cada link abra em uma nova guia do
navegador.
4) Crie duas páginas em HTML. Uma deverá se chamar index.html e a outra
informacoes.htm. Em seguida, siga as instruções do professor que serão dadas em sala
de aula.
14
index.html
15
informações.html
Listas HTML
Não são raros os casos em que queremos exibir uma listagem em nossas páginas. O HTML tem
algumas tags definidas para que possamos fazer isso de maneira correta. A lista mais comum é
a lista não-ordenada.
<ul>
<li>Primeiro item da lista</li>
<li>
Segundo item da lista:
<ul>
<li>Primeiro item da lista aninhada</li>
<li>Segundo item da lista aninhada</li>
</ul>
</li>
<li>Terceiro item da lista</li>
</ul>
Note que, para cada item da lista não-ordenada, utilizamos uma marcação de item de lista<li>.
No exemplo acima, utilizamos uma estrutura composta na qual o segundo item da lista contém
uma nova lista. A mesma tag de item de lista <li> é utilizada quando demarcamos uma lista
ordenada.
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
<li>Quarto item da lista</li>
<li>Quinto item da lista</li>
</ol>
16
As listas ordenadas também podem ter sua estrutura composta por outras listas ordenadas
como no exemplo que temos para as listas não-ordenadas. Também é possível ter listas
ordenadas aninhadas em um item de uma lista não-ordenada e vice-versa.
Existe um terceiro tipo de lista que devemos utilizar para demarcar um glossário, quando
listamos termos e seus significados.Essa lista é a lista de definição.
<dl>
<dt>HTML</dt>
<dd>
HTML é a linguagem de marcação de textos utilizada
para exibir textos como páginas na Internet.
</dd>
<dt>Navegador</dt>
<dd>
Navegador é o software que requisita um documento HTML
através do protocolo HTTP e exibe seu conteúdo em uma
janela.
</dd>
</dl>
Tabelas
Tabelas
Páginas 489 à 494 – Capítulo 18
Livro: HTML 5 e CSS 3
Autores: Elizabeth Castro e Bruce Hyslop
Sétima edição.
Editora: Alta Books
HTML
Principais tags
<table> </table> Tag para criar uma tabela
<tr> </tr> Tag para criar um linha
<td> </td> Tag para criar uma coluna
<th> </th> Tag que substitui a criação de uma coluna (usada para títulos de colunas).
17
Principais atributos
Colspan Atributo para mesclar colunas.
Rowspan Atributo para mesclar linhas
CSS
Exemplos:
table, tr, td, th {border:solid; padding:5px;}
th {background-color:#999;}
Exemplo 1
Código HTML
18
Código CSS
Exemplo 2
Código HTML
Código CSS
19
Exemplo 3
Código HTML
Código CSS
20
Exemplo 4
Código HTML
Código CSS
21
Exemplo 5
Código HTML
22
Código CSS
Exemplo 6
23
Código HTML
Código CSS
24
T1- Trabalho sobre tabelas
Valor: 10 pontos.
1°) Implemente o código em HTML e em CSS para criação da tabela abaixo:
2°) Implemente o código em HTML e em CSS para criação da tabela abaixo:
ID – Identificadores de tags
Para estilizarmos apenas algumas tags de uma mesma categoria podemos utilizar o
identificador ID.
Sintaxe no HTML
<TAG id=”nome_do_id”> xxxxx </TAG>
A tag deverá ser estilizada no css por meio do caracter “#”.
Sintaxe no CSS
#nome_do_id{
}
Exemplo:
Trecho de um código HTML
<body>
<div id="div1">
</div>
<div >
</div>
<div id="div2">
</div>
</body>
Trecho de um código CSS
#div1{
Margin: 50px 100px;
width:300px;
height:140px;
background-color:yellow;
border:3px dotted black;
}
#div2{
Margin: 100px 200px;
Width50px;
height:70px;
background-color:blue;
border:3px solid red;
}
1
CSS - FLUTUANDO ELEMENTOS (FLOATS)
Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float. Isto
significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento
(ou do bloco container)
A figura a seguir ilustra o princípio de float:
Um texto pode ser posicionado em volta de uma figura como mostrado abaixo, basta
flutuarmos a imagem:
2
1. Como isto é feito?
O HTML para o exemplo acima é mostrado a seguir:
<body>
<img src="livros.jpg">
<h1>Uma imagem Flutuada...</h1>
<p>Ciência da computação é o estudo dos algoritmos, suas aplicações e de sua
implementação, na forma de software, para execução em computadores eletrônicos. Desempenha
um papel importante, na área de Ciência da computação, a formalização matemática de
algoritmos, como forma de representar problemas recidiveis, i.e., os que são susceptíveis
de redução a operações elementares básicas, capazes de serem reproduzidas através de um
qualquer dispositivo mecânico/eletrônico capaz de armazenar e manipular dados. Um destes
dispositivos é o computador digital, de uso generalizado, nos dias de hoje. Também de
fundamental importância para a área de ciência da computação são as metodologias e
técnicas ligadas à implementação de software que abordam a especificação, modelagem,
codificação, teste e avaliação de sistemas de software. Os estudos oriundos da Ciência da
computação podem ser aplicados em qualquer área do conhecimento humano em que seja
possível definir métodos de resolução de problemas baseados em repetições previamente
observadas. Avanços recentes na ciência da computação tem impactado fortemente a sociedade
contemporânea, em particular as aplicações relacionadas às áreas de redes de computadores,
Internet, Web e computação móvel que têm sido utilizadas por bilhões de pessoas ao redor
do globo.</p>
</body>
Para conseguir o efeito mostrado, basta definir uma largura para o box que o contém e declarar para
ele float: left;
img {
float:left;
width: 100px;
}
Valores mais utilizados na proprieda float: Left e Right;
2. Outro exemplo : colunas
Floats podem ser usados para construir colunas em um documento. Para criar as
colunas estruturamos as colunas no código HTML usando <div> como mostrado a seguir:
<html>
<meta charset=”utf-8">
<head>
<title>Entendendo flutuação de elementos...</title>
<link rel="stylesheet" href="exe_B_CSS.css" type="text/css" />
</head>
<body>
<h1>Exemplo de Formatação de Colunas com CSS</h1>
3
<div id="column1">
<p>Ciência da computação é o estudo dos algoritmos, suas aplicações e de sua
implementação, na forma de software, para execução em computadores eletrônicos. Desempenha
um papel importante, na área de Ciência da computação, a formalização matemática de
algoritmos, como forma de representar problemas recidiveis, os que são susceptíveis de
redução a operações elementares básicas, capazes de serem reproduzidas através de qualquer
dispositivo mecânico/eletrônico capaz de armazenar e manipular dados. Um destes
dispositivos é o computador digital, de uso generalizado, nos dias de hoje.</p>
<p>Ciência da computação é o estudo dos algoritmos, suas aplicações e de sua
implementação, na forma de software, para execução em computadores eletrônicos. Desempenha
um papel importante, na área de Ciência da computação, a formalização matemática de
algoritmos, como forma de representar problemas recidiveis, os que são susceptíveis de
redução a operações elementares básicas, capazes de serem reproduzidas através de qualquer
dispositivo mecânico/eletrônico capaz de armazenar e manipular dados. Um destes
dispositivos é o computador digital, de uso generalizado, nos dias de hoje. Também de
fundamental importância para a área de ciência da computação são as metodologias e
técnicas ligadas à implementação de software que abordam a especificação, modelagem,
codificação, teste e avaliação de sistemas de software.</p>
</div>
<div id="column2">
<p>Ciência da computação é o estudo dos algoritmos, suas aplicações e de sua
implementação, na forma de software, para execução em computadores eletrônicos. Desempenha
um papel importante, na área de Ciência da computação, a formalização matemática de
algoritmos, como forma de representar problemas recidiveis, i.e., os que são susceptíveis
de redução a operações elementares básicas, capazes de serem reproduzidas através de
qualquer dispositivo mecânico/eletrônico capaz de armazenar e manipular dados. Um destes
dispositivos é o computador digital, de uso generalizado, nos dias de hoje.</p>
<p>Ciência da computação é o estudo dos algoritmos, suas aplicações e de sua
implementação, na forma desoftware, para execução em computadores eletrônicos. Desempenha
um papel importante, na área de Ciência da computação, a formalização matemática de
algoritmos, como forma de representar problemas recidiveis, os que são susceptíveis de
redução a operações elementares básicas, capazes de serem reproduzidas através de qualquer
dispositivo mecânico/eletrônico capaz de armazenar e manipular dados. Um destes
dispositivos é o computador digital, de uso generalizado, nos dias de hoje. Também de
fundamental importância para a área de ciência da computação são as metodologias e
técnicas ligadas à implementação de software que abordam a especificação, modelagem,
codificação, teste e avaliação de sistemas de software.</p>
</div>
<div id="column3">
<p>Ciência da computação é o estudo dos algoritmos, suas aplicações e de sua
implementação, na forma de software, para execução em computadores eletrônicos. Desempenha
um papel importante, na área de Ciência da computação, a formalização matemática de
algoritmos, como forma de representar problemas recidiveis, os que são susceptíveis de
redução a operações elementares básicas, capazes de serem reproduzidas através de qualquer
dispositivo mecânico/eletrônico capaz de armazenar e manipular dados. Um destes
dispositivos é o computador digital, de uso generalizado, nos dias de hoje. Também de
fundamental importância para a área de ciência da computação são as metodologias e
técnicas ligadas à implementação de software que abordam a especificação, modelagem,
codificação, teste e avaliação de sistemas de software.</p>
<p>Ciência da computação é o estudo dos algoritmos, suas aplicações e de sua
implementação, na forma de software, para execução em computadores eletrônicos. Desempenha
um papel importante, na área de Ciência da computação, a formalização matemática de
algoritmos, como forma de representar problemas recidiveis, os que são susceptíveis de
redução a operações elementares básicas, capazes de serem reproduzidas através de qualquer
dispositivo mecânico/eletrônico capaz de armazenar e manipular dados. Um destes
dispositivos é o computador digital, de uso generalizado, nos dias de hoje.</p>
</div>
4
</body>
</html>
A seguir definimos a largura de cada coluna, por exemplo, 33%, e declaramos float: left; para
cada uma das colunas:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
float pode ser declarado left, right ou none.
Resultado:
Tag
<form></form>
Geralmente os formulários são estruturados entro de tabelas
Tags
<table></table>
<tr></tr>
<td></td>
Campos de um formulário
Existem vários tipos de campos e elementos que podem ser utilizados na construção
de um formulário.
Exemplos:
Campo de texto simples
Menu drop-dow
Botões radio
Campo de comentários
Botão para enviar dados
Botão para limpar os campos
Atributos utilizados para manipulação de campos e elementos
Atributos Funções Valores
name Atribui um nome ao
campo. É por meio deste
atributo que podemos
capturar os dados e
manipulá-los.
Qualquer nome que não inicie
com símbolos ou números, e que
não contenha caracteres
especiais (ç), nem acentos ou
espaços.
value Atribui um valor
predefinido ao campo
Qualquer tipo de valor. Por
exemplo: frases ou números.
maxlenght Determina o valor
máximo de caracteres
que um campo irá
suportar.
Números inteiros maiores que
zero.
rows Determina a quantidade
de linhas em uma área
de texto.
Números inteiros maiores que
zero.
cols Determina a quantidade
de colunas em uma área
de texto.
Números inteiros maiores que
zero.
disabled Desabilita um campo ou
área de texto,
impossibilitando ao
usuário inserir dados.
Valor disabled, em português
desativado.
checked Este atributo é aplicável
a caixas de seleção e a
botões do tipo rádio, e
quando for aplicado, a
opção já aparece
selecionada.
Valor checked, em português
verificado/marcado/selecionado.
type Define o tipo do campo
ou elemento do
formulário.
button (botão), checkbox (caixa
de seleção), password (campo
de senha), radio (botão radio),
reset (botão que limpa o
formulário), submit (botão que
envia o formulário), text (campo
de texto).
Tags para campos e elementos de formulários
Tags
<input>
<select></select>
<option></option>
<textarea> </textarea>
Campo de texto
Um campo de texto é criado com a tag <input> e seu tipo é definido pelo atributo type.
Obs.: É importante nomeá-lo com o atributo name para podemos capturar os dados e
manipulá-los.
Exemplo:
<form>
<input type="text" name="nome_do_usuario">
</form>
Campo de senha
A única diferença entre um campo de senha e um de texto é que no campo de senha
os caracteres são protegidos, ou seja, o navegador exibe asteriscos ou bolinhas em vez
dos caracteres.
Para criar um campo de senha defina o valor do comando type para password.
Exemplo:
<form>
<input type="password" name="senha_do_usuario">
</form>
Caixa de seleção
São caixas que possibilitam ao usuário selecionar uma ou mais opções. Para criar uma
caixa de seleção atribua o valor checkbox ao comando type.
Exemplo de um conjunto de caixas de seleção para coleta da resposta de uma
pergunta:
<form>
De que frutas você gosta? <br >
<input type="checkbox" name="uva" value="uva">Uva <br >
<input type="checkbox" name="maca" value="maca">Maçã <br >
<input type="checkbox" name="melancia" value="melancia">Melancia
</form>
Botões de seleção radio
Um conjunto destes botões permite ao usuário selecionar apenas uma opção. Para a
criação destes botões atribua o valor radio ao comando type.
Exemplo de um conjunto de botões radio para coleta da resposta de uma pergunta:
<form>
Você tem carro? <br>
<input type="radio" name="carro" value="sim">Sim <br>
<input type="radio" name="carro" value="nao">Não
</form>
Observe que neste tipo de botão de seleção o comando name de todas as opções deve
ter o mesmo valor.
No caso da caixa de seleção e dos botões radio, o valor a ser enviado é o valor do
comando value.
Botões com função indefinida
Esse tipo de botão não tem uma função definida em um formulário, a mesma deve ser
estabelecida através de outra linguagem de programação como Java script. Para a
criação destes botões atribua o valor button ao comando type.
Exemplo:
<form>
<input type="button" name="meu_botao" value="Clique aqui!">
</form>
Neste caso o valor do comando value é o texto do botão.
Botões enviar e limpar
Esses botões têm a função de enviar ou limpar um formulário. Para a criação de botões
de envio atribua o valor submit ao comando type, e para criar botões para limpar o
formulário atribua o valor reset ao comando type.
Exemplo:
<form>
<input type="reset" name="botao_limpar" value="Limpar"/>
<input type="submit" name="botao_enviar" value="Enviar"/>
</form>
Como no caso acima, o valor do comando value é o texto do botão.
Áreas de texto
A diferença de uma área de texto para um campo de texto é que na área de texto se
tem a opção de escrever em mais de uma linha, e quando a texto ocupa uma região
maior que a estabelecida para a área, aparecem barras de rolagem.
Áreas de texto são ideais paraformulários de e-mail e comentários por comportarem
uma quantidade de texto maior que os campos de texto. Para criar uma área de texto
utilize a tag <textarea>.
Exemplo:
<form>
<textarea name="minha_area_de_texto" rows="12" cols="50"></textarea>
</form>
Neste caso para predefinir um valor a uma área de texto apenas escreva o texto entre
as tags <textarea> e </textarea>
Exemplo:
<form>
<textarea name="minha_area_de_texto" rows="12" cols="50">Escreva
aqui!</textarea>
</form>
Menu drop-down
Tem a função semelhante aos botões radio, pois permitem apenas a escolha de uma
única opção. Sua utilização é recomendada quando se tem um número muito grande
de opções de resposta.
Para criar um menu drop-down utilize a tag <select> e para criar cada uma das opções
utilize a tag <option>.
Exemplo:
<form>
Qual é o seu estado? <br >
<select name="estado">
<option>RS</option>
<option>SC</option>
<option>PR</option>
<option>RJ</option>
<option>SP</option>
</select>
</form>
Exemplo de formulário utilizando tabela para estruturação
<h1>Faça login</h1>
<form>
<table>
<tr>
<td>
Nome:
</td>
</tr>
<tr>
<td>
<input type="text" name="nome_do_usuario">
</td>
</tr>
<tr>
<td>
Senha:
</td>
</tr>
<tr>
<td>
<input type="password" name="senha_do_usuario">
</td>
</tr>
<tr>
<td>
<input type="submit" name="botao" value="Entrar">
</td>
</tr>
</table>
</form>
Exercício
Desenvolva o formulário abaixo utilizando o conteúdo visto na aula de hoje.
Introdução ao Java Script
Quando utilizamos apenas HTML e CSS obtemos documentos ESTÁTICOS, sem
interação com o usuário, como caixas de diálogo e validação de entrada de dados.
O nome JavaScript foi inicialmente motivo de confusão devido a semelhança com o
nome da linguagem Java, mas estas duas tecnologias não estão diretamente
relacionadas. Ou seja, JavaScript não é uma implementação especial da Java ou é
baseado nesta última.
Essa é chamada uma “linguagem do lado cliente” por que sua execução se dá
diretamente no browser, independente de servidor.
Inserindo o código Javascript na página HTML
Os códigos Javascript podem ser inseridos na página HTML de duas formas:
Interno no documento: para inserir o código direto na estrutura do HTML, utilizamos as
tags <script></script>, conforme mostra a Listagem 1.
Listagem 1: Inserindo código Javascript interno no HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//código Javascript
</script>
</head>
<body>
</body>
</html>
Externo ao documento: o código Javacript também pode ser mantido em um arquivo
separado do HTML. Para isso, deve-se referenciar tal arquivo na página, como vemos
na listagem a seguir.
Listagem 2: Referenciando código Javacript em arquivo externo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="meuArquivo.js"></script>
</head>
<body>
</body>
</html>
O arquivo deve ser salvo com a extensão .JS e sua estrutura é a mesma utilizada quando
o código é posto internamente no documento.
Cabe aqui uma observação importante: a tag <script> requer a tag de fechamento
separada, não podendo ser fechada em si própria como <script type=.. />.
Sintaxe da linguagem Javascript
Javascript foi criada com base na ECMAScript e sua sintaxe é bastante semelhante a
linguagens de alto nível muito utilizadas como C e Java, como veremos a seguir.
Usando variáveis
Essa linguagem possui tipagem dinâmica, ou seja, não é necessário definir o tipo das
variáveis ao declará-las, para isso basta usar a palavra reservada “var”. A seguir temos
alguns exemplos de utilização de variáveis.
Listagem 3: Utilizando variáveis
var nome;
nome = “Fulano de Tal”;
var idade = 30;
idade = 30 + 20 - 10*5;
Trabalhando com funções
Javascript fornece também suporte a funções, aliado às facilidades da tipagem
dinâmica, o que torna a definição de métodos simples e prática. Para criar funções,
utilizamos a palavra reservada “function”.
As funções podem receber parâmetros e retornar valores, mas o tipo de retorno e o tipo
dos parâmetros não precisa ser previamente definido. A seguir temos exemplos de
funções com e sem parâmetros e retorno.
Listagem 4: Função em Javascript sem parâmetro e sem retorno
function exibirMensagem()
{
alert(“Olá, seja bem vindo(a)!”);
}
Observação: a função alert serve para exibir uma mensagem popup para o usuário.
Listagem 5: Função em Javascript com parâmetro e com retorno
function somar(A, B)
{
return A + B;
}
Para definir o valor de retorno da função, deve-se utilizar a palavra reservada “return”
seguida do valor ou expressão do resultado.
Estruturas de controle de fluxo
Assim como a maioria das linguagens de alto nível, Javascript possui estruturas
condicionais e de repetição para controle de fluxo. A seguir temos a sintaxe e um
exemplo de uso de tais estruturas.
Listagem 6: Sintaxe da estrutura IF-ELSE
if(condição 1)
{
//ação se condição 1 verdadeira
}
else if (condição 2)
{
//ação se condição 2 verdadeira
}
else
{
//ação se nenhuma das condições for verdadeira
}
O bloco ELSE pode ser omitido, caso apenas uma condição precise ser avaliada. A
Listagem 7 mostra um exemplo onde uma variável chamada idade é avaliada e,
dependendo do seu valor, uma mensagem é exibida na tela.
Listagem 7: Exemplo de uso da estrutura IF-ELSE
if(idade > 18)
{
alert(“É maior de idade”).
}
else
{
alert(“É menor de idade”);
}
Listagem 8: Sintaxe da estrutura WHILE
while(condição)
{
//ações
}
A estrutura de repetição while é usada para executar um conjunto de ações enquanto
uma condição for verdadeira. Quando a condição se tornar falsa, o bloco é finalizado. A
seguir temos um exemplo que exibe uma mensagem para o usuário enquanto uma
variável for menor que 5.
Listagem 9: Sintaxe da estrutura WHILE
var contador = 0;
while(contador < 5)
{
alert(“Olá”);
contador = contador + 1;
}
Uma outra estrutura muito semelhante é a DO-WHILE, que executa um bloco de ações
até que uma condição seja falsa. Porém, essa condição é avaliada após a execução dos
comandos, fazendo com que estes sejam executados pelo menos uma vez.
Listagem 10: Sintaxe da estrutura DO-WHILE
do
{
//ações
}
while(condição)
O mesmo exemplo da Listagem 10, usando o DO-WHILE poderia ser representado
como na listagem a seguir.
Listagem 11: Exemplo de uso da estrutura DO-WHILE
var contador = 0;
do
{
alert(“Olá”);
contador = contador + 1;}
while(contador < 5)
Por último, temos o comando FOR, que usa um contador para executar um bloco de
ações uma determinada quantidade de vezes.
Listagem 12: Sintaxe da estrutura FOR
for(inicialização; condição; complemento)
{
//ações
}
O entendimento dessa estrutura fica mais fácil se observarmos um exemplo prático. Na
Listagem 13, uma variável “contador” é inicializada com o valor zero, e enquanto for
menor que 10, o laço for deve ser executado.
Listagem 13: Exemplo da estrutura FOR
var contador;
for(contador = 0; contador < 10; contador++)
{
alert(contador);
}
Exibindo mensagens para o usuário com Javascript: Alert
A linguagem Javascript possui um número imenso de funções nativas que precisariam
de vários artigos para serem explicadas detalhadamente. Aqui, serão mostradas apenas
algumas das mais utilizadas por quem está iniciando os estudos.
A primeira função apresentada é a alert, que serve para exibir uma mensagem em uma
janela popup. Essa função recebe apenas um parâmetro, que é o texto a ser exibido.
Listagem 14: Exemplo da função alert
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
alert("Olá mundo!.")
</script>
</head>
<body>
</body>
</html>
Salvando o conteúdo da listagem acima como um arquivo de extensão HTML, ao abri-
lo no browser teríamos o como resultado uma mensagem como a mostrada na Figura 1.
Figura 1: Exemplo de uso da função alert
Em seguida, temos a função prompt, que também abre uma janela popup, mas com uma
caixa de texto para coletar informações do usuário. O retorno dessa função é o texto
digitado.
Listagem 15: Exemplo da função alert
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
var nome;
nome = prompt("Qual é seu nome?");
alert("Olá, " + nome);
</script>
</head>
<body>
</body>
</html>
Nesse caso, o valor retornado pela função prompt foi atribuído a uma variável chamada
“nome”, que é utilizada em seguida na função alert para saudar o usuário.
Figura 2: Exemplo de uso da função prompt
Manipulando eventos
A linguagem Javascript também permite trabalhar com eventos dos elementos HTML
como botões e caixas de texto. Eventos são disparados quando alguma ação é
executada, como o clique e num botão ou a digitação de valores em um input.
No código Javascript pode-se atribuir valores aos eventos como se fossem
propriedades, desde que o valor atribuído seja um código a ser executado. Por exemplo,
a listagem a seguir mostra o código de uma página com um botão que, ao ser clicado,
exibe uma mensagem (alert).
Listagem 16: Exemplo de tratamento de evento
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onclick="alert('Você clicou no botão');">clique aqui</button>
</body>
</html>
Vale notar que nesse caso as tags <script> não foram necessárias, pois o código
encontra-se dentro do próprio button. Outro ponto a ser observado é que foram usadas
aspas duplas para definir o código e aspas simples no interior do mesmo, quando
precisamos escrever um texto dentro de um evento.
Caso o código a ser executado no evento seja muito extenso, é possível criar uma
função para isso e associá-la ao evento em questão. Basta informar, no lugar do código,
o nome da função (com parâmetros, caso existam). Na Listagem 17 temos um exemplo
desse tipo.
Listagem 17: Exemplo de tratamento de evento usando função
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
function clique_botao()
{
alert("Você clicou no botão");
}
</script>
</head>
<body>
<button onclick="clique_botao();">clique aqui</button>
</body></html>
Figura 3: Tratamento de evento onclick do botão
Entradas externas (Usuário)
prompt("Mensagem"," ");
Conversões numéricas
parseInt( );
parseFloat( );
Retornar uma variável de uma função
return();
Lista de exercícios
Utilize funções javascript em arquivo externo para resolver os exercícios
abaixo.
1) Mostrar uma mensagem na tela (Mensagem: Hello World!).
2) Somar dois números passados como parâmetro fixo e apresentar o resultado
na tela. (Mensagem: O resultado da soma é: <resultado>).
3) Somar dois números inteiros passados pelo usuário e apresentar o resultado
na tela (Mensagem: O resultado da soma é: <resultado>).
4) Somar dois números reais passados pelo usuário e apresentar o resultado na
tela (Mensagem: O resultado da soma é: <resultado>).
5) Somar dois números inteiros passados pelo usuário e apresentar o resultado
quando o usuário clicar no botão SOMAR.Materiais relacionados
352 pág.
39 pág.
116 pág.
Perguntas relacionadas
