Now that we have our environment set up we can begin creating the template for our site. Lets create a new project folder named “game-genome” under the sites folder we created last lesson to store all the files for the website. Open up Sublime Text 2 and from the top menu click “File -> Open Folder”. Navigate to the game-genome folder we just created, select it, then click OK. This may open up a new window, if so close the old one. The new window now has a pane on the left side which contains the file directory for the project. We are now ready to begin codin
Creating HTML Files
To create a new file, right click on the folder that you want it to appear in then click new file. Currently we only have our top parent project folder, so create a new file in the game-genome folder. You will notice after creation that the file does not appear in the directory right away but instead is opened in the right pane as a new document. This is because we have not saved yet. Save the file right now by pressing: ctrl+s (windows), cmd+s (mac), just like any other program. This will bring up a prompt asking for what you want to name the file, lets name it “gamegenome.html” and press ok. You will now see the file appear in the directory pane.
Start with the Basic Template
Here is the code we came up with in the HTML basics lesson for the most minimal structure possible. Copy and paste it into the gamegenome.html file and save it.
<!DOCTYPE html> <html> <head> <title>The Game Genome Project</title> </head> <body> <p>Hello World</p> </body> </html>
The HTML is all ready to be viewed now. To view it in your browser, right click the gamegenome.html file in the left pane, then click open containing folder. From there you can double click the gamegenome.html to open it in your default browser. I require for these lessons that you use chrome though, so if your default browser is not chrome then right click it and open it with chrome. You should now see our very tiny website which greets the world
Header elements get their name from newspapers where titles of sections are called headlines. The header tags in HTML are: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. The h stands for header, and the number designates the level of importance the headline has. <h1> tag is visually the largest of all of the header tags and is usually meant to contain the title of the website itself, such as The Game Genome Project. As the number attached to the header tag gets higher, the headline font size becomes smaller and the importance of that headline becomes smaller as well. While all of the font sizes can easily be changed with CSS, it is still important to correctly choose header tags with semantic coding in mind.
Lets add our website title, and since it will be the most important thing on our page it will become a <h1> tag. Insert this <h1> header element right after the body tag and check it out in the browser:
... <body> <h1>The Game Genome Project</h1> <p>Hello World</p> ...
Create a Menu
All sites need a menu to navigate between pages. Menus are most commonly built with the list element. Lists can be created through two different tags, the unordered list <ul>, and the ordered list <ol>. The function exactly the same but with only one small difference, the unordered list will be a bullet point list and the ordered list will be a numerical list. Since they behave the same way most developers will use the unordered list <ul> to create lists, and only use the ordered list if you have a specific need for it to be in numerical format. Once again, CSS can override the look and completely remove the bullet point, but right now lets leave it as is.
The list will be filled with list items – one item for each bullet point. To create a list item, we use <li>.
Now to see it all together:
<ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul>
Put that menu right after the <h1> title element we previously created and see what it looks like in the browser.
The Generic Element: The Div
I have been pushing the idea of semantic coding on you especially hard, but it needs to resonate. As much as we would all like our code to be as semantic as possible we will also have instances where an element can’t or doesn’t need to be specified as a paragraph, header, list, etc. The <div> tag is designed specifically for this purpose. It is one of the most used tags out there, and a general rule of thumb is that if you can’t find a tag that semantically fits your situation then a <div> tag is what should be used.
We actually already have a perfect use case for that tag. The <p> paragraph tag we placed in the document earlier is actually not semantically correct. If you remember my definition of a paragraph tag from two lessons ago, it was… “to define the content within it to be a block of text within a larger body of text.” Since in this instance the paragraph tag is not within a larger body of text then we can determine the paragraph tag to not be currently semantic. Because of this we can change the tag to be a <div>. Here is what our current template now looks like:
<!DOCTYPE html> <html> <head> <title>The Game Genome Project</title> </head> <body> <h1>The Game Genome Project</h1> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> <div>Hello World</div> </body> </html>
And if you were to refresh the page you can see it looks exactly the same. This is because there is not much of a difference between the way a <p> tag renders and the way that a <div> renders, but semantically they are completely different elements.
The Web Inspector
Sometimes things can go wrong when developing a website and you need to take a look at the live code that the website generates through the browser. This is done by using the Web Inspector which is currently included in every major web browser. To inspect your website using chrome is simple, right click anywhere on the page and click “inspect element”. A crazy new box on your screen should pop up which is the Web Inspector. I don’t want to get too in depth about the web inspector now because it has a lot of features, most of which I don’t even use. It is a very powerful tool and should be understood at least at its basic level. A few things I do want to mention is that depending on what element you right clicked on, the “Inspect Element” will try its best to find that piece of code and display that specific part within the inspector window. If you hover over the names of elements in the window you will also see their placement within the web document. Play around with these two things and you should be fine for now. Remember that any changes you make to the document through the web inspector do not save upon exit. Any debugging you do through the web browser must then be changed in the text editor. Any changes you do not move to the text editor and save will be lost upon refreshing the page.
Woo Hoo! Next lesson I will elaborate a tiny bit more on HTML and then we are off to CSS land. Remember, continue finding other tutorials online about this topic because a web developer needs to have this stuff memorized through practice.
- Make a project folder under the Sites folder named game-genome
- Create a file under that folder named gamegenome.html
- Insert the basic html template we created two lessons ago
- Insert an <h1> tag which contains the title for the page
- Create a <ul> menu for our site navigation
- Change our <p> paragraph to a <div> because of semantics
- Check out the chrome web inspector!