Howdy! For the past few weeks, you've been exploring what computer science can do, and experimenting with a variety of different concepts. Now, we're going to do something a bit different: We're going to create our own personal website from scratch. Don't worry! It's not as scary as it sounds. In fact, it doesn't really sound that scary... a personal website actually sounds pretty friendly. Maybe if we put something frightening on it... okay, let's not get ahead of ourselves. Onwards!
Before you begin, you'll need a GitHub and Cloud9 account, which you likely set up in your first week. If you don't have these accounts set up yet, then follow this tutorial on how to set them up.
In the past few weeks, we created folders for our different experiments, so that we could keep them nicely contained. However, for this workshop, we're going to create a file in the main folder of the workspace, otherwise known as the "root folder." This is because we want our personal website to be immediately shown when we just type in our GitHub Pages domain. To make this happen, we have to name the file a special name: index.html. Go ahead and create that file now.
(screenshot of workspace structure with index.html file)
Why index.html? Well, let's break it up:
index- This is a special name used by a majority of web servers to tell the server that this file should be shown without specifying a file name in the website's URL..html- This the file extension used for the programming language called HTML, or HyperText Markup Language. We've seen some HTML before in some of our experiments, but now we'll be doing a deeper dive on how it works, and how to write it from scratch.
So far, so good, right? We only really did one thing: Create a file. So, let's get right into doing some programming.
We can jump right in to start with. Add this code to your index.html file, and save your file:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>That's right: this is HTML! Let's go through this line-by-line:
<!doctype html>- Because HTML has existed for a long time in web browsers, there have been many iterations of the language, and its specification. It's similar to how the English taught and spoken now is very different than how English was taught and spoken during Shakespearean times. There's one difference though: HTML has evolved over the span of tens of years, instead of hundreds! Because computers require precision, it needs to be told what iteration, or version, of HTML we are writing. In the past, the version used to be very complicated to write and memorize, but now we can use this simple line to tell the browser we are writing the latest version of HTML, sometimes referred to as HTML5.<html>- This is an example of what's known as a tag. A tag starts with a less-than sign (<), has a keyword to describe the tag we are using, some optional properties, which we'll get to later, and then a greater-than sign (>). Programming languages generally use different symbols, like brackets and punctuation marks, to denote something technical. This is also known as syntax. In HTML, everything is stored inside of a tag. This first tag, thehtmltag, is generally used by HTML files to denote where the file starts. You'll also notice that unlike our first line, there is no exclamation mark after the first symbol. This is because the exclamation mark used in<!doctype html>is used to denote that we're defining the version of HTML.<head>- Again, this is another tag, called theheadtag. Anything within this tag is not directly shown on the web page, but is instead used as metadata, or data that helps the web browser understand the document better. It can be used to define things like the website's title, or to link to other resources. We'll come back to this soon.</head>- In many programming languages, you need to tell the computer where an instruction ends. With HTML, we do this in a very simple way: we add a "closing tag." In general, this is done by writing out the keyword of the tag we first created, but then adding a forward-slash (/) at the start of the keyword. This tells the web browser that we are done writing anything for theheadsection of this document. Some tags use a different convention to close themselves, but we'll go over that later.<body>- Another tag! We can also call these regular tag calls "opening tags", as they start the instruction we're giving the computer. Unlike theheadtag, anything within thebodytag is shown on the web page by the browser. This might be paragraphs, lists, links, images, or something else. As we continue with this workshop, we'll be adding more tags into thisbodytag.</body>- This is the closing tag for thebodytag we created. As we did with theheadtag, we create this closing tag by writing out the same keyword, but with a forward-slash at the start of the keyword.</html>- This is the final closing tag, which tells the browser that we are done writing things into this document. It follows the same closing conventions as theheadandbodytag.
As you'll notice, the basics of HTML are somewhat repetitive. However, these conventions are similar to many languages. In English, we start a sentence with a capital letter, and end it with a period. Likewise, in HTML, we start a tag with a <, and end it with a >. All of our content goes in between those two symbols, just like all of our words in English are separated with sentences.
You can preview your file by going to the Preview menu at the top of the Cloud9 editor, and pressing "Live Preview File." However, you'll probably quickly notice something... it's completely blank! That's because all we've done so far is add the structure of the file. Let's add something to look at.