Website Fundamentals

Website Fundamentals

Introduction

This document asks and answers a few fundamental questions about the web in general and websites in particular.

Questions such as:

  • What is the internet?
  • What is the Web?
  • What is a website?
  • What is inside a website?
  • What makes website tick?
  • How do you go about building a website?

I wrote this with myself as the intended audience. I have always found that the best way to learn something is to try to teach it to someone else, in this case, that someone else is me.  This is the document is the document I wished I could have read when I first contemplated building my own website. This is a note to my forgetful future self to explain what my earlier self discovered about the fundamentals of websites and how you go about building one.

Let’s deal with the first two questions right up front; what is the internet and what is the web?

According to Douglas Adams in his radio play/book/movie ‘The Hitchhiker’s Guide to the Galaxy’, “Space is big. You just won’t believe how vastly, hugely, mind- bogglingly big it is. I mean, you may think it’s a long way down the road to the chemist’s, but that’s just peanuts to space”.

The internet is also big, not quite as vastly, hugely, mind- bogglingly big as space perhaps but still much vaster and far more daunting than a trip down the road to the chemist’s. The Internet is a global communication network that allows almost all the computers on the planet to connect and exchange information. Ian Peter’s definition is “worldwide system of interconnected networks and computers”.

The World Wide Web on the other hand, is an information space residing on the physical internet. A space where electronic documents and other digital media can be accessed and shared. The internet is the physical hardware; the wires, the fibre optics and the boxes of electronics that connect them together. The Web is essentially software that uses the internet hardware network. Email is also software that uses the internet. Email was in fact one of the earliest applications to use the internet and was largely responsible for the internet’s coming into being.

The World Wide Web was invented by English scientist Tim Berners-Lee in 1989,  he went on to invent Hypertext Markup Language (HTML) in 1991. The World Wide Web of today is based on several different technologies that make it possible for users to locate and share information through the Internet. These technologies include Web browsers, more advanced versions of Berners-Lee’s original HTML as well as later additions such as CSS, Javascript, HTTP, XHTML etc. Since you are reading this, you are probably connected to the World Wide Web right now and therefore you can find out more on internet history here: http://www.nethistory.info/index.html

When I ask the question; how do you go about building a website?

I mean how do you build a website from scratch with nothing but a text editor, a lively curiosity and plenty of spare time.

Where the hell do you start?

 Sister Maria recommended “Let’s start at the very beginning, a very good place to start, when you read you begin with A-B-C, when you sing you begin with do-re-mi.” When you want to build a website, you start with H-T-M-L.

HTML

HTML was the first language of the internet and is still the universal language for building web pages, it is an acronym for (H)yper (T)ext (M)arkUp (L)anguage.

There are other languages including css, javascript and php but html remains the heart and soul of the internet.

The simplest possible website could be as simple as a single text file of HTML code such as the following example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Paste the above text (starting with <!DOCTYPE html> and ending with </html>) into a simple text editor, such as windows notepad, and save the file as say: “myfirstwebpage.htm”.

We could have saved the file as “myfirstwebpage.txt”, after all we created the file in a text editor and it is still a simple text file despite its .htm extension. In giving the file a .htm extension we have let the computer know that this text file is special; this text file is a web page.

Double clicking on “myfirstwebpage.htm” in your file explorer will cause the file to be opened in your default browser.

Try it now: Your web browser should start (or open a new tab) and display your simple web page. Your page should contain two lines of text and look something like this:

This is a Heading

This is a paragraph.

These two lines might not look like much but they comprise a complete working web page because that is what a web page is; a text file of valid HTML and saved with a .htm or .html extension.  There is no difference between .htm and .html extensions they both indicate that the the file is a text file containing HTML  stuff.

Had we saved the file as “index.html”, we would have not merely a working web page but a complete working website.  The name index.html  is the most common name given to page used as  a website’s default page. When a visitor requests the website and no other page is specified, the web browser displays the first default page it finds.

We are now ready to answer the question: What is a website?

What is a Website?

Wikipedia defines a Website as “a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server”.

As a practical matter, a Website consists of “one or more files residing inside one or more directories on a web server”.

Just as your own computer has a file system comprising a hierarchy of directories and files, a web server contains a hierarchy of directories and files for each website hosted by the server. The files include HTML pages, images and various scripts such as CSS, php etc.

Building a Website with HTML

Housekeeping

You will be generating many html files as your web skills develop and likely other kinds of files as well. You could put all those files into one folder such as “MyWebPages” or even just drop them all on the desktop (please don’t do that) but sooner or later this seemingly simple everything in one place approach will become a nightmare and you will need to organize your files into some sort of hierarchical structure. I urge you to do that right now.

I like to use a very simple structure consisting of a top folder with several sub-folders. Note that I use the terms folder and directory interchangeably.

“MyWebPages” is a reasonable name for the top folder but you can call it anything you like.

A sub folder such as:      “MyWebPages/HTML” will be needed immediately since the first files we create will be HTML files.

A second folder such as: “MyWebPages/Images” will also be handy when we learn how images are handled by HTML files.

Other sub folders will be added as other kinds of files are required

Other Information Sources

The Web is full of sites dealing with HTML and other Web technologies: here are two must see sites.

https://www.w3schools.com

https://www.w3.org/

W3Schools is a web developers site, with tutorials and references on web development languages such as HTML & CSS, JavaScript, PHP, SQL, and Bootstrap which collectively cover most aspects of web programming. The site derives its name from the World Wide Web (W3), but is not affiliated with W3C itself.

W3Schools features an online editor called “Try It Yourself” where you can edit examples and execute computer code experimentally.

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe. The W3C’s stated mission is to lead the Web to its full potential.

ThoughtCo maintains a very good selection of science based pages dealing with all kinds of technical stuff including web design. Well worth a look.

This NetHistory website contains some great information on the history of the internet. It is particularly good on debunking common misconceptions about who invented the internet/web etc.

What HTML Editor?

Since HTML is a plain text file, the best editor to use is probably the text editor native to your operating system. Web pages can be created and modified by using professional HTML editors but for learning HTML you should use a simple text editor such as Notepad (PC), TextEdit (Mac), Vim (Linux).

Using a simple text editor is the best way to learn HTML, the choice of editor is entirely a matter of personal preference.

Eric Pickstone