In­Depth Introduction to HTML and CSS (5 days)

Course Description…

This course helps beginners and experienced students establish working knowledge of best practices in creating functional web pages using Hypertext (HTML) and Cascading Style Sheets (CSS).

The intention is to break any existing bad habits and lay a strong foundation to ensure students are able to create pages that adhere to standards and best practices. Lecture and Hands­On exercise will help students to create easy­to­maintain, SEO­optimized, and accessible websites. Students will also learn valuable software tools to help them be more productive and successful in creating websites.

Learning Objectives… ● Use best practices in structuring the content of websites ● Understand different HTML tags and when to use them ● Use software and browser tools to validate HTML and CSS ● Work with different elements ● Create web pages that adhere to standards ● Include links, lists, forms, and images on pages ● Create tables for presenting data on pages ● Optimize page styles and layout with Cascading Style Sheets (CSS) ● Format text, use color, and backgrounds ● Create CSS based navigation ● Upload files to a live site

Who should attend… Students who have not had formal in­depth training with HTML and CSS and wish to understand the best practices in using HTML for content and CSS for styling. Students who want to learn web design for their personal use or for business related purposes will benefit equally.

Prerequisites… Students must have working knowledge of computers, using a mouse, keyboard, application menus and commands. Students must be able to open, save, and close files, as well as navigate to other folders.

Intro­ HTML­CSS/ 1 Rev 10­15­4 www.karmoxie.com

Course Topics…

Part I HTML

1. Introduction ● Brief Web Technology history ● Adhering to the Standards ● The Anatomy of a ● Differences in Browsers & User agents ● HTML ○ The W3C (World Wide Web Consortium) ○ The WHATWG (Web Hypertext Application Technology Working Group) ○ What can You Do with HTML? ○ Versions of HTML including XHTML and HTML5 ○ Representing Structure of data in documents ● CSS ○ Separation of concerns ○ Using CSS for design and layout ○ Different Web Browsers ● Goals in Web Design ○ Responsiveness ○ Accessibility including screen reader considerations ○ Performance

2. Planning a Simple HTML Page ● Determining content ● Structuring content ● Identifying text and image elements ● Tools and approaches to planning

3. Rules of Syntax ● Importance of code compliance ● Doctype & Quirks Mode ● Defining semantic meaning with elements ● The DOM () ● Start and end tags ● The and sections ● Using attributes for additional information in start tags ● Named character references / entities ● Comments

Intro­ HTML­CSS/ 2 Rev 10­15­4 www.karmoxie.com

● Validating your HTML

4. Development Environments & Publishing Content ● Using an HTML editor ● Writing code with a text editor ● WYSIWYG editors ● Browser developer tools ● Publishing documents to web servers ● Making a Connection with FTP ● Uploading Your Files ● Viewing Your Live Site ● MIME Type Identification ● Publish a Site on a Remote Server

5. What’s in your ? ● Specifying a base URL for relative ● Defining relationships between the current document and other resources ● Providing general information about a document for indexing and other purposes ● Referencing a scripting language processed on the client side ● Including CSS style information embedded into a page ● Defining the title of the web page

6. HTML Structural & Block­Level Elements ● What are block­level elements ● Using Headings to relay importance

…

● Indicating a paragraph of text

● Displaying pre­formatted text 

 ● Indicating a block of quoted text using 
 ● Creating a single line break 
 ● Creating a horizontal rule 
 ● Dividing a page into separate sections with 
 ● Creating lists ○ Unordered lists 
     ○ Ordered lists 
       ○ Definition lists 
       ○ Nested lists 
      7. HTML Text Formatting / Inline Elements ● White space ● Phrase elements ● When to emphasize text with  and  ● Containing a citation or a reference to other sources with  ● Indicating the defining instance of the enclosed term with  
      Intro­ HTML­CSS/ 3 Rev 10­15­4 www.karmoxie.com 
      ● Designating a fragment of computer code with  ● Designates sample output from programs, scripts, etc. with  ● Indicating text to be entered by the user with  ● Indicating an instance of a variable or program argument with  ● Indicating an abbreviated form (e.g., WWW, HTTP, etc.) with  ● Indicating an acronym (e.g., WAC, radar, etc.) with  ● Subscripts and superscripts:  and  ● The plain hyphen and the soft hyphen ● Marking document changes with  and  
      8. Adding Optimized Inline Images ● The  element ● Image sources ● Image size and resolution ● PNG­8 “Alpha” transparency ● Introduction to SVG ● General optimization strategies for images and file sizes 
      9. Adding Links to Web Pages ● Anchor tags ● The href Attribute ● Linking to pages on the web ● Linking within your own site ● Targeting a new browser window ● Creating image links ● Creating email links ● Creating telephone links 
      10. Basic Table Markup ● How tables should be used ● Creating minimal table structure ● Table headers ● Table accessibility 
      11. Forms ● How forms work ● The form Element ● Variables and content ● Form controls ● Form accessibility features ● Form layout and accessibility with 
      12. Embedding using Inline  Element