[tutorial] creating a web page from scratch

void · **Posted:** Tue May 27, 2003 6:15 pm

Intro To HTML by VOID
This tutorial is aimed at teaching users how to make sites from scratch. NO! Using FP or Dreamweaver or any other web developer software does not count as scratch. Scratch is making from a notepad....this is actually very tiresome and pointless but it is easier, and if you start (like i did) with notepad, then when it comes time to edit your webpages, you wont be stumped. And it will be easier to make simple additions like background music with a simple notepad thingy than to wait for FP to load. BTW FP= Front Page.So heres the basics.

The best tip to making a successful webpage that works is something that i taught myself the hard way. CLOSE ALL TAGS THAT YOU OPEN IMMEDIATELY!! This will cutdown on stupid flaws and debugging time.

All HTML files open the same way...with am "<html>" tag, press enter twice and close the tag (all tags must be close except for <P> tags, we will learn about those later on). To close a tag, you just repeat the tag with a back slash in front "</html>".

under the htlm open tag, put the "<head>" tag, and within this you usually declare most scripts and the title of the page. also you place a description and meta search engine key words in there (again, i've never found the use of this if your a beginer just testing your page) I wont be getting into scripts because i only have a VERY basic knowledge of Java, which is the language most often used with web pages. the title tag is used to define the title of the page (that thing in the blue bar on top) "<title> MY FIRST PAGE </title>". After that close the head tag.

its time for the body. the body is where all the action happens, all the music, images, links, text, and much more go here. the body tag looks like...yup you guessed it: "<body>". Now, there are many tags that you can learn about that will be placed here, and im not going to go over all of them so if you see some that i missed, feel free to add. The first is the most basic tag.

its the <P> tag, its tells the computer that there is text that follows and that the text should be displayed, and it displays everything until the next tag. This is the ONLY tag that you will never close. to create a new paragraph just type in <P> again, at the start of your second paragraph. Inside this, you can define the alignemtn with "<P align="left">" now...left can be replaced with right or centered depending on the effect desired. while we're on the topic of text we might as well cover some other text definers. "<small>" makes small text, and "<strong>" makes bold text".

<font> is used to declare the font "<FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">TEXT</FONT>" now, you dont have to have all of the attributes, just all that you wish to modify. As you can tell face is the "font" as we know it, i suggest sticking to the basics (comic, arial, times new, and courier) coz sometimes somepeople dont have the fonts that you might. Size (i beleive) goes to a maximum of +7 or +5, experiment and find out. color is a hexadecimal value for the RBG (red blue green) values. there are alot of names of colors that IE recognizes, but you can find that out on your own, there are too many to list. "#000000" is black and "#FFFFFF" is white (FF is the max in hexadecimal.)

also some predefined "header" tags are "<h1>","<h2>" and so on all the way to "<h6>".

Now, lets leave this font world and enter the "breaks". "<BR>" inserts a line break so that if your sentence is "hello <br> bye", hello and bye would be on subsequent lines.

<HR WIDTH="25%" COLOR="#6699FF" SIZE="6">, this code is used to insert a horizontal rule accrose the page however big you define. again, not all teh attributes must be edited, just all that you wish to edit. width is the width of the page you wish it to cover (defined by percentage) and size is the thickness of the line.

"<a href="URL"> text </a>" this code creates a link that will be used by the internet to anchor your page to others. this is all for now..i will be posting a tutorial on FORMS, these are very handy and cover a very broad subject matter, so i beleive they deserve their own section. I hope this helped. Any more help needed?? Feel free to post for help or contact me on t_dot_krew@msn.com if im online

nate · **Posted:** Tue May 27, 2003 6:17 pm

WOW

nice job but can u put maybe a paragraph in beteween the 500 words of text.

Shocked

void · **Posted:** Tue May 27, 2003 6:20 pm

for all you lazy ppz..pure code

code:

<html>
<head>
<title> My Page </title>
</head>
<body>
<h1> My First Page (H1) </h1>
<h2> h2 </h2>
<h3> h3 </h3>
<h4> h4 </h4>
<h5> h5 </h5>
<h6> h6 </h6>
<P align="left">
Welcome to my first ever page!! This page is pretty crappy because its just made to <strong> explain </strong> that <small> html </small> is very <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000"> easy</FONT> to use. in order to use this code. just copy it and paste it into a text file and save as <a href="index.html"> index.html </a> okay <br> got that<HR WIDTH="25%" COLOR="#6699FF" SIZE="6"> good!!..this should give you and idea of how all of this code works. NOTICE THAT I DONT NEED TO CLOSE THE "<P>" TAG
</body>
</html>

JSBN · **Posted:** Tue May 27, 2003 6:24 pm

u might want to fix this up a bit, make it nicer, b4 i give it a crap rank.
(Here's an idea PUT SPACES AND PARAGRAPHS)
Ok, thats better.
hmmm..... as i skim i notice a couple of things, it can be confusing at times, you should but in how to do bgcolor, and i didn;t notice a warning about US spelling.

Homer_simpson · **Posted:** Tue May 27, 2003 6:26 pm

who da fuck cares about paragraphs this aint english it's computer science... and it clearly expresses the ideas... if a person really needs to learn he'll read what he wrote... =Ãž

void · **Posted:** Tue May 27, 2003 6:28 pm

im sorry...i did the tut on notepad and when i pasted it i didnt notice that it messed up...i fixed it up

void · **Posted:** Tue May 27, 2003 6:30 pm

u know what JSBN...dont like my tutorial...see this finger **sticks up middle finger** thats how much i care...people who need it will get the jist, if i was gonna teach a class i would get payed for it, im not!!...so add in suggestions if you want. dont critisize my work...okay...because i clearly remember saying.. I DIDNT DISCUSS ALL OF THE TAGS...IF YOU KNOW WHAT I MISSED...ADD IT...
THIS SITE HAS ALOT OF TAGS AND SAMPLES IF YOU NEED MORE HELP(it also covers forms

JSBN · **Posted:** Tue May 27, 2003 6:43 pm

Easy there, i was just saying things that you might want to get the DR +50 award. There is no need to get mad. This is Constructive crit... crtia... critisizimnism.. ugh forget it, any ways, my point is that i am only trying to help u get bits Smile

Asok · **Posted:** Tue May 27, 2003 6:53 pm

JSBN, you're not the sole mod here so please watch yourself. People are encouraged to contribute, don't discourage them.

Anyways void, I think this covers a lot of things. Hell I think it pretty much sums up the HTML unit in that horrible Computer Business class at my school (learn how to use word, excell, access, etc.)

Anyways very nice addition +10 Bits.

JSBN · **Posted:** Tue May 27, 2003 6:56 pm

Hmm.... Taking in waht Asok said, i relize that i was a little harsh... srry bout that Crying or Very sad

I Relize my mistake, please accept my appology, as this tutorial was pretty well done.
---------------------------------------------------
You have been Awarded: The DR +50 Award
+10 for any future Tutorials
---------------------------------------------------

void · **Posted:** Tue May 27, 2003 7:48 pm

wow, thanks man, and by the way..i didnt take it seriously...i was just jokin around too...but yea..thanks for the bits...i am honoured...and i will try to get dat "forms" tutorial up A.S.A.P...but in the mean time...back to turing

JSBN · **Posted:** Tue May 27, 2003 8:12 pm

Well as long as u arent mad at me and i am not mad at you then everything is "honky-dory".....(one of those phrases my 'folks' still use Laughing

)

void · **Posted:** Tue May 27, 2003 8:19 pm

well...i kno this chick whos mom says "tough titty"....aparently its like tough luck...but more like "nipple hard-on"...lolz..wow...this has gone sooo of topic

JSBN · **Posted:** Tue May 27, 2003 8:34 pm

Now lets steer this vessel to... oh i don't know.... how bout friut or something. I like some fruit, but not too many kinds, really only strawberries, although apples are good too, but the problem with apples is their skin. Of course i make a wicked apple pie, may be i'll give ya the recipe some time. What's Your fav. pie?

void · **Posted:** Tue May 27, 2003 8:52 pm

lemon meringue....mmmmmmmmmmmmmm....oh soooo goood.....i make a pretty mean apple pie to...my favourite fruit has gotta be lychee

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members