Welcome to my first Note!
In this tutorial, I will be going over the basics of HTML for you.
The first thing to know is,
Any code you write will use this format:
<tag>Code Here</tag>
For example, if you wanted a heading (much like the one on the top of the page) you would write:
<h1>Welcome to my first Note!</h1>
"h1" means it is the most important heading. There is 1-6 different headings. 1 is the largest, and 6 is the smallest.
The next thing to know is that HTML is built from many different tags, and each tag has a specific purpose. Headings are just one example.
Let’s look at one of the most common tags you’ll use a paragraph. in HTML, a paragraph is created with the <p> tag. Any normal text you want to show on the page should be inside one of these.
Example:
<p>This is my very first paragraph on a webpage!</p>
If you want to break a line without starting a new paragraph, you can use the <br> tag.
This tag does not need a closing tag.
Example:
<p>Line one.<br>Line two.</p>
Sometimes you want to style your text a bit. HTML has simple tags for that:
Bold: <b>Bold text</b>
Italic: <i>Italic text</i>
Example:
<p>This is <b>important</b> and this is <i>emphasized</i>.</p>
Here’s a small example webpage using everything so far:
<h1>Welcome to My First Note!</h1>
<p>Hello! This is my very first HTML page.</p>
<p>
Here is a second paragraph.<br>
And here is a line break inside it.
</p>
<p>This sentence has <b>bold</b> and <i>italic</i> text.</p>
Lists
HTML has two main types of lists:
1. Ordered Lists (numbered)
Use the <ol> tag. Each item goes inside an <li>.
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Eat breakfast</li>
</ol>
2. Unordered Lists (bulleted)
Use the <ul> tag.
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
---
Images
To show an image, use the <img> tag.
This tag does not close.
It requires at least one attribute:
src=" " — where the image is located
alt=" " — text describing the image (for accessibility)
Example:
<img src="cat.png" alt="A cute cat">
You can also control the size:
<img src="cat.png" alt="A cute cat" width="200">
---
Links
Links in HTML use the <a> tag, with the href attribute.
<a href="https://example.com">Click here to visit Example</a>
To make a link open in a new tab:
<a href="https://example.com" target="_blank">Open in new tab</a>
---
Buttons
A simple button uses the <button> tag:
<button>Click Me!</button>
Buttons can also link to pages:
<a href="https://example.com">
<button>Go to Example</button>
</a>
---
Divs & Page Structure
A <div> is a box that groups content.
Divs don’t visibly do anything — they’re used to structure your webpage so you can style it later.
Example:
<div>
<h2>About Me</h2>
<p>Hello! My name is Zachary and I make websites.</p>
</div>
Divs are especially useful when you start adding CSS.
---
Full Example Webpage
Here is a complete mini webpage using everything from the tutorial so far:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage!</h1>
<p>This page shows the basic HTML elements you've learned.</p>
<h2>My To-Do List</h2>
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Build a real website</li>
</ol>
<h2>My Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Pasta</li>
<li>Chocolate</li>
</ul>
<h2>My Cat</h2>
<img src="cat.png" alt="A cute cat" width="250">
<h2>Check Out This Link</h2>
<a href="https://google.com" target="_blank">Open Google</a>
<h2>Click the Button</h2>
<button>Press Me!</button>
<h2>About This Website</h2>
<div>
<p>This small section is inside a div.</p>
<p>Divs help organize content and make layout easier.</p>
</div>
</body>
</html>