Introduction: How to Hand Script a Website

Picture of How to Hand Script a Website

in this tutorial we will be going thought html scripting.

note:
some code may look like a link please just ignore it

Step 1: You Will Need:

Picture of You Will Need:

notepad++
a free web hosting account with this host

Step 2: Basics

Picture of Basics

1)set the language to HTML (language>HTML)
2)make a new folder on your desktop called website
3)save the file you made in notepad++ as index.HTML (you mus have the .HTML)
4)open the file

see pics for more info

Step 3: Basics

Picture of Basics

first lets setup the layout.
all HTML pages follow this layout:



this is where all the head information goes (eg,title)


this is where body information goes (eg,text)



dont get it?
thats good, if you did you wouldn't be reading this right now!

Step 4: Tags

Picture of Tags

all code you write will be in between these <> (except for text).
when you want to stop a command or tag use this /

exampel






this text is not bold this text is bold this text is not bold



put that into notepad++ click save then go over to your browser and press f5 on your keyboard.
look what happens!

Step 5: Tags Cheat Sheat

Picture of Tags Cheat Sheat

body tags
link
<a href="put the website to link to here (remember the http://)">put the link text here</a>
bold
<b>text to be bold</b>
italicizing
<i>text to be italicized</i>
underline
<u>text to be underlined</u>
text size
<hnumber from 1 to 5 goes here >text</hsame number as before>
image
<img src="URL to image">
new paragraph
<p>
new line
<br>
line across page
<hr>

head tags
title
<title>title text</title>
meta
a bit complex click here

Step 6: Lets Make Something

Picture of Lets Make Something

heres my example HTML page

<HTML>
<head>

</head>
<body>
<h1>this is the title of the HTML page</h1>
<p>
is this text?
<p>
<b>yes it is</b>
<hr>
do you like <a href=http://miniclip.com>miniclip</a>
<P>
<img src="http://tbn0.google.com/images?q=tbn:mFU4rThu7GZ18M:http://careerbuilder.typepad.com/photos/uncategorized/i_hate_my_job_rant_job_sucks_crap.jpg"/>
<p>

</body>
</HTML>

Step 7: Upload

Picture of Upload

you can up load your files here

Step 8: Done

Picture of Done

if you need any help leave a comment

Comments

nativman (author)2008-12-19

<body oncontextmenu="return false">

this code will entirely disable right click of the mouse in html or xhtml.

Pbyrd (author)2008-07-27

I was wondering does it cost anything to make a website?

liammk (author)Pbyrd2008-07-28

no, only if you want to get a .com name to get a free one sign up to the webhost in the tutorial

annex666 (author)2008-07-27

Just a note that the tag is NOT to invert text - it has the effect of italicizing; the image seems to give the right impression, but the text is wrong.

liammk (author)annex6662008-07-27

thanks

Noodle93 (author)2008-07-26

<head>
<title>
This is the title of the HTML page
</title>
</head>

You should actually teach them how the <img> code works.

<img src='http://website.com/image.jpeg' alt="The text which will appear if the SRC url is invalid' >

And you DON'T have to have an account with 000webhost. There are hundreds of great free hosting websites. From my experience, Geocities and Bravehost are great. Bravehost even gives you little snippets of code for things like passwords, counters and other stuff that a new (or Solely HTML) user would not be able to code.

liammk (author)Noodle932008-07-26

thanks this is only my second tutorial

Noodle93 (author)liammk2008-07-26

Trust me. Make your i'Bles as thorough as possible, it will result in less unnecessary, highly annoying questions.

CameronSS (author)2008-07-26

Why do you need Notepad++? You don't seem to be doing anything that Notepad can't handle.

Tonamel (author)CameronSS2008-07-26

You don't specifically need notepad++, but it has contextual highlighting that makes the code a LOT easier to read/understand when you're going back through to debug it. It has some other features, like autocompleting tags, that some people find useful, but the highlighting alone makes it better for writing code than Notepad.

ac1D (author)Tonamel2008-07-26

and trust me, you cant go without highlight on a 2000 line code!

About This Instructable

1,880views

10favorites

License:

More by liammk:Getting around the dreaded code 404 (page not found)learn the basics of php (works)how to hand script a website
Add instructable to: