Introduction: How to Make a Website
Learn how to create your own Webpage using HTML!
Step 1: Introduction:
The backbone of any website is made up of Hyper Text Markup Language (HTML) files.This guide will show you how to create a simple web page using its latest version, HTML5.
Note: The website you are creating will be private. In order for it to be public via the World Wide Web, you must use a web hosting service.
What you need:
Notepad++ (or any other HTML editor)
Get it for free here: https://notepad-plus-plus.org/
Step 2: Initial Set-Up
First we will start by launching your HTML editor. If you are using Notepad++, it is suggested that you click the Language tab and select HTML. This will make the code easier to read.
Step 3: All HTML Files Start With a Basic Shell and Are Built From There. the Basic Format Is As Follows:
You may notice a pattern here, which is the repetitive use of the symbols
‘<’ and ‘>’. The two will always enclose a Tag,and the majority of Tags will have an opening and closing part, the latter distinguishable by a ‘/’. Tags are elements that instruct what its contents will do/be.
In this guide, our main focus will be what goes on between the body Tags circled in red.
Note: Tags are not case sensitive, so interchanging between cases won’t affect the result.
Step 4: Creating a Heading
We will start by creating a Heading, like what you would see at the beginning of a web article.
To make a Heading we will use an element called
<h1>
Inside the body Tag, type the following code:
<h1>My First Webpage</h1>
Step 5: Saving Your Work
Now would be a good time to save your work. Make sure you save the file using an .html extension. Upon doing so, you will now be able to use a function built into Notepad++ that allows you to see the web page in its current form. This will help you see the results instantly!
Select the Run tab or press F5 on your keyboard, then select the web browser you use, and you will see how your current web page looks.
Congratulations! You are on your way to making your
very own web page!
Step 6: Creating a Paragraph
From here we will introduce the Paragraph Tag, which is represented as
<p>
This element is commonly used when wanting to write text on your web page.
We will write the following line of code a couple of lines below our
<h1>
element.
<p> This is my first paragraph.</p>
Step 7: If We Save and Run Our HMTL Code Now We Will See the Following:
Step 8: Adding a List
Next we will add a list to our website. Lists are very useful for blogs and informative websites, and an easy way to organize your web page.
For this site we will use an unordered list, which uses the
<ul>
Tag and each item within it will have a
<li>
Tag, which stands for list item.
We will place this list underneath the
<p>
Tags we used earlier.
For this step we will use the following lines of code:
<ul> <li>This is my first unordered list</li> <li>It allows me to make a bullet point list</li> <li I can display information differently in an unordered list compared to using paragraph element</li> </ul>
Step 9: The Finished Code Should Look Like This:
If this is your first time writing anything in HTML, you will notice some things that
are different with the above code and the code previously in this guide.
You will notice that unlike
<h1></h1>
the opening and closing Tags of
<ul>
are on different lines. Anything placed within the opening and closing Tag of an element will be a part of that element regardless of how many lines are between them. You may have also noticed the same format with the Tags for the basic program shell such as the
<html>
<head>
<body>
Step 10: Now After Saving and Running Our Updated Code, Our Website Should Look Like This:
Step 11: Adding Font Color
Here we will learn how to change the style of the website.
In this step we will change the color of the background. This will give some life to the dull webpage!
To do this we will be modifying a previous piece of code, namely the opening
<body>
Tag.
We are going to update it to look like the following:
<body style = "background: #CCFFF5;">
Step 12: How to Modify Elements
One of the ways you can modify elements of HTML is by using the “style” attribute.
In the above example we are changing the color of the background to light blue, which is represented in hexadecimal. You can also simply write basic colors as well, but be sure to spell it correctly!
Note: It is also important to note that style attributed must have a ";" at the end of them.
Step 13: With This New Addition to the Code Our Website Will Now Look Like This:
Now we have added some style to the page!
It is important to remember that when you add color to any page, you want to keep the text readable.
Step 14: Add an Image
Now it is time to add an image to our page!
Images are used to enhance a web page’s appeal. The easiest way to add an image is to save it in the same folder/location as your HTML file. This is because you must specify the file location, and if it is in the same folder you will only need to put the name of the image.
There are multiple factors involved when you put an image into your website and we will go over them. To add an image you will use the following snippet of code:
<img src = "picturename.jpg" alt = "picturedescription" style = "height: 250px; width: 250px; ">
You put the location of the picture where "picturename.jpg" is in the example code. The “alt” will contain text that will display if the image cannot load for some reason. The height and width of the image has also been defined in pixels so that it will look the same to everyone regardless of screen size or resolution.
Step 15: Your Finished Code Should Look Similar to the Following (file Name and Dimensions Will Vary):
Step 16: After Saving and Running the File, Your Page Should Look Similar to This (image Will Vary):
Congratulations!
You have completed building your first website. This tutorial only scratches the surface of what you can do when making a website. If you would like to learn more you can check out www.w3schools.com.
This website is full of additional info about concepts not covered in this tutorial.
However, here are a few tips and general codes to help you along.
Step 17: Common HTML Codes
These are the basic common HTML codes you may find useful:
Text Tags:
Creates the largest heading
<h1></h1>
Creates the smallest heading
<h6></h6>
Creates bold text
<b></b>
Creates italic text
<i></i>
Creates a citation, usually italic
<cite></cite>
Sets size of font, from 1 to 7
<font size ="2"></font>
Sets font color, using name or hex value
<font color = "red"></font>
Links:
Creates a hyperlink
<a href ="URL"></a>
Creates an image/link
<a href = "URL"><img src="URL"></a>
Formatting:
Creates a new paragraph
<p></p>
Aligns a paragraph to the left (default), right, or center.
<p align ="left">
Inserts a line break
<br>
Creates a numbered list
<ol></ol>
Creates a bulleted list
<ul></ul>
Before each list item adds a number or symbol depending upon the type of list selected
<li></li>
Adds an image
<img src = "name">
Aligns an image: left, right, center; bottom, top, middle
<img src = "name" align ="left">
Sets size of border around an image
<img src = "name" border = "1">
Inserts a horizontal rule
<hr />
Sets the size (height) of rule
<hr size ="3" />
Step 18: Tips & Hints
These tips will help make your code easier to read & organized.
-Always include a closing tag on HTML elements.
-Keep HTML code in the same case.
-Keep white space to a minimal and don’t leave long blanks in-between code. White space is basically non-coded areas!
-Avoid long code lines. This means you need to be innovated in code design!
-Comment lines should be anywhere where you may think clarification of code is needed.
