How to add content to a HTML page
LESSON 2: Html Content
In the previous lesson, I showed you how to make an index.html page. Now it’s time to add some content. Most HTML pages will contain these core components:
- Text
- Images
- Lists
In this post, I’ll be showing you how to do all three.
Text
Text is really important in websites where you want people to read things. Go and google ‘why is text important’, you might find some interesting results.
Paragraphs:
HTML represents a paragraph by using a thing called a tag that looks like this: <p>
In HTML, every element is wrapped in tags. If you have a paragraph, you wrap that in paragraph tag.
<p>This is a paragraph</p>
Did you notice, the first tag doesn’t have a / but the second one does? that’s because the second tag is a closing tag. In HTML, all elements must have a closing tag.
Headers:
In HTML, there are different size headers you can use. A big header would look like this:
<h1>I am the biggest header</h1>
A small header would look like this:
<h6>I am the smallest header</h6>
As you might have guessed, there are six different header sizes.
Lists
Lists are a bit more fun because they’re made up of multiple elements. There are two types of lists to remember, ordered lists and unordered lists. An ordered list has numbers, unordered has bullet points.
An ordered list:
<ol>
<li>List item one</li>
<li>List item two<li>
</ol>The list would then look like this:
- List item one
- List item two
A list is made of of two components: First of all there is the opening <ol> tag. ‘ol’ stands for ordered list and tells us that everything after this tag is part of that list. The closing </ol> tag is what tells us when to stop considering things as part of the list. Nested inside those are the <li></li> tags which denote a list item, each of which will be given a number based on its order. That’s why it’s called an ordered list.
If you want to use bullet points instead, just replace the <ol></ol> tags with <ul></ul>. ‘ul’ stands for unordered list…probably. Here’s an example of one:
<ul>
<li>List item one</li>
<li>List item two<li>
</ul>Which looks like:
- List item one
- List item two
Images
There are a few different ways to put images on a web page. For now we’re going to focus on importing images from absolute urls. Don’t worry about what that means for now, just know that there are other options.
So, to denote an image in HTML, you want to use the <img> tag. Earlier in this post I said all tags require a closing tag. I lied. This one has no closing tag because an image element is empty (See this stackoverflow post for more info), can have no content nested within it and is entirely made up by attributes.
Let me show you what an image looks like in code, then we can break it down.
<img src="https://via.placeholder.com/150">In the code above, you can see I have the <img> tag as you’re expecting, but I also have the src="https://via.placeholder.com/150" bit. That bit is an attribute. In this case, src is short for source, and the link, contained within quotations (“) is where the image lives on the internet. That’s all you need to put an image on a web page.
If you’ve been reading along and have no idea what the outcome should look like, here’s a HTML page with everything linked together:
<h1>This is my example page</h1>
<p>This is an example paragraph, it allows me to form text into more cohesive blocks</p>
<p>If I make another paragraph, the text is separate from the previous paragraph</p>
<h2>This is a slightly smaller header</h2>
<ul>
<li>And this is an unordered list</li>
<li>With two items (this being the second)</li>
</ul>
<ol>
<li>And this is an ordered list</li>
<li>With this being the second item</li>
</ol>
<img src="https://via.placeholder.com/150">Copy the above into any file called index.html and open it in chrome.
