Scribd
Upload
2 views

html lesson stage8

This document is an introductory HTML course for beginners, explaining the basics of HTML, including its structure, tags, and elements like headings, paragraphs, images, links, lists, tables, and forms. It provides examples and practical exercises to create a simple webpage using HTML. The course emphasizes the use of specific tags and attributes to build and format web content effectively.

Uploaded by

moham4d2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

html lesson stage8

This document is an introductory HTML course for beginners, explaining the basics of HTML, including its structure, tags, and elements like headings, paragraphs, images, links, lists, tables, and forms. It provides examples and practical exercises to create a simple webpage using HTML. The course emphasizes the use of specific tags and attributes to build and format web content effectively.

Uploaded by

moham4d2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Course for Beginners Mrs.

Wissam

🚀 Introduction to HTML
What is HTML?
📌pages.
HTML (HyperText Markup Language) is the standard language used to create web
It tells web browsers how to display content like text, images, and links.

🔹 What are Tags?


HTML uses tags to define different elements on a webpage. Tags are special keywords
inside angle brackets (<>). Most tags come in pairs: an opening tag and a closing tag.

Example:

✅ <p> is the opening tag


✅ </p> is the closing tag
✅ Everything between the tags is the content
📌 What is the DOCTYPE Declaration?
At the very top of every HTML document, we write:

This tells the browser that we are using HTML5, the latest version of HTML. It ensures
that our web pages display correctly.

1
HTML Course for Beginners Mrs. Wissam

📑 Basic Structure of an HTML Document:

✅ <!DOCTYPE html>: Declares that this is an HTML5 document.


✅ <html>: The root of the page.
✅ <head>: Contains information about the page (like its title).
✅ <title>: Sets the title displayed in the browser tab.
✅ <body>: Contains everything visible on the webpage.
✅ <h1>: A large heading.
✅ <p>: A paragraph of text.
🎯 Try This!
●​Create a new file called index.html.
●​Copy and paste the above code.
●​Open the file in a web browser to see your first webpage!

2
HTML Course for Beginners Mrs. Wissam

📝 Headings and Paragraphs


🔹 HTML Headings
HTML has six levels of headings (<h1> to <h6>), where <h1> is the largest and <h6> is the

✍️ Paragraphs and Line Breaks


✅ <p> defines a paragraph. ✅ <br> creates a line break.

🎯 Try This! Add different headings and paragraphs to your index.html file.

🖼️ Adding Images and Links


📷 Adding Images
Use the <img> tag to display images:

✅ src: Specifies the image file location.


✅ alt: Provides alternative text for accessibility.

3
HTML Course for Beginners Mrs. Wissam

🔗 Adding Links
Use the <a> tag to create clickable links. The href attribute stands for "Hypertext
Reference" and tells the browser where the link should take you.

●​ href: This attribute holds the URL or path to the webpage you want to link to. In the
example above, clicking the link will take you to "https://www.example.com".
●​ The text between <a> and </a> ("Visit Example") is what the user sees and clicks on.

🎯 Try This! Add an image and a link to your index.html file.

📋 Lists and Tables


📌 Lists in HTML
🔹 Ordered List <ol> (numbered items):

🔹 Unordered List <ul> (bullet points):

4
HTML Course for Beginners Mrs. Wissam

📊 Tables in HTML
Tables display data in rows and columns:

✅ <table>: Creates a table.


✅ <tr>: Defines a row.
✅ <th>: Defines a header cell.
✅ <td>: Defines a data cell.
🎯 Try This! Create a list and a table in your HTML file.

🔗 Creating a Navigation Menu


📌 Navigation Bar Example:

🎯 Try This! Add a navigation menu to your index.html file.


5
HTML Course for Beginners Mrs. Wissam

📩 Forms in HTML
📌 What are Forms?
Forms are used to collect information from users. Think of a form like a questionnaire
where people can fill in details, such as their name, email, or a message. When you
submit a form, the information can be sent to a server (or processed by JavaScript) to
be used in some way.

📌 Form Example:

✅ <form>: Starts the form.


✅ <input>: Creates input fields.
✅ <textarea>: Allows multi-line text input.
✅ <button>: Adds a submit button.
🎯 Try This! Add a contact form to your HTML file.

You might also like