HTML 101
Hi!👋 I’m Sofia, a veteran rookie from Generation Girl, and today I’ll be teaching you the basics of HTML. HTML, which stands for Hypertext Markup Language, is used to create websites, and it’s pretty easy to learn. Let’s get started!
Today, we’ll be making a super basic website, and along the way, you’ll learn the basics of HTML. My example website will be centered around my pet dog, Chewie. You can follow along by making one for your pet or by making one for you! Here are the things you’ll need:
- a text editor that supports HTML
- a .jpg square picture of your desired subject (pet, you, etc.)
- a browser to open your website on (I usually use Google Chrome)
- a list of your subject’s hobbies
1. Setting up the document
Okay, first, let’s make the HTML file. On your text editor, create a new file, then name it website.html
Once you’ve done that, place the file in a folder. In the folder, you want to also place the picture of your subject. Name the picture pic.jpg, so it’s easy to implement later on.
Let’s get back to the HTML file. Whenever you have an HTML file, you have to open it with <!DOCTYPE html>. This is called a document type declaration. The document then starts with <html>, and ends with </html>:
<!DOCTYPE html>
<html></html>
title
When you open a website on your browser, there’s the title of the website on your tab, right? Like, right now, on your tab, there should be HTML 101. To replicate that on your website, add a head, then a title:
<!DOCTYPE html>
<html>
<head>
<title> CHEWIE </title>
</head>
</html>
body
Now that the document is all set up, we can start coding what people will actually see: the body.
First, you want to add <body> and </body> to your document, which outlines which part of the document is visible to the reader.
<!DOCTYPE html>
<html>
<head>
<title> CHEWIE </title>
</head>
<body> </body>
</html>
So far, there’s nothing visible on our browser pages when we open the file, this is just to set up!
2. Elements
To define different elements of HTML, we use tags. An example is headers. To open a header, you use <h1>, and to close it, you just use a slash; </h1>. Like this:
<tagname>content...blablabla....</tagname>Tags can define links <a>, paragraphs, <p>, lists <li>, and many more. On the browser pages, these HTML tags won’t be visible, don’t worry! Only the content will be visible. These tags are used to tell the browsers how to display the content. Let’s try and use these tags! (All of the following should be contained within the <body> tag)
headers
To code a header, you can use <h1> all the way to <h6>. Use <h1> for the most important heading, and <h6> for the least important. For example, I’ll use <h1> to write the title of my website:
<h1>Chewie's Website</h1>images
To add an image in your website, use the <img> tag, like this:
<img src=”pic.jpg”>But if you want to control the width and height of the picture, add size attributes (this code means 500 pixels!):
<img src=”pic.jpg” width="500" height="500">Right now, our website looks like this:
It’s looking a bit empty, so let’s start putting in more information!
paragraphs
A paragraph is exactly what it sounds like. To make a paragraph, use the <p> tag, like so:
<p>Chewie is a red toy poodle. His birthday is on June 4, and as of 2019, he is 3 (dog) years old. </p>To make line breaks in a paragraph, you use the empty tag <br>. It’s called an empty tag because there’s no end tag. You have to use <br> to make line breaks because if you only enter to make a new line as you would in a Word document, the browser can’t read it.
<p>Chewie is a red toy poodle. <br> His birthday is on June 4, and as of 2019, he is 3 (dog) years old.</p>lists
Lists are often put in either bullet point (unordered) or numbered format (ordered). They’re pretty similar, so let’s start with the unordered list.
Compile your desired list, make a title using the header tag we learned above (don’t use <h1> this time) and then you simply need to use the <ul> and <li> tags:
<h3> Chewie's favorite things to do: </h3>
<ul>
<li>Sleeping</li>
<li>Going on walks</li>
<li>Playing catch</li>
<li>Barking at strangers</li>
</ul>If you want the list to be numbered, simply replace <ul> and </ul> with <ol> and </ol>:
<h3> Chewie's favorite things to do: </h3>
<ol>
<li>Sleeping</li>
<li>Going on walks</li>
<li>Playing catch</li>
<li>Barking at strangers</li>
</ol>It’ll look like this:
links
Links are really useful to implement in a website because they allow the site visitor to have access to everything they need on one page. For example, in Chewie’s Website, I’ll put a link to my Instagram, just in case the person visiting the website wants to see more adorable pictures of Chewie. Prepare your desired link: https://www.instagram.com/dj0jonegoro/ (Follow me!) Now, all you need to do is use the link tag <a>
This is the format:
<a href=”put url here”>the text that's visible</a>Let’s try and implement it!
<a href=”https://www.instagram.com/dj0jonegoro/”>Follow my owner's instagram!</a>
This is what our code looks like so far:
And this is what our website looks like so far:
Now let’s make the website look pretty!
3. Style
To set the style of an element, you can use the style attribute. Usually, if it’s a big website with multiple pages, I use a separate CSS document, and this is what I would usually recommend, but for the purpose of this simple tutorial, I’ll implement the styles within the HTML document.
Here’s the basic formatting of style:
<tagname style="property:value;">“Property” and “value” are CSS properties and values. Let’s try this out!
background color
To set the background color for your website, you use the property background-color, like so:
<body style=”background-color:desiredcolor;”>You can choose any color you want, and to pick the color, I use hex codes. You can google hex color, and pick virtually any color you want, and then just put the hex code of the color into the code.
You can also input simple colors like red, blue, or green, but if you want a really specific color, hex code is the way to go!
<body style=”background-color:#ffeea5;”>
text color
Now you can choose the color of the text. Find your color just like before, using hex code or using a simple color, and then input it like so:
<TAGNAME style=”color:#DESIREDCOLOR;”>CONTENT</h1>I’m changing the color of my first header, but you can apply this code to your lists or paragraphs as well;
<h1 style=”color:#4c6a9b;”>Chewie's Website</h1>
font
The default font for Google Chrome is Times New Roman, so if you like that font, skip this step! Personally, I like Verdana, so I’m going to be changing my whole website’s font into Verdana. What you need to do is just add the font-family property.
font-family:desiredfont;I’m going to add this property to the whole website by putting it in the <body> style next to the background-color property, but if you want different fonts for each text, you can put the property into each individual <h1>, <p>, or <ul> tag.
<body style=”background-color:#ffeea5; font-family:verdana;”>
text alignment
Right now, all my text and images are smushed to the left, as per the default text alignment. To change this, I can use the text-align property.
text-align:center/left/right;I only want to place my header in the center, so I’m only going to use text-align for <h1>. If you want everything to be in the center, use the text-align property in the <body> tag.
<h1 style="color:#4c6a9b; text-align: center">Chewie's Website</h1>Aaand we’re done!
This is our finished code:
And our finished website:
That’s the end of the tutorial! This is just a really simple website, and this is just the very basics of HTML, so don’t feel discouraged just because it doesn’t look extremely professional! With practice and experience, you can eventually build really cool websites like Generation Girl’s.
Thank you so much for reading, and I hope you enjoyed it! For more tutorials, feel free to check out Generation Girl’s medium page. See you next time! ❤️
