Scribd
Upload
106 views

Introduction To Web Development Lecture 2

[Tech-Up] Introduction to Web Development Lecture 2: Expanding the Horizon - Fancy Links - Tabular Goodness - What?! I Can Haz Many Pages? - Labels, Boxes, and Buttons - Stylin' Up! - Can I Make This More Efficient? [Lab] Power Up, HTML!

Uploaded by

Tech-Up
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
106 views

Introduction To Web Development Lecture 2

[Tech-Up] Introduction to Web Development Lecture 2: Expanding the Horizon - Fancy Links - Tabular Goodness - What?! I Can Haz Many Pages? - Labels, Boxes, and Buttons - Stylin' Up! - Can I Make This More Efficient? [Lab] Power Up, HTML!

Uploaded by

Tech-Up
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

TECH-UP WORKSHOP SERIES:

HTML + CSS (2)

Expanding the Horizon

Curriculum & Contents by Tech-Up


ME...
President, C.E.O. & Founder, Tech-Up

Eric @mugmania @techupnyc

...YOUR LAB PARTNERS


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)
REVIEW (1)
<i></i>! ! ! ! italic
<b></b> bold
<u></u> underline
superscript
<sup></sup>
<sub></sub> subscript

<p></p> paragraph
<center></center>! align center
<h1-6></h1-6> heading
REVIEW (2)
<br /> line break
<a href=””></a> link
<ol> or <ul>! list

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

<img src=”” alt=”” image


width=”” height=”” />
LAB: HELLO, HTML!
Introduce yourself to the world...
Use all the concepts we learned so far to create your own
personal page.

You may (and should) have:


•formatted texts
•headings
•paragraphs
•(ordered/unordered) lists
•images
•link to other pages and anchors within the page
FANCY LINKS
Image 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
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
TABULAR GOODNESS!
<table border=”” width=”” cellspacing=”” cellpadding=””>
! <tr>! ! ! ! ! row
! ! <th></th>!! header
! ! ...
! </tr>!! ! ! ! ! ! !
! <tr>
20
! ! <td></td>!! data
! ! ...
! </tr> border 1
</table>! ! ! !

10
BONUS: CAPTION
<table>
! <caption>

! Table 1: Bingo Board

</caption>
! <tr>
! ! <td>0</td>
! ! <td>4</td>
! ! <td>7</td>
! </tr>
! ...
</table>
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%
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>!! ! !

FORMTASTIC (A.K.A. LABELS, BUTTONS & BOXES)
<form> type=
“text“, “password”, “submit”,
! <input type=””> “search”, “radio”, “range”,
! ...!! !



“checkbox”, “number”, ...
</form> required
maxlength (text)
min/max (range, number)
Please fill out this field placeholder
value
...
STYLIN’ UP!
Style Attribute
style=”property:value;...”
e.g. <body>, <p>, <table>, ...

Style Properties
font-: family, size, style, ...
text-: color, align, transform, ...

* http://www.w3schools.com/css/
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


THIS AGAIN?
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)
We are not going to do it today.

Stay tuned.
USEFUL RESOURCES
W3C School - HTML5
http://www.w3schools.com/html5/

W3C School - CSS


http://www.w3schools.com/CSS/

Color Hex Color Codes


http://www.color-hex.com/
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)

You might also like