Internet e Programação Web Professor: André Jandrey
O que vamos aprender este ano? 3° Trimestre 1° Trimestre 2° 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"> <title> Nome do site </title> <link rel="stylesheet" href="arquivo.css"/> Cabeça </head> <body> <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> Corpo </body> </html>
Revisão de HTML a form label select article h1..h6 li style aside head 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. 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 Arquivo.css <html> <head> </head> <body> </body> </html> body{ color : white; } <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