Você está na página 1de 97

Instituto Vianna Júnior

Curso Superior de Tecnologia em


Desenvolvimento Web

INTRODUÇÃO À PROGRAMAÇÃO
WEB

Profª. Lúcia Helena de Magalhães

2007
Site Semântico
• Web Semântica
Segundo RABBITE, Semântica é uma web que
tem toda sua informação organizada,
possibilitando que essa informação seja entendida
não só pelos humanos, mas também por máquinas.
Site Semântico
TAG <TITLE>
Títulos de janela
• O título deve refletir o conteúdo da página

• Toda Homepage necessita de um título de janela


simples e objetivo (especificado pela tag TITLE de
cada documento HTML).

• Os títulos das janelas desempenham um papel


crítico na marcação e localização de sites para
mecanismos de pesquisa.
Título
• Não use acentos no título da página

• Use apenas 60 caracteres para descrição do título.

• Para serem pesquisáveis, os títulos de janela


devem transmitir o máximo de informações
possível com o mínimo de palavras.
Dicas
• Iniciar o título da janela com a palavra que resume
a informação (geralmente o nome da empresa)

• Não incluir o nome de domínio de nível superior,


como ".com", no título da janela, a menos que faça
realmente parte do nome da empresa, como em
"Amazon.com"
Exemplo HTML Semântico

Tag H1

• <h1> Para títulos

• <P> Para parágrafos


Exemplo HTML NÃO Semântico

OBS:
•Use sempre H1 para títulos principais;

• Use H2 para subtítulos


HTML Semântico

• ALT

• Use sempre o atributo “alt” na inserção de


imagens.

• Quando a imagem não aparecer, a descrição da


imagem estará disponível;

<img src=“imagem.gif” alt=“Notbook LG”


HTML Semântico

• Hiperlinks
• Use texto como hiperlink, ao invés de usar
figuras como link.
<a href=http://www.viannafr.edu.br>Vianna Júnior</a>
Tabelas Semanticamente Corretas

• TAG CAPTION
A tag <caption> é usada para inserir o título
da tabela.
Tabelas Semanticamente Corretas

• TAG TH
Tabelas Semanticamente Corretas

• TAGS THEAD TBODY e TFOOT


As tags <thead>, <tbody> e <tfoot> servem para
otimizar a estrutura de uma tabela. Elas definem
onde será exibido um determinado bloco de
elementos e seu respectivo conteúdo:

. <thead> - topo da tabela


. <tfoot> - rodapé da tabela. Deve ser inserido antes
da tag <tbody>
. <tbody> - todo o conteúdo da tabela
Tabelas Semanticamente Corretas
Listas

• Utilizar tags de parágrafo (<p></p>) para criar


uma lista não é semanticamente correto.

• Utilize o tag correto para lista


<ul><li>item1></li></ul>

<ol><li>item1></li></ol>
HTML - comandos e atributos complementares
Formatação de Texto

• <cite> caracteres/ citação ... </cite> - marca o texto


como citação aplicando o efeito itálico sobre ele.

<code> caracteres ... </code> - define o texto como


sendo um código de programação.

<var> caracteres ... </var> - indica que o texto


corresponde a
variáveis de um programa - equivalente ao itálico.
Meta TAGS
• Metas Tags são “etiquetas eletrônicas” usadas para
disponibilizar informações adicionais para facilitar
o encontro de informações pelo sistemas de busca.

• Os Meta Tags devem ser colocados em cada


página do site entre o <HEAD>...</HEAD>
Meta TAGS
Exemplos: HTTP-EQUIV
Content-Type

<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=ISO-2022-JP">
- Usado para informar ao Browser o conjunto de
caracteres a ser usado. Normalmente esta tag já
é colocada pelo editores HTML.
Meta TAGS

• Refresh
• <META HTTP-EQUIV="Refresh"
CONTENT="3;URL=http://www.viannajr.edu.br">

• Especifica o tempo que o Browser usará para


atualizar a leitura, opcionalmente pode ser usado
para redirecionar para outra página.
Meta TAGS

Exemplos: NAME

• TITLE
<META NAME=“Title” CONTENT=“Web Semantica,
Web Mining”>

• Meta Tag “TITLE” é usada para definir o nome da página.


Meta TAGS

• DESCRIPTION
• <META NAME="description“
CONTENT="Objetiva melhorar as potencialidades
da web através de padrões que permitem
atribuir significados aos conteúdos das
páginas...">

Fornece uma breve descrição da página usada


pelos "robôs " para descrever seus documentos
nos sistemas de buscas.
Meta TAGS

• KEYWORDS
• <META NAME="keywords" CONTENT="web
semantica web mining padroes tableless css
enginer">

Meta Tag “KEYWORDS” é usado para definir


palavras chaves que ajudarão a identificar seu
Site nos sistemas de buscas.

OBS.: Não use virgula.


Meta TAGS
Author
• <META NAME="author" content=“Lucia Helena">

• Tipicamente usado para informar o autor da


página.

Generator
• <META NAME="generator" content="Notepad">

• Tipicamente usada para informar a ferramenta


HTML usada para construir a página.
Meta TAGS
• Exemplo:
Tableless
• Tableless – Tradução “menos tabelas” não é uma
tecnologia nem uma forma de programação, e sim
uma metodologia, uma maneira de
desenvolvimento.
• Tem como principal característica eliminar o uso
de diagramação de tabelas para a diagramação do
layout.
• Não prega a eliminação da tag <table>, e sim seu
uso semântico.
• Principal objetivo é atingir os padrões Web.
• Formatação das páginas via CSS.
CSS
• CSS é o mesmo que Cascading Style Sheets 
(Folhas de Estilo em Cascata).
• No que eles podem nos ajudar?
­ Economizar o seu tempo
­ Diminuir o tamanho do código de sua 
página.
­ Sua página irá carregar mais rapidamente
­ Mais facilidade de manter e fazer alterações 
na página
­ Mais controle no layout da página
CSS
• Como criar estilos
Cada estilo é definido como uma regra CSS. 
Cada regra deve utilizar a seguinte

Sintaxe:
elemento {atributo1: valor;
atributo2: valor
}
CSS
• Elemento ­ descreve o elemento de design ao 
qual o estilo será aplicado. A mesma tag HTML 
mas sem os sinais de maior e menor. Essa parte 
da regra é chamadas de seletor.
• Atributo ­ Elemento que você quer usar como 
estilo. Deve ser um nome de atributo CSS válido, 
como o atributo font­size.
• Valor ­ a configuração aplicada ao atributo. 
Deve ser uma configuração válida para o atributo 
em questão, como 20pt (20 pontos) para font­
size.
• Atributo:valor ­ a parte da declaração da 
regra. Você pode atribuir múltiplas declarações 
se desejar separadas com ponto­e­vírgula (;). 
CSS
• Exemplos. 
• H1 {font­size: 42pt}
Todos os títulos de nível 1 (tags <H1>) 
devem ter tamanho de 42 pontos;

• H2 {font­size: 24pt;
 color: blue}
Todos os títulos de nível 2 (tags <H2>) 
devem ter tamanho de 24 pontos e cor azul;
CSS
• Exemplos:
<style type="text/css">
P {font-family: Times;
font-size: 12pt;
color: blue;
margin-left: 50px
}
</style>
• Se o valor for uma palavra composta, deverá estar
entre aspas duplas " ", ou simples ':
h3 { font-family: "Comic Sans MS" }
CSS
Agrupamento de Seletores

• Uma regra CSS quando válida para vários


seletores, estes podem ser agrupados.
• Separe cada seletor com uma vírgula.
• A cor de todos os cabeçalhos será azul.
h1, h2, h3, h4, h5, h6 { color:
#0000FF; }
CSS
O seletor classe
• A aplicação do seletor de classe a uma marcação HTML é
feita utilizando o atributo HTML.
• As regras de estilos não estão restritas somente aos
elementos HTML (tags);
• Pode ser declarado um nome e com ele criar uma classe a
qual definirá as regras CSS;
• As classes podem ser aplicadas a qualquer elemento
HTML;
• Pode ser aplicado estilos diferentes para o mesmo tipo de
elemento do HTML, usando classes diferentes para cada um
deles.
CSS
O seletor classe

• A sintaxe é praticamente idêntica à sintaxe 
normal, com adição de um ponto e o nome 
da classe depois do elemento na qual será 
utilizado o 
atributo

Exemplo:
<STYLE TYPE="text/css">
elemento.nomedaClasse {atributo:valor; ...} 
</STYLE>
CSS
Exemplo:
CSS
• Classe aplicável a qualquer elemento HTML.
• Omite o nome do elemento antes da classe.
• A regra CSS pode ser aplicada a qualquer elemento HTML;
• Exemplo:

Visualização
CSS
• Pode definir regras de CSS em três 
lugares. 
• em um documento separado fora de todos 
os documentos HTML (Externo);
• No cabeçalho de um documento HTML 
(Incorporado);
• Dentro de uma tag de HTML (Inline).
CSS
• Estilos externos
Externo significa colocar as regras de CSS em um 
arquivo separado, e a página HTML pode fazer um 
link para esse arquivo. Essa abordagem permite 
definir regras em um ou mais arquivos que podem 
ser aplicadas em várias páginas do site.
Exemplo:
H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}
Salvar como estilo.css
P {font-family: 'Courier';
margin-left: 1in}
CSS
• Folha de estilo linkada
• Para utilizar os estilos definidos no arquivo .css 
adicione a tag a seguir ao cabeçalho da 
página. 
<LINK REL="STYLESHEET” HREF="estilo.css"
TYPE="text/css">
• Exemplo
CSS
Folha de estilo importada
<head>
<style type="text/css">
@import url("estilo.css");
</style>
</head>
CSS
• Estilos incorporados
Incorporado significa especificar as regras de 
CSS no cabeçalho do documento. As regras 
incorporadas afetam somente a página atual.
CSS
• Estilos inline
Inline significa especificar as regras de CSS dentro 
da tag de HTML.  Essas regras afetam somente a tag 
atual.
CSS
A PROPRIEDADE FONT

 color: Cor da fonte


 font-family: Tipo de fonte
 font-size: Tamanho de fonte
 font-style: Estilo de fonte
 font-variant: Fontes maiúsculas de menor altura
 font-weight: Quanto mais escura a fonte é (negrito)
 font: Maneira abreviada para todas as propriedades
CSS
Valores válidos para as propriedades da fonte
• color:
c) código hexadecimal: #FFFFFF
d) código rgb: rgb(255,235,0)
e) nome da cor: red, blue, green...etc

• font-family:
h) family-name: define o nome da fonte,
Ex: "verdana", "helvetica", "arial", etc.
CSS
• font-size:
b) xx-small
c) x-small
d) small
e) medium
f) large
g) x-large
h) xx-large
i) smaller
j) larger
k) length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
l) %
CSS
• font-style:
b) normal: fonte normal na vertical
c) italic: fonte inclinada
d) oblique:fonte obliqua

• font-variant:
g) normal: fonte normal
h) small-caps: transforma em maiúsculas de menor
altura
CSS
• font-weight:
b) normal
c) bold
d) bolder
e) lighter
f) 100
g) 200
h) 300
i) 400
j) 500
k) 600
l) 700
m) 800
n) 900
CSS
A PROPRIEDADE TEXT
 color: Cor do texto;
 letter-spacing: Espaçamento entre letras;
 word-spacing: Espaçamento entre palavras;
 text-align: Alinhamento do texto;
 text-decoration: Decoração do texto;
 text-indent: Recuo do texto;
 text-transform: Forma das letras;
 direction: Direção do texto;
 white-space: Como o browser trata os espaços em branco;
CSS
• color:
b) código hexadecimal: #FFFFFF
c) código rgb: rgb(255,235,0)
d) nome da cor: red, blue, etc
Exemplo:
CSS
• letter-spacing: Espaçamento entre letras
b) normal: é o espaçamento default
c) lenght: uma medida reconhecida pelas CSS (px, pt, em, cm)
Exemplo:

Visualização:
CSS
• word-spacing:
Espaçamento entre palavras

d) normal: é o espaçamento default


e) lenght: uma medida reconhecida pelas CSS (px, pt, em, cm)
CSS
Exemplo

Visualização
CSS
• text-align: Alinhamento do texto
• left: alinha o texto a esquerda
• right: alinha o texto a direita
• center: alinha o texto no centro
• justify: força o texto a ocupar toda a extensão da linha da
esquerda a direita
CSS
Exemplo
CSS
• text-decoration: Decoração do texto
c) none: nenhuma decoração
d) underline: coloca sublinhado no texto
e) overline: coloca um sobrelinhado no texto
f) line-through: coloca uma linha em cima do texto
g) blink: faz o texto piscar
CSS
Exemplo: Visualização:
CSS
• text-indent: Recuo do texto
b) lenght: uma medida reconhecida pelas CSS (px,
pt, cm, ...)
c) % : porcentagem da largura do elemento pai
CSS
Exemplo: Visualização
CSS
• text-transform: Forma das letras do texto

c) none: texto normal


d) capitalize: todas as primeiras letras do texto em
maiúsculas
e) uppercase: todas as letras do texto em maiúsculas
f) lowercase: todas as letras do texto em minúsculas
CSS
Exemplo:
CSS

• direction:

• ltr: texto escrito da esquerda para a direita


• rtl: texto escrito da direita para a esquerda
CSS
• Exemplo:

• Visualização:
CSS
• white-space: Espaço em branco
b) normal: os espaços em branco serão ignorados
pelo browser
c) pre: os espaços em branco serão preservados
pelo browser
d) nowrap: o texto será apresentado todo ele numa
linha única na tela. Não há quebra de linha até
ser encontrada uma tag <br>
CSS
Exemplo:
CSS
• A PROPRIEDADE MARGIN
Define um valor para espessura das margens dos
elementos HTML.
 margin-top: Define a margem superior;
 margin-right: Define a margem direita;
 margin-bottom: Define a margem inferior;
 margin-left: Define a margem esquerda;
 margin: Maneira abreviada para todas as margens
CSS
• Exemplo: margin-top - Margem superior

1 cm
CSS
• margin: Declaração das quatro margens
Permitem o controle do espaçamento em volta
dos elementos HTML.
Existem 4 modos de se declarar as margens:
• margin: valor1: As 4 margens terão valor1;
• margin: valor1 valor2: Margem superior e inferior
terão valor1 e margem direita e esquerda terão valor2
• margin: valor1 valor2 valor3: Margem superior terá
valor, margem direita esquerda terão valor2 e margem
inferior terá valor3
• margin: valor1 valor2 valor3 valor4: Margens
superior, direita, inferior e esquerda nesta ordem.
CSS
• Exemplo: margin
CSS
• A PROPRIEDADE BORDER
 border-width: Espessura da borda
 border-style: Estilo da borda
 border-color: Cor da borda

 border-top-width: Espessura da borda superior


 border-top-style: Estilo da borda superior
 border-top-color: Cor da borda superior

 border-right-width: Espessura da borda direita


 border-right-style: Estilo da borda direita
 border-right-color: Cor da borda direita

 border-bottom-width: Espessura da borda inferior


 border-bottom-style: Estilo da borda inferior
 border-bottom-color: Cor da borda inferior
CSS
• A propriedade border – continuação
 border-left-width: Espessura da borda esquerda
 border-left-style: Estilo da borda esquerda
 border-left-color: Cor da borda esquerda

 border-top: Maneira abreviada para todas as propriedades da borda


superior
 border-right: Maneira abreviada para todas as propriedades da borda
direita
 border-bottom: Maneira abreviada para todas as propriedades da borda
inferior
 border-left: Maneira abreviada para todas as propriedades da borda
esquerda
 border: Maneira abreviada para todas as quatro bordas
CSS
Valores da propriedade style
• style:
• none: nenhuma borda
• hidden: equivalente a none
• dotted: borda pontilhada
• dashed: borda tracejada
• solid: borda contínua
• double: borda dupla
• groove: borda estilo 3D
• ridge: borda em ressalto
• inset: borda em baixo relevo
• outset: borda em alto relevo
CSS
Valores Válidos para a propriedade
width
• width:
b) thin: borda fina
c) medium: borda média
d) thick: borda grossa
e) length: uma medida reconhecida pelas CSS (px,
pt, em, cm, ...)
CSS

Continuação abaixo
CSS
Continuação

Visualização
CSS
Exemplo2
CSS
• Visualização

1cm

1c
m
5cm 5cm
1.5c 1.5cm
1c
m m
1cm
A propriedade padding
• Define um valor para os espaçamentos entre o
conteúdo e as bordas dos elementos HTML.São
elementos invisíveis que criam uma área vazia ao
redor de determinado elemento HTML.

 padding-top: Define a espaçamento superior;


 padding-right: Define a espaçamento direita;
 padding-bottom: Define a espaçamento inferior;
 padding-left: Define a espaçamento esquerda;
 padding: Maneira abreviada para todas os
espaçamentos
A propriedade padding
• Em declaração única a ordem das espaçamentos é:
superior, direito, inferior e esquerdo.
• Há quatro modos de se declarar abreviadamente os
espaçamentos:
• padding: valor1 - Os 4 espaçamentos terão valor1;
• padding: valor1 valor2 - Espaçamento superior e
inferior terão valor; espaçamento direito e esquerdo
terão valor2
• padding: valor1 valor2 valor3- Espaçamento superior
terá valor; espaçamento direito e esquerdo terão valor2;
espaçamento inferior terá valor3
• padding: valor1 valor2 valor3 valor4 - Espaçamentos
superior, direito, inferior e esquerdo nesta ordem.
CSS - padding
Exemplo:

Visualização:
5%
As propriedades “list”
• Esta categoria de propriedades permite formatar diversas
características das listas HTML.
• Existem três tipos de listas HTML: Listas Não-
Ordenadas(<ul>), Listas Ordenadas (<ol>) e Listas de
Definição (<dl>).

 list-style-image: Imagem como marcador da lista;


 list-style-position: Onde o marcador da lista é posicionado;
 list-style-type: Tipo do marcador da lista;
 list-style: Maneira abreviada para todas as propriedades.
Permite declarar de forma abreviada as propriedades de
formatação de listas.
CSS - list
• Valores válidos para as propriedades list
list-style-image:
d) none
e) URL: url(caminho/imagem.gif)
CSS - list
Exemplo: foi definida uma imagem para ser o
marcador
CSS - list
• list-style-position:
• Define onde o marcador deve ser colocado

• outside: marcador fora do alinhamento do texto


• inside: marcador alinhado com texto
Exemplo: list-style-position
Visualização
CSS - list
• Propriedades de controle de dimensões
• list-style-type:
c) none: sem marcador;
d) disc: círculo (bolinha cheia);
e) circle: circunferência (bolinha vazia;)
f) square: quadrado cheio;
g) decimal: números 1, 2, 3, 4;
h) decimal-leading-zero;
i) lower-roman: romano minúsculo i, ii, iii, iv.
j) upper-roman: romano maiúsculo I, II, III, IV.
k) lower-alpha: letra minúscula a, b, c, d.
l) upper-alpha: letra maiúscula A, B, C, D.
CSS - list
Visualizaçã
o
CSS
• AS PROPRIEDADES “BACKGROUND”
• Permitem a formatação dos fundos dos elementos
HTML.

• background-color:
 código hexadecimal: #FFFFFF
 código rgb: rgb(255,235,0)
 nome da cor: red, blue, green, etc
CSS
Exemplo: Visualização
CSS
• background-image:
• Aplica uma imagem de fundo no elemento
c) nome (nenhum);
d) url(endereço para a imagem)
• background-repeat:
• no-repeat: Não repete;
• repeat: Repete vertical e horizontal;
• repeat-y: Repete vertical;
• repeat-x: Repete horizontal.
CSS
• Exemplo:
CSS
• background-attachment:
• fixed: A imagem permanece fixa na tela enquanto a página é rolada;
• scroll: Especifica que a imagem devem rolar junto com a página
• background-position:
a) center center
• x-pos y-pos
b) center left
• x-% y-%
c) center right
• top left
d) bottom left
• top center
e) bottom center
• top right
f) bottom right

• background: Permite especificar de forma abreviada os


valores das outras propriedades.
CSS
• Exemplo:
CSS
• Pseudo-elementos CSS
• São usados em CSS, para adicionar efeitos a um
seletor, ou a parte de um seletor.
• A sintaxe dos pseudo-elementos:
seletor:pseudo-elemento
{propriedade: valor;}
• As classes em CSS podem também ser usadas com
pseudo-elementos.
• Esta regra permite que você defina diferentes
efeitos para pseudo-elementos localizados em
diferentes lugares em uma mesma página.
CSS
• Pseudo-classes
. Sua sintaxe é a seguinte:
Seletor:pseudo-classe{propriedade:valor;}

As pseudo-classes também também podem ser combinadas


com seletores de classe, obedecendo a seguinte sintaxe:
• classe:pseudo-classe {propriedade:valor;}
• Seletor.classe.pseudo-classe {propriedade:valor;}
CSS
• Pseudo-classes para links. Foram criadas para
aplicar efeitos em marcações<a></a>, ou seja,
em hyperlinks.
• :link – formata os hyperlinks não visitados;
• :visited - formata os hyperlinks já visitados;
• :hover - formata os hyperlinks que estão com o
cursor do mouse sobre eles;
• :active - formata os hyperlinks ativados

Obs1: a pseudo-classe “:hover” pode ser aplicada em qualquer


elemento HTML.
CSS
CSS
• O pseudo-elemento first-letter
Permite aplicar uma formatação ao primeiro caractere
de um elemento. Exemplo:

Visualização
:
CSS
• O pseudo-elemento first-line
Permite formatar a primeira linha de um texto contido em um
elemento. Exemplo:

Visualização