1. HTML Basics

2. HTML Coding

3. HTML Hypertext markup language The code used to create web pages

4. HTML Tags Text that appears between two angle brackets  Text that tells the web browser how to display a web page’s content Do not see HTML tags in the browser window

5. Tag Sets Pairs of HTML tags Tells a browser where formatting should start and end

6. Starting tag Also called opening tag  Defines the beginning of a particular tag Example: ▫ definitely red

7. Ending tag Also called closing tag  Tells the browser where a starting tag ends  Forward slash in the brackets indicates an ending tag Example: ▫ definitely red

8. Nested Tag A tag enclosed inside another set of tags ▫Example  He almost won an award.

9. Empty Tag A tag that only requires an opening tag Examples:  - line break  - horizontal rule  - image

10. Source Code The text and HTML elements used to create a web page

11. Using a Text Editor

12. Main Parts of an HTML Document DTD (Document Type Definition) Header Body

13. DTD Specifies what version of HTML is used in your page

14. Header Provides info to the browser about your page ▫Such as title and author Does NOT appear in the browser The TITLE is displayed in the browser’s title bar,

15. Body The tag set that encloses the code for the content you see displayed in the browser’s window,

16. Naming Files Keep file names descriptive but somewhat short Use the underscore (_) to indicate a blank space between words

17. File Name Extension Tells the computer what type of file it is reading Notepad automatically saves all files with a.txt extension Web browsers can’t read.txt Must change it to.htm

18. Attribute An instruction that further specifies a tag’s characteristics Allows you to assign colors, styles and alignment to a page Placed in opening tags Have a name, an equal sign (=) and a descriptor that MUST appear in quotes Must be in lowercase to meet specifications

19. Font Color Attribute Used to change the text color The descriptor specifies which color to use Example: grass 16 named colors 216 hexadecimal colors

20. Background Color Attribute Used to specify a page’s background color by adding attributes to the tag Example:

21. Alignment Attributes Used to specify text alignment All text is automatically aligned to the left margin To change the alignment add an align attribute Example:

22. Heading Tags Used to break text into short, readable sections 6 different sizes: ▫H1 – largest ▫H6 - smallest

23. Lists Make text easier to read Adds visual interest to a page Helps readers identify key points on a page more quickly

24. 2 Types of Lists Ordered List ▫Items that must appear in a certain sequence (numbered or lettered) ▫Uses the, tag set Unordered List ▫Items can appear in any order (bulleted) ▫Uses the, tag set

25. Viewing an HTML Page It is important to view the web pages that you create in a text editor in a browser because Notepad does not show you how your web page will look

26. Enhancing and Testing Your HTML Page

27. Adding Images Using HTML Use the tag to insert an image into a web page The tag locates the image and displays it in a browser Consists of five (5) common attributes

28. src: specifies the source location of the image alt: gives the browser an alternative text message to display if the image is missing align: wraps text around an image border: places a border around an image width: specifies the image’s width height: specifies the image’s height src and alt should always be used when creating an image tag

29. Example

30. Anchor Tag Creates a hyperlink around selected text, is the tag set used to create all links href is the attribute used to tell the web browser where it needs to go

31. Link Types Text Link: text a user clicks to activate a hyperlink Graphic Link: an image a user clicks to activate a link

32. Relative Link Example: click here if you are happy Code contains the name of the file being linked to Only works if the document being linked to is in the same web site folder as the document containing the link Links pages within the SAME web site

33. Absolute Link Example: click here if you are really happy “http://www.reallyhappy.com Code contains the complete URL or path of the file being linked to Usually external links

34. Debugging Locating and correcting any obvious errors in your code as you are building the page

35. Testing Checking the page to make sure it displays as designed Allows you to double check the links are working properly The formal process of checking web pages for completeness and full functionality in a browser before launching it