How to Create Your First Website
Ranked #1,925 in Internet, #113,300 overall | Donates to Squidoo Charity Fund
Step by step using HTML5
Creating websites is easy and fun. The basics are super simple, and you don't need any expensive software. Actually, you'll be very fine using totally free software.
This free tutorial shows you how to create your very first website, step by step. We'll start completely from scratch, and you don't need any previous knowledge on HTML or programming.
Once you are ready, let's get rolling!
This free tutorial shows you how to create your very first website, step by step. We'll start completely from scratch, and you don't need any previous knowledge on HTML or programming.
Once you are ready, let's get rolling!
What we'll be creating?
Since this tutorial is aimed at complete beginners with no prior knowledge on creating websites, we'll be creating really simple website.
Click here to see a demo.
Click here to see a demo.
Requirements
Basically you need just two things to create a website. They are:
-
1A modern web browser
The biggest reason to use a modern browser is that older browsers may not know how to read the latest HTML code (HTML5). Modern browsers also provide
- better functionality in general,
- more pleasant browsing experience, and
- more advanced protection against security risks.
Visit Browse Happy and choose one of the web browsers featured on that page. I prefer Google Chrome, but Mozilla Firefox is great and popular as well. - better functionality in general,
-
2A simple text editor
You don't need any expensive software, like Adobe Dreamweaver, to create websites. In fact, I recommend using only free software, especially if you are just starting out.
If you are on Windows, you already have Notepad, and if you are on Mac, you already have TextEdit. You can use them. However, I highly recommend getting Notepad++ if you are on Windows, and I have heard that TextWrangler is good for Mac users. They are both free.
Why do you need a text editor?
HTML files are simply text files with the file extension of .html (e.g. mywebsite.html, compare that to regular text files, e.g. mytextfile.txt). Text editors are for creating text files, right?
Before starting
Before reading further, you may want to try your current skills in HTML by taking a quiz I've created. Don't worry if you know nothing - just take the quiz for fun and then come back to learn HTML. Anyway, here is the quiz if you're interested:
Introduction to HTML
HTML is used to create websites. Every website, including this, is written in HTML, Hyper-Text Markup Language. Learning HTML is the first step in the journey of creating websites from scratch.
The latest version of HTML is HTML5. Oh, and HTML isn't a programming language by the way. It's a markup language. (Those facts are quite unnecessary now, but it's good to know them!)
The code of a very simple HTML page could look something like this (notice that I'm using Notepad++):
The latest version of HTML is HTML5. Oh, and HTML isn't a programming language by the way. It's a markup language. (Those facts are quite unnecessary now, but it's good to know them!)
The code of a very simple HTML page could look something like this (notice that I'm using Notepad++):
1. Let's get started!
Open your text editor. This is where you will be working. Let's get started by writing our first line of code.
Write the following code/text snippet at the very top of your blank text document:
It simply tells the web browser the document type (doctype) of the page. It must be included on every HTML5 page, otherwise the page won't be considered valid.
No rocket science so far. Just make sure you to include that line on every HTML5 page. It's a rule.
Write the following code/text snippet at the very top of your blank text document:
<!doctype html>
It simply tells the web browser the document type (doctype) of the page. It must be included on every HTML5 page, otherwise the page won't be considered valid.
No rocket science so far. Just make sure you to include that line on every HTML5 page. It's a rule.
2. "Tags" and elements
The idea is to insert so-called "tags" to the HTML page to add elements to the page, like headings, images, text paragraphs etc.
HTML tags are (usually) pairs - they have a starting tag, contents, and a closing tag - and they are wrapper inside < and > (angle brackets).
Take a look at the sample code above (the image above the "Let's get started" heading). As you can see, there's <html> at the top (the starting tag), and </html> at the bottom (the closing tag). Everything between them is the contents of the <html> element.
The <html> tag tells the web browser that everything is html code until we get to the </html> tag (the closing tag). The / (slash) means that the tag is a closing tag.
The tag name is "html" -> The starting tag is <html>
The tag name is "head" -> The starting tag is <head>
The tag name is "body" -> The starting tag is <body>
The tag name is "strong" -> The starting tag is <strong>
Image source: W3C Wiki
HTML tags are (usually) pairs - they have a starting tag, contents, and a closing tag - and they are wrapper inside < and > (angle brackets).
Take a look at the sample code above (the image above the "Let's get started" heading). As you can see, there's <html> at the top (the starting tag), and </html> at the bottom (the closing tag). Everything between them is the contents of the <html> element.
The <html> tag tells the web browser that everything is html code until we get to the </html> tag (the closing tag). The / (slash) means that the tag is a closing tag.
The tag name is "html" -> The starting tag is <html>
The tag name is "head" -> The starting tag is <head>
The tag name is "body" -> The starting tag is <body>
The tag name is "strong" -> The starting tag is <strong>
Image source: W3C Wiki
3. Basic structure
In order to better understand the basic structure of an HTML page, let's take a look at a human. Of what parts does a human consist? Well, a human has a head (hopefully!) and a body. Right? So, human = head + body.
What next?
Next we have <head> tag coupled with the closing tag </head>. After that we have <body> tag coupled with the closing tag </body> because after head comes the body.
Both head and body has to be between <html> and </html> because they are parts of html. Your head and body are parts of you. Like this:
To understand it better, think the structure as blocks:
Don't worry if you don't know what these basic elements do - we'll get into that shortly. For now just know that they need to be included.
<!doctype html>
<html>
</html>
What next?
Next we have <head> tag coupled with the closing tag </head>. After that we have <body> tag coupled with the closing tag </body> because after head comes the body.
Both head and body has to be between <html> and </html> because they are parts of html. Your head and body are parts of you. Like this:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
To understand it better, think the structure as blocks:
- <!doctype html> (doesn't have a closing tag)
- <html> (and the closing tag)
- <head> (and the closing tag)
- <body> (and the closing tag)
Don't worry if you don't know what these basic elements do - we'll get into that shortly. For now just know that they need to be included.
4. Saving your file
Once you have the basic structure written on the text editor, we are ready to save the file. "Save as" the file to anywhere you want, and give it a name using only alphabets, numbers, hyphens (-), and underscores (_). Plus, write ".html" to the end (this is important).
For example, the name of the file can be "mywebsite.html" or "my-website_2.html".
You can open and view the HTML page in many ways:
For example, the name of the file can be "mywebsite.html" or "my-website_2.html".
You can open and view the HTML page in many ways:
- 1Press Ctrl + O in the web browser, locate the HTML file and open it.
- 2Locate the HTML file on your hard drive and drag it to the web browser.
-
3Locate the HTML file on your hard drive and double click it. The file should be opened in a new window/tab in the web browser. If the file is opened in a text editor, please see this page to make HTML files to be opened by your web browser.
When you have successfully opened the file with your web browser, you shouldn't see anything but white. Don't worry, that's because we haven't added any actual content yet!
After the first saving you can quickly save the file by pressing Ctrl + S in the text editor.
5. Head section
The <head> section is a place to put information about the website. The info won't be visible on the main page.
Let's add a <title> tag and contents to it inside the <head> section:
Save the file (Ctrl + S) and open it in the web browser (or if it's already opened press F5 to refresh the page). Can you see any difference?
The contents of <title> can be seen in the tab of the web browser, like this:
There are plenty of elements you can add to the <head> section, but for now let's not add anything else and let's move on.
Let's add a <title> tag and contents to it inside the <head> section:
<!doctype html>
<html>
<head>
<title>My website's title</title>
</head>
<body>
</body>
</html>
Save the file (Ctrl + S) and open it in the web browser (or if it's already opened press F5 to refresh the page). Can you see any difference?
The contents of <title> can be seen in the tab of the web browser, like this:
There are plenty of elements you can add to the <head> section, but for now let's not add anything else and let's move on.
6. Body section
The actual contents of the website is placed in the <body> section. Let's add two text paragraphs (hence "p"), like this:
Refresh the page, and it looks like this:
That's because the web browser ignores all extra whitespace: extra spaces, new lines, tabs, and so on. You don't need to indent your code like I've been doing, but it's a good practice as it improves readability.
New lines can be added with this code snippet:
The "br" stands for line break. This tag is a bit special because it doesn't have a closing tag. Or actually, it's 2-in-1: it's both the starting tag and the closing tag.
Why? Because it wouldn't be rational to write "<br></br>" because line breaks never have any content.
That's why we close the tag with "/" (slash) in the opening tag. But because you are writing HTML5, you don't need that slash. That's why it's perfectly okay to create line breaks this way as well:
There are some other HTML tags without a closing tag, like "hr" (horizontal rule) and "img" (image).
So, to achieve the first result (when you used paragraphs), you could also try this:
Or like this:
The results are the same. Extra whitespace doesn't matter, it makes reading the code easier (or in some cases harder).
<!doctype html>
<html>
<head>
<title>My website's title</title>
</head>
<body>
<p>Hello, World.</p>
<p>This is my website.</p>
</body>
</html>
Refresh the page, and it looks like this:
<!doctype html>
<html>
<head>
<title>My website's title</title>
</head>
<body>
Hello, World.
This is my website.
</body>
</html>
That's because the web browser ignores all extra whitespace: extra spaces, new lines, tabs, and so on. You don't need to indent your code like I've been doing, but it's a good practice as it improves readability.
New lines can be added with this code snippet:
<br />
The "br" stands for line break. This tag is a bit special because it doesn't have a closing tag. Or actually, it's 2-in-1: it's both the starting tag and the closing tag.
Why? Because it wouldn't be rational to write "<br></br>" because line breaks never have any content.
That's why we close the tag with "/" (slash) in the opening tag. But because you are writing HTML5, you don't need that slash. That's why it's perfectly okay to create line breaks this way as well:
<br>
There are some other HTML tags without a closing tag, like "hr" (horizontal rule) and "img" (image).
So, to achieve the first result (when you used paragraphs), you could also try this:
Hello, World.<br /><br />This is my website.
Or like this:
Hello, World.
<br />
<br />This is
my website.
The results are the same. Extra whitespace doesn't matter, it makes reading the code easier (or in some cases harder).
7. Let's add more content
Try to add more elements and content to your website. Below are starting tags of some elements. Try to do it on your own, or if you find it too difficult (that's fine), scroll down for an example.
Add a smaller heading:
And finally a text paragraph with some bold and emphasized text:
So, the whole code looks like this:
The contents created by the above code look like this:
- <h1> - The largest heading.
- <h2> - The second largest heading. h3, h4, h5, and h6 are also available (h6 is the smallest heading)
- <strong> - Strong/bold text. You can also use <b>
- <em> - Emphasized/italic text. You can also use <i>
<h1>My website</h1>
Add a smaller heading:
<h2>Welcome!</h2>
And finally a text paragraph with some bold and emphasized text:
<p>This website has been made by <strong>Matias</strong>! <em>(Feel free to change the name!)<em> Enjoy your stay.</p>
So, the whole code looks like this:
<!doctype html>
<html>
<head>
<title>Matias's website</title>
</head>
<body>
<h1>My website</h1>
<h2>Welcome!</h2>
<p>This website has been made by <strong>Matias</strong>!
<em>(Feel free to change the name!)</em> Enjoy your stay.</p>
</body>
</html>
The contents created by the above code look like this:
8. Go hyper with hyperlinks
Hyperlinks (aka links) let you go to other pages on the web. This is an example of a hyperlink (click me!). By clicking the example link you'll be directed to a super secret place (see it yourself!). Pretty cool, huh?
Hyperlinks can be added this way:
The above code looks like this: Go to Google
What's that href-thing, you ask? You see, HTML elements can have attributes. Attributes refine the element's meaning. Attributes are specified on the starting tag.
The attribute has a name (like "href") followed by a "=" and finally a value (in this case the url where the hyperlink should direct you, i.e. http://www.google.com). The attribute values can remain unquoted, but wrapping them inside single or double quotes might improve readability.
Too much information at once, huh? These are all valid and create just the same outcome:
If you are wondering why the "href" attribute is "href," not something like "url," you are not alone. See this page for information about it.
Image source: W3C Wiki
Hyperlinks can be added this way:
<a href="http://www.google.com">Go to Google</a>
The above code looks like this: Go to Google
What's that href-thing, you ask? You see, HTML elements can have attributes. Attributes refine the element's meaning. Attributes are specified on the starting tag.
The attribute has a name (like "href") followed by a "=" and finally a value (in this case the url where the hyperlink should direct you, i.e. http://www.google.com). The attribute values can remain unquoted, but wrapping them inside single or double quotes might improve readability.
Too much information at once, huh? These are all valid and create just the same outcome:
<a href=http://www.google.com>
<a href='http://www.google.com'>
<a href="http://www.google.com">
If you are wondering why the "href" attribute is "href," not something like "url," you are not alone. See this page for information about it.
Image source: W3C Wiki
9. Bring it all together
The above was just the beginning! There's still myriads of things to learn. However, you already know quite much, don't you? This tutorial is nearing its end, but be sure to check the links below for further resources.
I combined the information I taught you together and built a very simple website. Click here to see it, and press Ctrl + U on the page to see the source code (HTML code).
When you have followed the steps, try to do the same without help! The best way to learn HTML is to create, read, learn from example, and create some more.
I combined the information I taught you together and built a very simple website. Click here to see it, and press Ctrl + U on the page to see the source code (HTML code).
When you have followed the steps, try to do the same without help! The best way to learn HTML is to create, read, learn from example, and create some more.
Did you like it?
One more step to go though
This module only appears with actual data when viewed on a live lens. The favorite and lensroll options will appear on a live lens if the viewer is a member of Squidoo and logged in.
10. Take a step further
Do you want to learn more? I'm sure you do.
There's still much to learn about HTML, and you'll also want to learn CSS (it's used to make websites have layout and look great).
I can recommend two alternate ways to move along and get better at building butt-kicking websites. The first one is to get a HTML & CSS book. Now, there are many mediocre book on the subject, so you'd better choose the book wisely.
I recommend getting this one:
There's still much to learn about HTML, and you'll also want to learn CSS (it's used to make websites have layout and look great).
I can recommend two alternate ways to move along and get better at building butt-kicking websites. The first one is to get a HTML & CSS book. Now, there are many mediocre book on the subject, so you'd better choose the book wisely.
I recommend getting this one:
HTML and CSS: Design and Build Websites
Amazon Price: $15.16 (as of 06/01/2012)
You don't need any previous knowledge on HTML and CSS to get started with this book, but because you now do know some HTML, getting started will be easier!
With over 500 pages, this book teaches you lots of things. You'll learn to build real and beautiful websites.
Usually ships in 1-2 business days
The second way is to look for tutorials online. Internet is full of tutorials on HTML, CSS, web design, and other topics.
If you are any serious about studying web design and development on your own, I fully recommend getting a Tuts+ Premium subscription. You'll get access to hundreds of tutorials, in-depth video courses like "30 days to learn HTML and CSS" and "30 days to your first website design," dozens of top-selling eBooks and much, much more.
Take a look at Tuts+ Premium
If you are any serious about studying web design and development on your own, I fully recommend getting a Tuts+ Premium subscription. You'll get access to hundreds of tutorials, in-depth video courses like "30 days to learn HTML and CSS" and "30 days to your first website design," dozens of top-selling eBooks and much, much more.
Take a look at Tuts+ Premium
There's also many HTML lenses here at Squidoo. These are my own:
These are created by other lensmasters:
What do you think?
Loading poll. Please Wait...
Questions?
Guestbook
Please feel free to ask any questions, leave comments, or just say "Hi!"
Basic HTML in the comments is allowed. :-)
-
-
georgeadri69
Mar 23, 2012 @ 8:17 am | delete
- Very good lens.
-
-
-
ana_nimoss
Oct 16, 2011 @ 8:01 pm | delete
- Wow, I think I can actually write in HTML after this lesson! Thank you! Great lens. will come back!
-
-
-
Sylvestermouse
Oct 7, 2011 @ 5:18 pm | delete
- You made it look easy :) I believe this is a great place to start and not to overwhelming for the beginner.
-
-
-
A_RovingReporter
Sep 24, 2011 @ 7:16 am | delete
- Wonderful job to help the starter.
-
-
-
ajgodinho Sep 21, 2011 @ 8:52 pm | delete
- Wonderful job on this well-presented lens, with easy to understand examples, on how to create a website...well done!
-
-
-
AlleyCatLane
Sep 21, 2011 @ 4:59 pm | delete
- I am so glad to have found this lens, as I know nothing about html. This lens was exceptionally helpful. I have bookmarked it for future reference. Thanks!
-
-
-
PopCultureFan
Sep 21, 2011 @ 3:37 pm | delete
- Great tutorial! Very clear, step-by-step, detailed instructions - one of the best I've seen on this topic!
-
-
-
NorDac Sep 19, 2011 @ 4:42 pm | delete
- Good job!
-
-
-
WallpaperMan
Aug 22, 2011 @ 7:35 am | delete
- great in details!
-
-
-
WallpaperMan
Aug 22, 2011 @ 7:34 am | delete
- great in details!)
-
- Load More
About me
by dogface
I'm Matias. I'm a dog-faced lensmaster.
I like too many things: I play piano (and recorder), I like graphics design, I'm a computer nerd and an avid...
more »
- 37 featured lenses
- Winner of 25 trophies!
- Top lens » The Best Minecraft Seeds
Feeling creative?
Create a Lens!
Explore related pages
- Beginner HTML Quiz Beginner HTML Quiz
- Colors with Meanings Colors with Meanings
- Squidoo CSS: multi-column text Squidoo CSS: multi-column text
- using Basic HTML in Squidoo lenses using Basic HTML in Squidoo lenses
- How To Create An Impressive Writing Website How To Create An Impressive Writing Website
- Squidoo Lists Resources and Tools Squidoo Lists Resources and Tools
Great book about the subject
Creating a Website: The Missing Manual (English and English Edition)
Amazon Price: $16.36 (as of 06/01/2012)
Featured lenses
