Print bookPrint book

WEEK 2 Notes

Site: Newgate University Minna - Elearning Platform
Course: Introduction to Web Technologies
Book: WEEK 2 Notes
Printed by: Guest user
Date: Thursday, 20 August 2026, 10:25 PM

Table of contents

2.1  What is HTML?

HTML (HyperText Markup Language) is the language of the web. It tells the browser what content to display and how to structure it. HTML uses TAGS, keywords surrounded by angle brackets to mark up content.

 

Think of HTML as the skeleton of a building. CSS (which we cover next) is the paint and decoration, and JavaScript is the electricity and moving parts. Every website in the world from Google to Jumia to this university's website is built on HTML.

2.2 The Basic Structure of Every HTML Page

Basic HTML Document Structure

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My First Newgate University Web Page</title>

  </head>

  <body>

    <!-- Everything the user sees goes here -->

    <h1>Welcome to Newgate University Minna</h1>

    <p>This is my very first web page!</p>

  </body>

</html>

Tag / Element

Purpose

Example

<!DOCTYPE html>

Tells the browser this is an HTML5 document

Always the very first line

<html>

The root element — wraps everything

<html lang="en">...</html>

<head>

Contains invisible information about the page (title, metadata, links)

<head>...</head>

<meta charset>

Sets character encoding — required for special characters (ó, é, etc.)

<meta charset="UTF-8">

<title>

The text shown on the browser tab

<title>Newgate University</title>

<body>

All visible content goes here

<body>...</body>

<!-- comment -->

A note for developers — not shown to users

<!-- This is a note -->

2.3 Essential HTML Tags

Headings

Heading Tags h1 to h6

<h1>This is the Main Title (Largest)</h1>

<h2>Section Heading</h2>

<h3>Sub-section Heading</h3>

<h4>Smaller sub-heading</h4>

<h5>Even smaller</h5>

<h6>Smallest heading</h6>

 

<!-- Rule: Use h1 ONCE per page (the main title). Use h2-h6 for sections. -->

<!-- Think of it like a newspaper: h1 = headline, h2 = section name, h3 = article title -->

 

Paragraphs, Text Formatting, and Line Breaks

Text Tags

<p>This is a paragraph. It wraps text automatically.</p>

 

<p>This paragraph has <strong>bold text</strong> and <em>italic text</em>.</p>

 

<p>You can use <br> to force a line break<br>like this.</p>

 

<p>This text has a <mark>yellow highlight</mark> and this is <small>small text</small>.</p>

 

<p>Chemical formula: H<sub>2</sub>O  |  Mathematical: E = mc<sup>2</sup></p>

 

Lists — Ordered and Unordered

Lists — Ordered and Unordered

<!-- Unordered list (bullet points) — for items with no specific order -->

<ul>

  <li>Minna</li>

  <li>Abuja</li>

  <li>Lagos</li>

</ul>

 

<!-- Ordered list (numbered) — for steps or ranked items -->

<ol>

  <li>Register for course on the portal</li>

  <li>Attend all lectures</li>

  <li>Complete all practicals</li>

  <li>Write the examination</li>

</ol>

 

<!-- Nested list — a list inside a list -->

<ul>

  <li>Faculties

    <ul>

      <li>Computing Sciences</li>

      <li>Engineering</li>

    </ul>

  </li>

</ul>

 

Links (Anchor Tags)

Anchor Tags — Hyperlinks

<!-- Link to another website (absolute URL) -->

<a href="https://www.newgateuniversity.edu.ng">Visit Newgate University</a>

 

<!-- Link to another page in the SAME folder (relative URL) -->

<a href="contact.html">Contact Us</a>

 

<!-- Link that opens in a NEW tab -->

<a href="https://www.w3schools.com" target="_blank">Learn More at W3Schools</a>

 

<!-- Link to jump to a section on the SAME page -->

<a href="#about">Go to About Section</a>

 

<!-- Email link -->

<a href="mailto:info@newgateuniversity.edu.ng">Email Us</a>

 

<!-- Phone link (useful on mobile) -->

<a href="tel:+2348012345678">Call Us: 08012345678</a>

 

Images

Image Tags

<!-- Basic image -->

<img src="logo.png" alt="Newgate University Logo">

 

<!-- Image with width and height -->

<img src="campus.jpg" alt="Newgate University Campus" width="600" height="400">

 

<!-- Image from the internet (use the image URL) -->

<img src="https://www.example.com/photo.jpg" alt="A descriptive text">

 

<!-- IMPORTANT: The 'alt' attribute is required for accessibility -->

<!-- It describes the image to visually impaired users and search engines -->

 

Tables

HTML Tables

<table>

  <thead>

    <tr>

      <th>Course Code</th>

      <th>Course Title</th>

      <th>Units</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>IFT 203</td>

      <td>Introduction to Web Technologies</td>

      <td>2</td>

    </tr>

    <tr>

      <td>IFT 205</td>

      <td>Database Systems</td>

      <td>3</td>

    </tr>

  </tbody>

</table>

 

<!-- thead = table header section, tbody = table body -->

<!-- tr = table row, th = table header cell, td = table data cell -->

2.4 Worked Example — A Student Profile Page

Let us put it all together and create a complete web page for a student profile at Newgate University:

Complete Student Profile Page

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Student Profile — Newgate University</title>

</head>

<body>

 

  <h1>Student Profile</h1>

  <h2>Amina Bello</h2>

  <p><strong>Matric Number:</strong> NUG/2022/0456</p>

  <p><strong>Department:</strong> Information Technology</p>

  <p><strong>Level:</strong> 200 Level</p>

 

  <h3>About Me</h3>

  <p>

    I am a 200-level IT student at Newgate University Minna.

    I am passionate about web development and I hope to build

    useful digital solutions for Nigerian businesses.

  </p>

 

  <h3>My Courses This Semester</h3>

  <table>

    <thead>

      <tr><th>Code</th><th>Title</th><th>Units</th></tr>

    </thead>

    <tbody>

      <tr><td>IFT 203</td><td>Intro to Web Technologies</td><td>2</td></tr>

      <tr><td>IFT 205</td><td>Database Systems</td><td>3</td></tr>

      <tr><td>MTH 201</td><td>Mathematics II</td><td>3</td></tr>

    </tbody>

  </table>

 

  <h3>My Hobbies</h3>

  <ul>

    <li>Reading tech blogs (TechCabal, Techpoint.Africa)</li>

    <li>Playing chess</li>

    <li>Cooking traditional Nupe dishes</li>

  </ul>

 

  <h3>Contact</h3>

  <p>Email: <a href="mailto:amina@email.com">amina@email.com</a></p>

  <p><a href="index.html">Back to Home</a></p>

 

</body>