Free Web Design, Development and Programming Training and Tutorial Resources




    



November 13, 2009

HTML And XHTML References and Cheat Sheets

Here are some excellent reference materials and cheat sheets for HTML And XHTML at appletree for all web programmers from the novice to the expert. HTML and XHTML are extensively used for creating and developing interactive web pages. These HTML And XHTML cheat sheets and reference materials here discuss a wide range of topics such as Core HTML, Character Entity Reference Chart, Framesets, DOM, best practices, and configuration options. The reference materials provided here are downloadable in pdf format, and can be used for future use.

 
 - XHTML Best Practice Cheat Sheet 230K   
 - Core HTML 712K   
 - HTML5 Canvas Cheat Sheet 153K    
 - HTML Character Entities Cheat Sheet 495K   
 - HTML Cheat Sheet 62K   
 - HTML DOM 65K   
 - HTML Help Sheet 104K   
 - HTML Help Sheet 02 1.9M   
 - HTML Tidy Configuration Options Quick Reference 148K   
 - Web Designer’s HTML Card 13M   
 - HTML 5 Cheat Sheet 3.0M   
 - What Beautiful HTML Code Looks Like 787K   
 - XHTML Character Entity Reference 163K   
 - XHTML Cheat Sheet 72K   
 - Character Entity Chart 121K   
 - HTML Cheat Sheet 342K   
 - HTML 5 Cheat Sheet 75K   
 - HTML Elements Coordinates 137K   
 - XHTML 1.0 Frameset 64K   
 - XHTML 1.0 Strict 62K   
 - XHTML 1.0 Transitional 64K 



Tags for this post>> |

October 14, 2009

XML Document Type Definition (DTD) Tutorial

Here is is a XML Document Type Definition (DTD) Tutorial, hosted at the New Mexico Tech Computer Center. This DTD tutorial describes the Document Type Definition notation for describing the schema of an SGML or XML document type. The purpose of a Document Type Definition or DTD is to define the structure of a document encoded in XML. This DTD tutorial also can be downloaded as pdf.


Document Type Definition Tutorial:

  What is a DTD?
     - Definitions
  Where does a DTD live?
     - Linking an XML file to an external DTD
     - Including the DTD inside your XML file
  Types of DTD declarations
  Element declarations
     - Declaring empty elements
     - Elements with text content only
     - Elements with mixed content
  Attribute declarations
     - Tokenized attributes
     - Enumerated attributes
  Declaring and using entities
     - General entities
     - Character entities
     - Parameter entities
     - Binary (non-parsed) entities
  Notation declarations



Tags for this post>>

XSLT Reference Tutorial

Here is the post on XSLT Reference Tutorial, located at the New Mexico Tech Computer Center. This XSLT tutorial describes the XSLT language for transforming XML documents. Because of XSLT’s ability to change the content of an XML document, XSLT is referred to as the stylesheet for XML. This tutorial can also serve as a reference guide to XSLT and it can also be downloaded as pdf.


XSLT Reference Tutorial:

  What is XSLT?
  A brief example
  Namespaces and XSLT
  XPath reference
     - Data types in XPath
     - Node types
     - Node tests
     - Axis selection in XPath
     - XPath operators
     - XPath functions
  Overall XSLT stylesheet structure
  The root element <xsl:stylesheet>
     - <xsl:stylesheet> attributes
  Top-level elements
     - <xsl:output>: Select output options
     - <xsl:preserve-space>: Preserving white space
     - <xsl:strip-space>: Removing non-significant white space
     - <xsl:import>: Use templates from another stylesheet
     - <xsl:key>: Create an index to optimize input document access
     - <xsl:decimal-format>: Define a numeric format
  Basic template elements
     - <xsl:template>: Define a template
     - <xsl:variable>: Define a global or local variable
     - <xsl:apply-templates>: Process a node set with appropriate templates
     - <xsl:include>: Insert another stylesheet
     - <xsl:param>: Define an argument to be passed into a template
     - <xsl:with-param>: Pass an argument to a template
  Output instructions
     - <xsl:text>: Output literal text
     - <xsl:value-of>: Output the value of an expresssion
     - <xsl:element>: Output an element
     - <xsl:attribute>: Output an attribute
     - <xsl:number>: Output an element number or formatted number
  Branching elements
     - <xsl:for-each>: Iterate over a set of nodes
     - <xsl:if>: Conditional processing
     - <xsl:choose>: The multiple-case construct
     - <xsl:call-template>: Invoke another template
  Advanced elements
     - <xsl:apply-imports>: Use an overridden template
     - <xsl:attribute-set>: Define a named attribute set
     - <xsl:comment>: Output a comment
     - <xsl:copy>: Shallow copying
     - <xsl:copy-of>: Deep copying
     - <xsl:fallback>: What to do if an extension is missing
     - <xsl:message>: Write a debugging message
     - <xsl:namespace-alias>: Assign a prefix to a namespace
     - <xsl:processing-instruction>: Output a processing instruction
     - <xsl:sort>: Process nodes in a given order
  XSLT functions
     - current(): Return the current node
     - document(): Pull in content from other documents
     - format-number(): Convert a number to a string
     - generate-id(): Generate a unique identifier
     - key(): Refer to an index entry
     - system-property(): Return a system property value
  Built-in templates
  Extension elements
     - The exsl:document extension
  Using the xsltproc processor



Tags for this post>>

October 12, 2009

CSS 2.0 Tutorial

Here is a CSS Tutorial, at New Mexico Tech Computer Center, that will help you with styling web pages and sites using CSS 2.0. This tutorial acts as a reference guide for Cascading Style Sheets 2.0, which is used for describing the style, layout, etc. of Web pages. In this CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once. It contains everything that is required for you to master CSS 2.0. This CSS tutorial also can be downloaded as a pdf.


Tutorial on Styling Web Pages with CSS 2.0:

  What are Cascading Style Sheets and why should you use them?
  Connecting your page to a style sheet
  Overall structure of a style sheet
  At-rules
  How to write CSS rules
  Common value types in CSS
     - Dimensions
     - Specifying colors
     - String constants
     - Universal resource identifiers (URIs)
     - Counters
     - Specifying angles
     - Times
     - Frequencies
  Selectors
     - Element type selectors
     - Selecting elements by class
     - Selecting elements by their context
     - Child selection
     - Adjacent element selection
     - Selecting by attribute values
     - Selecting specific single elements by ID
     - Pseudo-classes
     - Pseudo-elements
     - The universal selector -When rules collide
     - Cascading
     - Specificity: Which selector applies?
     - Inheritance
  Declarations
  Font properties
     - The font-family property
     - The font-style property
     - The font-variant property
     - The font-weight property
     - The font-size property
     - The font property
  The display property: What kind of box is this?
  Other text properties
     - The line-height property
     - The text-indent property
     - The text-align property
     - The text-decoration property
     - The text-transform property
     - The white-space property
     - The letter-spacing property
     - The word-spacing property
     - The vertical-align property: Shifting the baseline
     - The quotes property: Specifying quote characters
  The color property
  The background properties
  Designing with box elements
     - Side lists
     - The height and width properties
     - The clear property
     - The float property
     - The padding properties
     - The border properties
     - The margin properties
     - The overflow property: What if it doesn’t fit?
     - The clip property: Specify a clipping rectangle
     - The visibility property: Can we see the content?
     - The position property: Positioning boxes
     - The box offset properties: top, bottom, left, and right
     - The z-index property: Stacking order
  The content property: Specifying content in pseudo-elements
     - The counter-reset property
     - The counter-increment property
  The list properties
     - The list-style-type property
     - The list-style-image property
     - The list-style-position property
     - The list-style property
     - The marker-offset property
  Tables
     - Table column properties
     - How table size is computed
     - Table border properties
     - The speak-header property: Aural rendering of tables
  User interface options
     - The cursor property
     - Selecting colors to match UI components
     - Dynamic outlines
  Aural stylesheets
     - Spatial presentation: the azimuth property
     - Voice properties
     - The volume property
     - The speak, speak-punctuation , and speak-numeral properties: spelling it
     - General voice qualities: voice-family, pitch, pitch-range, stress, and richness
     - Timing properties: speech-rate, pause-before, pause-after, and pause
     - Element cues: cue-before, cue-after, and cue
     - Audio mixing: play-during
  The @import rule: Importing another stylesheet
  The @media rule: Tuning for different rendering platforms
     - Media types
  The @page rule: Paged media
     - The size property for paged media
     - Controlling page breaks
     - Orphan control
     - Widow control
     - Crop marks and alignment targets: the marks property
     - The page attribute: Selecting a page type



Tags for this post>>

September 24, 2009

XHTML 1.1 Tutorial

Here is a Building Peb Pages with XHTML 1.1 Tutorial, at New Mexico Tech Computer Center, that describes XHTML 1.1, the current preferred markup language for building web pages. In this tutorial you will learn the difference between HTML and XHTML. Included are introductory topics, along with these areas: block elements, flow model, standard and event attributes, form elements, and table elements. This XHTML tutorial also can be downloaded as a pdf.


XHTML 1.1 Tutorial Contents:

 - What is XHTML?
 - A small, complete example page
 - Rules for the XML notation
 - Differences between XHTML and HTML
     - Paired tags
     - The empty element syntax
     - Case sensitivity
     - Quoted attributes with values
     - Fragment identifiers
 - Separating content and presentation with CSS
 - Basic data types
     - The length datatype
     - The ID datatype
     - The IDREF and IDREFS datatypes
     - URIs and link targets: where hyperlinks point
     - The link datatype
     - Media type
     - MIME types: Defining a resource’s format
 - Content model notation
 - Overall structure of an XHTML file
     - The root element: html
     - The head element: Overall page information
     - The base element: Specifying the document’s base URI
     - The link element: Related documents
     - The meta element: Page meta-information
     - The style element: Specifying presentation style
     - The script element: Including executable code
     - The noscript element: What to do when your script can’t be run
     - The body element
 - The block elements
     - The heading elements: h1, h2, h3, …, h6
     - The address element: Who wrote this page?
     - The p element: Regular text paragraph
     - The blockquote element: Block-style quotations
     - The div element: A generic block container
     - The pre element: Display verbatim text
     - The ul element: Unnumbered or “bullet” lists
     - The li element: List item
     - The ol element: Numbered lists
     - The dl element: Definition lists
     - The hr element: horizontal ruled line
 - Inline content: Inline.model
     - a: Hyperlink
     - abbr: Abbreviation
     - acronym: Acronym
     - cite: Title of a work
     - code: Part of a computer program
     - del: Deleted material
     - dfn: Definition of a term
     - em: Emphasis
     - img: Include an image
     - ins: Inserted material
     - kbd: Keyboard input
     - q: Inline quotations
     - samp: Sample computer output
     - span: The generic inline container
     - strong: Strong emphasis
     - sub: Subscript
     - sup: Superscript
     - var: Variable name
 - Tables: the table element
     - Specifying table column properties
     - Sectioning a table with thead, tbody, and tfoot
     - Table rows: the tr element
     - Table cells: the td and th elements
 - Flow.model: Arbitrary content
 - The object element: Embedded multimedia and applet objects
     - The param element: Passing arguments to applications
     - How to delay instantiation of an object
 - Forms: The form element
     - The input forms control
     - The label element: Label a control
     - The button forms control
     - The select forms control: menus
     - The option element: One choice inside a select control
     - The optgroup element: A group of choices inside a select control
     - The textarea forms control: multiline text input
     - The fieldset element: Adding structure to a form
     - What makes a control successful?
     - Writing your form handler script
     - The URL encoding method for forms data
 - Standard attributes
     - The xml:lang attribute
     - The charset attribute: Declaring a character set
     - The common attributes: Common.attrib
     - The id attribute: Assigning a unique identifier to an element
     - The class attribute: Declaring an element’s CSS class
     - The title attribute: Titling an element
     - The tabindex attribute: Specifying tab traversal order
 - Event attributes
 - Legacy and unrecommended elements
     - Deprecated features
     - Features that are not recommended



Tags for this post>>

August 27, 2009

6 Web Design and Development Posts

The following are six web design and development posts which I have written in the past few weeks on our other blog at Inteligentedu.com. These are execellent training and learning materials for the topics covered.


2 Web Design Tutorials for Programmers

Here are two Web Design Tutorials: Design for Developers and Web Design for Programmers, hosted at New Auburn Personal Computer Services. These two Web design tutorials will help you to create successful web sites and web applications, along with getting you familiar with the process and tools involved with developing a functional and attractive site/application. The first tutorial is illustrated using presentation slides, and the second one is illustrated as an e-book. Both tutorials are in pdf format.

Design for Developers  (224 Kb, 34 pages)
This course is meant to be a hands-on experience. The goal is to get you familiar with the process and the tools involved in developing a functional, attractive site or application. Various hands-on examples are illustrated using the help of Photoshop, Dreamweaver, and CSS.

Web Design for Programmers  (2.48 Mb, 83 pages)
This tutorial explains you about basic color theory, learning how to choose colors, basic typography, learning how to choose fonts, basic layouts, how to mock up a site in Photoshop and basic XHTML and CSS. Also covered are building a logo that can scale using Illustrator and building a mockup of the site in Photoshop.


Free Training to Learn Flex in a Week

Here are Adobe’s free video training Flex in a Week Courses, at Adobe Developer Connection, which will greatly help you learn and use Flex. To maximize your learning, we recommend that you view the videos and complete the exercises in the order in which they are listed. Adobe Flex is a must see application if you’re building cross-platform, rich Internet applications and making extensive use of Flash. It provides a software development kit and an IDE to help get you on your way. These Flex tutorial courses show you how to get the most out of Flex for building rich, complelling, and interactive web applications.


4 JavaScript Tutorials

Here are 4 JavaScript Tutorials at syger.it. All the scripts in these JavaScript tutorials are available for download as two compressed archives Scripts.zip and AspScripts.zip. These JavaScript tutorials are designed to provide an overview, with coding examples, of the some of the power of the JavaScript programming/scripting language. They are not just aimed at the developer who works on code for the browser or client side, the tutorials contain presentations to classic ASP developers, in an attempt to move them away from VBScript and towards JavaScript, for web application development.


44 JavaScript References and Code Examples

Here are 44 excellent JavaScript References and Coding Examples, at psoug.org. JavaScript is the scripting language of web, and is used in millions of web pages to add functionality, validate forms, detect browsers, and much more. You can use these 44 JavaScript examples to help you to become a better JavaScript programmer, and by reading and using these you will learn how to code its many features and functions, thereby increasing your JavaScript skills.


218 PHP Code Examples and References

Here are 218 excellent PHP Code Examples and References at psoug.org. If you want to learn the basics of PHP, then this PHP code library will help you greatly. These code examples will also help you increase your PHP skills and become a better PHP programmer. PHP-enabled web pages are treated just like regular HTML pages and you can create and edit them the same way you normally create regular HTML pages. Many pieces of functionality are covered by these PHP code snippets.


2 Ruby Tutorilas and 3 Ruby on Rails Tutorials

Here are 2 Ruby Tutorilas and 3 Ruby on Rails Tutorials located at the LUG Villafranca Programming Course website. These Ruby and Ruby On Railes tutorials give you an excellent grounding and understanding on using Ruby and Ruby On Rails to build web applications. Ruby On Rails is an open source Ruby framework for developing database-backed web applications. You will need to download and install the Ruby Interpreter, and you will also need to install Ruby on Rails. In addition, these tutorials use RMagick version 2.0.2, which is explained in this FAQ, and  SQLite 3.1.2.1, which is explained in this How-to. Windows users will need both the .exe and .dll versions of SQLite. The Ruby on Rails Wiki page also gives helpful information for SQLite. Source code is provided for all of these tutorials. Also, the whole programming course, which includes JavaScript tutorials, can be downloaded as pdf which is 2.28 Mb and explained in 125 pages.



Tags for this post>> |

August 18, 2009

30 CSS Navigation and Button Tutorials

Here are 30 excellent CSS Navigation and Button Tutorials, at InstantShift. These CSS tutorials, from around the web, will teach and show you how to code web navigation and buttons using CSS. They also include some useful web design tips. Some of the topics covered by these CSS tutorials include: advanced CSS menus, web navigation, CSS graphic menu with rollovers, fancy buttons using CSS sliding doors, tabs, and color adjustable CSS.


Tutorials for CSS Navigation and Menus:
These CSS tutorials deal with various CSS navigation and menu techniques. Some of the topics covered here are slicing up the menu design and putting them togethe, animated horizontal tabs, CSS graphic menus with rollovers, and hybrid CSS dropdowns.

 - Advanced CSS Menu : Webdesignerwall
 - CSS Sprite Navigation Tutorial : Ehousestudio
 - CSS Techniques: Using Sliding Doors with Wordpress Navigation : Wphacks
 - CSS menus : Howtocreate
 - CSS Tabs Menu with Dropdowns : Dave-woods
 - Animated horizontal tabs : Dynamicdrive
 - Horizontal menu, top to bottom : Aplusrs
 - Flexible navigation example : Icant
 - CSS Menu - Horizontal/Vertical : Qrayg
 - Tabs : Brainjar
 - CSS graphic menu with rollovers : Bwebi
 - Navigation matrix reloaded : Superfluousbanter
 - Hybrid CSS Dropdowns : Alistapart
 - A CSS only validating flyout menu : Cssplay
 - A flyout menu with breadcrumb trail : Cssplay


Tutorials for CSS Buttons
These CSS tutorials cover the the topics of CSS button, including scalable CSS buttons, oval buttons, making fancy buttons using CSS sliding door technique, and roll over button.

 - Scalable CSS Buttons Using Png and Background Colors : Moncse
 - CSS Pre-Load Hover Buttons : Firefly-multimedia
 - CSS Sliding Door using only image : Kailoon
 - CSS Buttons using PNG transparency : Ryebreaddesign
 - CSS Oval buttons : Dynamicdrive
 - Make fancy buttons using CSS sliding doors technique : Jankoatwarpspeed
 - Simple Round CSS Buttons ( Wii Buttons ) : Webappers
 - Roll Over Button : Learnola
 - CSS Overlapping Arrow Buttons : Firefly-multimedia
 - Rediscovering The Button Element : Particletree
 - CSS Hover Button : Nubluecouk
 - Beautiful CSS buttons with icon set : Woork
 - How to make sexy buttons with CSS : Oscaralexander
 - Liquid & Color Adjustable CSS Buttons : Sohtanaka
 - D CSS buttons : Dynamicdrive



Tags for this post>>

August 15, 2009

Learn and Apply HTML Course

Here is the Learn and Apply HTML Course, at Utah State University. These HTML course lessons are designed in a way that beginners can move onto advanced as and when they finish the course. The HTML course provides learning units on how the Internet works, how to use FTP (File Transfer Protocol) to publish web pages and how to make websites accessible to visitors with hearing, vision or motor disabilities. It also covers functions like inserting multimedia elements and graphics onto websites, understanding JavaScript and using scripts on your website. These HTML lessons are well structured and the related files can be downloaded here. Also, here is a nice page form the course site that describes all of the HTML tags. I recommend to use the pdf format of these HTML tutorial lessons because they contain the resource links to learn more about the topic being discussed. A portion of the book used in this course is available on google (Teach Yourself Web Publishing with HTML and XHTML in 21 Days).
 

Learn and Apply HTML Course Lessons:

The Basics
In this lesson you will be given an overview of HTML and begin your journey of learning some of the basic tags, or building blocks, of HTML. This tutorial section can be downloaded as a pdf document. Also the video versions are available as Video 1 and Video 2.

Links
In this lesson you will learn about links which give HTML the “H” for Hypertext in its name. This section can be viewed as a pdf document.

Formatting and CSS
Here you will learn some great information on formatting. CSS is the wave for building web pages which provides the stuff that formats the webpage and adds style to it. The respective pdf and video tutorials are available as PDF and Video.

Graphics
This lesson discusses graphics for web which will help you to create a great looking web page. Here is the pdf version of this tutorial.

Tables
This lesson explains about tables in HTML with which you can format data in your web page. The pdf version of the tutorial is available.

Accessibility
In this lesson you will learn about creating web pages that are accessible to persons with disabilities, and the lesson’s pdf edition.

HTML in Style
Here in this tutorial lesson you will learn about styles which are the current trend and most likely the future trend of web pages. The pdf format of this tutorial can be seen here.

Forms
Forms bring some power to the web by allowing your users to provide you with valuable information and for them to request information from you. Here you will learn about several form tags and elements, and the pdf tutorial can be downloaded here.

Multimedia
In this lesson you will learn some of the ways to include multimedia in your web page. The pdf version of the lesson is found here .

JavaScript
In this lesson you will get a brief overview of JavaScript. We will be covering some of the basics on JavaScript, and the pdf version can be downloaded here.

Evaluating Websites
Many web development companies will do an evaluation of their own website by a variety of methods. Here an activity to evaluate websites is drawn out to you. You can download the activity here.

Final Project
Here in this final section, you get the opportunity to build a functioning website. Your website can be anything you wish to create. The instructions can be found here.



Tags for this post>>

August 5, 2009

HTML and CSS Tutorials and References

Here are several HTML and CSS Tutorials and References, located at cherokeered.com, that can server as learning resources for most everything HTML and CSS, which are the most common technologies used in developing web pages. These HTML and CSS tutorials are categorized so that an aspiring web designer, a budding designer, and an advanced designer can all find training materials to suit their HTML and CSS learning needs.


HTML Tutorials:
The HTML beginner’s tutorial teaches you the essentials, and the intermediate guide adds a few nuts and bolts. The aim of the HTML advanced tutorial is to show how to fully exploit the features of HTML and how to optimize it for accessibility.

 - HTML – Beginner
 - HTML – Intermediate
 - HTML – Advanced


CSS Tutorials:
These CSS tutorials describe and explain CSS at beginner, intermediate and advanced levels. Included here are also double rollover and javascript rollover tutorials.

 - CSS – Beginner
 - CSS – Intermediate
 - CSS – Advanced
 - CSS – Syntax
 - CSS – Background Styles
 - CSS – CLASS + ID
 - Double Rollover via CSS
 - JavaScript Rollovers: How have multiple links change a single image


CSS and HTML Resources:
These learning resources from around the web provide further instructions and tips on creating, coding, and designing web pages using HTML and CSS.

 - HTML Dog
 - SUNY Albany: Introduction to Cascading Style Sheets
 - CSS Box Model
 - Cascading Style Sheets and Dreamweaver
 - A List Apart
 - Dynamic Drive
 - Style Gala: CSS Layout
 - Web Design 101: Floats
 - CSS Techniques Roundup – 20 CSS Tips and Tricks
 - CSS Tutorial
 - Guide to Cascading Style Sheets
 - Test your web design in different browsers



Tags for this post>> | |

July 23, 2009

CSS Tutorials and References

These CSS Tutorials at sitepoint  are an excellent starting point for those who want to learn and use CSS in web development. CSS is a presentation language used to describe the presentation and layout of elements in HTML and XHTML pages. CSS can also be applied to any kind of XML document. These CSS tutorials and references provide users with information on CSS properties, CSS selectors, CSS At-rules, CSS concepts and live examples of using CSS elements.


CSS Properties
These tutorials discusses properties of CSS elements such as boxes, list, table, layout, typographical, user interface and color and backgrounds. Each of these properties is explained in detail, though most of them are self explanatory.

 - Box Properties
 - Layout Properties
 - List Properties
 - Table Properties
 - Color and Backgrounds
 - Typographical Properties
 - Generated Content
 - User Interface Properties
 - Paged Media Properties
 - Vendor-specific Properties
 - Alphabetic Property Index


CSS Selectors
Strictly speaking, a selector is a pattern and is used to match a set of elements in an HTML or XHTML document. This section explains how selectors are used in CSS to create simple patterns

 - Universal Selector
 - Element Type Selector
 - Class Selector
 - ID Selector
 - Attribute Selector
 - Selector Grouping
 - Combinators
 - Pseudo-classes
 - Pseudo-elements


CSS At-rules
This CSSf tutorial provides information on At-rules that provide instructions and directives to the CSS parser. The At-rules elements are explained with their respective examples.

 - @charset
 - @import
 - @media
 - @page
 - @font-face
 - @namespace


CSS Concepts
These tutorials explains some key concepts in CSS such as syntax and nomenclature, inheritance, layout and formatting, filters and hacks and the basic differences between HTML and XHTML.

 - What Is CSS?
 - General Syntax and Nomenclature
 - The Cascade, Specificity, and Inheritance
 - CSS Layout and Formatting
 - Workarounds, Filters, and Hacks
 - Differences Between HTML and XHTML


CSS Live Examples
This section is a quick reference point for CSS properties and live examples are provided for most of them.

  CSS Properties
    Box Properties
      Dimensions
       - height
       - min-height
       - max-height
       - width
       - min-width
       - max-width
      Margins
       - margin-top
       - margin-right
       - margin-bottom
       - margin-left
       - margin
      Padding
       - padding-top
       - padding-right
       - padding-bottom
       - padding-left
       - padding
      Borders and Outlines
       - border-top-color
       - border-top-style
       - border-top-width
       - border-top
       - border-right-color
       - border-right-style
       - border-right-width
       - border-right
       - border-bottom-color
       - border-bottom-style
       - border-bottom-width
       - border-bottom
       - border-left-color
       - border-left-style
       - border-left-width
       - border-left
       - border-color
       - border-style
       - border-width
       - border
       - outline-color
       - outline-style
       - outline-width
       - outline
    Layout Properties
     - display
     - position
     - float
     - clear
     - visibility
     - top
     - right
     - bottom
     - left
     - z-index
     - overflow
     - clip
    List Properties
     - list-style-type
     - list-style-position
     - list-style-image
     - list-style
    Table Properties
     - table-layout
     - border-collapse
     - border-spacing
     - empty-cells
     - caption-side
    Color and Backgrounds
     - background-color
     - background-image
     - background-repeat
     - background-position
     - background-attachment
     - background
     - color
    Typographical Properties
     - font-family
     - font-size
     - font-weight
     - font-style
     - font-variant
     - font
     - letter-spacing
     - word-spacing
     - line-height
     - text-align
     - text-decoration
     - text-indent
     - text-transform
     - text-shadow
     - vertical-align
     - white-space
     - direction
     - unicode-bidi
    Generated Content
     - content
     - counter-increment
     - counter-reset
     - quotes
    User Interface Properties
     - cursor
    Vendor-specific Properties
      Mozilla Extensions
       - -moz-border-radius
       - -moz-box-sizing
       - The display Property Value: -moz-inline-box
      Internet Explorer Extensions
       - zoom
       - filter
       - behavior


CSS Selectors:
 - Universal Selector
 - Element Type Selector
 - Class Selector
 - ID Selector
 - Attribute Selector
   - CSS3 Attribute Selectors
 - Selector Grouping
  Combinators
   - Descendant Selector
   - Child Selector
   - Adjacent Sibling Selector
   - General Sibling Selector
  Pseudo-classes
   - :link
   - :visited
   - :active
   - :hover
   - :focus
   - :first-child
   - :lang(C)
    CSS3 Pseudo-classes
     - :nth-child(N)
     - :nth-last-child(N)
     - :nth-of-type(N)
     - :nth-last-of-type(N)
     - :last-child
     - :first-of-type
     - :last-of-type
     - :only-child
     - :only-of-type
     - :root
     - :empty
     - :target
     - :enabled
     - :disabled
     - :checked Pseudo-class
     - :not(S)
  Pseudo-elements
   - :first-letter
   - :first-line
   - :before
   - :after
   - ::selection


CSS Concepts:
  The Cascade, Specificity, and Inheritance
   - The Cascade
   - !important Declarations
   - Specificity
   - Inheritance
     - The CSS Property Value inherit



Tags for this post>>

July 21, 2009

HTML Tutorials and References

Here are HTML Tutorials and References at reference.sitepoint.com that provide understanding on how to create and manage websites using HTML. Most of these HTML tutorials are focused on various aspects of HTML, its tags, the structures, the attributes and the most commonly used concepts in HTML such as Doctypes, HTML and XHTML and accessibility features. These HTML tutorials are easy to follow and understand and have code samples provided for each topic. Each topic is followed by a short description of its related tags as well.


HTML Elements
This section describes the various elements available in HTML. These elements include structural, head, list, text formatting, table frame and window elements. Each of these elements is followed by a small description. Clicking on the element will display an in-depth explanation and its supportability.

 - Structural Elements
 - Head Elements
 - List Elements
 - Text Formatting Elements
 - Form Elements
 - Image and Media Elements
 - Table Elements
 - Frame and Window Elements
 - Deprecated Elements (to avoid using)
 - Proprietary & Nonstandard Elements
 - Alphabetic Element Index
 - Elements and Valid DTDs They May Appear In


Common Attributes of HTML
This section teaches all attributes that are common to all HTML elements, such as styling, scripting, title and class attributes. The attributes taught here include core attributes and event attributes such as key press, mouse click and mouse move.

 - Core Attributes
 - Event Attributes
 - Extended Event Attributes


HTML Concepts
This tutorial section explains when to use HTML and XHTML, their differences and covers high level concepts related to HTML and XHTML. Also discussed are DocTypes and the syntaxes of HTML and XHTML.

 - Basic Structure of a Web Page
 - Doctypes
 - HTML and XHTML Syntax
 - HTML Versus XHTML
 - HTML/XHTML Accessibility Features


HTML Extras
This tutorial covers additional information about HTML other than attributes and elements such as MIME types, ISO Language Codes and Color names and their related Hex values.

 - Color Names and Related Hex Values
 - ISO 2 Letter Language Codes
 - MIME Types – Complete List


HTML Microformats
This HTML tutorial covers the concept of HTML Microformats which were introduced as a defined set of attributed based on a preexisting standard. Microformats are meant to provide additional formatting in the HTML tags that use them. This tutorial explains Microformats in detail and provides examples for them.

 - hCard
 - hCalendar
 - XFN
 - hReview
 - VoteLinks
 - rel-license
 - rel-nofollow
 - rel-tag



Tags for this post>>

July 13, 2009

Web Design Tutorial

Here is an excellent Web Design Tutorial, at The University of South Dakota. Some of the aspects covered in this Web Design tutorial include the drafting of the contents of the page, including the header, the body, the font, color and its accessibility. Also included are tips on various types of sites that can be created, and their requisite colors, balance, levels of navigation, and management of information. This web design tutorial is in pdf format, is 11 pages in length, and has a file size of 500kb.


Contents of Web Design Tutorial:

Purpose of Tutorial

Website Development

Page Content
 - Responsibility
 - The Header
 - Body
 - Outline Style
 - Font/ Font Color
 - Website Content
 - Top
 - Down Design
 - Active Voice
 - Accessibility

Designing the Site
 - Type of Site
 - Balance
 - Contrast/Color
 - Navigation
 - Management Information



Tags for this post>>

July 9, 2009

XHTML Tutorial

Here is a very good XHTML Tutorial at The University of South Dakota. The topics covered in this XHTML tutorial include a brief history of XHTML, its need and its uses. Further, well explained sections on writing XHTML, ensuring XML code compliance, creating XHTML structures and using block and inline elements is provided. A detailed listing of XHTML tags are described with each tag having its own example. Additional resources and a glossary of commonly used terms are given for later reference. This XHTML tutorial is in pdf format, and is 16 pages, and 312kb in size.


XHTML Tutorial:

Introduction to XHTML
 - Where did it come from?
 - What is it used for?

Writing XHTML
 - Well
 - formed XHTML
 - Being XML Compliant
 - Understanding Doctypes
 - XHTML Structure
 - XHTML IDs and Classes
 - Document Organization
 - XHTML Language
 - Block vs. Inline Elements
 - Development by Purpose

XHTML Tag Listing

Resources

Glossary



Tags for this post>>

June 29, 2009

2 CSS Tutorials and Guides

Here is a Comprehensive CSS Guide and Tutorial, located at wsabstract.com, that will teach and show you, from the ground up, how to code and use CSS (Cascading Style Sheets) in your web pages and sites. The introduction page of this CSS tutorial says this about what CSS is and how it can benefit your web site: ”Style is what gives an item its distinctive look or feel. For text it could be what font is used, what color, size, or spacing. It also applies to other HTML objects such as links, images, backgrounds, margins and borders. Some of the benefits to using CSS are more consistency, better layout and visual design, plus easier HTML coding. Also you can do things with style sheets that could never be done before.”


 - Introduction
 - 4 ways to defining style
 - The basics, ids, classes, and spans
 - Margins
 - Font and text
 - Backgrounds
 - Advanced CSS concepts



Here is another CSS Tutorial, at htmlhelp.com, that will also help you learn and improve your CSS coding skills.

Style Sheets Now!
Change the appearance of hundreds of Web pages by changing just one file… Influence presentation without losing visitors… All with the power and flexibility of Web style sheets.
Quick Tutorial
A basic introduction to Cascading Style Sheets.
CSS Structure and Rules
An introduction to the various kinds of selectors, pseudo-classes, pseudo-elements, and cascading order.
CSS Properties
Descriptions of the various properties available in Cascading Style Sheets, level 1.
Linking Style Sheets to HTML
Various methods of incorporating style sheets into an HTML document.
Style Sheet Dependence
How to misuse style sheets and make your pages inaccessible.
CSSCheck
Check the syntax and style of your Cascading Style Sheets with this CSS lint.
CSS References
Links to CSS specifications and other documentation.




Tags for this post>>
June 25, 2009

Web Development Tutorials using Microsoft Technologies

Here are several Tutorials and Articles on Web Development using Microsoft Technologies, at Microsoft Developer Network, covering various web development topics and techniques using Microsoft. ASP .NET is a web application framework developed and marketed by Microsoft Corporation to allow programmers to build dynamic web sites, web applications and web services. These Web Development Tutorials cover web development using ASP .NET, HTML and CSS, Internet Explorer Development, Internet Information Services, Scripting, Server Technologies and Silverlight.


ASP .NET Web Applications
ASP .NET is a unified web platform that provides all the services necessary for the user to build enterprise-class applications. This tutorial explains about web development using ASP.NET, the Visual Web Developer and Model-View-Controller (MVC) pattern which is an architectural design principle that separates the components of a Web application.

 - Web Development with ASP.NET and Visual Web Developer
 - ASP.NET Model View Controller (MVC)  


HTML and CSS
HTML, an acronym for HyperText Markup Language, is the one of the most popular markup languages that is used for web pages. This tutorial explains the topics of new features of Internet Explorer, HTML, DHTML Behaviors and Data Binding and CSS in detail.

 - What’s New in Internet Explorer?
 - HTML and DHTML Overviews and Tutorials
 - HTML and DHTML Reference
 - Cascading Style Sheets (CSS)
 - DHTML Behaviors
 - DHTML Data Binding
 - Scriptable Editing
 - Web Multimedia
 - HTML Applications (HTA)
 - Accessibility
 - Technical Articles and Columns


Internet Explorer Development
This tutorial explains various methods for developers to add functionality to Microsoft Internet Explorer and thus allowing to enhance the user interface. As Internet Explorer’s component architecture is based on Component Object Model (COM), there are many different ways to extend its capabilities.

 - Internet Explorer Architecture
 - Browser Extensions
 - Content Extensions
 - Hosting and Reuse
 - Globalization
 - URL Monikers
 - Security and Privacy
 - Technical Articles and Columns
 - Book Excerpts


Internet Information Services (IIS)
This tutorial details out Internet Information Services 6.0 and 7.0 which is a set of Internet-based services for servers created by Microsoft for use with Microsoft Windows.

 - Internet Information Services (IIS) 7.0 Development
 - Internet Information Services (IIS) 6.0 SDK
 - Internet Information Services Extensions
 - Technical Articles


Scripting
A scripting language is a programming language that allows some control of a single or many software application. This tutorial explains about various Microsoft windows scripting technologies like JScript, VBScript and various Windows Script Components, Host and Interfaces.

 - Microsoft Windows Script Technologies
 - Technical Articles, Columns and Books


Server Technologies
This tutorial explains some of the server technologies that are used in the industry like ASP, Indexing Service, Sharepoint Products and Technologies and Silverlight.

 - Active Server Pages
 - Indexing Service 2.0
 - SharePoint Products and Technologies
 - Site Server


Silverlight
Microsoft Silverlight is a programmable web browser plugin that enables features such as animation, vector graphics and audio-video playback that characterizes Rich Internet Applications. This tutorial deals with the various features of Silverlight.

 - Silverlight 3 Beta
 - Silverlight 2



Tags for this post>> |

May 23, 2009

158 Web Design Tutorials

Here is my second post on Metamorphosis Design for the remainder of their 158 Web Design Tutorials that teach important aspects to understand and note when creating a website. First and foremost, this involves web site design, followed by browser compatibility, cookie creation and usage and domain registration. These web design tutorials and articles also highlight the most common mistakes that a web designer makes and how to avoid them. Also included here are tutorials on working without frames, creating site maps, font usage, search engine optimization, colors, and how to polish up a website. For beginners, some of these web design tutorials and articles explain how to start your own website. Here are the first 150 web tutorials at this site.


158 Web Design Tutorials:

 - Congratulations! You’ve Gotten the Visitors to your Site – Now, can they find what they’re looking for?
 - Contact Methods
 - Contingency Design
 - Cookies: How to Improve Your Website AND Learn From Your Visitors
 - Create custom error pages and keep your visitors!
 - Create Stickiness with Streaming Media
 - Creating A Quality Web Site Design!
 - Creating Your First Business Website
 - Creating Your Own Website
 - Creating Your Own Website For Free
 - Cross Browser Compatibility
 - Designing A Successful Web Site
 - Designing Above the Fold
 - Designing Professional Web Pages
 - Designing with Style
 - Designing your Web Site for ALL Browsers
 - DesignSmarts: Got Flash? If Not, Your Online Business Could Be Suffering!
 - Develop and Host Distributed Applications on Your Apache Server
 - DO FRAMES AFFECT YOUR PROMOTION AND MARKETING EFFORTS ?
 - DO-IT-YOURSELF WEB SITES: THE PROS AND CONS
 - Do This One Thing to Create a Powerful Product-Selling Web Site
 - Do This One Thing to Quadruple Web Sales in Just One Month
 - Do visitors leave YOUR site feeling confused?
 - Do You Really Need a Web Site?
 - Does The Color of Your Site Matter?
 - Does your homepage work?
 - Does Your Site Qualify for a Web Site Award?
 - Domain Registered? Now What?
 - Don’t Count Your Hit’s!
 - Dot Your T’s And Cross Your I’s
 - Effective Small Business Web Sites On a Budget
 - Elements of Graphic Design for Your Website
 - Elements of Interface Design
 - Email tips and tricks
 - Enough “stuff”!
 - Find a Hidden Fortune in Your Website ‘Stats’
 - Finding the Errors on Your Site
 - First Impressions
 - First Impressions : Do-It-Yourself?
 - Five Checks for Web Pages
 - Five Common Web Design Mistakes
 - Five Pieces of Information You Must Include on Your Website to Generate Sales
 - Fix My Website: Practical Graphics
 - Fix Your Website Or Say Goodbye To Sales
 - Flash Deadly Sins (that can kill your web business)
 - Flash Design Does It Really Deliver What Is Promised?
 - Flash Design: Is it all it’s cracked up to be?
 - FLASHY WEB SITE DESIGNS ARE BAD FOR BUSINESS
 - Focus Your Web Site… Or Get Out Of Business
 - Follow Up –Is reciprocal Linking Dead
 - Fonts For Your Web Site
 - Four Easy Steps to Establishing a Website
 - Frames and Tables
 - FRAMES or NO FRAMES?
 - Get FASTER Download Times By Making BIGGER Web Pages!
 - Get Your Own Web Site
 - Give Your Graphics A Professional Look without the Price
 - Good web Design: External Links
 - Good web Design: Site Maps
 - Good Web Design: The Importance of Navigation
 - Graphics for the web: Animated GIF Format
 - Graphics for the web: JPG and PNG Files
 - Graphics for the Web: Plug-Ins
 - Graphics for the web: The Most Common Formats
 - Graphics Optimization
 - Headlines: Your Big Opener
 - Hiring a Professional Designer
 - Home Page Essentials: Miss These & You’re Missing the Mark!
 - Homepages
 - How Active is Inter-Active?
 - How do I get my business on the internet?
 - HOW FRAMES AFFECT YOUR PROMOTION AND MARKETING EFFORTS?
 - How I Got Number One Position In Yahoo/Google and Altavista…On My First Attempt!
 - How I Slashed The Load Time For My Website By 200-300%…And So Can You, For Yours!
 - How to Avoid Sloppy Web Site Copy
 - How to Avoid the 12 Common Web Design Mistakes
 - HOW TO BUILD A SUCCESSFUL WEB SITE
 - How To Build Your First Web Site!
 - How to choose a Website Designer
 - How to Choose, Register or Transfer a Domain Name
 - How to create a great website
 - How to Create an Effective Navigation Structure for Your Site – Part 1
 - How to Create an Effective Navigation Structure for Your Site – Part 2
 - How to Design a PopUp Window to Boost Opt-Ins
 - How To Design A Search Engine Friendly Website
 - How to Design and Setup a Website
 - How To Design Your Website For Maximum Sales
 - How To Double Or Triple Your Page Views?
 - How to Easily Create a Search-Engine Friendly Navigation Menu For Your Website
 - How to get more hits on your website?
 - How to get your own Website for under $15 a year in 3 Simple Steps
 - How to Get Your Visitors to Create Content for Your Website
 - How to Get Your Visitors To “Tell A Friend”
 - How to Jazz up Your Site with Quality ClipArt
 - How To Keep More Of Your Visitors
 - “How To Keep Your Visitors 10 Times Longer On Your Web Site”
 - How To Look At Your Site With Buyer’s Eyes
 - How To Make Sure Your Visitors Don’t Come Back!
 - How To Make Your Customers Accept All Charges
 - How to Make Your Homepage Flow
 - How to Make Your Site Sell
 - How To Make Your Site Visitors Do What You Want Them To Do!
 - How To Make Your Website A Profit Powerhouse!
 - How to Prepare Images for Your Web Site – Part 1
 - How to Prepare Images for Your Web Site – Part 2
 - How to Prepare Images for Your Web Site – Part 3
 - How To Put An Everyday Business Online
 - How To Retain More Of Your Visitors
 - How to Set up Your Own Personal Website, without Spending Any Money
 - How To Set Up Your Own Website
 - How to Transfer Your Web Site to Another Host Without Losing It
 - How to Use Keywords to Optimize Your Site for Search Engines
 - How to Use Meta Tags for Search Engine Optimization
 - How To Use PDF Files On The Web
 - How to Use Pop Ups Without Annoying Your Visitors
 - How To Use Viral “Refer-A-Friend” Promotions To Increase Traffic And Sales
 - How “User Friendly” Is Your Site?
 - I Wouldn’t Start From Here!
 - Small Business Q & A: If You Build It, They Will Come? That Totally Depends On You
 - I’m Here. Now What?
 - IMAGE IS EVERYTHING – ALMOST
 - Importance of Color in Web Design
 - In Praise of Raw Code
 - IN SELLING THE SIZZLE, DON’T FORGET THE STEAK
 - Inconsistent Design
 - Increase Sales with Easy-To-Read Web Pages
 - Increase The Effectiveness Of Your Website In One Simple, Easy Step
 - Increase the Efficiency of Your Web Design Business
 - Increase Your Freelance Sales With an Online Resume
 - Increase Your Sales By 25% By Implementing One Small Change
 - Independent Consultants Take Over Web Design
 - INITIAL FACTORS OF WEB PAGE CONSTRUCTION
 - Interactive Features
 - Internet Marketing Tools – Graphics Basics
 - Internet Privacy: Creating A Privacy Policy
 - Internet Tip – Honor Your Viewers
 - Is a picture really worth a thousand words?
 - Is There Benefit to Green in Web Design?
 - Is Your Site A Post-It Note Or Super Glue?
 - IS YOUR SITE AN INTERNET BULLY?
 - Is your website ‘Dressed for success’?
 - Is Your Website “Killing” Your Online Business?
 - Is your web site ready for its visitors?
 - Keep ‘Em Coming Back for More
 - Keep Visitors Coming Back Over & Over! Offer Them What They Want!
 - Keep your navigation simple!
 - Keeping Your Pop-Ups – and Your Audience
 - Keeping Your Site Current
 - Learn From Their Multi-Million Dollar Mistakes!
 - Learn the Language of the World Wide Web
 - Learning Tools
 - Leave Those Links Blue!
 - Let Your Little Website Shine, Part 1
 - Let Your Little Website Shine, Part 2
 - Let Your Little Website Shine, Part 3
 - Let Your Little Website Shine, Part 4
 - Let Your Little Website Shine, Part 5
 - Let Your Little Website Shine, Part 6



Tags for this post>>

May 21, 2009

150 Web Design Tutorials

Here is my first post (of 2) covering 150 Web Design Tutorials at Metamorphosis Design. These Web Design tutorials explain and describe how web pages and sites work and how to create sites that are compelling and attract visitors. Included here are tutorials and articles on website design, choosing a domain name, promoting websites and commercializing them. Quick tips and tricks on web design, several pointers on what not to put on a website, and what to put on it, the cost of maintaining a website, logo design and the need for a website are discussed in detail. Several sections within these web design tutorials and articles discuss how to start a professional website, prepare content for it, increasing website traffic, what people look for on a website, and how to retain users on your website. Here are the second set of 158 web tutorials at this site.


150 Web Design Tutorials:

 - Introduction
 - The Topic Of Your Website
 - Choose Your Domain Name
 - Make Your Own Brand
 - Keywords & Content
 - Commercial Sites
 - Promoting your website
 - Conclusion
 - Flash On You Website. To Use Or Not To Use?
 - Web Professionals Advise.
 - Don’t EVER Do This: Under Construction Signs and Broken Links.
 - Try To Avoid This: Frames
 - Do not EVER Do This: Slow loading pages.
 - 7 Quick Tips For an Effective Website
 - 8 Things To Avoid When Building Your Site
 - Grab Your 5 Reasons to Engage An Attractive Site
 - Excuse me: Your website is naked!
 - 10 quick fire web design no-no’s.
 - Tips For An Effective Website.
 - 5 quick fire ways to ‘please’ your visitors.
 - Web Design – First Things First.
 - 2 Tips On Effectively Organizing Your Navigation
 - 35 Deadly Website Sins That will Kill Your Business!
 - 50 Surefire Web Design Tips
 - 5 Web designing tips that Double Your Profits even before You start Your advertising campaigns!
 - For Complete Articles Index Six web design tips to help you improve your websit.
 - Back to Basics
 - Bulk Email, Spam, and Email Marketing
 - Choosing a webhost based on price? Dont!
 - Choosing the Right Website Designer.
 - How Much Does A Website Cost?
 - How To Build Your First Web Site?
 - How To Create a Web Site that Makes the Sale?
 - I Don’t Need A Website!Do I?
 - What makes a good logo design?
 - Why Design is as Important As Promotion?
 - Why Re-Design?
 - Www Pages: The Need for Speed
 - Your Secret Weapon: The Web Design Directory
 - The Birth of a Professional Web Site
 - The Birth of a Professional Web Site Part Two: Your Strategic Web Design Plan
 - The Birth of a Professional Web Site Part Three: Basic Web Design Guidelines
 - The Birth of a Professional Web Site Part Four: Essential Web Site Components
 - The Birth of a Professional Web Site Part Five: Essential Web Development Tools
 - The Birth of a Professional Web Site Part Six: Search Engine Preparation
 - The Birth of a Professional Web Site Part Seven Web Page Optimization
 - The Birth of a Professional Web Site Part Eight: Writing Effective Sales Copy
 - The Birth of a Professional Web Site Part Nine: Launching Your Web Site on the Internet
 - The Birth of a Professional Web Site Part Ten: Promoting Your Web Site
 - Alternative to Web Site Templates and Design Software
 - Avoid these common mistakes with your links
 - DesignSmarts: Banner Design what you MUST know and DO to Get the Clicks to Your Web Site
 - Choosing A Color Scheme
 - Color Basics
 - Creating Value With Streaming Video Content
 - Design Your Online Success
 - Dont Lose Visitors Through Poor Site Design
 - Do your pages download fast?
 - Hey Mr. Fancy Pants
 - How Do I Know What To Market From My Website
 - How To Prepare Your Content For Your Web Designer
 - How to Put Up Your Own Custom Web Site
 - Increase Your Traffic by Recovering Your Lost Visitors
 - Is Your Website Sticky?
 - Keep Your Website Up-To-Date
 - Make Your Own Rules
 - The Power of Color
 - Website Designing Pillars Part 1
 - Website Designing Pillars Part 2
 - Your First Step into Web Development
 - How to Prepare Your Project before You Order Website Design
 - 3 Easy Tips to Get Your Site Looking More Professional
 - The 3 Musts for Running Your Web Design Business Efficiently and Effectively
 - 3 Questions Everyone Should Ask Themselves Before Designing or Redesigning a Webpage
 - 3 STEPS TO SUCCESS!
 - 3 Things You Must Do To Create Personal Web Pages
 - 4 Huge Web Design Errors That Are Costing You Business Online
 - 4 Tips For Building A Website In A Hurry
 - 4 Tips to a More Visitor-Friendly Website
 - 5 Most Common Web Design Mistakes
 - 5 Things Which Make Your Site Sticky
 - 6 Web Site Content Tips to Attract Potential Customers Like a Magnet!
 - 7 Tips to a Top Site
 - 7 Tips to Organize Your Web Site
 - 7 Ways A Web Site Can Help Your Business Grow
 - 8 Must Know To Buy and Sell Reprint and Resell Right-able Products
 - 8 Steps to Design a Surfer Friendly Website That Search Engines Love
 - 8 Tips for Designing a Great Website
 - 8 Web Site Design Bloopers to Avoid
 - 9 Easy Ways to Skyrocket Your Online Sales
 - 10 Profitable Reasons To Add A Discussion Board Or Chat Room To Your Web Site!
 - 10 Shocking Secrets Nobody Will Ever Tell You About Having a Successful Business Web Site
 - 10 Things Stopping People From Visiting Your Site!
 - 10 Tips for a Better Website
 - 10 Tips for Better Web Site Usability – and Profits!
 - 10 Tips For Running A Well-Oiled Business Site!
 - 11 Web Site Design Tips to Keep Your Visitors Coming Back
 - 20 Tips for Creating a Customer-Friendly Web Site
 - 21 Reasons Why The Next Site I Visit Could Be Yours
 - A Custom Icon For Your Web Site
 - A LITTLE ADVICE from THE MAC LADY
 - A Lot More Profits with Less Links
 - A Revealing Interview with A Design & Marketing Expert
 - A Sticky Website
 - A Tale Of Two Sites
 - A Visit Isn’t REALLY a Visit if Your Company Leaves on the Porch
 - A Web site: To Have or Have Not
 - Advanced 404 Pages
 - Advantages for Using FrontPage (Part I)
 - Advantages for Using FrontPage (Part 2)
 - AFTER YOU GRAB ATTENTION, TIGHTEN YOUR GRIP!
 - Anatomy of a Brilliant Site
 - Are you scaring visitors away from your site instead of attracting them to it
 - Attract Buyers to Your Web Sitewith Power Words
 - Advantages for Using FrontPage (Part 2)
 - Attract Product Buyers–Create your Home Page With Marketing Pizzazz
 - Awards Programs: Judging Sites
 - Bad Web Design: ActiveX
 - Bad Web Design: Advertising Mistakes
 - Bad Web Design: Looong Pages
 - Bad Web Design: Mistakes With Text
 - Bad Web Design: Navigation Errors
 - Bad Web Design: Strange Cursors
 - Banners Don’t Have to Be Boring!
 - Basic Marketing Principles: Don’t Put Up Your Website Without Them
 - Beautiful Web Sites Seldom Make More Sales
 - BREAK THROUGH THE CLUTTER WITH AUDIO BANNERS
 - Brief web Design Tips
 - Bring Your Visitors Back Clamoring for More!
 - Bring Your Web Site to Life With PHP
 - Browser Tips: Browser Helper Objects
 - Build Your Web Site!
 - Building a Successful Web Site: What NOT To do
 - Building Printer Friendly Pages
 - Building the Website of Your Dreams Not Your NightMares
 - BUILDING WEB PAGES THAT MOVE PEOPLE TO BUY
 - Building Your First Web Site
 - Building Your Own Web Site? Here are Two Critical Points to Consider
 - Business Web Design Basics
 - Buyer Beware: Web Hosting, Registration, and Site Building “All in One” Package Nightmares
 - Can Your Web Site Win The Tour De France?
 - CASCADING STYLE SHEETS AND SERVER SIDE INCLUDES
 - Change Your Colors
 - Checklist For A Successful Web Site Design
 - Choosing A Color Scheme
 - Choosing Your Website’s Address and Link Names
 - Clean Up That Code!
 - Common Advertising MISTAKES
 - Components of a Great Web Site
 - Conceptualize, Build and Publish a Web site



Tags for this post>>

May 13, 2009

Beginning and Advanced HTML Tutorials

Here are Web Development Tutorials for Beginning HTML and Advanced HTML, at Metamorphosis Design that teach the fundamentals of using HTML in web pages. These HTML tutorials are designed in a way that beginners can move onto advanced tutorials as they finish the initial tutorials. These tutorials are easy to follow and understand with all of them having examples.


HTML Tutorials for Beginners
These 6 tutorials describe how to use HTML to initially create Web pages and use HTML tags. Two different editors used for web page creation and editing are also discussed.

 - Introduction
 - Defining Terms
 - What is HTML(Part I)
 - What is HTML(Part II)
 - What is HTML(Part III)
 - Dreamweaver vs FrontPage


Advanced HTML Tutorials
These 15 tutorials and articles cover more advanced HTML topics, including its history, the necessities to start building web pages, the structure of an HTML document and editing code.

 - Short History Of The Internet.
 - What is necessary to start building web pages?
 - Structure Of The HTML Document.
 - Section of document HEAD(<TITLE> tag)
 - Connection With Other Documents
 - Tag <BASE>
 - Tag <LINK>
 - Tag <META>
 - Starting New HTML Documents.
 - Basic HTML TAGs.
 - Basic BODY TAGs.
 - Making Your Code Editable.
 - Using Style Sheets in Your Web Site.
 - Defining Colors by Name.
 - Names and codes of colors for HTML



Tags for this post>> |

May 9, 2009

Visual And Web Application Design Tutorials

These tutorials and learning materials covering Visual And Web Application Design (at lukew.com and other web development sites) delve into the intricacies of Web Applications and their design by explaining the guidelines and design rules on how these applications should be developed. Each of these web design tutorials start with the basics and move to more complex subjects, as they have been designed for both novices and experts alike.


Visual Organization
These two tutorials explain how visual communication is important to the layout of a design concept and how it is implemented.

 - Visible Narratives: Understanding Visual Organization
 - Visually Critiquing Web Pages


Look, Feel, and Personality
It is important to have a distinct identity that will differentiate it from others. These tutorials and study materials introduces the concepts of Look and Feel and explains them in detail.

 - Who Are You? Get a Personality (pdf)
 - Setting the Mood with Color
 - Pricing Beauty: Reflects on Aesthetics & Value
 - Branding and the User Interface, Part 2: Behavior and Color
 - Color My World
 - Trends in Web Design


Process
This tutorial explains the processes in implementing an important design layout and effectively communicating it to the user.

 - How to (and not to) Work with a Designer


Simplicity
Creating a simple and eloquent design to effectively address user’s needs is explained in this tutorials.

 - The Pursuit of Interface Design Simplicity
 - Top 10* Design Problems


Web Application Design Guidelines & Process
These web design and process tutorials discuss with the guidelines, processes and task flows involved in designing web applications.

 - Design Considerations for Web-based Applications
 - Web-Application Interface
 - Designing Web Applications
 - Designing Successful Help for Web Applications
 - Views and Forms: Principles of Task Flow for Web Applications


Web Application Definitions
These materials define what a web application is and details out how Flash can be an effective tool for web design.

 - What We’ve Learned About Web Application Design
 - What is a Web Application?
 - Demonstrating the Potential of Flash for Web App Design


Functioning Form: Interface Design Blog
These blog-based tutorials introduce new concepts in Interface Design in the form of natural interfaces, behavior and visualizations.  Here are some of the recent posts:

 - Defining User Experience
 - SxSW 2009: Designing Our Way Through Web Forms
 - Video: Web Form Design at MIX09
 - Best Practices for Content Page Design
 - VizThink 09: Visual Communication for the Web
 - Design Team Operating Principles
 - VizThink 09: Why Visualizations Work
 - Designing Web Interfaces Foreword
 - Interaction 09: Parti & The Design Sandwich
 - Interaction 09: Designing the Viral App
 - Interaction 09: Mobile UX Patterns
 - Interaction 09: How to Change Complicated Stuff
 - Interaction 09: Carpe Diem
 - Interaction 09: Designing Natural Interfaces
 - Interaction 09: Irrational Behavior
 - Interaction 09: Fiona Raby
 - Interaction 09: Coming Into Your Own
 - Interaction 09: Experiencing Sustainability
 - UIEtips: Previous and Next Actions in Web Forms
 - 12 Standard Screen Patterns
 - Design Skills for Strategy: the short version
 - Modern Web Form Design recording available



Tags for this post>>

May 7, 2009

Web Interface Design Tutorials and Articles

These learning materials, tutorials, and articles on Web Interface Design at lukew.com and other web development sites explain various concepts of Web and User Interface Design. Each of the user interface topics below are explained in detail, offering with informative descriptions and easy-to-understand examples.


Web Interface Design Tutorials and Articles
The tutorials and articles, from various authors, provide knowledge on a range of topics that include design strategies, setting up a mockup for a site, AJAX, and providing customer-specific site layouts.

 - Strategy with Design
 - Developing the Invisible
 - Live by the Mockup, Die by the Mockup
 - Small Multiples Within a User Interface
 - Blog Interface Design 2.0
 - So the Necessary May Speak
 - AJAX & Interface Design
 - Web Application Solutions: A Designer’s Guide
 - Web Application Form Design
 - Natural Selections: Colors Found in Nature and Interface Design
 - Lessons of Three Dimensions for the Web
 - Interface Design Discussions at 37Signals
 - Visible Narratives: Understanding Visual Organization
 - Understanding Your Web Audience
 - The Pursuit of Interface Design Simplicity


Research Papers
Here are two papers that discuss research methods for web application design and information management in open portals.

 - Design Considerations for Web-based Applications
 - Web-Based Information Management: An Open Portal Interface Solution


Interface Guidelines
These materials provide guidelines and principles of human and user interface design. Also provided is a comparison of guidelines and testing used during interface design.

 - Human Interface Principles
 - User Interface Guidelines
 - First Principles
 - 14 Principles of Polite Apps
 - Common Principles: A Usable Interface Design Primer
 - Principles of Good GUI Design
 - UI Guidelines vs. Usability Testing
 - Evolution Trumps Usability Guidelines


Terminology
Quite a lot of terminology is used in interface design. Most interface designers are aware of this terminology and can quickly relate to it. These materials provide an overview of the terminology used in interface design.

 - The Elements of User Experience
 - Information Interaction Design
 - Designers’ Roles in Communicating with Users
 - Keyword Map of LukeW Interface Designs



Tags for this post>>

« Previous PageNext Page »