Introduction to HTML

INTRODUCTION TO HTML

baby Steps To Web Development

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content

HTML Structure

Where do I write HTML?

ANYWHERE!

You can literally write HTML anywhere.

However, there are dedicated software like code editors and text editors designed to write code (HTML):

🖋 Sublime Text
📝 Notepad
📓 Notes
💻 Visual Studio Code
🌐 Codepen
🚀 Replit

Your First HTML Page


<!DOCTYPE html>
<html>
<head>
<title>PAGE</title>
</head>

<body>
<h1> MY FIRST PAGE </h1>
<p> Today is a monumental day, the day i become a developer</p>

</body>
</html>

Exercise 1: Create Your First Webpage

Open your preferred text/code editor
Create a new file called "myFirstSite.html"
Copy and paste the HTML code from the previous slide
Save the file
Open the file in a web browser

Basic HTML Tags

<p> - Paragraph
<a> - Link
<img> - Image
<div> - Division
<span> - Inline container

HTML Attributes

href - Hyperlink reference
src - Source
alt - Alternative text
class - CSS class
id - Unique identifier

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.


<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Exercise 2: Headings and Paragraphs

Open your "myFirstSite.html" file
Add three different levels of headings
Under each heading, add a paragraph of text
Save and refresh in the browser

HTML Lists

HTML provides two types of lists: unordered and ordered.

Unordered Lists

Unordered lists are created using the <ul> tag:


<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Ordered Lists

Ordered lists are created using the <ol> tag:


<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Exercise 3: Creating Lists

In your HTML file, create an unordered list of your favorite foods
Create an ordered list of your top 3 vacation destinations
Save and view the changes in your browser

HTML Links

Links are defined with the <a> tag, using the href attribute to specify the URL.


<a href="https://www.example.com">Visit Example.com</a>

HTML Images

Images are defined with the <img> tag, using the src attribute to specify the image source and the alt attribute to provide alternative text.


<img src="image.jpg" alt="Description of image">

Exercise 4: Links and Images

Add a link to your favorite website in your HTML file
Find an image online and add it to your page using the <img> tag
Make sure to include an alt attribute for your image
Save and view your updated page

HTML File Paths

File paths describe the location of a file in a web site's folder structure.

Absolute File Paths

Absolute file paths provide the full URL to a file:


<img src="https://www.example.com/images/picture.jpg" alt="Example Image">

Relative File Paths

Relative file paths specify the location relative to the current file:


<img src="images/picture.jpg" alt="Example Image">

Exercise 5: File Paths

Create a folder called "images" in the same directory as your HTML file
Download an image and place it in the "images" folder
Add the image to your HTML file using a relative file path
Add another image using an absolute file path from a website
Save and view your page to ensure both images are displayed correctly

Your Personal Webpage

Create a personal webpage about yourself, including:

A title and heading with your name
A short biography paragraph
An unordered list of your hobbies
An ordered list of your top 5 favorite movies or books
A link to your social media profile or a favorite website
An image of yourself or something that represents you

Conclusion

You've learned the basics of HTML
Practice is key to improving your skills
Experiment with different tags and attributes
Next steps: Learn about CSS to style your HTML pages

Thank You!

Any questions?

Next: CSS Essentials Back to Home