HTML & CSS

We've previously used Google tools for portfolios: gmail, sites, docs. Next we will look at some of the details that make elements on web pages look the way they do.

HTML

HTML stands for Hyper Text Markup Language and is the set of instructions (loosely a language) used to make elements of web pages look a certain way by putting tags around them.

Read and Practice

Using the HTML tutorial site at http://w3schools.com/html go through HTML Introduction, Editors,

Then skim through the following topics:

Basic, Elements, Attributes, Headings, Paragraphs, Styles, Formatting, Quotations, Comments and Colors

specifically making note of the tags needed for the following:

paragraph, links, images, headings, line breaks, setting text to be in color, bold, or italics, indenting (like a quote), and how to mark something as a comment

Also pay attention to whether or not capitalization is important.

Activity

Use the above information as resources to create the following within a w3schools.com online editor window, customizing it as explained in the instructions. In your collaboration document (if you are using one) on the left put the raw HTML, and on the right put a screenshot of what your page looks like. For instance, for some simple HTML your page might look like the following:

First take a look at what the final page should look like. Below that is the text you can use to start with, and instructions to take you through it a step at a time.

First here is what the final product should look like, combining text in bullet-point and numbered lists, with bold and itallics text, with indentation and different sizes of text as well:

Instructions

Put your group member names in bold at the top of the page. You should likely split up the work so you can get it done in time, with different group members investigating what tags are needed for different items.
Make a top-level heading called Lists
Make an indented sub-heading of Lists called Bumper Stickers. Add the following (or others) as a bullet list, highlighting your favorite in italics:

My karma ran over your dogma

Honk if you do everything you're told

When it comes to thought, some people stop at nothing

Honk if you're illiterate

Dyslexics of the world UNTIE

Archeologists will date any old thing

All generalizations are false

Hong if you love peace and quiet

Remember you are unique, just like everyone else

Make a second indented sub-heading of Lists called Top Billboard Songs. You can use your own category of favorite songs instead of this list if you want to. Make it a numbered list:
1. 1. The Twist (1960) by Chubby Checker
  2. Smooth (1999) by Santana and Rob Thomas
  3. Uptown Funk (2015) by Mark Ronson and Bruno Mars
  4. How Do I Live (1997) by Leann Rimes
  5. Party Rock Anthem (2011) by LMFAO, Lauren Bennett & GoonRock
  6. I Gotta Feeling (2009) by The Black Eyed Peas
  7. Macarena: Bayside Boys Mix (1996) by Los Del Rio
  8. Shape of You (2017) by Ed Sheeran
  9. Physical (1981) by Olivia Newton-John
Highlight in red the couple of songs from this list that is least familiar to your group. Make at least one song title into a link to a YouTube version of that song, preferably for the song that most makes you want to move.
Make a second top-level heading called Jokes. Indent everything within this section. Give the link to the website where your jokes came from.
Then further indent three paragraphs, where each one is a short joke.
Time permitting, add a third top-level heading for Pictures. Add one for each of the following:
1. Most beautiful view
2. Most delicious food
3. Funniest looking pet

Manual creation of an html file

- 1. On Windows we can use Notepad to create an html file.
  2. On a Mac TextEdit. To get this to work properly go into TextEdit --> Preferences and make sure to select "Ignore rich text commands in HTML files. The close the program and reopen it to make sure this setting takes effect.
  3. Example of using a simple text editor to create html:
    - Starting out: Tags for <html> <head> <body> <p>
    - Headings use <h1> <h2>... tags
    - We can change the appearance of text using <b> and <i>
    - A line break is created using <br>
    - We can indent a section of code using <blockquote>
    - A horizontal rule line can be created using <hr>
    - A bullet list (unordered list) is created using <ul>, and a numbered (ordered) list uses <ol>
    - Tables <table> and links (anchors) <a> and images <img> can be incorporated

Activity: With a partner use the above information as resources to create a page like this page.

CSS

CSS stands for Cascading Style Sheets and is a way to separate the formatting from the actual content of web pages. In our example below we will create a file called cssformatting.html that takes its formatting from a separate file called stylesheet.css

First create a file called cssformatting.html that starts out with the following:

<html>

<head>

type="text/css"

href="stylesheet.css" />

</head>

<body>

<li>Likes</li>

<li>Movies</li>

<li>Jean de Florette</li>

<li>Total Recall</li>

</ol>

<li>Music</li>

<li>Tommy Emmanuel</li>

<li>Keith Jarrett</li>

</ol>

<li>Books </li>

<li><i>The Agony and the Ecstasy</i> by Irving Stone</li>

<li>Just about any historical fiction by James Michener</li>

<li><i>Ringworld</i> by Larry Niven</li>

<li>The <i>Ender's Game</i> series by Orson Scott Card</li>

</ol>

<li>Dislikes</li>

</ol>

</body>

</html>

(Note the bold text stylesheet.css (5th line down from top) which is what we will change later on.)

Now create a second file in the same directory called stylesheet.css that doesn't contain anything. Then open cssformatting.html in your browser. In your browser it should look like:

Now change stylesheet.css to be the following:

body {

background-image:url('http://logos.cs.uic.edu/reed/PERSONAL/pics/ReedPortrait.JPG');

background-repeat:no-repeat;

background-position:right bottom;

}

h1 {color:blue; font-size:40pt;}

ol.I {list-style-type:upper-roman;font-size:16pt;color:green}

ol.A {font-size:14pt;list-style-type:upper-alpha; margin-left:10px;color:red}

then reload cssformatting.html in your browser. It should now look like:

Note that changing the stylesheet allows us to change the appearance of a web page without changing the underlying html. The advantage of having the stylesheet (e.g. stylesheet.css) in a separate file is that the style can be applied to multiple other html pages.

It is also possible to embed the stylesheet inside the <head> tag of the html, by using the <style> tag. Doing this in the original cssformatting.html file would would change the <head> portion to look like:

<head>

<style>

body {

background-image:url('http://logos.cs.uic.edu/reed/PERSONAL/pics/ReedPortrait.JPG');

background-repeat:no-repeat;

background-position:right bottom;

}

h1 {color:blue; font-size:40pt;}

ol.I {list-style-type:upper-roman;font-size:16pt;color:green}

ol.A {font-size:14pt;list-style-type:upper-alpha; margin-left:10px;color:red}

</style>

</head>

This "embedded" approach is what is used in the helpful CSS tutorial pages at http://w3schools.com/css/

Activity: With a partner (and yes you must have a partner) create the style sheets that modify the appearance of the original html page simply by changing the link to which stylesheet is used.

Create two additional style sheets (call them ugly.css and nice.css). Modify ugly.css to make it as ugly as possible (see left below) and conversely modify nice.css to make it as aesthetically pleasing as possible (see right below). The nice version should include outline numbering. To "trigger" the use of a particular style sheet simply replace the file name stylesheet.css with the name of the new style sheet to use inside the <link> tag:

type="text/css"

href="stylesheet.css" />

Gradient image from here.

Ugly dog picture from here.

Image editing for the Web

Go to http://www.photoshop.com/tools. Near the upper-right select the "Online Tools" menu, then the "Photoshop Express Editor". Play, have fun, and be creative with your pictures!

The process to extract an image using GIMP can be seen on this page.