← Back to Tutorials Chapter 3

Visuals & Design

Images

The <img> tag embeds an image in your page. It is a self-closing tag with two required attributes:

<img src="images/photo.jpg" alt="Description of the image">
Alt text best practice: Describe the image content concisely. For decorative images, use alt="" (empty) so screen readers skip them.

Responsive Images

Use the srcset attribute to serve different image sizes based on screen width:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="A scenic mountain landscape">

Figure & Figcaption

<figure>
  <img src="diagram.png" alt="Flowchart of the login process">
  <figcaption>Figure 1: Login process flowchart</figcaption>
</figure>

Linking Stylesheets

CSS is connected to HTML via the <link> tag inside <head>:

<link rel="stylesheet" href="styles.css">

Inline Styles vs. Classes

CSS can be applied in three ways:

<!-- Inline style (avoid when possible) -->
<p style="color: blue; font-size: 18px;">Blue text</p>

<!-- Using a class (preferred) -->
<p class="highlight">Styled text</p>

Colors in HTML

Colors can be specified in several formats:

<p style="color: red;">Named color</p>
<p style="color: #ff0000;">Hex code</p>
<p style="color: rgb(255, 0, 0);">RGB value</p>
<p style="color: hsl(0, 100%, 50%);">HSL value</p>

Fonts & Typography

Use the <link> tag to include web fonts like Google Fonts:

<!-- In <head> -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

<!-- In CSS -->
body { font-family: 'Open Sans', sans-serif; }

Icons

Icons can be added using icon libraries like Font Awesome or inline SVGs:

<!-- Font Awesome -->
<i class="fas fa-home"></i>

<!-- Inline SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>

Practice Task

Create an HTML page that includes: