wk2.1 Creating HTML in style: CSS

First, some more on HTML

Forms

<form>

action

method

  • Either get or post
  • get returns results in the URL (insecure).
  • post returns results in the metadata of the http response (more secure)

In [18]:
import requests
#r = requests.get('https://api.github.com/events')

# r.text

In [16]:
import requests
payload = {'key1': 'value1', 'key2': 'value2'}
r = requests.post("http://httpbin.org/post", data=payload) 
print(r.text)
r.url # note that the payload hasn't been dropped in to the url.


{
  "args": {}, 
  "data": "", 
  "files": {}, 
  "form": {
    "key1": "value1", 
    "key2": "value2"
  }, 
  "headers": {
    "Accept": "*/*", 
    "Accept-Encoding": "gzip, deflate", 
    "Content-Length": "23", 
    "Content-Type": "application/x-www-form-urlencoded", 
    "Host": "httpbin.org", 
    "User-Agent": "python-requests/2.7.0 CPython/3.5.0 Linux/3.19.0-28-generic"
  }, 
  "json": null, 
  "origin": "38.100.211.46", 
  "url": "http://httpbin.org/post"
}

Out[16]:
'http://httpbin.org/post'

<input>

type

  • <input type="text"> or simply <input> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
  • <input type="password"> is similar to the textbox, but the characters typed in by the user will be hidden.
  • <input type="checkbox"> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute (<input type="checkbox" checked> - the attribute doesn’t require a value), and makes the initial state of the check box to be switched on, as it were.
  • <input type="radio"> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute.
  • <input type="submit"> is a button that when selected will submit the form. You can control the text that appears on the submit button with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow">.

```name````

value

`<textarea>

  • <textarea rows="5" cols="20">A big load of text</textarea>

<select>

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option value="third option">Option 3</option>
</select>

Names

Name:

Comments:

Are you:

Male

Female

A chipmunk

asdfjkl

Now a quick detour to the developer tools

I would suggest looking at chrome dev tools, they're nifty

Also, look at this chrome guide to setting up your environment (they recommend getting sublime)

CSS

Why CSS?

http://www.csszengarden.com/

Three types of CSS

  • Internal
  • Embedded
  • External

In general don't do the first two.

External

To add an external stylesheet to your html insert the following into the head

<link rel="stylesheet" href="style.css">

Eg.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">

CSS Anatomy

Selectors, properties, and values

body {
    font-size: 14px;
    color: navy;
}

Colors

  • red
  • rgb(255,0,0) # Where did these numbers come from?
  • rgb(100%,0%,0%)
  • #ff0000
  • #f00

Check out Adobe color wheel for a sweet color tool.

Challenges

Work up to challenge 6: https://en.wikiversity.org/wiki/Web_Design/CSS_challenges

Uber Challenge! (to be turned in)

Steps

  • Make a new repo on YOUR github called HTML-CSS-practice
  • clone the repo to your account
  • Recreate the website below
  • push your finished website (including separate css files) to github
  • on your computer ## Recreate this website (I put it on slack)

In [ ]: