8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 1/20

TECH-UP WORKSHOP SERIES:

HTML + CSS (2)

Expanding the Horizon

Curriculum & Contents by Tech-Up

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 2/20

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 3/20

ARE YOU NEW?

•Web Browser  Chrome (10.X) / Firefox (4.X)

•Text Editor  ANY Text Editor e.g. TextEdit (plain text), Notepad  Preferably with syntax highlighting TextWrangler (Free, Mac) TextMate ($, Mac) NotePad++ (Free, Win) GEdit (Free, Linux)

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 4/20

REVIEW (1)

<i></i>! ! ! !<b></b>

<u></u>





<p></p>

<center></center>!<h1-6></h1-6>

italicbold

underlinesuper script

subscript

paragraph

align center heading

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 5/20

REVIEW (2)

<br /><a href=””></a>

<ol> or  <ul>!<li></li>...

</ol> or  </ul>

<img src=”” alt=””

width=”” height=”” />

line break link 

list

image

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 6/20

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 7/20

FANCY LINK SImage Link <a href=””><img src=”” /></a>

Relative Address

e.g.!!

<img src=”/image/chemistry.png”>! ! <a href=”../page.html”>

width/height 30px

http://www.chemistry.com

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 8/20

BONUS: AUDIO/VIDEO<audio or  <video!! ! ! !! src=””! ! ! ! ! ! ! ! source! controls! ! ! ! ! ! ! (optional)! autoplay! ! ! ! ! ! ! (optional)

! loop>!! ! ! ! ! ! ! ! (optional)Text! ! ! ! ! ! ! ! ! ! (alt text)</audio> or  </video>! ! ! !

* Different browsers support different types of media** Refer to: http://en.wikipedia.org/wiki/HTML5_video#Table

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 9/20

TABULAR GOODNESS!<table border=”” width=”” cellspacing=”” cellpadding=”” >

! <tr>! ! ! ! ! row! ! <th></th>!! header ! ! ...

! </tr>!! ! ! ! ! ! !! <tr>

! ! <td></td>!! data! ! ...

! </tr>

</table>! ! ! ! border 1

20

10

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 10/20

BONUS: CAPTION<table>

!!<tr>! ! <td>0</td>! ! <td>4</td>! ! <td>7</td>

! </tr>! ...

</table>

<caption>! Table 1: Bingo Board

</caption>

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 11/20

CAN I HAZ MORE PAGES?

<frameset cols=”” or  rows=””>!!

px or %! <frame src=”” />!! ! ! ! source html! ...

</frameset>

! ! ! ! * <frameset> and <frame> tags are not supported in HTML5

30%

70%

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 12/20

OMG!! WHAT, THEN?!<iframe

! src=””! ! ! ! ! ! ! source html! border=0 or  1!! ! ! (optional) border ! width=””! ! ! ! ! ! (optional) % or px

! height=””!! ! ! ! ! (optional) % or px! name=””>! ! ! ! ! ! (optional) % or px</iframe>!! ! !

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 13/20

FORMTASTIC (A.K.A. LABELS, BUTTONS & BOXES)

<form>! <input type=””>

! ...!! ! </form>

type=“text“, “password”, “submit”,

“search”, “radio”, “range”,

“checkbox”, “number”, ...

requiredmaxlength (text)

min/max (range, number)

placeholder

value

...

Please fill out this field

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 14/20

STYLIN’ UP!Style Attributestyle=”property:value;...”

  e.g. <body>, <p>, <table>, ...

Style Propertiesfont-: family, size, style, ...

text-: color, align, transform, ...

* http://www.w3schools.com/css/ 

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 15/20

GIVE ME A BREAK! I NEED SOME SPACE...

<span></span>!! ! group in-line elements no visual change great way to stylize

Pay attention to styles

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 16/20

THIS AGAIN?

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 17/20

SCREW THIS; I’M GOING HOME

Want to play a 10 by 10 bingo?How many table cells do you have to style?Doesn’t it sound fun?

You may ask: is there a better way?Of course!

Use CSS (Cascading Style Sheets)

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 18/20

We are not going to do it today.

Stay tuned.

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 19/20

USEFUL RESOURCES

W3C School - HTML5http://www.w3schools.com/html5/

W3C School - CSShttp://www.w3schools.com/CSS/

Color Hex Color Codeshttp://www.color-hex.com/

8/7/2019 Introduction to Web Development Lecture 2

http://slidepdf.com/reader/full/introduction-to-web-development-lecture-2 20/20

LAB: POWER UP, HTML!

Let’s put these pieces together.

Use all the concepts we learned so far to create a multi-page website

You may (and should) have:

•image link(s)

•iframe with menu for the next 3 items

•your introduction page with styling•table(s)

•form(s)