Introduction to Websites and HTML - Class Content
1. What is a Website?
A website is a collection of web pages connected under one domain name.
Websites are accessed through browsers like Chrome, Firefox, Edge, Safari, etc.
Websites can be used for many purposes: information, communication, entertainment, business, education,
and social networking.
Examples of Popular Websites:
- Google.com - Search engine
- Wikipedia.org - Online encyclopedia
- Amazon.com - Online shopping
- YouTube.com - Video sharing
2. How Does a Website Work?
A website is stored on a web server.
When a user enters a URL or clicks a link, the browser sends a request to the server.
The server sends back the website's files (HTML, CSS, JavaScript, images).
The browser reads these files and displays the webpage.
3. What is HTML?
HTML stands for HyperText Markup Language.
It is the standard language for creating web pages.
HTML is a markup language - it uses tags to describe content and structure.
It is not a programming language - it does not perform logic or calculations.
4. Structure of an HTML Document
Basic Template:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
Introduction to Websites and HTML - Class Content
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
Explanation:
- <!DOCTYPE html>: Tells the browser this is an HTML5 document.
- <html>: Root tag that wraps the whole page.
- <head>: Contains metadata (title, styles, scripts).
- <title>: Title of the page shown on browser tab.
- <body>: Visible content of the page.
- <h1>: Heading 1 (biggest heading).
- <p>: Paragraph.
5. Common HTML Tags and Their Uses
Tag | Use | Example
---------|-----------------------------------|-----------------------------
<h1> - <h6> | Headings from largest to smallest | <h2>Subheading</h2>
<p> | Paragraph | <p>This is a paragraph.</p>
<a> | Hyperlink | <a href="https://www.google.com">Google</a>
<img> | Image | <img src="image.jpg" alt="My Image">
<ul> | Unordered list | <ul><li>Item 1</li><li>Item 2</li></ul>
<ol> | Ordered list | <ol><li>First</li><li>Second</li></ol>
<div> | Section or division | Used to group content
<span> | Inline container | Used to style part of text inline
6. Attributes in HTML Tags
Tags can have attributes which add extra info or behavior.
Common attributes:
- href for links
- src for images
- alt for image description
- style for inline CSS styles
Introduction to Websites and HTML - Class Content
- id and class for identifying elements in CSS or JavaScript
Example:
<a href="https://www.example.com" target="_blank">Visit Example</a>
7. Hands-On Practice
Ask students to create a simple webpage using the following instructions:
1. Create a new HTML file called index.html.
2. Add the basic HTML structure.
3. Add a heading with your name.
4. Add a paragraph about yourself.
5. Add a link to your favorite website.
6. Add an image (can use an online image URL).
8. Extra Topics (Optional, If Time Permits)
- What is CSS? - Cascading Style Sheets used to style HTML content (colors, fonts, layouts).
- What is JavaScript? - Programming language to make websites interactive.
- How do websites get online? - Introduction to hosting and domain names.
- Browser Developer Tools - How to inspect and edit HTML/CSS live in the browser.
9. Fun Facts About the Web
- The first website was created by Tim Berners-Lee in 1991.
- Over 1.8 billion websites exist (many inactive).
- HTML5 is the latest version of HTML standardized in 2014.
- The web started as text-only and now supports videos, games, and VR.
10. Summary
- Websites are made of web pages accessed through browsers.
- HTML is the basic language to create and structure web pages.
- HTML uses tags and attributes to organize content.
Introduction to Websites and HTML - Class Content
- CSS and JavaScript are added to style and add interactivity.
- Knowing HTML is the first step in web development.
