Free Web Design, Development and Programming Training and Tutorial Resources




    



February 11, 2011

HTML and XHTML Tutorial

Here is a good HTML and XHTML Tutorial, from State University of New York-Albany. The following is from this tutorial’s introduction:

HTML (Hyper Text Markup Language) and XHTML (Extensible Hyper Text Markup Language) are the markup language from which all Web pages are built. Although there are new types of technology and coding options, including PHP, ASP, XML and others, traditional markup language is the place where “all things Web” starts. Some Web editing software publishers claim that it is not necessary to know HTML if you use their programs to build Web pages. However, this is rarely the case. In almost every instance at least some knowledge of HTML and XHTML is helpful.

In this tutorial we will guide you through the basics of writing HTML/XHTML code. It is important to realize that there is no better way to learn and understand the code than to actually write and use it. This tutorial will get you started on your first steps toward becoming knowledgeable about the code. You may download a printable copy of this HTML tutorial here in pdf format (43 pages, 1.08mb). You may expect this tutorial to take about 45 mintues to 1 hour if you work through it quickly. To fully explore it will take 1 hour to 1 1 1/2 hour.


HTML/XHTML Tutorial Contents:

 - About HTML/XHTML
 - Technique
 - Tools
 - Web vs. Print
 - Getting Started
 - Setting Up the Basic Code
 - Adding and Formatting Text
 - Nesting Tags
 - Advanced Text Formatting
 - Color and the Web
 - Headings
 - Lists
 - Links
 - Layout and Tables
 - Advanced Table Formatting
 - Images
 - Putting It All Together
 - Adding An Image
 - Adding A Simple Table
 - Main Body Information
 - Finishing Touches
 - If You Continue On

Most Commonly Used HTML/XHTML Tag List
The most commonly used HTML and XHTML tags are presented on this page in an easy-to-use format.



Tags for this post>> |

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

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

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

April 1, 2009

Browser, CSS, and HTML / XHTML Tutorials

Here are some of the best Browser, CSS, and HTML / XHTML Tutorials found at alistapart.com. These web development tutorials explain how Browsers, CSS, HTML and XHTML are used in developing many features of today’s web pages. All web servers and browsers support these technologies and thus any web programmer can make professional looking web pages. These CSS, HTML and XHTML tutorials are easy to follow, understand and implement.


Browser Tutorials:
How well does a browser handle content and data from different sources? Can all the design, code and applications interface and survive on one common platform without conflict? These tutorials discuss standards that should be followed while developing for the web so that these components can talk to each other without conflict. It also covers topics that include version targeting, positioning and HTML semantics.

 - Advanced Debugging with JavaScript
 - Semantics in HTML 5
 - Return of the Mobile Style Sheet
 - Understanding Progressive Enhancement
 - Faux Absolute Positioning
 - They Shoot Browsers, Don’t They?
 - Version Targeting: Threat or Menace?
 - Keeping Your Elements’ Kids in Line with Offspring
 - From Switches to Targets: A Standardista’s Journey
 - Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8


CSS Tutorials:
CSS is a language used to present a document in a mrkup language. HTML and XHTML use CSS to style web pages to be displayed in them. These tutorials explain how CSS can be effectively used in web pages to define color, fonts, layout and presentation. It also provides code samples to write simple CSS sheets and execute them.

 - Fluid Grids
 - Return of the Mobile Style Sheet
 - Progressive Enhancement with CSS
 - Understanding Progressive Enhancement
 - CSS Sprites2 – It’s JavaScript Time
 - Faux Absolute Positioning
 - Accessible Data Visualization with Web Standards
 - Version Targeting: Threat or Menace?
 - Keeping Your Elements’ Kids in Line with Offspring
 - Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8


HTML and XHTML Tutorials:
HTML and XHTML go hand in hand as XHTML has the same syntax as HTML and are inline with XML standards. These tutorials help explain how HTML and XHTML work with CSS and Javascript. They also explain how Javascript is used with CSS to style web pages and how they can be centrally located.

 - Fluid Grids
 - Semantics in HTML 5
 - Return of the Mobile Style Sheet
 - A More Useful 404
 - Progressive Enhancement with JavaScript
 - Progressive Enhancement with CSS
 - Understanding Progressive Enhancement
 - CSS Sprites2 – It’s JavaScript Time
 - Faux Absolute Positioning
 - They Shoot Browsers, Don’t They?



Tags for this post>> | | |

February 24, 2009

1-page XHTML & CSS Tutorial


Here is a quick 1-page XHTML & CSS Tutorial, from Brown University. This tutorial will show you how to write valid XHTML (just HTML with a few minor tweaks) and then use CSS to control the typography, layout, and look-and-feel of your web pages and sites. CSS (Cascading Style Sheets) permits a minimal HTML code base for your pages while giving you a high degree of formatting and layout flexibility. This will result in your users having a better and more compelling experience, while giving you the ability to control your web site behaviour and layout from one CSS file.


Contents of this 1-page XHTML and CSS Tutorial:

XHTML:
 - The Picky Bits up top
 - Sample XHTML page
 - Habit Forming
 - Code-Phobic Alternatives

CSS:
 - CSS explained
 - The Three Different Ways to Bring in CSS
 - Linked CSS
 - Embedded
 - In-line
 - Anatomy of a CSS Rule
 - Selectors
 - Tag
 - Class
 - ID
 - Nesting Selectors
 - Link Pseudo-class Selectors
 - div and span tags
 - Basic Formatting
 - Positioning and Layout
 - Links



Tags for this post>> |

March 12, 2007

182 XHTML Tutorials and FAQs

Whether you are starting out or already an experienced web development programmer, these 182 XHTML Tutorials and FAQs will help you create an attractive and functional web site. Example XHTML code is also provided, along with tutorial exercises and some great XHTML tips. These will increase your knowledge and understanding of XHTML and demonstrate some excellent ways you can use this web development technology.

The following XHTML Tutorial and FAQ sections are presented:


17 XHTML FAQs – Introduction To XHTML

  • Answers what is XHTML in relation to: Web, HTTP, XML, HTML, URL, SGML, CSS, and DTD; who developed XHTML; writing and viewing XHTML documents.

16 XHTML Tutorials – Introduction To Tag and Attribute Syntax
  • Tutorials and code for: XHTML elements, opening and closing tags, element attributes, quoting attribute values, required attribute and values, case sensitivity, entering comments, protecting ampersand sign.

16 XHTML Tutorials – Introduction To Element Content Syntax
  • Learn the code to program: XHTML element content models, EMTPY and PCDATA element contents, sub-element only contents, mixed contents, XHTML entities and CDATA, nested elements, white space characters.

22 XHTML Tutorials – Document Structure and Head Level Tags
  • Shows how to code: XHTML DTD specifications and the root element; the head and body elements; head level elements like title, meta, base, script, link, and style; description and keywords meta elements.

18 XHTML Tutorials – Body Tag and Block Level Tags
  • Learn how to use: XHTML body element and its sub-elements; normal paragraphs and pre-formatted paragraphs, in-line elements in paragraphs, line breaks and paragraph spacing, block level elements: p, pre, blockquote, h1, hr.

11 XHTML Tutorials – Understanding In-line Elements and Tags
  • Shows how to use: inline elements like: strong, em, code, sub, sup, del, ins, big, small, br, script.
 
16 XHTML Tutorials – Understanding Hyper Links and URLs
  • Find out how to code: anchor tags/elements, URL structures, different formats of URLs, hyper links to image, music, PDF and ZIP files, opening documents in new windows.

9 XHTML Tutorials – Understanding Lists and List Items
  • Demonstrates the use of: list elements for ordered lists, unordered lists, and definition lists; creating nested lists; including multiple paragraphs in one list item; changing list item markers.

17 XHTML Tutorials – Understanding Tables and Table Cells
  • Learn how to use: table elements like: table, tr, td, th, caption; table attributes like: border, frame, cellspacing, cellpadding; row and cell attributes like: align, valign, colspan, rowspan.

25 XHTML Tutorials – Understanding Forms and Input Fields
  • Learn about: input fields, form elements and submission methods; input elements and input types like text, password, radio, checkbox, hidden, submit, file, image, button; dropdown lists and text areas; multiple forms.

8 XHTML Tutorials – Understanding Inline Images and Image Maps
  • How to do: inline images and image maps: image elements and image sizes; floating images and animated images, server-side and client-side image maps.

6 XHTML Tutorials – Understanding DIV and SPAN elements
  • Covers: basic usages of “div” and “span” elements; nesting and floating “div” elements; changing fonts with “span” elements.

8 XHTML Answers to Interview Questions
  • Answers to inteview questions covering: Basic Concepts, XHTML Syntax, Block Elements, Inline Elements, Table Elements, Hyper Links and Images, and Forms and Input Fields.


Tags for this post>>