On this website I will teach you how to program/write a website.

Programming websites is actually rather easy.......once you get a hang of it. On this website I will teach you how to program a website similar to this one. Except the website will not be on how to program but a website that states you did it.

I can already hear you asking, But I don't have something to code with. Which I would answer that you get to far a head of your self. But in all seriousness you have a program that can code HTML already. On windows its call "notepad" and on mac it is called "text edit". The way to save it as an HTML is to change the say you save it to a .html instead of a .txt. If you want to have it easy on yourself download Notepad++ Even with this you will run into many errors your first time. And remeber always save.


Basics and the Head

(Keep in mind that I will say things like "HTML". When in quotes, substitute it for <>)

How to program a website. Make a new folder on your computer and name it html project. Make another folder in that folder called 'images', make sure it is all lower case. I will go over why it needs to be lowercase later. Open what programming software you are using and save it. Then name your project '[yourname].html'. This will make the file an html file. Every single website will begin with "HTML" surrounded by brackets <> this tells the computer to start reading the code. Press enter and type "head" this is where all the code in the background go. Now press enter again and type "Title", type after this what you want your website to be called. Now here is the most important part. Once you are done with a command then you will have to type "/[command]". Fill the []with the command you just used. So in this case type "/title". This will end your title.

This is how you make a style sheet

This next part is how you get the text the way you want it. You would begin with "style". Press enter so you will get to a new line. Now this is how you make a text sheet. An example of one would be .bodycopy {font-family:"Times New Roman", verdana", "arial";color:black;font-size:14pt} This will make the font, color, and text the way you want it. You may be asking what's the point of three fonts. Which that is a good question, but the answer to this is, some browsers cant display certain fonts, so by having three the browser will have a backup in case one doesn't work. Now press enter after that. Then end the style sheet with "/style". Now you are finished with the head of your website. Type "/head" to end the head command.

The body of the program.

This is where things get difficult, to make text you have to type "p align=center class=bodycopy" The p makes the computer start a new paragraph while the class=bodycopy makes it use the style sheet you made earlier. The align=center centers the text. Now from here you can type what ever you want after this. After you are done with putting in text in this paragraph put "/p". Like before with the other commands this ends the commands. To make another paragraph after this do the same, "p align=center class=bodycopy" Then your text, then end it with "p" and so forth. Remeber to press enter after the "/p" to start a new line


You might be thinking, wow I made text, now what. Well pictures are next. Remember earlier when you made an 'images' folder? Well now you need to use it. Go onto google, and search up anything, and save a picture you like, or you can use a picture that you have on your computer. Make sure to name is '[name].jpg'. Also do not use any spaces in the name. The .jpg is extremely necessary later on. After you do this make another paragraph just like you did before but this time do "p align=center" Press enter and this time type "img scr='images/[name].jpg' border=2 alt='The picture didn't work :[' " Replace the ' with " when you are programming.

Finishing your website.

Now to finish your website. One thing to know, only you can reach this website. You might be thinking, Why would it not be on the internet and why can only I upload it? Well, you know your internet browser right? Well, internet browsers are just HTML readers that can connect to servers. They also can read HMTL files that are on your computer. All websites are hosted by a server, so if your website isn't being hosted, then it wont be on the internet. But enough of telling you no one else cant reach your website. Now its time to make a tagline. A tagline is a line at the bottom of a website telling the reader who made the website and sometimes the email. So remember the bodycopy sytle sheet at the very top of the program. Press enter after that and type this in. .tagline {font-family:"times New Roman";color:green;font-size:10pt;} This will make a new style sheet for the tag line. Also make under that a:link {color:blue} Now make one more time make a paragraph but this time make it "p class=tagline align=right" Now when on the next line we will out your email in. Created and maintained by , "a" href='[your email]' [your name],"/a" [season][year] Remember the a is in <>. Now end it with "/p". Press enter. Then type "/body" then enter again and type, "/html" This will finish your program.

Main | Lesson on Javascript

Link to EHSwebs | Back to Programming Page |

Created by and maintained by Joseph Berman, fall 2016.
updated fall 2016.