1. Thursday, July 9 Instructor: Craig Duckett cduckett@cascadia.edu Crash Course in HTML

2. First Things First: First Things First: Opening & Working on Files (HTML, CS, JS) HTML files are associated with the default browser, so if you want to open them in the Komodo Edit text editor (or some other text editor like Notepad++), then you have to manually point to your text editor when opening the HTML file (or you can simply drag-and-drop the HTML file into the open text editor). In Windows, Komodo Edit is located under Start > All Programs > ActiveState Komodo Edit 8 To Open a File in Komodo Edit 1.Right-click on the file to bring up the Context Window 2.Select Open With 3.Select Komodo Edit If Komodo Edit does not appear in ‘Open With’ then you need to add it one time: 1.Right-click on the file to bring up the Context Window 2.Select Open With 3.Select Choose default program… 4.Uncheck (deselect) Always use the selected program to open this kind of file 5.Browse to the Komodo Edit location and select the executable file (komodo.exe) C:\Program Files (x86)\ActiveState Komodo Edit 8\komodo.exe 2 http://www.wikihow.com/Right-Click-on-a-Mac

3. The Versions of HTML 3

4. HTML1 (1993) 4

5. HTML2 (1995) 5 RED = New Tags GRAY = Deprectated Tags

6. HTML3.2 (1997) 6 RED = New Tags GRAY = Deprectated Tags

7. HTML4 (1998) 7 RED = New Tags GRAY = Deprectated Tags

8. XHTML1 (2000) eXtensibleHTML The main difference between XHTML1 and HTML4 is that all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other. 8

9. XHTML1.1 (2001) 9 RED = New Tags

10. HTML5 (2008 Working Draft; 2012 - ?) http://www.w3schools.com/tags/default.asp 10 RED = New Tags GRAY = Deprectated Tags

11. 1. A statement or declaration which tells the browser what version of HTML our file is using and therefore how the code should be rendered by the browser at view time. 2. The DOCTYPE has to appear at the very top of the file, even before the opening HTML tag HTML3.2 DOCTYPE HTML4 DOCTYPE XHTML1 DOCTYPE HTML5 DOCTYPE  THIS WILL BE THE DOCTYPE USED IN THIS CLASS 11

12. A Groovy Page. The default character encoding in HTML-5 is UTF-8 Universal Character Set Transitional Format 8-Bit http://en.wikipedia.org/wiki/UTF-8 Meta Tags http://www.w3schools.com/tags/tag_meta.asp 12

13. Simplest HTML page Hello Everybody. What's happening? The browser uses this information "behind the scenes" The browser uses this information To display page content Demo 13

14. HTML Template Page Heading Page Content The browser uses this head information "behind the scenes“ Meta tags for “charset” and “author” The browser uses this body information to display page content element displays a header of a larger font size based on the default styles of the browser template.html 14

15. Absolute Linking A link that includes the entire http path Example http://programajama.com/foundations/rexwinkus/index.htmlhttp://programajama.com/foundations/rexwinkus/index.html Relative Linking A link that only includes the file path in relation to the files and folders in your remote directory Example moon.html 15

16. Common Tags TagsDescriptionExample paragraphCreates a paragraph between the opening/closing tags followed by a line of white space This is the first paragraph line. This is the second paragraph line. This is the third paragraph line. This is the fourth paragraph line. This is the first paragraph line. This is the second paragraph line. This is the third paragraph line. This is the fourth paragraph line. W3Schools: tag 16

17. TagsDescriptionExample or line breakThe tag inserts a single line break. The tag is an empty tag which means that it has no end tag. This is the first line. This is the second line. This is the third line. This is the fourth line. This is the first line. This is the second line. This is the third line. This is the fourth line. W3Schools: tag 17

18. TagsDescriptionExample heading tagsCreates bold content of varying sizes, with the being the largest, and being the smallest, followed by a line of white space This is the first heading line. This is the second heading line. This is the third heading line. This is the fourth heading line. This is the fifth heading line. This is the sixth heading line. This is the first heading line. This is the second heading line. This is the third heading line. This is the fourth heading line. This is the fifth heading line. This is the sixth heading line. W3Schools: to tags 18

19. TagsDescriptionExample ordered list list item Creates a numbered list, followed by a line of white space. You can also declare its start, order, and the type of list using 1 (default), A, a, I (upper case Roman numeral), I (lower case roman numeral) Apple Banana Cantaloupe Apple Banana Cantaloupe Apple Banana Cantaloupe 1.Apple 2.Banana 3.Cantaloupe 3. Apple 2. Banana 1. Cantaloupe X. Apple XI. Banana XII. Cantaloupe W3Schools: tag 19

20. TagsDescriptionExample unordered list list item Creates a bulleted list, followed by a line of white space. You can also declare its type using CSS and the list-style-type propertylist-style-type Apple Banana Cantaloupe Apple Red Delicious Granny Smith Banana Cantaloupe Apple Banana Cantaloupe Apple o Red Delicious o Granny Smith Banana Cantaloupe W3Schools: tag 20

21. Back before HTML5, if you wanted to design a page into sections you had to use the or "division" tag and creating a separate "id" or "class" for each section you wanted (we'll talk about divs, ids, and classes a bit later) 21

22. With HTML5, there are several new tags with this section functionality built in by default. You still need to position and format these sections using CSS, but you don't have to create separate or unique "classes" or "ids" anymore to do it. 22

23. TagsDescriptionExample header section of a web page The tag specifies a header for a document or section. The element should be used as a container for introductory content or set of navigational links. You can have several elements in one document. A tag cannot be placed within a, or another element. Rex Winkus's Portfolio Week 1 Isn't it groovy? Rex Winkus's Portfolio Week 1 Isn't it groovy? W3Schools: tag 23

24. TagsDescriptionExample navigation section of a web pageThe tag defines a set of navigation links. Not all links of a document must be in a element. The element is intended only for major block of navigation links. Microsoft | Google | Yahoo | Microsoft | Google | Yahoo W3Schools: tag 24

25. TagsDescriptionExample footer section of a web pageA footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. Using A Footer My Page My Article Some Information © Rex Winkus 2015 Email Me My Page My Article Some Information © Rex Winkus 2015 Email Me W3Schools tag 25

26. TagsDescriptionExample article section of a web pageThe tag specifies independent, self- contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Using Article My Page My First Article Some Information My Second Article Some Content My Page My First Article Some Information My Second Article Some Content W3Schools tag 26

27. TagsDescriptionExample Defines a section of a web pageThe tag defines sections in a document, such as chapters, headers, footers, or sections My Page Articles My First Article My Second Article My First Article Some Information My Second Article Some Content My Page Articles My First Article My Second Article My First Article Some Information My Second Article Some Content W3Schools tag 27

28. TagsDescriptionExample Defines an aside section of a web page The tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content. My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information W3Schools tag 28

29. TagsDescriptionExample A division section of a web pageThe tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS. My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information W3Schools tag 29 Also: Next Slide 

30. TagsDescriptionExample A division section of a web pageA element used to color a part of a text> element used to color a part of a text My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information My Page My First Article Some Information My Second Article Some Content An Interesting Fact… Some Interesting Information W3Schools tag 30

31. Putting It All Together My Page Home My Article Some Content More information © Rex Winkus 2013 Email Me 31

32.  img src is required  The optional width, height may be in units of pixels or percentage of page or frame  width="357"  height="50%"  Images scale to fit the space allowed  alt tags (for "alternate") is text that gives a name for the image, and will appear in case the image is missing, as a mouseover popup, and in browser text readers for the visually impaired. 32

33. 33 Align=positionImage/Text Placement LeftImage on left edge; text flows to right of image RightImage on right edge; text flows to left TopImage is left; words align with top of image BottomImage is left; words align with bottom of image MiddleWords align with middle of image This is "old school" – Now images are aligned now using CSS

34. 34 The Dude Abides. This is "old school" Now images are aligned using CSS http://faculty.cascadia.edu/cduckett/bit116/Lecture_02/html0i.html

35. I have not yet talked about color, tables, forms (including checkboxes, radio buttons, or select elements), or linking files in and out of sub-folders. I will be bringing these up—as well as a few other HTML features—as the quarter progresses. The use of color I will introduce with the next lecture when we move into CSS. Note: 35

36. 36 Please begin working on the LECTURE 2 Part 1 In-Class Exercises. When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify. Once you have completed your ICEs, you are free to go for the day. If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.