Bare Bones Web Page
Today we are going to create a very simple, bare bones web page from scratch. We will talk about HTML elements, styling your web page (colors, fonts, alignment, etc.), and finally how to insert an image into your web page!
By the end of this instructable, you will have the basic skills to create a web page from scratch, and discover that coding isn't as hard as it seems!
Using Notepad
We are going to use Notepad on windows to create our first web page. Although any text editor will do, notepad comes pre-installed on Windows machines so it is a great starting point.
To open notepad, go to your search bar in the bottom left corner of your screen and type in "Notepad". Then select the "Notepad" application that comes up in the search results. A new window should open.
Adding the Basic HTML Document Tree
All web pages must follow a standard skeletal structure in order for your web browser (Chrome, Firefox, Edge, Internet Explorer, Safari...) to process and display your web page.
This is called the html document tree. In Notepad, type in the html "elements" or "tags" as displayed in the screen shot. Feel free to copy and paste as well:
<html> <head> </head> <body> </body> </html>
Saving As a .html Page
Now that we have our basic html structure in Notepad, let's save it so that we don't lose any work, and so that we can see our changes as we progress along the Instructable.
- Select 'File' > 'Save as...' (Screenshot 1)
- Change the File Type to 'All Files' (Screenshot 2)
- Give your file a name of your choice. Make sure to note where you're saving the document on your computer so you can open it later.
NOTE: The most important part of saving this file is appending ".html" to the end of the file name. This will allow your computer to recognize it as a webpage. So if you want to name your file "my_webpage", make sure to add .html to the end of that, e.g. "my_webpage.html"
Adding a Title to Your Web Page
So we have the basic html structure needed for web browsers to interpret and display our web page, but we don't have any content. Let's change that!
The first thing we should do is give a Title to our web page. Most all web pages have a title. This is what displays on the tab in your web browser (see screen shot). I'm going to give my web page the title "Taylor's Website". To do this, we need to add a 'title' element.
<html>
<head>
<title>Taylor's Website</title>
</head>
<body>
</body>
</html>At this point you will notice that every tag has an "opening" tag and a "closing" tag. Such as
<title> and </title>.
This is to discern where the title starts, and where it ends. Almost all html tags follow this, however there are some exceptions.
Adding Content to Your Web Page
Well, we have a Title for our web page, but we still don't have any actual content for it. Let's add some flair!
We have added a title to our web page using a 'title' element. Let's give our webpage a big, attention grabbing header by using a 'h1' element which is a heading element.
<html>
<head>
<title>Taylor's Website</title>
</head>
<body>
<h1>Welcome to my web page!</h1>
</body>
</html>Viewing Our Changes Thus Far
We have a title, we have some content, let's check out our web page to how it's coming so far.
- Save your file in notepad
- Go to where you saved your file and double click it. It should automatically open in your default web browser. Looking good!
Adding a Paragraph Tag
We have a title, a heading, now let's add a paragraph with some more text. The element name for a paragraph is 'p'. You can see it's use below:
<html>
<head>
<title>Taylor's Website</title>
</head>
<body>
<h1>Welcome to my web page!</h1>
<p>Today we will learn how to create this very simple web page!</p>
</body>
</html>Note: You can view your changes any time you like by saving notepad and opening up the file.
Give It Some Color
We have our webpage rolling right along, but it's pretty plain. Let's give our paragraph tag some color!
We can color different elements by adding a 'style' attribute to the 'p' tag as detailed below:
<html>
<head>
<title>Taylor's Website</title>
</head>
<body>
<h1>Welcome to my web page!</h1>
<p style="color:red">Today we will learn how to create this very simple web page!</p>
</body>
</html>Adding a Picture
What is a website without pictures? Let's add a picture to our website!
First step is to find an image that you like. I used google images to search for a golden retriever. Pull the image up and make sure that the url ends in .jpg, .png, .gif, .jpeg, etc.
Once you have chosen your image, we need to add it to the html page using an 'img' tag. My image is: https://i.imgflip.com/4a8he.jpg
Add it to your page using an 'img' tag with a 'src' attribute:
<html>
<head>
<title>Taylor's Website</title>
</head>
<body>
<h1>Welcome to my web page!</h1>
<p style="color:red">Today we will learn how to create this very simple web page!</p>
<img src="https://i.imgflip.com/4a8he.jpg"></img>
</body>
</html>Viewing the Final Product
Save the notepad file, and open up the final product. You should see your web page!