Web development can be extremely complex, but the underlying structure of all web pages is nothing more than raw unformatted text that is tied together with a formatting language known as HTML (HyperText Markup Language). The term HyperText comes from the idea that webpages contain hyperlinks that are used to move from one webpage to another. One way to conceive of HTML is to think of it as the skeleton of a webpage.
CSS (Cascading Style Sheets) is another key component of web development. While HTML provides the skeleton of a page, CSS is used to control the format. The various colors of a webpage, the position of images, the way that text reacts when you click, tap, or roll over it; all of these features are typically determined by CSS.
The Web Site (don’t let yours be a messy bedroom)
As you read earlier, web pages are made up of multiple files and web sites are made up of multiple web pages which, in turn, are made up of even more images, CSS, JavaScript files, etc. Even small websites may be composed of hundreds of individual electronic files which is why it is crucial to have an effective organizational system.
In the physical world, most of us have a bedroom with a system of drawers and a closet for organizing items of clothing. Imagine what your bedroom would be like without these systems with socks, underwear, shirts pants, etc., all jumbled up into piles on your floor, bed, etc. [footnote] (What, that’s the way your bedroom already is 🙂 ?) [/footnote] Well, here in the digital world this is your chance to improve.)
A poorly organized website can be just as much of an organizational challenge as a really, really, messy bedroom, but it is actually quite easy to avoid the digital mess through the use of folders. Folders are digital organizers that allow you to group files and collections of files as your website expands, and to avoid the nightmare of a truly messy site that may not even work very well.
But enough talk about abstractions. Let’s lay out a basic website and then build a webpage. The only tool we are going to use for editing is a text editor named Brackets which you can easily find by searching for it. (please note: there are any number of text editors such as NotePad (Windows), TextWrangler (Mac), Sublime Text, Atom, etc. that will also do the job). We will also use a tool called Dropbox (or something similar) that will allow your website to exist on multiple computers.
Step 1: Install Dropbox and create site folders
Dropbox, for those of you who aren’t familiar with it, is a great tool for backing up your work and for synchronizing content across multiple computers because the site that you create on your classroom computer will automatically be copied to any other computer that establish your Dropbox account on. You may already have an account. Otherwise, here’s how it works.
1. If you haven’t received an email from your instructor or one of your classmates that invites you to establish a Dropbox account, go directly to Dropbox.com to establish an account. Do not download the Dropbox program; your computer has it already (Note: If you’re taking 4110 online, you may need to download Dropbox on your personal computer if you do not have it already.). If another Dropbox user has invited you via email, however, be aware that if you accept their invitation (by clicking on a link in the email) they get more free space!
2. If your dropbox account is already full, you may want to consider another free cloud-based service such as copy.com. If you go with copy.com, click on this link to get and give (to me) extra space.
3. Set up your account online and then activate it on your classroom computer by starting the dropbox (or copy) program (use finder to locate it).
Once again, there is no need to download the Dropbox (or copy) application (unless you’re taking the class online)! It is already installed on your computer.
3.a) Create folders inside of the Dropbox or Copy folder. Start by creating a folder named mysite. The mysite folder is where you should store all of the work that you do for this class. REMEMBER THIS. When you create a folder for a website, ALL FILES that you use for the website should stay inside of the main folder. NEVER link to a file that is outside of that folder unless, for example, you are linking to a javascript library such as jquery, a google font, or something of the sort. [footnote] (more on that later) [/footnote]
3.b) Create 5 additional folders inside of the mysite folder named: css, images, js, project_1 and project_2.
3.c) Open the project_1 folder and create 3 folders inside named css, js, and images. Open the project_2 folder and, once again, create the same 3 folders: css, js, and images. Why so many folders? [footnote] Ideally, the mysite folder should include just a few html files. All of the peripheral files for these html files should be placed inside of the css, js, or images folder, based on file type. Later on in the semester you will create two websites; the first website will live in the project_1 folder, the second in the project_2 folder. [/footnote]
4. When you get a chance, set up Dropbox on your home computer. Voila! The mysite folder and its contents, as well as ALL of the content that you create inside of Dropbox, will be stored online and on your home computer. If you change anything inside of Dropbox at home, the changes will also appear on your classroom computer. Even better, Dropbox can compensate for human frailty. Everything in your Dropbox folder is stored online with version control. This means that if, for example, you work on a paper for days and somehow screw up and save the paper after stupidly deleting 20 pages, Dropbox has your back. Just browse to the online version of the file, right-click and ask for the earlier version before your brain took a vacation.
Step 2: Create a home page
1. Open Brackets, create a new document and type
<html> </html>
In HTML, anything enclosed in carrots or “brackets” are what we call “tags”. These are the building blocks of HTML. The first building blocks of a webpage are the <html> tags that encase all other tags and all of the page’s content.
But why two tags? In most cases, tags come in pairs: an opening tag and a closing tag. Closing tags are always indicated by a forward slash / as in </html>. [footnote] Tags are invisible to anyone who is simply browsing a page but anyone who wishes to can “view source”, and view all tags within the page. The ability to view source code is one reason that the World Wide Web grew so quickly, because web developers can, and do, copy and modify each other’s work. [/footnote]
2. In between the two html tags (<html> and </html>), type
<head> </head>
<body> </body>
Notice again that both these tags are pairs. The head and body are the two main parts of any html document. The “head” section never actually appears on a webpage, but contains settings and other important things that affect the webpage. The “body” section contains all of the actual content (words, pictures, css) that will go on the page.
At this point, your code should now look like this:
<html>
<head> </head>
<body> </body>
</html>
2.a) At the very top of your document, just above the <html> tag, add
<!doctype html>
Although not strictly necessary, the <!doctype html> is there to tell your browser that your page is written in the very latest version of html: html5.
2.b) Immediately after the <head> tag, add these tags:
<title> </title>
In between the tags, type your name, “my first webpage”, or something of the sort, as in
<title>my first webpage </title>
The title tags define the text that appears at the very top of your browser’s window.
3. Save the file as index.html, and open it with your web browser (Safari, Chrome, Firefox, etc.) Although it’s a blank webpage because there is no content, you should see your title. What you have here is the foundation that you should use for ANY web page that you create in the future. So create an additional copy of this page and name it starter.html. In future lessons you can create a new web page by simply making a copy of starter.html.
4. At this point, your code should look identical (except for the title) to the code below.
<!doctype html>
<html>
<head>
<title>my first page</title>
</head>
<body>
</body>
</html>
If things seem a little crowded for actually working, feel free to use your tab key or to hit return a few times to spread everything out, because whitespace within HTML code is completely ignored! It makes no difference if you place your tags one line apart or 20 lines apart. As long as they’re in the order you want, the final page will look the same in the browser. Tabbing and spacing your tags can make your code easier to read and to work, so use as much whitespace as you need.
5. Time for content. To speed things up, paste the dummy text shown below into the body section (between the two body tags):
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
6. Save index.html inside of your mysite folder and reload it with your browser.
Hmm…all of the text is there, but the two paragraphs should run together in spite of having a space between them. Remember, all white space in code is ignored, so we have to tell the web browser what’s what by marking up our content with tags.
7. Add a <p> between the paragraphs, and a corresponding </p> tag at the end of the last paragraph. Save your document and reload again. This time, the paragraphs should be separated by a line. The <p> tag is the paragraph tag and specifically denotes paragraphs on a page.
8. Now it’s time for a very basic introduction to CSS. Create a new file and save it as style.css inside of the css folder in the mysite folder (the mysite folder is the same folder that contains your index.html file). Return to index.html and add this code immediately after the </title> tag:
<link href="css/style.css" rel="stylesheet" type="text/css">
The purpose of this line of code is to attach the CSS file to your document. The part that says css/style.css tells the browser to look for style.css inside of the css folder. If, for some reason, you should move style.css outside of the css folder, the browser will not be able to find style.css and your document suddenly will appear very different!
9. The next step is to create a ‘style’ within your new CSS stylesheet that will affect your document. Return to style.css and type in the following code:
body {
font-size: 30px;
}
10. Save both style.css and index.html and refresh your browser. Your text should suddenly get a lot bigger because you just instructed your browser to display ALL text between the body tags at 30px. Because the <body> tags encompass the entire document, all text in the document will appear at this size.
30px is kind of big and you may not want to display everything at that size. Let’s create what is known as a ‘class’ and add it to style.css as shown below.
body {
font-size: 30px;
}
.smaller {
font-size: 12px;
}
Notice that smaller starts with a dot (.smaller) and begins just after the closing bracket for the body style. Any time you add a new style to a css document it should begin after the closing bracket of the previous style.
11. Return to index.html and add the smaller class to your <p> tag, like this:
<p class="smaller">
Once again, save both documents and refresh your browser. The second paragraph should shrink a lot.
12. Just for fun let’s add an ugly red background to our page. Return to style.css and add the following code to your body style (before or after font-size: 30px;):
background-color: #F00;
Save style.css and refresh your browser one more time. Ugly? Find yourself wanting another background color? Right-click or control-click on #F00 and select Quick Edit to open Bracket’s color picker. Pick the color you want by using the tools that are suddenly at your disposal and shut the color picker window once you have the one that you want.
While you are picking colors, be aware that you can easily change text color well. To change the text color for your entire document to yellow, for example, add this line to the body rule that you created earlier
color:#FFFF00;
What’s a Div Tag?
Div tags are are the principal tool that web developers have for formatting content. One way to envision div tags is to think of them as boxes or rectangles full of text and pictures that can be moved around and placed in different locations on a web page. Div tags can be as big or small as you define them to be, can have different font and background colors than the rest of the page, borders, and lots more. As you may already suspect, all of these characteristics are controlled via CSS. So, let’s make a CSS rule and apply it.
1. Return to style.css and add a new class named .mydiv after the closing bracket of the .smaller class, as shown below:
.mydiv {
height: 300px;
width: 300px;
}
2. Return to the html document and ‘wrap’ the div tag around the first sentence:
<div class="mydiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
3. Save both the html and css files and preview the html file in your browser again. Things probably look a little different but you can’t really see the div tag. Let’s change that by adding a background color. Return to the css file and add background-color: #000; to the .mydiv class:
.mydiv {
height: 300px;
width: 300px;
background-color: #000;
}
Save the css file and preview everything in the browser again. At this point you should be seeing UGA colors but why did the text disappear? Answer: black text; black background. Change the text to white by adding color: #FFF; to .mydiv, save the css file and check it again in the browser. See the text?
4. Now add the same div tag to the second sentence, the same way that you added it to the first sentence. When you save everything and preview yet again, the two div tags should be stacked on top of each other. Let’s make one more small change by adding float: left; to the .mydiv class. Once again, save and preview. This time the div tags should appear right next to each other. In fact, they look like one div tag instead of two.
5. Let’s go for broke by adding a right margin to separate the div tags and a white border to give them some distinction. To do so, add these 4 lines of code to the .mydiv class:
margin-right: 5px;
border-width: 2px;
border-style: solid;
border-color: #FFF;
This time when you save and preview all of this in the browser, things should look quite vastly improved.