Internet e
Programação Web
PROFESSOR: 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
Cabeça <title> Nome do site </title>
<link rel="stylesheet" href="arquivo.css"/>
</head>
<body>
Corpo
</body>
</html>
<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>
Revisão de HTML
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:
a
form
label
select
article
h1..h6
li
style
aside
head
link
sub
b
header
meta
sup
br
hr
nav
table
body
html
ol
td
button
i
option
textarea
div
iframe
p
th
del
img
pre
title
footer
input
section
tr
ul
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.
Valor: Estado que a característica terá ao aplicar a formatação.
Exemplo: Tamanho, cor, fonte, estilo, etc.
Exemplo: 10px, Arial, Black, solid, etc.
Exemplo: Body{ background-color: black;}
Separação HTML (estrutura)e CSS
(formatação)
Arquivo.html
Arquivo.css
<html>
<head>
</head>
<body>
body{
color : white;
}
</body>
</html>
<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
Download
