Summer Learning: Make Your Own Website
Alex Beschler | Contributing Writer
[Editor’s note: An abridged version of this article will be featured in the upcoming April 26 issue of the Mace & Crown newspaper.]
Programming is becoming an essential skill in the modern, developed world. Understanding how to program can enable the ability to essentially “talk” to computers. For instance, provided with some accounting information such as a balance sheet, it would be feasible to create a template with code and then feed it with external information that changes every accounting period. A more practical example is the automation of tasks. If a game is on and playing at an inconvenient time, it can be cumbersome to check the score every so often. One solution is to write a small program that will occasionally display the score.
However, with advances in the field of computer science, programming is slowly becoming even more essential than just being able to talk to computers. Programming is evolving to become a methodology of how to visualize data. For example, when given a balance sheet again, a question that would come up in a programmer’s mind would be, “What does it mean to be a balance sheet?” The answer would typically be something that describes the various properties of the balance sheet, such as long-term debt, wages, rent expenses and so forth. A good programmer would be able to take that question further and understand how each component interacts with each other, thus providing more efficient functionality. Understanding data in this manner is essential because in a modern, data-oriented workforce programming a balance sheet would not be feasible; programming hundreds of thousands would be more realistic.
A practical example of programming is learning to design a simple website. It’s not difficult and doesn’t require much technical expertise Furthermore, it won’t require describing how objects work or visualizing intense number crunching. Instead, it requires some patience, time and thirst to learn.
Designing a website requires a little background knowledge. In the 1990s, a physicist named Tim Berners-Lee developed the World Wide Web. The WWW is simply an abstract concept. When a computer “accessed files” from another computer over the “web” it simply connected to one with the desired files via a Uniform Resource Locator (URL). To better explain the relationship between devices, think about a home Wi-Fi connection. At home, there is a router that is connected to the outside world. The router acts as an intermediate barrier between the internet and your devices to create a miniature network. When your phone connects to the router, it is joining a network comprised of other devices, such as your laptop, video streaming box and so on. By joining the Wi-Fi connection, your device establishes a unique name for itself and opens to communicate with other devices in the network. This device-to-device communication is what makes it possible to share your desktop onto a Chromecast or control your Apple TV with an iPhone.
And the internet is no different. When you visit Google’s web page, you are telling your computer to go to Google’s computers at the provided address (www.google.com). The signal is then redirected to specialized computers that look up “google.com” in a record and turn it into unique numbers that identify where the computer is and how to get to it. The signal is then directed to the location and establishes a link that allows the Google’s computers and your device to wirelessly communicate with each other. After the link is established, it downloads the website data and your devices interpret the code into pictures, links and words.
Programming a website involves writing the website data that your computer will download and turn into something visual. Website data is usually expressed in something called Hypertext Markup Language (HTML). An example of a simple HTML page will first piece together the necessary data that will be used later in the page. Next, it will describe the main body of the page which is what a user usually sees when visiting a website. Finally, it might have some extra information that is used elsewhere in the page. All of this is accomplishable using tools that are readily available.
Developing HTML pages can be done using a variety of tools. Arguably the easiest and friendliest is a program called Brackets. Brackets was created by Adobe, the company that developed the popular photo editor, Photoshop. Brackets is completely free and is easy enough to use to develop directly after installing it. The website to download it is at http://brackets.io/. To use some key features, such as something called “live preview” you will need to install Google Chrome.
After installing and opening it, you will be greeted with a bunch of HTML code. To view what this does, click on the top right button that looks like a lightning bolt. It will open a new Google Chrome window and show the website. After you are finished looking at the web page, close out of Google Chrome. Click at the top of the window and click File > New. It should open a new file in the sidebar called “Untitled-1” under the Working Files heading. Right-click that and click “Save As.” Save the file on your desktop (or somewhere you can find it easily) and name the file “mywebsite.html.” The file you just saved is the file that will store HTML.
To program the website, you must first learn HTML. Let’s start off with learning the structure of a typical HTML document. HTML elements are represented by something called a tag. A tag is usually typed in the following format:
<AnHTMLTag>Some sort of information goes here</AnHTMLTag>
Notice that the tag begins with a Less Than sign, followed by the tag name, and is closed by a Greater Than sign. The second part of the tag is the same thing except between the second Less Than sign, there is a forward slash. The slash tells the computer that it is a “closing tag,” or that whatever content is between it and the opening tag is the content to display. Another thing to note is that tags usually come in pairs.
There are two main parts to an HTML page – the head and body. The head describes data about the web page and data that will be used later. The head would also contain custom formatting options, but that is beyond the scope of this article. The body of the HTML page is the content the user sees, such as text, pictures and buttons.
To start making an HTML page, let’s create the head. Start by typing in the main part of the Brackets window:
This code tells the web browser that the Document Type is an HTML page. As a result, the browser prepares itself to interpret HTML code. Next, we need to include the HTML code we are about to type into an HTML tag by doing:
<!DOCTYPE html> <html> </html>
Brackets should have autocompleted a closing tag for you. In addition, if you put your cursor after the opening HTML tag and click the Enter button, it should automatically add a tab in the code. Per coding guidelines, it is good practice to indent your code; think of code as an outline. To minimize confusion, code is usually indented and Brackets automatically does it for you.
Next, we will add the Head code. Create an HTML tag named “head.” Your code should look like this:
<!DOCTYPE html> <html> <head> </head> </html>
Inside the head tags, we will finally add some HTML code that the user will notice. Create an HTML tag called “title.” This tag changes the title of the web page displayed in the middle of the browser. Inside the tag, add the title “My First Website!.” Afterward, the code will look like this:
<!DOCTYPE html> <html> <head> <title>My First Website!</title> </head> </html>
To see your website, save the file first by clicking File > Save. Then, click the lightning bolt icon at the top right. When it is finished loading, look at the tab at the top. The main page should be blank space, but the text “My First Website!” should be displayed as the tab title.
Now, time to add some content! Without closing out of Google Chrome, go back to Brackets and create a body HTML tag under the head tag. The code will look like this:
<!DOCTYPE html> <html> <head> <title>My First Website!</title> </head> <body> </body> </html>
Inside the body tags, we are going to add a heading. Make a heading tag. The tag name is defined as <h1> which is the biggest type of heading. Without customizing it, HTML predefines six types of headings, starting with <h1> to <h6>. Your code should look like this:
<!DOCTYPE html> <html> <head> <title>My First Website!</title> </head> <body> <h1>Welcome to My First Website!</h1> </body> </html>
Save the file and go back into the Google Chrome window. The window should display, in big letters, “Welcome to My First Website!” If it didn’t update automatically, you might need to save the file again or close out of Chrome and click the lightning bolt button again.
After going back to Brackets, we will create some body text. This is defined by the HTML tag <p>, which stands for paragraph. Directly underneath the heading tag, create the paragraph tag and set the content to be whatever you want the paragraph to display. I highly encourage you to experiment with the code. Mine, for instance, looks like this:
<!DOCTYPE html> <html> <head> <title>My First Website!</title> </head> <body> <h1>Welcome to My First Website!</h1> <h3>Here you will find some text, which is about it for now…</h3> <p>Hello World!</p> <p>In traditional programming practices, it is customary to display “Hello World” in the beginning of any project.</p> </body> </html>
Congratulations! You created your first website! If you were to purchase a server and upload this HTML file to it, this website would be available for the world to see!
HTML is an incredibly powerful markup language that has numerous amounts of resources available to it. Most of it is beyond this article, but if you are interested in learning to code in HTML over the summer, I’d recommend visiting www.w3schools.com. W3Schools is a website dedicated to teaching web-related technology. In addition to that, I’d also recommend visiting Lynda.com. You can reach it by logging into my.odu.edu and clicking Lynda.com on the sidebar. Lynda.com is an instructional video website that normally serves paid content. However, ODU is paying for your free access, so utilize it!
Now that summer is approaching, it gives ample opportunity to learn to program. Not only is it important to learn programming to be able to talk to computers, but the way we comprehend data will most likely change to be able to suit programming. As a result, it would behoove anyone to learn programming, especially HTML.