1. More Basic HTML 2 assignments: 1—complete the worksheet
2—create your second HTML web page following the directions in this PowerPoint where it says “Let’s practice” beginning with Slide 8.

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

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

4. Spacing Continues
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.

5. Spacing Tags:
Line Break: <br> isn’t a set; used to break the line without putting a space between the lines, acts like a Single Space.
Paragraph: <p> </p>; used to add space between paragraphs, acts like a Double Space.
Horizontal Rule: <hr> isn't a set; adds a visible horizontal line, used to make sections.
You can use as many 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
<!--comment-->
It doesn’t show up in the browser.
Comments should be short.
Can be used anywhere in the document.

7. Adding Various Spacing
Let’s Practice
Adding Various Spacing

8. Open both the browser and notepad of My1stWebPage
Open both the browser and notepad of My1stWebPage.html (You must have completed this assignment!)
After the 1st 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 </body> closing tag:
<hr>I think Web Design is a great thing
to learn because…</hr>
<br>I've learned in Web Design that a br tag lets you create a…<br> Line Break.

9. <p> My name is {insert your name} and I go to {insert your name} High School. <br> I am in the _?_ grade. <p> I am learning to create web sites in IDT class and so far I have just learned the basic tags</p>
<!-- Author: your name -->
<!– Created: today’s date-->
<hr></hr>
Now, it’s Time to Save & Learn to Refresh
Click File  Save As; Save both your text file in notepad and your web page as my2ndwebpage.html or my2ndwebpage.txt

10. How to View Changes

11. Refreshing the Browser to See the Changes
You must always Refresh the Browser each and every time you Save the Notepad to see the changes on your web page.
Click Refresh in Explorer or
Click Reload the Page in Chrome 11 11

12. Let’s Practice Refreshing

13. Click the Refresh or Reload button

14. Wow, look at your web page!

15. Adding Some Style & Heading

16. Style Tags <b> </b> - bold text
<u> </u> - underline text
<i> </i> - italic text

17. Heading Tags
Are used to separate text and introduce new topics, titles or subtitles on web pages.
They’re Bold & Double Spaced. So, no need for <br></br>, <p> /p> or <b></b>.
Come in different sizes
<h1> </h1> Largest heading
<h2> </h2>
<h3> </h3> Average heading
<h4> </h4>
<h5> </h5>
<h6> </h6> Smallest heading

18. Let’s Practice
Adding
Style & Heading Tags

19. Switch back to your Notepad and after the last <hr> you typed, add the following text:
<h1>Heading 1 - Biggest Size</h1>
<h2>Heading 2</h2>
<h3>Heading 3 – Average </h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6- Smallest Size</h6>

20. Save the Notepad & Refresh the Browser
Now, lets add some Style to the previously typed text:
Put a <b></b> on either side of “great” in the paragraph that starts “I think Web Design…” but before the </hr>
Put an <i></i> on either side of your name in the paragraph that starts “My name is_______...” but before the </p>
Put a <u></u> on either side of the text “Heading 4” but before the </h4>
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 –
<hr width=number or %>
Thickness or Height -
<hr size=number or %>
Alignment –
<hr align=”right or center or left”>
Combine the add-on when needed -
<hr align=”right” size=30 width=40%>

25. Font and its “Add-ons” <font> </font>
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
<font size=number> text here </font>

26. <font size=3 face=”Comic Sans MS”>
Font Face – changes the appearance of the font such as Arial or Comic Sans.
<font face =”Arial’’>text </font>
You can combine all of the font tag’s add-ons in one tag if they apply to the same text:
<font size=3 face=”Comic Sans MS”>

27. ALIGNING TEXT To Align using the Paragraph Tag:
<p align=”right or center or left”> type here </p>
To Align using the Heading Tag:
<h1 align=”right or center or left”> type here </h1>
Centers anything
<center> text </center>

28. Changing Horizontal Rule and Font
Let’s Practice
Changing Horizontal Rule and Font

29. Switch back to your Notepad.
Now, pick one of the <hr> to change the width, size & alignment by adding the code below inside the <hr>:
width=50% size=10 align=“right”
Now Type: width=50% size=10 align=“right”
<font size=6 face=“Comic Sans MS”> on either side of “This is my very first “WEB PAGE”!!! </font>
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 #FF Green or #00FF00
Blue or #0000FF Yellow or #FFFF00
Gray or # Purple or #800080
Fuchsia or #FF00FF Lime or #00FF00

33. Adding Color Web safe colors are provided on Color Charts
Coloring the Background a solid color
<body bgcolor = “color’s name or hexidecimal #>

34. Adding Color Continues
Coloring the Horizontal Rule
<hr color=”colorname” or hexidecimal #>
Coloring All Words:
<body text=“color’s name” or hexidecimal#>
Color Some Words, sentence or paragraph:
<font color=“color’s name”> Words </font>
Don’t forget that you can Combine
<body bgcolor=“?” text=“?”>

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

36. Changing the Background Color
Inside the <body> 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 <body> but before the bgcolor add-on type: text=“white”

37. Change the Horizontal Rule:
pick a <hr> to change the color by typing inside of it color=“blue”
Change the Font Color, Size & Face:
Add to the <font color=“purple”> </font> on either side of “I am learning to create web sites in IDT 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
Click the Close button on the browser title bar
Click the Close button on the Notepad window title bar 40 40

41. Recap Activity Tell your teacher when you have completed the web page
Continue completing the Tags sheet after you complete the web page
Tags to Remember:
<p>, <hr>, <br>, <font>,
<h1> - <h7>, <b>, <i>
<u>, <!--comment-->
Add-On’s
color, size, width
align, face, text, bgcolor