🎯 Aim
To create an HTML webpage that defines and explains Local Area Network (LAN) and Wide Area Network (WAN) with proper structure, headings, paragraphs, and formatting.
🛠️ What You Need
- Notepad++ or any text editor
- A web browser to view the result
- Basic understanding of HTML headings, paragraphs, and lists
📖 Introduction
In this practical, you will create a webpage that explains two important types of computer networks:
- Local Area Network (LAN) — A network that connects devices within a limited area like a home, school, or office building.
- Wide Area Network (WAN) — A network that spans a large geographical area, often a country or continent, connecting multiple LANs.
💡 Tip: Use proper HTML structure — <h1> for the main title, <h2> for section headings, <p> for paragraphs, and <ul> or <ol> for lists of features or differences.
📊 Preview of the Output
Understanding LAN and WAN
🌐 What is a Local Area Network (LAN)?
A Local Area Network (LAN) is a computer network that connects devices within a small geographical area such as a home, office building, school, or campus. LANs are typically used to share resources like files, printers, and internet connections.
🌍 What is a Wide Area Network (WAN)?
A Wide Area Network (WAN) is a telecommunications network that extends over a large geographical area, often spanning cities, countries, or even continents. The Internet is the largest and most well-known example of a WAN.
📊 LAN vs WAN Comparison
Local Area Network (LAN)
- Size: Small (within a building)
- Speed: High (up to 10 Gbps)
- Cost: Low to moderate
- Ownership: Private
- Example: Home network, school network
Wide Area Network (WAN)
- Size: Large (cities, countries)
- Speed: Lower (up to 1 Gbps)
- Cost: High
- Ownership: Public or private
- Example: Internet, banking networks
📌 Key Differences
- LAN is confined to a limited area, while WAN covers a large geographical area.
- LAN offers higher speed and lower cost compared to WAN.
- LAN is usually privately owned, while WAN can be public or private.
- LAN uses technologies like Ethernet and Wi-Fi, while WAN uses technologies like MPLS, leased lines, and VPN.
📝 Step‑by‑Step: Creating the HTML Page
Step 1: Open Notepad++ and Write the Code
- Launch Notepad++.
- Set the language to HTML (Language → H → HTML).
- Write the following simplified HTML code:
<html>
<head>
<title>LAN and WAN Definitions</title>
</head>
<body>
<h1>🌐 Understanding LAN and WAN Networks</h1>
<h2>🏠 What is a Local Area Network (LAN)?</h2>
<p>
A Local Area Network (LAN) is a computer network that connects devices within a small geographical area such as a home, office building, school, or campus. LANs are used to share resources like files, printers, and internet connections.
</p>
<p>
LANs typically use technologies like Ethernet (wired) and Wi-Fi (wireless) to connect devices. They offer high speed (up to 10 Gbps) and low latency, making them ideal for local communication.
</p>
<h3>Key Features of LAN:</h3>
<ul>
<li>Confined to a limited area (e.g., a building)</li>
<li>High data transfer speed (up to 10 Gbps)</li>
<li>Low cost to set up and maintain</li>
<li>Privately owned by the organization</li>
<li>Examples: Home network, school computer lab</li>
</ul>
<h2>🌍 What is a Wide Area Network (WAN)?</h2>
<p>
A Wide Area Network (WAN) is a telecommunications network that extends over a large geographical area, often spanning cities, countries, or even continents. The Internet is the largest and most well-known example of a WAN.
</p>
<p>
WANs connect multiple LANs together using technologies like leased lines, MPLS, satellite links, and VPNs. They enable long-distance communication but typically have lower speeds and higher costs compared to LANs.
</p>
<h3>Key Features of WAN:</h3>
<ul>
<li>Spans large geographical areas</li>
<li>Lower data transfer speed (up to 1 Gbps)</li>
<li>High cost to set up and maintain</li>
<li>Can be public or privately owned</li>
<li>Examples: Internet, banking networks, corporate networks</li>
</ul>
<h2>📊 LAN vs WAN Comparison</h2>
<table border="1" cellpadding="8" cellspacing="0" style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background: #2c3e50; color: white;">
<th>Feature</th>
<th>LAN</th>
<th>WAN</th>
</tr>
</thead>
<tbody>
<tr>
<td>Size</strong></td>
<td>Small (building)</td>
<td>Large (cities/countries)</td>
</tr>
<tr>
<td>Speed</strong></td>
<td>High (up to 10 Gbps)</td>
<td>Lower (up to 1 Gbps)</td>
</tr>
<tr>
<td>Cost</strong></td>
<td>Low to moderate</td>
<td>High</td>
</tr>
<tr>
<td>Ownership</strong></td>
<td>Private</td>
<td>Public or Private</td>
</tr>
<tr>
<td>Technology</strong></td>
<td>Ethernet, Wi-Fi</td>
<td>MPLS, Leased Lines, VPN</td>
</tr>
<tr>
<td>Example</strong></td>
<td>Home, School Network</td>
<td>Internet, Banking Network</td>
</tr>
</tbody>
</table>
<h2>📌 Summary</h2>
<p>
In summary, LAN and WAN are two fundamental types of computer networks. LANs are designed for small, local areas with high speed and low cost, while WANs are designed for large geographical areas with lower speed and higher cost. Both are essential for modern communication and connectivity.
</p>
</body>
</html>
Step 2: Save the File
- Go to File → Save As… (or press Ctrl+Shift+S).
- Choose a location (e.g., Desktop).
- Name the file: "lan_wan_networks.html" or "practical65.html".
- In "Save as type", select All types (*.*).
- Click Save.
Step 3: Open in Browser
- Navigate to the folder where you saved the file.
- Double‑click the lan_wan_networks.html file.
- It will open in your default web browser.
- You will see the complete webpage with LAN and WAN definitions, features, and a comparison table.
📊 HTML Elements Used in This Practical
| HTML Element |
Purpose |
Example |
<h1> to <h3> |
Headings for structure |
Main title, section headings |
<p> |
Paragraphs for definitions |
Descriptions of LAN and WAN |
<ul> and <li> |
Unordered lists for features |
Key features of LAN and WAN |
<table> |
Table for comparison |
LAN vs WAN comparison |
<strong> |
Bold text for emphasis |
Highlighting key terms |
📊 Comparison Table: LAN vs WAN
| Feature |
LAN |
WAN |
| Size |
Small (within a building) |
Large (cities, countries) |
| Speed |
High (up to 10 Gbps) |
Lower (up to 1 Gbps) |
| Cost |
Low to moderate |
High |
| Ownership |
Private |
Public or Private |
| Technology |
Ethernet, Wi-Fi |
MPLS, Leased Lines, VPN |
| Example |
Home, School Network |
Internet, Banking Network |
📊 Common Mistakes to Avoid
| Mistake |
Why It's Wrong |
Correct Way |
Using only <p> without headings |
No structure, hard to read |
Use <h1>, <h2>, <h3> for hierarchy |
| Not using lists for features |
Hard to scan |
Use <ul> with <li> for features |
| No table for comparison |
Difficult to compare |
Use <table> for side-by-side comparison |
| Forgetting to close tags |
Invalid HTML |
Always close tags properly |
📊 Observations
- Using headings (
<h1>, <h2>, <h3>) creates a clear hierarchy of information.
- Paragraphs (
<p>) are used for detailed definitions and explanations.
- Unordered lists (
<ul>) are perfect for listing key features.
- A comparison table makes it easy to see the differences between LAN and WAN.
- Using bold text (
<strong>) helps emphasize important terms.
- Proper HTML structure improves readability and accessibility.
✅ Result
You have successfully:
- Created an HTML webpage that defines LAN and WAN.
- Used proper HTML structure with headings, paragraphs, lists, and a table.
- Formatted the content for clear reading and understanding.
- Viewed the complete webpage in a browser.
📌 Important: Good HTML structure — using headings, paragraphs, lists, and tables — makes your content more readable, organized, and accessible. Always plan your content structure before writing the code!
💡 Next Steps: Try adding more sections to your webpage — like advantages and disadvantages of LAN and WAN, or images to illustrate the network types. You can also add a footer with references or a navigation menu!