Slides minicurso Web Design
3 gostaram•823 visualizações
Este documento fornece uma introdução sobre web design, HTML e CSS. Ele explica como a internet funciona e o que são HTML e CSS, ensinando como criar um site básico. O documento também apresenta conceitos como planejamento, wireframes, mockups e protótipos. Por fim, ensina os principais elementos, tags e propriedades de HTML e CSS para estruturar e estilizar páginas web.
Slides minicurso Web Design
- 1. Introdução ao Web Design Como funciona a internet, o que é HTML e CSS, criando um site básico
- 2. Ana Rute Mendes Web Designer Formada em Comunicação Social - Midialogia e técnica em Informática @ana_rute Virgílio Santos Desenvolvedor Formado em Engenharia de Computação @virgilionsantos Paula Furtado Especialista em Educação Formada em Letras, mestranda em Linguística Aplicada @paularfurtado http://escolamupi.com.br https://github.com/mupi/ QUEM SOMOS
- 7. O Web Design Back-end X Front-end Design Thinking
- 9. WIREFRAME
- 10. MOCKUP
- 11. Tarefa #1 Em uma folha de papel, fazer um mockup a mão de uma página de perfil ou currículo
- 12. HTML Hipertext Markup Language Linguagem de marcação Estrutura e organização
- 13. HTML Semântica Elementos, tags e atributos <a href="http://escolamupi.com.br"> Escola Mupi </a>
- 14. Estrutura básica <!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8"> <title>Meu primeiro site</title> </head> <body> <h1>Olá mundo!</h1> <p>Oba, meu primeiro site!</p> </body> </html>
- 15. Principais tags Títulos: <h1></h1> Parágrafos: <p></p> Imagens: <img /> Quebra de linha: <br /> Listas: <ul></ul>, <ol></ol> e <li></li> Âncoras: <a></a> Destacar palavras: <strong></strong> e <em></em>
- 16. Tarefa #2 Estruturar o seu mockup em uma página HTML
- 17. Elementos em bloco vs. em linha Div e span Elementos semânticos <header></header>, <footer></footer>, <aside></aside>, <nav></nav>
- 18. CSS Cascade Style Sheets Linguagem para estilização
- 19. CSS & HTML Classe e ID Seletores http://paularfurtado.github.io/ css-selector-game
- 20. Inserindo CSS <p style="color: #FF0000;">Oi!</p> <style type="text/css"> p.exemplo{ border: 1px dashed #00F; } </style> <link rel="stylesheet" type="text/css" href="caminho/arquivo.css" /> Inline Através das tags <style> Em arquivos externos, através da tag <link> 1. 2. 3.
- 21. CSS Sintaxe da linguagem seletor { propriedade: valor; }
- 22. Propriedades tipográficas Cor de texto: color Família de fonte: font-family Tamanho da fonte: font-size Estilo de fonte: font-style Peso da fonte: font-weight Altura da linha: line-height p { color: #000088; font: italic normal bold 14px 100% Georgia, serif; }
- 23. Valores das propriedades Cores na web: RGB, Hex, RGBa Pixels e medidas
- 24. Modelo de caixa largura: width altura:height borda: border Conteúdo do elemento distância interna: padding margem: margin
- 25. Exemplos de uso section { height: 100px; margin: 0 auto; /* centraliza o elemento */ width: 150px; } footer { border-top: 1px solid #ccc; padding: 2em; margin-top: 5px; }
- 26. Tarefa #3 Crie um arquivo CSS, insira- o no seu HTML e estilize a sua página