HTML and CSS for Beginners

Intended Audience This course is intended for web developers and programmers who need an intensive introduction to HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). This course forms the foundation for all other web development and programming courses. The aim of the course is to provide a thorough understanding of HTML ( and how it relates to XHTML ) and CSS. A good follow on course to this course might be an introductory course on JavaScript programming. There are various web authoring environments such as Dreamweaver, but this course uses simple text editors to create web pages. The reason is quite simple, it is to get you to think about what is really going into the HTML page that you are creating. Sometimes it may be necessary to fix some pages on a website with having recourse to dreamweaver, or to implement scripts that generate HTML content automatically, and this is where an in depth knowledge of HTML and CSS will come in handy. Course Overview As well as covering HTML and CSS the course covers designing forms that fit in with CGI scripts for form processing, and attempts to lay the foundations of good web page design practice. Course Benefits This course provides a comprehensive, practical, introduction to HTML and CSS. Course Contents A brief history of HTML, XHTML, CSS and the Web Foundations of HTML Introduction to HTML syntax and the concept of a tag Creating HTML documents - the basic tags The basic HTML shell - HTML, HEAD, TITLE and BODY tags Comment tags and commenting Laying out the text of an HTML document to make it more readable and its structure easier to understand Text and text tags Paragraphs and Breaks List tags and lists Bulleted (unordered) lists Numbered (ordered) lists Definitions lists Nesting lists Anchors and Linking The Anchor tag Absolute Linking Relative Linking Linking Images Intra-Page Linking Mail Links Tables Table tags Creating simple tables Table Tag Attributes and Values Borders and Width Cellpadding and Cellspacing Spatial alignment of rows Vertical placement of data in a row cell width, vertical and horizontal alignment of the cell contents Spanning columns and rows Nesting tables Frames Frame Structure The FRAME tag and its attributes The FRAMESET tag and its attributes Targetting Windows Foundations of Cascading Style Sheets Motivation for using Style Sheets Brief History of CSS - CSS1, CSS2, and what's coming in CSS3 Types of Style Sheet Inline Embedded Linked Hiding CSS from older browsers Specifying CSS for different media types e.g. screen, print Understanding Style Sheet syntax Units of measurement Fixed vs. relative sizing Using font and colour properties Using shorthand styles to abbreviate, simplify, structure style sheets Selecting and applying styles within an HTML document Class attributes ID attributes Working with DIV tags Working with SPAN tags Inline styling vs. Block styling Combining Style Sheets Selecting and applying styles within an HTML document Combining External and Embedded Style Sheets Pros and Cons of Importing vs. Linking Style Sheets Understanding Cascading and Inheritance in Style Sheets Style Sheets - beyond the basics Understanding the CSS Box Model Grouping and how to use it Margins, borders and padding Adding Backgrounds and Images Understanding the significance of the !DOCTYPE directive CSS Inheritance in more detail - deriving new styles, overriding existing styles Creating horizontal and vertical menus using lists Page layout specification using CSS (tableless CSS layout techniques) Linear layouts Rollover Effects Floating page content CSS for Table Layout and Design