HTML and CSS Workshop

Today’s class is a quick overview (or refresher, for some of you) about HTML and CSS, the two languages that, along with Javascript, drive the internet.

This is a class on XML, so why do we need to learn anything about HTML and CSS? XML is machine-readable and human-readable … but it’s not much fun to read unless you are a real XML nerd. We encode texts and data in XML so that we can do things with them. One of things we can do with XML is make webpages – thus the need to know something about HTML and CSS.

In fact, HTML is now an XML-compliant language. Remember that HTML predates XML? Well, after the development of the XML specification in 1996, HTML continued to evolve. Like TEI, it became XML-compliant. So HTML 5 is actually xHTML.

The UVic Libraries Digital Scholarship Commons has an excellent tutorial written by Rich McCue on HTML and CSS. We’re going to work through a revised version of McCue’s tutorial today. It’s an 80-minute workshop, so we’ll do the 10-minute “pre-workshop” activities in class.

Here’s the starting page for the workshop: https://uviclibraries.github.io/html-css/.  

Note that the workshop asks you to install Atom on your laptop. We don’t need to do that because we can write HTML and CSS in Oxygen.

Overview of the Workshop 

  1. Watch videos together (https://uviclibraries.github.io/html-css/pre-workshop.html)
  2. Make a folder called html_workshop and save it to your UVic My Documents.
  3. Use Oxygen (File/New…) to make the following HTML pages and save them to the folder called html_workshop
    • about.html 
    • index.html 
    • images.html 

    • On the about.html page, add the following tags: 
        • <head> and <body> 

        • In <head>, add a <title>. 
            • The title tag goes within the head tag and will be the title of your webpage.

        • In <body>, experiment with: 
            • <h1>, <h2>, <h3>, etc for headers 
                • h tags are HTML heading tags. There are 6 types: “h1”, “h2, “h3”, “h4”, “h5”, and “h6”.

                • <h> is a child of <body> and a sibling of <p>

                • Inherently, h1 is styled as the largest text and h6 the smallest.

            • <p> for paragraphs 

            • <ul> for unordered lists (bulleted)

            • <ol> for ordered lists (numbered)

            • <li> for list items within <ul> and <ol>

            • <img src=”” alt=””/> for images 

        • You can do a bit of styling in the HTML file using these tags:
            • <del> puts a line through the string of text in the text node

            • <strong> boldfaces the string of text in the text node

            • <ins> underlines the string of text in the text node

            • <i> italicizes the string of text in the text node

            • <em> emphasizes the string of text in the text node (when combined with CSS)

            • <sub> produces subscript

            • <sup> produces superscript

        • At any time, you can use a browser on the lab computer to open your HTML file to see what it looks like so far.

    • In html_workshop, make another folder called images 

        • Add an image to your about.html page using the <img> tag. 
            •  Somewhere between the <body></body> tags, add <img src=”image.jpg” alt=”image description”>.

            • src means “source,” or the location your HTML browser will look to display the image. My image, “avaZuko.png”, is stored in the “images” folder. Between the quotation marks we put the filepath to our image file, which creates a link between our image and our HTML webpage. The path in my case is “images/avaZuko.png”. If you used another image file, then you would replace “avaZuko.png” with your file’s name. Note that if we ever move our image file to another folder we would break the link between the image and our HTML page.

            • alt means “alternate text” for an image, if the image cannot be displayed. What you put between the quotation marks will be displayed when the image fails to load. This text is also used by people who may have visual disabilities, who use screen reader software (↪).

        • Add your filepath and alternate text to your <img> tag.
            • When you have added your filepath and alternate text, you should have an <img> tag that looks something like this: <img src=”images/avaZuko.png” alt=”Zuko headshot with a frowning expression”>.

    • Make relative hyperlinks between your index.html and about.html pages. 
        • <a href=”index.html”>your link text here</a>

        • <a href=”about.html>your link text here</a>

    • In html_workshop, make a new folder called hello_css (or hello-css). 
        • In that folder, save a file called styling.css 

        • Link your about.html page to your styling.css file. 

        • Experiment with selectors, properties, and values. 

        • Experiment with class blocks. 

    Tips

    • At any time, you can open your HTML file in a browser by going to the folder where you have saved the file and clicking on it. It will open in your default browser. 
    • Oxygen will help you select the right HTML tag. Start with the opening < and see what Oxygen suggests.  

    Modifications of Rich McCue’s workshop for Oxygen:

    For “Getting Started”: Ignore steps 1-3
    For step 4, “Coding Time”:

    • DO create a folder named “html_workshop”
    • In Oxygen, go to File –> New… –> New document –> HTML 
    • Notice that the HTML template in Oxygen already has the HTML declaration, the root <html> element, and head, title, and body elements.

    Go directly to step 5, “Title Tag”

    Oxygen will do the indenting for you, so you can safely ignore the instructions about indenting.