1. HTML

2. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation http://www.w3schools.com

3. Basic Syntax of HTML <> denotes tags First tag: Most tags require and opening and closing tags to stop – indicates the closing tag

4. Start and End of HTML Start and end of HTML Start and end of head section Start and end of body Start and end of title of your page

5. HTML Tag Rules Whitespace are ignored Beware: HTML does no checking for syntax errors – it interprets what it can and ignores the rest. You will need to be the error checker for yourself

6. Editing Content For example: – indicates the following text will be bold – Example: Bold me! but not me! The result of the above will be: Bold me! but not me!

7. Basic Structure of HTML Page The Title Test Page with text

8. Syntax Headers Header 1 Header 2 Header 3 Paragraphs Paragraph

9. More Syntax Next Line Changing text bold italics underline Comment –

10. More Syntax! space Text scrolling Font text – Options: color, face, size Centered Text

11. More Syntax! Horizontal Line – Changing Font – Change the font of this text – Changing font has many different attributes – Other tags also have attributes

12. Attributes of Tags Blue text small text Arial text You can put all attributes into one tag: – Changed text font

13. Deprecated Tags,, have been deprecated HTML wasn’t meant to be about styling – This is why we have CSS Instead use and For, we have to use with CSS

14. Deprecated Tags cont. “In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.” “Avoid using the elements:,, and, and the attributes: color and bgcolor.” *From http://www.w3schools.com/html/html_css.asphttp://www.w3schools.com/html/html_css.asp http://www.tutorialspoint.com/html/html_deprecated_tags.htm

15. Making an Image Your Background For color: For background image:

16. Linking Web Pages Link Text The URL can be a page you created or an external link (MUST HAVE HTTP) About Me MTSU

17. Useful Attributes for Links Target=“_blank” – opens the link in a new window Title=“” – the alt text of the link Can anchor pages: – – Click here to go to the anchor.

18. Lists Two types of lists – Ordered: 1.First entry 2.Second entry 3.Third entry – Unordered Entry

19. Ordered Lists First Entry Second Entry Third Entry

20. Order List Attributes Compact – less space between lines and indentation – Start – specifies the start number – Type – specifies the type of order (1, A, a, I, i) –

21. Unordered Lists Entry

22. Unordered Lists Attributes Compact – Type (disc, square, circle) –

23. Lists Within Lists 1.First Entry – Sub Entry 2.Second Entry – Sub Entry 3.Third Entry First Entry Sub Entry Second Entry Sub Entry Third Entry

24. Inserting Images Two ways to insert: – Put the Internet link – Download the image, link it –

25. Making a Picture a Link

26. Attributes of Inserting Images Alt – the alternative text of the picture this shows up when you scroll over an image Width – specifies the width of the image Height – specifies the height of the image Align – specifies the alignment (top, bottom, middle, left, right) (Going to use CSS for this)

27. What is the Difference? Saving: have to download the image – Include the location and image name. Link: You just include the URL – Taking up the resources of whatever site you got the link from

28. Tables : Start and end of the table : Start and end of a row : Start and end of a header cell : Start and end of a table data cell

29. Tables Header 1 Header 2 Data 1 Data 2 Header 1Header 2 Data 1Data 2

30. Attributes of Tables Table: align, bgcolor, border, cell padding, cell spacing, frame, rules, summary, width th and td: abbr, align, axis, bgcolor, char, charoff, colspan, height, nowrap, rowspan, scope, valign, width tr: align, bgcolor, charoff, valign

31. The tag Instead of : Centered Text Or Centered Header

32. The tag cont. Instead of : Text For multiple attributes: Text Can also be applied to other tags:

33. For Background Color Background Image: Background of a Header or other tag: Heading 2 This is a paragraph.

34. Extra Stuff Marquee - http://www.quackit.com/html/codes/html_m arquee_code.cfm http://www.quackit.com/html/codes/html_m arquee_code.cfm Embed Youtube videos: – Go to a youtube video: http://www.youtube.com/watch?v=jofNR_WkoCE http://www.youtube.com/watch?v=jofNR_WkoCE – Click Share, next to About – Click Embed, next to Share this video – Copy the text and paste into your website

35. Changing your Webpage Layout Div: http://www.w3schools.com/html/html_layout.asp http://www.w3schools.com/html/html_layout.asp Div stands for division: – Menus and Sidebars and more

36. Using Divs You can divide up your page to create banners, sidebars, main content, footers, headers, etc. http://www.mtsu.edu/ https://cs.mtsu.edu/~mw3n/ http://w3schools.com/css/tryit.asp?filename= trycss_float6 http://w3schools.com/css/tryit.asp?filename= trycss_float6

37. Styles to use with Div Width – specifies the width of the division Height – specifies the height of the division Color – color of the text inside the division Background-color Background-image Display Float Text-Align