This demo will teach you the fundamental HTML elements and how to use them to create structured web content. You'll learn about text elements, lists, tables, and images - the building blocks of web pages.
A comprehensive HTML page featuring:
- Proper HTML document structure
- Text formatting elements (headings, paragraphs, emphasis)
- Ordered and unordered lists
- Basic tables with rows and columns
- Images with proper attributes
- Nested elements and complex structures
- Any modern web browser (Chrome, Firefox, Safari, Edge)
- A text editor (VS Code, Sublime Text, Notepad++, or even Notepad)
- Basic understanding of HTML structure (from Demo #2)
- Open the file
index.htmlin your text editor - You'll see a basic HTML structure that needs to be completed:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML Basic Elements Demo</title> </head> <body> <!-- Your content will go here --> </body> </html>
-
Inside the
<body>tag, add the following text elements:<h1>SWE 363</h1> <h2>Introduction to HTML</h2> <p>A course where we will learn the basics of HTML, CSS & JS.</p>
-
Experiment with different text formatting:
<p>This is a <strong>bold</strong> text and this is <em>italic</em> text.</p> <p>You can also use <mark>highlighted</mark> text for emphasis.</p>
-
Add an unordered list:
<h3>Course Topics:</h3> <ul> <li>HTML Basics</li> <li>CSS Styling</li> <li>JavaScript Programming</li> <li>Web Development Tools</li> </ul>
-
Create a nested list:
<h3>Web Technologies:</h3> <ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Backend <ul> <li>Node.js</li> <li>Databases</li> <li>APIs</li> </ul> </li> </ul>
- Create a table with headers:
<h3>Student Grades:</h3> <table border="1"> <thead> <tr> <th>Student Name</th> <th>Assignment 1</th> <th>Assignment 2</th> <th>Final Grade</th> </tr> </thead> <tbody> <tr> <td>Ahmed</td> <td>85</td> <td>90</td> <td>A</td> </tr> <tr> <td>Fatima</td> <td>92</td> <td>88</td> <td>A</td> </tr> </tbody> </table>
- Add the KFUPM logo to your page:
<h3>KFUPM Logo:</h3> <img src="img/kfupm.svg" alt="KFUPM Logo" width="200" height="200">
-
Save the
index.htmlfile -
Open your web browser
-
Drag and drop the
index.htmlfile into your browser windowOR
Right-click the
index.htmlfile and select "Open with" → Choose your browserOR
Double-click the
index.htmlfile (if your browser is set as the default) -
You should see your complete HTML page with all the elements!
Your HTML page demonstrates:
- Headings:
<h1>to<h6>for different heading levels - Paragraphs:
<p>for text content - Formatting:
<strong>,<em>,<mark>for text emphasis
- Unordered Lists:
<ul>with<li>items for bullet points - Nested Lists: Lists within lists for complex structures
- Basic Structure:
<table>,<tr>(rows),<td>(cells) - Table Headers:
<thead>,<th>for column headers - Table Body:
<tbody>for main content
- Image Element:
<img>for displaying pictures - Attributes:
src(source),alt(alternative text),width,height
- Opening and Closing Tags: Most elements have
<tag>and</tag> - Void Elements: Some elements like
<img>don't need closing tags - Attributes: Elements can have attributes like
src="..."oralt="..." - Nesting: Elements can contain other elements (proper nesting required)
Try these modifications to experiment:
- Change the course title and description
- Add more items to your lists
- Create a table with your own data
- Replace placeholder images with real images
- Add more formatting to your text
- Create a personal profile page
- Page not loading: Make sure the file is saved with
.htmlextension - Elements not displaying: Check that all tags are properly closed
- Table looks wrong: Ensure proper
<tr>and<td>structure - Images not showing: Check the image URL or file path
- Lists not formatting: Verify proper
<ul>,<ol>, and<li>tags
Your project looks like this:
demo_3_html_basics/
├── index.html # Your HTML file with all elements
└── README.md # This instruction file
Once you've completed this HTML elements demo, you can:
- Learn about CSS to style your HTML elements
- Explore more advanced HTML elements (forms, semantic elements)
- Create multiple pages and link them together
- Learn about responsive design principles
- Practice with real-world web development projects
- MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML
- W3Schools HTML Tutorial: https://www.w3schools.com/html/default.asp
- HTML Element Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Congratulations! You've mastered the basic HTML elements! 🎉