1. Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems

2. Part 1: Basic Web Page Production

3. Basic Web page creation Basic HTML tags Heading tags Paragraph and break tags Text alignment Hyper links Background color Text color Horizontal rules Bold and italic Images

4. HTML Hyper Text Mark-up Language

5. Basic HTML tags This is the border Title All content of your web page

6. Tag Structure Opening Element TagClosing Element Tag The opening tag tells the browser, “this is where I want you to begin this effect or command.” The closing tag tells the browser, “this is where I want you to end the effect or command”

7. Tag Structure RED ALERT! ElementAttributeValue Opening Element Tag Content Closing Element Tag

8. Tag Structure RED ALERT!

9. HTML Tag Every page has this tag. This Tag tells the browser that the file being loaded is a HTML document.

10. HEAD Tag This tag defines the head of your page, to include the “title” tag

11. TITLE tag The “title” tag allows to display a title at the top of the browser’s display window.

12. Body Tag The “body” tag allows you to the body structure to include: –Background –Bgcolor –Text –Link –Vlink

13. Heading tags Used to denote main headings and subheadings; go from 1 to 6 Show relative importance of information This is H1 This is H1 This is H2 This is H2 This is H3 This is H3 This is H4 This is H4

14. Paragraph and break tags surround a paragraph of info Skips a line and starts a new paragraph (single-sided tag) Starts the next word on the next line No space left between lines

15. Text alignment The default is that all text is left-aligned To center whole blocks of text, just use

16. Background color Attribute added to the tag There are 16 color names you can add (red, blue, yellow, etc.) or you have to know the hexadecimal code Examples

17. The horizontal rule Used to separate portions of a page A one-sided tag Can include the number of pixels as an attribute Example

18. Bold and italic Used to emphasize text Two-sided tags Examples This is bold This is bold This is italic This is italic works as same as

19. Part 2: Creating Lists

20. Lists Bulleted lists Numbered lists

21. Bulleted (unordered) list Good for drawing attention to items that are in no particular order Dogs * Dogs Cats * Cats

22. Numbered (ordered) lists Great for describing sequential tasks or step-by-step procedures Phase 1 1. Phase 1 Phase 2 2. Phase 2

23. Part 3: Links and Navigation

24. Links and navigation Relative links -Links in your own directory Absolute links -Links located on another server Changing link color

25. Relative links Gives you the name of the file you want to access in relation to the page you are on If index.htm and page2.htm are in the same directory, the link on the index page to page 2 would look like this Go to page 2

26. Absolute links Specify the entire URL to go to Go to CNN To open another browser page use the target attribute Go to CNN

27. Part 4: Adding Graphics

28. Graphics for your page Adding graphics to your page Aligning graphics Using graphics as links Insert a background package

29. Adding graphics to your page Two main file formats -GIF for icons and line drawings -JPEG for photographs Try to keep graphic files under 30K

30. Using graphics as links You may use a picture as a hypertext link by typing: which results in an apple picture with a blue box around it to show it as a link.

31. Inserting a background picture Background pictures should be small gifs that tile well

32. The End