Techniques for Better Web Development Ben Scheirman Blog:

Slides:

Advertisements

Similar presentations

Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.

Advertisements

Cascading Style Sheets

Today CSS HTML A project.

Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.

CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

Unit 20 - Client Side Customisation of Web Pages

Tutorial 4: Creating page layout with css

Advanced Web pages and Cascading Style Sheets (CSS)

Prepared by ackoo Styli n g your page (font type, font size, colors, text decoration, alignment, set margin, table padding, etc.) References: W3Schools.

The.htm/.html Mystery When saving the template files in Internet Explorer, they will be named.htm by default. To be consistent with how the code was written.

Definition from Wikipedia.  The Prototype JavaScript Framework  implemented as a single file of JavaScript code  named prototype.js (

INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.

Drboots presents. Web 101 Utility links | Join SWIFT | Pylons Navigation links Some place Another place Links Nothinghere Content goes here This is content…seriously.

Cascading Style Sheets Part 1 Library and Information Services, University of St Andrews.

LING 408/508: Programming for Linguists

1Computer Sciences Department. And use

CSS – Presentation of Information. Types of Style Sheets External Embedded h1{color:red; font-family: Arial;} Inline Text is here.

By: Rick A. VanVolkinburg.  WebView – displays web pages inside application.  JavaScript is disabled.  Enable: webview.getSettings().setJavaScriptEnabled(true);

18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,

MCS 270 Cascading Style Sheets (CSS) Gustavus Adolphus College.

Cascading Style Sheets Class 1, Lecture 1 Rachel A Ober

Cascading Style Sheets Tom Osman. Keep the content of a webpage separate from the formatting of the page. Structure (of content)  Headings  Sub headings.

Cascading Style Sheets CSS by Pavlovic Nenad by. 2Cascading Style Sheets Presentation Contents What are CSS? What are CSS? History of CSS History of CSS.

Introduction to Programming the WWW I CMSC Summer 2004 Lecture 7.

CSS Font CSS font properties define the font family, boldness, size, and the style of a text. CSS Font Families Generic family Font familyDescription Serif.

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.

CSS = Cascading Style Sheet CSS consists of rules to display, style and decorate HTML elements Why CSS ? – Separate decoration from HTML markup (Ex :,,…)

Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,

Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.

Project 4: Yosemite CSS Layout

HTML - Quiz #2 Attendance CODE:

Cascading Style Sheets (CSS) Within the Enterprise Architecture Framework (EAF) Wes Ziegeler August 3, 2006.

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

XHTML and CSS. The Browser The browser is not print!

CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.

Advanced Web Development Instructor: Thomas Bombach.

The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.

Cascading Style Sheets Level 2. Course Objectives, Session 1 Level 1 Quick Review Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your.

Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.

LING 408/508: Programming for Linguists Lecture 10 September 30 th.

Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ CSS Training.

Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.

Cascading Style Sheets CSS2 - a bit more advanced.

NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.

HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML.

CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

Web Design In A Nutshell A Desktop Quick Reference.

1 Cascading Style Sheets

WebD Introduction to CSS By Manik Rastogi.

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Cascading Style Sheets

Advanced Web pages and Cascading Style Sheets (CSS)

Introduction to web design discussing which languages is used for website designing

Chapter 7 Page Layout Basics Key Concepts

Web Development & Design Foundations with HTML5 8th Edition

Cascading Style Sheets

IS333: MULTI-TIER APPLICATION DEVELOPMENT

Basics of Web Design Chapter 7 Page Layout Basics Key Concepts

>> Dynamic CSS Selectors

Part 1: Cascading Style Sheets

Cascading Style Sheets (CSS)

Cascading Style Sheets

Presentation transcript:

Techniques for Better Web Development Ben Scheirman Blog:

Show of Hands Favorite Browser? Internet Explorer Firefox Safari Opera

Browser Stats

HTML Recap Common Tags: Lesser-known Tags: Evil Tags: Do I need a Doctype Header?

What is CSS? Purpose Benefits Why? But I’m a Developer!

Best Practices No inline styles Minimal page style blocks Reference external CSS file Use a DOCTYPE Validate!

Styling Text Use Font fall-backs font-family: Calibri, Lucida, Verdana, Arial em, not px Line-height, not height Text Decoration

Styling Links : selector LoVe-Hate  a:link a:visited  a:hover a:active Rollover graphics

Styling Forms No tables! Use

CSS for Layout What is page flow? Understand float Understand the box model

The Box Model Padding Margin Content

CSS Demos Box Model CSS Page Layout Prop-Clear Trick Pure CSS Tabs

Tips for success Develop in Firefox, not IE Validate! Switch browsers frequently

Possibilities CSS Zen Garden CSS Layout Templates

JavaScript Why? Why Not?

DOM Manipulation What is the DOM? What can JavaScript do with the DOM? document.getElementById(id); document.getElementsByTagName(tag); document.createElement(tag); element.setAttribute(attr, value) document.removeChildren(); document.appendChild(node); Avoid browser specific syntax such as document.all

There’s Help Firefox Tools Firebug Web Developer Toolbar JavaScript Frameworks MochiKit YUI Prototype scrip.taculo.us …more…

Meet MochiKit “Makes JavaScript SUCK LESS”

What if… JavaScript is disabled? Browser doesn’t support ______ ?

Progressive Enhancement ASP.NET Application When JavaScript is Disabled still functions When JavaScript is available, but limited experience improves When XMLHttpRequest is supported Ajax is used

Demo:  Forum Registration Page  CSS to style forms  Ajax to enhance the site

Questions?

References  CSS Mastery by Andy Budd  DOM Scripting by Jeremy Keith hack.html