Fundamentos de Programação WEB
Jean Morais
[email protected]
[email protected]
Fundamentos de Programação WEB
Jean Morais
-Analise de Sistemas (Graduação)
-MBA Gestão Empreendedora de Negócios
Coordenador e Professor do Curso técnico “Objetivo”
Coordenador de informática – área pedagógica
Recursos, auditório, audiovisual
Professor da AES, Sistemas de Informação e
Tecnológicos.
Fundamentos de Programação WEB
Ambiente Web
A criação de site para web requer uma análise precisa da visão e das
necessidades que o cliente deseja passar. Deve-se criar um layout onde o
visitante possa se localizar com relação à exposição do conteúdo, o qual
possua um agradável visual para transmitir uma visão profissional de todo o
site. Seu papel principal é transmitir a sua importância perante o mundo físico
e mostrar os serviços oferecidos.
Para se criar um site de boa qualidade e que num futuro próximo possa trazer
um retorno satisfatório, o profissional deve dedicar-se inteiramente ao projeto,
dando vida às suas idéias e exercitando bastante a sua criatividade. A idéia
deverá ajudar a responder algumas questões como:
Prof. Jean Morais
Fundamentos de Programação WEB
Qual o objetivo da criação do site?
Qual o público alvo que o site pretende alcançar?
O serviço que será oferecido pelo site terá público alvo? Por quê?
O site poderá atrair pessoas diferentes? Quais? Quais as áreas de interesse?
Quais as tecnologias que serão utilizadas para o desenvolvimento do projeto?
Quais as informações que serão utilizadas? E com que freqüência?
Será necessário obter dados do cliente? O que será preciso e porquê?
Quem hospedará e dará manutenção ao site?
Qual o planejamento para a divulgação do site?
Qual o planejamento para daqui a no mínimo 5 anos? O que se esperará e
porquê?
Prof. Jean Morais
Fundamentos de Programação WEB
Depois da análise das questões, o resultado será um grande esboço com as
informações necessárias ao projeto. Com a idéia estabelecida, é hora de
definir o caminho que o site tomará, identificando as suas funcionalidades e
como o usuário poderá interagir com ele.
Usabilidade
Estrutura do Design
Layout e uso das Cores
Hiperlink
Prof. Jean Morais
Fundamentos de Programação WEB
Usabilidade
Usabilidade define-se coloquialmente como a facilidade de utilização, seja de
um site na web, seja de uma aplicação de informática ou qualquer outro
sistema que interaja com o utilizador.
As principais etapas que compõem a projeção e o desenvolvimento de um site são:
o design da página, o design do conteúdo e o design do site. Sem ter esses
conhecimentos aprofundados o profissional pode passar uma visão errada, ou
mesmo, prejudicar a imagem verdadeira que o site deveria transmitir.
Para resolver esse tipo de questionamento, abordaremos alguns critérios de
usabilidade com a maior simplicidade possível. O design da página, o design do
conteúdo e design do site serão desmembrados em vários outros fatores, os quais
obedecidos resultaram numa maior satisfação por parte do usuário.
Prof. Jean Morais
Fundamentos de Programação WEB
• O design da página consiste no visual de um site na web. É onde analisamos
todos os aspectos envolvendo a estrutura do design para o site (se o design
comportará a página inteira, o uso de recursos visíveis a qualquer plataforma,
qualquer área de tela, se é necessário o uso de novas tecnologias, etc).
• O design do conteúdo consiste na preparação do material escrito que vai ser
inserido na página e como ele será exposto ao público. Deve-se fazer uma
análise do conteúdo, da escrita, das cores e formas que podem ajudar ao leitor
à melhor compreensão, e se é necessário o uso de animação ou qualquer outro
atrativo inovador.
• O design do site consiste na arte gráfica de todo o site e analisa os critérios
de navegação e as diferenças de design entre a homepage e as páginas
interiores. No ponto de vista da usabilidade, o design do site oferece mais
desafios e geralmente também é mais importante do que o design da página.
Prof. Jean Morais
Fundamentos de Programação WEB
Jean Morais
[email protected]
[email protected]
Fundamentos de Programação WEB
Estrutura do Design
O design se torna um fator imprescindível para se alcançar o sucesso, pois é
através dele que se faz com que o usuário se interesse pelos serviços prestados.
Existem três fatores que devem ser observados durante o desenvolvimento de
um site: a simplicidade, o conteúdo e a velocidade.
* A simplicidade significa que o design deve ser simples, organizado e com
cores suaves, usando com moderação figuras e sons. Isso manterá a página clara
e objetiva, tornando-a agradável visualmente.
* O conteúdo é a palavra chave para que o usuário fique satisfeito durante a
visita ao site, por isso o ideal é manter um conteúdo útil e de fácil localização.
Prof. Jean Morais
Fundamentos de Programação WEB
* Com relação à velocidade de navegação, é importante frisar que um grande
erro é perder tempo utilizando as tecnologias do mercado para a criação de
efeitos mirabolantes, pois freqüentemente o uso desses efeitos tornam o site
pesado, e isso dificulta muito a navegação, conseqüentemente, o afastamento
por parte do usuário.
Para ser um bom designer é preciso ter algumas qualidades primordiais, como:
um bom senso de observação, um bom conhecimento de cores, de alinhamento,
de proporção, de contraste, de legibilidade, de usabilidade, de unidade, de
impacto e de harmonia entre os elementos.
Existem alguns princípios básicos de design para a melhor maneira de colocar
as informações na página web:
Prof. Jean Morais
Fundamentos de Programação WEB
* Proximidade:
Segundo o princípio de proximidade, itens relacionados entre si devem ser
agrupados e aproximados uns dos outros, para que sejam vistos como um
conjunto coeso e não como um emaranhado de partes sem ligação. Quando
elementos similares são agrupados em uma unidade, a página fica mais
organizada. É possível saber por onde começar a leitura e onde terminá-la.
* Alinhamento:
Segundo o princípio de alinhamento, nada deve ser colocado arbitrariamente em
uma página. Cada item deve ter uma conexão visual nas páginas.
Prof. Jean Morais
Fundamentos de Programação WEB
* Repetição:
O princípio de repetição afirma que algum aspecto do design deve repetir-se no
material inteiro. Mesmo que o documento tenha apenas uma página, a repetição
dos elementos ajuda a organizar as informações.
* Contraste:
O contraste é uma das maneiras mais eficazes de acrescentar algum atrativo
visual a uma página, criando uma hierarquia organizacional entre diferentes
elementos. “Cria-se o contraste quando dois elementos são diferentes. Se eles
diferirem um pouco e não muito, não acontecerá o contraste e sim um conflito.
Prof. Jean Morais
Fundamentos de Programação WEB
Os princípios de design estão inter-relacionados e raramente apenas um deles
será utilizado.
Para garantir aos textos uma melhor legibilidade, há algumas regras básicas que
devem ser obedecidas por todos os Websites:
* Usar cores com alto contraste entre o texto e o fundo.
* Usar fundos de cores lisas ou padrões de fundo extremamente sutis.
* Usar fontes de tamanhos suficientes para que as pessoas possam ler os textos,
mesmo que não tenham uma visão perfeita.
* Fazer com que o texto fique imóvel. Mover, piscar ou dar um zoom no texto
dificulta ainda mais a leitura do que palavras estáticas.
Prof. Jean Morais
Fundamentos de Programação WEB
Hiperlink
Outra etapa durante o design da página é a definição das palavras ou itens que
serão os "links" procurados pelos usuários.
Os "links" são a parte mais importante do hipertexto , pois, conectam as páginas
e permitem que os usuários visitem sites novos e interessantes. Apenas os
termos que contém as informações mais importantes devem ser transformados
em "links" de hipertexto.
Um "link" de hipertexto tem fundamentalmente duas pontas: a página de partida
e a página de destino. Os "links" devem seguir dois princípios:
Prof. Jean Morais
Fundamentos de Programação WEB
* A retórica da partida. Os usuários têm que enxergar claramente que devem sair
do contexto atual e o que se ganhará na outra ponta do "link".
* A retórica da chegada. A página de chegada deve situar claramente os usuários
no novo contexto e oferecer valor relativo ao seu ponto de origem.
* A pergunta de navegação mais importante é provavelmente “Onde Estou?”,
pois se o usuário não souber onde está, também não terá a capacidade de
interpretar o significado do "link" que acabou de seguir.
Prof. Jean Morais
Fundamentos de Programação WEB
A navegação pelo site depende muito da disposição dos "links". Os "links" têm
que estar dispostos de maneira fácil e bem compreensível. Recomenda-se fazer
uso de cores que se destaquem para os "links" que ainda não foram visitados e
uma cor mais suave para os "links" visitados. Quando os usuários percebem
quais os "links" que já foram visitados por eles, começam a aprender a estrutura
do site, o que impede que eles visitem a mesma página duas vezes por engano.
Prof. Jean Morais
Introdução à Linguagem HTML
HTML (HyperText Markup Language - Linguagem de Formatação de
Hipertexto).
Todo documento HTML apresenta elementos entre parênteses angulares (< e >);
esses elementos são as etiquetas (tags) de HTML, que são os comandos de
formatação da linguagem. A maioria das etiquetas tem sua correspondente de
fechamento:
<etiqueta>...</etiqueta>
Isso é necessário porque as etiquetas servem para definir a formatação de uma
porção de texto, e assim marcamos onde começa e termina o texto com a
formatação especificada por ela.
Prof. Jean Morais
Introdução à Linguagem HTML
Documento básico e seus componentes.
A estrutura de um documento HTML apresenta os seguintes componentes:
HTML>
<HEAD><TITLE>Titulo do Documento</TITLE></HEAD>
<BODY>
texto, imagem, links, ...
</BODY>
</HTML>
Prof. Jean Morais
Introdução à Linguagem HTML
A seção <HEAD>
<HEAD> contém informações sobre o documento. O elemento <TITLE>, por
exemplo, define um título, que é mostrado no alto da janela do browser. Nesta
página, por exemplo, está definido assim:
<HEAD> <TITLE> Tutorial HTML da AES </TITLE> </HEAD> </HTML>
Todo documento WWW deve ter um título; esse título é referenciado em
buscas pela rede, dando uma identidade ao documento.
Note que o título da página se tornou a âncora de atalho para ela. Por isso é
sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos
genéricos como "Introdução".
Prof. Jean Morais
Introdução à Linguagem HTML
O título também é bastante significativo para a listagem de uma página nos
resultados de pesquisas nos catálogos da Internet.
Prof. Jean Morais
Introdução à Linguagem HTML
A seção <BODY>
Tudo que estiver contido em <BODY> será mostrado na janela principal do
browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos,
parágrafos, listas, tabelas, links para outros documentos, imagens, formulários,
animações, vídeos, sons e scripts embutidos.
Através de atributos de <BODY>, podemos definir cores para os textos, links e
para o fundo das páginas, bem como uma imagem de fundo (marca d’água):
<BODY BGCOLOR="#rrggbb“> <FONT COLOR="#rrggbb"
LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb"
BACKGROUND="URL">
Prof. Jean Morais
Introdução à Linguagem HTML
onde:
BGCOLOR
cor de fundo (quando não é indicada, o browser irá mostrar uma cor
padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer
o branco para o fundo da página)
FONT
cor dos textos da página (padrão: preto)
LINK
cor dos links (padrão: azul)
ALINK
cor dos links, quando acionados (padrão: vermelho)
VLINK
cor dos links, depois de visitados (padrão: azul escuro ou roxo)
Prof. Jean Morais
Introdução à Linguagem HTML
BACKGROUND
indica o URL da imagem a ser replicada no fundo da página, como uma
marca d’água.
Para efeitos de design, é possível fixar a imagem de fundo, para que ela não
se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e
funciona no Internet Explorer.
Prof. Jean Morais
Introdução à Linguagem HTML
Cabeçalhos
Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:
<H1>Este é um cabeçalho de nível 1</H1>
<H2>Este é um cabeçalho de nível 2</H2>
<H3>Este é um cabeçalho de nível 3</H3>
<H4>Este é um cabeçalho de nível 4</H4>
<H5>Este é um cabeçalho de nível 5</H5>
<H6>Este é um cabeçalho de nível 6</H6>
Prof. Jean Morais
Introdução à Linguagem HTML
Esses cabeçalhos são mostrados da seguinte forma:
Este é um cabeçalho de nível 1
Este é um cabeçalho de nível 2
Este é um cabeçalho de nível 3
Este é um cabeçalho de nível 4
Este é um cabeçalho de nível 5
Este é um cabeçalho de nível 6
Prof. Jean Morais
Introdução à Linguagem HTML
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é
necessário quando queremos uma quebra de linha em determinado ponto,
pois os browsers já quebram as linhas automaticamente para apresentar os
textos.
Com sucessivos <BR>, podemos inserir diversas linhas em branco nos
documentos.
Parágrafos
Para separar blocos de texto, usamos o elemento <P>:
Parágrafo 1; <P> Parágrafo 2.
que produz:
Parágrafo1;
Parágrafo2.
Prof. Jean Morais
Introdução à Linguagem HTML
Combinando parágrafos e quebras de linha, temos:
Parágrafo 1; <br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.
<P>Parágrafo 2; <br> linha 1 do parágrafo 2, <br> linha 2 do parágrafo 2.
O resultado da marcação acima é:
Parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.
Parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2.
Prof. Jean Morais
Introdução à Linguagem HTML
Tabelas
Uma tabela é um conjunto de células organizadas dentro das quais podemos
alojar distintos conteúdos.
Uma tabela nos permite organizar e distribuir os espaços da melhor forma.
Pode nos ajudar a gerar textos em colunas como os jornais, prefixar os
tamanhos ocupados por distintas seções da página ou colocar de uma
maneira simples uma legenda a uma imagem.
Pode ser que a princípio seja um pouco complicado trabalhar com estas
estruturas mas, se desejamos criar uma página de qualidade, mais cedo ou
mais tarde teremos que nos ver com elas e nos dar conta das possibilidades
que nos oferecem.
Prof. Jean Morais
Introdução à Linguagem HTML
Tabelas
Para começar, nada mais simples do que pelo princípio: as tabelas são
definidas pelas etiquetas <table> e </table>
Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e
imagens que darão forma e conteúdo à tabela.
As tabelas são descritas por linhas da esquerda para direita. Cada uma
destas linhas é definida por outra etiqueta e seu fechamento: <tr> e </tr>
Ainda assim, dentro de cada linha, haverá diferentes células. Cada uma
dessas células será definida por outro par de etiquetas:<td> e </td>. Dentro
desta etiqueta será onde colocaremos nosso conteúdo.
Prof. Jean Morais
Introdução à Linguagem HTML
Além dos atributos específicos de cada célula ou linha, as tabelas podem ser
adicionalmente formatadas a partir dos atributos que nos oferece a própria
etiqueta <table>. A seguir, mostramos aqueles que nos podem parecer à
principio mais importantes:
Align
Alinha horizontalmente a tabela em relação ao seu entorno.
Background
Permite-nos colocar um fundo para a tabela desde um link a
uma imagem.
Bgcolor
Dá cor de fundo à tabela.
Border
Define o número de pixels da borda principal.
Bordercolor
Define a cor da borda.
Cellpadding
Define, em pixels, o espaço entre as bordas da célula e o
conteúdo da mesma.
Prof. Jean Morais
Introdução à Linguagem HTML
Cellspacing
Height
Width
Colspan
Rowspan
Define o espaço entre as bordas (em pixels).
Define a altura da tabela em pixels ou porcentagem.
Define a largura da tabela em pixels ou porcentagem.
Indica que uma célula deve ocupar mais de uma linha
Indica que uma célula deve ocupar mais de uma coluna
Prof. Jean Morais
Introdução à Linguagem HTML
Criando uma tabela
Às vezes podemos ter a necessidade de que uma célula de uma tabela ocupe
mais de uma coluna ou linha da mesma, para isso utilizamos os atributos
COLSPAN e ROWSPAN nas células da tabela. Veremos nesse artigo como
utilizá-los através de alguns exemplos práticos.
Digamos que nós tenhamos uma tabela simples exibindo preços de carros:
Prof. Jean Morais
Introdução à Linguagem HTML
<table border="1">
<tr>
<td>Carro</td>
<td>Modelo</td>
<td>Preço</td>
</tr>
<tr>
<td>Celta</td>
<td>Life</td>
<td>R$ 21.000</td>
</tr>
<tr>
<td>Gol</td>
<td>City</td>
<td>R$ 23.000</td>
</tr>
</table>
Prof. Jean Morais
Introdução à Linguagem HTML
<table border="1">
<tr>
<td colspan="3">Tabela de preços de carros</td>
</tr>
<tr>
<td>Carro</td>
<td>Modelo</td>
<td>Preço</td>
</tr>
<tr>
<td>Celta</td>
<td>Life</td>
<td>R$ 21.000</td>
</tr>
<tr>
<td>Gol</td>
<td>City</td>
<td>R$ 23.000</td>
</tr>
</table>
Prof. Jean Morais
Introdução à Linguagem HTML
<table border="1">
<tr>
<td colspan="3">Tabela de preços de carros</td>
</tr>
<tr>
<td rowspan="3">Celta</td>
</tr>
<td>Life</td>
<td>R$ 21.000</td>
</tr>
<tr>
<td>Super</td>
<td>R$ 23.000</td>
</tr>
</table>
Prof. Jean Morais
Introdução à Linguagem HTML
<table align="center" bgcolor="#cc0000" width="300" border="1">
<tr>
<td>Tabela de cor vermelha de fundo</td>
<td>O atributo bgcolor da tabela está em vermelho.</td>
</tr>
<td>Célula normal</td>
<td bgcolor="009900">Esta célula está em verde. Tem o atributo bgcolor na cor
verde</td>
</tr>
</table>
Prof. Jean Morais
Introdução à Linguagem HTML
Prof. Jean Morais
Introdução à Linguagem HTML
<table align="center" border="1" bgcolor=dddddd>
<tr>
<td colspan="4" align="center" bgcolor="666666"><font color="#FFFFFF"
size="4">Animais em perigo de extinção</font></td>
</tr>
<tr bgcolor="aaaaaa">
<td>Nome</td>
<td align="center">Cabeças</td>
<td align="center">Previsão 2010</td>
<td align="center">Previsão 2020</td>
</tr>
<tr>
<td>Baleia</td>
<td align="center">6000</td>
<td align="center">4000</td>
<td align="center">1500</td>
</tr>
Prof. Jean Morais
Introdução à Linguagem HTML
<tr>
<td>Urso Pardo</td>
<td align="center">50</td>
<td rowspan="2" colspan="2" align="center" bgcolor="red">0</td>
</tr>
<tr>
<td>Lince</td>
<td align="center">10</td>
</tr>
<tr>
<td>Tigre</td>
<td align="center">300</td>
<td colspan="2" align="center">210</td>
</tr>
</table>
Prof. Jean Morais
Fundamentos de Programação WEB
Jean Morais
[email protected]
[email protected]
Introdução à Linguagem HTML
Listas
A linguagem "HTML" permite a criação de listas que podem ser usadas para
enumerar fatos ou também como um menu para acessar outros documentos do
seu site e de endereços da Internet.
As listas são classificadas em listas ordenadas, criadas com o par de comandos
<OL></OL>, que colocam números na frente dos itens da lista, e listas não
ordenadas, criadas com <UL></UL>, que colocam marcadores. Independente
do tipo de lista usado, cada item deve ser precedido pelo comando <LI>. Veja
exemplo de construção dos dois tipos de lista.
Prof. Jean Morais
Introdução à Linguagem HTML
<h1>Lista não ordenada</h1>
<UL>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<LI> Terceiro item da lista
<LI> Quarto item da lista
</UL>
<h2>Lista ordenada</h2>
<ol>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<LI> Terceiro item da lista
<LI> Quarto item da lista
</OL>
Prof. Jean Morais
Introdução à Linguagem HTML
Prof. Jean Morais
Introdução à Linguagem HTML
Se optar por usar uma lista não ordenada, poderá opcionalmente especificar três
tipos diferentes de marcador. Para isso, basta acrescentar a cláusula type=
square/circle/disc ao comando <UL>, onde square coloca um quadrado, circle,
um círculo e disc, uma bolinha como marcador.
<h2>Exemplo de marcadores alternativos</h2>
<UL type=square>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<LI> Terceiro item da lista
</UL>
<UL type=circle>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<LI> Terceiro item da lista
</UL>
<UL type=disc>
<LI> Primeiro item da lista
<LI> Segundo item da lista
<LI> Terceiro item da lista
</UL>
Prof. Jean Morais
Introdução à Linguagem HTML
Prof. Jean Morais
Introdução à Linguagem HTML
Para inserir som em uma página Web:
<bgsound src="O tempo não pára.wma" loop=infinite hidden=true volume=50>
Inserir video e uma página Web:
<EMBED SRC="prod.wmv" LOOP="false" CONTROLLER="true"
AUTOPLAY="true" WIDTH="400" HEIGHT="350">
Prof. Jean Morais
Introdução à Linguagem HTML
IFRAME
<IFRAME name=palco src="iframe_0.html" frameBorder=0 width=400
height=150 scrolling=auto></IFRAME>
Onde:
name: é o nome da janela, ele será usado caso você queira criar links que abram
dentro do iframe, é o valor do target.
src: é a página que será aberta dentro do iframe.
frameborder: borda do frame.
width e height: largura e altura do iframe, respectivamente.
scrolling: barra de rolagem.
Prof. Jean Morais
Introdução à Linguagem HTML
<html>
<head> <title> Barão Vermelho </title></head>
<body bgcolor="C7C9CE">
<table width="100%">
<tr> <td colspan="2"> <font color="789BEA" size="6">
<center> <table>
<tr> <td> <img src="barao.jpg"> </td>
<td><font size="8" color="F90C0C">
Barão Vermelho </td>
<td> <img src="barao.jpg"> </td> </tr>
</table> </td> </tr>
<tr> <td width="11%" heigth="10%">
<a href="contato.html" target="principal">Contato</a> <br> <br>
<a href="contato.html" target="principal">Contato</a><br> <br>
<a href="contato.html" target="principal">Contato</a>
</td>
<td width="100%">
<iframe src="teste.html" width="800" frameBorder="no" height="310%"
SCROLLING="no"></iframe> </td> </tr> </table> </body>
</html>
Prof. Jean Morais
Introdução à Linguagem HTML
Prof. Jean Morais
Introdução à Linguagem HTML
Formulários
Vamos criar uma página de formulários.O título da página será: teste de
formulários.O nome do arquivo será: meu_formulario.html. Crie um novo
documento no Bloco de notas e digite:
<html>
<head>
<title>teste de formulário</title>
</head>
<body>
<form>
Digite o nome: <input type="text" size="10" name="nome" maxlength="10">
Prof. Jean Morais
Introdução à Linguagem HTML
O comando type= "text" faz com que o campo criado seja utilizado para a
inserção de texto. O comando size define o número de caracteres que você
deseja que a caixa comporte. É possível digitar textos maiores, mas você só
poderá visualizar a quantidade de caracteres definida. O comando maxlength,
por sua vez, define o tamanho máximo do texto em caracteres. No nosso
exemplo, não será possível digitar mais do que dez caracteres.
Digite a senha (até seis caracteres): <input type="password" size="6"
name="senha" maxlength="6"><p>
O type="password" faz com que os caracteres digitados sejam visualizados
como asteriscos (*).
Prof. Jean Morais
Introdução à Linguagem HTML
Estado civil: <input type="radio" name="estcivil" value="solteiro"
checked>Solteiro(a)
O type= "radio" cria um botão circular que pode ser marcado ou desmarcado. O
padrão é o botão aparecer desmarcado, porém o comando checked faz com que
ele seja marcado.
<input type="radio" name="estcivil" value="casado">Casado(a)
O comando radio é utilizado em alternativas que comportem uma única opção
correta. A partir do momento em que você escolhe uma outra alternativa, a
anterior é desmarcada.
<input type="radio" name="estcivil" value="divorciado">Divorciado(a)
<input type="radio" name="estcivil" value="viuvo">Viúvo(a)
<p>Disponibilidade de horário:
<p>Manhã<input type="checkbox" name="horário" value="manha">
Prof. Jean Morais
Introdução à Linguagem HTML
Utilize o comando type="checkbox" para criar alternativas que permitam a
escolha de mais do que uma opção.
<p>Tarde<input type= "checkbox" name= "horário" value="tarde">
<p>Noite<input type= "checkbox" name= "horário" value="noite">
<p><input type= "reset" value="Apagar dados">
<p><input type= "submit" value="Enviar dados">
Complete a estrutura da página digitando as tags de fechamento:
</form>
</body>
</html>
Prof. Jean Morais
Introdução à Linguagem HTML
Prof. Jean Morais
CSS
O que são folhas de estilo?
Uma folha de estilos é um conjunto de regras que informa a um programa,
responsável pela formatação de um documento, como organizar a página,
como posicionar e expor o texto e, dependendo de onde é aplicada, como
organizar uma coleção de documentos.
Esta descrição, que se aplica a estilos em processadores de texto e programas
de editoração eletrônica, também vale para a Web. Na Web, os "parágrafos"
são blocos marcados por descritores HTML como <H1>, <P>, etc. Para fazer
com que todos os blocos de textos marcados com <H1> em um documento
sejam exibidos em tamanho de 48 pontos, basta definir a regra:
H1 {font-size: 48pt} dentro de uma "folha de estilos" aplicada ao documento.
Prof. Jean Morais
CSS
Para que servem as folhas de estilo
Separar apresentação da estrutura
Com isto é possível voltar a suportar browsers antigos que antes estavam
condenados por não conseguirem ler a informação sem perdas. Com a
informação toda armazenada no HTML (estrutura), a apresentação (estilo)
seria uma camada a mais, alterando a disposição do texto, cores, etc. mas sem
afetar a estrutura essencial da informação. Isto permite que uma página tenha
vários estilos e use scripts (programas embutidos) para decidir qual carregar
(em função do browser e da plataforma). Isto é muito menos trabalho que
fazer uma página para cada browser e plataforma, pois a atualização é feita
apenas no HTML. Também, com isso, é possível ter uma folha de estilos
especial somente para impressão, onde haveria informações de quebra de
páginas, etc.
Prof. Jean Morais
CSS
Controle absoluto da aparência da página.
É algo que não se tem com o HTML. Pode-se usar tabelas, GIFs invisíveis de
um pixel e mais uma dúzia de "macetes" mas não se consegue fazer o texto
fluir suavemente em volta de uma imagem irregular, por exemplo. Além do
mais, quanto mais sofisticada a técnica, mais difícil é de codificar e mais
"sujo" fica o código, o que o torna mais sujeito a erros. Com CSS, pode-se
colocar uma imagem em qualquer lugar da página (até fora dela), usando
técnicas de posicionamento absoluto ou relativo. As dimensões e posições são
exatas e dadas em unidades conhecidas no mundo da tipografia como pixels,
pontos, milímetros.
Qual é a diferença entre CSS e HTML?
HTML é usado para estruturar conteúdos. CSS é usado para formatar
conteúdos estruturados.
Prof. Jean Morais
CSS
A 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:
Prof. Jean Morais
CSS
Aplicando CSS a um documento HTML
Você pode aplicar CSS a um documento de três maneiras distintas.
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>
Prof. Jean Morais
CSS
Método 2: Interno (a tag style)
Uma outra maneira de aplicar CSS é pelo uso da tag <style> do HTML.
<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>
Prof. Jean Morais
CSS
Método 3: Externo (link para uma folha de estilos)
O método 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 com qualquer outro tipo de arquivo você pode colocar uma
folha de estilos tanto no servidor como no disco rígido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de
style.css e está localizada no diretório style. Tal situação está mostrada a
seguir:
Prof. Jean Morais
CSS
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" />
Notar 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:
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 disto é 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.
Prof. Jean Morais
CSS
Prof. Jean Morais
CSS
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 páginas
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.
Faça você mesmo
Abra o Bloco de notas (ou qualquer outro editor de texto que queira usar) e
crie dois arquivos — um arquivo HTML e um arquivo CSS — com os
seguintes conteúdos:
Prof. Jean Morais
CSS
default.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>
style.css
body {
background-color: #FF0000;
}
Prof. Jean Morais
CSS
Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos
com a extensão apropriada (".css" e ".htm")
Abra default.htm no seu navegador e veja uma página com o fundo
vermelho.
Prof. Jean Morais
CSS
Cores e fundos
Cor do primeiro plano: a propriedade 'color'
A propriedade color define a cor do primeiro plano de um elemento.
Considere, por exemplo, que desejamos que todos os cabeçalhos de
primeiro nível no documento sejam na cor vermelha. O elemento HTML
que marca tais cabeçalhos é o elemento <h1>. O código a seguir define
todos os <h1> na cor vermelha.
h1 {
color: #ff0000;
}
Prof. Jean Morais
CSS
Cores e fundos
A propriedade 'background-color'
A propriedade background-color define a cor do fundo de um elemento.
O elemento <body> contém todo o conteúdo de um documento HTML.
Assim, para mudar a cor de fundo da página, devemos aplicar a propriedade
background-color ao elemento <body>.
Você pode aplicar cores de fundo para outros elementos, inclusive para
cabeçalhos e textos. No exemplo abaixo foram aplicadas diferentes cores de
fundo para os elementos <body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000; background-color: #FC9804;
}
Notar que foram aplicadas duas propriedades ao elemento
Prof. Jean Morais
<h1> separadas por um ponto e vírgula.
CSS
Images de fundo [background-image]
A propriedade CSS background-image é usada para definir uma imagem de
fundo.
Usaremos a imagem de uma borboleta para exemplificar a aplicação de
imagens de fundo. Você pode fazer o download da imagem mostrada abaixo
e usá-la nos seus experimentos ou você poderá usar uma outra imagem
qualquer ao seu gosto.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Prof. Jean Morais