jmd2144 – lesson 5 web design & new media. ‘div’ide and conquer one of the most versatile...

JMD2144 – Lesson 5Web Design & New Media

‘Div’ide and conquerOne of the most versatile

structure tags available is the <div> .. </div> tag

Short for <div>ision, it allows you to divide your page into containers (that is, different pieces)

It will come in handy when we learn CSS

Try thisBuild a skeleton html <body> <div style=“width: 50; height:50; background-color:red;”></div> <div style=“width:50; height:50; background-color:blue;”></div> <div style=“width:50; height:50; background-color:green;”></div></body>Run it and what do you see?Add another ‘box’ of yellow color under the

green

Link itThe smart use of <div> will

eventually allow you to create visual HTML objects like sidebars, menus, and more!

Just like images, you can make <div> clickable by wrapping them in <a> .. </a> tags

“span”tastic!While <div> allows you to divide

your webpage up into pieces you can style individually, <span> allows you to control styling for smaller parts of your page, such as text

If you want the first word of your paragraph to be red, you wrap each word in <span> .. </span> tags and make them red using CSS!

An example of span<p>This text is black, except this

is <span style=“color:green;”>green</span> and this is <span style=“color:red;”>red</span>!</p>

<span> is the man!These tags can be a little tricky, so

let’s go through one more timeColor is just one attribute you can

selectively change with <span> tags; you can also change font size, font family, and any other style attribute you can think of!

<p>My favorite font is ><span style=“font-family:Impact”> Impact</span>!</p>

Observe this code

<!DOCTYPE html><html> <head> <link type=“text/css” rel=“stylesheet” href=“stylesheet.css” /> <title>My Photo Page</title> </head> <body></body></html>

ExplanationIn the code, there is

stylesheet.css, an external fileThis file include a lot of ‘codes’ to

beautify or format the look of the webpage

Cell by cell If you need to create a photo page of yours,

maybe you will need nine cells (3x3) – 3 rows by 3 columns

<table><thead> <th colspan=“3”>My Photo</th></thead><tr> <td></td> <td></td> <td></td></tr> …Add 2 more rows, each rows with three columns

Nine pictures are worth 9,000 wordsFind nine pictures

◦It can be saved from an internet or image links or your own stock

In each cell, put it an imageCreate a link to each image

Seeing is believingEverything written in HTML “as it

is” results in pretty ugly The stylesheet.css tab contains

all the CSS styling information: where HTML elements should go, what color they should be, how big they should be, and more

If you’re on the internet, go to elearning and download web05.html file

Run the file and observe the outlook

In the coding, remove the  tags (the comments)

Run it againWhat is your comment?

What is CSS?Stands for Cascading Style Sheets A language used to describe the

appearance and formatting of your HTMLA style sheet is a file that describes how

an HTML file should look likeThe style sheets are cascading because

the sheets can apply formatting when more than one style applies

It means that, if you say all paragraphs should have blue font, and only one paragraph should have red font, it can be done

Where can you write CSS?CSS within HTML can be written three ways:

◦ embedded◦ internal◦ external

embedded is when the CSS is written line by line internal is having the <script> .. </script> tag

within the <head> tag which has all the CSS codes in it

external is having all the CSS code outside of the HTML file and having it called from inside the <head> tag

When you write external CSS file, you need to save it as .css

Why separate form from function?Two main reasons for separating

your form/formatting (CSS) from your functional content/structure (HTML)◦You can apply the same formatting

to several HTML elements without rewriting code (e.g. style=“color:red;” over and over

◦You can apply similar appearance and formatting to several HTML pages from a single CSS file

You don’t believe me?Download “web05_css1.html” and

“stylesheet.css” from elearningRun web05_css1.htmlOpen up stylesheet.css so that

you can modify the code◦add font-family:cursive; in the span

elementRun web05_css1.html againWhat difference do you observe?

Syntax to write CSSHTML element (Selector) { property: value; property: value;}E.g.p { color: blue; font-family: Arial; font-size: 20px;}In this case, all paragraphs in your HTML

file will be Arial, 20px size and in blue color

Embedded CSS

<!DOCTYPE html><html> <head> <style> p { color:purple; { </style> </head>

So you have all three types in HTMLThe priority is given to internal

(inline) stylingNext will be embeddedFinally, the external CSS will be

taken into account

External CSS: how to call it in your HTML filePut a <link> tag between the

<head> tagsIn the <link> tab, a type

attribute should be always be equal to “text/css”

A rel attribute should always be equal to “stylesheet”

A href attribute should point to the web address of your CSS file

One selector, many propertiesAnother cool advantage of CSS is that

you can set many properties for one selector

If you want to set a paragraph’s font, font color, and font size, you can simply writep {

font-family: Arial;color: green;font-size: 20px;

}

Try for sizeCreate a CSS to make paragraph

font color as green, font as Garamond and font size to 24 pixel

Many selectors, many propertiesCreate a CSS external file with these

properties, save it as stylesheet.css◦Make all the h3 headings red◦Set all the paragraphs to the Courier font

family◦The second paragraph contains text

between <span> .. </span> tags. Set the background color of that <span> to yellow

The HTML file can be downloaded from elearning website (web_css02.html)

Why is the semicolon important?It is important to remember to put a

semicolon (;) at the end of each lineThe semicolon tells CSS that one

property-value pair is over and it’s time to move on to the next one

Without semicolons, it’ll become confused and your page won’t look right

Also, don’t forget: all property-value pairs for selector are surrounded by curly braces ( { } )

What is wrong with this CSS syntax?h3 {

font-family: Verdanacolor: blue

)

p [font-family: Garamondfont-size: 16px

{

CommentsWhile it is important to get all your

syntax down correctly, it is also a good idea to write comments as you go along

Good comments will help remind you why you did something a certain way (or will help someone else out if they are reading your code)

HTML comments look like this:◦

A comment in CSS looks like this:◦ /* a comment in CSS */

Make changes to this code<!DOCTYPE html><html><head>

<title>Result</title></head><body><h1>Change me to Verdana.</h1><h3>Change me to Courier.</h3><p>Make me purple!</p></body></html>

InstructionsAdd a <link> to stylesheet.css

between your <head> .. </head> tagsChange the <h1> header’s font-family

to VerdanaChange the <h3> header’s font-family

to CourierMake the paragraph text color to

purpleAdd a comment to the CSS to

comment on anything you like

jmd2144 – lesson 5 web design & new media. ‘div’ide and conquer one of the most versatile...

Documents