1. HTML H yper T ext M arkup L anguage

2. HTML HTML is NOT case sensitive However, proper coding etiquette if for all to be in ALL CAPS and for text to be in regular sentence form.

3. Basic HTML Tags Each HTML tag has three basic parts: 1.An open angle bracket (less than sign): < 2.The text and characters that tell Web browsers what to do 3.A closing angle bracket (greater than sign): >

4. HTML Tags  Many tags are used in pairs (some stand alone) Start tags tell the browser where to turn on particular formatting function (like italics) End tags tell the browser where to turn off the function. They include a slash. (Container Tag) Empty tag - - Stands Alone

5. LIFO *Important note about paired tags: Tags have to be LIFO: L ast I n F irst O ut It means that the LAST tag you turn on should always be the FIRST you turn off.

6. Three Sections of an HTML Document 1. The HTML document 2. The HEAD section 3. The BODY section

7. HTML Section   The first tag in every HTML document will always be, which tells the Web browsers that everything that follows should be treated as a Web page.  The tag tells the browser where the page ends.

8. HEAD Section   Immediately follows the opening tag.  Purpose of this section is to provide general information about a particular Web page.  This tag contains the Web page’s title ( tags)  This section is NOT displayed in the page’s body.  Page’s title will appear at the top of the browser window, in the title bar

9. BODY Section   Follows the HEAD section  Contains all of your Web pages content (text, graphics, etc.)

10. Saving Web Pages  Save every page as a.html or.htm  Save main page (home page) as index.htm This is the filename that servers first try to download. If you save your main page as index.htm, you help ensure that it is the first page that your audience will see.

11. EXAMPLE   I’m at the top of the screen in the blue area  Basic Example This is basic coding! 

12.  I’m at the top of the screen in the blue area  H1>Basic Example This is basic coding! 

13. More HTML  By default, browsers read the text of your Web page as a continuous line of single- spaced text.

14. Adding White Space  White space refers to the amount of empty space on a page.  The more white space on a page, the easier it is to read.  Force browsers to break up text by using : Paragraph tags Line breaks Horizontal lines

15. Paragraph Tags  Add white space between paragraphs  adds one line of white space  For example: Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Would be displayed in a browser as: Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

16. Line Breaks  Has no ending tag.  Used to add a line break without adding any new space between lines of text. inserts a blank line no blank line

17. Example Using Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Would be displayed in a browser as: Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

18. the difference  Example Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Would be displayed in a browser as: Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Example Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Would be displayed in a browser as: Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

19. Horizontal Rules  Can visually break a page into sections.  Use sparingly. ______________________________________

20. HTML – Style Tags  specifies that the enclosed text should be displayed in boldface.  specifies that the enclosed text should be displayed in italics. specifies that the enclosed text should be displayed in italics.  specifies that the enclosed text should be underlined.  These style tags can be combined: TAG = TAG

21. Heading Tags  Emphasizes major topics  Adds hierarchy to topics  Ability to create up to six levels of headings, from high - TAG = TAG to low - TAG = TAG

22. HTML – Aligning Tags  Web browsers automatically left justify text.  Tag for horizontally centering your text: Text text  Tag to right justify text: Text

23. Lists  Unordered Lists – bulleted lists Lists that do not require any specific order Each item in the list has to be identified with a list item tag: Example: Spring Classes are as follows: Keyboarding E-Commerce/Web Design Information Management

24. Ordered Lists  Ordered Lists – numbered lists Lists that do require a specific order. Numbers are automatically inserted. Each item in the list has to be identified with a list item tag: Example: Spring Classes are as follows: Keyboarding E-Commerce/Web Design Information Management

25.  BGCOLOR=######  Add to the tag  Color is changed by changing the hex code (0000FF)  Background Color Tag

26. Font Color Tag  FONT SIZE Size Range: 1-7 Default is 3   RGB OR HEX NUMBERS FOR COLORS  Use the same hex numbers for color (FFFFFF is white)  Or 

27. Hyperlink visit Yahoo! visit Yahoo

28. Hyperlink Color  Included in the Tag  LINK Color – the color of the hyperlink of your web page. LINK=RED  VLINK Color (Visited hyperlink)- the color of the hyperlink once the Web site has been visited VLINK=BLUE  ALINK Color (Active hyperlink)- the color of the hyperlink once the Web site has been visited EXAMPLE:

29. IMAGE TAG   Gif images (Graphic Interchange Format) Clip Art Regular Graphics  Jpeg images (Joint Photographic Experts Group) Photos

30. Image as a Hyperlink   Example: HTTP://WWW.EXCITE.COM SIZE – –Measures in pixels