Let’s Try It! Open Notepad Online PD Basic HTML 12/22/2017 Let’s Try It! Open Notepad Start > All Programs > Accessories > Notepad Don’t get WordPad by mistake – won’t work the same Revised June 2008 Online PD Basic HTML DMasonDesigns
This is the number 1, not a small “L” Online PD Basic HTML 12/22/2017 Typing in Notepad Type the following tags in Notepad: (don’t forget the brackets!) <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> <BR>This is my very first web page. <BR>My name is Debi Mason. (but put your name!) </BODY> </HTML> Save this page and name it “practice1.html” BE SURE to add the file extension ‘.html’ or it won’t show as a web page. Now just minimize this file because you will use it again later. NOTE: “practice1.htm” This is the number 1, not a small “L” Revised June 2008 Online PD Basic HTML DMasonDesigns
Viewing Your “practice1.html” Page Online PD Basic HTML 12/22/2017 Viewing Your “practice1.html” Page Once your practice file is saved, you can view it in Internet Explorer or Chrome, etc so just click the icon. File > Open > Browse to your practice1.html file > OK 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! Revised June 2008 Online PD Basic HTML DMasonDesigns
Online PD Basic HTML 12/22/2017 “practice1.htm” File If yours does not look like mine, correct your code as necessary: Open the file in Notepad again. Make the corrections (called “debugging” code!) File > Save Look 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!) Keep working and debugging your code until it is correct. Revised June 2008 Online PD Basic HTML DMasonDesigns
Online PD Basic HTML Bold, Italics, and Underlining 12/22/2017 Formatting Text Bold, Italics, and Underlining DMasonDesigns
practice2.htm Under your line with your name, add: Online PD Basic HTML 12/22/2017 practice2.htm Under your line with your name, add: This is a practice sentence to make the text bold. and make the word “bold” ,well…, bold. <B>bold.</B> You may need to refer to the Sample Web Page to see examples. Now do the same with This is a practice sentence to make the text italics. and make “italics” in italics. <I>italics.</I> Now type This a practice sentence to make the text underlined. <U>underlined</U> Revised June 2008 Online PD Basic HTML DMasonDesigns
practice2.html – slide 2 So, you have added four new lines of text. Online PD Basic HTML 12/22/2017 practice2.html – slide 2 So, you have added four new lines of text. Be sure to add the <BR> 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 HTML DMasonDesigns
Online PD Basic HTML 12/22/2017 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: <BR><B><I><U> This is another practice sentence! </U></I></B> Save and Check it out! Revised June 2008 Online PD Basic HTML DMasonDesigns
Adding Color Backgrounds Online PD Basic HTML 12/22/2017 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. <BODY bgcolor=“yellow”> 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 June 2008 Online PD Basic HTML DMasonDesigns
Online PD Basic HTML 12/22/2017 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 August 2008 Online PD Basic HTML DMasonDesigns
Headings <H1>This is the H1 tag in use.</H1> Online PD Basic HTML 12/22/2017 Headings <H1> is the largest text the viewer’s browser can display, while <H6> 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: <H1>This is the H1 tag in use.</H1> <H2>This is the H2 tag in use.</H2> <H3>This is the H3 tag in use.</H3> <H4>This is the H4 tag in use.</H4> <H5>This is the H5 tag in use.</H5> <H6>This is the H6 tag in use.</H6> Don’t add anything after the </BODY> or </HTML> tags – those should always be the last tags on your page! Revised June 2008 Online PD Basic HTML DMasonDesigns
Text Sizes Now, we’ll add some text size tags. Add these sentences below the Heading sentences. <P><FONT size="6">This is font size 6</FONT> <P><FONT size="5">This is font size 5</FONT> <P><FONT size="4">This is font size 4</FONT> <P><FONT size="3">This is font size 3 (This is the default font size of most Web browsers.) </FONT> <P><FONT size="2">This is font size 2</FONT> <P><FONT size="1">This is font size 1</FONT> The <P> tag double spaces! Revised August 2008 Online PD Basic HTML
Online PD Basic HTML 12/22/2017 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, <BODY bgcolor= “yellow”> The 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 HTML DMasonDesigns
Online PD Basic HTML 12/22/2017 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: <BODY bgcolor=“yellow” text=“blue”> Your background color will still be yellow, but your text will be blue. Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns
Online PD Basic HTML 12/22/2017 Spot Color If you want to emphasize just part of your text by adding color to specific words or sentences, add the <FONT> tag with a color attribute: <FONT color=“green”> This one does have to close, so when you want green text to end, just close the tag, not the attribute. </FONT> 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 HTML DMasonDesigns
Online PD Basic HTML 12/22/2017 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 <BODY> tag at the top of the page, and type <H1 align=“center”>My First Web Page</H1> Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns
Centering Blocks of Text Online PD Basic HTML 12/22/2017 Centering Blocks of Text You can also choose to center paragraphs or blocks of text. Simply add the tag <CENTER> where you want to start centering everything on the page. Then add the close tag </CENTER> where you want to stop centering “stuff!” Let’s center the heading sentences in our practice page Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns
Adding Images to Web Pages Online PD Basic HTML 12/22/2017 Adding Images to Web Pages DMasonDesigns
Online PD Basic HTML 12/22/2017 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 I:Drive and Save in your HTML folder (NO SPACES!) Revised June 2008 Online PD Basic HTML DMasonDesigns
Adding An Image Tag Let’s add the image right up under our page title. Online PD Basic HTML 12/22/2017 Adding An Image Tag Let’s add the image right up under our page title. Make yourself an empty line or two after the </H1> tag. Add the tag <IMG src=“picture.jpg” > 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! Revised June 2008 Online PD Basic HTML DMasonDesigns
Adding Hyperlinks to Web Pages Online PD Basic HTML 12/22/2017 Adding Hyperlinks to Web Pages DMasonDesigns
Online PD Basic HTML 12/22/2017 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 <BR> tags to make yourself a few blank lines between text. <BR><BR><A href=http://www.google.com> Click Here to Go To Google! </A> The tag is <A>, 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 </A>. Save and Check It Out! Revised June 2008 Online PD Basic HTML DMasonDesigns
Online PD Basic HTML 12/22/2017 Adding an Email Link An email link is almost like the hyperlink, just changes a little. <BR><A href=“mailto:lara.anderson@lamarcountyschools.org”> Click here to contact me! </A> Now add an email link using your email address under the Google link. It may help to add some spaces between lines to make your code easier to read… add <BR> tags before the tag! If you don’t have email, use mine: lara.anderson@lamarcountyschools.org Save it and Check It out! Revised June 2008 Online PD Basic HTML DMasonDesigns
Adding Lists to Web Pages Unordered Lists Ordered Lists Revised July 2009 Basic HTML
Unordered Lists Unordered lists are shown with a “bullet.” To begin the unordered list, use the tag <UL> Each item in the list must also have a tag, <LI> and an end tag </LI> after it End the list with the close tag </UL> Revised July 2009 Basic HTML
Unordered List Example Notepad Internet Explorer Revised July 2009 Basic HTML
Unordered List Make an unordered list of YOUR favorite fruits using the tags on the previous slide. Revised August 2008 Online PD Basic HTML
Ordered List Ordered lists are shown with numbering added To begin the ordered list, use the tag <OL> Each item in the list must also have a tag, <LI> and an end tag </LI> after it End the list with the close tag </OL> Revised July 2009 Basic HTML
Ordered List Sample Notepad WEB PAGE Revised July 2009 Basic HTML
Online PD Basic HTML 12/22/2017 Ordered List Make an ordered list of YOUR favorite fruits using the tags on the previous slide. Revised June 2008 Online PD Basic HTML DMasonDesigns
Save is one last time and CHECK IT OUT! Revised August 2008 Online PD Basic HTML
Online PD Basic HTML 12/22/2017 Debra Mason Information and Communication Technology II Northwest Rankin Middle School Flowood, MS 39232 debra.mason@rcsd.ms Revised June 2008 Online PD Basic HTML DMasonDesigns