Skip to main content
Techlogia — AI and Web Development Berlin
← All courses
Free to read – no sign-up

HTML Basics

Build your very first webpage. 5 short tasks — tags, headings, paragraph, link, image. No prior knowledge needed.

Duration: 25 minLevel: BeginnerExercises: 5

Your first HTML page

HTML basics: your first web page

HTML (HyperText Markup Language) is the language web pages are built in. HTML uses tags (markers in angle brackets) to describe what an element is — a heading, a paragraph, a link, an image.

Key terms

  • Tag: a marker like <p> (start) and </p> (end). The content goes in between.
  • Element: a complete tag pair with content, e.g. <h1>Title</h1>.
  • Attribute: extra info inside a tag, e.g. href on a link or src on an image.

Work in the file /home/student/website/index.html. Create the folder: mkdir -p /home/student/website. Edit the file with nano /home/student/website/index.html.

Your goal

You build a complete small web page: skeleton, heading, paragraph, link and image.

Exercises

  1. 1. Doctype + html tag

    Concept: the skeleton. Every HTML page starts with <!doctype html> (tells the browser "this is HTML5") and wraps everything in <html>...</html>.

    Create the folder and write the skeleton (nano /home/student/website/index.html):

    <!doctype html>
<html>
  <head><title>My page</title></head>
  <body>
  </body>
</html>

    Check: index.html contains <!doctype html> and an <html>...</html> element.

  2. 2. A heading

    Concept: heading <h1>. The most important heading on a page is <h1>. Add it inside <body>.

    <h1>Welcome to my page</h1>

    Check: index.html contains an <h1> element with text.

  3. 3. A paragraph

    Concept: paragraph <p>. Body text goes in a paragraph tag <p>. Add a paragraph with at least one short sentence.

    <p>This is my first own web page, which I built myself.</p>

    Check: index.html contains a <p> element with at least 10 characters of text.

  4. 4. A link

    Concept: link <a> with href. A link leads to another page. The tag is <a>, the target is in the href attribute.

    <a href="https://techlogia.de">To techlogia</a>

    The URL must start with http:// or https://.

    Check: index.html contains an <a> element with href="https://...".

  5. 5. An image

    Concept: image <img> with src and alt. You embed an image with <img>: src is the image source, alt is a description text (important for accessibility and if the image fails to load).

    <img src="https://picsum.photos/200" alt="A random example image">

    Check: index.html contains an <img> element with src and alt.

Related courses

SSH HardeningYou harden your server VM's SSH configuration against the most common attack vectors — disable root login, switch off password auth, limit login attempts, close idle sessions. 7 tasks, about 60 minutes.Hello WorldFirst touch of the validator. Demonstrates the 4 check types: file_content, command_output, service_status, lynis_diff.Deploy a live website with HTTPSWithin an hour you'll get your own website online — with a valid HTTPS certificate from Let's Encrypt, your own subdomain, and real nginx. You'll edit HTML, check nginx config, and trigger certbot. At the end you can share the link — it stays live as long as the lab session runs (max. 60 minutes).UFW + fail2banYou set up a basic server firewall with UFW (default deny + whitelist) and protect SSH against brute-force attempts using fail2ban. 6 tasks, about 55 minutes.

Now practice it yourself

Reading is good – doing is better. Start this course on a real Linux VM, right in your browser. A free account is all it takes.

Start for free

Lab content under CC BY 4.0 – free to use with attribution (© TechLogia).

How do you like this page?

HTML Basics | Techlogia Lab