Esta apostila tem por objetivo mostrar de modo fácil como criar websites utilizando as linguagens HTML e CSS; e através do desenvolvimento de exemplos práticos, o leitor conhecerá de forma resumida e direta os principais recursos que envolve o desenvolvimento de layouts web. Apostila de programação para web: HTML e CSS Prof. Msc. Regilan Meira Silva http://www.regilan.com.br [email protected].
100
Embed
Apostila de programação para web: HTML e CSSregilan.com.br/wp-content/uploads/2015/09/Apostila-Programacao-WEB... · Adicionar mensagens que rolam na tela ou alterar as mensagens
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Esta apostila tem por objetivo mostrar de
modo fácil como criar websites utilizando
as linguagens HTML e CSS; e através do
desenvolvimento de exemplos práticos, o
leitor conhecerá de forma resumida e
direta os principais recursos que envolve o
desenvolvimento de layouts web.
Apostila de programação para web: HTML e CSS
Prof. Msc. Regilan Meira Silva http://www.regilan.com.br [email protected].
O sistema com o qual está construído a web se chama hipertexto e é um emaranhado
de páginas conectadas com links. A web não só se limita a apresentar textos e links, também
pode nos oferecer imagens, vídeos, áudio e todo tipo de apresentações, chegando a ser o
serviço mais rico em meios da Internet. Por esta razão, para nos referir ao sistema que
implementa o web (hipertexto), foi acunhado um novo termo que é hipermídia, fazendo
referência a que o web permite conteúdos multimídia.
A construção de páginas web baseiam-se nas linguagem XHTML + CSS + JAVASCRIPT,
que são linguagens utilizadas para estruturar e formatar o conteúdo de um website. Quando
vemos uma página web em nosso navegador, ou cliente web, ela parece ser uma só entidade,
mas não é assim. Uma página WEB é composta por uma infinidade de diferentes arquivos,
como são as imagens, os possíveis vídeos e o mais importante: o código fonte.
O código das páginas está escrito em uma linguagem chamada HTML, que indica
basicamente onde colocar cada texto, cada imagem ou cada vídeo e a forma que terão ao
serem colocados na página.
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para
definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML
ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um
documento.Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um
link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas
as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar
apenas um arquivo. Cabem a CSS todas as funções de apresentação de um documento e ao
HTML todas as funções de marcação e estruturação de conteúdos. Uma página web é
composta então de CSS + HTML.
JavaScript é uma linguagem de programação criada principalmente para as funções de
validação de formulários no lado cliente (programa navegador) e interação com a página.
Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do
Java, mas é totalmente diferente no conceito e no uso. Podemos fazer com JavaScript as
seguintes operações:
Adicionar mensagens que rolam na tela ou alterar as mensagens na linha de
status do navegador.
Validar os conteúdos de um formulário e fazer cálculos.
Exibir mensagens para o usuário, tanto como parte de um pagina da Web
como em caixas de alertas.
Fazer animações de imagens ou criar imagens que mudam quando você move
o mouse sobre elas.
Detectar o navegador em utilização e exibir conteúdo diferente para
navegadores diferentes.
Detectar plug-ins instalados e notificar o usuário se um plug-ins foi exigido.
Etc.
Esta apostila tem o objetivo de apresentar os recursos presentes na linguagem HTML,
CSS e Javascript para a criação de websites estáticos, sendo assim voltada a parte introdutória
dos estudos relacionados ao desenvolvimento para web.
2. PRIMEIROS ELEMENTOS HTML: PARÁGRAFOS, CABEÇALHOS E LISTAS
A finalidade da (X)HTML, desde sua invenção, é a de ser uma linguagem de marcação e
estruturação de hipertextos. Um documento é visto como um conjunto de eventos
concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O
HTML fornece a base para a construção de sistemas hipertexto padronizados, consistindo de
documentos que aplicam os padrões de maneira particular. Para escrever (X)HTML existem
elementos que são representados por tags ou etiquetas.
Tags são pares de sinais destinados a englobar conteúdos e têm finalidade informar ao
navegador sobre qual o tipo de conteúdo está nela contido.
Observe a marcação a seguir:
<tag inicial> Nonon OnoNonono </tag final>
A sintaxe geral da HTML segue o modelo mostrado acima, ou seja, uma marcação
indicando o início e outra mostrando o fim de um conteúdo. As marcas inicial e final são
chamadas de tags, que, além de delimitar conteúdos, informam a natureza desses conteúdos.
Um par de tags constitui um elemento.
Observe a marcação (X)HTML para um parágrafo:
<p> Texto de um parágrafo </p>
Escrevem-se as tags de abertura e de fechamento entre os sinais: “<” e “>” e usa-se
uma barra invertida “\” logo após o sinal “<” para indicar a tag de fechamento.
Existem alguns elementos que são representados por uma tag. São os elementos
vazios, assim chamados por não englobarem conteúdos. Tais elementos são empregados na
marcação para acrescentar informação ao documento. Há um elemento (X)HTML destinado a
causar uma quebra de linha em um texto, para forçar um quebra de linha existe o elemento
“br”. Para efeito de padronização o elemento “br” é representado com uma barra antes do
sinal de fechamento da tag e o espaço em branco antes da mesma.
Exemplo tag “br”:
<p>Texto na primeira linha <br />Texto na segunda linha</p>
Atributos são informações adicionais sobre um elemento HTML. Os atributos são
definidos dentro da tag de abertura do elemento. No exemplo a seguir, o atributo style é
utilizado para um elemento parágrafo.
Exemplo:
<p style=“color:red”> Parágrafo na cor vermelha </p>
A sintaxe para atributos consiste no nome do atributo seguido por um sinal = (igual) e
o valor do atributo escrito entre aspas. Outro exemplo:
<a href=“notas.html”> Notas da IV Unid.</a>
A marcação acima diz ao navegador que o texto é um hiperlink que remete o usuário
ao documento que contém as notas da IV Unidade. Estudaremos neste capítulo os seguintes
elementos:
Tags para estrutura geral da página:
<html>, <head> e <body>
Tags para títulos, cabeçalhos e paragráfos
<title>, <h1> a <h6> e <p>
Tags para comentários
<!-...->
Tags para lista
<ol>, <ul>, <li>, <dt> e <dd>
2.1. Tags para estrutura geral de uma página: <html>, <head> e <body>
As tags para estrutura geral de uma página HTML são: <html>, <head> e <body>. A
TAG <html> engloba toda a marcação HTML do documento, que é chamado de elemento raiz
do documento. Os demais códigos HTML estão localizados entre as suas tags de abertura e
fechamento.
Exemplo:
<html>
... A sua página
</html>
O elemento <head> Especifica que as linhas dentro dos pontos de início e término da
tag são destinadas a agrupar outros elementos contendo informações sobre o documento,
como título do documento, folha de estilo(css), links entre outras informações sobre o
conteúdo do documento.
Exemplo:
<html>
<head>
<title>Este é o título. Veja mais nos próximos
slides</title>
</head>
</html>
O elemento <body> identifica o corpo da página. Todo o conteúdo da página deve
estar dentro da tag <body>:
<html>
<head>
<title>Este é o título. Veja mais no próximo
slide.</title>
</head>
<body>
... A sua página...
</body>
</html>
O elemento <title> indica o título da página e deve ser especificado entre os
elementos <head> ... </head>. O titulo aparece na barra de títulos do navegador e é utilizado
em sistemas de buscas e como favoritos do navegador.
2.2. Tags para cabeçalho e paragrafo: <p>, <h1> a <h6>
Os cabeçalhos (<h1<, h2>, <h3>, <h4>, <h5>, <h6>) servem para dividir seções de
texto. Exemplo:
<h1>Faturamento da Indústria Paulista cai 13,4 % em um ano </h1>
Ao contrário dos títulos, os cabeçalhos podem ter qualquer extensão e deverão ser
especificados no corpo do documento <body> </body>.
Existem seis níveis de cabeçalho, veja exemplo:
<body>
<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>
</body>
O código HTML de cabeçalhos mostrado acima será apresentado assim no navegador:
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
OBS: Quanto menor o número do cabeçalho, maior será o tamanho da fonte
Para separar blocos de texto em paragráfos, usamos o elemento paragrafo: <p>.
Exemplo:
<body>
<p> Os parágrafos delimitados por etiquetas “p” podem ser
facilmente justificados à esquerda, ao centro ou à direita,
especificando tal justificação no interior da etiqueta por meio
de um atributo align. Um atributo não é mais do que um parâmetro
incluído no interior da etiqueta que ajuda a definir o
funcionamento da etiqueta de uma forma mais pessoal.
</p>
<p>
Os atributos têm seus valores indicados entre aspas (“).O
atributo align toma determinados valores que são escritos entre
aspas. Em algumas ocasiões necessitamos especificar alguns
atributos para o funcionamento correto da etiqueta. Em outros
casos, o próprio navegador toma um valor definido por padrão.
Para o caso de align, o valor padrão é left.
</p>
</body>
2.3. Tags para listas: <ul>, <ol> a <li>
Existe três tipos de listas:
Listas numeradas, ou classificadas, geralmente marcadas com números;
Listas com marcadores, ou listas não classificadas;
Listas de glossário, nas quais cada item na lista tem um termo e uma definição para
ele, e que é organizada de forma que o termo esteja de alguma forma selecionado
ou destacado.
As listas numeradas são listas nas quais cada item é numerado sequencialmente. Para
a lista numeradas utiliza-se a tag <ol>...</ol>. Para os itens lista utiliza-se a tag <li>...</li>.
Exemplo:
<body>
<p> Instalando o seu novo sistema operacional. </p>
<ol>
<li> Insira o CD-ROM no seu drive de CD-ROM. </li>
<li> Selecione EXECUTAR. </li>
<li> Digite a letra para o drive do seu CD-ROM. </li>
<li> Siga as instruções do programa de instalação. </li>
<li> Reinicie o seu computador depois de instalar todos os
arquivos.</li>
<li> Cruze os dedos </li>
</ol>
</body>
O código HTML da lista acima será apresentado assim no navegador:
Instalando o seu novo sistema operacional
1. Insira o CD-ROM no seu drive de CD-ROM.
2. Selecione EXECUTAR.
3. Digite a letra para o drive do seu CD-ROM.
4. Siga as instruções do programa de instalação.
5. Reinicie o seu computador depois de instalar todos os
arquivos.
6. Cruze os dedos
O atributo start, aplicado a tag <ol> indica o valor inicial da lista que é será sempre um
valor numérico.
Exemplo:
<ol start=“10”>
<li> Insira o CD-ROM no seu drive de CD-ROM. </li>
<li> Selecione EXECUTAR. </li>
<li> Digite a letra para o drive do seu CD-ROM. </li>
<li> Siga as instruções do programa de instalação. </li>
<li> Reinicie o seu computador depois de instalar todos os
arquivos.</li>
<li> Cruze os dedos </li>
</ol>
As listas não classificadas, são listas nas quais cada item é representado por
marcadores (bullets). Para a lista não-classificadas utiliza-se a tag <ul>...</ul> e para os itens
lista utiliza-se a tag <li>...</li>. Exemplo:
<body>
<p> Coisas que eu gostaria de fazer de manhã. </p>
<ul>
<li> Tomar uma xícara de café. </li>
<li> Ver o sol nascer. </li>
<li> Ouvir o canto dos pássaros. </li>
<li> Ouvir o vento assobiando nas árvores. </li>
<li> Amaldiçoar os barulhos de construção por trazerem o
mau humor.</li>
</ul>
</body>
O código HTML apresentado acima, será apresentado assim no navegador:
Coisas que eu gostaria de fazer de manhã.
• Tomar uma xícara de café.
• Ver o sol nascer.
• Ouvir o canto dos pássaros.
• Ouvir o vento assobiando nas árvores.
• Amaldiçoar os barulhos de construção por trazerem o mau
humor.
Uma lista de glossário possue duas partes.
Um termo;
A definição do termo.
Para o termo usa-se a tag <dt> e para a definição do termo usa-se a tag <dd>. Toda
lista de glossário é indicada entre as tags <dl>...</dl>. Exemplo:
<body>
<dl>
<dt> Manjericão </dt>
<dd>
Anual. Pode crescer até quatro pés de altura, o
perfume de suas pequenas flores brancas é paradisíaco.
</dd>
<dt> Orégano </dt>
<dd>
Perene. Espalha raízes no subsolo e é difícil de ser
evitado quando se estabelece.
</dd>
</dl>
</body>
O código HTML apresentado acima, será apresentado assim no navegador:
Manjericão
Anual. Pode crescer até quatro pés de altura, o perfume de
suas pequenas flores brancas é paradisíaco.
Orégano
Perene. Espalha raízes no subsolo e é difícil de ser evitado
quando se estabelece.
Um resumo dos elementos básicos pode ser representado pelas imagens a seguir:
Nas imagens a seguir são apresentandos algumas páginas web que utilizam as tags
apresentadas neste capítulo.
Figura 1. Site globo.com
Figura 2. Site tudogostoso.com.br
Figura 3. Site folha.com.br
2.4. Exercícios práticos
Questão 01. Com base nas TAGS já estudas, desenvolver o código HTML para a
estrutura abaixo. Observações: Utilize lista de definição para os termos e definição
das doenças listas
DICIONÁRIO MÉDICO
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
I (1 - 7):
Icterícia Pigmentação amarelada da pele e mucosas devido ao aumento da concentração
de bilirrubina no sangue. Pode ser acompanhada de sintomas como colúria (ver),
prurido, etc. Associa-se a doenças hepáticas e da vesícula biliar, ou à hemólise
(ver).
Imunodeficiência Distúrbio do sistema imunológico que se caracteriza por um defeito congênito
ou adquirido em um ou vários mecanismos que interferem na defesa normal de
um indivíduo perante infecções ou doenças tumorais.
Impetigo Infecção da pele e mucosas, produzida por uma bactéria chamada Estreptococo,
e caracterizada pela presença de lesões avermelhadas, com formação posterior
de bolhas que contém pus e que, ao romper-se, deixam uma crosta cor de mel.
Pode ser transmitida por contato entre as pessoas, como em creches.
Imunização Processo mediante o qual se adquire, de forma natural ou artificial, a capacidade
de defender-se perante uma determinada agressão bacteriana, viral ou
parasitária. O exemplo mais comum de imunização é a vacinação contra diversas
doenças (sarampo, coqueluche, gripe, etc.).
Inconsciência Distúrbio no estado de alerta, no qual existe uma incapacidade de reconhecer e
reagir perante estímulos externos. Pode apresentar-se em tumores, infecções e
infartos do sistema nervoso central, assim como também em intoxicações por
substâncias endógenas ou exógenas.
Incontinência Incapacidade de controlar o esvaziamento da bexiga ou do reto. Como resultado
produz-se perda de urina ou matéria fecal involuntariamente. As pessoas com
incontinência podem apresentar um defeito adquirido ou congênito no
mecanismo esfincteriano, ou alguma anormalidade neurológica que as impeça de
reconhecer o estado de plenitude da bexiga ou reto e de promover esvaziamento
destes quando for conveniente. .
Infarto Morte de um tecido por irrigação sangüínea insuficiente. O exemplo mais
conhecido é o infarto do miocárdio, no qual se produz a obstrução das artérias
coronárias com conseqüente lesão irreversível do músculo cardíaco.
<< Anterior Próximo >>
Questão 02. Em outra página HTML, desenvolver um código HTML para a estrutura abaixo:
LEI Nº 8.112, DE 11 DE DEZEMBRO DE
1990
O PRESIDENTE DA REPÚBLICA;
Faço saber que o Congresso Nacional decreta e eu sanciono a seguinte lei:
TÍTULO II
Do Provimento, Vacância, Remoção, Redistribuição e Substituição
SEÇÃO I - Disposições Gerais
Art. 5. São requisitos básicos para investidura em cargo público:
I. a nacionalidade brasileira;
II. o gozo dos direitos políticos;
III. a quitação com as obrigações militares e eleitorais;
IV. o nível de escolaridade exigido para o exercício do cargo;
V. a idade mínima de dezoito anos;
VI. aptidão física e mental.ível do músculo cardíaco.
Art. 8. São formas de provimento de cargo público:
1. nomeação;
2. promoção;
3. (Revogado pela Lei nº 9.527, de 10/12/97)
4. (Revogado pela Lei nº 9.527, de 10/12/97)
5. readaptação;
6. reversão;
7. aproveitamento;
8. reintegração;
9. recondução.
Art. 36. Remoção é o deslocamento do servidor, a pedido ou de ofício, no âmbito do mesmo
quadro, com ou sem mudança de sede.
Parágrafo único. Para fins do disposto neste artigo, entende-se por modalidades de
remoção:
I. de ofício, no interesse da Administração; (Inciso acrescentado pela Lei nº 9.527, de
10/12/97)
II. a pedido, a critério da Administração; (Inciso acrescentado pela Lei nº 9.5 27, de
10/12/97)
III. a pedido, para outra localidade, independentemente do interesse da
Administração: a. para acompanhar cônjuge ou companheiro, também servidor público civil ou
militar que foi deslocado no interesse da Administração;
b. por motivo de saúde do servidor, cônjuge, companheiro ou dependente;
c. em virtude de processo seletivo promovido
Questão 03. Em algumas páginas WEB é comum o desenvolvedor do site colocar um ícone junto ao endereço do site na barra do navegador. Realize uma pesquisa na Internet sobre o tema e construa uma página HTML com um ícone adicionado ao endereço do site.
EXEMPLO: Ver site do GLOBO.COM, UOL, etc.
3. O ELEMENTO <IMG> E NOÇÕES FUNDAMENTAIS DE CSS: FORMATAÇÃO DE FONTE E
BACKGROUND
3.1. Imagens: <img>
Para inserir uma imagem em um documento web, utilizamos a tag <img>>. O elemento <img> insere imagens que são apresentadas juntamente com os textos presente no documento. Um atributo SRC especificando o caminho físico onde encontra-se a imagem deve estar presente, da seguinte forma:
<img src=“URL da imagem” />
Podemos referenciar imagens do nosso próprio servidor, ou imagens localizadas em outro servidor. As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.jpg (ou *.jpeg), *.png.
Outros atributos podem ser definidos sobre a origem, colocação e comportamento da imagem:
ALT: Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente
TITLE: O atributo title permite que seja configurado um texto que será exibido quando
o cursor do mouse estiver sobre a imagem.
WIDTH e HEIGHT: Atributos de dimensão (largura e altura respectivamente) da
imagem, em pixels. Uma das vantagens de se usar esses atributos é que o browser pode
montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser
reservado a elas.
BORDER: Cria uma borda ao redor da imagem. Para retirar a borda, configure com
valor 0(zero). Quanto maior o valor, mais larga será a borda.
ALIGN: O atributo align permite alinhar a imagem com um texto.
LEFT: a figura é desenhada como uma imagem alinhada à esquerda, com o
texto fluindo ao seu redor.
RIGHT: a figura é desenhada como uma imagem alinhada à direita.
TOP: a parte superior do texto ao redor é alinhada com a parte superior da
imagem.
MIDDLE: a linha de base do texto ao redor é alinhada com a parte central da
imagem.
BOTTOM: A linha de base do texto ao redor é alinhada com a parte inferior da
imagem.
3.2. Noções de CSS: regras da sintaxe, formatação de textos e background
3.2.1. Regras da sintaxe CSS
Folhas de estilo em cascata é um mecanismo simples para adicionar estilos (por
exemplo: fontes, cores, espaçamentos) aos documentos web. Segundo os idealizadores da
WEB, não cabe à HTML fornecer informações ao agente do usuário sobre a apresentação dos
elementos. Por exemplo: cores de fontes, tamanho de textos, posicionamento e todo o
aspecto visual de um documento não deve ser função da HTML. Cabem às CSS todas as
funções de apresentação de um documento. Sendo assim um website é formado por (X)HTML
+ CSS. Entre as vantagens de se utilizar CSS merece destacar:
Facilidade de manutenção: definição de estilos que se apliquem a toda página
ou website. As mudanças são feitas de forma centralizada
Novas possibilidades de apresentação visual: muitas funcionalidades
permitidas pela CSS não são suportadas pelo HTML
Diminuição do tempo de download: não é necessário incluir tags de
formatação na página de forma que a leitura do código fonte fica mais fácil
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como
será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma
Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um
seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:
seletor{propriedade:valor;}
Seletor: é o elemento HTML identificado por sua tag, ou por uma classe, ou
por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>,
<form>, .minhaclasse, etc...);
Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por
exemplo: font, color, background, etc...).
Valor: é a característica específica a ser assumida pela propriedade (por
exemplo: letra tipo arial, cor azul, fundo verde, etc...)
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor
separados por dois pontos e entre chaves { }.
Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula
para separá-las.
Veja exemplos:
p {
font-size: 12px;
}
body
{
color: #000000;
background: #FFFFFF;
font-weight: bold;
}
No exemplo abaixo, o seletor é o corpo da página(body), a propriedade é a cor do
texto e o valor é a cor azul.
body {
color: #0000CC;
}
Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ':
h3 {
font-family: "Comic Sans MS"
}
Para maior legibilidade das folhas de estilo, é uma boa prática escrever cada
declaração (propriedade e valor) em linhas distintas. Veja exemplo:
p {text-align: right;color: #FF0000;}
Essa prática não é obrigatória! A regra abaixo tem o mesmo efeito da regra acima e
ambas as sintaxes estão corretas:
p {
text-align: right;
color: #FF0000; }
Uma regra CSS pode ser aplicada a vários seletores ao mesmo tempo. Para isso separe
cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A
cor de todos os cabeçalhos será verde.
h1, h2, h3, h4, h5, h6 {
color: #00FF00;
}
Nos exemplos já apresentados, usamos as próprias tags HTML como seletor. Seletores
CSS não estão restritos às tags, e podem ser diversas entidades da marcação ou a combinação
delas. Seletores podem ser atributos do HTML e seus valores, combinações de tags, entre
outros.
Em um site com CSS é comum criar um objeto chamado classe e definir as regras CSS
independente de uma tag HTML.
As classes podem ser aplicadas a qualquer elemento HTML. Podemos ainda aplicar
estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para
cada um deles.
No CSS a sintaxe consiste na combinação do sinal de ponto (.) imediatamente seguido
do nome da classe.No código HTML deverá ser criado um atributo para a classe (class)
Pode-se ainda usar o nome do elemento HTML para completar a grafia do seletor.
A sintaxe de uma classe é representada da seguinte forma:
.nome_da_classe{propriedade:valor;}
Ou:
elemento_html.nome_da_classe{propriedade:valor;}
O objetivo de criar uma classe é aplicar uma regra comum a somente alguns tipos em
diferentes seletores. No CSS a sintaxe consiste na combinação do sinal de ponto (.)
imediatamente seguido do nome da classe.
No código HTML deverá ser criado um atributo para a classe (class). Pode-se ainda usar
o nome do elemento HTML para completar a grafia do seletor. Veja exemplo a seguir:
formatacao1
{
color:#0099FF;
border-color:#000000;
border:thin;
}
p.formatacao2
{
color:#99CC33;
border-color:#00FF00;
border:medium;
}
No documento HTML as regras são aplicadas conforme abaixo:
<p class =“formatacao1"> este é o parágrafo com a primeira
formatação.</p>
<p class =“formatacao2"> este parágrafo com a segunda
formatação. </p>
Outro seletor bastante utilizado é o seletor ID. Este seletor difere do seletor de classe,
por ser ÚNICO. Um seletor ID deve ser aplicado a UM e somente UM elemento HTML dentro
do documento.
A sintaxe do seletor ID é semelhante a do seletor classe, a diferença é que usamos o
sinal de “#” ao invés do “.”
Veja a sintaxe abaixo:
#nome_do_id{propriedade:valor;}
No documento HTML, aplicamos o seletor ID através do atributo ID, conforme exemplo
abaixo:
<p id=“esporte"> Parágrafos relativo a esportes.</p>
<p id=“tecnlogia"> Parágrafos relativo a tecnologia.</p>
Você pode inserir comentários nas CSS para explicar seu código, e principalmente
ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do
código.
Para adicionar comentários ao código CSS utilizamos a seguinte sintaxe:
/* COMENTÁRIOS DE UMA LINHA */
/* COMENTÁRIOS
DE MÚLTIPLAS
LINHAS */
3.2.2. Métodos de vinculação do CSS ao HTML
As folhas de estilos são vinculadas no documento HTML de três formas.
Estilo Externo (linkadas ou importadas);
Estilo Interno;
Estilo Inline.
Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um
documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo
html e que tem a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha
de estilo externa , podemos alterar a aparência de um site inteiro mudando um arquivo
apenas (o arquivo da folha de estilo). Para incluir um arquivo externo .css a um documento
html, usamos a tag <link> entre as tags <head> </head> de acordo com a seguinte sintaxe:
font-family – lista com os nomes da fontes que devem ser utilizadas nos textos por
ordem de preferência, começando da mais desejada; ex.: serif, Verdana, Arial, “Times
New Roman”;
font: atalho para especificar as propriedades anteriores em um único local.
Exemplos:
h4 { font-style: italic; }
h2 { font-variant: small-caps; }
body { font-weight: bold; }
h1 { font-size: 15pt; }
p { font-family: serif; }
h6 { font-family: Arial, Verdana, Helvetica; }
h5 { font: italic normal bold 14pt Arial; }
A propriedade background define as características do fundo dos elementos HTML. Elas
são representadas de acordo com a relação abaixo:
color : cor do texto;
background-color : cor de fundo; ex.: cor, transparent;
background-image : imagem que será utilizada como fundo do elemento; e as
propriedades a seguir poderão ser usadas;
background-attachment: define se a imagem ficará fixa ou se acompanhará a rolagem
da área de apresentação; ex.: fixed,scroll;
background-repeat: como a imagem será repetida se o tamanho dela for menor que a
área de apresentação; ex.: no-repeat, repeat, repeat-x, repeat-y;
background-position: posição inicial da imagem na área de apresentação; ex.: 10%
20%, 100 200, left, center, right, top,center, bottom;
background: atalho para especificar as propriedades anteriores em um único local.
Exemplo:
a {
color: #0000FF;
background-color: #FFFF00;
}
body
{
background-image: url(fundo.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
}
h3
{
background: #0000FF url(fundo.gif) no-repeat scroll center
top;
}
3.3. Exercícios práticos
Questão 01. Criar uma regra CSS para formatação de parágrafo abaixo com as seguintes configurações:
Cor da fonte Amarela
Espessura da fonte: 900
Estilo Itálico
Tipo de fonte Arial
Cor de fundo verde Para a regra acima você deverá criá-la utilizando as três formas vistas em aula:
a. Método externo b. Método interno c. Método inline
Questão 02. Em relação às propriedades de background, criar uma classe para cada
regra CSS abaixo:
a. Cor de fundo de uma página azul claro b. Cor de fundo de um parágrafo em verde claro c. Colocar uma imagem de fundo que permita a repetição em qualquer estilo e
que não acompanhe o deslocamento da página d. Colocar uma imagem de fundo e repeti-la na vertical e. Colocar uma imagem de fundo e não repeti-la f. Colocar uma imagem de fundo sem repeti-la e centralizada g. Formatar o fundo de uma página na cor amarela, uma figura de fundo, sem
repetição, centralizada e que acompanhe o deslocamento da página Ao final crie uma página HTML com vários elementos (cabeçalho ou parágrafos) para testar cada uma das regras acima. Questão 03. Em relação às propriedades de fonte, criar um id para cada uma das regras CSS abaixo:
a. Tipo de letra Arial e cor vermelha b. Tipo de letra Times, com tamanho 22 e na cor verde c. Tipo de letra Comic Sans Serif, com tamanho 20, na cor azul e estilo itálico d. Formatar a fonte de uma página na cor amarela, em negrito, de tamanho 14,
com espessura média e tipo de letra Verdana
Ao final crie uma página HTML com vários elementos (cabeçalho ou parágrafos) para testar cada uma das regras acima.
4. LINKS E TABELAS HTML E PROPRIEDADES CSS PARA FORMATAÇÃO DE BORDAS,
ESPAÇAMENTO E MARGENS.
Neste capítulo conheceremos como fazer a ligação de nossas páginas através de links,
organizar dados em tabelas e também o model-box do CSS(margem, borda e espaçamentos.
Um resumo dos elementos que iremos aprender:
Html:
Links: <a href=“”>
Áudio e Vídeo: <embed />
Tabelas: <table> <tr> <td> </td> </tr></table>
Divs: <div> </div>
CSS
Margin: margem
Padding: espaçamento interno
Border: bordas
4.1. Links
Um link é uma conexão para uma página externa ao documento. Pode direcionar o
visitante para outra página do mesmo site ou conduzí-lo à uma página externa ao site. Os links
têm sua sintaxe geral conforme a seguinte marcação abaixo:
<a href=“http://www.regilan.com.br”> Site do Professor
Regilan </a>
A referência ao documento pode ser feita por:
Caminho Absoluto: corresponde ao endereço completo do documento, utilizado
quando os documentos estão em servidores diferentes.
Exemplo:
<a href = http://maquina/diretorio/pagina.html>
Caminho Relativo: quando o documento a ser acessado está no mesmo servidor que a
A marcação HTML apresentada no slide anterior produz o seguinte resultado:
Caso seja necessário substituir o botão de submit por uma imagem que tenha a
mesma função, é possível utilizando a tag: <input type=”image”>
<input type=”image” src=”local da imagem” alt=”texto” border=”0”
>
Alguns novos tipos de componentes de entrada surgiram com a HTML 5,
listaremos a seguir alguns dos principais:
date:
<input type=”date”/>
number:
<input type="number" min="1" max="5">
range:
<input type="range" min="0" max="10">
search:
<input type="search" />
time:
<input type=“time" />
7.1. Exercícios práticos
Questão 01. O formulário a seguir é um formulário padrão para comentários em Blogs. Utilize as tags de formulário para desenvolvê-lo conforme abaixo:
Questão 02. O formulário abaixo representa uma página de cadastro de um usuário em um sistema interno de uma universidade. Utilize as tags de formulário para desenvolvê-lo conforme abaixo:
Questão 03. Construir um formulário em HTML e aplicar as regra css de forma que fique
semelhante a imagem abaixo:
Questão 04. Desenvolver o seguinte formulário de cadastro com as seguintes características.
A célula com o texto: “Não é associado? Faça seu cadastro” deverá ter cor de fundo
azul claro com texto na cor preta. A outra célula da mesma linha deverá ter cor de
fundo azul escuro
O campo UF, deverá vir com as siglas de todos os Estados Brasileiros para o usuário
escolher
O campo Est. Civil deverá vir com os seguintes dados: Solteiro, Casado, Viúvo e
Divorciado
O campo senha deverá ter os dados escondidos. Ou seja, ao digitar os valores para
preencher o campo ele deverá está no formato de “password”
OBS: Todas as imagens utilizadas na página acima estão em uma pasta compactada junto
com a atividade.
8. JAVASCRIPT
8.1. Noções Gerais
JAVASCRIPT É UMA LINGUAGEM de programação interpretada criada em 1995,
como uma extensão do HTML para o browser Navigator 2.0. Hoje existem
implementações JavaScript nos browsers dos principais fabricantes.
Programas em JavaScript são interpretados linha-por-linha enquanto o browser
carrega a página ou executa uma rotina.
JavaScript é baseada em objetos. Trata suas estruturas básicas, propriedades
do browser e os elementos de uma página HTML como objetos (entidades com
propriedades e comportamentos) e permite que sejam manipulados através de
eventos do usuário programáveis, operadores e expressões.
Com JavaScript pode-se fazer diversas coisas que não é possível com HTML:
Realizar operações matemáticas e computação.
Abrir janelas do browser, trocar informações entre janelas, manipular
propriedades do browser como o histórico, barra de estado, plug-ins e
applets.
Interagir com o conteúdo do documento, alterando propriedades da
página, dos elementos HTML e tratando toda a página como uma
estrutura de objetos.
Interagir com o usuário através do tratamento de eventos
Para editar código JavaScript, é necesspario apenas um simples editor de texto,
como o Bloco de Notas do Windows.
Pode-se também usar um editor HTML. Alguns editores colocam cores ou dão
destaque ao código JavaScript. Outros até permitem a geração de código ou a
verificação de sintaxe.
Há três maneiras de incluir JavaScript em uma página Web:
Dentro de blocos HTML <script> ... </ script > em várias partes da
página.
Em um arquivo externo, importado pela página: para definir funções
que serão usadas por várias páginas de um site.
Dentro de descritores HTML sensíveis a eventos: para tratar eventos do
usuário em links, botões e componentes de entrada de dados, durante a
exibição da página.
A forma mais prática de usar JavaScript é embutindo o código na página dentro
de um bloco delimitado pelos descritores HTML <script> e </script>.
Pode haver vários blocos <script> em qualquer lugar da página.
<script>
... instruções JavaScript ...
</script>
O descritor <script> possui um atributo language que informa o tipo e versão da
linguagem utilizada. O atributo language é necessário para incluir blocos em outras
linguagens como VBScript. É opcional para JavaScript:
<script language="vbscript"> ...código em vbscript... </script>