Module 1 – Introduction to HTML
Lecture 1: What is HTML?
- History and Purpose
- History of HTML:
- Developed by Tim Berners-Lee in 1991
- Initially created to share and link documents across the internet
- Has evolved over the years (current version is HTML5)
- Purpose of HTML:
- Standard markup language for creating web pages
- Describes the structure of a webpage
- Uses tags and elements to define content
- Structure of an HTML Document
- Basic structure of an HTML document:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- Explanation:
<!DOCTYPE html>: Declares the document type and version of HTML<html>: Root element of the HTML document<head>: Contains meta-information about the document (e.g., title, links to CSS)<title>: Sets the title of the webpage (displayed in the browser tab)<body>: Contains the content of the webpage (headings, paragraphs, images, links, etc.)
Lecture 2: Basic HTML Tags
- Essential HTML Tags:
<html>: Defines the root of an HTML document<head>: Contains meta-information about the document<body>: Defines the body of the document, which contains the actual content- Content Tags:
<h1>to<h6>: Define HTML headings<h1>This is heading 1</h1><h2>This is heading 2</h2><p>: Defines a paragraph<p>This is a paragraph.</p><a>: Defines a hyperlink<a href="https://www.example.com">This is a link</a><img>: Embeds an image<img src="image.jpg" alt="Description of image"><ul>,<ol>,<li>: Define lists- Unordered List:
<ul> <li>Item 1</li> <li>Item 2</li> </ul> - Ordered List:
<ol> <li>Item 1</li> <li>Item 2</li> </ol>
- Unordered List:
Lecture 3: Creating a Simple Webpage
- Setting up the HTML Document
- Create a new HTML file (e.g.,
index.html) - Set up the basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph.</p>
</body>
</html>
- Adding Text, Images, and Links
<h2>About Me</h2>
<p>Hello! I am learning HTML and CSS.</p>
- Adding an Image:
<img src="myphoto.jpg" alt="A photo of me">
- Adding a Link:
<a href="https://www.mywebsite.com">Visit My Website</a>
- Complete Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph.</p>
<h2>About Me</h2>
<p>Hello! I am learning HTML and CSS.</p>
<img src="myphoto.jpg" alt="A photo of me">
<p>Check out my <a href="https://www.mywebsite.com">website</a>.</p>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph.</p>
<h2>About Me</h2>
<p>Hello! I am learning HTML and CSS.</p>
<img src="myphoto.jpg" alt="A photo of me">
<p>Check out my <a href="https://www.mywebsite.com">website</a>.</p>
</body>
</html>Assignment Tasks: Module 1 – Introduction to HTML
Assignment 1: Understanding HTML Structure
- Task: Create a Basic HTML Document
- Create an HTML file named
basic_structure.html. - Set up the basic structure with
<!DOCTYPE html>,<html>,<head>,<title>, and<body>tags. - In the
<title>tag, write “My Basic HTML Structure”. - Inside the
<body>tag, add a heading<h1>with the text “Welcome to My Basic HTML Page”. - Add a paragraph
<p>with the text “This is a basic HTML document structure.” Submission: Submit thebasic_structure.htmlfile.
Assignment 2: Using Basic HTML Tags
- Task: Create a Simple Webpage with Various HTML Elements
- Create an HTML file named
simple_webpage.html. - Set up the basic structure as learned.
- Add the following elements inside the
<body>tag:- A heading
<h1>with the text “My Simple Webpage”. - A paragraph
<p>with the text “This webpage contains various HTML elements.” - An image
<img>withsrcattribute pointing to any image file (use a placeholder image if necessary) and analtattribute describing the image. - A hyperlink
<a>pointing to any website (e.g., “https://www.example.com”) with the link text “Visit Example”. - An unordered list
<ul>with three list items<li>containing the text “Item 1”, “Item 2”, and “Item 3”. - An ordered list
<ol>with three list items<li>containing the text “First”, “Second”, and “Third”.
simple_webpage.htmlfile. - A heading
Assignment 3: Creating a Personal Introduction Page
- Task: Create a Personal Introduction Webpage
- Create an HTML file named
personal_introduction.html. - Set up the basic structure as learned.
- Add the following elements inside the
<body>tag:- A heading
<h1>with the text “About Me”. - A subheading
<h2>with the text “Introduction”. - A paragraph
<p>introducing yourself (e.g., your name, hobbies, interests). - An image
<img>of yourself (or a placeholder image) with appropriatesrcandaltattributes. - A subheading
<h2>with the text “My Hobbies”. - An unordered list
<ul>with at least three list items<li>describing your hobbies. - A subheading
<h2>with the text “Contact Me”. - A paragraph
<p>with a hyperlink<a>to your email address (usemailto:link) with the text “Email Me”.
personal_introduction.htmlfile. - A heading
Submission Guidelines:
- Each assignment should be submitted as a separate HTML file.
- Ensure your HTML code is well-formatted and indented properly.
- Add comments in your HTML files to describe different sections of your code.
If you need any help feel free to comments below. If you need domain and web hosting for practicing, You can get that from a2hosting
