Introduction to Web Development Lecture 3
Transcript of Introduction to Web Development Lecture 3
-
8/7/2019 Introduction to Web Development Lecture 3
1/17
TECH@NYU WORKSHOP SERIES:
HTML + CSS (3)
Suit up!
Curriculum & Contents by Tech-Up
-
8/7/2019 Introduction to Web Development Lecture 3
2/17
ME...
...YOUR LAB PARTNERS
Eric
Tech@NYU E-Board
@mugmania @techupnyc
-
8/7/2019 Introduction to Web Development Lecture 3
3/17
ARE YOU NEW?
Web Browser Chrome (10.X)
Text Editor ANY Text Editore.g. TextEdit (plain text), Notepad Preferably with syntaxhighlightingTextWrangler (Free, Mac) TextMate ($, Mac) NotePad++ (Free, Win) GEdit (Free, Linux)
-
8/7/2019 Introduction to Web Development Lecture 3
4/17
REVIEW (1)
Image Link
< =http://www.mysite.com>! < src=logo.png />< >
Relative Address
a href
img
/a
../images/logos/
-
8/7/2019 Introduction to Web Development Lecture 3
5/17
REVIEW (2)Table
< >
< >
< >Name
< >Startup Week?
< >
< >Eric Hong
< >Hell, yeah!< >
table border=1 cellpadding=20px
tr
th th
th thtr
tr
td td
td td/tr
table
20 px
-
8/7/2019 Introduction to Web Development Lecture 3
6/17
REVIEW (3)
Form
< >< type= 140>
< type= Tweet>
forminput text maxlength=
input submit value=
form
-
8/7/2019 Introduction to Web Development Lecture 3
7/17
HISTORY OF CSS
World Wide Web Consortium (W3C)
...
(1995)
HTML
4.0HTML5
XHTML
1.X
XHTML
2.0 XHTML5
HTML5
CSS 1
(1996)CSS 2 CSS 3
-
8/7/2019 Introduction to Web Development Lecture 3
8/17
CODING SOUNDS SICK!What is CSS?
Cascading Style SheetsControl look and feel of web documentsApply one style to many elements
Apply one style to many styles (CSS)Apply a set of styles to many documents
Why should we use CSS?Separate style from contentControl look and feel more efficientlyGain flexibility and consistency
-
8/7/2019 Introduction to Web Development Lecture 3
9/17
CSS IN 3 FLAVORS! (1)
In-linestyle= attribute
Weve already seen this!
Cannot apply one style to many elementsUse to override or apply style for one element
-
8/7/2019 Introduction to Web Development Lecture 3
10/17
CSS IN 3 FLAVORS! (2)
CSS Syntax & Tag
Element
{Property Value(s)
: ; ... } CSS Declarations
-
8/7/2019 Introduction to Web Development Lecture 3
11/17
CSS IN 3 FLAVORS! (2)
Tag
Much better!Cannot apply to many documents
Does not separate content from style
background:#BADA55
padding:20pxtext-indent:50px
Color Hex Color Codeshttp://www.color-hex.com/
http://www.color-hex.com/http://www.color-hex.com/ -
8/7/2019 Introduction to Web Development Lecture 3
12/17
CSS IN 3 FLAVORS! (3)
External CSS File
-
8/7/2019 Introduction to Web Development Lecture 3
13/17
VS VS
Serves as content containerFormats content like a paragraph (paragraph break)
Serves as in-line style container
Serves as block-level style container
-
8/7/2019 Introduction to Web Development Lecture 3
14/17
GIVE ME A BREAK!I NEED SOME SPACE...
!! ! group in-line elements no visual change great way to stylizePay attention to styles
-
8/7/2019 Introduction to Web Development Lecture 3
15/17
TEXTING WITH STYLE
font: Helveticacolor:#BADA55
size: 30pxhttp://www.nyustartupweek.com
indent: 50pxalign: justify
Textcolor: (color - name, rgb, HEX)text-align: center, right, justifytext-indent: (value)
text-transform: uppercase, lowercase, capitalize
Font
font-family: (value)font-size: (value)
font-style: normal, italic, oblique
-
8/7/2019 Introduction to Web Development Lecture 3
16/17
USEFUL RESOURCES
W3C School - HTML5http://www.w3schools.com/html5/
W3C School - CSShttp://www.w3schools.com/CSS/
Color Hex Color Codeshttp://www.color-hex.com/
http://www.color-hex.com/http://www.w3schools.com/html5/http://www.color-hex.com/http://www.color-hex.com/http://www.w3schools.com/html5/http://www.w3schools.com/html5/http://www.w3schools.com/html5/http://www.w3schools.com/html5/ -
8/7/2019 Introduction to Web Development Lecture 3
17/17
LAB: BLING BLING, HTML!
Lets put these pieces together.
Use all the concepts we learned so far to make your page
that you made prettier!
You should have:
External CSS file
Link tagFont/Text CSS Styling