Baixe o app para aproveitar ainda mais
Prévia do material em texto
Título da aula: Programação básica em HTML e CSS para iniciantes e falantes não nativos de português Introdução: Bem-vindos a esta aula divertida e interessante sobre programação básica em HTML e CSS, projetada especialmente para iniciantes e falantes não nativos de português. Aprenderemos juntos como criar páginas web simples, mas visualmente atraentes, usando HTML para estruturar o conteúdo e CSS para estilizá-lo. 1. O que é HTML e CSS? ● HTML (HyperText Markup Language) é a linguagem padrão para criar e estruturar páginas web. ● CSS (Cascading Style Sheets) é uma linguagem utilizada para estilizar páginas web, controlando cores, fontes, layout e outros aspectos visuais. 2. Configurando o ambiente de desenvolvimento ● Use um editor de texto simples, como o Notepad (Windows) ou o TextEdit (Mac), ou um editor de código específico, como o Visual Studio Code ou o Sublime Text. ● Salve um arquivo com a extensão ".html" para criar uma página HTML e um arquivo com a extensão ".css" para criar um arquivo CSS. 3. Estruturando uma página HTML a. Comece com a estrutura básica do HTML: html Copy code <!DOCTYPE html> <html> <head> <title>Minha primeira página</title> </head> <body> </body> </html> b. Adicione elementos HTML, como títulos, parágrafos, listas e imagens: html Copy code <body> <h1>Olá, mundo!</h1> <p>Esta é minha primeira página HTML.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <img src="minha-imagem.jpg" alt="Uma imagem interessante"> </body> 4. Estilizando uma página com CSS a. Vincule seu arquivo CSS ao arquivo HTML: html Copy code <head> <title>Minha primeira página</title> <link rel="stylesheet" href="estilos.css"> </head> b. Adicione estilos no arquivo CSS para personalizar a aparência dos elementos HTML: css Copy code body { font-family: Arial, sans-serif; background-color: lightblue; } h1 { color: darkblue; font-size: 2.5em; text-align: center; } p { color: darkblue; font-size: 1.2em; } ul { list-style-type: square; padding-left: 20px; } img { width: 300px; height: auto; display: block; margin: 0 auto; } 5. Experimente e divirta-se! ● Explore diferentes elementos HTML e propriedades CSS para criar uma página web única e personalizada. ● Use recursos online, como o MDN Web Docs e o W3Schools, para aprender mais sobre HTML e CSS e obter inspiração para suas criações.
Compartilhar