1. 9 - High Points CSCI 1710 - Introduction to Web Development and Design
Lectures (CSS, HTML Tables, HTML Semantics, Information Architecture)

2. CSS Syntax selector { property: value; property: value; }
Example p { width: 450px; color: #A00; }

3. CSS
External <link rel=“stylesheet” href=“style.css”> (Head element) Embedded <style>…</style> (Head element) Inline <a style=“color:red” href=“#”>Link</a>

4. CSS Order of Operation Inline Embedded Linked Browser default
* Conflicting rules between different methods are resolved by the rule that is closest to (most recent rule) the element being modified

5. CSS Commenting /* This is a comment */
* Very important for maintainability of code

6. CSS
Colors Name (e.g., red, green, blue, maroon, etc.) Total of 147 defined Hex (e.g, #FF0000, #AAA, etc.) RGB (e.g, rgb(125,125,125), rgb(200, 0, 0), etc.) RGBA (e.g., rgba(200, 0, 0, .8), rgba(0, 40, 220, .4), etc.)

7. CSS
Colors Complimentary colors Paletton.com Adobe

8. CSS
IDs & Classes declaration ID #id:_someName Classes .class: someName

9. CSS IDs & Classes (associating with an element)
ID id=“_someName” Mostly for Javascript, now Only once per page Name must begin with a letter or underscore (_)
Classes class=“someName” Selective styles for multiple elements on a page Naming convention same as ID

10. CSS Box Model Block level elements only Nested box with four elements
Very important aspect of CSS
Block level elements only
Nested box with four elements
By default, content is just big enough, everything else is 0

11. CSS
Margin
Box Model
Border
Padding
Content

12. CSS Box Model - 4 ways to add white space:
padding-top: 10px; <--- One at a time
padding: 10px 15px; <--- Top/Bottom, Right/Left
padding: 10px; <--- Top/Right/Bottom/Left (all around)
padding: 10px 15px 10px 15px; <--- Top/Right/Bottom/Left (no commas)
* Also works with border and margin properties

13. CSS
Pseudo-classes
Add special behavior dynamically in response to user actions
Syntax a:hover { color: green; }
* Must define in order: link, visited, hover, active

14. Tables
Contained in <table>…</table> element Rendered row by row, <tr>…</tr> Each row has one or more cells, <th>…</th> or <td>…</td> Each row must have same # of cells

15. Tables - Syntax
<table> <tr> <!-- First row (may use <th></th>) --> <td>1st Cell</td> <td>2nd Cell</td> <td>3rd Cell</td> </tr> <tr> <!-- Second row --> <td>4th Cell</td> <td>5th Cell</td> <td>6th Cell</td> </table>

16. Tables - Another Way
<table> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> </table>

17. <table>. <tr>. <td>. </td>. <td>
<table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
Tables - A Third Way

18. Tables Spanning rowspan=“2” <--- Vertical - joins cells up & down
colspan=“2” <--- Horizonatal - joins cells left & right
*If complex, it helps to draw it out on paper before coding

19. HTML Semantics
New with HTML 5 Tag name provides information about what element contains Older browsers may not recognize
header nav section article aside footer (others)

20. HTML Semantics
article elements may be nested in section element section elements may be nested in article element Depends on content Either is valid

21. Information Architecture
What a site should contain
How content is organized
Primary elements
Organizing & labeling site content
Navigation
More work at beginning results in less pain later
Must conform to user’s mental model

22. Information Architecture
Critical IA Issues Labels & naming Structure of content Navigation between pages

23. Information Architecture
Types of Navigation Structural Categorical Relational Promotional Search

24. Information Architecture
Principles of Successful Navigation Easily learned Remain consistent Provide feedback Offer alternatives Economize action & time Clear & understandable labels

25. Copyrights
Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of Computing .
Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
Oracle is a registered trademark of Oracle Corporation.
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.
ERPsim is a registered copyright of ERPsim Labs, HEC Montreal.
Other products mentioned in this presentation are trademarks of their respective owners.