Buscar

Título da aula_ Programação básica em HTML e CSS para iniciantes e falantes não nativos de português

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

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.

Outros materiais