What is Web Development?
Web Development is the art and science of building websites and web applications. It involves a mix of technologies working together mainly HTML, CSS, and JavaScript.
•HTML gives a webpage its structure
•CSS makes it look good
•JavaScript makes it interactive
Think of it like building a house:
•HTML is the skeleton and walls
•CSS is the paint and decorations
•JavaScript is the electricity and moving parts
And just like every great structure, it all begins with a solid foundation HTML.
What is HTML?
HTML stands for HyperText Markup Language. It’s the standard language used to create the structure and content of a webpage.
When you open a website, your browser reads the HTML code and turns it into the content you see text, images, links, and more.
Here’s a quick example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first webpage.</p>
</body>
</html>
Breaking It Down
Let’s look at what each part does:
Tag Meaning Description
<!DOCTYPE html> Document Type Tells the browser this is an HTML5 document
<html> Root The start of your webpage
<head> Header Contains information about your page (like its title)
<title> Page Title What appears in the browser tab
<body> Content Everything visible on the page
<h1> Heading Large, bold title text
<p> Paragraph Regular text
Your First HTML Page
Try this small project yourself!
1. Open Notepad (Windows) or TextEdit (Mac).
2. Copy the code above.
3. Save the file as index.html.
4. Open it with your browser.
Congratulations you’ve just built your first web page!
Fun Fact
The first-ever website went live in 1991, created by Tim Berners-Lee, the inventor of the World Wide Web. It was made purely in HTML no CSS, no JavaScript!
Common HTML Tags You Should Know
Here’s a list of the most-used tags:
Tag Function
<h1> to <h6> Headings (h1 = biggest, h6 = smallest)
<p> Paragraph
<a href=""> Link to another page
<img src=""> Add an image
<ul> <ol> <li> Lists (unordered, ordered, list item)
<div> Division or container
<span> Inline container
<br> Line break
Example:
<h2>About Me</h2>
<p>I love learning web development!</p>
<img src="me.jpg" alt="My photo">
<a href="https://example.com">Visit my profile</a>
Practice Challenge
Try building a simple “About Me” webpage using these elements:
A heading with your name
A short paragraph introducing yourself
A photo
A link to your favorite website
Example output:
John Doe
I’m an aspiring web developer learning HTML.
Visit my favorite website!
Next Chapter Preview:
In Chapter 2, we’ll explore HTML page structure in depth, learn about attributes, and understand how to use links and images properly.
Stay tuned the web is just getting started!