CAT Studio
All Blogs

HTML Basics

Uncategorized
CAT Studio9 min read

HTML Fundamentals - Comprehensive Notes

1. Basic HTML Structure

Every HTML document follows a standard structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Metadata goes here -->
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>

Think of it like a superhero's profile:

  • <!DOCTYPE html> = The hero's universe/standard (Marvel/DC)
  • <html> = The complete hero file
  • <head> = Secret identity and background info
  • <body> = What the world sees - the hero in action!

2. Why <!DOCTYPE html>?

Purpose:

  • Tells the browser which version of HTML you're using
  • <!DOCTYPE html> means HTML5 (the latest standard)
  • Without it, browsers enter "quirks mode" and may render pages incorrectly

Example Context:

html
<!DOCTYPE html>  
<!-- Like saying "This is a Marvel superhero, follow Marvel rules!" -->

Key Point: Always include it as the very first line - it's not an HTML tag, it's a declaration!

3. <head> Tag - The Metadata Container

The <head> section contains information about the webpage, not content shown on the page.

html
<head>
    <meta charset="UTF-8">  <!-- Character encoding - supports all languages -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Mobile responsiveness -->
    <title>Superhero Academy</title>  <!-- Browser tab name -->
</head>

Common Meta Tags:

  • charset="UTF-8" → Ensures proper display of special characters
  • viewport → Makes your site mobile-friendly
  • description → Summary for search engines
  • keywords → SEO optimization

The <head> is like a hero's classified file - it contains important information but isn't visible to the public.

4. <title> - The Only Visible Head Content

html
<title>Avengers Training Portal</title>

Where it appears:

  • Browser tab
  • Bookmark name
  • Search engine results

Best Practices:

  • Keep it under 60 characters
  • Make it descriptive and unique
  • Example: "Web Development Courses | CAT Computer Point"

5. <body> - All Visible Content

Everything users see on the webpage goes inside <body>:

html
<body>
    <h1>Welcome to CAT Studio</h1>
    <p>Choose your course below!</p>
    <img src="./hero-logo.png" alt="CAT Logo">
    <!-- All visible content here -->
</body>

Rule: If you want it displayed on screen, put it in the body!

6. Heading Tags (<h1> to <h6>)

HTML has 6 levels of headings:

html
<h1>Superhero Academy</h1>           <!-- Main title - use only once per page -->
<h2>Available Powers</h2>             <!-- Major sections -->
<h3>Flight Training</h3>              <!-- Subsections -->
<h4>Basic Hovering</h4>               <!-- Sub-subsections -->
<h5>Advanced Techniques</h5>
<h6>Pro Tips</h6>

Hierarchy Example:

html
<h1>Web Development Courses</h1>
    <h2>Frontend Development</h2>
        <h3>HTML Basics</h3>
        <h3>CSS Styling</h3>
    <h2>Backend Development</h2>
        <h3>Python</h3>
        <h3>Node.js</h3>

Best Practices:

  • Only one <h1> per page
  • Don't skip levels (don't go from <h2> to <h5>)
  • Use for structure, not styling

7. Paragraph Tag (<p>)

Used for blocks of text:

html
<p>
    Spider-Man's web-slinging abilities combine physics, chemistry, 
    and incredible acrobatic skills. Students will learn the science 
    behind synthetic web fluid and proper swinging techniques.
</p>

<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Master the art of superhero combat through our intensive training program.
</p>

Characteristics:

  • Automatically adds space before and after
  • Browser ignores extra spaces/line breaks in code
  • Use <br> for line breaks within paragraphs

8. Lists - Unordered (<ul>) and Ordered (<ol>)

Unordered List (Bullet Points)

html
<h2>Superhero Equipment</h2>
<ul>
    <li>Cape</li>
    <li>Mask</li>
    <li>Utility Belt</li>
    <li>Communication Device</li>
</ul>

Type Attribute:

html
<ul type="disc">   <!-- Default: • -->
<ul type="circle"> <!-- Hollow circle: ○ -->
<ul type="square"> <!-- Square: ■ -->

Ordered List (Numbered)

html
<h2>Steps to Become a Superhero</h2>
<ol type="1">
    <li>Discover your power</li>
    <li>Create your costume</li>
    <li>Choose your hero name</li>
    <li>Save your first citizen</li>
</ol>

Type Attribute Options:

html
<ol type="1">  <!-- 1, 2, 3, 4 (default) -->
<ol type="A">  <!-- A, B, C, D -->
<ol type="a">  <!-- a, b, c, d -->
<ol type="I">  <!-- I, II, III, IV -->
<ol type="i">  <!-- i, ii, iii, iv -->

Start Attribute

html
<h2>Advanced Courses (Levels 5-8)</h2>
<ol type="1" start="5">
    <li>Java Spring</li>  <!-- Shows as 5 -->
    <li>NodeJS</li>      <!-- Shows as 6 -->
    <li>ReactJS</li>        <!-- Shows as 7 -->
    <li>AI Engineering</li>        <!-- Shows as 8 -->
</ol>

Reversed Attribute

html
<h2>Top 4 Most Powerful Heroes</h2>
<ol type="1" reversed>
    <li>Thor</li>           <!-- Shows as 4 -->
    <li>Hulk</li>           <!-- Shows as 3 -->
    <li>Doctor Strange</li> <!-- Shows as 2 -->
    <li>Scarlet Witch</li>  <!-- Shows as 1 -->
</ol>

Nested Lists

html
<h2>Superhero Teams</h2>
<ul>
    <li>Avengers
        <ul>
            <li>Iron Man</li>
            <li>Captain America</li>
            <li>Thor</li>
        </ul>
    </li>
    <li>X-Men
        <ul>
            <li>Wolverine</li>
            <li>Storm</li>
            <li>Cyclops</li>
        </ul>
    </li>
</ul>

Your Code Example (Improved):

html
<h2>Course Categories</h2>
<ul>
    <li>Programming Languages
        <ul>
            <li>Python</li>
            <li>Java</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Web Development
        <ul>
            <li>HTML & CSS</li>
            <li>React</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

9. Anchor Tags (<a>) - Creating Hyperlinks

Basic Link

html
<a href="https://marvel.com">Visit Marvel Universe</a>

Target Attribute

html
<!-- Opens in new tab -->
<a href="https://classroom.catcomputerpoint.com/" target="_blank">
    Enroll Now
</a>

<!-- Opens in same tab (default) -->
<a href="./courses.html" target="_self">
    View Courses
</a>

Target Attribute Values:

  • _blank → New tab/window (use for external links)
  • _self → Same tab (default)
  • _parent → Parent frame
  • _top → Full window

Link to Email

html
<a href="mailto:admissions@superheroacademy.com">Contact Admissions</a>

Link to Phone Number

html
<a href="tel:+1234567890">Call Hero Hotline</a>

Internal Page Links

html
<a href="#powers-section">Jump to Powers Section</a>

<!-- Later in the page -->
<h2 id="powers-section">Available Powers</h2>

Superhero Example:

html
<p>
    Want to learn how to fly like Superman? 
    <a href="https://superheroacademy.com/flight" target="_blank">
        Join our Flight Training Program
    </a>
</p>

10. Image Tag (<img>) - Displaying Images

Basic Structure

html
<img src="./iron-man.png" alt="Iron Man in his Mark 50 armor">

Key Attributes:

src (Source)

  • Path to the image file
  • Can be relative or absolute

alt (Alternative Text)

Why it's CRITICAL:

html
<img src="./captain-america.jpg" alt="Captain America holding his shield">

Importance of Alt Text:

  1. Accessibility → Screen readers describe images to visually impaired users
  2. SEO → Search engines understand your images
  3. Error Handling → Shows text if image fails to load
  4. Context → Explains what the image shows

Bad Example:

html
<img src="./hero.jpg" alt="image">  ❌ Too vague!

Good Example:

html
<img src="./hero.jpg" alt="Spider-Man swinging between New York skyscrapers">  ✅ Descriptive!

Width & Height Attributes

html
<!-- Using pixels -->
<img src="./avengers-logo.png" alt="Avengers Logo" width="300" height="200">

<!-- Using percentage -->
<img src="./hero.jpg" alt="Superhero team" width="100%">

<!-- Keep aspect ratio (specify only one dimension) -->
<img src="./hero.jpg" alt="Hero" width="400">

Best Practice: Specify at least width to prevent layout shifts when page loads.

11. Paths - Relative vs Absolute

Relative Path

Path relative to the current file location.

Same Directory:

html
<img src="./hero.png" alt="Hero">
<!-- or -->
<img src="hero.png" alt="Hero">

Subdirectory:

html
<img src="./images/hero.png" alt="Hero">
<!-- or -->
<img src="images/hero.png" alt="Hero">

Parent Directory:

html
<img src="../hero.png" alt="Hero">

Multiple Levels Up:

html
<img src="../../images/hero.png" alt="Hero">

Example Folder Structure:

html
superhero-academy/
├── index.html
├── courses/
│   ├── web-dev.html
│   └── assets/
│       └── logo.png
└── images/
    └── hero.jpg

From web-dev.html to logo.png:

html
<img src="./assets/logo.png" alt="Logo">

From web-dev.html to hero.jpg:

html
<img src="../images/hero.jpg" alt="Hero">

Absolute Path

Full URL:

html
<img src="https://marvel.com/images/iron-man.jpg" alt="Iron Man">

From Root:

html
<img src="/images/hero.jpg" alt="Hero">
<!-- Starts from domain root: example.com/images/hero.jpg -->

12. Which Path is Best?

Use Relative Paths When:

✅ Linking to files within your own project ✅ You want portability (moving project folders) ✅ Working locally before deploying ✅ Internal navigation

html
<!-- Best for internal resources -->
<img src="./assets/logo.png" alt="Company Logo">
<a href="./courses/python.html">Python Course</a>

Use Absolute Paths When:

✅ Linking to external websites ✅ Using CDN resources (libraries, fonts) ✅ API endpoints ✅ Images hosted on other domains

html
<!-- Best for external resources -->
<a href="https://github.com" target="_blank">GitHub</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

Recommendation: Relative paths for internal files, absolute for external resources.

Complete Example - Superhero Academy

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Join CAT Studio - the premier programming and AI training academy">
    <title>CAT Studio - Programming & AI Courses</title>
</head>
<body>
    <!-- Main Heading -->
    <h1>CAT Studio</h1>
    
    <!-- Logo -->
    <img src="./images/cat-studio-logo.png" alt="CAT Studio official logo" width="200">
    
    <!-- Introduction -->
    <p>
        Welcome to CAT Studio, the most prestigious programming and AI training facility in the tech world. 
        Our expert instructors will help you master coding skills and become 
        the developer you were meant to be.
    </p>
    
    <!-- Call to Action -->
    <p>
        Ready to start your coding journey? 
        <a href="https://classroom.catcomputerpoint.com/" target="_blank">Enroll Today</a>
    </p>
    
    <!-- Course Categories -->
    <h2>Available Course Categories</h2>
    <ul>
        <li>Programming Languages
            <ul>
                <li>Python</li>
                <li>Java</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Web Development
            <ul>
                <li>HTML & CSS</li>
                <li>React.js</li>
                <li>Node.js</li>
            </ul>
        </li>
        <li>Artificial Intelligence
            <ul>
                <li>Machine Learning</li>
                <li>Deep Learning</li>
                <li>Natural Language Processing</li>
            </ul>
        </li>
    </ul>
    
    <!-- Top Courses -->
    <h2>Most Popular Courses</h2>
    <ol type="1">
        <li>Python for Data Science</li>
        <li>Full Stack Web Development</li>
        <li>AI & Machine Learning Bootcamp</li>
        <li>Cloud Computing with AWS</li>
    </ol>
    
    <!-- Hall of Fame (Reversed) -->
    <h2>Top Graduating Students</h2>
    <ol reversed>
        <li>Sarah Chen - AI Engineer at Google</li>
        <li>Rahul Sharma - Lead Developer at Microsoft</li>
        <li>Emily Rodriguez - Data Scientist at Meta</li>
        <li>David Kim - Full Stack Developer at Amazon</li>
    </ol>
    
    <!-- Instructor Bio -->
    <h3>Meet Your Instructors</h3>
    <img src="./staff/instructor-profile.jpg" alt="Dr. Alan Turing, Python and AI Instructor at CAT Studio" width="150">
    <p>
        Dr. Alan Turing brings over 15 years of experience in software development and AI research. 
        His innovative teaching methods and real-world projects have helped thousands of students 
        launch successful careers in tech.
    </p>
    
</body>
</html>

Key Takeaways

  1. Always start with <!DOCTYPE html>
  2. Head = Invisible info, Body = Visible content
  3. Use semantic headings (<h1> to <h6>)
  4. Alt text is mandatory for accessibility
  5. Choose list type based on whether order matters
  6. Use target="_blank" for external links
  7. Prefer relative paths for internal resources
  8. Be descriptive in alt text and titles
Previous

Arrays & Recursion Practice

Next

Lists in HTML