web foundations wednesday, september 25, 2013 lecture 1: introduction

34
Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1 : INTRODUCTION

Upload: beverley-long

Post on 04-Jan-2016

215 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Web FoundationsWEDNESDAY, SEPTEMBER 25, 2013

LECTURE 1: INTRODUCTION

Page 2: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Web Foundations (BIT112/113) Official Web Site: faculty.cascadia.edu/cduckett/foundations/

Class Times: Monday-Thursday 8:30am-10:35am (discussion about Tues/Thur: 8:30am or 8:45am ?)

Canvas: BIT112, BIT 113 (for Grade Tracking)

BIT112/113 Instructor Email: [email protected]

Instructor Office: CC1-042 (in alcove near the main entrance)

Instructor Office Hours: Tuesdays: 11am-1pm ; Thursdays: 11am-12noon; by Appointment

Page 3: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Web Foundations Cohort (16 Total Credits)

BIT112 (5 Credits): Craig Duckett BIT113 (5 Credits): Craig DuckettCMST105 (5 Credits): Danielle PowellBIT160 (1 Credit): Brian Bansenauer

The best way to think about and to work through this Web Foundations Cohort is to approach it as a single class, to consider it a unified whole, yet divided into separate synergistic sections each with their own areas of proficiency and skillsets. All these sections will work together to form an integrated unity that may not be apparent in the earlier stages of the course, but if you do the work and trust the process and the way each of the classes have been developed, by the end of the quarter you should see how all the individual pieces of the puzzle synch up and fit together to form a kind of grand scheme.

Personal Solo Development – Communication Skills – Project Development – Teamwork – Conflict Resolution – Career Research – Interviewing Clients – Resume Development – Cover Letter Writing – Elevator Speeches – and more!

Page 4: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Web Foundations (BIT112/113) Syllabus: BIT112, BIT 113

Grading BIT112: 1000 points (Solo)

Grading BIT113: 1000 points (Team)

Page 5: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Weekly Schedule Format First Two Weeks

Focus exclusively on HTML, FTP, and working on the HTML Lab, the FTP Lab, creating the Portfolio, doing a Critique Report & Heuristic Report, starting the Reflection Logs, and Intro to CSS

Weeks 3 through 11

Monday: HTML/CSS lecture with hands-on time

Tuesday: Design lecture, followed by Solo Lab time

Wednesday: HTML/CSS lecture with hands-on time

Thursday: Brief Design lecture, followed by Team time

Last Week 12

Final Portfolio Submission & Final Team Project Presentation

Page 6: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Recommended Software/Hardware Text Editors

PC◦ Notepad (comes with Windows)◦ Notepad++ http://notepad-plus-plus.org/ ◦ UltraEdit http://www.ultraedit.com/products/ultraedit.html ◦ TextPad http://www.textpad.com

Mac◦ TextEdit (comes with OS X)◦ Coda http://www.panic.com/coda/ ◦ BBEdit and TextWrangler http://www.barebones.com/

Adobe Dreamweaver http://www.adobe.com/downloads.html Adobe Creative Cloud for Students http://success.adobe-education.com/en/na/students.html

CAUTIONARY NOTE: Do not use a word processor like Microsoft Word or Apple Pages

Page 7: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Recommended Software/Hardware FTP Clients

PC◦ Core FTP http://www.coreftp.com ◦ Filezilla https://filezilla-project.org/ ◦ CoffeeCup FTP http://www.coffeecup.com/free-ftp/

Mac◦ Cross FTP http://www.crossftp.com ◦ Transmit http://panic.com/transmit/ ◦ Filezilla https://filezilla-project.org/

Fire FTP (Firefox Add-On) https://addons.mozilla.org/en-US/firefox/addon/fireftp/

Page 8: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Intro to Internet, WWW, and HTML

A Short Free-Form Lecture

History of Web (PowerPoint) Look at plain digital text file Look at a Word .docx file .zip file The "interpretation" of Markup Language

Page 9: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Web Lexicon The world wide web (www, or web) consists of millions of sites, each of which has a unique web address called a uniform resource locator, or URL (for example, http://www.google.com) Each site consists of many pages with related content Each page on a website can be viewed in a browser (such as Firefox, Chrome, Internet Explorer, Safari, or Opera) on a computer or on a mobile device such as a tablet or a smart phone. Web users navigate from one page to another via web links, also called hyperlinks

Page 10: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Local Folder | Remote (Live) Folder

Page 11: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION
Page 12: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

HTML DEMONSTRATION: Text File HTML file

View in Notepad Browser

Intro to tags

Russian Nesting Dolls Concept applies to Tags and Directories!

Page 13: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

<HTML><HEAD><TITLE>Rex Winkus's Portfolio</TITLE></HEAD><BODY><H1>Rex Winkus's Portfolio</H1><!-- Rest of page goes here. This is a comment. --></BODY></HTML>

Page 14: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

<HTML> <HEAD> <TITLE>Rex Winkus's Portfolio</TITLE> </HEAD>

<BODY> <H1>Rex Winkus's Portfolio</H1> <!-- Rest of page goes here. This is a comment. --> </BODY>

</HTML>

Page 15: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

<tag attribute="value">Hello</tag>

element

<BODY attribute="value">

Deprecated attributes (but still used)◦ BACKGROUND=“Sunset.jpg” (can be tiled)◦ BGCOLOR=color◦ TEXT=color◦ LINK=color (unvisited links)◦ VLINK=color (visited links)◦ ALINK=color (when selected)

Page 16: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

16

Headings

<H1> text </H1> <! -- largest of the six --><H2> text </H2><H3> text </H3><H4> text </H4><H5> text </H5><H6> text </H6> <!-- smallest of the six -->

Page 17: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

17

Headings<HTML><HEAD> <TITLE>Document Headings</TITLE></HEAD><BODY>Samples of the six heading types:<H1>Level-1 (H1)</H1><H2 ALIGN="center">Level-2 (H2)</H2><H3><U>Level-3 (H3)</U></H3><H4 ALIGN="right">Level-4 (H4)</H4><H5>Level-5 (H5)</H5><H6>Level-6 (H6)</H6></BODY></HTML>

Page 18: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

<P> Paragraph <P> defines a paragraph

Add ALIGN="position" (left, center, right)

Multiple <P>'s do not create blank lines

Use <BR> for blank line

Fully-specified text uses <P> and </P>

But </P> is optional

18

Page 19: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

19

<BODY><P>Here is some text </P><P ALIGN="center"> Centered text </P><P ALIGN="right"> Right-justified text </P></BODY>

Page 20: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

20

Fonts (the old way)

<FONT COLOR="red" SIZE="2" FACE="Times Roman">Line One</FONT>

<FONT COLOR="green" SIZE="4" FACE="Arial">Line Two</FONT>

<FONT COLOR="blue" SIZE="6" FACE="Courier">Line Three</FONT>

Note: <FONT> is now deprecated in favor of CSS.

Page 21: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Colors : RGB Hexidecimal Values for BGCOLOR and COLOR

◦ many are predefined (red, blue, green, ...)◦ all colors can be specified as a six character hexadecimal value: RRGGBB◦ #FF0000 – red◦ #888888 – gray◦ #004400 – dark green◦ #FFFF00 – yellow

http://www.w3schools.com/html/html_colors.asp

Page 22: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

22

Ordered (Numbered) Lists [see TYPE]

<OL> <LI>Item one</LI> <LI>Item two</LI> <LI>Item three</LI> <LI>Item four</LI> <LI>Item five</LI></OL>

Page 23: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

23

Unordered (Bulleted) Lists [see Type]

<UL> <LI>One</LI> <LI>Two</LI> <LI>Three</LI> <LI>Four</LI> <LI>Five</LI> <LI>Six</LI></UL>

Page 24: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

24

<A HREF> Anchors (HyperLinks)

Link to an absolute URL:

If you get spam, contact <A HREF="http:www.microsoft.com">Microsoft</A> to report the problem.

Link to a relative URL:

See these <A HREF="references.html">references</A> concerning our fine products.

Page 25: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Images

25

<BODY> <img src="dolphin.jpg">

This is a very cute dolphin!<br>This is a very cute dolphin!<br>This is a very cute dolphin!<br>This is a very cute dolphin!<br>This is a very cute dolphin!<br>This is a very cute dolphin!<br>

</BODY>

align="left" width="150" height="150" alt="Dolphin jump!"

Page 26: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

Images

26

Align=position

Image/Text Placement

Left Image on left edge; text flows to right of image

Right Image on right edge; text flows to left

Top Image is left; words align with top of image

Bottom Image is left; words align with bottom of image

Middle Words align with middle of image

Page 27: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

HTML1 (1993)

<A> <ADDRESS> <B> <BASE> <BLOCKQUOTE> <BODY> <CITE> <CODE> <DD> <DFN> <DIR> <DL> <DT> <EM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HTML> <I> <IMG> <ISINDEX> <KBD> <KEY> <LI> <LINK> <LISTING> <MENU> <NEXTID> <OL> <P> <PLAINTEXT> <PRE> <SAMP> <STRONG> <TITLE> <TT> <U> <UL> <VAR> <XMP>

Page 28: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

HTML2 (1995)

<A> <ADDRESS> <B> <BASE> <BLOCKQUOTE> <BODY> <BR> <CITE> <CODE> <DD> <DFN> <DIR> <DL> <DT> <EM> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <ISINDEX> <KBD> <KEY> <LI> <LINK> <LISTING> <MENU> <META> <NEXTID> <OL> <OPTION> <P> <PLAINTEXT> <PRE> <SAMP> <SELECT> <STRONG> <TEXTAREA> <TITLE> <TT> <U> <UL> <VAR> <XMP>

Page 29: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

HTML3.2 (1997)

<A> <ADDRESS> <APPLET> <AREA> <B> <BASE> <BASEFONT> <BIG> <BLOCKQUOTE> <BODY> <BR> <CAPTION> <CENTER> <CITE> <CODE> <DD> <DFN> <DIR> <DIV> <DL> <DT> <EM> <FONT> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <ISINDEX> <KBD> <LI> <LINK> <LISTING> <MAP> <MENU> <META> <NEXTID> <OL> <OPTION> <P> <PARAM> <PLAINTEXT> <PRE> <SAMP> <SCRIPT> <SELECT> <SMALL> <STRIKE> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TD> <TEXTAREA> <TH> <TITLE> <TR> <TT> <U> <UL> <VAR> <XMP>

Page 30: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

HTML4 (1998)

<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B> <BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <DD> <DEL> <DFN> <DIV> <DL> <DT> <EM> <FIELDSET> <FONT> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI> <LINK> <LISTING> <MAP> <MENU> <META> <NEXTID> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <SAMP> <SCRIPT> <SELECT> <SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TITLE> <TR> <TT> <UL> <VAR> <XMP>

Page 31: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

XHTML1 (2000) eXtensibleHTML<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B> <BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <DD> <DEL> <DFN> <DIV> <DL> <DT> <EM> <FIELDSET> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI> <LINK> <MAP> <META> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <SAMP> <SCRIPT> <SELECT> <SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TITLE> <TR> <TT> <UL> <VAR>

The main difference between XHTML1 and HTML4 is that all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other.

Page 32: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

XHTML1.1 (2001)

<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B> <BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <DD> <DEL> <DFN> <DIV> <DL> <DT> <EM> <FIELDSET> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <I> <IMG> <INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI> <LINK> <MAP> <META> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <RB> <RBC> <RP> <RT> <RTC> <RUBY> <SAMP> <SCRIPT> <SELECT> <SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TITLE> <TR> <TT> <UL> <VAR>

Page 33: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

HTML5 (2008 Working Draft; 2012 - ?)<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <ARTICLE> <ASIDE> <AUDIO> <B> <BASE> <BDI> <BDO> <BLOCKQUOTE> <BODY> <BR> <BUTTON> <CANVAS> <CAPTION> <CITE> <CODE> <COL> <COLGROUP> <COMMAND> <DATA> <DATAGRID> <DATALIST> <DD> <DEL> <DETAILS> <DFN> <DIV> <DL> <DT> <EM> <EMBED> <EVENTSOURCE> <FIELDSET> <FIGCAPTION> <FIGURE> <FOOTER> <FORM> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HEADER> <HGROUP> <HR> <HTML> <I> <IFRAME> <IMG> <INPUT> <INS> <KBD> <KEYGEN> <LABEL> <LEGEND> <LI> <LINK> <MARK> <MAP> <MENU> <META> <METER> <NAV> <NOSCRIPT> <OBJECT> <OL> <OPTGROUP> <OPTION> <OUTPUT> <P> <PARAM> <PRE> <PROGRESS> <Q> <RUBY> <RP> <RT> <S> <SAMP> <SCRIPT> <SECTION> <SELECT> <SMALL> <SOURCE> <SPAN> <STRONG> <STYLE> <SUB> <SUMMARY> <SUP> <TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH> <THEAD> <TIME> <TITLE> <TR> <TRACK> <U> <UL> <VAR> <VIDEO> <WBR> http://www.w3schools.com/tags/default.asp

Page 34: Web Foundations WEDNESDAY, SEPTEMBER 25, 2013 LECTURE 1: INTRODUCTION

CSS3 (1999 Draft; 2012 Browser Support)

to coincide with HTML5

CSS2 (1998 Draft; 2010 Browser Support)

CSS1 (1996 Draft; 2000 Browser Support)

to coincide with HTML4/XHTML1

Cascading Style Sheets

http://www.csszengarden.com/ http://faculty.cascadia.edu/cduckett/foundations/html5_no.html

faculty.cascadia.edu/cduckett/foundations/html5.html