69
Jean Morais jean@objetivosorocaba. com.br [email protected] r Fundamentos de Programação WEB

Jean Morais [email protected] [email protected] Fundamentos de Programação WEB

Embed Size (px)

Citation preview

Page 1: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Jean [email protected]

[email protected]

Fundamentos de Programação WEB

Page 2: 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

Fundamentos de Programação WEB

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.

Page 3: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Ambiente Web

Prof. Jean Morais

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.

Fundamentos de Programação WEB

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:

Page 4: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Qual o objetivo da criação do site?

Prof. Jean Morais

Fundamentos de Programação WEB

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ê?

Page 5: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br 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.

Prof. Jean Morais

UsabilidadeEstrutura do DesignLayout e uso das CoresHiperlink

Fundamentos de Programação WEB

Page 6: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Usabilidade

Prof. Jean Morais

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.

Fundamentos de Programação WEB

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.

Page 7: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br 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).

Prof. Jean Morais

Fundamentos de Programação WEB

• 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.

Page 8: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Jean [email protected]

[email protected]

Fundamentos de Programação WEB

Page 9: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Estrutura do Design

Prof. Jean Morais

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.

Fundamentos de Programação WEB

* 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.

Page 10: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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:

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

Page 12: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 13: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 14: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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:

Page 15: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 16: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 17: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 18: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 19: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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".

Page 20: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 21: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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">

Page 22: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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)

FONTcor 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)

Page 23: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 24: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 25: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

Introdução à Linguagem HTML

Esses cabeçalhos são mostrados da seguinte forma:

Este é um cabeçalho de nível 1Este é um cabeçalho de nível 2Este é um cabeçalho de nível 3Este é um cabeçalho de nível 4Este é um cabeçalho de nível 5Este é um cabeçalho de nível 6

Page 26: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 27: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 28: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 29: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

Introdução à Linguagem HTML

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.

Tabelas

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.

Page 30: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 31: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

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

Page 32: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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:

Page 33: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 34: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 35: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 36: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 37: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

Introdução à Linguagem HTML

Page 38: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 39: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 40: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Jean [email protected]

[email protected]

Fundamentos de Programação WEB

Page 41: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

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.

Page 42: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 43: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

Introdução à Linguagem HTML

Page 44: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 45: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

Introdução à Linguagem HTML

Page 46: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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">

Page 47: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 48: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 49: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

Introdução à Linguagem HTML

Page 50: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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">

Page 51: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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

Page 52: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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">

Page 53: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 54: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

Introdução à Linguagem HTML

Page 55: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 56: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

CSS

Para que servem as folhas de estilo Separar apresentação da estruturaCom 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.

Page 57: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 58: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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:

Page 59: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 60: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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>

Page 61: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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:

Page 62: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 63: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

CSS

Page 64: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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:

Page 65: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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; }

Page 66: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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.

Page 67: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

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; }

Page 68: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

CSSCores 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.

Page 69: Jean Morais jean@objetivosorocaba.com.br jean@aessorocaba.com.br Fundamentos de Programação WEB

Prof. Jean Morais

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; }