1

Aula 3 parte 1 Programao Web

Bruno Orlandi

2

Web

3

Navegadores(Browsers) Web

4

Navegadores(Browsers) Web Navegam nas pginas Web da Internet Permitem visualizar e interagir com as

pginas Se comunicam com servidores para trocar

informaes Processam os dados para renderizar a

pgina

5

Linguagens Web Basicamente 3 linguagens:

HTML, CSS, JavaScript HTML: contedo CSS: layout, design JavaScript: comportamento, lgica

6

HTML Hyper Text Markup Language Cdigos em Tags usando

Ex: Organiza o contedo de uma pgina Obs: HTML no linguagem de

programao!

7

Estrutura bsica HTML

... ...

Comea o HTML

Cabealho

Corpo da Pgina

Ttulo da pgina, scripts, icone da pgina, arquivos CSS para layout.

Todo o contedo da pgina a ser exibido para o usurio.

8

CSS Cascading Style Sheets Definir estilos para os elementos do HTML Pode definir tamanho, cores, fontes, efeitos Seleciona elementos por ID, classe, tag,

atributo No linguagem de programao

9

CSS

body { color: white; background-color: red; /* rgb(255,0,0), #FF000 */ font-weight: bold;}

10

HTML com CSS

Background Vermelho

body{

color: white;

background-color: red;

font-weight: bold;

}

Fundo vermelho com letras negrito na cor branca.

;)

11

JavaScript uma linguagem de programao! Presente em todos os sites e aplicaes

na Web Pode manipular as pginas Web

permitindo criar pginas interativas Iremos usar durante todo o curso

12

JavaScriptvar x;

x = prompt("Digite um nmero:");

var quadrado = x*x;

alert("O nmero "+x+" elevado ao quadrado "+quadrado);

13

JavaScriptvar x;

x = prompt("Digite um nmero:");

var quadrado = x*x;

alert("O nmero "+x+" elevado ao quadrado "+quadrado);

14

HTML com JavaScript

JavaScript Exemplo

var x;

x = prompt("Digite um nmero:");

var quadrado = x*x;

alert("O nmero "+x+" elevado ao quadrado "+quadrado);

Simples exemplo com JavaScript

15

HTML5 HTML5 novo padro da Web Surgiu por volta de 2007 HTML5 = HTML + CSS3 + JavaScript Novas tags HTML, novas funes JavaScript , , , GPS, etc... Muitas ferramentas novas

16

Elementos Importantes HTML

Ttulo do documento Contedo do documento

17

Elementos Importantes HTML Titulos: Quebra de Linha:
Pargrafo de Texto:

Imagens:

Atributos: src, width, height. Listas: e

Itens da lista:

18

Elementos Importantes HTML Links: Facebook Tabela: , , , , Formatao:

Negrito Itlico Sublinhado

https://www.facebook.com/

19

Elementos Importantes HTML Elementos que auxiliam para colocar Estilos e

tambm para programar: : um bloco de elementos, pode colocar

outras aplicaes como Google Maps : um pedao de texto, facilita para

editar partes da pgina

20

Formulrios e Interao HTML Boto: Lista de Seleo: , Inputs:

Checkbox Cor: Color Data: Date Arquivos: File Senha: Password Radio Button Texto: Text Nmero: Number

21

Formulrios e Interao HTML

22

Cdigos de Exemplo Vamos brincar com uns cdigos...

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22