Let's dive right in and create our first web page.
For web development, you need two programs: an editor to create the files for the website and a browser to view and test your website.
For creating web pages, a normal text editor would be sufficient. But there are editors that greatly simplify your work as a programmer. Therefore, I recommend that you use a modern code editor.
My current favorite among the many editors is Atom (free). You may use an editor of your choice but I will occasionally refer to some functions of Atom. Good alternatives to Atom are Brackets or the slightly older but very good Notepad++.
Go ahead and install an editor. If you do not know which one, use Atom for now.
Atom Editor Packages
Open the File menu and select Settings.
Go to Install, enter atom-live-server in the search bar, hit enter and install the atom-live-server package.
Now enter color-picker in the search bar and also install the color-picker package.
Our website should, of course, run in all major browsers (Internet Explorer, Firefox, Chrome and Safari). However, for web development I recommend you use Chrome. Chrome includes very useful tools for developers which you will use often.
If you do not have Chrome on your computer, you can install it here.
Creating an HTML Document
Equipped with editor and browser, let's create the first HTML document for our website.
Create a folder on your computer for your project. Name the folder Portfolio (or anything you want).
Open Atom (or your code editor of choice).
Open the File menu and select Open Folder .... Browse for the folder you created and open it.
Right-click below the folder and select New File. Name the file
Now you have a blank text file named
You could probably assume, the name
index.html does have special meaning. If a website address is called, for example
index.html file is automatically displayed first, which in this case is
http://code.makery.ch/index.html. For us, our first
index.html will become our home page.
Viewing and Refreshing
Now you can fill the document with content. Type the following lines in your HTML.
To view the page, we'll use the live-server package that we installed above. Open the Packages menu, choose Live Server and click on one of the ports. A browser window should open up and show your first website. Now, whenever you save any changes they are automatically updated by the live server.
If the page is not updated automatically: Save all files and click
cmd+R in the browser.
Congratulations! You have just created your first website!
In order to keep your code clean, it is important that you correctly indent the lines with the tab key. Pay close attention to the example code and indent accordingly. It is important that you develop clean programming habits from the very beginning!
Tip 1: Use
Shift+Tab keys to move indentation to the left.
Tip 2: You can indent multiple lines at once if you select them and click
In the above example you have already seen the typical HTML characters with angle brackets. These are called tags.
HTML elements consist usually (but not always) of two tags, one opening and one closing. In our example,
<html> is an opening tag and
</html> with the slash is a closing tag.
The text between the opening and the closing tag is the content of the HTML element. With
</html> we tell the browser about the beginning and end of the HTML of our web page.
The second tag we have seen is the
<body> tag. It states that all content between the opening
<body> and the closing
</body> tags are to be shown in the main area of the browser.
Attributes declare additional information for an item. Attributes are part of the opening tag of an element and always have a name and a value.
As an example, let's look at the HTML element for a link. It is probably one of the most important elements — what would the internet be without links?
<a> element above includes an
href attribute (short for "hypertext reference") with the value
http://code.makery.ch. The browser knows that it must show the link as My Website.
Basic Structure of an HTML Page
We have already seen the two elements
<body>. But the basic structure of an HTML page usually contains a few more. Adjust your website to the following code. Afterwards, we will discuss each element it.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <p>Write anything you want to tell the world.</p> </body> </html>
- Always put
<!DOCTYPE html>on the first line. It tells the browser about the type of the document.
<html>tag indicates the start and
</html>the end of the document.
<head>element contains additional information about the page. In contrast to the
<body>element, this information does not appear in the main area of the browser.
- Within the
<head>, there should be an indication about the character set:
<meta charset="utf-8">. If you do not specify the character set some special characters may not get displayed correctly. You might have noticed that the
<meta>element has no closing tag. There are a few elements without closing tags, but they are the exception.
- Next you'll see the
<title>element. The title is displayed in the title bar at the top of your browser window.
- Within the
- Everything inside the
<body>element is displayed in the main area of the browser.
<h1>defines the main heading. Sub headings can be created with
- Text between
</p>is a paragraph.
- After each opening tag, the next element should be indented (with a tab or two spaces) for better overview. Make sure you follow this habit.
Tip 1: Keep this basic HTML structure handy. You can use it for any new HTML page!
Tip 2: Use the keyboard shortcut
Ctrl+S to save the current file.
Tip 3: Use the keyboard shortcut
Ctrl+Z for undo.
With these basic HTML elements we are well prepared to bring our website to a new level. First, let's add an image so that the home page of our portfolio looks a bit more interesting.
Inserting an Image
To insert an image we use the
<img> element. The following example will insert my picture:
<img src="marco.jpg" alt="Picture of me">
<img> element only has one opening but no closing tag. It contains a
src and an
alt attribute. The
src attribute specifies the URL, that is the location and file name of the image. The
alt attribute is an "alternative text", which describes the content of the image. This text is used by search engines and if for some reason the image can not be displayed, for example on a screen reader for the blind.
Relative and Absolute URLs
URLs are used for the
src attribute of images and also for the
href attribute of links. The URL specifies the "address" of a file (for example another web page or an image). Depending on the location of the file, either a relative or absolute URL must be used.
If a file is part of the same web site, then a relative URL can be used. As we have seen in the example above, this is only the name of the file.
A relative URL is always relative to the current HTML page. If the target file is located in another folder, this must be taken into account. If the image from the example above were in a subfolder called
images, the relative URL would be
images/marco.jpg. If the file is in a parent folder you can reach it with
../. The URL for the image in this case would be
If the file is located on another website, an absolut URL must be used. Absolute URLs contain the entire domain name and path. An example would be
- An URL that starts with
http://is an absolute URL.
- An URL without
http://is an URL relative to the current web page.
- A dot (
.) refers to the current directory.
- Two dots (
..) refer to the parent directory.
Examples of Relative and Absolute URLs
<!-- Relative URLs --> <a href="image-gallery.html">Image Gallery</a> <a href="blog/first-blog-entry.html">My First Blog Entry</a> <a href="../image-gallery.html">Back to Image Gallery</a> <!-- Absolute URLs --> <a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a>
Portfolio with an Image
If you have not already done so, try and insert an image in your portfolio. You must copy an image to your Portfolio folder on your computer. Make sure that you specify the exact file name, including the file extension.
All of your code could now look something like this (I've added a subheading and some more text):
index.html with Finished Portfolio Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html>
That's how the portfolio currently looks like in the browser:
→ In the next section you will learn how to publish your website on the internet. Continue with Part 2: Publishing Your Website