Interfaces Pessoa. Laboratório 1. Máquina. HTML, CSS, JS- Introdução

Tamanho: px

Começar a partir da página:

Download "Interfaces Pessoa. Laboratório 1. Máquina. HTML, CSS, JS- Introdução"

Nina Martins Pedroso
6 Há anos
Visualizações:

1 Interfaces Pessoa Máquina Laboratório 1 HTML, CSS, JS- Introdução 01

2 HTML + CSS + JavaScript Tecnologia para desenvolvimento web: Páginas web Aplicações web Aplicações mobile HTML Linguagem standard para web CSS Look & layout JS ScripGng para comportamento dinâmico

3 01 HyperText Markup Language

4 Estrutura tradicional de um documento HTML <html> <head> <Ntle> Título <body> <h1> <p> <p> Heading Parágrafo 1 Parágrafo 2

5 Estrutura de um HTML moderno <html> <head> <Ntle> <body> <div id = header> <div id = naviganon> <div id = texto> <div id = img> <div id = footer> Parágrafo 2

6 Diferenças? Elemento <div> Para que serve? Dividir a página HTML em secções Agrupar elementos HTML Alterar o esnlo de vários elementos simultaneamente

7 Criação de um documento HTML Vamos criar um ficheiro de texto com: <!DOCTYPE html> <html> <head> <Ntle>Titulo</Ntle> </head> <body> <div id="header"> Header do site </div> <div id = "texto"> Texto </div> </body> </html>

8 Criação de um documento HTML Documento HTML <!DOCTYPE html> <html> <head> <Ntle>Titulo</Ntle> </head> <body> <div id="header"> Header do site </div> <div id = "texto"> Texto </div> </body> </html> Informação sobre o documento Conteúdo visível da página

9 Resultado: um Hello World em HTML

10 Inserir uma imagem Colocar o seguinte código <img src= error.png >

11 Demasiado grande? Alterar para: <img src= error.png width="500px">

12 Criar uma tabela Vamos apagar tudo do div texto e escrever: <table> <tr> <td>um</td> <td>dois</td> <td>tres</td> </tr> <tr> <td>quatro</td> <td>cinco</td> <td>seis</td> </tr> </table>

13 Tabelas Resultado:

14 Exercício Criar o seguinte (com as imagens fornecidas para a aula):

15 Para referência hxp:// hxps://dev.w3.org/html5/html-author/ hxps://

16 02 CSS: Cascading Style Sheets

17 Para que serve? Alterar propriedades visuais de elementos HTML: Body Headings Parágrafos Divs Não tem grande aspeto!

18 UNlização de CSS: ANTES! Adicionar linha: <!DOCTYPE html> <html> <head> <Ntle>Titulo</Ntle> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> para o HTML saber que tem de ir buscar as propriedades visuais declaradas no CSS

19 Criação de ficheiro CSS Criar ficheiro de texto com: body { font-family: Times; } As declarações para o body afetam todo o corpo do HTML. #header { color: green; font-size: 30px; } #texto { font-size: 20px; } Através de #+id seleciona-se o <div> que se pretende. Aqui estamos a alterar propriedades (cor e tamanho do texto) ao div que denominámos header. Alteração do tamanho do texto para os elementos do div <texto>

20 Diferenças?

21 Mini Exercício: ReNrar serifas em todo o texto Como alterar o texto todo de uma vez? O objenvo não é mudar parâmetro a parâmetro! Como subsgtuir por texto sem serifas? Referência: ver htp://

22 Box model do CSS Todos os elementos HTML são encapsulados numa caixa ( box ). Content: O conteúdo, onde aparecem as imagens e texto Padding: Cria uma área vazia transparente à volta do conteúdo. Border: Uma fronteira entre o padding e o content. Margin: Cria uma área vazia transparente à volta do border. Margin Border Padding Content

23 Mini-exercício: tentar reproduzir esta disposição de elementos: UGlizar padding-top: 20px; Margin-top: 100px;

24 Para referência hxp:// hxp:// hxps://jigsaw.w3.org/css-validator/

25 03 JAVASCRIPT

26 Hello World Adicionar linhas ao <body>: <body> <script> console.log ( Hello World!"); </script> Vamos escrever esta mensagem para a consola. <h1>primeiro heading</h1> <p>primeiro paragrafo.</p> </body>

27 Hello World Aqui está!

28 Interação: alterar imagem com clique Alterar a linha: para <td><img src = "rgb.jpg" width="100"></td> Estamos a atribuir um id à imagem <td><img id="rgb" onclick="changeimage()" src = "rgb.jpg" width="100"></td> Ao ser clicada, a imagem muda

29 Interação: alterar imagem com clique Adicionar (ainda no body) as linhas: <script> funcnon changeimage() { var image = document.getelementbyid('rgb'); image.src = "error.png"; } Seleciona a imagem pelo id </script> Ao ser clicada, a imagem muda

30 Resultado Antes de ser clicada Depois de ser clicada

31 Interação: alteração dinâmica de propriedades CSS Adicionar o nome da função: <td><img id="rgb" onclick="changetextcolor()" src = "rgb.jpg" width="100"></td> <script> funcnon changetextcolor () { document.getelementbyid("texto").style.color = "blue"; } </script> Alteração da cor de todo o texto no div texto

32 Resultado Antes de a imagem ser clicada Depois de a imagem ser clicada

33 Mini-exercício Mouseover > mostra o negagvo de cada imagem Mouseout > volta a mostrar a imagem normal

34 Para referência hxp:// hxps://developer.mozilla.org/en-us/learn/ Gegng_started_with_the_web/ JavaScript_basics

35 04 EXERCÍCIO

36 Site do Grupo Com base no template: Vai ser o repositório de materiais ao longo do semestre. Divs (HTML), styling (CSS), interagvidade ao clicar nos otulos (JS) Referência: ver htp://

37 05 PRÓXIMA AULA

38 QuesNonários Fazer quesgonário para Análise UGlizadores e Tarefas Tão próximo quanto possível do final Preparação Ler Cap. 10 do livro Rever as 11 perguntas (livro) Enviar quesnonário por

Documentos relacionados

HTML & CSS. uma introdução

HTML & CSS. uma introdução HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência