Welcome!
Everything is fine.

Class on HTML and CSS

This will get you started.

Outline

  • Announcements
  • HTML and CSS intro
  • HTML exercise

Announcements

  • Sorry; I didn't send out the "getting to know you" forms. I will today
  • Video Introduction over the weekend
  • How We Learn
  • Part 1 of Prereq exam next Wednesday

How We Learn

  • Be careful of copy/paste.
  • Avoid control-f for the reading quizzes
  • How to use Google, Stack Overflow, even ChatGPT

HTML Recap

HTML is a markup language, which means it's about structure and labeling things

  • KISS: keep it simple
  • You can use Bootstrap, etc. if you want and are comfortable with them
  • Use valid code. This helps avoid bugs and improves accessibility.
  • I'm happy to help. You can also search for templates, but be sure to learn from them.

Quiz Questions, part 1

Almost everyone felt very comfortable with this material, which is great! [0 0 0 11 6]

  • Unfortunately, the links to the CSS material didn't work. I'm very sorry about that.
  • (FYI, they were links to a material in a course that has been retired and archived since last spring.)
  • Please feel free to email me the moment you notice mistakes like that, because I might be able to fix them quickly.
  • I've now fixed these, and I can talk more about CSS today

I'll answer your html quiz questions

Web Pages

Here is a very simple page that you will copy later.

We'll take 10 minutes to look at it, view source and review terminology like:

  • tag
  • attributes
  • values
  • header
  • containers like DIV and OL

Common Tags

  • html, head, body, title
  • h1, h2
  • p
  • ul, ol, li
  • section
  • nav
  • div, span

There are lots of CSS formatting issues to make it pretty, but the basic markup is like this:

<nav>
    <ul>
        <li><a href="fred.html">Fred</a></li>
        <li><a href="george.html">George</a></li>
    </ul>
</nav>

You will see this in the files in your downloaded folder, like page2.html

Code for Today

I recommend working remotely, on the server:

cd ~/public_html 
cp -r ~cs304node/public_html/downloads/web-pages web-pages
opendir web-pages
cd web-pages

The opendir command makes sure that the permissions are okay. You won't have to worry about it once we are working in the back end, but you will need it while we are working on the front end. So, anytime you're working in your public_html folder, you may want to keep that command handy.

HTML Exercise

Note that we will be using your public_html folder today, rather than your cs304 folder. That's just for today. We'll return to your cs304 folder next time.

Why? Because files in public_html are on the web and will be served by Apache (our software for handling requests for web pages, called a web server).

  1. View the page2.html file that you copied.
  2. edit the HTML file to add a paragraph with some text. Save your work.
  3. switch to the browser and shift+reload it
  4. switch to VS Code and add an h2 header and reload
  5. save the file to another name, maybe page1.html and create a navbar linking the two pages. Feel free to copy/paste the code above.
  6. Test the navbar.

Validators

We'll validate these pages against three validators:

Let's also validate invalid.html

There are videos about these in our videos.

CSS

We may not have time for CSS in class; we'll see. If not, try the following on your own.

Let's look at the CSS for the page1.html and discuss:

  • selectors: tag, id, class
  • properties and attributes

CSS Recap

CSS is important to us, not just for the look and layout of the page, but because CSS will allow us to have elements appear and disappear when we want.

  • CSS rules consist of a selector and then property-value pairs, separated by semi-colons. See W3Schools, MDN and other resources for various properties and values.
  • The selector can be
    • TAG: like nav, em or a
    • ID: like #site_nav or #toc
    • CLASS: like .drop_down or .row
  • Popular properties include:
    • font-family, font-size
    • color
    • background-color
## Quiz Questions, part 2 Now I'll answer your [CSS quiz questions](../../quizzes/quiz01-css.html)

Box Model

The box model is important for layout. From outside to in, we have:

  • margins
  • border
  • padding
  • content/width

Confusingly, an element with any of these outer things is wider than its width. Think about it as the inside versus the outside dimensions of a shipping container.

Use the Developer Tools to dig deeper and to debug

This course is not (primarily) about aesthetically beautiful websites. Don't let this become a tarpit for you. Nevertheless, I understand the appeal of the eye candy.

CSS Example

Above, we put some styling on that sample page that is in your downloaded folder. Here's part of what we did:

BODY {
   font-family: Verdana, Arial, sans-serif;
   font-size:  medium;
   width: auto;
   max-width: 55em;
   background-color: beige;
}

/* The following means that all the header tags will share these
properties. */

H1, H2, H3, H4, H5, H6 {
    font-family: Verdana, Arial, sans-serif;
    color: teal;
    }

/* The following apply to particular header tags.  */

H1 { font-size: xx-large; }

H2 { font-size: x-large; font-weight: bold; border-bottom: 1px solid teal }

.fruit { color: red; }
.veggie { color: green; }

CSS Exercise

  • style a tag in some way, say LI or P
  • add a class to two elements and style them, say font-style: italic
  • add an ID to something and style it, say blue

Learning More

If you want to learn some specific thing, like say, clickable drop-down menus, I would go to W3Schools.

Summary

  • Knowing some HTML is necessary but not that hard.
  • Forms are a little trickier, but still not too hard.
  • CSS is nice but not essential. Pick up a few simple skills, like colors, borders, margins and padding.
  • It's nice to have someone with CSS skill on your project team, but don't outsource all the CSS to them. Have them teach the others.