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

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

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

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

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

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

CSS Colors Complimentary colors Paletton.com Adobe

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

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

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

CSS Margin Box Model Border Padding Content

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

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

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

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>

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

<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

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

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)

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

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

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

Information Architecture Types of Navigation Structural Categorical Relational Promotional Search

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

Copyrights Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of Computing . (ramseyjw@etsu.edu) 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.