1. DIGI KNOW? Intro to Web Development Bishoy Riad, Director of Web Development

2. capuma.ca/webdev-workshop Download Plaintext Editor sublimetext.com Follow along!

3. What is HTML?  Core Markup Language + Structural Layer  Stands for “Hyper Text Markup Language”  Basis for all webpages!

4. Basic Structure of HTML !DOCTYPE declaration: tells browser the document is in HTML ■html element: denotes HTML portion of the document ■head element: denotes meta data hidden from end user ■body element: denotes visible (body) area of document

5. HTML Components 1. Predefined set of elements 2. Elements contain opening + end "tags" expressing content 3. Attributes contain additional information HTML element reference cheatsheet

6. Examples of HTML Elements ■Headers (h1 – h6): Big Title ■Paragraphs: Some paragraph text! ■Paragraph breaks: ■Hyperlinks: Google ■Images: ■Ordered bullets: bullet item 1 ■Unordered bullets: bullet item 1

7. Your Turn: Exercise 1 1.Create a level 1 header: “My first HTML document” 2.Add a link to CAPUMA’s website labelled “Marketing Association” 3.Add an image: http://www.capuma.ca/digi-know.jpg

8. Nesting Elements “Nested” elements are enclosed within other elements. Examples: ■Images pointing to URLs: ■Bullet lists: item 1 item 1a

9. Your Turn: Exercise 2 Set the Digi Know image from ex 1 to link to http://www.capuma.ca/

10. What is CSS?  CSS serves as the Presentation Layer for HTML  Stands for “Cascading Style Sheets”  Describes how elements should be rendered!

11. Types of Cascading Styles 1.Styles linked in external CSS file 2.Embedded styles in the element 3.Inline styles within HTML code

12. Anatomy of a CSS Rule

13. CSS Selectors 1. Element Selectors 2. Class Selectors 3. ID Selectors

14. Element Selectors Define CSS rules that globally apply to all matching elements, for example: p p { color: red; } Will apply the color red to all paragraph elements: pp Lorem ipsum.

15. Class Selectors Defines rules that apply to any element containing a user- defined class, for example:.blue-header.blue-header { color: blue; } Will apply the color blue to any elements with the named class attribute of blue-header, such as: class="blue-header" Foobar

16. ID Selectors Defines rules that apply to a singular element containing a user- defined id, for example: #no-underline #no-underline { text-decoration: none; } Will apply the removal of the default hyperlink underline from a specific element with a named id attribute of no-underline: id="no-underline" Google

17. Your Turn: Exercise 3 For only the first hyperlink, change the color to red (HINT: use a class or an ID)

18. Solution Exercise 3 solution

19. Online Learning Resources ■Code Academy ■Udemy ■Lynda.com ■Team Treehouse ■W3Schools ■Mozilla Developer Network ■SitePoint ■CSS Tricks

20. Helpful Tools ■XAMPP (locally hosted test server) ■Sublime Text 2 (plaintext editor with syntax highlighting) ■Adobe Dreamweaver (dev environment with debugging and other utilities) ■Browser Developer Tools (Webkit Developer Tools, Firebug, Edge Inspector)

21. Thank You!