How to make a website lesson 1
Summary: Article 1 in a series of many on how to make a website. This series of articles is a basic primer on how to make a website from a computer programmer’s perspective using software development techniques.
Goals:
1. What is a website and how do people access the website?
2. What do the terms Client and Server mean with respect to computer technology?
3. Where does a website live on a computer?
4. How is a website organized?
5. What is a web browser and what is HTML?
6. My first web page.
Ok this is my first lesson ever so if things are not right or seem confusing then just let me know and Ill try to clean up my act and make it read right for you.
So we have a simple list of goals and they might appear to be too simple but its important to be detail oriented when approaching software development because this practice will return some big favors to you later in your development.
First Advice:
Get used to reading and mental grasping even if you don’t understand the true meaning of the sentence. By simply reading each word you begin to get better and you’ll eventually pick up what is going on. Its not rocket science its only software.
Lets begin…
Goal 1: What is a website and how do people access the website?
A website is the new information medium of the day and is part of a new era! Why is this so special? Because in the old days people would have to wait for a newspaper, a television show, or radio show to reveal to them information of the day. People would go to large public libraries to read books on what ever interests them. Now people have a new place to access large amount of information and entertainment. The internet has forever changed human behavior on earth. This has all come about because computers can now communicate to each other.
Well all know how to use a telephone. Pick up the phone, enter the phone number and speak! Well computers do the same thing only they offer a rich experience and much more information. Computers communicate with one another using a number just like a telephone number but the communications between computers can carry more information and allow the user a better experience using the device. Think phone, television, and now computer internet!
Ok so a website is set of documents that organize information. This information can be plain text or rich interactive screens and even videos.
Basically a website contains documents called web pages that are organized to provide a meaningful experience to the person viewing the pages. People use a computer to access the pages on a website that is connected to general network called the Internet. So if you are using your computer to access a website then your computer has to have a connection to the internet. The computer has a software program called a Web Browser that knows how to connect to the internet and request a website page. When you open your Web Browser and type in a web site address such as
http://www.yahoo.com/ your computer will know how to communicate with the computer that holds the pages to the website
http://www.yahoo.com/. Basically your computer makes a phone call to another computer and once they connect they can then begin to communicate between each other.
Goal2: What do the terms Client and Server mean with respect to computer technology?
When you type in the address of a web site such as
http://www.yahoo.com/ your computer is acting as a client that requests a document hosted on another computer. The computer that holds that page is called a Server because it serves that page back to your computer. The Client requests a page from the Server that keeps that page ready for people to view.
Goal 3: Where does a website live on a computer?
Websites consist of a bunch of documents that hold information. Usually websites are organized in way that makes sense for the person using the documents. So imagine creating four pages of text about the subject of fishing. You probably want to start with an introduction page to let readers know what they are getting when they view the first page of your documents. Then you’ll have more content about fishing in the other documents. Each document should hold different information regarding different topics for fishing.
Computers have two basic organizational structures: a file and a directory (as known as a folder). So to keep things simple we organize our information about fishing in files and folders.
Now we all have used many types of computer documents including photo files, videos, text files, and many other types. For our discussion we will discuss files and folders that make up websites.
So a website is made up from text files that live in folders (directories) on the computer.
A website could look like this:
The computer’s C:\My Website\page_one.html
We will discuss the .html file type later.
Goal 4: How is a website organized?
Websites are organized in a directory structure that makes sense.
A website that is about the subject fishing might look like this:
C:\Web Sites\fishing\page one.html
C:\Web Sites\fishing\fishing rods\page_two.html
C:\Web Sites\fishing\fishing reels\page_three.html
C:\Web Sites\fishing\fishing lures\page_four.html
Following the directory structure above we can see that there are three directories that hold web page files about fishing.
I added the Web Sites folder for simple organization. One rule in building web sites is to be organized. Note that the C:\ is your computer’s C: drive.
Goal 5: What is a web browser and what is HTML?
Before we begin to make our website we should discuss a few things.
A Web Browser is simply a software application that lives on your computer that allows you to view a web page. In reality a Web Browser is not simple. It really is a piece of software that does quite a lot of work for you.
Today there are many types of Web Browsers such as FireFox and Internet Explorer.
We will only focus on these two browsers but to let you know there are more browser software applications that exist.
Generally a web browser allows you to view your web pages. The browser opens the page and knows how to display the page. When you think about pages and documents you can think about using the computer to view information in some organized fashion.
If you create a Word document using Microsoft Word, that document is organized so that is can be opened by software that knows how to organize the contents of that document.
HTML is a document format. This means that you can organize web page documents using HTML and a web browser knows to display that document.
HTML is also a computer programming language. Basically it is a way of organizing a page of content so that is displays correctly in a web browser.
When a Web Browser opens a document that is written in HTML then the browser knows how to arrange the content and elements in the document so that when you view the document it makes sense and it is organized for a human to read.
Goal 6: My First Web Page!
Lets organize our work into a nice little folder on the c: drive. If you don’t know where that is or what that is I’ll explain. Basically a computer stores its files on a hard drive. This is called Read Only Memory or ROM. There is an other type of computer memory called Random Access Memory also know as RAM.
When you make a file and save it on your computer it is saved on the hard drive. If you open that file to view it then the computer loads that file into RAM so that you can make edits to the file and choose to save or discard your changes. Why do they call it C: drive? Long story short it’s a historical practice because A and B were already being used for other purposes. The computer needs to organize the ROM drives and using letters seems like a good fit.
Ok back to C:\. If you open a Windows Explorer window (Right click on Start and choose Explore). You will see a tree list of folders in the left side. Click My Computer and then click c:. Make a new folder called Learning like this: c\Learning. Make one more folder called Lesson 1 like this c:\Learning\lesson_one\.
Now lets make the following page and run it.
My First Web Page!
Step 1: Open Notepad. (Start > All Programs > Accessories >Notepad)
Step 2: Copy and paste the above code and save as PageOne.html in the folder c:\Learning\lesson_one\
Step 3: Browse to the new file. Right click and find the option ‘Open With’ then choose Internet Explorer. Or simply double click on the file and it should load up in Internet Explorer.
Congratulations you’ve just built your first web page by hand.
Its that easy! Ok now lets try something just to learn another technique.
In internet Explorer go to the top menu and choose View > Source. This action reveals to you the HTML language used to build the page. This becomes very helpful when you want to trouble shoot your code or learn about someone else’s on other websites.
Ok here is some additional material in case you feel like learning ahead.
http://www.w3schools.com/html/default.aspThis website is packed with all kinds of lessons and great learn examples. Click around and try to learn some of their lessons.
Next lesson we will build some tables to arrange the page with some content and then give it some colors. We will also learn about the most basic HTML tags.
Like I said...simple!
"Everything should be made as simple as possible, but not simpler."
Albert Einstein
