This article is old. Be careful! It might contain outdated information.
Here's an alternate resource that I am recommending for this topic.
The goal of this tutorial is to teach you how to create your first web page. It will be very simple. The resulting web page will consist of a title (ex: "My First Web Page"), and an image containing The CodePunker logo.
You're reading this tutorial so it's safe to assume that you already have one of the needed tools to create your first web page - a web browser. Even if you probably already know this it's worth mentioning that browsers are applications used to connect to the Internet and display web pages by interpreting the HTML tags in the source code and displaying human readable content. Of course, browsers do a lot more than that but for now that's all you need to know.
Another tool that you need is a plain text editor. There are many choices out there and some are really complex. However, for the purpose of this tutorial, all you need is Notepad in Windows or an equivalent for Mac.
As you probably remember from my previous tutorial, all HTML documents have mandatory elements(tags):
Keeping in mind that most tags need their corresponding closure( <html> closes with </html>, <body> closes with </body> and so on), you can go ahead and write the code below in your text editor.
Now save the file and open it in your browser. You should see an empty page with only one element that identifies it - the <title> tag is displayed in the browser tab title (fig.1).
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> </body> </html>
Web page headings are displayed using one of the six possible 'h' tags: <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5> and <h6></h6>. While 'h' stands for heading, the numbers that follow are used to express the 'importance' of a heading inside a web page.
<h1> tags are the most important, they are not just bigger in font size, they also represent the main title and they should match the <title> tag from the head of the document. Also, in order to avoid confusion, <h1> tags should only appear once on the page.
Now let's go back to our text editor. Add the line below inside the <body> element, then save your file and re-open it in your browser. You should see the title displayed on the page (fig.2).
<h1>My First Web Page</h1>
Images are loaded inside web pages using the <img> tag. Because this element doesn't contain any text, it doesn't have a closing tag. However, if you just type <img> you will tell the browser to load an image, but it still doesn't know which one. To specify the image that needs to be loaded you have to utilize another component of HTML tags - an attribute.
Attributes are defined inside the opening tag of an element by specifying the attribute name and attribute value. For this particular case, the <img> tag needs the src attribute, which lists the path that the browser should follow to find the image. In the end, for an image item to load properly, it should look like this:
<img src="the path pointing to the image file">.
We have agreed at the beginning of this tutorial that we would load The CodePunker logo inside our web page so in order to do that, first go to this link: http://www.codepunker.com/assets/logo.svg and download the image in the same folder where you have saved your current web page. Once you've done that add the line below to your html document, right after the <h1> part, save the file and re-open it. You should see the image displayed on the page (fig.3).
In the end, your HTML file should look like this:
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>My First Web Page</h1> <img src="logo.svg"> </body> </html>
Don't stop here! Add more images, experiment with more heading tags, paragraphs(<p>), bold text(<strong>) and italic text(<em>).
Any questions ? Use the comments area below and I will be more than happy to help.
Ready to go even further ? Click here to continue developing this web page by learning even more about HTML and CSS.