Scribd
Carregar
61 visualizações

Aula 02 HTML Css Js

O documento apresenta os seguintes tópicos sobre programação frontend e IHC: 1) Conceitos básicos de HTML 5 como linguagem de marcação e tags; 2) Novos elementos e atributos em HTML 5; 3) Formulários, imagens, áudio e vídeo em HTML 5. O professor é Ronilson Morais Lobo e a turma é de 2022.2 em Salvador.

Enviado por

vinicius
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
61 visualizações

Aula 02 HTML Css Js

O documento apresenta os seguintes tópicos sobre programação frontend e IHC: 1) Conceitos básicos de HTML 5 como linguagem de marcação e tags; 2) Novos elementos e atributos em HTML 5; 3) Formulários, imagens, áudio e vídeo em HTML 5. O professor é Ronilson Morais Lobo e a turma é de 2022.2 em Salvador.

Enviado por

vinicius
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 120

Programação Front End e IHC

Professor: Ronilson Morais Lobo


Salvador - Turma 2022.2
Programação Frontend e IHC
Professor: Ronilson Morais Lobo
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.
HTML 5 – Elementos estruturais
— 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.
HTML 5 – Elementos estruturais
— 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.
HTML 5 – Elementos estruturais
— DIV – servirá para agruparmos elementos dentro
destes sections ou fazer outros detalhes que
não precisam de significado semântico, apenas
visual.
HTML 5 – Elementos estruturais
— 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>
! <!-- .Conteúdo do Cabeçalho... -->
<head>
<title> Título da Página </title>
</head>
! <!-- .Conteúdo do Corpo... -->
<body>
Esta é minha primeira página.
<strong> Este texto está em negrito
</strong>
</body>
</html>
HTML 5 – Elementos estruturais
— 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>
HTML 5 – Elementos estruturais
— 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>
HTML 5 – Elementos estruturais
— 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>
HTML 5 – Elementos estruturais
— 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>


HTML 5 – Elementos estruturais
— 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>,...
HTML 5 – Elementos estruturais
— 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>
HTML 5 – Elementos estruturais
— 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.
HTML 5 – Elementos estruturais
— 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.
HTML 5 – Elementos estruturais
— Exemplo de Elementos/Tags
— Texto do ficheiro HTML
<html>
<head><title>Hello
World</title></head>
<body>
<p>Hello world</p>
</body>
</html>
HTML 5 – Elementos estruturais
— Exemplo de Elementos/Tags
— 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.
HTML 5 – Elementos estruturais
— Exemplo de Elementos/Tags
— 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)
HTML 5 – Elementos estruturais
— 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> ! <!-- .Início do Documento. -->
<head> ! <!-- .Início do Cabeçalho do Documento. -->
<title> ! <!-- .Início do Título do Documento. -->
Aqui entra o Título do documento
</title> ! <!-- .Fim do Título do Documento. -->
</head> ! <!-- .Fim do Cabeçalho do Documento. -->
<body> ! <!-- .Início do Conteúdo do Documento. -->
<p align="center">Este texto está centralizado.</p>
! <!-- .O TAG <P> (parágrafo) está acompanhado do
Atributo ALIGN especificando o Valor “CENTER”,
determinando que o texto do parágrafo deve ser alinhado
ao centro. -->
</body> ! <!-- .Fim do Conteúdo do Documento. -->
</html> ! <!-- .Fim do Documento.-->
HTML 5 – Elementos estruturais
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.
HTML 5 – Elementos estruturais
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>.
HTML 5 – Elementos estruturais
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>
HTML 5 – Elementos estruturais
Elementos do Cabeçalho
— 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”>
HTML 5 – Elementos estruturais
Elementos do Cabeçalho
<style>
— Serve para indicar o CSS a qual desenhara a página:
— Exemplo:
<style type="text/css">
<!—
.Pprincipal{
color:#678654;}
.Psecundario{
color:#086587;}
-->
</style>
HTML 5 – Elementos estruturais
Elementos do Cabeçalho
<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”>
HTML 5 – Elementos estruturais
Conteúdo da Página
— 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.
HTML 5 – Elementos estruturais
Conteúdo da Página
— 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>
HTML 5 – Elementos estruturais
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.
HTML 5 – Elementos estruturais
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&aacute;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>
HTML 5 – Elementos estruturais
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>
HTML 5 – Elementos estruturais
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>
HTML 5 – Elementos estruturais
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
HTML 5 – Elementos estruturais
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.
HTML 5 – Elementos estruturais
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>:
— 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.
HTML 5 – Elementos estruturais
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>:
— 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.
HTML 5 – Elementos estruturais
Exemplo Imagem:
HTML 5 – Elementos estruturais
Conteúdo de <body> Tabela - <table>
— Exemplo:
<table width="200" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td> Coluna Linha
<td>&nbsp;</td>
</tr> Tabela
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td> Coluna Linha
<td>&nbsp;</td>
</tr>
</table>
Programação Frontend e IHC
Professor: Ronilson Morais Lobo
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;
background-position:top left;
}
Para este Título só precisa colocar o detalhe no caso a Capitular através da
imagem.
Fonte: http://www.csszengarden.com/?cssfile=192/192.css .
Exemplo 03 – Folha de Estilo em Cascata.
<!--Body com id para o css-->
<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.

Fonte: http://www.csszengarden.com/?cssfile=192/192.css .
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>
...........
<style type="text/css">
@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>
<style type="text/css">
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-position:top left;
background-repeat:repeat-x;
}
Propriedad Valo
HTML e r
<body id="css-zen-garden">
</body>

Fonte: http://www.csszengarden.com/?cssfile=192/192.css .
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
<body id="css-zen-garden">
<div id="extraDiv1">
</div>
</body>

Fonte: http://www.csszengarden.com/?cssfile=192/192.css .
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.
Programação Frontend e IHC
Professor: Ronilson Morais Lobo
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>
alert("Olá, Mundo!");
</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
alert("Olá, Mundo!");
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
JavaScript – Tipos de Dados
— 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:
var starwars = "XVader";
starwars.length; // retorna tamanho
da string neste caso 6
starwars.replace("X", "Darth");
// retorna DarthVader
JavaScript – Tipos de Dados
— String – para obter uma string modificada é
necessário receber o retorno de cada função
que manipula a string: Vejamos no HTML.
var starwars = "XVader";
starwars.replace("X", "Darth");
console.log(starwars);
// retorna Xvader
var starwars = "XVader";
starwars = starwars.replace("X", "Darth");
console.log(starwars);
// retorna DarthVader
JavaScript – Tipos de Dados
— 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
JavaScript – Tipos de Dados
— 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"
JavaScript – Tipos de Dados
— 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");
}
JavaScript – Funções
— 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
JavaScript – Funções
— 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
somaDoisNumeros(100, 20); // exibe 120
somaDoisNumeros(45, 35); // exibe 80
JavaScript – Funções
— Funções com Retorno. Vejamos:
function somaDoisNumeros(numero1, numero2){
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
JavaScript – Funções
— Funções com Retorno. Vejamos:
function somaDoisNumeros(numero1, numero2){
return numero1 + numero2;
}
var numero = 80;
var resultado = somaDoisNumeros(10,20); //
armazena 30 na variável resultado
alert(numero - resultado); // exibe 50
JavaScript – Funções
— 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);
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.
— 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);
JavaScript – Funções Temporais
— 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.

Você também pode gostar