Introduction: First HTML Project

Please Note: The Instructables website erases anything that uses a less than or greater than sign with any other sort of input. Because of this, all HTML tags will be in the format of "< open_tag_name >" for an opening tag and "< / close_tag_name >" for a closing tag. This is not proper HTML syntax, all tags should have no spaces within the "<" and ">" characters.

Introduction

Every programmer knows that the first step to learning a new computer language is creating a Hello World project. The Hello World project is simply a project that prints to the screen the message "Hello World." In this Instructable you will be creating a HyperText Markup Language (HTML) webpage hosted by GitHub (for free). This is for anybody who wants to learn how to make web applications but does not how to start.

You will be doing this project through GitHub, because GitHub is a free service and allows each account to publish one web site, with its own domain name, for free.

What You'll Learn

After completing this Instructable you will...

  • Learn the basics of the HTML language.
  • Learn how to set up a github repository.
  • Learn how to upload new files to a repository.

What You'll Need

All you need to complete this Instructable is a computer with a working internet connection.

Learning the Basics

HTML

HTML is one language used to define the structure of a web page. HTML does this using elements made up of tags. Tags are how you tell HTML what to do on each line of code. The syntax for a tag is like this:

"< title >This is a title< / title >"

To understand what this means you have to break it down. All tags will use "<" to begin and ">" to end. As you can see there are two tags in the line of code. The first is an opening tag, the second is a closing tag, associated with the initial opening tag. Closing tags will have "< /" at the beginning.

Anything between the opening tag and the closing tag is the data that HTML will use to represent that tag. There are many different kinds of tags. In the example, title is a tag that tells HTML what the tab of the webpage should be.

GitHub

GitHub is an application that allows people all around the world to collaborate on the same project using a tool called Git. Git uses repositories that store a project's code on a designated machine. A repository is in essence a codebase, that is, a place where all of a project's code will be stored. There are two types of repositories, local and remote. Local will be on your machine, and remote will be on a machine somewhere else. For GitHub, the remote repository is the GitHub servers.

A project using Git will have a remote repository, that is the origin repository, meaning the code inside the origin is the central code that all participants of the project use. Each contributor to the project will set up a local repository on their own machine that will pull a copy of the remote's code allowing the person to make changes. Once changes are made, they can push the code back to the remote, where it will update any out-of-date code to the newest version.

There are three main commands used with Git. They are pull, commit, and push. Pull will simply pull the remote repository code and merge it with your current code, updating any out-of-date code. Push will push your code to the remote repository where it will merge the repository's code with yours, updating any out-of-date code. Before you can push though, you must perform a commit. A commit signifies which files you want to be pushed to the remote repository, and is paired with a commit message you write detailing the changes you made.

Attachments

Step 1: Setting Up a GitHub Account

*Note: If you already have a GitHub account, proceed to step 2.*

To set up a GitHub account, go to www.github.com and click to sign up. After that you will be given instructions to enter an email, username, and password. Choose your real email and an appropriate username, as this will be your public github profile. Once that is done you will be taken to a page like the one in figure 1.

You may choose to either read the guide or start the project. The guide is recommended if you plan on creating and collaborating on projects with other people or teams, however, the guide is not necessary for the scope of this project and will not be covered. The guide is always available to you at later times.

Step 2: Starting Your Project

If you just created your account, click on the "Start a project" button, shown in figure 2, to start your first project. If you need to verify your email address (GitHub will tell you), do so now.

If you already have an account or was directed to the main profile page, click on the "new" button as shown in figure 3.

Creating a new repository

You should now be on a page titled "Create a new repository." In the repository name text field, enter your GitHub username EXACTLY as it is, and then place ".github.io" immediately after it. So if your username is Peanuts, your repository name will look like Peanuts.github.io.

The details field is optional, but is handy to keep track of your repositories.

A README.md is also optional, but these are good to have in case anybody is visiting your repository. The README.md is where they will find your notes on the project.

Even though it is optional, for this project you want to include the README.md. This is because if you do not include it, GitHub will not initialize your repository, which means you have to do it manually initialize it through the GitHub application that you can download or on the command line.

If you wish to go this route there are instructions here for using the command line to initialize a repository. Pair the tutorial with the instructions given on GitHub and it should be simple to do. http://bit.ly/17If11u

Before you select "Create your repository" compare it to figure 4 and make sure everything is correct. If you have already created the repository and found out you set it up wrong, that's OK, just repeat this step.

Step 3: Checking Your Repository Is Correct

Now that you have created your repository, you should be redirected to your repository home page, where you can see all of the changes, files, and folders for your project.

If you included the README.md, your browser should look like figure 5.

If you chose to not include the README.md and initialize your repository manually, your browser should look like figure 5b. Use the tutorial given on the last step, paired with the GitHub instructions, to initialize the repository.

If you did not want to initialize your repository manually, but forgot to include the README.md and your browser looks like figure 5b, go to the settings tab and scroll down to delete this repository. Once deleted, go back a step and create the repository again.

Step 4: Choose a Text Editor

It is almost time to start writing your code. If you've never written code before and are worried that you do not have the tools required to start, don't be, because your computer comes with them by default. All you need to write a simple HTML file is the default editor loaded onto your computer. For Mac, it is TextEdit, for Windows, it is either Notepad or Wordpad.

If you do not know where to find either of these programs, you can run a search on your machine. For Mac users, run a spotlight searching by pressing cmd+space and searching TextEdit, for Windows users, you will go to the search bar in your start menu.

If you prefer a formatted text editor over the non-formatted defaults, you can download Atom for Mac and Notepad++ for Windows. There are many others available to you, but these are both free and easy to use. Figure 6 shows why it would be useful to use one of the formatted text editors over the defaults. It is clearly designed to show HTML code in an easy to read manner.

Links to download.

Atom: https://atom.io/

Notepad++: https://notepad-plus-plus.org/

Step 5: Writing the Code

Please Note: The Instructables website erases anything that uses a less than or greater than sign with any other sort of input. Because of this, all HTML tags will be in the format of "< open_tag_name >" for an opening tag and "< / close_tag_name >" for a closing tag. This is not proper HTML syntax, all tags should have no spaces within the "<" and ">" characters. For proper HTML syntax, look at the example in figure 7.

Now that you have successfully set up a GitHub account, created a repository, and chosen your text editor, you are ready to write your code. Please note, all examples of code are taken from the atom text editor.

Creating the file

All HTML websites use a default file that HTML loads when you visit a website. In almost every case that file is index.html, although there are some sites that use default.html or home.html instead. You will be using index.html.

Open up your editor of choice and create a file called index.html. If you are having trouble giving your file the .html extension, go ahead and allow the editor to place whatever extension it wants (.rtf, .txt). Then after you have written the code and saved the file, find it in your computers file system (Finder for Mac, File Explorer for Windows) and rename the file to a .html file. For Windows, if your extensions are not shown with the files and therefore can't replace the file extension, go to the view tab and check the "File name extensions" option.

Writing the code

Look at figure 7 for an example of a basic HTML file and copy it into your file. You may change the data values to be whatever you want, but leave the tags the same.

Each of these tags explained:

  • The "< !DOCTYPE html >" tag means that this document is in HTML.
  • The "< html >" tag means everything contained within the opening and closing tag is in HTML.
  • The "< head >" tag means everything contained within the opening and closing tag is meta data for the website. This is typically not seen by the user. One exception of this is the "< title >" tag.
  • The "< title >" tag means everything contained within the data will be displayed on the tab of the website.
  • The "< body >" tag means that the data contained within the opening and closing tag is the visual page information. This is what you will see on your webpage when you load it.
  • The "< h1 >" tag prints output to the screen as a header. There are 6 header tags, h1-h6, where h1 is the largest and h6 is the smallest.
  • The "< p >" tag prints output to the screen as a paragraph. The output is formatted as plain text.

Step 6: Publishing Your Site

Uploading your file

To publish your site, you need to add the index.html file to your GitHub repository. This is because for GitHub to load your page it needs to have access to the default index.html you created. This is the last step before you can view your webpage.

go back to your GitHub repository page and select the upload files button. If you cannot find it, make sure you are on your repository home page, as shown in figure 5 on step 2.

Once you click on the upload files button you will be redirected to a page that looks similar to figure 8.

Committing your file

This is the page where you will commit the files you want to change in the remote repository. Since we have added nothing to the repository, we will be committing a new file. Go ahead and drag index.html into the appropriate field, or you can choose to click on the choose your files option and select index.html.

After that, you will need to fill out a commit message, this should be a simple message reflecting the changes being made. For example, "Adding index.html" is appropriate. You will want to leave the commit to master option checked, and then select commit changes.

Viewing your page

Your browser should now look like figure 9. This is the repository home page showing all of the files in the repository. Your website is now ready for viewing! Open up a new tab and go to yourGitHubUsername.github.io where yourGitHubUsername is the username you chose for yourself when creating your GitHub account.

If you followed all steps correctly, your website should look something similar to figure 10.

Step 7: Further Reading

You've only barely scratched the surface of learning how to design and create web applications. HTML is just the skeleton for designing web applications. Cascading Style Sheets (CSS) is a way to make your website more visually appealing. JavaScript (JS) is a way to make your website interactive with the user. All three are used together to create sophisticated web applications, but there are much more.

Here is a list of some further readings that will be helpful when trying to learn more about web design.