Lesson 1: What is HTML?

Δημοσιευμένα 2024-12-28 08:37:50

1χλμ.

Objective of the Lesson:

By the end of this lesson, students will understand what HTML is, why it is important in web development, how it fits within the web development stack, and how to structure a basic webpage.

1. Definition of HTML

HTML (HyperText Markup Language) is the standard language used to create and design web pages. It uses a system of tags to define the structure and content of a webpage. HTML tells the web browser how to display text, images, links, videos, and other elements on the page.

2. Purpose and Importance of HTML in Web Development

HTML is the foundational technology for building websites. Here's why it's important:

Structure and Content: HTML organizes content on the web into headings, paragraphs, lists, links, images, and other elements, making it easier for both developers and users to understand the layout of a webpage.
Accessibility: HTML ensures that web content is accessible to users, including those who rely on screen readers or other assistive technologies.
Web Browser Compatibility: Every web browser (Chrome, Firefox, Safari, etc.) reads HTML files, which makes it universally supported.
SEO and User Experience: Well-structured HTML is essential for search engine optimization (SEO) and contributes to a better user experience.

3. Overview of How HTML Fits in the Web Development Stack

HTML is the backbone of every website. It is the first layer of the web development stack. Here's how it fits:

Frontend: HTML is part of the frontend stack, which includes CSS (for styling) and JavaScript (for interactivity).
Backend: While HTML focuses on the content and structure, server-side technologies (e.g., PHP, Node.js) handle backend operations like databases, authentication, and server-side logic.
Web Development Workflow: HTML works alongside CSS and JavaScript to create the final user interface that people interact with when they visit a website.

4. Introduction to the Basic Structure of a Webpage

A simple webpage is built using the basic structure of HTML tags. Here's how a typical HTML document looks:

Explanation of the Basic Tags:

<!DOCTYPE html>: Defines the document type and version of HTML.
<html>: Root element of the HTML document.
<head>: Contains metadata about the page (e.g., title, character encoding, etc.).
<meta>: Provides information about the page, such as the character set and viewport settings for responsive design.
<title>: Sets the title of the webpage, which appears in the browser tab.
<body>: Contains the content of the webpage visible to the user.
<h1>: A top-level heading. You can use <h2>, <h3>, etc., for smaller headings.
<p>: A paragraph element used to define text content.

5. Hands-On Activity: Try the Code

Now, let's practice what we've learned by writing the HTML code and running it in your browser.

Steps to try the code:

Open any text editor (e.g., Notepad, Sublime Text, VS Code).
Copy and paste the following code:

Save the file with a .html extension (e.g., my_first_webpage.html).
Open the file in your web browser by double-clicking on it. You should see a webpage with a heading and a paragraph.

6. Key Points to Remember

HTML is the structure of a webpage.
Tags are used to define content like text, images, links, and more.
The basic HTML structure includes the <!DOCTYPE html>, <html>, <head>, and <body> tags.
HTML works together with CSS and JavaScript to build a complete webpage.

7. Next Steps

Learn about more HTML tags such as links (<a>), images (<img>), and lists (<ul>, <ol>, <li>).
Experiment with creating more complex HTML pages by adding other content like images, links, and embedded media.