HTML and CSS Lab

This tutorial was written by Lindsay K. Mattock and adapted by Katherine Walden and John Templeton.

This tutorial is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

As you read in your assigned reading for this week, both of these languages require a specific syntax. The reading from w3 Schools suggested downloading a text editor to create your html files. Your computer likely already has some text editor options (Notepad or Notepad ++ for PC users, or Text Editor for Mac users). Personally I use/would recommend VS Code as your source code editor: (Download Here).

Lab Objectives

By the end of this lab you will be able to:

Generate HTML pages that include links, images, and tables
Generate CSS stylesheets to format your HTML pages
Become more familiar with how web data is formatted for future projects

Acknowledgements

This lab is based on the "Project 3: HTML/CSS" project materials developed by Lindsay K. Mattock for the the SLIS 5020 Computing Foundations course.

What is HTML?

HTML stands for HyperText Markup Language

“HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
"Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).

"HTML is a Language, as it has code-words and syntax like any other language.”¹

HTML is all about sharing, storing, and accessing information. HTML provides the background for the World Wide Web.

Hello World!

<html>
<body>Hello World</body>
</html>

This is a very basic HTML document. The HTML tags <HTML> identify this document as a html document. The body tags <body> enclose the content that will be visible on the page.
Download the hello_world.html file (link to Google Drive download, ND users only) and open it in a web browser on your computer. You should see just the text “Hello World!” The browser has translated the HTML tags and returned only the text.
helloworld.html contains the minimum requirements for an HTML document. However, it is best practice to create a HTML document that is “well formed,” that is, that it follows all of the grammar, vocabulary, and syntax rules of html. We can check the well-formed-ness of this document in a validator like the W3C Markup Validation Service https://validator.w3.org.
Click on “Validate by Direct Input” and copy and paste the code above into the validator and click check. You should receive a few errors.

While our browser was able to interpret the code from helloworld.html, this document does not follow all of the rules of the current version of HTML.
HTML is pretty forgiving, but other languages are not, so it’s best to practice following all of the rules from the start.

Q1: Try to interpret a few of these errors in your own words. HINT: The W3Schools resources listed under step 5 provide more information or explanation on some of these errors.

Creating an HTML File

Let’s make a few modifications to the Hello World file that will make it more valid. Navigate to the htmltemplate.zip file given to you for this lab and open the index.html document.
In this .html file you will first notice we have the document type declaration beginning with <!DOCTYPE. In this case, the document type is followed by html. This is simply telling the computer that what follows is a HTML document.
Next we see the opening HTML tag, but there are a few additional attributes here: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This is just another piece of the XHTML specification.
The namespace provides a means of disambiguation between elements with the same name. We won’t run into this issue in this lab.
Also note here that the document language is declared as English with the en code with a standardized abbreviation for the English language.

XHTML 1.0 Documentation http://www.w3.org/TR/xhtml1/

What follows are the tags that define the structure of a basic HTML document as illustrated in the W3C reading this week.
The index.html file included in the project template reflects HTML that is well-formed and valid.
We can test this by copying and pasting our file into the HTML Validator. (Go ahead and give it a try https://validator.w3.org).

Adding Content to `Index.html`

At the moment, our document doesn’t have any real content – let’s add some. Between the <head> tags you will see a set of <title> tags.
As the diagram illustrates, this data is not presented in the browser. This is true for the most part.
The <head> of the document is reserved for metadata, but also includes the <title> of the page which is represented in the tabs in some web browsers.

  <head>
    <title>YOUR PAGE TITLES GOES HERE</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>

Replace “YOUR PAGE TITLE GOES HERE” between the <title> tags to give your document a new title.

Q3: Between the head tags, there are also a few meta tags. Use the W3C site to translate this information in your notebook.
Some resources that can help you get started:

W3Schools, "HTML Meta Tag"

W3Schools, "HTML Meta Charset Attribute

W3Schools, "Response Web Design With Viewport"

Now, let’s modify the body. This is where the content that we will see in the web browser is entered.
HTML uses a number of different formatting tags. You can use the W3Schools "HTML Reference" to browse through some of the different options.
For now, we’ll use <h1> and <p>.
After the first <body> tag, place a <h1> tag on a new line.
Notice two things:

The line is indented. This isn’t a requirement of HTML, but it is a convention that is used by coders to write cleaner code. The indentation allows you to easily determine what tags are nested within each other. For example, the <title> and <meta> tags are nested within the <head> tags. Now, our <h1> is nested within the <body>. The use of the tabs simply makes the code easier for us to read, but the computer doesn’t care (with Python the indentation is important and will cause errors if the indents do not appear in the right place).
The editor completed your <h1> with a closing </h1> tag. The closing tag is not required for all HTML tags, but it is good practice to close all of your tags. This is a good example. Without a closing tag, everything that follows will be formatted as a <h1>.

Go ahead and update the content between the <h1> tags. <h1> is preformatted as first level heading text. We’ll see how it looks in a minute.

Next add a <p> tag and type some text. <p> tags are preformatted as paragraphs with padding between paragraphs.

At any time you can check the way that your code will render by saving, and clicking on the .html link/refreshing the page.
Save the file in a dedicated folder for this project, and call it index.html.

Why index.html? index.html is the name of the default landing page for websites. The web server (the computer hosing the site) will automatically recognize index.html as the first page or the home page of a website. Some servers use other variations like home.html, but we’ll use index.html.

Building Additional Web Pages

What we have just created is a single web page. If we want to build a web site, we have to link this page to additional pages of content.
Let’s create a second .html file and save this file as page2.html. You can do this by duplicating the index.html file and then renaming. Hint: this will also help us make sure we're starting with an HTML document that is well-formed and valid.
Now add some new content to your second page. Be sure to add a title, <h1> and <p> tags.

Creating Links in HTML

Now, let’s add a link to the second page on our index.html page.
We add links with the <a href> tag. This tag allows us to link pages in the same website and link out to pages that exist on external websites.
The tag syntax is as follows: <a href="URL to page">Text that will appear as the link</a>.
Below your paragraph tag on the index.html page add the line <a href=”page2.html”>Link to page 2</a>.

Learn more about the <a href> tag via W3Schools: http://www.w3schools.com/TAGS/att_a_href.asp

Run index.html to see the updated file with a link.
When you click on “Link to page 2” your page2.html file should open. In this case, our URL to the page in our <a href> tags is just the name of new page we created.
We do not need a full URL (http://www.somewhere.com) because we are calling a file that is stored in the same directory on our machine.
If we had saved this file to another folder or directory, we would need to include the full file path, including any directory information.

For example if we had put page2.html in a folder titled "Page_Two," the a href tag would look like <a href="Page_Two/page2.html">.

Adding Images in HTML

Let’s add an image to the index.html page.
Find an image that you like on the web, save it to your local computer in the dedicated file location of your project (e.g., where the index.html and page2.html exist).
The <img> tag is very similar to the <a href> tag that we just used.

Learn more about the <img> tag via W3Schools: http://www.w3schools.com/tags/tag_img.asp

The tag has two required attributes:

src or the source
alt or the alternative text for the image

The src can be a local file or a URL to an image on the web, just like the href attribute in the <a href> tag.
The alt is for the alternative text or the text that is displayed for screen readers or browsers like lynx that don’t support images.

On your index.html page, add the line <img src="imagefilename" alt=Description of image> in the <body>.
Be sure to use your image file name in place of the italicized text above.

View the created page in your browser to see if the image has loaded correctly.

Q4: If you haven't already, modify index.html to include a link to a second HTML file. Next, add an image to index.html.

Q5: Move the image you added in Q4 into a new "Images" folder. What happens when you save and run the code? What would you need to modify in the HTML to correctly display this image?

Building Tables in HTML

HTML uses a few core tags for web pages that include tables.

table (marks the start and end of a table
tbody (marks the start and end of the table body)
tr (marks the start and end of each table row)
th (marks the start and end of each column in the first row of the table)
td (marks the start and end of each column after the first row of the table)

How we might see those tags combined in a table structure:

<table>
 <tr>
  <th>First Column Header</th>
  <th>Second Column Header</th>
  <th>Third Column Header</th>
 </tr>
 <tr>
  <td>Data in first column/first row</td>
  <td>Data in second column/first row</td>
  <td>Data in third column/first row</td>
 </tr>
 <tr>
  <td>Data in first column/second row</td>
  <td>Data in second column/second row</td>
  <td>Data in third column/second row</td>
 </tr>
</table>

The output of that HTML would look like:

First Column Header	Second Column Header	Third Column Header
Data in first column/first row	Data in second column/first row	Data in third column/first row
Data in first column/second row	Data in second column/second row	Data in third column/second row

Additional attributes like align, style, etc. can be used with many of these tags.
For more on building tables in HTML:

Q6: Add a table to one of your HTML pages (index.html or page2.html). You could create fictional data or add meaningful data from another source. What challenges did you face getting the table to display and function like you expected?

Using HTML Styles

HTML allows us to add style to our pages internally, or inline, using HTML tags.
We’ve already styled our pages a bit using the <h1> tag. <h1> designates preformatted text that is larger than the <p> or paragraph text. But, what if we want to add color or change the font on our page?

We can add style to individual HTML element tags using style attributes.
The syntax for style attributes is style="STYLE_PROPERTY:PROPERTY_VALUE;"
For example, if we wanted text characters in the H1 tag to be blue and center aligned:

 <h1 style="color:blue; text-align:center;">Hello World!</h1>

And if we wanted text in the p tag to have a light blue background and a different font:

 <p style="background-color:powderblue; font-family:courier;">This is my first HTML page.</p>

All style elements are enclosed in quotation marks and include a semicolon after each element.
To put that all together:

<body>
 <h1 style="color:blue; text-align:center;">Hello World!</h1>
 <p style="background-color:powderblue; font-family:courier;">This is my first HTML page.</p>
</body>

We can see how the style attributes are changing how the web page content displays:

The <h1> heading has has a blue text color and is center-aligned
The <p> content has a powder blue background color and Courier font

For more on HTML styles:

HTML Styles: https://www.w3schools.com/html/html_styles.asp
HTML Colors: https://www.w3schools.com/html/html_colors.asp

Q7: Take a look at the HTML Colors page listed above. Do you see anything familiar?

Q8: If you haven't already, experiment with modifying your existing HTML pages to include some of these style elements.

Using Cascading Style Sheets (CSS)

You can customize HTML using style attributes, but imagine you want all instances of the <h1> or <p> tag in your website to have the same formatting.
Doing this with style would require adding code every time you use these elements.
Cascading Style Sheets (CSS) provides a more elegant way to add these style attributes across the pages in our site.

For more on CSS: https://www.w3schools.com/css/css_intro.asp

For those familiar with website-building tools like WordPress, Weebly, or Wix, CSS is a main part of how different site "themes" are managed.
Let’s create a simple external CSS for our site.
The CSS is cascading because there is a hierarchy to the way that styles are applied.
If styles are defined within the document (as in the previous example), then they are applied before those in the stylesheet. This lets us override the stylsheet if there is particular content that we would like to style differently.

Creating and Implementing CSS

Open the already-existing style.css file from the htmltemplate.zip download.
The CSS file doesn’t contain any content, it only defines the styles for the various elements in HTML files.

Let's get started by adding a few styles for the background, <h1>, and <p>.
Each tag is defined first <body>, <h1>, and <p> in this example. These are referred to as the selectors.
Our style instructions for each tag are enclosed in { }. These are called declarations.
We can add as many style declarations as we would like in between the brackets, separating each with a semicolon. Each declaration has a property followed by a colon and then a value.
It is common practice to place each declaration on a new line and to indent the declarations, but this is only to make the file easier for us to read and edit. The spacing has no impact on how the computer reads and interprets the code.
Putting that all together:

body {
 background-color: lightblue;
 }
 
h1 {
 color: white;
 text-align: center;
}

p {
 font-family: courier;
 font-size: 20px;
}

Now we need to link the CSS to any HTML file where we want the style sheet to apply. This connection is called a reference.
Each HTML page must reference the CSS to apply it to the page.
We create this reference in the <head> of the HTML document with the other metadata.
In the <head> of index.html add the reference <link rel="stylesheet" type="text/css" href="mystyle.css">.

<head>
 <title>Page Title</title>
 <link rel="stylesheet" type="text/css" href="style.css">

This line can appear anywhere between the <head> and </head>.

The <link> tag is another way to create links to other documents.
In this case the rel attribute defines the relationship between the HTML file and the linking document.
The type defines the type and href contains the URL or location reference for the file.

To learn more about the <link rel> tag: http://www.w3schools.com/tags/att_link_rel.asp

THIS FIG STAYS

Open the index.html file in your browser to see the updated CSS.
However, if you click on the link to page2.html, it will look the same as it did before. This is because we need to link the stylesheet to each of the pages.
Add the same <link rel="stylesheet" type="text/css" href="mystyle.css"> to page2.html.
Now both pages should share the same style.

Q9: If you haven't already, experiment with creating a CSS and linking it to your HTML pages.

Creating a Website

Now, it’s time to build your own website. The lab procedure has covered the tools you can use to get started, but you can also expand on what you've learned using the W3Schools HTML and CSS resources and documentation (be sure to cite resources you consult or reference- a list of URLs is fine). The files, HTML, and CSS you have created while working through the lab procedure can be the starting point for this website.
For now, your site needs to fit a few minimum requirements.
First, the theme. Choose at least three media items—these can be books, articles, podcasts, films, songs, etc. Ideally, these three (or more) items will have something in common, but that connection is up to you.
Next, you are going to build a website about these items.
You need to meet the following requirements:

You need a landing page (index.html) that describes the items and provides a brief introduction to your site. For example, if you are presenting books from your favorite author you could provide a brief into to the author here. It doesn’t need to be extensive, but you want to include some content. Your landing page should also include some logo or image.
The landing page (index.html) must also link to three different pages, one for each of the items you have chosen.
Each of the item pages must include:
- A short description of the item. You may pull this description from another source (publisher, archives, Wikipedia), just be sure to cite the source and link back to it if it is online.
- A link to some related source on the web (Wikipedia, a book review or museum exhibit, for example) If you’ve pulled your description from another source, then the link to this source can serve as the link.
- A representative image.
The site also needs to include at least one table built in HTML (could be on any page)
You also need a CSS for your site. The CSS will be used across all four pages of content to standardize the look and feel of your site.

That’s it. You are free to be as creative as you’d like as long as you meet these requirements.
I encourage you to use the W3Schools pages as a guide for HTML (http://www.w3schools.com/html/) and CSS (http://www.w3schools.com/css/default.asp) as you design your site.
You’ll find tutorials for menus, tables, and other elements to jazz up your site. Feel free to borrow code and CSS from anywhere on the web. Have fun and experiment!
Submit the HTML files and relevant CSS as as .zip folder on Canvas, along with your answers to lab notebook questions.

Q9: Have you ever created a website before? Have you used a program like WordPress, Wix, SquareSpace, or Weebly? How is this process different? Reflect on the process of creating a website by working directly with the HTML.

Q10: Submit the HTML files and relevant CSS as as zip folder on Canvas.

Endnotes

^{1. “What is HTML?” http://www.yourhtmlsource.com/starthere/whatishtml.html.↩}

Lab Questions

Link to lab notebook template (ND users, Google Doc).

All of the required questions are listed here. Be sure to answer each question completely, including an explanation of how you arrived at your answer. Also submit the HTML files and relevant CSS as a .zip folder on Canvas.

Q1: Try to interpret a few of these errors in your own words. HINT: The W3Schools resources listed under step 15 provide more information or explanation on some of these errors.

Q2: Between the head tags, there are also a few meta tags. Use the W3C site to translate this information in your notebook. Some resources that can help you get started:

Q3: If you haven't already, modify index.html to include a link to a second HTML file. Next, add an image to index.html.

Q4: Move the image you added in Q4 into a new "Images" folder. What happens when you save and run the code? What would you need to modify in the HTML to correctly display this image?

Q5: Add a table to one of your HTML pages (index.html or page2.html). You could create fictional data or add meaningful data from another source. What challenges did you face getting the table to display and function like you expected?

Q6: Take a look at the HTML Colors page listed above. Do you see anything familiar?

Q7: If you haven't already, experiment with modifying your existing HTML pages to include some of these style elements.

Q8: If you haven't already, experiment with creating a CSS and linking it to your HTML pages.

Q9: Have you ever created a website before? Have you used a program like WordPress, Weebly, SquareSpace, or Wix? How is this process different? Reflect on the process of creating a website by working directly with the HTML.

Q10: Submit the HTML files and relevant CSS as as zip folder on Canvas.

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
images		images
README.md		README.md
hello_world.html		hello_world.html
htmltemplate.zip		htmltemplate.zip

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

HTML and CSS Lab

Lab Objectives

Acknowledgements

Table of Contents

What is HTML?

Hello World!

Creating an HTML File

Adding Content to `Index.html`

Building Additional Web Pages

Creating Links in HTML

Adding Images in HTML

Building Tables in HTML

Using HTML Styles

Using Cascading Style Sheets (CSS)

Creating and Implementing CSS

Creating a Website

Endnotes

Lab Questions

About

Uh oh!

Releases

Packages

Languages

jmtemple/HTML-CSS

Folders and files

Latest commit

History

Repository files navigation

HTML and CSS Lab

Lab Objectives

Acknowledgements

Table of Contents

What is HTML?

Hello World!

Creating an HTML File

Adding Content to Index.html

Building Additional Web Pages

Creating Links in HTML

Adding Images in HTML

Building Tables in HTML

Using HTML Styles

Using Cascading Style Sheets (CSS)

Creating and Implementing CSS

Creating a Website

Endnotes

Lab Questions

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Adding Content to `Index.html`

Packages