Presentation is loading. Please wait.

Presentation is loading. Please wait.

© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University

Similar presentations


Presentation on theme: "© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University"— Presentation transcript:

1 © Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University

2 © Anselm SpoerriInfo + Web Tech Course Lecture 5 - Overview HTML Elements –Recap: Hierarchy of Tags | Block and Inline Elements –div | id | class HTML5 –HTML5 Key New Features Cascading Style Sheet = CSS –Formatting Rules –Inline | Internal | External specification of CSS rules CSS3 –CSS3 Key New Features CSS Demo Lectures – Week 5 Content

3 © Anselm SpoerriInfo + Web Tech Course Recap & New – Web Basics: HTML Elements & Tags HTML is made up of elements Content (read as: open tag, content, close tag) Three major elements needed on HTML page - container for all of our HTML code - put data for browser and other machines - put content to show to the user Block-level elements  take up own space vertically (,,,,, ) page division and used style blocks of content Inline-level elements  placed inside other elements (,,,, …)

4 © Anselm SpoerriInfo + Web Tech Course Page Layout – DIVs Two methods for creating Web Page Layout ‒ Tables (last lecture) ‒ HTML5, DIVs and CSS (this lecture) Structure Your Pages URL URL ‒ Divide logical sections of document into div elements  Produces “linear / natural flow” of elements pageContent header navigation main content footer header content navigation content main content footer content

5 © Anselm SpoerriInfo + Web Tech Course Page Structure – Hierarchy & Naming Elements Hierarchical Structure of Web pages ‒ Elements contained inside another element (latter = parent, former = child) Naming Elements ‒ id="name" can be applied only once  unique # idName {…}define CSS rule ‒ class="name" can be applied many times. className {…}define CSS rule Useful with div (content blocks) and span (inline text) elements page content

6 © Anselm SpoerriInfo + Web Tech Course Page Layout – DIVs with IDs Name div elements with unique IDs pageContent header navigation main content footer text/images/links

7 © Anselm SpoerriInfo + Web Tech Course Page Layout – HTML5 tags Use tags that represent meaning of content elements pageContent header navigation main content footer text/images/links

8 © Anselm SpoerriInfo + Web Tech Course HTML5 – Intro Why HTML5? –Reduce the need for external plugins (like Flash) –Better error handling –More markup to replace scripting –HTML5 should be device independent –Based on HTML, CSS, DOM, and JavaScript What is HTML5 ‒ HTML5 specification – ‒ Officially Working Draft | “living standard” Browser Support for HTML5 –HTML5 not yet official standard, no browser provides full HTML5 support. –But all major browsers continue to add support for new HTML5 features. –Understanding & implementing features is what matters.

9 © Anselm SpoerriInfo + Web Tech Course HTML5 – New Capabilities Video specifies standard way to embed video (no plug-in) Audio specifies standard way to embed audio (no plug-in) Drag and Drop any element can be draggable what to drag | where to drop | do the drop Canvas used to draw graphics, on the fly, on web page SVG supported Scalable Vector Graphics to draw shapes Geolocation can determine user's position with permission Web Storage better local storage within browser than cookies Web Workers JavaScript runs in background without affecting page performance Server-Sent Events page gets automatic updates from server

10 © Anselm SpoerriInfo + Web Tech Course HTML5 – DOCTYPE | charset | lang | CSS & JavaScript links ‒ HTML5 DOCTYPE: ‒ not case sensitive | version dropped ‒ all browsers recognize shortened DOCTYPE & render in strict mode and deprecated elements will not work ‒ Specify Character Set: ‒ Specify Language: ‒ Script and Link Declarations: type attribute optional

11 © Anselm SpoerriInfo + Web Tech Course HTML5 – New Elements New Media Elements sound content video or movie multiple media resources for and container for external application or interactive content (a plug-in) text tracks for and New Form Elements –New form controls, like calendar, date, time, , url, search New Semantic / Structural Elements ‒ header, nav, aside, section, article and footer ‒ Focus on your content and consider semantics of each element ‒ Use div if you need containing element strictly for style purposes ‒ Some older browsers treat new elements like inline elements header, footer, nav, article, aside, section { display: block; }

12 © Anselm SpoerriInfo + Web Tech Course HTML5 – New Semantic / Structural Elements ‒ header element ‒ Used to contain headline(s) for a page and/or section. ‒ Can contain logos and navigational aids. ‒ nav element ‒ Contains major navigation links. ‒ Often contained by header. ‒ aside element ‒ Contains related information, such as sidebar or pull-quotes. ‒ section element ‒ Contains content that is related or grouped thematically. ‒ Only if its content has own self-contained outline (h1,… h6). ‒ Do not use simply for styling purposes – use divs and spans instead. ‒ article element ‒ Stand-alone content such as a blog entry. ‒ footer element ‒ Contains information about a page and/or section.

13 © Anselm SpoerriInfo + Web Tech Course HTML5 – Element Flowchart

14 © Anselm SpoerriInfo + Web Tech Course CSS Cascading Style Sheets = CSS ‒ Collection of Formatting Rules ‒ Control Appearance of web page : blocks and text ‒ Ensure a more Consistent Treatment of Page Layout and Appearance in Browsers ‒ Separation of Content from Presentation –Easier to Maintain Appearance since Make Change in Single Location –Simpler and Cleaner HTML code  shorter loading times

15 © Anselm SpoerriInfo + Web Tech Course CSS (cont.) Cascading Style Sheets (CSS) ‒ Control Text properties Specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; etc. ‒ Control Format & Position of Block-level Elements Set margins and borders for block-level elements; position them in a specific location; add background color; float text around them; etc. ‒ Liquid layouts : expand/contract based on Browser width. ‒ Easy to apply Same Layout to Whole Site and only need to modify external CSS file. ‒ Minus: Not all browsers support CSS the same way.

16 © Anselm SpoerriInfo + Web Tech Course CSS (cont.) CSS Style Sheet stored a)External CSS style sheet (.css file linked to page and using a link or rule in the head section of a document). b)Internal (or embedded) CSS style sheet (included in style tag in head portion of an HTML document). c)Inline styles (defined within specific tag instance in HTML document) Using Inline styles is not recommended. CSS Rule = Selector and Block of Declarations Enclosed by {...} brackets and separated by ; Declaration = Property: Value;

17 © Anselm SpoerriInfo + Web Tech Course CSS – General Structure of CSS Rule Basic syntax for Internal and External CSS: selector {property1: value1; property2: value 2;} HTML tag you want to modify Value you want property to take Property you want to change p { text-align: left; color: black; font-family: Arial; } causes Font to be left-aligned Font to be Arial and black

18 © Anselm SpoerriInfo + Web Tech Course CSS Rules – id and class Rules in Internal Style Sheet /* Comment: pageContent ID and define font to use for page and the top and left margins as well page width. This pageContent div contains all the other divs */ #pageContent { font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin-top: 10px; margin-left: 50px; width: 500px; } /* blue text class */.blueText { color:#009; }

19 © Anselm SpoerriInfo + Web Tech Course CSS Rules – id and class Rules Applied in Heading1 Open paragraph

20 © Anselm SpoerriInfo + Web Tech Course Location of CSS Style Definition Inline style (causes only the tag to have desired properties) Something blue Internal stylesheet (specific to a document) –Causes all tags in document to have property – tag inside tag of document p { font-family:Arial; color:blue;} External stylesheet (can control multiple documents) –Ensure consistent appearance of website

21 © Anselm SpoerriInfo + Web Tech Course CSS – Cascasde of How Rules are Applied Style Rules “Cascade” from broad to narrow: –Browser’s Default Behavior –External Style Sheet –Internal Style Sheet –Inline Style

22 © Anselm SpoerriInfo + Web Tech Course CSS3 – Intro CSS3 backwards compatible, don’t have to change existing designs. Borders Rounded, add shadow and use image as border. Backgrounds new background properties and greater control. Text Effects new features such as text-shadow or word-wrap. Fonts can use font you like by including font file on server. 2D Transforms move, scale, turn, spin and stretch elements. 3D Transforms format elements using 3D transforms. Transitions add effect when changing from one style to another, such as on mouseover or mouseout events. Animations specify CSS style rule and animation will gradually change from the current style to the new style. Multiple Columns can create multiple columns for laying out text. User Interface user can resize elements and other features supported.

23 © Anselm SpoerriInfo + Web Tech Course CSS Demo – Step 1 Step 1 ‒ Download “startPage.html” from ‒ Save “startPage” as “page1.html” in folder “week5” ‒ Create nested div structure pageContent, header, navi, content, footer ‒ Assign id name to div

24 © Anselm SpoerriInfo + Web Tech Course CSS Demo – Step 2 Step 2 ‒ Create Internal CSS Style Sheet ‒ Create CSS Rule for id="pageContent" font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin-top: 10px; margin-left: 50px; width: 500px; ‒ Create CSS Rule for class="blueText" color:#009;

25 © Anselm SpoerriInfo + Web Tech Course CSS Demo – Step 3 Step 3 ‒ Create CSS Rule for id="header" in HTML5 for font-size: 9px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #333; ‒ Create CSS Rule for id="navi" in HTML5 for font-size: 14px; background-color: #E1E3F7; padding: 5px; margin-top: 5px;

26 © Anselm SpoerriInfo + Web Tech Course CSS Demo – Step 4 Step 4 ‒ Create CSS Rule for id="content" in HTML5 for font-size: 12px; ‒ Apply class="blueText" tag inside div with id="content" ‒ Create CSS Rule for id="footer" in HTML5 for font-size: 10px; border-top-width: thin; border-top-style: solid; border-top-color: #666;


Download ppt "© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University"

Similar presentations


Ads by Google