Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t work the same

Revised June 2008 Online PD Basic HTML2 Typing in Notepad  Type the following tags in Notepad: (don’t forget the brackets!) My First Web Page This is my very first web page. My name is Debi Mason. (but put your name!)  Save this page as “practice” with the default extension ‘.txt’ and then save a second time with the same title “practice1.html” BE SURE to add the file extension ‘.html’ the second time or it won’t show as a web page.  Now just minimize this file because you will use it again later. NOTE: “ practice 1.htm ” This is the number 1, not a small “L”

Revised June 2008 Online PD Basic HTML3 Viewing Your “practice1.html” Page  Once your practice file is saved, you can view it the web browser you have open (should be Chrome).  In order to open your html file – click on the file with the extension.html. This should automatically open the file in our internet browser.  Your file should now show in your internet window. If it does not, check your coding. This is called debugging!  Check it Out! If your page is not like that, view the codes very carefully! Check it Out

Revised June 2008 Online PD Basic HTML4 “practice1.htm” File  If yours does not look like mine, correct your code as necessary: oOpen the file in Notepad again. oMake the corrections (called “debugging” code!) oFile > Save oLook at the file in Internet Explorer again (if you did not close out the file, you simply have to click on “Refresh” to force the browser to re-read the file and show your changes!) oKeep working and debugging your code until it is correct.

Formatting Text Bold, Italics, and Underlining

Revised June 2008 Online PD Basic HTML6 practice2.htm  Under your line with your name, add: oThis is a practice sentence to make the text bold. and make the word “bold”,well…, bold. bold. oYou may need to refer to the Sample Web Page to see examples. oNow do the same with This is a practice sentence to make the text italics. and make “italics” in italics. italics. oNow type This a practice sentence to make the text underlined. underlined

Revised June 2008 Online PD Basic HTML7 practice2.html – slide 2  So, you have added four new lines of text.  Be sure to add the tag to the beginning of each sentence – makes the line of text “push” to the next line!  File > Save and look at your web page again!

Revised June 2008 Online PD Basic HTML8 Multiple Tags  If you want to add multiple effects to a line of text, you may do so, but adding the end tags takes some thought!  Now type:  This is another practice sentence!  Save and Check it out!

Revised June 2008 Online PD Basic HTML9 Adding Color Backgrounds  Now let’s discuss page backgrounds.  To add a color background to your page, you will add a ”bgcolor” attribute to your BODY tag.  This will make your page all yellow behind the other elements. Use a color of your choice, but dark is usually not a good idea.  If your text “disappears”, you probably made your background and your text color the same!

Revised August 2008 Online PD Basic HTML10 Background Color  Add the attribute bgcolor=“yellow” into your body tag (insert the curser between the “Y” and the bracket, make a space, type in the attribute and value)  Save, Refresh, & View!!  Debug if necessary.

Revised June 2008 Online PD Basic HTML11 Headings  is the largest text the viewer’s browser can display, while is the smallest. Heading tags also add some “white” space (or empty space) above and below the text to separate it for emphasis from the rest of the text.  Type the following information after your last sentence added:  This is the H1 tag in use.  This is the H2 tag in use.  This is the H3 tag in use.  This is the H4 tag in use.  This is the H5 tag in use.  This is the H6 tag in use.  Don’t add anything after the or tags – those should always be the last tags on your page!

Text Sizes  Now, we’ll add some text size tags. Add these sentences below the Heading sentences.  This is font size 6  This is font size 5  This is font size 4  This is font size 3 (This is the default font size of most Web browsers.)  This is font size 2  This is font size 1  The tag double spaces! Revised August 2008 Online PD Basic HTML12

Revised June 2008 Online PD Basic HTML13 Attributes of a Tag  Some tags may include an attribute, or additional information about the text within the tags  Attributes are included in the start tag, not the end, or close, tag  For example, o oThe tag is BODY while the attribute is bgcolor=“…” Notice the attribute is inside the brackets with the tag, and the value of the attribute is enclosed in quotes.

Revised June 2008 Online PD Basic HTML14 All Text Same Color  text=“blue” is an attribute of the BODY tag if you want all text on the page to be the same color (besides black, the default color.)  In the BODY tag, add the attribute text=“blue”, so your tag should look like:  oYour background color will still be yellow, but your text will be blue.  Save and Check It Out!

Revised June 2008 Online PD Basic HTML15 Spot Color  If you want to emphasize just part of your text by adding color to specific words or sentences, add the tag with a color attribute: o oThis one does have to close, so when you want green text to end, just close the tag, not the attribute.  For emphasis, just before your heading sentences, add the FONT tag and change the text to green. BE SURE to turn it off after the last heading sentence.  Then make the text size sentences orange. Be sure to turn off!  Save and Check It Out!

Revised June 2008 Online PD Basic HTML16 Text Alignment  The header tags can contain an attribute to align the header text where you want it.  Let’s give our Web page a title and center it.  Add a blank line under the tag at the top of the page, and type o My First Web Page oSave and Check It Out!

Revised June 2008 Online PD Basic HTML17 Centering Blocks of Text  You can also choose to center paragraphs or blocks of text.  Simply add the tag where you want to start centering everything on the page. Then add the close tag where you want to stop centering “stuff!”  Let’s center the heading sentences in our practice page  Save and Check It Out!

Adding Images to Web Pages

Revised June 2008 Online PD Basic HTML19 Saving An Image  Adding an image adds interest to a Web page. But, your image files MUST be saved in the same folder where your html document is saved.  Choose a meaningful name! NO SPACES in the file name!  Go to Google Images and choose an appropriate picture. It needs to be a JPG and the bigger the better!  To save the picture: right-click, Save As, navigate to your Documents and Save in your HTML folder (NO SPACES!)

Revised June 2008 Online PD Basic HTML20 Adding An Image Tag  Let’s add the image right up under our page title.  Make yourself an empty line or two after the tag.  Add the tag and add a center tag before it and after it so the image is centered. Be sure you copy your image name EXACTLY as you saved it (instead of picture.jpg like I used – use the quotes, though.) Also notice the image tag does not need a close tag.  Save and Check It Out!

Adding Hyperlinks to Web Pages

Revised June 2008 Online PD Basic HTML22 Adding A Hyperlink  Hyperlinks are what make the Internet the Internet! A hyperlink is a tag used to put text on your web page that links to other web pages.  We will use Google as an example.  Let’s add a tag before the heading sentences to link to Google. Be sure to add some tags to make yourself a few blank lines between text.  Click Here to Go To Google!  The tag is, the attribute is href, the text in between the tags is the actual link that shows on the web page for the user to click on, and we only close the tag, which is.  Save and Check It Out!

Revised June 2008 Online PD Basic HTML23 Adding an Link  An link is almost like the hyperlink, just changes a little.  Click here to contact me!  Now add an link using your school address under the Google link. It may help to add some spaces between lines to make your code easier to read… add tags before the tag!  Save it and Check It out!

Adding Lists to Web Pages Unordered Lists Ordered Lists Revised July 2009Basic HTML24

Unordered Lists  Unordered lists are shown with a “bullet.”  To begin the unordered list, use the tag  Each item in the list must also have a tag, and an end tag after it  End the list with the close tag Revised July 2009 Basic HTML25

Unordered List Example Revised July 2009 Basic HTML26 Notepad Internet Explorer

Unordered List  Make an unordered list of YOUR favorite fruits using the tags on the previous slide. Revised August 2008 Online PD Basic HTML27

Ordered List  Ordered lists are shown with numbering added  To begin the ordered list, use the tag  Each item in the list must also have a tag, and an end tag after it  End the list with the close tag Revised July 2009 Basic HTML28

Ordered List Sample Revised July 2009 Basic HTML29 Notepad WEB PAGE

Revised June 2008 Online PD Basic HTML30 Ordered List  Make an ordered list of YOUR favorite fruits using the tags on the previous slide.

 Save is one last time and CHECK IT OUT! Revised August 2008 Online PD Basic HTML31

Revised June 2008 Online PD Basic HTML32 Debra Mason Information and Communication Technology II Northwest Rankin Middle School Flowood, MS