View
213
Download
1
Category
Preview:
Citation preview
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
Recommended