Now you understand the very basics of HTML, let’s make our first ever webpage!
Create a new folder somewhere on your computer and name it ‘html-from-scratch’. Using your preferred text editor, create a new blank file and save it in this folder as ‘my-first-webpage.html’.
Enter the following in file:
<!doctype html> <html> <head> <title>HTML From Scratch</title> </head> <body> <!-- content goes here --> </body> </html>
The above is a basic HTML file layout. We’ve declared the Document Type on the first line, opened our <html> and <head> tags and set “HTML From Scratch” as the title for the page. We then close the head and open the body.
On line 7 we have included a comment. Use comments to leave extra info in your code which won’t be displayed in your webpage. Mark-up a comment by wrapping your text inside <!– and –> tags.
Finally, we close off our opened body and html tags to finish the document.
Remove the <!– content goes here –> line from your source code and type out the following:
<h1>HTML From Scratch</h1>
We include a <h1> tag. H1 is used to mark-up the main heading on your page (in this case, the name of our site). HTML contains header tags from 1-6, with <h1> being the largest, most-important title on the page down to <h6>.
Next, we’ll mark-up the navigation menu for the website. Type out the following:
<ul> <li>Home</li> <li>Nettuts</li> <li>Google</li> </ul>
This chunk of code may appear a little scary, but let’s break it down. The block above marks-up an unordered list (<ul>) with three list items (<li>).
<ul> creates a bullet-point list, and each <li> item (list item) is a new bullet-point in the list.
Save your file, and open ‘my-first-webpage.html’ in your web browser. You should see this:
As you can see, the <title> tag is working correctly, the <h1> tag displays a large title at the top of the page, and our bullet-point navigation list is displaying correctly.
You may notice that we have one problem with our navigation list right now: the items aren’t hyper-links and so they aren’t clickable. To fix this, change the three list items (<li>) to:
<li> <a href="my-first-webpage.html">Home</a> </li> <li> <a href="http://net.tutsplus.com">Nettuts</a> </li> <li> <a href="http://www.google.com">Google</a> </li>
Inside each of our <li> list items, we’ve made the text into hyper-links. The <a> tag creates an anchor – a hyper-link to another page on your website or another location on the Internet.
For the anchor tag to actually link somewhere, we provide it with the address to link to inside an ‘href’ parameter. Parameters go inside the opening tag (<a href=””>…</a>).
On our webpage, the ‘Home’ link goes to the current page (‘my-first-webpage.html’), ‘Nettuts’ goes to Nettuts (http://net.tutsplus.com) and the ‘Google’ link goes to, you guessed it, Google.
Following the </h1> tag, type out the following:
<p>This is the main content for my website.<br /> Here is some stuff about me:</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
Inside, we have two paragraphs containing random text. Notice in the first paragraph we have a <br /> tag. This is a line break; in other words, the text following it will display on a new line, but in the same paragraph.
The <br /> tag is special as it does not have a closing tag. Instead, the closing forward-slash (‘/’) is included at the end of the tag. This is because a line-break contains no content, it exists purely for aesthetic purposes, otherwise we’d be writing <br></br> which is a little pointless.
Several other tags are also self-closing, such as <img /> and <hr />
Inside your webpage folder, create a new folder named ‘images’. Save the image below into that folder (right-click, Save Image As):
Now, back inside the main content for the website, before the closing </section> tag, enter the following to insert the image on our page:
<img src="images/envato-stock.jpg" alt="Laptop on Floor" />
The <img /> tag, like the anchor tag, is self-closing and accepts most of it’s contents as parameters in the opening tag.
src=”…” stands for ‘source’ (the path to the image). The image could be stored somewhere elsewhere on the Internet, or locally with the webpage. Here, we’ve set the tag to display the image we saved in our images directory.
alt=”…” contains the ‘Alternative Text’ which will be displayed if the image fails to load. You usually briefly describe the image here.
Take a look at the page now. The image should display as below:
In just a short space of time, you’ve already accomplished quite a lot! You’ve learnt a number of basic HTML tags, and hand-coded your first webpage.