slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Jean Morais jean@objetivosorocaba.br jean@aessorocaba.br PowerPoint Presentation
Download Presentation
Jean Morais jean@objetivosorocaba.br jean@aessorocaba.br

Loading in 2 Seconds...

play fullscreen
1 / 69

Jean Morais jean@objetivosorocaba.br jean@aessorocaba.br - PowerPoint PPT Presentation


  • 171 Views
  • Uploaded on

Fundamentos de Programação WEB. Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br. 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”

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Jean Morais jean@objetivosorocaba.br jean@aessorocaba.br' - preston-house


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

Fundamentos de Programação WEB

Jean Morais

jean@objetivosorocaba.com.br

jean@aessorocaba.com.br

slide2

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.

slide3

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

slide4

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

slide5

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

slide6

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

slide7

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

slide8

Fundamentos de Programação WEB

Jean Morais

jean@objetivosorocaba.com.br

jean@aessorocaba.com.br

slide9

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

slide10

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

slide11

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

slide12

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

slide13

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

slide14

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

slide15

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

slide16

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

slide17

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

slide18

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

slide19

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

slide20

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

slide21

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

slide22

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

slide23

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

slide24

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

slide25

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

slide26

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

slide27

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

slide28

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

slide29

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

slide30

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

slide31

Introdução à Linguagem HTML

Cellspacing Define o espaço entre as bordas (em pixels).

Height Define a altura da tabela em pixels ou porcentagem.

Width Define a largura da tabela em pixels ou porcentagem.

Colspan Indica que uma célula deve ocupar mais de uma linha

Rowspan Indica que uma célula deve ocupar mais de uma coluna

Prof. Jean Morais

slide32

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

slide33

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

slide34

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

slide35

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

slide36

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

slide38

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

slide39

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

slide40

Fundamentos de Programação WEB

Jean Morais

jean@objetivosorocaba.com.br

jean@aessorocaba.com.br

slide41

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

slide42

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

slide44

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

slide46

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

slide47

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

slide48

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

slide50

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

slide51

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 visualizadoscomo asteriscos (*).

Prof. Jean Morais

slide52

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

slide53

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

slide55

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

slide56

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

slide57

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

slide58

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

slide59

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

slide60

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

slide61

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

slide62

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

slide63

CSS

Prof. Jean Morais

slide64

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

slide65

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

slide66

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

slide67

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

slide68

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 <h1> separadas por um ponto e vírgula.

Prof. Jean Morais

slide69

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