Class on HTML, Forms and CSS¶

Where are we in the course? We understand how to talk to MySQL and make it do what we need. Now we need to work a little on the front end, particularly forms.

Next topic: Python/Flask scripts that can talk to MySQL

Outline¶

• Please sit with your H4 ER partner
• Announcements
• (10) HTML talk-through
• (10) Quiz questions
• (15) Forms; GET vs POST discussion
• HTML/Forms exercise

Announcements¶

• H2 Queries is graded; people did well. A few notes:
  • Be careful to get the WHERE condition right:
    • %2010% is too broad
    • %(2010)% is almost right
    • %(2010) is best
  • Group by ID rather than things that might not be unique, such as name or title. That's what ID is for.
  • Always put your name on your work
  • Always document
• H3 Contacts
  • Please submit to Gradescope as well
  • Lots of people are still working on this; you have company
  • The crucial part is the setup of the tables and the referential integrity. The queries are usually the easy part.
  • Referential Integrity is about a relationship between tables (typically 1-to-many) where the 1 is a minimum (can't be zero):
    • owners and pets
    • albums and tracks
    • actors and acting credits
    • movies and cast credits
    • people and hobbies?
• P0 Ideas due Wednesday. I'm happy to consult if you want.
• H4 due Wednesday. We'll have time in class to work on it.

HTML, FORMS and CSS¶

• Bottom line: Less than half know HTML; a lot don't. Similar for CSS.
• This is consistent with past semesters.
• Historically, that's been fine. HTML and CSS have not been a problem.
• So relax. We'll learn enough to do what we need to do in CS 304.
• But I encourage you to learn more!

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.
• Use valid code. This helps avoid bugs and improves accessibility.

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

Navbar Markup¶

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 fred

Quiz Questions¶

Many people feel pretty comfortable with this material, but some don't. We'll spend the time we need. If you're still feeling uncomfortable, please talk to me or a tutor. It is okay not to be great at this.

• 2 strongly disagree
• 2 disagree
• 9 neither
• 9 agree
• 1 strong agree

This is a good time to answer your quiz questions.

Code for Today¶

cd ~/public_html 
cp -r ~cs304flask/pub/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 later in the course.

Forms Recap¶

Most of you don't know much, if anything about HTML forms, which are important in this course.

They allow data to be submitted to the server (your back-end code) for processing

The FORM tag is a wrapper for all the inputs

(The technical term is controls, which encompasses things like buttons ans such, but that's unintuitive, so I'll call them inputs.)

The FORM tag needs:

• ACTION: the script to process the data. We will use /~cs304flask/cgi-bin/dump.cgi today, just for demo purposes. Later in the course, we'll write back-end code to process the data.
• METHOD: options are GET and POST. See below.

The form also needs some inputs. Every input needs a name, because the server needs to receive name-value pairs. (Unless you aren't sending the data to the server; e.g. a button.)

For best accessibility, inputs should also have a label, either

• wrapped around the input, or
• paired with it using an id on the input and for=id on the label

Kinds of inputs:

• input type=text
• input type=password
• select and option for pull-down menus.
• textarea for bigger text blocks.

You can also do radio buttons and checkboxes, but these are a bit more complicated and not as common. If you want them, find an online tutorial and talk to me.

Needs a input type=submit or <button></button> to create a submit button.

Sample Form¶

Here are the sample forms in your downloaded folder:

• sample form get
• sample form post

We'll look at it together using VS Code, and also in the browser using view source, and consider:

• Names and Values
• method
• action
• submit buttons
• label
• the required attribute

GET vs POST¶

• This is an important and often confusing topic.
• Both are a kind of request sent from browser to server.
• The difference is the format of the request, but also in how the request is treated by the browser and server.
• One metaphor: GET is like a postcard and POST is like an big manila envelope

GET:

• information is in the URL of the request
• should just read information from the server, not update any data on the server
• can be cached
• should be small in length (less than 1024 characters)

POST

• information is in the body of the request
• could update information on the server
• should not be cached
• could be arbitrarily large

HTML/Forms 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).

Validators¶

We'll validate these pages against three validators:

• HTML validator
• CSS validator
• WAVE accessibility evaluator

There are videos about these in our videos.

CSS¶

We won't have time for CSS in class. Try the following on your own.

Even fewer confessed to a knowledge of CSS. 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
  • descendant: like NAV A
  • child: like #SITE_NAV > UL > LI

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 form that is in your downloaded folder. Here's part of what we did:

        #tim_form {
            margin: 2em;
            border: 3px solid teal;
            padding: 2ex 1em;
            background-color: #ccffff;
        }

        label {
            font-weight: bold;
        }

        .tim {
            color: purple;
        }

CSS Exercise¶

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.