1. 15.2 More Basic HTML

2. More Basic HTML Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments Add font Add color Today you will learn how to…

3. Spacing Add white space to the Web Page affects its structure, layout as well as helps with readability. A web browser is free-form document meaning that any spaces or blank lines have no effect on the browser unless they are “TAGGED”.

4. On the Notepad, you can actually use the spacebar, return & tab keys to type the tags, text and the different sections. BUT the Browser & will IGNORE all of this. – everything will be as 1 long single spaced line or paragraph. Spacing Continues

5. Spacing Tags: Line Break: Isn’t a set, use to break the line without putting a space between the lines, acts like a Single Space. Paragraph: use to add space between paragraphs, acts like a Double Space. Horizontal Rule: isn't a set, adds a visible horizontal line, used to make sections. You can use as many of spacing tags as needed.

6. Comment Tag When you want to add notes or comments to a section or the entire web page use this tag It doesn’t show up in the browser. Comments should be short. Can be used anywhere in the document.

7. Let’s Practice Adding Various Spacing

8. If needed, open both the browser and notepad of My1stWebPage.html After the 1 st sentence This is my very first “Web Page” type the following text from this & the next slide with each statement on a separate line and all before the closing tag: I think Web Design is a great thing to learn because… I've learned in Web Design that a br tag lets you create a… Line Break.

9. My name is {insert your name} and I go to {insert your name} High School. I am in the _?_ grade. I am learning to create web sites in {your teacher's name} CMW class and so far I have just learned the basic tags Now, it’s Time to Save & Learn to Refresh Click File  Save

10. How to View Changes

11. Refreshing the Browser to See the Changes 11 Switch to your My1stWebPage browser screen. You will notice none of the additional text you typed was add though you just saved. That’s because you must always Refresh the Browser each and every time you Save the Notepad. Click the Refresh button on the Standard toolbar

12. Let’s Practice Refreshing

13. Click the Refresh button

14. Wow, look at your web page!

15. Adding Some Style & Heading

16. Style Tags - bold text - underline text - italic text

17. Heading Tags Are used to separate text and introduce new topics, titles or subtitle on web pages. They’re Bold & Double Spaced. So, no need for, /p> or. Come in different sizes – Largest heading – – Average heading – – Smallest heading

18. Let’s Practice Adding Style & Heading Tags

19. Switch back to your Notepad and after the last you typed, add the following text: Heading 1 - Biggest Size Heading 2 Heading 3 – Average Heading 4 Heading 5 Heading 6- Smallest Size

20. Now, lets add some Style to the previously type text: Put a on either side of “great” in the paragraph that starts “I think Web Design…” but before the Put an on either side of your name in the paragraph that starts “My name is_______...” but before the Put a on either side of the text “Heading 4” but before the Save the Notepad & Refresh the Browser

21. Don’t forget to Refresh your Browser to see the new changes.

22. Tags & Tags Features

23. Tags and Features (Add-Ons) Tags (singles or sets) will have Attributes or Features. Let’s call the tag features “Add-On’s”. Add-On’s allow tags to have additional features such as size, color, width, etc… Add-On’s will always go after the opening tag only and never in the closing tag, if it’s a set.

24. Changing the Appearance of the Horizontal Rule To Change the Width or Length – Thickness or Height - Alignment – Combine the add-on when needed -

25. Font and its “Add-ons” Font size ranges from 1 - 7 1 is Tiny font 3 is normal - like Word size 12 7 is huge To change the Font Size text here

26. Font Face – changes the appearance of the font such as Arial or Comic Sans. text You can combine all of the font tag’s add-ons in one tag if they apply to the same text:

27. ALIGNING TEXT To Align using the Paragraph Tag: type here To Align using the Heading Tag: type here Centers anything text

28. Let’s Practice Changing Horizontal Rule and Font

29. Switch back to your Notepad. Now, pick one of the to change the width, size & alignment by adding the below inside the : width=50% size=10 align=“right” Now Type: on either side of “This is my very first “WEB PAGE”!!! Save the Notepad & Refresh the Browser

31. Adding Colors

32. What’s the Deal with Colors? Color can be added to every element on a web page. Many tags will use the “color” add-on to change the color. Can use the color’s name such as “blue” or the Hexadecimal such as #CCFF00 For example: White or #FFFFFF Black or #000000 Red or #FF0000 Green or #00FF00 Blue or #0000FF Yellow or #FFFF00 Gray or #808080Purple or #800080 Fuchsia or #FF00FFLime or #00FF00

33. Adding Color Web safe colors are provided on Color Charts gotomy.com (click on the color chart, scroll down to color name (this has the color numbers also) iconbazaar.com (click on the Color Table, Click Standard Netscape Named Colors) Coloring the Background a solid color

34. Adding Color Continues To Coloring the Horizontal Rule Coloring All Words: Color Some Words, sentence or paragraph: Words Don’t forget that you can Combine

35. Let’s Practice Adding Colors Some Made up Colors might not work

36. Changing the Background Color Inside the tag type: bgcolor=“gray” Now try changing the “gray” to #FFB573 Now change it to whatever color you want. Changing the Body Color: Inside the but before the bgcolor add-on type: text=“white” Now change it to whatever color you want.

37. Change the Horizontal Rule: pick a to change the color by typing inside of it color=“blue” Change the Font Color, Size & Face: Add to the on either side of “I am learning to create web sites in Mrs. Smith’s Beginning Web Design class” Save the Notepad & Refresh the Browser

38. your colors might be different

39. You Are Well On Your Way to Being an Excellent Web Master!

40. Quitting Notepad and a Browser 40 Click the Close button on the browser title bar Click the Close button on the Notepad window title bar

41. Recap Activity Open Winter Break web page to practice demonstrating your knowledge of all the tags learned so far. Follow directions on worksheet. Tags to Remember:,,,, -,,, Add-On’s color, size, width align, face, text, bgcolor