Aula 02 HTML Css Js

Programação Front End e IHC
Professor: Ronilson Morais Lobo

Salvador - Turma 2022.2
Programação Frontend e IHC
Conteúdos
HTML 5
Conceito - Linguagem de Marcação e Tags
Novos recursos
Atributos
Elementos
Formulários
Imagem, Áudio e Vídeo
HTML 5 - Conceito
HTML 5 e Tags
É uma linguagem de marcação do inglês (Hyper
Text Markup Language). O hipertexto, que
compreende em todo o conteúdo inserido no
documento para a Web. Tais estruturas são
compostas de Tags ou seja marcações.
HTML 5 - Conceito
Evolução do HTML
Versões do HTML:
HTML – Origem – 1992 – Tim Bernes-Lee
HTML + – Lançamento com o Mosaic - 1993
HTML 2.0 – Novos Navegadores – Mosaic (Netscape)
x Internet Explorer – Padronização do HTML – 1994
W3C – World Wide Web Consortium – Outubro de
1994 – Desenvolver e padronizar a Web
HTML 3.0 – Primeira sugestão de marcação para
estilização – 1995 – Dave Raggett
HTML 5 - Conceito
Evolução do HTML
Versões do HTML:
HTMLERB – Criada pela W3C – 1996 – IBM, Microsoft,
Netscape, Novell, Softquad e W3C – Rever e
padronizar a HTML – acabar com as implementações
proprietárias.
HTMLERB – Cougar – HTML 4.0.
HTML 3.2 – 1997 – adicionou elementos table e
applet bem como outros elementos.
HTML 4.0 – Lançamento – Dezembro de 1997
HTML 4.01 – W3C – Publicou as recomendações para
o HTML anterior ao 5.0.
XHTML – 2007.
HTML 5 - Conceito
Evolução do HTML
Versões do HTML:
WHATWG (Grupo de trabalho para tecnologias de
hipertexto em Aplicações para Web)– criada em
2004 – (Apple, Fundação Mozilla, Opera e W3C) –
Especificar o HTML 5.0
HTML 5.0 – Janeiro de 2011
HTML 5 - Introdução
Diferenças entre o HTML 5 e os demais:
A principal diferença é a sua origem, pois o HTML 5,
veio substituir, tanto os HTML dos anos 90 quanto o
XHMTL.
Pode ser escrito tanto com sintaxe HTML quanto a
sintaxe XML.
Promover interoperabilidade da linguagem.
Aperfeiçoamento da marcação de documentos.
Marcações para novas tecnologias (Mobile) e
aplicações WEB.
HTML 5 - Introdução
Diferenças entre o HTML 5 e os demais:
Retrocompatibilidade – Não existem elementos em
desuso (deprecated) com o sentido da palavra tem
no HTML 4, que apresenta elementos em desuso
tais como font, u, s dentre outros atributos.
DOCTYPE – A declaração DOCTYPE (tipo de
documento) foi simplificada, não havendo mais o
link, a renderização é feita no modo standard.
Exemplo <!doctype html>
A maioria dos elementos e atributos visto com
HTML 4 e XHTML, continua válida na HTML 5.
HTML 5 – Elementos estruturais
MAIN – Define a estrutura principal da página.
HEADER – Define um grupo de títulos ou o
cabeçalho de uma determinada seção.
FOOTER – Determina o rodapé das seções ou da
página.
NAV – Cria um grupo para ser inserido os links
de navegação através de uma lista.
ASIDE – Define um elemento lateral que pode
conter blocos de navegação (NAVs), citações e
outras informações que costumamos colocar em
uma sidebar.
ARTICLE – Define a área onde há um artigo,
texto, redação, conteúdo e etc…
SECTION – Define um bloco ou um grupo de um
assunto específico. É importante entender que
a section agrupa diversos elementos que
tenham relação entre si.
SECTION – Por exemplo, se há uma área no site
que há links, conteúdo, imagens e etc de um
assunto em comum, você agrupará esses
elementos com uma section. Nesse caso, ele
entrou no lugar daquele div que fazíamos para
dividir grandes blocos de assuntos em comum.
DIV – servirá para agruparmos elementos dentro
destes sections ou fazer outros detalhes que
não precisam de significado semântico, apenas
visual.
Partes do HTML (cabeçalho e o corpo)
Cabeçalho (<head>) – Atributos principais do
documento, tais como título, CSS (Cascading Style
Sheets – folha de estilos) e outros. (parte invisível do
documento).
Corpo (<body>) – Contém a parte visível do

documento é a informação visualizada pelo
navegador.
Exemplo 01 – Estrutura Básica do HTML.
<html>
! 
<head>
<title> Título da Página </title>
</head>
! 
<body>
Esta é minha primeira página.
<strong> Este texto está em negrito
</strong>
</body>
</html>
Tags
São as marcações ou os "comandos" do HTML.
O documento HTML é composto de TAGs que farão

com que o browser monte a página de acordo com a
formatação definida pelos comando HTML.
Um TAG é sempre precedido de um caracter "<"

(menor que) e seguido por um caracter ">" (maior
que).
Exemplo de TAG: <html>
Tags
Na maioria dos casos, uma TAG deve ter um
correspondente, chamado de TAG de fechamento.
TAG indica onde começa sua área de influência,

enquanto o seu correspondente TAG de fechamento
indica onde termina a área de influência.
Um TAG de fechamento tem o mesmo nome do TAG

de abertura, precedido do caracter "/".
Exemplo de TAG de fechamento: </html>
Tags
Um documento HTML é formado por uma hierarquia
de elementos, isto é, elementos que contêm outros
A cada tipo de elemento corresponde uma tag
Por exemplo, aos parágrafos correspondem a tag p

Para iniciar um parágrafo escreve-se <p>, e para finalizá-lo,
</p>
(note-se o símbolo /)
Exemplo de um parágrafo: <p>Isto é um parágrafo</p>
Tags
As tags podem conter atributos
Exemplo de uma tag com dois atributos:

<p class="topo" id="nada">Isto é um
parágrafo</p>
As tags que não contêm nada entre a abertura e o

fecho podem ser abreviadas
Exemplo, <br/> em vez de <br></br>

Tags
TAGs podem ser escritas em minúsculas ou
maiúscula, mas nunca podem haver espaços em
branco dentro de TAGs, exceto entre atributos e
entre aspas.
Exemplo :
<HTML>, <html>, <HtMl>, <Html>,...
Elementos - São estruturas semân[ca, composta
de tag de abertura, conteúdo e tag de fechamento.
Os documentos HTML são simples arquivos de texto
que contêm "tags de marcação" . Essas e[quetas
definem os elementos da linguagem HTML e os
conteúdos.
As "tags de marcação" do HTML são usadas para
definir os elementos.
Tudo o que se encontrar entre as tags de início e de
fim fazem parte do conteúdo do elemento.
Exemplo de elemento:
<strong>Este texto está em
negrito</strong>
Elemento e sua estrutura:
Esta par te abaixo é um elemento HTML:
<strong>Este texto está em
negrito</strong>
Repare alguns aspectos do código acima:
Este elemento inicia com a tag – <strong>
Conteúdo do elemento – Este texto está em
negrito
Elemento termina com a tag final : </strong>
O propósito da tag <strong> é colocar o conteúdo
do elemento HTML em negr i to.
Exemplo de Elemento:
<body>
Esta é minha primeira página. <strong>Este
texto está em negrito</strong>
</body>
Este elemento HTML inicia com tag <body> e
termina com a tag </body>
O propósi to da tag <body> é defini r o conteúdo
principal, o corpo do documento.
Exemplo de Elementos/Tags
Texto do ficheiro HTML
<html>
<head><title>Hello
World</title></head>
<body>
<p>Hello world</p>
</body>
</html>
Início e Fim do Documento
Os TAGs <html> . . . </html> indicam
respec[vamente o início e fim do documento.
Definições Lógicas sobre o Documento

Entre os TAGs <head> . . . </head> estão as
definições lógicas sobre o documento. Delimitam a
seção de cabeçalho do documento. Trata-se da
primeira seção do documento.
Título da Página
Os TAGs <title> . . . </title> indicam o
título do documento, que será apresentado na barra
superior do browser. Estas marcas devem constar da
seção de cabeçalho.
Conteúdo da Página
Entre os TAGs <body> . . . </body> estão o
conteúdo da página que será exposto pelo Browser.
Os tags <p>...</p> indica um parágrafo (o texto
aparece entre eles)
Atributos
Eles servem para definir uma propriedade a um
elemento HTML.
Os atributos HTML devem ser colocados sempre na
tag de abertura,
Após o nome do elemento, precedido de um espaço
e é composto de um nome de atributo, um sinal de
igual ( = ) e um valor de atributo, cercado por aspas
duplas ( " ).
Exemplo de atributo:
<div class="texto"> Esta é a minha
primeira página da web.</div>
Exemplo – Veja os atributos em verde.
<html> ! 
<head> ! 
<title> ! 
Aqui entra o Título do documento
</title> ! 
</head> ! 
<body> ! 
<p align="center">Este texto está centralizado.</p>
! 
</body> ! 
</html> ! 
Tag de Início e Fim do Documento
Os TAGs <html>...</html> indicam respecFvamente o
início e fim do documento. Indica que o documento presente é
um documento HTML. Deve englobar todos os demais TAGs.
Atributo: Não possui atributos.
A Tag <html> será a primeira a abrir e a úlFma a fechar.
OBS:
Toda Tag deve ter um inicio e um fim. A exceção de <Br>.
As primeiras tags são sempre as ulFmas a serem fechadas,
fazendo com que as outras fiquem encadeadas dentro destas.
Definições Lógicas sobre o Documento
Entre os TAGs <head>...</head> estão as definições
lógicas sobre o documento. Delimitam a seção de cabeçalho do
documento. Trata-se da primeira seção do documento.
Atributo: Não possui atributos.
Os elementos contidos dentro do elemento <head> não são
exibidos na tela do navegador.
O padrão HTML estabelece que só um pequeno número de
elementos pode aparecer dentro do cabeçalho. Eles são:
<base>, <link>, <meta>, <title>, <style> e
<script>.
Elementos do Cabeçalho
A tag <title> - Define o título da página
A TAG Title vai dizer qual título aparecera na barra de nomes no
topo da página; do contrario aparecerá apenas o endereço da
página.
Exemplo:
<title> ..:: Minha Página ::.. </title>
A Tag <meta> dá informação sobre aquilo que o documento
contém.
As tag’s Meta são utilizadas por sites de busca como o Google®
Através delas você irá descrever alguns comentários sobre sua
pagina:
<META NAME=“DESCRIPTION”> Fará uma pequena descrição
sobre seu site.
Ex. <META NAME="DESCRIPTOIN" CONTENT="Site legal que estou criando">
<META NAME="KEYWORDS"> Com esta tag você colocará as
palavras chaves.
Ex. <META NAME="keywords" CONTENT="Pagina web">
<META NAME="AUTHOR"> Indica qual é o author de sua pagina.
Ex. <META NAME=“AUTHOR” CONTENT=“Ronnie Lobo Weddesigner”>
<style>
Serve para indicar o CSS a qual desenhara a página:
Exemplo:
<style type="text/css">
<!—
.Pprincipal{
color:#678654;}
.Psecundario{
color:#086587;}
-->
</style>
<link>
Serve para linkar recursos externos:
Exemplo 01 – link para css externo:
<link href="css/astro_intelligence.css"
rel="stylesheet" type="text/css" media="all“ />
Exemplo 02 – Ícone no Navegador:

<link href="img/favicon.ico" rel="shortcut icon”>
Entre os TAGs <body>...</body> estão o
conteúdo da página que será exposto pelo Browser.
O corpo do documento. Entre estas marcas estará
contido maior parte dos conteúdos a ser
apresentado, textos, imagens, etc.
Atributo: Possui atributos.
A TAG <body> fará algumas configurações no corpo
de sua pagina. Ela é quem diz a cor do plano de
fundo, a cor dos links, entre outros detalhes.
Tag <p> determina o parágrafo numa página html.
Exemplo:
<p>Este é meu paragráfo </p>
<p class=”corpo_texto”>
Corpo do Texto
</p>
Conteúdo de <BODY>
Entendendo <P>
Align – Alinha o texto de acordo com o que você colocar;
Le. – Esquerdo;
Jus1fy – JusFficado;
Center – Centralizado;
Right – Direito.
Conteúdo de <BODY>
<B> - Aplica o estilo negrito. Ex. <b>texto em negrito</b>
<I> - Aplica o estilo itálico. Ex. <i>texto em itálico</i>
<U>- Aplica o estilo sublinhado (nem todos os browser o reconhecem).
Ex. <u>texto sublinhado</u>
<SUP> - Faz com que o texto fique sobrescrito.
Ex. <sup>Texto sobrescrito</sup>
<SUB>- Faz com que o texto fique subscrito.
Ex. <sub>texto subscrito</sub>
<BIG> - Aumenta a fonte e atribui negrito.
Ex. <big>Texto GRANDE</BIG>
<SMALL> - Reduz e altera a fonte.
Ex. <small>TEXTO pequeno</small>
<TT> - Aplica um espaçamento regular ao texto.
Ex. <tt>Texto com espaçamento regular</tt>
Conteúdo de <BODY>
Títulos e Subtítulos
São Tag’s utilizadas para dar ao leitor uma visão geral sobre o
que se trata o texto em questão. Estas tags apresentam seis
níveis de títulos que são numerado de 1 a 6 por
ordem de importância. (1 - Titulo principal, - 2 titulo
secundário, 3 –
subtítulo...)
Ex.
<h1>Este é o meu titulo principal</h1>
<h2>Este é meu titulo secundário</h2>
<h3>Este é o meu subtítulo</h3>
Conteúdo de <BODY>
Quebras de Linha
São utilizadas para escreverem textos em linhas diferentes, mas
em um mesmo parágrafo, como num poema, versos em linha
diferentes, mas numa mesma estrofe.
EX.
<p align=center>Este é meu texto em
cima<br>Este é meu texto embaixo</p>
Conteúdo de <BODY>
Criando Links
Existem dois [pos de links:
1º - Para páginas Externas – Exemplo:
<a href="http://www.lipsum.com/"
target="_blank">Duis lacinia</a>
2º - Para paginas Internas, chamados de âncoras.
<a name="topo" id="topo"></a> âncora
<a href="#topo>topo</a>
link da âncora
Tag <img>
Configurando a Imagem
Ao inserir a imagem pode-se configurá-la. Desta
forma utilizamos as seguintes Tag’s a partir de <IMG
SRC>:
Width – Largura da Imagem. Caso não seja
configurada a imagem será inserida no seu tamanho
original.
Height – Altura da Imagem. Caso não seja informada
mantém também sua altura original.
Border – Cria e configura o tamanho da borda da
figura.
Tag <img>
SRC>:
Align – Alinha a imagem em relação ao texto. Os três
tipos de alinhamento disponíveis são:
Top – Alinha o texto paralelamente ao topo da Imagem.
Middle – Alinha o texto no centro da Imagem.
Bottom – Alinha o texto paralelamente à base da imagem.
Alt – Tag que serve para insere um texto alternativo,
caso o browser não consiga abrir a imagem o texto
aparecerá no lugar.
Tag <img>
SRC>:
Align – Alinha a imagem em relação ao texto. Os três
tipos de alinhamento disponíveis são:
Top – Alinha o texto paralelamente ao topo da Imagem.
Middle – Alinha o texto no centro da Imagem.
Bottom – Alinha o texto paralelamente à base da imagem.
Alt – Tag que serve para insere um texto alternativo,
caso o browser não consiga abrir a imagem o texto
aparecerá no lugar.
Exemplo Imagem:
Conteúdo de <body> Tabela - <table>
Exemplo:
<table width="200" border="1">
<tr>
<td> </td>
<td> </td> Coluna Linha
<td> </td>
</tr> Tabela
<tr>
<td> </td>
<td> </td> Coluna Linha
<td> </td>
</tr>
</table>
Conteúdos
CSS3
Conceito - Linguagem de Marcação e Tags
Novos recursos
Atributos
Elementos
Formulários
Imagem, Áudio e Vídeo
CSS 3 - Estrutura
O que é CSS:
CSS – Cascading Style Sheet,
Significa – Folhas de Estilo em Cascata.
Definição – É 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.
Exemplo 01 – Página com CSS.
Um dos Templates do site Zen Graden.

Fonte: http://www.csszengarden.com/?cssfile=192/192.css .
Exemplo 02 – Folha de Estilo em Cascata.
/* CSS do id para TAG Body
#css-zen-garden{
font-family:Georgia, Garamond, serif;
font-size:12px; Definição da
color:#000001; Tipografia
background-color:#000000;
background-image:url(mur_fond.jpg);
background-position:top left;
background-repeat:repeat-x;
}
/...
#preamble H3 {
background-image:url(T.gif);
background-repeat:no-repeat;
}
Para este Título só precisa colocar o detalhe no caso a Capitular através da
imagem.
Exemplo 03 – Folha de Estilo em Cascata.

<body id="css-zen-garden">
... HTML (marcação do id em
<div id="preamble"> body)
<h3><span>The Road to Enlightenment</span></h3>
...
HTML (marcação do id na div)
Resultado renderizado que pega as propriedades de body e completa pela folha de

esIlo em cascata o detalhe da Capitular.
CSS
Os três tipos de vinculação de folhas de estilo:
As folhas de estilo podem ser vinculadas a um
documento de três maneiras distintas:
Importadas ou lincadas;
Incorporadas;
Inline.
CSS
Folhas de estilo externa, para ler:
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 com a extensão
.css. Uma folha de estilo externa é ideal para ser
aplicada a várias páginas. Com uma folha de estilo
externa , você pode mudar a aparência de um site
inteiro mudando um arquivo apenas (o arquivo da
folha de estilo). O arquivo css da folha de estilo
externa deverá ser lincado ou importado ao
documento HTML, dentro da tag <head> do
documento.
CSS
Folhas de estilo externa:
A sintaxe geral para lincar uma folha de estilo
chamada estilo.css é mostrada abaixo:
<head>
...........
<link rel="stylesheet" type="text/css"
href="estilo.css">
..........
</head>
CSS
Folhas de estilo externa:
A sintaxe geral para importar uma folha de
estilo chamada estilo.css é mostrada abaixo:
<head>
...........
@import url("estilo.css");
</style>
..........
</head>
CSS
Folha de estilo incorporada ou interna:
Uma folha de estilo é dita incorporada ou interna,
quando as regras CSS estão declaradas no próprio
documento HTML.
Uma folha de estilo incorporada ou interna, é ideal
para ser aplicada a uma única página. Com uma
folha de estilo incorporada ou interna, você pode
mudar a aparência de somente um documento,
aquele onde a folha de estilo esta incorporada.
CSS
Folha de estilo incorporada ou interna:
As regras de estilo, válidas para o documento, são
declaradas na seção <head> do documento com a
tag de estilo <style>, conforme sintaxe abaixo:
<head>
body {
background: #000000;
url("imagens/
minhaimagem.gif");
}
</style>
</head>
CSS
Folha de estilo inline:
Uma folha de estilo é dita inline, quando as regras
CSS estão declaradas dentro da tag do elemento
HTML.
Um estilo inline só se aplica a um elemento HTML.
Ele perde muitas das vantagens de folhas de estilo
pois mistura o conteúdo com a apresentação. Use
este método excepcionalmente, como quando
quiser aplicar um estilo a uma única ocorrência de
um elemento.
CSS
Folha de estilo inline:
A sintaxe para aplicar estilo inline é mostrada a
seguir:
<p style="color:#000000; margin:

5px;">
Aqui um parágrafo de cor preta e com
5px nas 4 margens.
</p>
A Regra do CSS
A regra CSS e sua sintaxe:
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; }
A Regra do CSS
Seletor:
Genericamente, é 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.
Exemplo:
<p>
<h1>
<form>
.minhaclasse
#minhaid
A Regra do CSS
Propriedade:
É o atributo do elemento HTML ao qual será
aplicada a regra.
Exemplo:
font
color
background
A Regra do CSS
Valor:
É a característica específica a ser assumida pela
propriedade.
Por exemplo:
(letra tipo arial, cor azul, fundo

verde, etc...)
A Regra do CSS
A regra CSS e sua sintaxe:
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.
O ponto-e-vírgula é facultativo no caso de
propriedade única e também após a declaração da
última propriedade no caso de mais de uma.
No entanto é de boa técnica usar-se sempre o
ponto-e-vírgula após cada regra para uma
propriedade.
Exemplo 04 – A regra CSS e sua sintaxe.
#css-zen-garden
{ Seletor ID
font-family:Georgia, Garamond, serif;
font-size:12px;
color:#000001;
background-color:#000000;
background-image:url(mur_fond.jpg);
background-repeat:repeat-x;
}
Propriedad Valo
HTML e r
</body>
A Regra do 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. No exemplo
abaixo agrupamos todos os elementos cabeçalho. A
cor de todos os cabeçalhos será verde.
Exemplo:
h1, h2, h3, h4, h5, h6
{
color: #00FF00;
}
A Regra do CSS
O seletor classe:
Mas você não está restrito somente aos elementos
HTML (tags) para aplicar regras de estilo!
Você pode "inventar" um nome e com ele criar uma

classe a qual definirá as regras CSS. E o mais
interessante das classes, é que elas podem ser
aplicadas a qualquer elemento HTML. E mais ainda,
você pode aplicar estilos diferentes para o mesmo
tipo de elemento do HTML, usando classes
diferentes para cada um deles.
A Regra do CSS
O seletor classe:
A sintaxe para o seletor classe é mostrada abaixo.
Elemento HTML mais um nome qualquer que você
"inventa" precedido de . (ponto):
elemento HTML.minhaclasse {
propriedade: valor;
}
Nota: Para o nome que você "inventa" evite usar números e
caracteres especiais. Tanto quanto possível use só letras de
a-z e de A-Z. Há restrições quanto ao uso de números e
caracteres. Use só letras!
Exemplo 05 – O Seletor classe.
Por exemplo: suponha que você queira ter dois Fpos de parágrafos em seu
documento: um parágrafo com letras na cor preta e um parágrafo com letras na
cor azul.
CSS
p.corum {
color:#000000;
}
p.cordois {
color:#0000FF;
}
HTML - No seu documento HTML as regras seriam aplicadas conforme abaixo:
<p class ="corum"> este parágrafo terá cor preta.</p>
<p class ="cordois"> este parágrafo terá cor azul.</p>

A Regra do CSS
O seletor ID:
O seletor ID difere do seletor de classe, por ser
ÚNICO.
Um seletor ID só pode ser aplicado a UM e somente
UM elemento HTML dentro do documento.
Você pode "inventar" um nome e com ele criar uma
ID a qual definirá as regras CSS.
Uma ID só pode ser aplicada a UM elemento HTML.
A Regra do CSS
O seletor ID:
A sintaxe para o seletor ID é mostrada abaixo. Um
nome qualquer que você "inventa" precedido de #
("tralha", "jogo-da-velha"):
#minhaID {
propriedade: valor;
}
Nota: Para o nome que você "inventa" evite usar números e
caracteres especiais. Tanto quanto possível use só letras de a-z
e de A-Z. Há restrições quanto ao uso de números e caracteres.
Use só letras!
Exemplo 04 – O Seletor ID.
CSS
#extraDiv1 {
background:url(bella.jpg) top left no-repeat;
width:119px;
height:600px;
position:absolute;
left:90px;
top:0px;
}
HTML
<div id="extraDiv1">
</div>
</body>
A Regra do CSS
Seletor universal
Os elementos da marcação serão afetados pelas
regras mínimas do CSS (por exemplo: cor e tipo de
fonte, margens, paddings, etc.) que fazem parte
de uma folha de estilos nativa do navegador e que
na ordem de cascata tem a prioridade mais baixa,
ou seja, qualquer declaração de estilo do autor ou
usuário sobrescreve a folha de estilos nativa.
A Regra do CSS
Seletor universal, exemplo:
*{
margin: 0;
padding: 0;
}
Nota: A principal utilização do seletor universal é "zerar" essas
propriedades para todos os elementos da marcação. Como
consequência o autor terá que definir explicitamente para cada
elemento, na sua folha de estilos, aqueles valores.
A Regra do CSS
Inserindo comentários nas CSS:
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.
Daqui há alguns meses a menos que você seja um
privilegiado, terá esquecido a maior parte daquilo
que você levou horas para "bolar".
A Regra do CSS
Inserindo comentários nas CSS:
O comentário introduzido no código, será ignorado
pelo browser. Um comentário nas CSS começa com
o "/*", e termina com " */". Veja o exemplo abaixo:
/* este é um comentário*/ p {
font-size: 14px;/* este é outro
comentário*/
color: #000000; font-family: Arial,
Serif; }
Fonte dos Slides de CSS Maurício Samy Silva:
http://www.maujor.com/tutorial/sintaxetut.php.
JavaScript - Origem
Motivação - No começo as páginas Web não
eram nada interativas, apenas se apresentava o
conteúdo na sua forma original do HTML.
LiveScript - Netscape lança uma linguagem
simples que permitia a execução de scripts nas
páginas exibidas pelo navegador.
JavaScript - Apoiado no sucesso do Java a
Netscape através de uma acordo com a Sun
rebatizou o LiveScript no JavaScript.
VBScript ou JScript - Microsoft lança a sua
versão do JavaScript para o Internet Explorer.
JavaScript - Definição
JavaScript - É a linguagem mais popular no
desenvolvimento Web e é suportada
atualmente em todos os navegadores. É
responsável por qualquer efeito dinâmico nas
páginas Web.
Exemplos - Aplicações avançadas das
ferramentas do GOOGLE.
JavaScript - CaracterísHcas
Linguagem de scripting - Permite ao
programador controlar uma ou mais aplicações
de terceiros. Os códigos JavaScript controlam
comportamentos nas páginas HTML.
Linguagens interpretadas - Não precisão de
compilação para serem executadas, o código é
interpretado e executado conforme é lido pelo
navegador, linha a linha, assim como o HTML.
JavaScript - Tag
Para inserir um código JavaScript em uma
página, é necessário utilizar a tag <script>:
<script>
<script>
alert("Olá, Mundo!");
</script>
JavaScript - Tag
A tag <script> pode ser declarada dentro da tag
<head> assim como na tag <body>, mas
devemos ficar atentos, porque o código é lido
imediatamente dentro do navegador. Veja a
consequência disso nos dois exemplos
seguintes.
JavaScript - Tag
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8">
<title>Aula de JS</title>
<script>alert("Olá, Mundo!");</script>
</head>
<body>
<h1>JavaScript</h1>
<h2>Linguagem de programação</h2>
</body>
</html>
“O script trava o processamento da página. Imagine um script
que demore um pouco mais para ser executado ou que exija
alguma interação do usuário como uma confirmação. Não seria
interessante carregar a página toda primeiro antes de sua
execução por uma questão de performance e experiência para o
usuário?” Fonte: (Caleum, 2017)
JavaScript - Tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aula de JS</title>
</head>
<body>
<h1>JavaScript</h1>
<h2>Linguagem de Programação</h2>
<script>
</script>
</body>
</html>
Uma maneira de mudar isto é por o JavaScript no
final do body.
JavaScript - Tag
Arquivo Externo JavaScript - Serve quando a
aplicação requer aquela característica, em
mais de uma página do sistema. Exemplo:
No HTML
<script src=“js/hello.js"></script>
No arquivo externo
Conteúdos
JavaScript
Abordagem introdutória noções em
Variáveis;
Operadores
Declarações e Estruturas
Objetos
Array
Funções
String
Box e Formulários
JavaScript – Sintaxe Básica
Operadores – Com eles é possível somar,
subtrair, multiplicar e dividir. Similar a
qualquer linguagem, vamos testar no console:
> 12 + 13 25 > 14 * 3 42 > 10 - 4 6 >
25 / 5 5 > 23 % 2 1
Variáveis – server para armazenar um valor que
será usado posteriormente. Vejamos no
console:
var idade = 10; idade += 10; // idade vale 20
idade -= 5; // idade vale 15 idade /= 3; //
idade vale 5 idade *= 10; // idade vale 50
JavaScript – Tipos de Dados
No JavaScript, temos tipos de dados:
String
Number
Boolean
Object
String – serve para armazenar trechos de texto:
var starwars = "XVader";
console.log(starwars);
Ela permite também, consultar o seu tamanho
e realizar transformações em seu valor:
starwars.length; // retorna tamanho
da string neste caso 6
starwars.replace("X", "Darth");
// retorna DarthVader
String – para obter uma string modificada é
necessário receber o retorno de cada função
que manipula a string: Vejamos no HTML.
starwars.replace("X", "Darth");
// retorna Xvader
starwars = starwars.replace("X", "Darth");
// retorna DarthVader
Number – serve para tratar todos os números e
realizar operações matemáticas:
var vinte = 20;
var pi = 3.14159;
Conversões - converte string em number:
var textoInteiro = "10";
var inteiro = parseInt(textoInteiro);
// Número inteiro
var textoFloat = "10.22";
var float = parseFloat(textoFloat);
// Número fracionado
Alterar número de casas decimais:
var milNumber = 2000;
var milString = milNumber.toFixed(2);
// recebe o retorno da função
console.log(milString);
// imprime a string ”2000.00"
Boolean – Verdadeiro (true) e falso (false):
var LadoBom = true;
console.log(LadoBom);
// recebe true
var LadoNegro = false;
console.log(LadoNegro);
// imprime false
JavaScript – Concatenação
Concatenação – juntar tipos de dados
diferentes vejamos:
String com String
var v1 = "Darth Vader";
var v2 = " Dark Side";
console.log(v1 + v2);
// imprime Darth Vader Dark Side
JavaScript – Concatenação
Concatenação – juntar tipos de dados
diferentes vejamos string mais soma:
String com String e números
var v1 = "Darth Vader";
var v2 = " Dark Side";
var n1 = 11;
var n2 = 66;
console.log(v1 + v2 + (n1 + n2));
// imprime Darth Vader Dark Side 77
JavaScript – Comparação
Comparação – serve para comparar, vejamos:
var num1 = 77;
var num2 = 77;
console.log(num1 == num2);
// Igual imprime true
console.log(num1 != num2);
// Diferente imprime false
// apenas
console.log(1 == "1"); // retorna true
JavaScript – Comparação
Comparação – serve para comparar também <,
<=, >,>=, vejamos:
console.log(2 > "1");
// retorna true
console.log(1 === "1");
// exatamente igual retorna false
console.log(1 !== "10");
// exatamente diferente retorna true
JavaScript – Blocos Condicionais
Blocos Condicionais – If e Else serve para criar
uma condição. Vejamos:
var idade = 18;
var temCarteira = true;
if (idade >= 18)
{
alert("Pode dirigir");
}
else {
alert("Não pode");
}
JavaScript – Blocos Condicionais
Blocos Condicionais – If e Else serve para criar
uma condição. Vejamos:
Ainda é possível utilizar os
operadores && (E) e o || (OU):
if (idade >= 18 && temCarteira) {
alert("Pode dirigir");
} else {
alert("Não pode");
}
JavaScript – Funções
Funções – são executadas logo que a tag
<script> é encontrada no HTML. No entanto
existem um comportamento para ser executado
em outro momento. A sintaxe da função
funciona da seguinte maneira:
// estrutura de uma função
function nomeDaFuncao(parametro) {
// corpo da função
}
function exibeMensagem() {
alert("Atenção");
}
Funções com Parâmetros – Uma função pode
receber um ou mais parâmetros. Vejamos:
function exibeMensagem(mensagem)
{ alert(mensagem); }
exibeMensagem("JavaScript");
// exibe JavaScript
Funções com Parâmetros – Uma função pode
receber um ou mais parâmetros. Vejamos:
function somaDoisNumeros(numero1, numero2){
alert(numero1 + numero2);
}
somaDoisNumeros(10, 20); // exibe 30
Funções com Retorno. Vejamos:
alert(numero1 + numero2);
}
var numero = 80;
// a função só exibe, não retorna o valor! Como
subtrair 80 do valor calculado?
somaDoisNumeros(10,20);
// Só exibe exibe 30
Para retorna a diferença próximo slide
Funções com Retorno. Vejamos:
return numero1 + numero2;
}
var numero = 80;
var resultado = somaDoisNumeros(10,20); //
armazena 30 na variável resultado
alert(numero - resultado); // exibe 50
Function Expression - funções como conteúdo
de variáveis. Vejamos:
var somaDoisNumeros = function(numero1,
numero2) {
return numero1 + numero2;
};
somaDoisNumeros(10,20); // exibe 30
JavaScript – Array
O Array é útil quando precisamos trabalhar com
diversos valores armazenados. Vejamos:
var palavras = ["Darth Vader", "construio"];
palavras.push("a Estrela da Morte");
console.log(palavras);
// adiciona a string "a Estrela da Morte"
JavaScript – Blocos de RepeHção (for)
O for serve para executar um trecho do código
repetidamente até que uma condição seja
completada, ou enquanto uma condição for
verdadeira. Vejamos a sintaxe:
for
O bloco for precisa de algumas informações de
controle para evitar que ele execute
infinitamente:
for (/* variável de controle */; /* condição
*/; /* pós execução */) {
// código a ser repetido
}
JavaScript – Blocos de RepeHção (for)
Exemplo do uso do for:
var palavras = ["Darth", "Vader"];
for (var i = 0; i < palavras.length; i++) {
alert(palavras[i]);
} // código a ser repetido Darth depois Vader
JavaScript – Blocos de RepeHção (while)
While executa determinado código repetitivamente
enquanto uma condição for verdadeira. Diferente do
bloco for, a variável de controle, bem como sua
manipulação, não são responsabilidades do bloco em si:
var contador = 1;
while (contador <= 10) {
alert(contador + " Ordem 66..."); contador++;
}
alert("Valor do contador: " + contador);
// código a ser repetido 11 vezes Ordem 66
JavaScript – Funções Temporais
Servem para criar um timer para executar um
trecho de código após um certo tempo, ou
ainda executar algo de tempos em tempos.
A função setTimeout permite que agendemos
alguma função para execução no futuro e
recebe o nome da função a ser executada e o
número de milissegundos a esperar:
// executa a minhaFuncao daqui um segundo

setTimeout(minhaFuncao, 1000);
Servem para criar um timer para executar um
trecho de código após um certo tempo, ou
ainda executar algo de tempos em tempos.
Se for um código recorrente, podemos usar o
setInterval que recebe os mesmos argumentos
mas executa a função indefinidamente de
tempos em tempos:
// executa a minhaFuncao de um em um segundo
setInterval(minhaFuncao, 1000);
ClearInterval - As funções temporais devolvem
um objeto que representa o agendamento que
foi feito. É possível usá-lo para cancelar a
execução no futuro. É especialmente
interessante para o caso do interval que pode
ser cancelado de sua execução infinita:
// agenda uma execução qualquer
var timer = setInterval(minhaFuncao, 1000);
// cancela execução
clearInterval(timer);
JavaScript – Exercício
Exercício Banner Rotativo – Vamos montar três
exercícios para fixar o JavaScript.
Exercício 01 – HTML e JavaScript
http://www.guj.com.br/t/banner-
rotativo-simples/320111
Exercício 02 – HTML, CSS e JavaScript
JavaScript – Conclusão
Este conteúdo serviu para apresentar o
JavaScript e sua utilidade na programação
frontend. A base do conteúdo e exemplos
foram tirados do site Caleum
(https://www.caelum.com.br/apostila-html-
css-javascript/javascript-e-interatividade-na-
web/). Mais conteúdo vejam nas referências.
Referências
Básicas
CALEUM. JavaScript e interatividade na Web
Disponível em
https://www.caelum.com.br/apostila-html-css-
javascript/javascript-e-interatividade-na-web/.
FLANAGAN, David. JavaScript o guia definitivo. 6.
Porto Alegre Bookman 2014.
SILVA, Mauricio Samy. Construindo sites com CSS e
(X) HTML: sites controlados por folhas de estilo
em cascata. São Paulo: Novatec, 2007.
RUTTER, Jake. Smashing JQuery interatividade
avançada com Javascript simples. Porto Alegre
Bookman 2012
Referências
Complementares
ADAMS, Cameron (Et al.). A arte e a ciência da CSS:
crie web designs inspiradores baseados em padrões.
Porto Alegre: Bookman, 2009.
ADOBE CREATIVE TEAM. PHOTOSHOP CS2: guia
autorizado Adobe. Porto Alegre: Elsevier, 2013.
NIEDERST, Jennifer. Aprenda web design. Rio de
Janeiro (RJ): Ciência Moderna, 2
ROCHA, Cerli Antônio da. Desenvolvendo web sites
dinâmicos : PHP, ASP, JSP. Rio de Janeiro: Campus,
c2003.
ZAMBON, Giulio. Beginning JSP, JSF and Tomcat web
development: from novice to professional. New
York: Apress, 2007.
Referências
ADAMS, Cameron (Et al.). A arte e a ciência da
CSS: crie web designs inspiradores baseados em
padrões. Porto Alegre: Bookman, 2009.
SILVA, Maurício Samy. CSS para Webdesign.
Disponível em: http://www.maujor.com/.
Exemplos, Zen Garden. Disponível:
http://www.csszengarden.com/.
SILVA, Mauricio Samy. Construindo sites com CSS
e (X) HTML: sites controlados por folhas de
estilo em cascata. São Paulo: Novatec, 2007.
Referências
Básicas
FLANAGAN, David. JavaScript o guia definitivo. 6.
Porto Alegre Bookman 2014.
SILVA, Mauricio Samy. Construindo sites com CSS e
(X) HTML: sites controlados por folhas de estilo
em cascata. São Paulo: Novatec, 2007.
RUTTER, Jake. Smashing JQuery interatividade
avançada com Javascript simples. Porto Alegre
Bookman 2012
Referências
Complementares
ADAMS, Cameron (Et al.). A arte e a ciência da CSS:
crie web designs inspiradores baseados em padrões.
Porto Alegre: Bookman, 2009.
ADOBE CREATIVE TEAM. PHOTOSHOP CS2: guia
autorizado Adobe. Porto Alegre: Elsevier, 2013.
NIEDERST, Jennifer. Aprenda web design. Rio de
Janeiro (RJ): Ciência Moderna, 2
ROCHA, Cerli Antônio da. Desenvolvendo web sites
dinâmicos : PHP, ASP, JSP. Rio de Janeiro: Campus,
c2003.
ZAMBON, Giulio. Beginning JSP, JSF and Tomcat web
development: from novice to professional. New
York: Apress, 2007.

Aula 02 HTML Css Js

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

Aula 02 HTML Css Js

Enviado por

Direitos autorais:

Formatos disponíveis

Programação Front End e IHC

Professor: Ronilson Morais Lobo

 Corpo (<body>) – Contém a parte visível do

 O documento HTML é composto de TAGs que farão

 Um TAG é sempre precedido de um caracter "<"

 TAG indica onde começa sua área de inﬂuência,

 Um TAG de fechamento tem o mesmo nome do TAG

 A cada tipo de elemento corresponde uma tag

 Por exemplo, aos parágrafos correspondem a tag p

 Exemplo de uma tag com dois atributos:

 As tags que não contêm nada entre a abertura e o

 Exemplo, <br/> em vez de <br></br>

 Deﬁnições Lógicas sobre o Documento

 Exemplo 02 – Ícone no Navegador:

 Significa – Folhas de Estilo em Cascata.

 Definição – É um conjunto de regras que informa a

Um dos Templates do site Zen Graden.

Resultado renderizado que pega as propriedades de body e completa pela folha de

<p style="color:#000000; margin:

(letra tipo arial, cor azul, fundo

 Você pode "inventar" um nome e com ele criar uma

<p class ="cordois"> este parágrafo terá cor azul.</p>

// executa a minhaFuncao daqui um segundo

Você também pode gostar

Corpo (<body>) – Contém a parte visível do

O documento HTML é composto de TAGs que farão

Um TAG é sempre precedido de um caracter "<"

TAG indica onde começa sua área de inﬂuência,

Um TAG de fechamento tem o mesmo nome do TAG

A cada tipo de elemento corresponde uma tag

Por exemplo, aos parágrafos correspondem a tag p

Exemplo de uma tag com dois atributos:

As tags que não contêm nada entre a abertura e o

Exemplo, <br/> em vez de <br></br>

Deﬁnições Lógicas sobre o Documento

Exemplo 02 – Ícone no Navegador:

Significa – Folhas de Estilo em Cascata.

Definição – É um conjunto de regras que informa a

Você pode "inventar" um nome e com ele criar uma