Python for All

Part One

Hyperlinks — Connecting the Web

The hyperlink is the defining feature of the web. It is what turns a collection of documents into a network. In journalism, links serve two purposes: they credit your sources, and they give readers a path to verify what you have written.

A link is created with the <a> tag (anchor). It has one essential attribute: href (HyperText REFerence), which holds the destination URL. The text between the opening and closing tag is what the reader clicks.

Opening links in a new tab

When you link to an external source, it is good practice to open it in a new browser tab, so the reader does not leave your article. Add two attributes to the <a> tag: target="_blank" to open a new tab, and rel="noopener noreferrer" as a security measure.

Part Two

Images — Adding Photographs

Images are added with the <img> tag. Unlike most tags, it is self-closing — it has no content between tags and no closing tag. It has two required attributes:

• src — the URL or file path of the image
• alt — a text description of the image, read aloud by screen readers and displayed if the image fails to load. Never leave alt empty unless the image is purely decorative.

The CSS rule max-width: 100% ensures the image never overflows its container, no matter how large the original file is. height: auto preserves the aspect ratio. These two lines should appear in every article you publish.

Part Three

Captions — figure and figcaption

A bare <img> tag has no caption. In journalism, every photo needs one: who is in the frame, where it was taken, when, and by whom. HTML provides a semantic wrapper for exactly this: <figure> and <figcaption>.

Wrap the image in <figure>, then add a <figcaption> directly after the <img>.

Part Four

Your Turn — A Story With Sources and a Photo

Build a short article that includes:

• A headline and two paragraphs
• At least one hyperlink to an external source (with target="_blank")
• A <figure> with an image and a <figcaption>

You can use any image from Wikimedia Commons by right-clicking it and copying the image URL, or use the example URL below.