You will need to save this image file as smiley.gif :
HTML A Beginner's Guide (Beginner's Guide (Osborne Mcgraw Hill))
All you need to create a basic web page is a text editor such as Microsoft Notepad. If you are unfamiliar with Notepad, you can open it by going to the start menu and typing Notepad and then`clicking OK. You can also create a shortcut to Notepad on your desktop using Notepad for the location of the shortcut.
When you save your file, you will use the .htm extension instead of using.txt If you want your web page to open when a directory (folder) is selected the name of the file will be index (so it will be index.htm) You can also use .html instead of .htm and it will work the same. When you save the .htm file, a web browser should open it when you click on it. If you want to edit the file, right click on it and select either edit or open with and select Notepad. When practicing, it is best to keep both of them open so you can view the web page as you are creating it. Remember to save the file to see the current changes before reloading the web browser.
Most modern web browsers will open the web page without many of the tags although it is best to get into the practice of including all of them to prevent any problems.
All HTML tags are enclosed in the <> brackets. To end a tag, such as bold, you use the forward slash ( / ) in front of the same tag.
Example: <b>This is Bold</b> and this is normal
The opening tag for HTML web pages is <html> so start by typing the <html> tag at the top of your page in Notepad. It is a good idea to save your work at the start and continue to save it regularly in case of power outages so save it now (remember, it's .htm) go ahead and click on it and open it in your web browser as you work on it.
Next tag is the head tag. This is where your title tag.
So under your <html> tag, you will want your head tag. also go ahead and type in your closing head tag a few lines beneath it. This is what you should have so far:
__________________________________________________
<html>
<head>
</head>
</html>
________________________________________________
Next you will want to use the title tag so the title of your web page will appear at the top. The title tag goes in between the opening <head> and the closing </head> tags. Use the <title> and the </title> to create your title.
<title>My First Web Page</title>
After the closing head tag (</head>) you will need the body tag. This is where you will set the background color or picture. It is <body> and the closing body tag will go right above the closing </html> tag.
With the body tag, you can also include a background color or image.
To change the background color include the bgcolor in the tag and type in the color you ant the page to be.
Example: <body bgcolor = "yellow"> HTML only recognizes a few color names so you can also look online for hex codes and use them instead of the color name #FFFF00 is yellow and that would look like this: <body bgcolor = "#FFFF00"> Font color can be changes using <font color = "red"> or use hex codes. Remember to close the font tag before starting a new font color when you wish to change colors. Remember to type some text text in your practice so you can see it.
If you want to use a background image, use the background = instead of bgcolor. The background image tag would look like this: <body background ="smiley.gif">
So here is what you should have now:
__________________________________________________
| <html> <head> <title>My First Web Page</title> </head> <body bgcolor ="yellow"> <font color = "red"> test text </font> <p> <font color = "blue">test text </font> <p> <img src="smiley.gif" height=80 width=80 alt = "smiley face" > </body> </html> |
When you save it and reload the web page in the browser, you will notice the red and blue text is next to each other. The page break tag is <br> and the paragraph tag is <p> Neither of these need closing tags. If you want the text or image to be centered, use the <center> tag (making sure to use the close center, </center> to end centering)
To include an image, you use the img src tag. Make sure in your example you are using a background color and not the smiley image.
To include the smiley as an image, you would use the following tag: <img src="smiley.gif"> That is the basic tag that will work although you will also want to include the height and with as well as alternate text (in case the image can't be loaded) The smiley picture I included is 80 pixels wide and 80 pixels high.
<img src="smiley.gif" height=80 width=80 alt = "smiley face" >
To see the alt tag in action, misspell smiley.gif, save the file, and reload the page. The height and width help the page load faster since the browser knows the size of the image before fetching it from the web server.
To make a link clickable, you will need to use the a href tag. This is a "two part" tag. The a href is used to tell the browser where the link is going and the closing </a> ends the clickable text.
Example: <a href'="http://computertech123.blogspot.com/">Click this text here</a>
You can also make an image clickable by placing the image tag in place of the click this text here.
More tags you will want to experiment with:
<b>bold</b>
<i>italic</i>
<u> underline</u>
<del>
<sup>super 1 script</sup>
<sub>sub 2 script</sub>
Headers automatically give a page break. The tags for them are <h1> <h2> <h3> Make sure you also close the appropriate tag ( </h1> </h2> </h3> ) Use the center tag to center the headers.
header 1
header 2
header 3
.
No comments:
Post a Comment