Lab 1: DIY Personal Website

Due Date

Tuesday, September 9, 11:59pm EST

Before you begin...

Overall, my goal in designing assignments is to push us not just on understanding the concepts discussed in lecture, but in appreciating the challenges of putting those concepts into practice. Reading and writing essays is important, but we don't really improve our design skills if we don't wrestle with it in practice.

Learning Goals

In this lab, you will learn how to create your own website (hooray!). We will be using the website you create here throughout the rest of the semester to build your web development skills. The end goal is for you to have a fully functional personal (or professional) website for you to host online.

• HTML: Understand and implement the basic structure of an HTML page and how to use tags to create content.
• CSS: Learn how to style HTML elements using CSS.
• Social Computing: Learn the basics of prototyping and the challenges of translating designs into code.

1. In-Lab Walkthrough: Hello World... Wide Web

The language you're most likely to interface with on a computer is probably not C or Assembly, but rather HTML. It stands for Hyper Text Markup Language… which might sound like gibberish to you. In HTML, with few exceptions, we only specify what we want to do, i.e., "mark up." It is with CSS or Cascading Style Sheets that we specify how we want to do it, and that’s covered in the later sections.

1.1 HTML

HTML is a language for “marking up” text - saying “this text here is a subtitle”, or “this text here should be emphasized” - stuff like that. It’s the language that web browsers understand, and it’s the language that we use to tell web browsers what to display on a webpage.

Using HTML, we specify what we want the webpage to do. However, it’s important to distinguish between this and how we want the webpage to do it. For instance, what we want to do might be to make certain text show up as a title. How we do it is by making it a little bigger and bolder than the surrounding text (and put it on its own line).

For example, consider the following line of text:

My cat is very grumpy.

If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (<p>) element:

<p>My cat is very grumpy.</p>

There are a couple of things to note about this example. The first p tag is an opening tag. Second, notice how there is a forward slash in the second p tag? That indicates that it is a closing tag. Everything in between the opening and closing tags is affected by the tag.

You can place tags inside of each other. This is called nesting tags in programmer speak. For example:

<p>My cat is <i>very</i> grumpy.</p>

Thus, in this example, the word very will be affected by the i and p tags, but the other words will not be affected by the i tags. Pretty simple so far, right?

1.1.1 Tags

HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way using tags.

Tags get more fun once you have a couple to play with. Here are some basic tags that you should know about as a novice HTML coder. Remember that these are all opening and closing tags - they affect the text that they enclose. We’ll talk about the second type of tag soon.

• i: This stands for emphasis and is used when you want to emphasize text. By default, this will render as italic.
• strong: This is used for text that is strongly important. By default, this renders as bold.
• h1: This stands for header 1 and is the largest type of header, or page title. There are also tags h2 through h6. They get progressively smaller, and are used for subheaders or subtitles. By default, this will render as bold, large text on its own line.
• p: This stands for paragraph and should be used to enclose paragraphs of text. By default, this will have the effect of pressing enter on your keyboard twice before the paragraph.
• ol and ul: These are ordered list and unordered lists, in other words: numbered lists and bulleted lists. Inside the list, each item should be within an li (list item) tag.
• div: This stands for division, in other words, a section of the page. This is a versatile tag used to organize more complex HTML into sections. We will use this one more in the CSS section.

For example, check out the following code. Can you guess what it will look like?

<h1>My Cat Toaster</h1>

<p>Toaster is a <i>very</i> grumpy <strong>cat</strong></p>

<ol>
    <li>Oh, Toaster the cat with a permanent frown,</li>
    <li>The grumpiest feline in all of the town.</li>
    <li>With fur of deep gray and a tail that’s a swish,</li>
    <li>He’d hiss at your love and growl at your fish.</li>
</ol>

<ul>
    <li>But deep in the night, when the moon softly glows,.</li>
    <li>Toaster reveals what no human knows.</li>
    <li>A twitch of his whiskers, a purr in his sleep,</li>
    <li>A secret so sweet, his grumpiness keeps.</li>
</ul>

Try it Out!

You can run this code yourself to find out.

1. Create a file named my_cat.html using your terminal. You can name it anything you want, but make sure it ends in .html!
2. Open the file using your favorite text editor.
3. Copy the above example code the file, and save the file.
4. Open the file in a web browser to see your HTML in action.

Once you have this file, you can make changes to it and then refresh the page in your browser to see your changes. Try it:

4. Add <h2>May His Reign Be Long and Peaceful</h2> on a new line after the h1 text.
5. Save the file.
6. Refresh the page in your web browser to see what your new line of code does!

1.1.2 Attributes

Next, let’s talk about the a (or anchor) tag. With this tag, we introduce something called HTML attributes, which are certain traits that a tag can have. HTML attributes go inside of the opening tag and always have the syntax of ATTRIBUTE="VALUE", where the value is always in quotes. This will make more sense if we look at an example.

The anchor tag is what we use for links. It has an attribute called href, or hyper reference - the URL of the page that the link goes to. For example, take a look at the following code:

<a href="https://drive.google.com/file/d/16apzg01S4Tgvayjap7LLlXalKa8rKsxL/view?usp=sharing">Click Here</a>

What this will render is a link that says “Click Here”. If you click the link, you’ll be taken to whatever URL is the value of href - in this case, a picture of my cat.

Try it Out!

In the last section, you saved an HTML file my_cat.html to your computer.

1. Now, save a new file called about_me.html with the following contents:

</p>
<h1>About me</h1>
<p>I'm learning HTML and CSS! My favorite animal is a ____.</p> <!-- there's only one right answer -->

Make sure to save about_me.html in the same folder as where you have my_cat.html.

2. Now, let’s learn how to link to your new page. In about_me.html, add a new line somewhere in the file that says: <a href="my_cat.html">My Cat</a>

3. Save it and open about_me.html in your web browser. Now, if you click the link, it will take you to the page about Toaster.

NOTE: The value of the href in this example is my_cat.html, a relative path. Instead of containing the full URL, relative paths are relative to whatever folder you are currently in. In this case, it will look for a my_cat.html file in the same folder. So this allows you to link to a different HTML file in the same folder.

1.1.3 Standalone Tags

There are two types of HTML tags. One of the types is the opening and closing tags. That makes sense for things like emphasizing text, because it encloses the text that you want to be affected. Some things, though, like images, just stand by themselves and don’t need to enclose anything. These are made using stand-alone tags. Take a look at the br tag as an example: <br />.

Pretty simple, right? It’s just like the opening tags we already learned about, but without a closing tag. By the way, what the br tag does is make a line break. It’s the same as pressing enter on your keyboard once.

The br tag is super simple - that’s all there is to it. A more interesting stand-alone tag we can learn about is img, the image tag. This has the important attribute src, which should have the URL of the image as its value. It can also have width and height attributes, which are specified in pixels, to tell you how big the image should be. For example, consider the following code:

<img width="500" height="200" src="https://drive.google.com/thumbnail?id=16apzg01S4Tgvayjap7LLlXalKa8rKsxL&sz=w1000" />

This is an example of how to use a tag with multiple attributes, in this case, the width, height, and image source (src). As you can see, it’s quite simple - each attribute is in the form of ATTRIBUTE="VALUE", just as we learned in the last section, with spaces to separate them.

What will the code above look like? It’s time to…

Try it Out!

The image above isn't quite right. Try to fix it by changing the width and height attributes.

1. Open your my_cat.html file from before.
2. Add the img code above somewhere in the file, and save it. Open the file in your web browser (or refresh the page if you already have it open), and voila!

Now, try saving the image to your computer and loading it from your computer instead:

1. Right-click the image and save it as toaster.png. Save it in the same folder as your my_cat.html file.
2. Change your img tag to the following: <img width="1000" height="1000" src="toaster.png">
3. Now refresh the page in your web browser and the image should still show up! Except now it’s using the image hosted locally on your computer.

1.1.4 Structure of an HTML Page

Now that you know a bit of basic HTML, let’s talk about the structure of an HTML page. While you can write any HTML into a file and run it, web pages have a particular HTML structure that can be followed. Following this structure will ensure your web page runs correctly even as it gets more complicated.

First, all HTML documents have to start with a special line that declares that the document type is HTML. This line looks a bit like a tag, but it’s actually not an HTML tag, it’s a “declaration”. It tells the web browser what type of document it is, in this case, HTML:

<!DOCTYPE html>

Whenever you make an HTML file, be sure to write this as the very first line.

Next, the entire document is enclosed within html tags, which acts as a container for everything else. Within this, our HTML page is split into two parts, which are also opening and closing tags: a head and a body.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Inside the head, we place information about the page which isn’t directly visible on the page. One such tag is the title tag, which controls the text displayed in the top of the browser tab.

Inside the body tag is where our actual visible HTML elements go. This is where we can write paragraphs of text, titles with the h1 tag, and more.

So for example, a simple page could look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>Welcome to my web site!</h1>
    <p>Thanks for visiting today!</p>
  </body>
</html>

Try it Out!

Try copying this into a new file called about_me.html, and open it in your browser to see what it says. You’ll notice that it says “About Me” in the browser tab, which is the result of the title tag. Then, on the actual page, you’ll see what’s in the body.

1.1.5 Validating Your HTML

HTML is a markup language. Every language has its own grammar, vocabulary and syntax, and every document written in a particular language is supposed to follow those rules. With HTML, it's easy to miss a closing tag or incorrectly use an attribute, and these mistakes can cause your web page to display incorrectly. Web browsers are actually very tolerant of mistakes and try to render the HTML as best it can no matter how broken it is. For example, you can create a page missing several closing tags and it will still render something. So just because the HTML renders in the browser doesn't mean all is well. There are no rules as to how invalid HTML should be handled, which is why every browser handles these mistakes in different ways. So it's important to always try and serve up valid HTML.

To avoid these issues, you can use an HTML validator to check your code for errors. The W3C Validator is one of the many HTML validators that checks your HTML markup to see if you are following the rules for constructing proper HTML. The process of verifying whether a document actually follows the rules for the language(s) it uses is called validation, and the tool used for that is a validator. A document that passes this process with success is called valid. Thus markup validation is the process of checking a Web document against the grammar (generally a DTD) it claims to be using.

1.2 CSS

Remember how I said that HTML tells the webpage what to do? Well, CSS tells you how to do it. For example, HTML might tell you that you want to emphasize a piece of text. It’s the CSS that tells you how the text will be emphasized - perhaps you want it to be both bolded and italicized, as well as bright pink. You can do that with CSS, and more.

1.2.1 Using CSS to Style a Page

Let’s say you have a bit of code like the following:

Wow, much beautiful. So <strong>wow</strong>.

If that’s all you have (no CSS), it will look something like this: Wow, much beautiful. So wow. By default, the strong tag simply bolds the text. But let’s say we want to make it fancier. Using CSS, we can change the way the strong tag affects the text. We can make all strong text purple, or underlined, or bigger, for example.

Your CSS code has to go in between style tags (see MDN for more details). The style tag should have an attribute type with the value “text/css”, to tell it that we’re using CSS. Inside of these style tags, we can style things by putting the name of what we want to style in front of curly braces, and putting our styles inside of the curly braces.

That probably sounded a little confusing, but it should make more sense with an example:

<style type="text/css">
    strong {
      color: #eeeeee;
    }
</style>

Notice how we have strong right in front of the curly braces. This tells us that we’re changing the way the strong tag affects the text. Inside of the curly braces, we can list our CSS properties in the format: property: value;

In this case, the property is color and the value is #eeeeee.

In this example, we are setting the color to a hexadecimal color code, #eeeeee, or light gray. Now, if we use the same HTML, we get a different result: Wow, much beautiful. So wow.

Well, we can’t see that very well. Luckily, there’s another property we can change that might make that text easier to see. The background-color attribute will change the background color of whatever you are styling. Let’s add a line for background-color, changing it to #000000, or black:

<style type="text/css">
strong {
    color: #eeseeee;
    background-color: #000000;
}
</style>

Now, our HTML will render like this: Wow, much beautiful. So wow.

More CSS Attributes

Mozilla provides an excellent resource to learn about the many, many different CSS attributes that you can use. Check it out here.

1.2.2 Adding CSS to Your HTML Page

Now you might be wondering… where does the style tag go in an HTML page? The answer? It goes inside the head section. Here’s an example of what your entire page might look like now:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    strong {
      color: #eeeeee;
      background-color: #000000;
    }
    </style>
  </head>
  <body>
    Wow, much beautiful. So <strong>wow</strong>.
  </body>
</html>

Now you should have a basic idea of what CSS is, how to use it, and what you can do with it. Just like we styled the strong tag, we can also style other HTML tags, like p, h1, em, and more. You can even style the entire page using the body tag.

Try it Out!

Insert 10 images of Toaster into your my_cat.html file, each with a width and height of 100 pixels. Add alternate green and grey borders to each image, with a border width of 5 pixels.

2. Lab Assignment

2.1 Requirements

By the deadline, your repository should contain:

1. Three hand-drawn sketches uploaded as images that represent the layout of your homepage (index.html), your about me page (about_me.html), and your blog (blog.html).
2. Three HTML files:
   • index.html that includes hyperlinks to the other two pages
   • about_me.html
   • blog.html
3. A folder called "validation" with three screenshots of the result of the W3C HTML Validator for each of the three HTML file. All HTML files should receive a "passed" rating. You have to upload each file individually. Section 1.1.5 explains why validation is important.
4. Each HTML file should contain the following:
   • An appropriate title and heading
   • Relevant headings
   • Consistent CSS styling for each page
5. The about_me.html file should contain:
   • An appropriate title and heading
   • An image or drawing of you
   • A paragraph about your (current) self
   • A paragraph about your future self (based on the exercise we did in lab)
6. The blog.html file should contain:
   • CSS styling that is different from the homepage and about me page.
   • A main heading
   • A set of three "blog posts", each:
     • Contained in its own div with unique headings
     • A sample image embedded from Wikipedia. To get the image source, right click on an image in Chrome and choose "copy image address."
     • Filler lorem ipsum text of between 200-300 words.

2.2 Clone Your Repo

Get your Lab SSH URL from the CS77-F25 GitHub organization. The repository to clone is named Lab1-<userID>.

$ git clone [your lab1-userID url]
$ cd lab1-userID
$ ls
about_me.html  blog.html  index.html

3. Submission Instructions

Make sure you have the appropriate files and images in the correct folders as described in the requirements above.

Submit your assignment by committing and pushing your changes to your GitHub repository:

$ git add <changed file1> <changed file2> ...
$ git commit -m "Lab 1 completed. We're web developers now!"
$ git push

4. Grading

4.1 Grading Rubric

Category	Insufficiency	Adequacy	Proficiency	Mastery
Content (5 points)	Missing required sections or images; content is irrelevant, incomplete, or poorly structured	Most required content present but some sections incomplete or lacking detail; structure is basic	All required content included; well-structured and relevant; minor improvements possible	All required content included; content is well-organized, detailed, and engaging; demonstrates thoughtful effort and creativity
HTML (5 points)	Missing most required content, e.g., title, headings, CSS styling, URLs; content is not relevant to the assignment; and content is not well-structured	Missing many required elements OR content is not well-structured	Missing minor required elements but is well-structured	Includes all required elements and is well-structured
HTML Validation (5 points)	2+ HTML files have errors	2+ HTML files have warnings	1 file has warnings	There are no warnings or errors validation
CSS (5 points)	Minimal or inconsistent CSS; pages lack visual distinction; styling does not enhance readability or structure	Basic CSS applied; some consistency across pages; limited use of styling to improve layout or readability	Consistent and appropriate CSS across pages; styling enhances structure and readability; blog page has distinct styling	Creative, consistent, and visually appealing CSS; clear distinction between pages; styling significantly improves user experience

4.2 Extra Credit

A small number of submissions (1-2) that put in additional effort to design their website will earn an 10% extra credit on this assignment. Go for it!

Resources

• Mozilla Developer Network Web Docs.
• W3Schools HTML Tutorial
• W3Schools CSS Tutorial