Lecture 3 – HTML Fundamentals, Links, Tables & Introduction to CSS

Lecture 3 – HTML Fundamentals, Tables & Introduction to CSS

Welcome to Lecture 3 of the Web Development course.
In this lecture, we will continue learning advanced HTML concepts and introduction to CSS.

1. Types of Links in HTML

Links are used to connect webpages, files, sections, and external websites.
HTML uses the <a> tag to create links.

Basic Syntax

<a href="https://google.com">Visit Google</a>

1. Internal Link

Internal links connect pages inside the same website.

<a href="about.html">About Us</a>

2. External Link

External links connect to another website.

<a href="https://facebook.com">Facebook</a>

3. Self Link (Anchor Link)

Self links move users to another section on the same webpage.

<a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>

2. Important Attributes of Links

href Attribute

Defines the destination URL.

<a href="about.html">About</a>

title Attribute

Shows tooltip text when hovering on a link.

<a href="about.html" title="About Our Company">About</a>

target Attribute

Defines where the link should open.

Value	Description
_self	Open in same tab
_blank	Open in new tab

<a href="https://google.com" target="_blank">
    Open Google
</a>

rel Attribute

Defines relationship between current page and linked page.

<a href="https://example.com" rel="nofollow">
    Example Link
</a>

Value	Purpose
nofollow	Search engines should not follow the link
noopener	Security for new tabs
noreferrer	Hide referral information

3. DOCTYPE Declaration

DOCTYPE tells the browser which HTML version is being used.

HTML5 DOCTYPE

<!DOCTYPE html>

Strict DOCTYPE

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Transitional DOCTYPE

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Frameset DOCTYPE

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Frames are outdated and rarely used in modern websites.

4. Meta Data

Meta tags provide information about the webpage.

Charset Meta Tag

<meta charset="UTF-8">

Viewport Meta Tag

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

Description Meta Tag

<meta name="description" content="Learn HTML and CSS">

Keywords Meta Tag

<meta name="keywords" content="HTML, CSS, Web Development">

Author Meta Tag

<meta name="author" content="Join Webs">

5. Important HTML Structure Tags

html Tag

<html>
</html>

head Tag

<head>
    <title>My Website</title>
</head>

body Tag

<body>
    <h1>Welcome</h1>
</body>

iframe Tag

<iframe src="https://example.com"></iframe>

iframe Width and Height

<iframe src="page.html" width="600" height="400"></iframe>

6. Browser Developer Tools

Developer tools help developers inspect and debug websites.

1. Firefox Developer Toolbar

Inspect HTML
Debug CSS
Analyze webpage structure

2. Firebug

HTML debugging
CSS debugging
JavaScript debugging

3. ColorZilla

Color picker tool
Gradient generator
CSS color support

7. Ordered List and Unordered List

Ordered List (OL)

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Output

HTML
CSS
JavaScript

Unordered List (UL)

<ul>
    <li>Apple</li>
    <li>Mango</li>
    <li>Orange</li>
</ul>

Output

Apple
Mango
Orange

8. Components of a Webpage

1. Header

Logo
Website Title
Banner

2. Navigation

Home
About
Services
Contact

3. Content Area

Text
Images
Videos
Articles

4. Footer

Copyright
Contact Information
Social Links

9. HTML Tables

Tag	Purpose
table	Create Table
tr	Table Row
td	Table Data
th	Table Heading

Basic Table Example

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Ali</td>
        <td>22</td>
    </tr>
</table>

Table Attributes

<table width="500">
<table height="300">
<table class="mytable">
<table id="table1">
<table name="studenttable">
<table style="background:red;">

10. Table Properties

Cell Padding

<table cellpadding="10">

Cell Spacing

<table cellspacing="5">

Border

<table border="1">

Colspan

<td colspan="2">Combined Column</td>

11. Nested Tables

A table inside another table is called a nested table.

<table border="1">
    <tr>
        <td>
            <table border="1">
                <tr>
                    <td>Nested Table</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

12. Introduction to CSS

CSS stands for Cascading Style Sheets.
CSS is used to style and design webpages.

Advantages of CSS

1. Reusability

One CSS file can style multiple webpages.

2. Decrease Load Time

External CSS files are cached by browsers which improves website performance.

Types of CSS

1. Inline CSS

<h1 style="color:red;">Hello World</h1>

2. Internal CSS

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

3. External CSS

<link rel="stylesheet" href="style.css">

/* style.css */

h1 {
    color: green;
}

Complete HTML Structure Example

<!DOCTYPE html>
<html>
<head>
    <title>Lecture 3</title>

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

    <style>
        body {
            font-family: Arial;
        }
    </style>
</head>

<body>

    <h1>Welcome to Lecture 3</h1>

    <a href="about.html">Internal Link</a>

    <br><br>

    <a href="https://google.com" target="_blank">
        External Link
    </a>

    <h2>Student List</h2>

    <ul>
        <li>Ali</li>
        <li>Ahmed</li>
        <li>Usman</li>
    </ul>

    <table border="1" cellpadding="10">
        <tr>
            <th>Name</th>
            <th>Marks</th>
        </tr>

        <tr>
            <td>Ali</td>
            <td>90</td>
        </tr>
    </table>

</body>
</html>

Summary

Types of Links
Link Attributes
DOCTYPE Declaration
Meta Tags
HTML Structure Tags
iframe
Developer Tools
Lists
Components of Webpage
HTML Tables
Nested Tables
Introduction to CSS
Types of CSS

In the next lecture, we will continue with more advanced HTML and CSS concepts.