Introduction: From a Noob for Noob's: a Guide to Beginning HTML
More by the author:
About: I like to play Mirrors Edge, Dust: An Elysian Tale, Evoland and Kingdom Hearts. I also like to read a lot of fan-fiction and try write some of my own.
How fun would it be to be able to make your own website for a blog, a club, or maybe even a business? There are other reasons to make a website but how fun would it be? I'll leave that answer to you but consider the possibilities. Some people like to have others create they're personal or business website(s) but that can get incredibly expensive. So why not create one your self?
Getting started:
First off if you would like to build your own website from source code you will need a few things.
Notepad++ multi-language source code editor
-or-
Windows Notepad (NOT WORD PAD)
Some Time
A Brain
Problem solving skills
(by the way the photos can be used for a later step if you so choose).
Getting started:
First off if you would like to build your own website from source code you will need a few things.
Notepad++ multi-language source code editor
-or-
Windows Notepad (NOT WORD PAD)
Some Time
A Brain
Problem solving skills
(by the way the photos can be used for a later step if you so choose).
Step 1: Basic Formatting
After either opening notepad or downloading then opening notepad++ start off a new document like this
<!DOCTYPE html>
<html>
*TAB*<head>
*TAB* *TAB* <title>
(your webpage title goes here)
*TAB* *TAB*</title>
*TAB* </head>
*TAB* <body>
*TAB* *TAB* <h1> *or* <h2> *or* <h3> *or* <h4> *or* <h5> *or* <h6>
(your content here)
*TAB* *TAB* </h1-6>
*TAB* *TAB* <p>
your content here)
*TAB* *TAB* </p>
*TAB* </body>
</html>
What does all this mean? Well I'll explain it to you but first a crash course about Tags. A Tag is what is inside the chevrons meaning the <> marks. A Tag carries out certain functions like the <title> Tag makes the browser say what the website is called and displays it up above the URL bar and on the tab of your web browser. Any Tag with a slash mark like the </html> tag is the closer for that Tag, and the LAST Tag entered is the FIRST Tag closed. So you close Tags in the opposite order of which you opened them.
<!DOCTYPE html> means that is the type of document we're looking at a HTML formatted document
<html> Tag is the official start of the website DO NOT SKIP THIS STEP
</html> this marks the end of the website because of the slash added to the Tag
<head> is where the heading is (mostly the title) of the webpage
</head> this is the closer Tag for <head>
<title> displays the chosen website title
</title> this is the closer Tag for <title>
<body> the meat of the webpage where all the content is
</body> this is the closer Tag for <body>
<h1-6> is a way to setup headings for content on the page larger the number the smaller the heading will be
</h1-6> this is the closer Tag for <h1-6>
<p> the start of a paragraph within the webpage
</p> this is the closer Tag for <p>
That is all the basic formatting to start off the website now to add some more stuff.
<!DOCTYPE html>
<html>
*TAB*<head>
*TAB* *TAB* <title>
(your webpage title goes here)
*TAB* *TAB*</title>
*TAB* </head>
*TAB* <body>
*TAB* *TAB* <h1> *or* <h2> *or* <h3> *or* <h4> *or* <h5> *or* <h6>
(your content here)
*TAB* *TAB* </h1-6>
*TAB* *TAB* <p>
your content here)
*TAB* *TAB* </p>
*TAB* </body>
</html>
What does all this mean? Well I'll explain it to you but first a crash course about Tags. A Tag is what is inside the chevrons meaning the <> marks. A Tag carries out certain functions like the <title> Tag makes the browser say what the website is called and displays it up above the URL bar and on the tab of your web browser. Any Tag with a slash mark like the </html> tag is the closer for that Tag, and the LAST Tag entered is the FIRST Tag closed. So you close Tags in the opposite order of which you opened them.
<!DOCTYPE html> means that is the type of document we're looking at a HTML formatted document
<html> Tag is the official start of the website DO NOT SKIP THIS STEP
</html> this marks the end of the website because of the slash added to the Tag
<head> is where the heading is (mostly the title) of the webpage
</head> this is the closer Tag for <head>
<title> displays the chosen website title
</title> this is the closer Tag for <title>
<body> the meat of the webpage where all the content is
</body> this is the closer Tag for <body>
<h1-6> is a way to setup headings for content on the page larger the number the smaller the heading will be
</h1-6> this is the closer Tag for <h1-6>
<p> the start of a paragraph within the webpage
</p> this is the closer Tag for <p>
That is all the basic formatting to start off the website now to add some more stuff.
Step 2: Colors, and Background Colors
Lets start with the template you made last time then go inside this Tag:
<h1-6>
Then make it look like this
<h1-6 style="color:gold">
(your content here)
</h1-6>
You can then change the background color of the text like so:
<h1-6 style "background-color:brown">
(your content here)
</h1-6>
Run the webpage through your web browser by doing the following:
Save the file as yourchoice.html
Double click on the file
This should bring it up with your web broswer
To edit later do this:
Right click on the file
Go to the Open With drop down menu
Then select notepad++ or just plain notepad from the dialog box
What changed?
The color of the text changed should change when you open the program with your internet browser
Next up In-line Style Editing
<h1-6>
Then make it look like this
<h1-6 style="color:gold">
(your content here)
</h1-6>
You can then change the background color of the text like so:
<h1-6 style "background-color:brown">
(your content here)
</h1-6>
Run the webpage through your web browser by doing the following:
Save the file as yourchoice.html
Double click on the file
This should bring it up with your web broswer
To edit later do this:
Right click on the file
Go to the Open With drop down menu
Then select notepad++ or just plain notepad from the dialog box
What changed?
The color of the text changed should change when you open the program with your internet browser
Next up In-line Style Editing
Step 3: In-line Style Editing
If you wanted to change what text is used on your website you would use Style Editing, like so...
<p style="font-family:Impact">
This changes the font of the text to Impact.
Note this is case sensitive for the name of the font you want to use; verdana is not the same as Verdana.
<p style="font-size:16px">
The px is required for this Style Editing to work.
<p style="color:red>
This changes the text color to red.
However you still end the Tag the same as you would before Style Editing.
Next step Hyperlinks!
<p style="font-family:Impact">
This changes the font of the text to Impact.
Note this is case sensitive for the name of the font you want to use; verdana is not the same as Verdana.
<p style="font-size:16px">
The px is required for this Style Editing to work.
<p style="color:red>
This changes the text color to red.
However you still end the Tag the same as you would before Style Editing.
Next step Hyperlinks!
Step 4: Hyperlinks
To add a Hyperlink to your website add the following code between the <body> and </body> Tags:
<a href="http://www.stateyourhyperlink.com/">
your hyperlink description or name
</a>
Here is my example:
<a href="http://www.gamedev.net/">
GameDEV.net website
</a>
That's all you will need for a hyperlink. That wasn't too bad was it? Now onward to the last step of this guide! FOR NARNIA!!!!!!!!!!
<a href="http://www.stateyourhyperlink.com/">
your hyperlink description or name
</a>
Here is my example:
<a href="http://www.gamedev.net/">
GameDEV.net website
</a>
That's all you will need for a hyperlink. That wasn't too bad was it? Now onward to the last step of this guide! FOR NARNIA!!!!!!!!!!
Step 5: Images and YouTube Videos
Now lets add some pretty pictures to the page shall we?
Add this line (you can copy and paste it too because I won't know the difference) between the <body> and </body> Tags.
<img src="http://thenullset.files.wordpress.com/2008/12/soul_eater06_1920.jpg" alt="soul eater wallpaper" width=400 height=249>
This should give you a wallpaper from my favorite anime (second to Bleach) called Soul Eater.
Note:That you can use the image URL or the images directory /location it might look like this:
/root/Pictures/soul eater wallpaper.jpeg
(^^^Since I'm in Linux this is what I get^^^)
However this may look different if you use windows or mac.
And that's that on images almost done with the guide for essentials in HTML all that's left is adding YouTube videos
To add a YouTube Video add this code between the <body> and </body> Tags
<iframe width=640 height=360 src="//www.youtube.com/embed/video id here" frameboarder="0" allowfullscreen>
</iframe>
The video id is generally any thing after the www.youtube.com/watch?v= part of the URL.
Here is an example with a video I found
<iframe width="640" height="360" src="http://www.youtube.com/embed/rw-m6f44fK8 frameboarder="0" allowfullscreen>
</iframe>
Add this line (you can copy and paste it too because I won't know the difference) between the <body> and </body> Tags.
<img src="http://thenullset.files.wordpress.com/2008/12/soul_eater06_1920.jpg" alt="soul eater wallpaper" width=400 height=249>
This should give you a wallpaper from my favorite anime (second to Bleach) called Soul Eater.
Note:That you can use the image URL or the images directory /location it might look like this:
/root/Pictures/soul eater wallpaper.jpeg
(^^^Since I'm in Linux this is what I get^^^)
However this may look different if you use windows or mac.
And that's that on images almost done with the guide for essentials in HTML all that's left is adding YouTube videos
To add a YouTube Video add this code between the <body> and </body> Tags
<iframe width=640 height=360 src="//www.youtube.com/embed/video id here" frameboarder="0" allowfullscreen>
</iframe>
The video id is generally any thing after the www.youtube.com/watch?v= part of the URL.
Here is an example with a video I found
<iframe width="640" height="360" src="http://www.youtube.com/embed/rw-m6f44fK8 frameboarder="0" allowfullscreen>
</iframe>
Step 6: Outro
So that entire guide took me about 3 hours of typing and checking code so please enjoy it while i go eat a late lunch (right now it's about 1:30pm where I live. Shout out to Michigan!!!). But please do enjoy, and if there is anything you need help with leave a comment and I will see what I can do for you.
On this step are some screenshots of what I've been working as its been developed. 10-2-13 a new screenshot was taken of my iPod and was posted here. Plus the wallpaper from earlier if anyone wants it.
@_'-'
On this step are some screenshots of what I've been working as its been developed. 10-2-13 a new screenshot was taken of my iPod and was posted here. Plus the wallpaper from earlier if anyone wants it.
@_'-'