HTML
n
HTML stands for Hyper Text Mark-up Language.
<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 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.
Every ETMI. document needs a pair of head tags.
<ul>
<Head> </head>
</html>,
The only thing we have to concern ourselves with in the bend tags (for now) are the title
tags.
<td>
<head>
<title></title>
</head>
</i>
Preorem 1:
Go To Notepad: Start -> run -> Notepad
1.3
|
Opera
Type name of a crogram. folder, Jocument, or source, and Windows will open it for you.
WytoShapes
OK
Cancel
Frowse...
A 7.4" Ln 31
</
No
Govi
MPUTER CANON
<Html>
<Head>
<Title>CSS COMPUTER CENTER! </title>
</head>
<Body>
Winn Win India
</body>
</html>
Now save it, not as a text document, but as a html document. Save s [Link] in a new
folder somewhere. If yer a little fuzzy about hour to det 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 w 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 says File name: type in
[Link] where it says Save as type: make sure cays All Files (*.*)
Start >> Programs > Internet Explorer :
about Blank Microsoft Internet Explorer
Edit
Favorites View
Tools
Help
New
Sear
Edit
Save
Save As...
નાઓ.
Orits
Page Setup...
Print...
Ctrl-+-P
Print Preview...
Sen!
Import and Export...
Properties
Work Offline
Close
File -> Open ->Browse ->Select the file then click ok
Output - Program 1:
iel
CSS COMPUTER CENTER! -Microsoft Internet Explorer
File Edit View Favorites Tools Help
Back
Address [Link]
Y
Winn Win India
Done
Search
My Computer
>>
Links
Go
>>
1) Find the icon of the html file you just made ([Link]) 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 ([Link]).
Three quick points before we go on to the next lesson:
1. What you made is a skeleton HTML document. This is the minimum required information
for a web document and all web documents should contain these basic components.
2. The document title is what appears at the very top of the browser window.
3. Of all the things on your web page, the title is what search engines consider most when
ranking a page. Choose your titles carefully, and keep them brief.
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.
I think the first thing we are going to learn is how to change background colors. Program 2:
html
<HTML>
<body bgcolor="#ccffce " >
CSS
</body>
</HIM17.
HTML
3
CES COMPUTER EDUCATION
d
on
OUTPUT
CSS
#ceffee is computers 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.)
Program 3:
<body background="[Link]">
CSS
</body>
OUTPUT CSS
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 ([Link]). 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 [Link] and save the image there. Later
we'll get into this stuff in a little more detail.
We can make things bold.
Program 4:
<body>
Winn Win <b>India</b> </body>
OUTPUT: CSS
What we are (more or less) teiling 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 boid.
The same principle applies to italics...
HTML.
CSS COMPUTER EDUCATION
Program 5:
<body>
Winn <i>Win</i> <b>India</b>
</body>
OUTPUT
CSS
Program 6:
<body>
<u>Winn</u> <i>win</i> <b>India</b>
</body>>
OUTPUT
• A WAYS
CSS
Program: 7✓✓
<Body>
Hey! <br>What's<br>Going<br>Cn<br>Here?? </body>
OUTPUT
Hey!
What's
Going
On
Here??
<Br> basically says - start a new line.
Can you use <br> to skip a line? Sure.
Program: 8
<body>
Hey! <BR>What's<br>going<br><br>on<br>here??
</body>
OUTPUT
Hey!
What's
going
OR
here??
HTML
ר:
5
CSS COMPUTER EDUCATION
Program: 9 <body>
Hey! <BR> What's<br>
Going<br>
<br> <br> <br> <br> <br> <br>
<br>
On<br> here??
</body>
The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the
characters in a steady stream. If you want to start a new line you have to use a line break...
Program: 10
<body>
<p align="left">CSS</p>
<p align="center">Computer Center</p>
<p align="right">Tirupur</p>
<p align="left">
CSS<br>
Computer Center<br>
Tirupur</p>
<p align="center">
CSS<br>
Computer Center<br>
Tirupur</p>
<p align="right"> CSS<br>
Computer Center<br>
Tirupur</p>
</body>
OUTPUT
CSS
CSS Computer Center Tirupur
Computer Center
Tirupur
HTML
CSS COMPUTER EDUCATION
CSS Computer Center Tirupur
CSS
Computer Center Tirupur
The browser won't recognize more than 1 space. I know at first this might all seem pretty
stupid for it to be this way, but really, it's better like this. It gives you absolute control over the
document's appearance.
Another occasionally useful tag worth mentioning are section headings. While they're a little
old fashioned in today's very graphic web, they are still a handy little thing to have in your
toolbox. They come in sizes 1-6.
Program 11:
<h1> CSS </h1> <h2> CSS </h2>
<h3> CSS </h3>
<h4> CSS </h4>
<h5> CSS </h5>
<h6> CSS </h6> OUTPUT
CSS
CSS
CSS
CSS
CSS
CSS
A useful heading attribute is align. It's fairly self-explanatory...
Program 12:
<h2 align="left"> CSS </h2> <h2 align="center"> CSS </h2> <h2 align="right"> CSS </h2>
HTML
7
CSS COMPUTER EDUCATION
OUTPUT
CSS
Program: 13/
<body>
<hr width="20%" <hr width="50%">
<hr width="100%">
<hr width="20">
<hr width="50"> <hr1 width="100"> </body>
OUTPUT
CSS
CSS
sara
MORE Pales
Be careful with large absolute widths, such as width="1000". If your visitor is running a
screen resolution of 1024x768 or greater, a <hr> width of 1000 is no problem. But if he's
running at a lesser resolution (such as 800x600... which many folks do) your horizontal rule
will run off the right side of the screen. If you wish to alter the default length of a horizontal
rule, best use a percentage value.
This attribute is pretty self-explanatory.
HTML
CSS COMPUTER EDUCATION
Program: 14 /
<body>
<hr width="60%" align="left"> <hr width="60%" align="right"> <hr width="60%"
align="center"> </body>
OUTPUT
We can control the thickness of the line...
Program: 15 ✓
<Body>
<hr width="60%"
size="1">
<hr width="60%" size="3">
<hr width="60%" size="8">
<hr width="60%" size="15"> </body>
OUTPUT
You can also color horizontal rules. (Although not included in any official HTML specification,
the color attribute in a <hr> is supported by most commor
browsers.)
Program: 16✓
<body>
it
<hr width="60%" size="1" noshade color="#f£9900"> <hr width="60%" size="3" noshade
color="#9900"> <hr width="60%" size="8" noshade color="#9900 €£"> <hr width="60%"
size="15" noshade color="#££0099" </body>
HTML to
CSS COMPUTER EDUCATION
OUTPUT
We can change the font Size too... It's pretty easy!
First add the <font> tags...
<body>
Winn Win <font>India</font> </body>
Then specify a size attribute.
Program 17:/
<Body>
Winn Win <font size="6">India</font> </body>
OUTPUT
CSS
Fonts come in 7 sizes:
teeny tiny small regular extra medium large real
1
23
4
เก
5
6
big & Yelling!
7
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.
HGAL
10
C3S COMPUTER EDUCATION