1. Introdução¶

In this chapter, we introduce the core ideas of [Topic].

1.1 Descriptive Text¶

This book uses plain Markdown so it can be:

Read directly on the web
Exported or printed to PDF
Mixed with code, figures, videos, and audio seamlessly

In software engineering education, using open materials allows students to inspect not only the final text but also the structure of the book, its version history, and collaborative contributions.

Quiz rápido¶

Qual tag define um parágrafo em HTML?

Experimente o código¶

<h1>Hello, mundo!</h1>
<p>Modifique este HTML e clique em Executar.</p>

Vídeo da aula¶

Criando componentes interativos com Material for MkDocs¶

Abas¶

HTMLCSS

<p>Exemplo HTML</p>

p { color: red; }

Acordeões¶

Clique para expandir

Este é um conteúdo oculto.

Cards¶

Exemplos de Cards¶

- :material-code-tags: **HTML** --- Introdução ao HTML e estrutura básica. - :material-palette: **CSS** --- Estilização, layout e responsividade. - :material-language-javascript: **JavaScript** --- Interatividade, DOM e APIs.

Introdução ao HTML e estrutura básica.
Estilização, layout e responsividade.
Interatividade, DOM e APIs.

1.2 Images¶

Store images under docs/figures/ and reference them with relative paths:

Example diagram of the system

Rendered:

Example diagram of the system

ℹ️ Replace example-diagram.png with your actual diagram.

1.3 Source Code in Different Languages¶

Below are examples of fenced code blocks with language tags for syntax highlighting.

Python

def greet(name: str) -> str:
    """Return a greeting message."""
    return f"Hello, {name}!"

if __name__ == "__main__":
    print(greet("Student"))

JavaScript

function sum(a, b) {
  return a + b;
}

console.log("Result:", sum(2, 3));

Java

public class Hello {
    public static void main(String[] args) {
        String name = (args.length > 0) ? args[0] : "Student";
        System.out.println("Hello, " + name + "!");
    }
}

You can add more languages as needed: c, cpp, bash, html, etc.

1.4 Video (YouTube or Other Streaming)¶

Markdown has no native <video> tag, but we can:

A. Simple Link¶

Watch the introduction video:  
https://www.youtube.com/watch?v=YOUR_VIDEO_ID

Rendered:

Watch the introduction video: https://www.youtube.com/watch?v=YOUR_VIDEO_ID

B. Clickable Thumbnail¶

Assuming you have docs/figures/example-video-thumb.png:

[![Watch the video](../figures/example-video-thumb.png)](https://www.youtube.com/watch?v=YOUR_VIDEO_ID "Intro Video")

Rendered:

1.5 Audio (Podcast or Lecture)¶

Simple External Link¶

Listen to the companion podcast episode:  
https://example.com/podcast/episode-1

Rendered:

Listen to the companion podcast episode: https://example.com/podcast/episode-1

Embedded Local Audio File¶

If you place example-audio.mp3 in docs/media/:

<audio controls>
  <source src="../media/example-audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Rendered:

Most modern browsers will show a built-in audio player.

1.6 “Playground” Exercise¶

Try it yourself

Copy the Python greet function from this chapter.
Modify it to accept an optional parameter course, and print "Hello, <name>, welcome to <course>!".
Run it in your local environment or an online IDE (e.g., Replit, GitHub Codespaces).

1.7 Quick Quiz¶

Concept check

Why is using Markdown a good choice for open textbooks?
What are the advantages of hosting the book on GitHub?
How can a student generate a PDF from this book?