![Page 1: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/1.jpg)
Introdução ao desenvolvimento Web
Uma apresentação sobre HTML, CSS
![Page 2: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/2.jpg)
Sumário
Objetivo do curso
Front End vs Back End
HTML
CSS
![Page 3: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/3.jpg)
Objetivo do curso
➔ Apenas introduzir e criar uma base
![Page 4: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/4.jpg)
Front End vs Back End
➔ Desenvolvimento Front End
➔ Desenvolvimento Back End
➔ Desenvolvimento Full Stack
![Page 5: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/5.jpg)
HTML
➔ Hyper Text Markup Language
➔ Linguagem de marcação➔ Estrutura básica (boilerplate)
➔ Comentários: <!-- ... -->
![Page 6: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/6.jpg)
HTML
➔ O que são tags e elementos
➔ <tag> Conteúdo </tag> ou <tag />
➔ Básicas: <title> … </title> | <p> … </p> | <h1> … </h1>
➔ Formatação: <br>
➔ Formulários e entrada de dados: <form> … </form> | <input>
➔ Imagem: <img>
➔ Frame: <iframe>
➔ Links: <a> … </a> | <link>
➔ Listas: <ol> … </ol> | <ul> … </ul> | <li> … </li>
➔ Tabelas: <table> … </table> | <tr> … </tr> |<th> … </th> | <td> … </td>
➔ Estilo e Semântica: <div> … </div> | <span> … <span>
➔ Programação: <script> … </script>
➔ Referência: https://www.w3sc hools.com/tags/ref_byfunc.asp
![Page 7: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/7.jpg)
HTML
➔ Nested Elements (Aninhamento)
➔ A importância da indentação
![Page 8: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/8.jpg)
HTML
➔ Atributos ( <img src=”imagem.jpg”> )
➔ href
➔ src
➔ id | name
➔ title
➔ alt
➔ class
➔ width | height
➔ style
➔ target (_blank | _self | _parent | _top)
➔ Referência: https://www.w3schools.com/tags/ref_attributes.asp
![Page 9: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/9.jpg)
HTML
➔ MÃOS À OBRA
![Page 10: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/10.jpg)
CSS
➔ Cascading Style Sheets
➔ Estilizar páginas HTML
➔ <tag style=””>
➔ <head> <style> p { color: red; font-size: 20px; } </style></head>
![Page 11: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/11.jpg)
CSS
➔ Arquivo próprio
<link rel=”stylesheet” type=”text/css” href=”style.css”>
➔ Seletores:
➔ <h1 class=”negrito verde” id=”titulo”>
➔ h1 {
}➔ .negrito {
}➔ #titulo {
}
![Page 12: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/12.jpg)
CSS
➔ Classes x ID
➔ Escificidades: ID > Classe > Elemento
➔ Encadear seletores:
➔ h1.negrito {
}➔ Selecionando elementos aninhados:
➔ .lista li {
}
![Page 13: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/13.jpg)
CSS
➔ !important
➔ h1, .menu {
propriedade: valor;}
➔ Unidades de tamanho: px, vh, vw, %, …
➔ Cores: hex, rgb, keywords, ...
![Page 14: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/14.jpg)
CSS
➔ Propriedades➔ margin➔ padding➔ color➔ background➔ height/width➔ font-size➔ font-family➔ text-transform➔ position (relative, absolute)
![Page 15: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/15.jpg)
CSS
➔ MÃOS À OBRA
![Page 16: desenvolvimento Web Introdução ao - Introcompintrocomp.ufes.br/wp-content/uploads/FrontEnd.pdf · Introdução ao desenvolvimento Web Uma apresentação sobre HTML, CSS. Sumário](https://reader033.vdocuments.com.br/reader033/viewer/2022050102/5f40e853fcca312a2815eece/html5/thumbnails/16.jpg)
Obrigado!