Basic html tutoirialp2

679 views
596 views

Published on

syst

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
679
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basic html tutoirialp2

  1. 1. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission by Peter Krisch of allcreativedesigns.com.auAll Creative DesignsBasic HTML for PC Tutorial Part 2Using MS NotepadRevised Version June 2010My First Web PageThis tutorial will add backgrounds to the table and body, font colors, borders, hyperlinksand more to your web page created in Part 1.We didn’t specify a font color, font type or body color in our first web page and so bydefault the internet browser will show a white body background, the font type will beTimes New Roman in black and no borders are shown. To change this we will add extraelements within our HTML tags.Step 1Open your index.html file we created in Part 1Navigate to your index.html file and single right click, select Open With and left clickNotepad. See figure 1 Figure 1Copyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 1 of 8
  2. 2. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission by Peter Krisch of allcreativedesigns.com.auStep 2Go to our Background Gallery page and click on Backgrounds Folder Page 3http://www.allcreativedesigns.com.au/ pages/gallbackgrounds3.htmlYou might have to type or copy and paste this address into your browser if viewing the PDF versionScroll down and left click Tiling Background ‘Water Aqua’. Right click the new smallwindow and select copy than paste into your my_fisrt_webpage folder. Make sure youright click directly over the image; otherwise the option of Copy will not show. Repeatprocess with the Tiling Background called Green Fading. (Again click directly on theimage)(See figure 2) Figure 2Step 3Start with the Body tag (new addition are shown in green)Change the body tag in your index.html file to this:<body background=” tilebgWaterAqua.jpg”>This will set your body background to the above image.Change the table tag in your index.html file to this:<table align=”center” background=” tilebgFadegreen2H.jpg” border=”1”>This will set your table background to the above image and create a border around thetable at size 1.Copyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 2 of 8
  3. 3. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or form without the written permission by Peter Krisch of allcreativedesigns.com.au Remember do not copy and paste from MS Word and check your spelling. In your notepad index.html document click file in top menu bar and click save. In windows explorer (My Computer) navigate to your my_first_webpage folder and double left click your index.html file. Your web page should open in your default web browser i.e. Internet Explorer or Mozilla Fire Fox. Table View of updated web page (See figure 3) First Column Second ColumnFirst row Cell CellSecond row Cell Cell Figure 3 Body Overlaid text boxes explain the table structure. You might like to repeat the process with two tiling backgrounds of your choice. Step 4 Continue with the first row tag (new addition are shown in green) <tr bgcolor=”black”> Note color is spelt without the u, the American way, spelling it colour will not work. This will set the background color of the first row to black. As our headline font is black by default it will disappear, so we will change it to white. To do this wrap font tags around the headline text <td><h1><font color=”white”>Fred’s Home Page</font></h1></td> It would look better with our headline centered, for this we include a center tag around the headline tags. <td><center><h1><font color=”white”>Fred’s Home Page</font></h1></center></td> Specifying color by name: All major colors will work; try aqua, cyan, pink or others. Copyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 3 of 8
  4. 4. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission by Peter Krisch of allcreativedesigns.com.auSpecifying color by Hexadecimal Code will be covered later.Inserting Line breaks into your textUse the <br /> tag to start a new line of text<td>Type some text <br />HTML is written in the form of labels <br /> (known as tags orelements), <br /> surrounded by angle brackets. </td>The <br /> tag can be used for spacing in your web page, add three break tags afteryour last word of text.Note: There is no closing tag as forward slash is included in break tag.Your notepad index.html document should look similar to this(See figure 4) Figure 4Save your updated web page:In your notepad index.html document click file in top menu bar and click save.View your web page:In windows explorer (My Computer) navigate to your my_first_webpage folder anddouble left click your index.html file to view your updated web page.Your web page should look similar to this (See figure 5)Copyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 4 of 8
  5. 5. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission by Peter Krisch of allcreativedesigns.com.auGap Figure 5You may notice the size of the columns changing after you inserted breaks into your textto avoid this specify the width of the first column.<td width=”700”><h1><font color=”white”>Fred’s Home Page</font></h1></td>To eliminate the gap on top of your webpage insert a top margin into the body tag.<body background=” tilebgWaterAqua.jpg” topmargin=”0”>To center your images in their columns wrap a center tag around your image tag.<td><center><img src=”image_file_name.jpg” /></center></td>Save your updated web page:In your notepad index.html document click file in top menu bar and click save.Step 5Hyperlinks to other web sitesTo link your web page to other web sites use the following code and insert after your lastthree line breaks in the text column:<td>Your Text<br /><br /><br /><a href=http://www.google.com.au target=”blank” >Google Link</a></td>Clicking the text Google Link in your web page will open the Google Home page in yourbrowser. Insert target=”blank” if you like Google to open up in its own browser window.By default links are shown in colors and are underlined.Copyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 5 of 8
  6. 6. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission by Peter Krisch of allcreativedesigns.com.auLinks to E-mail addressesIf you like to be contacted through your e-mail address include the code below.After the Google link type two <br /> tags than<a href=http://www.google.com.au target=”blank” >Google Link</a><br /><br /><a href=”mailto:username@yahoo.com.au”>Contact me</a></td>Use your own e-mail address.Clicking Contact me will open e-mail software like Outlook Express with your e-mailaddress inserted.Save your updated web page:In your notepad index.html document click file in top menu bar and click save.Your notepad index.html document should look similar to this(See figure 6) Figure 6Copyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 6 of 8
  7. 7. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission by Peter Krisch of allcreativedesigns.com.auView your web page:Trouble Shooting:Most errors are caused by spelling mistakes and added or missing spaces in HTMLtags. Check for missing inverted comas and closing tags.The third part of this tutorial explains:How to create another web page and link it to your homepage. (The start of a little website)Specifying color by Hexadecimal CodeHow to use your own imagesList of useful html tags and moreHave fun with your web page and experiment with different images, backgrounds andcolors.Other tutorials available from www.allcreativedesigns.com.auYou might have to type or copy and paste this address into your browser if viewing the PDF versionwww.allcreativedesigns.com.au/pages/tutorialbasicp1.htmlHTML Web Page Tutorial using Notepad, PDF Download Page Part 1www.allcreativedesigns.com.au/pages/tutorialbasicp3.htmlFree PDF HTML Tag Tutorial using Notepad, Download Page Part 3Copyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 7 of 8
  8. 8. Any content from this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission by Peter Krisch of allcreativedesigns.com.auwww.allcreativedesigns.com.au/pages/webtutorialkompozer.htmlWeb Design Tutorial using KompoZer, PDF Download Pagewww.allcreativedesigns.com.au/pages/tutorialpicasa.htmlPicasa Photo Editing Tutorial, Free PDF Download Pagewww.allcreativedesigns.com.au/pages/tutorialseo.htmlSEO Tutorial Basic Search Engine Optimization PDF Download PageCopyright © 2007 - 2010 Basic HTML Tutorial Part 2 by Peter Krisch 8 of 8

×