1 / 34

Web Foundations

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 ? )

harva
Download Presentation

Web Foundations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Foundations Wednesday, September 25, 2013 LECTURE 1: Introduction

  2. 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

  3. 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!

  4. Web Foundations (BIT112/113) • Syllabus: BIT112, BIT 113 • Grading BIT112: 1000 points (Solo) • Grading BIT113: 1000 points (Team)

  5. 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/CSSlecture with hands-on time • Thursday: Brief Design lecture, followed by Team time • Last Week 12 • Final Portfolio Submission & Final Team Project Presentation

  6. Recommended Software/Hardware • Text Editors • PC • Notepad (comes with Windows) • Notepad++ http://notepad-plus-plus.org/ • UltraEdithttp://www.ultraedit.com/products/ultraedit.html • TextPadhttp://www.textpad.com • Mac • TextEdit(comes with OS X) • Coda http://www.panic.com/coda/ • BBEdit andTextWranglerhttp://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

  7. Recommended Software/Hardware • FTP Clients • PC • Core FTP http://www.coreftp.com • Filezillahttps://filezilla-project.org/ • CoffeeCup FTP http://www.coffeecup.com/free-ftp/ • Mac • Cross FTP http://www.crossftp.com • Transmit http://panic.com/transmit/ • Filezillahttps://filezilla-project.org/ Fire FTP (Firefox Add-On) https://addons.mozilla.org/en-US/firefox/addon/fireftp/

  8. 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

  9. 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

  10. Local Folder | Remote (Live) Folder

  11. HTML • DEMONSTRATION: Text File  HTML file • View in Notepad  Browser • Intro to tags • Russian Nesting Dolls • Concept applies to Tags and Directories!

  12. <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>

  13. <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>

  14. <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)

  15. 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 -->

  16. 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>

  17. <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. <BODY> <P>Here is some text </P> <P ALIGN="center"> Centered text </P> <P ALIGN="right"> Right-justified text </P> </BODY>

  19. 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.

  20. 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

  21. 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>

  22. 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>

  23. <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.

  24. Images <BODY> <imgsrc="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!"

  25. Images

  26. 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>

  27. 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>

  28. 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>

  29. 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>

  30. 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.

  31. 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>

  32. 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

  33. Cascading Style Sheets CSS1 (1996 Draft; 2000 Browser Support)to coincide with HTML4/XHTML1 CSS2 (1998 Draft; 2010 Browser Support) CSS3 (1999 Draft; 2012 Browser Support)to coincide with HTML5 http://faculty.cascadia.edu/cduckett/foundations/html5_no.html http://www.csszengarden.com/ faculty.cascadia.edu/cduckett/foundations/html5.html

More Related