Monday, 14 April 2014
Sunday, 13 April 2014
HTML
Mahesh |
|||||||||||||||||||||||||||||||||
|
fewmore   fewmore Power up Notepad and start with this... <html>
</html>
Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as enclosing a bit of text for the browser to interpret. The browser will interpret everything between <html> and </html> as an HTML document. Different tags are interpreted different ways by the browser. Let's proceed...
Every HTML document needs a pair of head tags.
<html>
<head>
</head>
</html>
The only thing we have to concern ourselves with in the head tags (for now) are the title tags.
<html>
<head>
<title></title>
</head>
</html>
And the bulk of the page is going to be within the body tags.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Oh, and one more thing, give your document a title, and put something in the body.
<html> <head> <title>My big ole bad page!</title> </head> <body> Hello Joe! </body> </html>
Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do...
In your Notepad window click File then Save As.
You will be presented with the Save As dialog box. Make a new folder by clicking the New Folder icon in the Save As dialog box.
The New Folder icon will look something like this -->
Name the new folder whatever you want. Then double click on it to open it. Now you're ready to save the file into the the new folder you just made. Where it saysFile name: type in page1.html Where it says Save as type: make sure it says All Files(*.*)
Hit return and you're done!
Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you are using Internet Explorer, the file you made might look something like this...
 (if your icon is a little different, it's no biggie)
You should be able to double click on it now and see the results of your handiwork.
Now, it's common for people to get stuck here at saving the file. If you get stuck, just be patient. When you save it, remember where you saved it. and make sure you save it with the file extension .html
Next order of business is to start putting some neato stuff in your page.
The best way to use this tutorial is to run Notepad and two instances of your web browser. One browser window containing this tutorial and the other containing your new page. Just toggle between the three windows. You can open a second instance of your browser in one of two ways...
1) Find the icon of the html file you just made (page1.html) and double click on it. Or...
2) In your browser, click on File/Open File (or something similar to that) and browse to the file (page1.html).
Three quick points before we go on to the next lesson:
To keep things a little cleaner I am only going to write what is in the <body> tags. I will omit the <html>, <head> & <title> tags. Needless to say, keep these in your document.
<body> </body>
Type something really cool.
<body>
Something really cool
</body>
Output:
IMPORTANT NOTE: Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. In many instances just hitting the refresh button doesn't quite do the trick. In that case...
Internet Explorer users: Click Refresh while holding down the CTRL key.
Netscape/FireFox users: Click Reload while holding down the SHIFT key.
I think the first thing we are going to learn is how to change background colors.
<body bgcolor="#ccffcc">
Something really cool
</body>
Output:
#ccffcc is computerese for light green. Here are a few more.
The topic of colors and browsers is rather interesting. Although it's not overly important to understand how browsers and colors work together at this point in time, you may want to come back to this section after the lessons and learn about Netscape's infamous 216 colors.
You can specify a background image instead. (Note, the image should be in the same folder as your HTML file. More on this below.)
<body background="swirlies.gif">
Something really cool
</body>
Output:
Here's the background image
In order for the image to show up, the browser has to be able to find it. For now, we want the image to be in the same folder as your HTML document (page1.html). The easiest way to do this is to right click on the swirlies image above and choose Save Picture As (or some variant thereof). Browse to wherever you put page1.html and save the image there. Later we'll get into this stuff in a little more detail.
It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this...
<body background="bluebar.gif">
Something really cool
</body>
Output:
Here's the background image
Let's go back to a plain old screen.
<body> Something really cool </body>
Output:
We can make things bold.
<body> Something really <b>cool</b> </body>
Output:
What we are (more or less) telling the browser is: at the <b> start making things bold, and at the </b> stop making things bold. Or, maybe a little more accurately, we are suggesting to the browser that all text contained within the <b> element should be rendered bold.
The same principle applies to italics...
<body> Something <i>really</i> <b>cool</b> </body>
Output:
...and underlining.
<body> <u>Something</u> <i>really</i> <b>cool</b> </body>
Output:
Back again to a plain screen.
<body> Something really cool </body>
Output:
We can use tags in combination if we wish...
<body> Something really <i><b>cool</b></i> </body>
Output:
This is an example of nested tags. If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser (not to mention confusing yourself) they should be nested, not overlapping. Let me illustrate...
A very useful type of text effect is the mono-spaced font, or Typewriter Text.
<body> <tt>Something really cool</tt> </body>
Output:
Each letter uses the same amount of horizontal space...
We can change the font size too... It's pretty easy!
First add the <font> tags...
<body> Something really <font>cool</font> </body>
Then specify a size attribute.
<body>
Something really <font size="6">cool</font>
</body>
Output:
Fonts come in 7 sizes:
Two things I want to discuss now. First, a <tag> tells the browser to do something. An attribute goes inside the <tag> and tells the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3.
Every browser has a default font setting - font name, size and color. Unless you have messed with it, the default is probably Times New Roman or Verdana 12pt (which translates into 3 for our purposes) and it's black. Of course we can specify font names other than the defaults. Like arial and comic sans ms.
<body>
Something really <font face="arial">cool</font>
</body>
Output: 
The font will only display if your visitor has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do something like this...
<font face="arial,helvetica,lucida sans">Hidee Ho</font>
For lunkheads like me that might not understand that right away, here's what's happening... The browser looks for arial. If it finds it, it uses it. If not, it goes on to helvetica. If it can't find that, it looks for lucida sans. And if it can't find that it uses the default font.
What are some common fonts that are on *most* computers and are pretty safe bets?
|
|||||||||||||||||||||||||||||||||
|
|
|||||||||||||||||||||||||||||||||
Subscribe to:
Posts (Atom)