Internet e Programação Web PROFESSOR: ANDRÉ JANDREY

Internet e Programação WebPROFESSOR: ANDRÉ JANDREY

O que vamos aprender este ano?

1° Trimestre 2° Trimestre 3° Trimestre

Breve história da internet (HTML) 1969 - Arpanet 1991 - HTML 1.0 (Criação de uma linguagem que se tornaria o

padrão para o desenvolvimento de páginas web) 1994 – HTML 2.0 (apenas correção da versão anterior) 1995 – HTML 3.0 (Um rascunho de uma nova versão) 1997 – HTML 3.2 (Algumas novas características tais como

tabelas, applets e texto flutuante ao redor de imagens) 1998 – HTML 4.0 (Novas correções e poucas melhorias) 1999 – HTML 4.01 (Alguns novos elementos de formulário e

frames) 2014 – HTML 5.0

Breve história da internet (CSS)

1994 – Inicio da criação da Cascading Style Sheet – CSS

1996 – CSS 1 (Lançamento oficial – 53 comandos)

1998 – CSS 2 (Incremento de funcionalidades – 122 comandos)

2014 – CSS 3 (Ainda em desenvolvimento – 250 comandos)

Estrutura básica da linguagem HTML

Cabeça

Corpo

<html>

</html>

<head>

</head><body>

</body>

<meta charset="UTF-8"><title> Nome do site </title><link rel="stylesheet" href="arquivo.css"/>

<h1>Página Web do 4° Ano</h1><h2>Principais elementos de body</h2><img src="images/html_css.png" alt="HTML e CSS"><p>A HTML é uma linguagem de marcação utilizada para construir páginas web. Ela foi criada por Tim Berners-Lee (...) </p>

<!DOCTYPE html>

Revisão de HTML

a article aside b br body button div del footer

form h1..h6 head header hr html i iframe img input

label li link meta nav ol option p pre section

select style sub sup table td textarea th title tr ul

Verifique o seu grau de conhecimento sobre os principais elementos HTML, para isto preencham em frente de cada comando sua função, caso não conheça algum deles pesquise qual sua utilidade semântica:

Exercício: Encontre o layout

Resposta: Encontre o layout

Novos elementos estruturais HTML 5

Modelagem antiga Modelagem HTML 5

Exercício:

Criar a página do curso de Informática conforme página 5 da apostila.

Comandos proibidos:

Big Center Font Frame u

Atributos proibidos align como atributo da tag caption, iframe, img, input, object, legend, table, hr,

div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr. alink, link, text e vlink como atributos da tag body. background como atributo da tag body. bgcolor como atributo da tag table, tr, td, th e body. border como atributo da tag table e object. height como atributo da tag td e th. hspace e vspace como atributos da tag img e object. marginheight e marginwidth como atributos da tag iframe. size como atributo da tag hr. type como atributo da tag li, ol e ul. valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr. width como atributo da tag hr, table, td, th, col, colgroup e pre.

Estrutura básica da linguagem CSS

Seletor { propriedade : valor; [propriedade : valor; ] } Seletor: são elementos HTML que desejamos modificar.

Exemplo: Corpo da página, Títulos, Parágrafos, Tabelas, etc. Propriedade: são as características do elemento que desejamos

modificar. Exemplo: Tamanho, cor, fonte, estilo, etc.

Valor: Estado que a característica terá ao aplicar a formatação. Exemplo: 10px, Arial, Black, solid, etc.

Exemplo: Body{ background-color: black;}

Separação HTML (estrutura)e CSS (formatação)

Arquivo.html

<html><head>

</head><body>

</body></html>

body{color : white;

}

Arquivo.css

<link href=“arquivo.css" rel="stylesheet">

Resultado com aplicação do estilo.

Propriedades de fundo background-color: cor; Cor do fundo: cor. Exemplo: background-color : black;

background-image: url; Imagem de fundo: endereço. Exemplo: background-image : url(bg.png)

background-repeat: repeat|repeat-x|repeat-y|no-repeat; Repetição da imagem de fundo: imagem repetida; repetição horizontal;

repetição vertical; não repetida. Exemplo: background-repeat : no-repeat;

Propriedades de fundo

background-attachment: scroll|fixed; Posição da imagem de fundo quanto aos scroll: não mantém posição ou

mantém posição. Exemplo: background-attachment : fixed;

background-position: %|px top|center|bottom left|center|right; Posição da imagem no fundo: percentagem; medida em pixel. Exemplo: background-position : top;

Exercício

Documents

Internet e Programação Web PROFESSOR: ANDRÉ JANDREY