web foundations wednesday, september 25, 2013 lecture 1: introduction
Post on 04-Jan-2016
215 Views
Preview:
TRANSCRIPT
Web FoundationsWEDNESDAY, 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: cduckett@cascadia.edu
Instructor Office: CC1-042 (in alcove near the main entrance)
Instructor Office Hours: Tuesdays: 11am-1pm ; Thursdays: 11am-12noon; by Appointment
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!
Web Foundations (BIT112/113) Syllabus: BIT112, BIT 113
Grading BIT112: 1000 points (Solo)
Grading BIT113: 1000 points (Team)
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
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
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/
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
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
Local Folder | Remote (Live) Folder
HTML DEMONSTRATION: Text File HTML file
View in Notepad Browser
Intro to tags
Russian Nesting Dolls Concept applies to Tags and Directories!
<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>
<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>
<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)
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 -->
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>
<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
19
<BODY><P>Here is some text </P><P ALIGN="center"> Centered text </P><P ALIGN="right"> Right-justified text </P></BODY>
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.
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
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>
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>
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.
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!"
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
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>
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>
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>
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>
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.
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>
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
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
top related