How to make a HTML website! (tutorial, with many pics!)

king1 · Before February 2015

Hello guys!
Im bored, so i will tell you how to make a HTML website, using Notepad++

I will use pictures and explain step by step.

1. Download Notepad++ at: http://notepad-plus-plus.org/download/v6.1.8.html

2. Open Notepad++

3. Read this:

The first thing that you must do is make the "begin" of all, where all the info is.
You will do that like this:

<html> <html> <head> </head> <body> </body> </html>

Then, save the file as: index.html (IMPORTANT!!!)

Ps.... I have a Swedish PC, so sorry for that...

If you have click on "save" (on my swedish PC "spara") and if all goes well you get:

So, now i will tell you WHY you must write that code.

First, the "HTML" stands for: HyperText Markup Language.
You always begin AND end on a website with "HTML"
All the information in a website is between HTML and /HTML

Second, the "HEAD"
The "HEAD" is the "start" of the website. There you can put the Title and the Style (like color of text, size, background ect.)

Third: the "BODY"
The "BODY" is where you put all you text, what you will have on you website, all the information ect.
You can see that you code also have:

</head> </body> </html>

The "/" means 'Here it end' so with all the codes you will use in your HTML, you ALWAYS must use "/{code}"
Because HTML is the begin, you will end with /HTML

So, now we will begin to build up your website.

4. Title.
You always must have a title on your website.

Here is the code for the title:

<title>TEST WEBSITE!</title>

I have chose the title "TEST WEBSITE", but you can what you want.

You put the "title code" between "head" and "/head"

So, now you have this:

5. Now we go to the "Style"
A style is a code that control the size, color, background ect.
To have that, put this code under your title code:

<style type="text/css">      #head { 		font-size: 55px; 		height: 100px; 		width:500px;  		margin:0 auto; 		}  </style>

IMPORTANT! You must use "<style type="text/css">" or the code wont work...

#head {
                  font-size: 55px;
                  height: 100px;
                  width:500px;
                  margin:0 auto;
               }

This code -----^ is the "Style" of a text.
You can add more styles if you want to have other styles than 1 in your website. (ps. you can have how many codes you want...)
Example for a other code:

#orange {            Color:#E3701A;            font-size: 20px; 	}

So.. Now, if you have follow all my steps, you will have:

Ps. i have not use this code, because i dont want it now in my tutorial

#orange {
               Color:#E3701A;
               font-size: 20px;
   }

Sorry guys, i have to go for today, but i will continue on the tutorial tomorrow

ILoveBacon · Before February 2015

Nice tutorial so far I guess.

Saintcool · Before February 2015

Don't you learn this in like year 7 IT?

Ratburntro44 · Before February 2015

You should tab more consistently... also, title and style both go under head, not straight under html. Only head and body should be under html.

And, you should have a doctype there even if you're not going to explain it because you want people to follow good practice from the start.

king1 · Before February 2015

Okey! But, my brother have learn my the mostly of all this, so its a little bit hard for me to explain. But i will do my best

N1KF · Before February 2015

Saintcool wrote:

Don't you learn this in like year 7 IT?

What? 7 years old learn how to make an HTML website?

king1 · Before February 2015

Number(1)KirbyFan10 wrote:
Saintcool wrote:
Don't you learn this in like year 7 IT?
What? 7 years old learn how to make a HTML website?

Uuhm... Saintcool, I dont understand your question....???

ILoveBacon · Before February 2015

You're not from Britain then you wont understand the question. In America you have "grades" (and in other places different systems that I am unaware of). But in Britain you get "years". You start at Year 1 and when you get back every summer holiday it goes up 1. Year 7 is for kids about 11-12.

king1 · Before February 2015

Patience is Key wrote:
You're not from Britain then you wont understand the question. In America you have "grades" (and in other places different systems that I am unaware of). But in Britain you get "years". You start at Year 1 and when you get back every summer holiday it goes up 1. Year 7 is for kids about 11-12.

Aaah! Thanks! +Rep for you!
In sweden is year 7 (11-12 years old) grade 6.
But Number(1)KirbyFan10: Im in Year 7, (grade 6) and I can make a HTML website... My brother is a website maker (he is 21 years old) [Here are some websites he have make is you want to see them: http://onlinepynt.se http://www.playzonline.se ] So he have learn me
/king1

32OrtonEdge32dh · Before February 2015

Saintcool wrote:

Don't you learn this in like year 7 IT?

Most schools don't have that class.

I'll be subscribing to this topic, I'm interested as my father is a web developer for 720 Strategies.

KanibalFrost · Before February 2015

I'm studying HTML coding in notetap in my 2nd. year of Media secondary school.

xGBx-PwNzZ · Before February 2015

Number(1)KirbyFan10 wrote:

Saintcool wrote:
Don't you learn this in like year 7 IT?
What? 7 years old learn how to make an HTML website?

Year 7 = 12 year olds

Its like grades but in english they say year

skullz17 · Before February 2015

Saintcool wrote:

Don't you learn this in like year 7 IT?

We haven't done anything like this in ICT yet...all we've done is simple powerpoints and stuff. But still I did this when I was very young because I got interested after seeing how easy it was, and googled it.

272 · Before February 2015

html? i moved on...

HTML - super easy
Javascript - medium
C# - medium
CSS - hard
PHP - hard

thats my rating on all the languages i know...

also notepad++?
can i just use visual studios 2010 professional instead? :P
(i said the whole name right! )

Last edited by 272 (Nov 22 2012 5:44:36 pm)

EE_Scythe · Before February 2015

Pretty neat guide
If anyone's interested at all, I've got a webpage here that I've been working on recently for some practice with HTML and CSS and I'd love some thoughts on it. http://syntechx.com/forums/Layout/index.html

Layout is 100% by me as well as the images; excluding the ones in the slider. I'm not too advanced in js/jQuery so the slider's software I'm using is Nivo Slider. Don't even think I'm halfway done with this page yet, I'm just lazy and poke at it every once in awhile.

Official Everybody Edits Forums

#1 Before February 2015

How to make a HTML website! (tutorial, with many pics!)

#2 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#3 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#4 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#5 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#6 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#7 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#8 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#9 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#10 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#11 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#12 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#13 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#14 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

#15 Before February 2015

Re: How to make a HTML website! (tutorial, with many pics!)

Board footer