WEEK 2 Notes

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 -->

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₂O  |  Mathematical: E = mc²</p>

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>

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>

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 -->

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 -->