HTML Cfitel - Cópia

HTML5+CSS3+JAVASCRIPT
+JQuery
ÍNDICE
HTML5 Fundamental
1. Introdução a web;
2. Introdução ao HTML5;
3. Elementos estruturais do HTML5;
4. Estrutura e Semântica;
Instituto de Telecomunicações | Bairro dos CTTs, Km7 – Luanda/Angola | Tel.: 940747200 | E-mail: itel.geral@gmail.com | www.itel.gov.ao
ÍNDICE
CSS3 Fundamental
1.Fundamentos
2.Sintaxe básica
3.Fontes
4.Selectores:
1.Selectores por tipo de Elementos
2.Selectores por Identificador
3.Selectores por Classe
5.Criação de Layouts
ÍNDICE
Javascript Fundamental
1.Fundamentos da Linguagem
2.Variáveis e Estrutura de controle ÍNDICE
E
3.Funções
4.Validando Formulários HTML
5.Criando Galeria de Imagem, Slide show com Jquery projecto Final
Introdução web
Web também pode ser sinônimo de WWW ou World Wide Web:
– Em português literal: Teia Mundial.
– Nada mais é do que um sistema de documentos em hipermédia que são interligados e
executados na internet.
Browser é um software ou aplicativo:
– Navegador de Internet:
1. Exibe conteúdo disponível na Web;
1.1 Recebe um arquivo HTML;
1.2. Exibe o conteúdo informado pelo HTML;
2. Recebe solicitações do usuário e busca
respostas nos servidores Web;
3. Retorna ao passo 1.
Introdução web
✓ Websites
Um Website, ou apenas Site, é um conjunto de Páginas Web:

– Em português: Sítio;
– É um determinado lugar demarcado;
• Existem diversos principais grupos de Websites:
– Institucionais, Informações, Aplicações, Armazenagem de Informações,
Comunitários e Portais.
Introdução web
✓ Páginas Web
O que são páginas web ?
– Arquivos de Texto:
• Padrão HTML;
• São armazenadas nos servidores Web;
• São exibidas na tela, para o usuário, pelo Browser;
A Web funciona em três camadas, o Front-end ou Client-side, o Back-end ou Server-

side e a camada de ligação, o Webserver .No começo a Web era constituída de HTML
puro. Sim, era muito feia. A primeira disputa para ver quem tinha os melhores sites
não foi feita pelos desenvolvedores mas sim pelos navegadores.
Introdução web
Quem conseguisse renderalizar melhor os sites ganharia uma disputa, e o vencedor
foi o Internet Explorer. Que se consagrou dominante no mercado de navegadores por
mais de uma década até o surgimento de bons concorrentes.
Servidores Web trabalham o tempo todo

aguardando e atendendo solicitações:
– Páginas Web;
– Imagens;
– Sons;
– Vídeos;
– Outros documentos.
Introdução web
✓ URL
❑ Uniform Resource Locator:
– Localizador-Padrão de Recursos;
– Popular: endereço;
– Composto pela identificação do protocolo:
• Ex: http, ftp, mms, etc...
– Seguido de uma identificação de local;
• protocolo://maquina/caminho/recurso – Exemplo:
• http://www.ifsc.edu.br/ensino/calendario
Introdução ao HTML5
❑ Definição de HTML
HTML não é realmente uma linguagem de programação; é uma
linguagem de marcação ou uma UI web (User Interface web), utilizada
para dizer ao navegador como exibir as páginas que são visitadas. Ela
consiste de uma série de elementos (marcas), que juntamos ao redor de
diferentes partes do conteúdo para que apareça ou comporte-se de uma
determinada forma. Por exemplo, veja a seguinte linha de conteúdo:
Introdução ao HTML5, CSS3, JAVACRIPT.
Se nós queremos oficialmente dizer que isso é um parágrafo, nós podemos envolver o
elemento em uma tag/marca (<p>):
<p> Introdução ao HTML5, CSS3, JAVACRIPT </p>
❑ O HTML actualmente
o Está nova versão (html5), traz consigo importantes mudanças quanto ao papel
do HTML no mundo da Web, através de novas funcionalidades como semântica, estilo
e interatividade.
Tudo o que é feito em HTML5 é semântica (tem significado), todas as formatações
em html5 utiliza uma outra tecnologia chamada CSS, que está na versão três (3) e a
interatividade com as páginas (pós execução no navegador) é utilizado uma outra
tecnologia denominada JavaScript (ECMAScript).
NOTA:
A tecnologia HTML de hoje, funciona melhor com a composição css e
javascript.
Introdução ao HTML 5
❑Sintaxe de um elemento HTML
❑ Descrição básica da composição de um elemento HTML
✓A tag/marca de abertura (opening tag): Consiste no nome da marca (no caso, p),
envolvido em chaves (chevrons) de abertura e fechamento. Isto demonstra onde o
elemento começa, ou onde o seu efeito se inicia — neste caso, onde é o começo do
parágrafo.
✓ A tag/marca de fechamento (closing tag): Isto é a mesma coisa que a marca de
abertura, exceto que inclui uma barra antes do nome do elemento. Isto demonstra
onde o elemento acaba — neste caso, onde fica o fim do parágrafo. Esquecer de
incluir uma marca de fechamento é um dos erros mais comuns de iniciantes, e
pode levar a resultados estranhos.
O conteúdo (content): Este é o conteúdo da marca, que neste caso é só texto.
A marca (element): A marca de abertura, de fechamento, junto com o conteúdo
formam o elemento HTML
❑ Sintaxe de um atributo HTML
Atributo contém informação extra sobre o elemento, que não queremos que apareça no
elemento de facto. Neste caso, o atributo classe (class) permite que dêmos ao elemento um
nome de identificação (editor-note), que depois pode ser utilizado para dar ao elemento
informações de estilo ou outras informações.
Um atributo deve ter sempre:

✓ Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um );
✓ O nome do atributo, seguido por um sinal de igual;
✓ Aspas de abertura e fechamento, envolvendo todo o valor do atributo.
✓ Instituto de Telecomunicações | Bairro dos– Luanda/Angola | Tel.: 940747200 | E-mail:
itel.geral@gmail.com | www.itel.gov
❑Aninhando os elementos HTML
Podemos colocar elementos dentro de outros elementos também — isto é
chamado aninhar (nesting). Se quisermos declarar que o gato é MUITO
rabugento, podemos envolver a palavra "muito" em um <strong>, o que
significa que a palavra deve ser fortemente enfatizada:
<p>Meu gatinho é <strong>muito</strong> mal humorado.</p>
Contudo, precisamos ter certeza que os elementos estão devidamente

aninhados: no exemplo acima, nós abrimos o elemento <p> primeiro, depois o
<strong>, então temos que fechar o </strong> primeiro e depois o </p>.
<p>Meu gatinho é <strong>muito mal humorado.</p> </strong>
OBS: Os elementos têm que abrir e fechar perfeitamente para que eles
estejam claramente dentro ou fora um do outro. Se eles se sobrepuserem como no
exemplo anterior, o browser vai tentar adivinhar o que estamos tentando dizer, o
que pode gerar resultados inesperados. Então não faça isso!
❑ Elementos vazios
Alguns elementos não têm conteúdo, e são chamados elementos vazios. Considere o
elemento <img> que é apresentado abaixo:
<img src=“Imagens_EA/tics.gif" alt="Minha imagem de teste">
Apresenta dois atributos(src e alt), mas não há tag </img> de fechamento, e não há
conteúdo interno. Isto acontece porque uma imagem não envolve conteúdo para ter
efeito em si mesma. Sua proposta é incorporar uma imagem na página HTML, no
lugar que o código aparece.
❑Sintaxe básica de uma página HTML
❑ Descrição básica da composição de uma página HTML
<!DOCTYPE html> : o doctype. Há muito tempo, quando o HTML era novo (por volta
de1991/2), doctypes eram criados para agir como links para um conjunto de regras
que a página HTML tinha que seguir para ser considerada bom HTML, o que poderia
significar checagem automática ou outras coisas úteis. No entanto, a sua utilização
servirá para indicar que o tipo de documento é do tipo HTML5.
<html></html> : o elemento <html>. Este elemento envolve todo o conteúdo da
página e às vezes é conhecido como o elemento raiz.
<head></head> : o elemento <head>. Este elemento age como um recipiente de
tudo o que desejamos incluir em uma página HTML, que não seja o conteúdo que
queremos mostrar para quem vê a nossa página. Isto inclui coisas como palavras
chave e uma descrição que queremos que apareça nos resultados de busca, CSS
para dar estilo ao conteúdo, declarações de conjuntos de caracteres, e mais.
❑ Descrição básica da composição de uma página HTML
<body></body> — o elemento <body>. Contém todo o conteúdo queremos mostrar ao
público que visita a nossa página, seja texto, imagens, vídeos, jogos, faixas de áudio tocáveis
entre outros.
<meta charset="utf-8"> — este elemento junto com o charset, aponta qual conjunto de
caracteres o documento deve utilizar, que inclui praticamente todos os caracteres conhecidos por
algumas linguagens humanas. Basicamente, isto pode lidar com todo conteúdo em texto que
colocarmos. Não há razão para não escrever este código, e vai ajudar-nos a evitar problemas
depois.
<title></title> — indica o título da página, que é o título que aparece no topo do browser
quando a página é carregada, e é utilizado para descrever a página quando colocarmos nos
favoritos.
<html lang=“PT-PT”> (lang) – o atributo lang no elemento raiz, indica ao web browser que a
página que está sendo carregada utiliza o idioma Português de Portugal
❑Ficheiro HTML no Sistema Operativo
Os ficheiros que são salvos ou guardados no sistema operativo, são composto
por um nome e um identificador do tipo de ficheiro, isto implica que, cada ficheiro
dentro do OS tenha um nome e um identificador do tipo de ficheiro (extensão) .
Por Exemplo:
Nomedoficheiro.extensão
Para ficheiros HTML, existem dois tipos de extensões válidos para salvar
ficheiro deste tipo: .html e .htm
Por Exemplo:
páginainicial.html
Note que: sempre que escrever marcações HTML ou editar, quer no bloco de
nota, sublime-text, notepad++, ou num outro editor de texto dedicado, certifica-te de
salvar o ficheiro com uma das extensões HTML.
❑ Navegadores da Web ou Web browsers
Toda marcação HTML que é salva ou um ficheiro html que é alterado, é visualizada
através do navegador da web, o navegador da web o é responsável pela interpretação e
execução do documento HTML. Sempre que trabalharmos com a linguagem HTML, os
efeitos visuais, serão possíveis se o documento for aberto num navegador da web.
Note que: estamos a trabalhar na versão cinco da Linguagem HTML, é importante que
instale o maior número de navegadores possíveis, de preferência as versões recentes
do google chrome, Firefox, opera, etc.
algumas versões de web browser não suportam as novas marcas da versão
cinco do HTML.
❑ Informação Extra
OBS.:
Existem outros elementos, para além dos que estudamos nesta aula e
podem ser encontrados nas fontes abaixo descriminadas!
Elementos estruturais do HTML5
❑ Principais Elementos do HTML
Os princincipais elementos do HTML utilizados para a composiçõ de uma página Web,

que ficam entre a tag <body> que é a tag que possui toda informação visivel da página,
serão apresentados a seguir:
Elementos de Formatação
Elementos de Cabeçalhos e Parágrafos:
<p> : Parágrafos;
<h1> a <h6> : Cabeçalhos;
<hr> : Réguas.
❑ Elementos de Formatação
<i> : Itálico;
<u> : Sublinhado;
<b> => <Strong> => <em> :Negrito, Importante, Enfatizado;
<s> : Rabiscado/Rasurado;
<font-color> : Atribui cor a um texto;
<small> : Diminui o tamanho do texto;
<big> : Aumenta o tamanho do texto;
<mark> : Realçado/Marcado;
<marquee> : Movimentar um texto da direita para esquerda;
<sub> : Formata um número para Índice;
<sup> : Formata um número para Expoente.
Instituto de Telecomunicações | Bairro dos,
dos CTTs,
Km7 Km7 – Luanda/Angola
– Luanda/Angola | Tel.:|940747200
Tel.: 940747200
| |
❑ Elementos de Âncora e Imagem
Elementos de Imagem:
<img> : Inserição de imagem;
src : Atributo que define o endereço/caminho do ficheiro da imagem a ser
exibida;
alt : Atributo que define um texto alternativo para a imagem;
width|height : Atributo que define a largura/altura da imagem em píxeis(px).
❑ Elementos de Listas
<ol> : Cria listas ordenadas;

<ul> : Cria listas não ordenadas;
<li> : Cria os ítens das listas ;
<dl> : Cria lista de descrição;
<dt> : define o nome/termo;
<dd> : descreve cada nome/termo;
type: define o tipo de listagem para lista ordenadas e não ordenadas;
start: define o ínicio de uma lista ordenada que possui um dos tipos:A,I ou 1.
❑Elementos de Tabelas
<table> : Cria tabela;
<tr> : Cria linhas da tabela;
<td> : Cria célula da tabela;
<th> : Cria cabeçalho da tabela;
border : atributo que define a borda da tabela;
Colspan: atributo que define o número de colunas que deve abrangir;
rowspan : atributo que define o número de células que deve abrangir
Exemplo1:
<h2><font color="#1e90ff">Meus Dados Escolares:</font></h2>
<p><s>Lista de Províncias:</s></p>
Elementos Semânticos
O consórcio W3C anunciou a publicação do HTML5, que foi importante para a
evolução do padrão que não era actualizado por muito tempo. Até a versão 4 do
HTML, os programadores estruturavam o conteúdo de uma página HTML utilizando
os
elementos <div>, com o atributo id que servia para identificar o tipo de conteúdo
do elemento. Este elemento (<div>) não fornecia qualquer significado e dificultava a
extração de informação de uma forma inteligente.
Na versão 5 o HTML foi enriquecido, não apenas para estruturar documentos para a WEB,
mas também para descrever o significado do conteúdo desses documentos, por intermédio de
tags semânticas.
O HTML semântico tem como objectivo descrever o significado do conteúdo presente em
documentos HTML, tornando-o mais claro tanto para o programador, como para os browsers e
outros softwares que processam automaticamente esta informação.
❑Principais Elementos Semânticos
Os principais elementos semânticos que foram inseridos no HTML5 são:
<header></header>;
<nav></nav>;
<section></section>;
<article></article>; <aside></aside> e <footer></footer>;
Exemplo:
❑Estruturas da página actualmente
NOTA:
Algumas marcas, novas ou revisadas não têm
uma alteração visual no corpo da página do
documento HTML, mas, têm uma grande
importância na semântica, o significado para o
seu HTML é muito importante.
❑ Descrição dos elementos semânticos
<article>: define um artigo, um conteúdo independente e autocontido (por exemplo,um artigo de

um blog, revista ou jornal). Recomenda-se que cada <article> deve ser identificado com um título;
<aside>: define um conteúdo de auxílio ao conteúdo principal. Normalmente fica na lateral do
conteúdo principal da página e serve para incorporar conteúdos externos;
<footer>: representa um rodapé de um documento, como a área do final de uma página WEB. É
utilizaddo normalmente para descrever informações de autoria, como nome, contacto do autor e
data de criação do conteúdo.
AVITEL
❑Exemplo Prático
<!DOCTYPE html>
<html lang=“Pt-Pt”>
<head>
<meta charset=“utf-8”>
<title>Página dos Cursos do ITEL</title>
</head>
<body>
<header>
<h1>Cursos do ITEL</h1>
</header>
<section>
<h2>Informática</h2>
<article>
<h3>Técnico Médio de Informática</h3>
<p>Este curso possui disciplinas teóricas e práticas</p>
</article>
</section>
Fundamentos
CSS é a abreviação para o termo em inglês Cascading Style Sheet ,traduzido para o
português como folhas de estilo em cascata.
❑Estrutura Básica
Primeiramente, é preciso ter em mente que qualquer modelo CSS só será visto e aproveitado
quando usado em um código HTML ou semelhantes. O CSS possui sua própria sintaxe, com algumas
de suas propriedades parecidas às do HTML. Na sua forma mais simples, é composto por 3 partes:
Regra CSS é a unidade básica de uma folha de estilo. Nessa definição, o termo unidade básica
significa a menor porção de código capaz de produzir efeito de estilização. Uma regra CSS é
composta de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e
um valor.
Sintaxe Básica
Regra Css
Seletor : { Propriedade: valor;}
Declaração
seletor - tag em HTML que terá tal valor aplicado àquela propriedade citada. Cada
seletor possui mais de uma propriedade que pode vir a ser modificada e pode ser
aplicado a uma classe. Ex: <p>, <body>, <h1>, <img>.
Sintaxe Básica
Propriedade - atributo que será modificado ao receber tal valor. Ex: size, color, font,...
Valor - característica que a propriedade irá assumir.

Ex: 3, red, tahoma.
Quando os valores forem numéricos, há a opção de determiná-los em pixels, centímetros ou
percentagens.
Ex: estilo.css:
p.right {
text-align: right
}
p.left {
text-align: left
}
Fontes
Muitas das funções apresentadas no capítulo são bem específicas e impossíveis de serem
aplicadas pelo HTML. Como no capítulo anterior, todas as propriedades são aplicadas a seletores
relacionados a textos, como <p> e <h1>.
font-family - Refere-se à família da fonte. O valor pode ter o nome específico da fonte
(Verdana, comic saens) ou de fontes genéricas (menospace, serif). Vale lembrar que a fonte
escolhida deverá estar instalada na máquina do usuário.
font-size - Pode-se escolher o tamanho da fonte usando valores numéricos ou

nomenclaturas: x-small, xx-small, x-large, xx-large, small, medium, large, smaller e
larger.
FONTES
font-style - Há 3 opções: normal, italic e oblique, que se referem a letras em sua fonte
normal na vertical, letras inclinadas e letras obliquas, respetivamente.
font-weight - Define a intensidade de negrito que a fonte vai receber. Pode assumir 3
opções: bold, bolder e lighter ou valores numéricos.
font-variant - Varia o tamanho das letras maiúsculas quando recebe o valor small-caps.
Ex:
estilo.css:
h1 {
color: #DDA0DD;
font-family: arial;
FONTES
❑Borda
As bordas são muito úteis pois, dependendo da criatividade do programador, assumem

várias funções no desenvolvimento da página. Podem ser empregadas como elemento
decorativo, separação entre textos e muitos outros recursos.
border-width - Define a espessura da borda. Assume thin, medium e thick (fina, média
e grossa respectivamente) como valores.
border -color - Define a cor da borda. Assume "cor" ou "#AAAAAA" como valores.
border-style - Define o estilo da borda. Valores assumidos: dotted, dashed, solid,

double, groove, ridge, inset, outset.
FONTES
Um recurso muito importante presente nas bordas é a possibilidade de setar tais funções
especificando o lado da borda a empregar a função, usando como valores top, bottom, left e right.
Ex.:
- border-TOP-width: medium
- - border-BOTTOM-color: red
- - border-LEFT-style: groove
Ex:
estilo.css:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
FONTES
❑Margin e Padding
As margens definem o espaçamento entre os elementos HTML, que possuem quatro

lados: right, left, top e bottom e também de elementos de parágrafo ou cabeçalhos (Ver
dica abaixo). Os valores assumidos pelas margens são em pixels.
✓ 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 - Define os valores das quatro margens na
seguinte ordem: top, right, bottom, left.
FONTES
Ex.: estilo.css:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
p{
margin: 5px 50px 5px 50px;
}
❑LISTA
Esta propriedade cria uma lista de elementos definidos pelo programador, usando
como marcadores imagens ou números.
FONTES
✓ list-style-image - Define uma imagem como marcador da lista.
Valor: url(”caminho/para/o/arquivo”)
✓ list-style-position - Posiciona o marcador da lista. Valores: outside e inside.
✓ list-style-type - Define o tipo de marcador da lista. Valores: disc, circle, square, decimal,
lower-roman, upper-roman, lower-alpha, upper-alpha.
✓ list-style - Define todas as propriedades acima em uma única linha na seguinte ordem:
image, position e type.
Ex.: estilo.css:
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
FONTES
❑ Tabela
As propriedades de tabelas são as seguintes:

✓ table-layout - Nos permite indicar se queremos que a tabela tenha o seu fluxo com o
tamanho fixo ou o seu tamanho acompanhe o fluxo do conteúdo. Valores: automática
ou fixed. (Acompanhar no exemplo ao final deste ´ıtem.)
✓ border-collapse - A propriedade border-collapse define se as bordas em uma tabela
vão se fundir ou vão ser separadas. Valores: collapse e separate.
✓ border-spacing - Define um espaçamento (horizontal e vertical) entre os elementos
da tabela. Valores em px.
SELECTORES
❑ Selectores por tipo de Elementos
Element selectors: <p> <h1> <em> <span>, etc. referenciam as tags HTML que
formatam. Por exemplo: o element selector corresponde à tag <h1>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
color: #333333;
}
SELECTORES
❑ Selectores por Identificador
ID selectors: definem-se com o sinal cardinal (#) e deve ser usado

uma única vez em cada documento HTML. Pode haver, no entanto, haver
mais do que um selector com o mesmo ID. Quando queremos usar vários
selectores com o mesmo nome devemos usar classes em vez de ID
Sintaxe
#valor_id { propriedade de estilo }

Note que isso é equivalente aos seguintes selectores de atributo.
[valor _ id] { propriedade de estilo }
SELECTORES
❑ Selectores por Classe
Class selectores: Com os selectores de classe podemos definir diferentes
estilos para o mesmo tipo de elemento num documento HTML.
Os atributos de classe podem ser usados localmente (inline) no documento
HTML.
Os selectores de classe devem começar com um ponto e podem ter o nome que
quisermos. Podemos usar várias vezes a mesma classe no mesmo documento.
Sintaxe
.classe_nome{ propriedade de atributos }
Exemplo:
.vermelho{
color: #f33;
}
Criação de Layouts
O primeiro passo para construir um layout css é definir como será o design da página. O
design de uma página pode ser feito em ferramentas(Fireworks, CorelDrawn, Photoshop)
apropriadas pra criação de design de páginas WEB ou mesmo em uma folha de papel.
<header> - Define um cabeçalho para um documento ou seção

<nav> - Define um conjunto de links de navegação
<section> - Define uma seção em um documento
<article> - Define um conteúdo independente e autocontido
<aside> - Define o conteúdo além do conteúdo (como uma barra lateral)
<footer> - Define um rodapé para um documento ou seção
<details> - Define detalhes adicionais que o usuário pode abrir e fechar
sob demanda
<summary>- Define um título para o <details>elemento
Criação de Layouts
Fundamentos da Linguagem
❑JavaScript
JavaScript é a linguagem de programação da Web. A ampla maioria dos sites modernos usa
JavaScript e todos os navegadores modernos – em computadores de mesa, consoles de jogos,
tabletes smartphones – incluem interpretadores JavaScript, tornando-a a linguagem de
programação maisonipresente da história. JavaScript faz parte da tríade de tecnologias que
todos os desenvolvedores Web devem conhecer: HTML, para especificar o conteúdo
de páginas Web; CSS, para especificara apresentação dessas páginas; e JavaScript, para
especificar o comportamento delas.
Fundamentos da Linguagem
O JavaScript (JS) é interpretada ou “ just-in-time" com funções de primeira
classe . Embora seja mais conhecida coma a linguagem de scripting para as
páginas da Web, também é utilizada em muitos ambientes além de navegadores ,
tais como Node.js, Apache CouchDB e Adobe Acrobat . JavaScript é uma linguagem
dinâmica, baseada em protótipo que suporta os paradigmas de programação
orientada a objetos, imperativa e declarativa (incluindo programação funcional).
Variáveis e Estrutura de controle
❑ Variáveis e Estrutura de Controlet
❑ tura de controle
Variável é um dos conceitos mais importantes no estudo de
programação, independente da plataforma ou linguagem utilizada. Uma
variável referencia a um espaço na memória do computador utilizado
para guardar informações que serão usadas em seus programas.
Para elucidar o conceito, imagine que a memória de seu computador é

um armário com 100 gavetas e você guarda cada tipo de objeto em uma
gaveta diferente. Provavelmente você vai querer criar etiquetas para
referenciar o que guarda em cada gaveta.
✓ Mas por que o nome "variável"?
Porque uma variável pode ter o seu valor alterado durante a execução de
um programa. Ainda na analogia anterior, suponha que há uma gaveta "Meias"
com 2 meias; se necessário, pode-se adicionar mais 5 meias e, caso seja um
colecionador, até 200. Assim a gaveta "Meias" muda o seu valor.
✓ Criando variáveis:
Para criar uma variável utiliza-se o var(opcional), e para determinar o seu valor,
o operador de atribuição(=). Para facilitar a compreensão do código, deve-se sempre
escolher um nome que identifique o tipo de dado a ser armazenado.
Exemplo:
1.<script type="text/javascript">
2.var nome = "Gabriel Mendonça";
3.var idade = 25;
4.</script>
Note também que no final de cada linha foi utilizado o ponto-e-vírgula (;),
responsável por delimitar expressões, statements e construtores. Embora não seja
obrigatório, faz com que o seu código seja mais preciso e claro.
Observação: o código ainda pode ser simplificado deixando apenas uma

declaração var e separando cada variável por vírgula e fechando a declaração em seu
final com ponto-e-vírgula.
Acesse: www.itel.gov.ao/plataformavirtual
❑Tipos de variáveis:
Quando falamos em tipos de variáveis, temos as linguagens chamadas de fortemente

tipadas e fracamente tipadas.
Em linguagens fortemente tipadas, definimos o tipo da variável no momento de sua
criação. Exemplos de linguagens do tipo: Java; C; C++.
E m linguagens fracamente tipadas, não precisamos definir o tipo da variável, ela é
tipada automaticamente quando recebe um valor. Exemplos de linguagens do tipo:
Python; Ruby; Javascript.
Int - Variáveis com valores inteiros.
var idade = 27;
var graus = -3;
var pontos = 0;
var numero Grande = 2000009283;
Float - Variáveis com ponto flutuante ou casas

decimais.
var peso = 32.59345;

var PI = 3.14;
var meu saldo = -1034.32
Observação: em linguagens de programação utiliza-se "." (ponto final) para

separar casas decimais em vez da ',' (vírgula).
ALUNO
String - Variáveis de texto, normalmente chamada de "cadeia de caracteres". Os
valores desse tipo são atribuídos utilizando aspas duplas (") ou aspas simples (')
como delimitador.
var nome = “Ana Maria";

var data nascimento = "17 de Junho de 1995";
var email = “anamaria@host2.com.br";
✓ Observação: Tudo o que é declarado entre os delimitadores (") ou (') é entendido

como parte da string, mesmo que sejam números.
ALUNO
Booleanos - Tipo de dado de dois valores: "true" (verdadeiro) ou "false" (falso).
var verdadeiro = true;

var verdadeiro2 = 1;
var falso1 = false;
var false2 = 0;
var falso3 = null
Observação: apesar dos valores true e false representarem respetivamente os

valores "verdadeiro" e "falso", pode-se utilizar outros valores para essa representação,
como exemplificado acima.
FUNÇÕES
Inicialmente, pense em funções como caixinhas mágicas: você joga coisas dentro, algo
acontece e você recebe de volta uma transformação do que foi colocado. Por exemplo: imagine
uma caixinha em que você coloca dois números: 3 e 5 e a caixa te devolve 8.
Os números 3 e 5 que colocamos dentro da caixa iremos chamar de argumentos e o 8 que
recebemos, iremos chamar de retorno.
Nem sempre uma função terá argumentos e nem sempre terá um retorno, mas
certamente ela irá realizar alguma coisa de nosso interesse, seja mudar a cor de algum elem
ento, abrir uma janela popup, ou qualquer uma das outras coisas que a linguagem JavaScript
pode fazer.
As linguagens de programação já possuem algumas funções pré-definidas para nos ajudar.
Da linguagem JavaScript podemos citar: open()(usada para abrir janelas
popup), parseInt() (usada para converter um número ou string em
inteiro), encodeURI() (codifica uma cadeia de caracteres em um URI válido)...
Funções
Sempre que estivermos programando em qualquer linguagem, temos que ter em mente uma
coisa muito importante: "o melhor jeito de resolver um problema grande é dividi-lo em
problemas menores", cada um desses "problemas menores" serão resolvidos por funções
pequenas, assim juntando as várias pequenas funções, teremos resolvido "o todo".
Apesar de ser possível escrever todo o código que resolve o problema grande numa única
função gigante, não fazemos isso. Pois isso tornaria muito complexo nosso código, dificultaria
uma futura manutenção e impossibilitaria o reaproveitamento de pequenas rotinas. Por isso
preferimos dividir e depois criar uma função grande que utilize nossas outras funções pequenas,
do que escrever tudo num só lugar.
✓ Declarando:
A declaração de uma função é quando construimos a caixa mágica.
1.function foo() {
2.//corpo
3.}
Funções
foo é o nome da função e o código entre as chaves { }, é o corpo da nossa função. A
palavra function é a forma da linguagem JavaScript indicar que estamos declarando uma
função (criando a caixa mágica).
✓ Invocando
Após construirmos a caixa, ela por si só não faz absolutamente nada até a
chamarmos. A invocação consiste em colocar o nome da função seguido pelos
parênteses. Isso faz com que o código dentro do corpo da nossa função seja executado
1.foo();
Validando Formulários HTML
Experimente salvar um arquivo .html e abrir com o seu navegador, contendo o seguinte código:
1.<script>
2.function bar() {
3.alert('Hello World');
4.}
5.</script>
Após abrir o arquivo com qualquer navegador, você irá notar que não irá acontecer
absolutamente nada. Sim, nada. Pois ainda não invocamos a função. Apenas
a declaramos. Para invocar, o arquivo ficaria com o seguinte conteúdo:
1.<script>
2.// declarando
3.function bar() {
4.alert('Hello World');
5.}
6.
7.// invocando
8.bar();
9.</script>
Validando Formulários HTML
✓ Exemplo de função com argumentos e retorno:
Lembram que eu iniciei o texto falando de uma caixa mágica que recebia 2 números e
devolvia a soma deles ? Essa função ficaria assim:
1.function somar(x, y) {
2.return x + y;
3.}
E para invocar essa função somar() podemos passar quaisquer dois números:
1.somar(3, 5);
2.somar(1, 2);
3.somar(10, 32);
Criando Galeria de Imagem, Slide show com Jquery projecto Final
Galerias de imagens que se movem são muito comuns para apresentação de conteúdo
visual. Felizmente, adicionar uma galeria em jQuery não precisa ser difícil, mesmo que
você não tenha muita familiaridade com a linguagem Javascript.
Para alguns sites, as galerias de imagens são uma necessidade absoluta. Os portfólios
são os primeiros a serem lembrados, mas as galerias também são úteis para blogs, sites
de comércio eletrônico e, na verdade, para qualquer site que exibe regularmente várias
imagens em uma única página.
Galeria TN3 é a nossa própria jQuery fantástica e profissional Galeria de imagens plug-in que
inclui recursos de apresentação de slides. Os recursos incluem uma opção de tela cheia,
dimensionamento dinâmico de imagens, vinculação de documentos, vários álbuns e navegação
por roda do mouse. Ele pode ser esfolado com CSS para combinar com o tema do seu site e é
compatível com todos os navegadores modernos para desktop e dispositivos móveis e também é
compatível com mecanismos de pesquisa.
❑ Slides
Slides é um simples plugin de slideshow para jQuery. Ele foi projetado para ajudar
usuários iniciantes e avançados a criar apresentações de slides elegantes e fáceis de
usar. Você pode incluir imagens com legendas e links e incorporar vários slideshows em
uma única página
❑ Galleria
Galleria O objetivo é facilitar a criação de galerias de imagens com aparência profissional para a
Web e dispositivos móveis. Ele vem com um único tema, e temas premium adicionais estão
disponíveis a partir de US $ 9. Você também pode criar seu próprio tema usando a API da Galleria.
❑PikaChoose
PikaChoose é um plugin de slideshow leve que pode ser usado para carrosséis e mesas de luz.
Alguns temas premium estão disponíveis para o PikaChoose, incluindo um tema de foto
instantânea, caso você não queira criar seu próprio tema. É altamente personalizável e pode ser
integrado ao Fancybox.

HTML Cfitel - Cópia

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Cfitel - Cópia

Enviado por

Direitos autorais:

Formatos disponíveis

HTML5+CSS3+JAVASCRIPT

3. Elementos estruturais do HTML5;

Um Website, ou apenas Site, é um conjunto de Páginas Web:

A Web funciona em três camadas, o Front-end ou Client-side, o Back-end ou Server-

Servidores Web trabalham o tempo todo

❑ Sintaxe de um atributo HTML

Um atributo deve ter sempre:

<p>Meu gatinho é <strong>muito</strong> mal humorado.</p>

Contudo, precisamos ter certeza que os elementos estão devidamente

<p>Meu gatinho é <strong>muito mal humorado.</p> </strong>

❑Sintaxe básica de uma página HTML

❑ Principais Elementos do HTML

Os princincipais elementos do HTML utilizados para a composiçõ de uma página Web,

<ol> : Cria listas ordenadas;

❑ Descrição dos elementos semânticos

<article>: define um artigo, um conteúdo independente e autocontido (por exemplo,um artigo de

Seletor : { Propriedade: valor;}

Valor - característica que a propriedade irá assumir.

font-size - Pode-se escolher o tamanho da fonte usando valores num´ericos ou

As bordas são muito úteis pois, dependendo da criatividade do programador, assumem

border-style - Define o estilo da borda. Valores assumidos: dotted, dashed, solid,

As margens definem o espaçamento entre os elementos HTML, que possuem quatro

✓ margin-top - Define a margem superior.

As propriedades de tabelas são as seguintes:

ID selectors: definem-se com o sinal cardinal (#) e deve ser usado

#valor_id { propriedade de estilo }

[valor _ id] { propriedade de estilo }

<header> - Define um cabeçalho para um documento ou seção

Para elucidar o conceito, imagine que a memória de seu computador é

Observação: o código ainda pode ser simplificado deixando apenas uma

Quando falamos em tipos de variáveis, temos as linguagens chamadas de fortemente

Float - Variáveis com ponto flutuante ou casas

var peso = 32.59345;

Observação: em linguagens de programação utiliza-se "." (ponto final) para

var nome = “Ana Maria";

✓ Observação: Tudo o que é declarado entre os delimitadores (") ou (') é entendido

var verdadeiro = true;

Observação: apesar dos valores true e false representarem respetivamente os

Você também pode gostar