In Depth Introduction to HTML and CSS (5 days)

Size: px

Start display at page:

Download "In Depth Introduction to HTML and CSS (5 days)"

Branden Gibbs
7 years ago
Views:

1 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 Markup Language (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 <head> 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

2 Course Topics Part I HTML 1. Introduction Brief Web Technology history Adhering to the Standards The Anatomy of a Web Page 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 (document object model) Start and end tags The <head> and <body> sections Using attributes for additional information in start tags Named character references / entities Comments Intro HTML CSS/ 2 Rev

3 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 <head>? Specifying a base URL for relative URLs 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 <h1> <h2> <h6> Indicating a paragraph of text <p> Displaying pre formatted text <pre> Indicating a block of quoted text using <blockquote> Creating a single line break <br /> Creating a horizontal rule <hr /> Dividing a page into separate sections with <div> Creating lists Unordered lists <ul> Ordered lists <ol> Definition lists <dl> Nested lists 7. HTML Text Formatting / Inline Elements White space Phrase elements When to emphasize text with <em> and <strong> Containing a citation or a reference to other sources with <cite> Indicating the defining instance of the enclosed term with <dfn> Intro HTML CSS/ 3 Rev

4 Designating a fragment of computer code with <code> Designates sample output from programs, scripts, etc. with <samp> Indicating text to be entered by the user with <kbd> Indicating an instance of a variable or program argument with <var> Indicating an abbreviated form (e.g., WWW, HTTP, etc.) with <abbr> Indicating an acronym (e.g., WAC, radar, etc.) with <acronym> Subscripts and superscripts: <sub> and <sup> The plain hyphen and the soft hyphen Marking document changes with <ins> and <del> 8. Adding Optimized Inline Images The <img> 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 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 <label> 12. Embedding using Inline Frame Element <iframe> A Window in a Window (iframe) Intro HTML CSS/ 4 Rev

5 Setting height and width Removing the border Targeting links to iframes Part II 13. Cascading Style Sheets The benefits of CSS Ways to add CSS rules and best practices with external, embedded, inline Applying a basic CSS rule using HTML, class and id selectors Tools for validating CSS 14. Colors and Backgrounds Ways to specify color values Background color Playing with opacity Background images 15. Formatting Text The font properties Changing text color Underlines and other text decoration Changing capitalization Text Shadow Changing lists: bullets and numbers Format images Format links 16. The Very Important Box Model Elements as boxes Specifying box dimensions Margins Padding Borders 17. Floating, Positioning, and Page Layout Normal Flow Floating Positioning Basics Relative Positioning Absolute Positioning Fixed Positioning Intro HTML CSS/ 5 Rev

6 Page layout strategies & techniques Multicolumn layouts using floats Top to Bottom Column Backgrounds 18. CSS Techniques Using a CSS Reset Image Replacement Techniques CSS Sprites Styling forms Styling tables Basic responsive web design 19. Managing CSS Apply advanced CSS selectors Apply browser specific CSS Create a printer stylesheet using CSS 20. Creating Advanced Navigation Create CSS Based Menus Incorporate images in CSS Based Menus Create image maps 21. Beyond the Basics: an Overview HTML5 Features CSS: LESS CSS: SASS Intro HTML CSS/ 6 Rev

Fast track to HTML & CSS 101 (Web Design)

Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of