Basic HTML Formatting and Tags</TITLE

BASIC HTML
5/1/2012
stevalstevalsurvivor@yahoo.com.sg
Introduction to HTML
Introduction to HTML Start, Programs, Accecories, Notepad. <HTML>
</HTML> Each one of those is called a tag. There is a starting tag and a closing tag. Tags as talk to the browser, or give it instructions.
5/1/2012
Basic html
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>
5/1/2012
Basic html
And the bulk of the page is going to be within the BODY tags. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
5/1/2012 stevalstevalsurvivor@yahoo.com.sg 4
Basic html
<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.
stevalstevalsurvivor@yahoo.com.sg 5
5/1/2012
Basic html
<HTML>: tells the Web browser that this is the beginning of an HTML document <HEAD>: tells that Web browser that this is the header for the page (you'll learn later what goes between "HEAD" tags) <TITLE>: tells the Web browser that this is the title of the page <BODY>: tells the Web browser that this is the beginning of the Web page content -- everything you want to say and see on your page will follow this tag.
5/1/2012 stevalstevalsurvivor@yahoo.com.sg
Saving
File then Save As. You will be presented with a dialog box. Make a new folder Name it whatever you want. Then double click on it to open it up. Where it says File name: type in "page1.html Where it says Save as type: make sure it says All Files(*.*)
You should be able to double click on it now and see the results
5/1/2012
Basic html
Find the icon of the html file you just made and double click on it Or In Internet Explorer, click on File/Open File In Browser and browse to the file 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. And, the document title is what appears at the very top of the browser window.
Colours
To change background colors. NB. Keep the other lines written <BODY BGCOLOR="#CCFFCC"> My first web page </BODY> If a background color is specified that is not one of the known colors, then Netscape will usually pick the closest of these colors to use.
Colours
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"> My first web page </BODY> Right click on the image and choose Save Image As (or some variant thereof). Browse to wherever your folder is then save. Remember the file extension of the image
5/1/2012
Formatting tags
We can make things bold. <BODY>Something really <B>cool</B></BODY> Cool What we are telling the browser is: at the <B> start making things bold, and at the </B> stop making things bold.
Formatting tags
The same principle applies to italics... <BODY>Something <I>really</I> <B>cool</B></BODY>

really ...and underlining. <BODY><U>Something</U> <I>really</I> <B>cool</B></BODY>

Something really cool
5/1/2012
Formatting tags
We can use tags in combination if we want to. <BODY>Something really <I><B>cool</B></I></BODY> Something really Cool This is an example of nested tags. If you are going to use tag pairs, avoid confusing the browser, they should be nested, not overlapping

<THIS><THAT></THIS></THAT> g tags.... bad
Overlappin
<THIS><THAT></THAT></THIS> tags.... good stevalstevalsurvivor@yahoo.com.sg 5/1/2012
Nested
13
Font
can change the font size too 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>
Something really
cool
14
5/1/2012
Font
Try it out Change the font sizes from 1 to 7 and observe the effect NB. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it. <FONT SIZE=6> Second, , the default value is a value that the browser assumes if you have not told it otherwise.
5/1/2012
15
Font
A good example is the font size. The default font size is 3 (usually). If you say nothing it will 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 12pt (which translates into 3 for our purposes) and it's black. we can specify font names other than the defaults. Like ARIAL and COMIC SANS.
Font
<BODY>Something really <FONT FACE="ARIAL">cool</FONT></BODY> The font will only display if your viewer has that font installed on their computer. Otherwise, they will only see the default font Arial and Comic Sans MS are pretty widely distributed with Windows.
Font
Can specify more than one font. Just do one of these... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>.
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. Go try out different fonts like Comic Sans MS, Courier New Times Rew Roman, Georgia Impact Trebuchet, 18 5/1/2012 stevalstevalsurvivor@yahoo.com.sg Verdana
Font
Missing or misplacing quotation marks or a missing space or a missing greater than > sign can make our page screwed up . Someday we will be separated from this kind of coding, but for now we just have to be careful. Tags stand out more when using all caps. You could just as well use <font> instead of <FONT>. You can even use <fOnT> if that's what you want.
19
5/1/2012
Font
You can change the font color if you like. <BODY>Something really <FONT COLOR="#FF0000">cool</FONT></BODY> Check what this color looks like We can, of course use more than one ATTRIBUTE in a <FONT> tag... <BODY>Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></BODY>
5/1/2012
Font
<BODY BGCOLOR="#FFFFFF"> Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U> </BODY> Cool will appear red etc Note: Multiple tags should be nested. <TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2 ></TAG3>
Font
It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as... <TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1 ></TAG2> The fastest way to confuse the browser, not to mention yourself is to overlap the tags... <TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1 ></TAG2>
Font
Another occasionally useful tag worth mentioning are section headings. They come in sizes 1-6. <H1>Something really cool<H1> <H2>Something really cool<H2> <H3>Something really cool<H3> <H4>Something really cool<H4> <H5>Something really cool<H5> <H6>Something really cool<H6> NB H1 is bigger than H2, H2 greater than H3.. in that order. Try them out.
5/1/2012
Alignment
A useful heading attribute is ALIGN... fairly selfexplanatory. <H2 ALIGN="left">Something really cool<H2> <H2 ALIGN="center">Something really cool<H2> <H2 ALIGN="right">Something really cool<H2> Something really cool Something really cool Something really cool
5/1/2012
Defaults
The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are... Text is usually black Links are usually blue Active link is usually red Visited link is usually purple You can change these if you NEED to.
Defaults
You can change these defaults for the entire document in the <BODY> tag. <BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF">Something really cool</BODY>
Source code
You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser. So, as you surf along and you run into a really neat page and you find yourself thinking "How'd they do that?", the answer is only a couple clicks away. View its source!
Basic formatting, line breaks, paragraph aligning

Line breaks
5/1/2012
28
Line breaks
<BODY> We are web designers. Arent we? </BODY> Out put: We are web designers arent we?
5/1/2012
29
Line breaks
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.
5/1/2012
30
Line breaks
<BODY> Hey! <BR> What's <BR> going <BR>on <BR>here?? </BODY>
OUTPUT Hey Whats going on here??
5/1/2012
31
Line breaks
<BODY> <BR>Learning <BR> a language <BR> <BR>takes <BR> <BR>time <BR>Practice. </BODY>
5/1/2012
OUTPUT
Learning a language takes
time Practice
32
Line breaks
<BR> basically says - start a new line. Can use the <BR> tag to skip a line or even many lines if there is need. E.g.
5/1/2012
33
Line breaks
<BODY> <BR>Practice <BR>day <BR> <BR> <BR> <BR>and <BR> <BR> <BR>night </BODY>
5/1/2012
Practice day
and night
Paragraphs and Alignment

<P> is the paragraph tag. Think of a paragraph as a block of text. <BODY> <P>God is good</P> </BODY> By itself it doesn't do much. Although with most browsers, starting a new paragraph does have the effect of skipping a line.
5/1/2012
35
This <P> tag is good for aligning stuff. <BODY> <P ALIGN="left"> God is good. <BR> To every person</P> <P ALIGN="center">To you also! <BR>You may not know </P> <P ALIGN="right">Indeed to all.</P> </BODY>
Try this out on your own. [Can center, left align, right align all page contents]

Although we used a closing tag (</P>), it is not entirely necessary. Nearly all browsers will assume that when a new <P> paragraph has begun, the old one must have ended. <P>Some stuff <P>More stuff
is the same as...
<P>Some stuff</P><P>More stuff</P>

5/1/2012
Special characters
<BODY>God is good</BODY> [ Output: God is good ] The browser won't recognize more than 1 space. There is a nifty little code that means "space" to the browser -> Try this instead...
38
5/1/2012
Special characters
The space code <BODY> Something & nbsp;really & nbsp; cool </BODY>
[Output: Something
really
cool]
5/1/2012
39
Special characters
There are quite a few of these special characters. Here are six more. (Note- these should always be lower case) non-breaking space, < < less-than symbol, > > greater-than symbol, & & ampersand " " quotation mark, soft hyphen
5/1/2012
40
Special characters
You don't need to use them all the time, just when typing the real character would confuse the browser. How do you know when that is? No hard and fast 'rule'. It will just come with a little practice. Try them out even if you make mistakes, dont give up, dont be afraid of trying something new. Mistakes are our friends but we should not make the same mistakes a number of times!
Tag position
<BODY>Something<B> really<BR>cool<BR>like <BR>an<BR>icecube!</ BODY>
It does not matter on which line you put your tags, if they are proper, they will be interpreted wherever they are!
Something really cool like an icecube
5/1/2012
42
Inserting images, relative paths
5/1/2012
43
Images
The image must already been saved before we can use it, preferably in the same folder as the HTML code. Can specify image with the <IMG> (image) tag. <BODY> <IMG> </BODY> We must also specify the source and the size. <BODY><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 > </BODY> You can use Microsoft Paint to get the exact size of the image.
5/1/2012
Images
The browser can figure out how big the image is all by itself. But we give the dimensions then because then, the browser can simply reserve a space for the image, then load the rest of page. Once the entire page loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. So, the browser functions much better with image dimensions.
Images
<BODY> <IMG SRC="chef.gif" WIDTH=300 HEIGHT=101> </BODY> We can however adjust the dimensions until the image appears the way we want it on the web page. <BODY><IMG SRC="chef.gif" WIDTH=40 HEIGHT=200> </BODY>
The same image has now been changed in size!
5/1/2012
46
Images
Well, look at this little red dot -> . It's a 1x1 square. We can change its appearance greatly. <BODY> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=1> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=2> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=8> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200> </BODY> Try it out.
Links, image links, email links
5/1/2012
48
Links
A URL is just an address. <BODY>Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>< /BODY> Go to yahoo! <BODY>Go to <A HREF="http://www.google.com/"> google</A></BODY> Go to google
5/1/2012
49
Links
An email link works the same way. We just use an email address instead of a page address. <BODY>Send me <A HREF="mailto:emma@yahoo.com">Mail !</A></BODY> [ Output: Send me Mail ]
5/1/2012
50
Links
We can make an image a link if we want. We simply substitute an <IMG> tag for the words! <BODY>Go to <A HREF="http://www.google.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A> </BODY> Include links if you think it adds value, but try to refrain from having a page that consists of nothing more than links and links that link to even more links!
Links
To get rid of the blue border around an image link, Add BORDER=0 to the IMG tag. Let's suppose you have a few Microsoft Word documents that you would like to offer. Just link to them as below <A HREF="myresume.doc">Download my resume</A> <BR><A HREF="mybio.doc">Download my autobiography</A> Download my resume Download my autobiography
Links
Remember that images contain a lot of data and therefore can be slow to load. We can reduce the size (Kb) by reducing the dimensions. Also you can reduce the number of colors. A picture with many colors is nice to look at but slow to load. Remember we want others(visitors) to see it but if your page takes forever to load, your visitors will probably leave and they won't see anything.
Links
To make a link open in a new browser window Can be done easily by right clicking on the link and choose "Open In New Window". However we can force this action by adding TARGET="_blank" to the link... Go to <A HREF="http://www.yahoo.com/" TARGET="_blank"> yahoo </A>
5/1/2012
54
Links
Another option that can be used if you want to offer a lot of imagery is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).
5/1/2012
55
Links
Making a smaller version of the picture is very important. Create a smaller copy of the image and use that as a link to the big image. Put the full sized image and the small image in your working folder. Right-click & Save Image As. Start with your <IMG> tag. <BODY><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></BODY>
5/1/2012
56
Links
Add your <A> tags. <BODY><A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A></BODY> And add the URL of the big picture then you're done! <BODY><A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A></BODY> Can get rid of the blue border. <BODY><A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0> </A> </BODY>
5/1/2012
57
Links
Another way to link is to link not just to a page, but to a specific part of a page. First start with the spot you want people to be transported to. Pick a word and wrap it in the <A> tags. <A>Add</A> the URL and you're done! Next give that spot a NAME. <A NAME="upabit">Add</A> the URL and you're done! What you have done is marked that spot. Now that spot can be referenced and linked to.
Links
Start building the link. Click <A>here</A> to be magically transported... Add the document to be referenced... Click <A HREF="lesson06.html">here</A> to be magically transported... And lastly, add the anchor NAME like so... Click <AHREF="lesson06.html#upabit"> here</A> to be magically transported... And that's all there is to it!
5/1/2012
59
Ordered/unordered lists, definition lists, more formatting
5/1/2012
60
More formatting
One of the available formatting tags is the <BLOCKQUOTE>. In most browsers it pulls your margins in from both sides. However different browsers may render the text in block quote differently. <BODY><BLOCKQUOTE> WE THE BIT students of Makerere University are hardworking and determined. Nothing can take us astray in as far as our studies are concerned. We shall move on as Makererians do.</BLOCKQUOTE></BODY>
Lists
Another useful tool is a LIST. There are ORDERED lists and UNORDERED lists.
This is an ordered list 1. Uganda 2. Kenya 3. Tanzania 4. Rwanda
An unordered list red blue black yellow

62
5/1/2012
unordered list tags

<BODY> The following are districts <UL> <LI> Kampala Output <LI> Masaka Kampala Masaka <LI> Kabaale Kabaale <LI> Iganga Iganga </UL> </BODY>
Ordered list tags

<BODY> What I want: <OL> <LI>A big red truck <LI>A fast boat <LI>A drum set <LI> A piano </OL></BODY>
Output A big red truck A fast boat A drum A piano
1. 2. 3. 4.
5/1/2012
64
Definition list
Another type of list is a definition list. add a definition title, And a definition item. <BODY> <DL><DT> 10th Amendment <DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.</DL></BODY> You can bold the definition title.. <DT><B>10th Amendment</B><DD>The powers not delegated to the
The Horizontal Rule.

<BODY> <HR> </BODY> (a horizontal ruler will be drawn across the page) <BODY> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>

<BODY><HR WIDTH=60% ALIGN="left"> <HR WIDTH=60% ALIGN="right"> <HR WIDTH=60% ALIGN="center"> </BODY> Try it out and see the effect.
5/1/2012
67

We can control the thickness of the line... <BODY><HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>
5/1/2012
68
It can be made a solid line.

<BODY><HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>
5/1/2012
69
<PRE> (preformat) tag

Remember, browser doesn't understand formatting, it just displays text in a steady stream! But we can order the browser to show the contents the way we write them. The <PRE> (preformat) tag is used. <BODY> <PRE> We put the comments the way we want. </PRE> </BODY>
A comment tag
The comment must start with  You can (usually) even put other html tags in a comment and they will be ignored. The browser will just keep ignoring everything until it sees a --> This is helpful especially if you want to include messages of specific importance to the readers of the source code.
A comment tag
<BODY>  <P>A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages,  notes to yourself, or write a helpful message to someone looking at the source of your page.</BODY>
Tables
<TABLE> The main tag. Used to tell the browser "this is a table", along with some attributes like size, border width and a few other things. <TR> Table Row defines a horizontal row of <TD> (Table Data) cells. <TD> Specifies an individual block or cell in a table row.
Tables
Basically a table is made up of rows which in turn are made up of cells... <TABLE> <TR> <TD>Ed</TD> </TR></TABLE> Try it out and see the effect.
Tables
<TABLE BORDER=1> <TR> <TD>Ed</TD> </TR> </TABLE> How about a bigger border? <TABLE BORDER=5> <TR> <TD>Ed</TD> </TR> </TABLE>
Tables
Now change the boarder to 0 Then to 25 Add the following words in the Table data Can I see the effect Then we can specifying a table size
5/1/2012
76
Tables
<TABLE BORDER=3 WIDTH=100%> <TR> <TD>Ed, Rick and Tom</TD> </TR> </TABLE> Now change the width to 75% Then to 50% and see the effect Now specify a width of 50 instead of 50%. <TABLE BORDER=3 WIDTH=50> <TR> <TD>Ed</TD> </TR> </TABLE>
Tables
Each of the two ways to specify the table width has its advantages and you can choose what you feel comfortable with. We can also change the height. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>
Tables
Note - Controlling a table's height is fairly simple. Controlling the height of individual cells in the table is a little unreliable, especially across different browsers. We can control the alignment of the cell data. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="center">Ed</TD> </TR> </TABLE>
Tables
We can left align the cell data or right align. The default value is (usually) ALIGN="left". You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.
5/1/2012
80
Tables
We can also control where data will appear vertically in a cell. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left" VALIGN="top">Ed</TD> </TR> </TABLE>
5/1/2012
81
Tables
<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR><TD ALIGN="left" VALIGN="bottom">Ed</TD> </TR></TABLE> Default is usually middle <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR><TD ALIGN="left" VALIGN="middle"> Ed</TD> </TR> </TABLE>
Tables
Images can also be used and manipulated in a table data cell. <TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN="left" VALIGN="middle"><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32 ALT="Ed"> </TD> </TR> </TABLE>
Tables
<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR><TD>Ed</TD> <TD>Tom</TD> </TR> </TABLE> We are now getting two columns and putting the data in each. WIDTH attributes can also be expressed as a percentage. <TABLE BORDER=3 WIDTH=300 HEIGHT=75><TR><TD WIDTH=50%> Ed</TD> <TD WIDTH=50%>Tom</TD></TR></TABLE>
Tables
The browser may not follow the strictly specific table cell dimensions. Often the browser doesn't render a table exactly how we've specified. It is therefore better to design rubber bands than a rigid framework. Design your table in such a way so that minor differences in the way a browser renders it won't destroy what you're trying to do.
5/1/2012
85
Tables
The attributes in the first row can be carried on to the second row <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%> Edward </D> <TD WIDTH=20%>Tom</TD> <TDWIDTH=20%> Rick </TD> </TR> <TR><TD>Larry</TD><TD>Curly</TD><TD> Moe</TD> </TR> </TABLE>
Tables
If we leave out one element, the table will remain in shape (second row last column) <TABLE BORDER=3 WIDTH=300 HEIGHT=75 > <TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD></TR> <TR> <TD>Larry</TD> <TD>Curly</TD> </TR> </TABLE>
Tables
To keep the browser from guessing, we can leave that empty cell there and just put a blank space in it ( ). Normally for a simple table this isn't necessary, however as your tables become more complex, the less guessing the browser has to do, the better off you'll be. How? Can put <TD> </TD> before closing the last </TR>
Tables
Let's put Moe back and remove all attributes except BORDER. <TABLE BORDER=3> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> See the effect
Tables
Next are a couple of attributes called CELLPADDING and CELLSPACING. Both are used up front in the <TABLE> tag. CELLPADDING is the amount of space between the border of the cell and the contents of the cell.
5/1/2012
90
Tables
<TABLE BORDER=3 CELLPADDING=12> <TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR><TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD></TR> </TABLE> Try it out
Tables
The default value for this attribute is normally 1. The reason it is 1 and not 0 is so that any text in the cells won't be banging up against the borders. (Although you could specify 0 if you wanted to). If we substitute CELLSPACING for CELLPADDING we get a slightly different effect. The default value for the CELLSPACING attribute is usually 2.
Tables
<TABLE BORDER=3 CELLSPACING=12> <TR> <TD>Ed</TD><TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Try it out. Yes that is what it means to practice!
Tables
We can, of course, use these attributes in combination. <TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12> <TR> <TD>Ed</TD><TD>Tom</TD> <TD>Rick</TD></TR> <TR><TD>Larry</TD> <TD>Curly</TD><TD>Moe</TD> </TR> </TABLE>
5/1/2012
94
Tables
And, to see what it would look like, we can set them both to 0. <TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0> <TR><TD>Ed</TD><TD>Tom</TD> <TD>Rick</TD> </TR> <TR><TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>
5/1/2012
95
Tables
Some HTML authors are omitting closing cell </TD>, row </TR> and table </TABLE> tags. Even the W3C's(WWW Consortium) html recommendation suggests that at least the closing cell and row tags can be left out. The idea is that the browser should know that when another cell begins, the last one must have ended. But for complex tables, some browsers don't always understand this and the table goes goofy. It is therefore a good practice to always include those closing tags.
Tables
Whenever a whole page, or large portions of a page just "disappear", the culprit is usually one or more missing </TABLE> tags. Make sure all closing tags are there (especially /TABLE) and then the problem disappears.
5/1/2012
97
Tables
We can decide to put a back ground colour in our table <TABLE BORDER=3 BGCOLOR="#FFCC66"> <TR> <TD>Ed</TD><TD>Tom</TD> <TD>Rick</TD></TR> <TR> <TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>
Tables
It can be a different colour for each row. <TABLE BORDER=3> <TR BGCOLOR="#FF9999"> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR BGCOLOR="#99CCCC"> <TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Try it out and see the effect please.
Tables
We can even give different colours to different calls. <TABLE BORDER=3> <TR BGCOLOR="#FFCCFF"> <TD>Ed</TD><TD>Tom</TD> <TD>Rick</TD></TR> <TR> <TD BGCOLOR="#FF0000">Larry</TD> <TD>Curly</TD> <TD BGCOLOR="#3366FF">Moe </TD> </TR> </TABLE>
Tables
<TD> bgcolor will override a <TR> bgcolor and a <TR> bgcolor will override a <TABLE> bgcolor e.g. <TABLE BORDER=3 BGCOLOR="#FF6633"> <TR BGCOLOR="#009900"> <TD BGCOLOR="#9999FF">Ed</TD> <TD>Tom</TD><TD>Rick</TD> </TR> <TR><TD>Larry</TD><TD>Curly</TD><TD> Moe</TD> </TR> </TABLE>
Tables
NB. A browser has to interpret the instructions you give it the best way it can. If something has not been specified one way or another, most browsers will try to come up with an attractive solution Nevertheless you need to avoid the mistakes as much as possible just incase you use another browser that is not as tolerant as the one that corrects your mistakes.
5/1/2012
102
Tables
COLSPAN (Column Span) and ROWSPAN (Row Span maybe??) can also be looked at now. See below <TABLE BORDER=3> <TR> <TD>Ed</TD><TD>Rick</TD> </TR> <TR> <TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD></TR> </TABLE> Try it out.
Tables
We can make two cells down or whatever occupy the same space as one cell above.We have to use the COLSPAN attribute like so <TABLE BORDER=3> <TR> <TD COLSPAN=2>Ed</TD><TD>Rick</TD> </TR> <TR> <TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE> Try it out 104 5/1/2012 stevalstevalsurvivor@yahoo.com.sg
Tables
<TABLE BORDER=3> <TR><TD COLSPAN=3 ALIGN="center">Ed</TD> </TR> <TR><TD>Larry</TD><TD>Curly </TD><TD>Moe</TD> </TR> </TABLE> [One cell up spans the equivalent of three cells down ]
Tables
All other html coding can be used in a cell. We can make letters bold as an example. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN="center"> <B>Ed</B></TD></TR> <TR> <TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>
5/1/2012
106
Tables
We'll make words in a given cell a link to my other pages. <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN="center"><A HREF="http://www.google.com/">Ed</A> </TD></TR> <TR> <TD>Larry</TD><TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>
Tables
<ROWSPAN> is just like <COLSPAN> except you will span rows instead of columns. <TABLE BORDER=3> <TR><TD ROWSPAN=2>Ed</TD> <TD>Tom</TD><TD>Rick</TD> </TR> <TR><TD>Curly</TD><TD>Moe</TD> </TR> </TABLE>
5/1/2012
108
Tables
We can use the two in combination <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Ed</TD> <TD COLSPAN=2>Tom</TD> </TR> <TR> <TD>Curly</TD><TD>Moe</TD> </TR> </TABLE>
5/1/2012
109
Tables
We can create a table of one row and column. <TABLE BORDER=3><TR><TD>Edward</TD> </TR> </TABLE>
5/1/2012
110
Tables
Can replace Edward with an unordered list. <TABLE BORDER=3> <TR><TD>Items for shopping <UL> <LI>Apples <LI>Flour <LI>Sugar<LI> lemon</UL> </TD> </TR> </TABLE>
Tables
Remember, in the absence of other instructions, the table will make itself just big enough to contain the data. So in this instance, a size attribute is not needed to accomodate the list. The table simply expands to the proper size.
5/1/2012
112
Tables
We can expand the table the full width of the browser window. <TABLE BORDER=3 WIDTH=100%> <TR> <TD>Items for shopping <UL> <LI>Apples <LI>Flour <LI>Sugar<LI>Lemon</UL> </TD> </TR></TABLE>
Tables
We can place the image in the first cell <TABLE BORDER=3 WIDTH=100%> <TR> <TD WIDTH=40%> <IMG SRC=footballer.gif" WIDTH=150 HEIGHT=138> </TD> <TD WIDTH=60%>Items for shopping<UL> <LI>Apples<LI>Flour<LI>Sugar<LI>Lemon </UL></TD></TR></TABLE>
Tables
We can align the image to the right side of the cell and turn off the border attribute. <TABLE BORDER=0 WIDTH=100%> <TR> <TD WIDTH=40% ALIGN="right"> <IMG SRC=footballer.gif" WIDTH=150 HEIGHT=138></TD> <TD WIDTH=60%>Items for shopping <UL><LI>Apples<LI>Flour<LI>Sugar <LI>Lemon</UL> </TD></TR></TABLE>
Tables
We can have a table within a table <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD> <TABLE BORDER=3> <TR> <TD>Ed</TD></TR> </TABLE> </TD></TR> </TABLE>
Tables
Our table can also be centered very easily. <CENTER> <TABLE BORDER=3 WIDTH=200 HEIGHT=100> <TR> <TD> <TABLE BORDER=3> <TR><TD>Ed</TD></TR></TABLE> </TD></TR> </TABLE> </CENTER>
FORMS
5/1/2012
118
FORMS
With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever. The basic construction of a html form is this... <FORM> begin a form <INPUT> ask for information in one of several different ways... <INPUT> ...there can be as many input areas as you wish </FORM> end a form
FORMS
Remember the general format, and our activity will remain between the body tags. HTML> <HEAD> <TITLE> Joe's the handsomest guy I know </TITLE> </HEAD> <BODY> </BODY> </HTML>
FORMS
<HTML> <HEAD> <TITLE>Learning needs patience. </TITLE> </HEAD> <BODY> <FORM METHOD=POST
ACTION="mailto:abc@123.com" ENCTYPE="text/plain">
</FORM> </BODY> </HTML>

5/1/2012
121
FORMS
To send the data to more than one email address, separate them with commas... larry@3stooges.org,curly@3stooges.org, mo@3stooges.org
5/1/2012
122
FORMS
Every so often, depending on the sender's browser/email configuration, using the mailto action might just bring up an empty New Mail window instead of sending the form data. Sometimes (rarely) you'll click on the button and nothing will happen. In this case you will not be able to even practice with the simpler mailto action.
5/1/2012
123
FORMS
CGI form handling (Common Gateway Interface) The most reliable way to process your form data is to send it to a script on a server for processing. The most obvious place to look for such a script is your own ISP or web host. Most have a form mail script that you can send the data to. ISP normally give directions on using their script.
FORMS
The most common TYPE of form <INPUT> is TEXT. <FORM> <INPUT TYPE="text"> </FORM> Every input needs a NAME. <FORM> <INPUT TYPE="text" NAME="ADDRESS"> </FORM>
5/1/2012
125
FORMS
When the user types in his address (for example 254 Masaka), it will become the input's value and be paired with ADDRESS so the end result after processing will be ADDRESS=254 Masaka We can if we want, type in a VALUE. <FORM><INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Kabale"> </FORM> This will bring the words 44 Kabale in the area where one was to type the words.
FORMS
This will automatically pair the value 44 Kabale with the name ADDRESS, unless the user changes it. Note - be sure to use quotes where I've specified. We can specify the size of the text input box. <FORM><INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Kabale" SIZE=10> </FORM>
FORMS
See the effect if you change the value to 30 <FORM> <INPUT TYPE="text" NAME="ADDRESS" VALUE="44 Kabale" SIZE=30> </FORM> The default value is (usually) 20. You probably already know, by the way, that the default value is the value that the browser assumes if you have not told it otherwise.
FORMS
Note - A text box is not always the same size between browsers. Author a form with one browser, then view it in another browser, and you'll see them rendered a little differently. We can specify how many characters a user can input. <FORM> <INPUT TYPE="text" NAME="ADDRESS" SIZE=30 MAXLENGTH=10> </FORM> This can be done if you think people will send a lot of words
FORMS
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it displays *** instead of the actual input. The browser will send you the input, it just won't display it. <FORM> <INPUT TYPE="password"> </FORM>
FORMS
Remember that each <INPUT> must have a NAME. <FORM> <INPUT TYPE="password" NAME="USERPASS"> </FORM> SIZE, VALUE, and MAXLENGTH attributes work here also. N.B. A <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it.
FORMS
Next up are Radio Buttons and Check Boxes. Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of several options. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND"> </FORM>
5/1/2012
132
FORMS
We can have three or more buttons <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND"> <INPUT TYPE="radio" NAME="BEST FRIEND"> <INPUT TYPE="radio" NAME="BEST FRIEND"> </FORM>
5/1/2012
133
FORMS
We can add breaks. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND"> <BR> <INPUT TYPE="radio" NAME="BEST FRIEND"> <BR> <INPUT TYPE="radio" NAME="BEST FRIEND"> </FORM>
FORMS
Note that each input has the same name. The reason will become apparent very shortly. Each of the Radio Buttons must be assigned a VALUE. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Eva"><BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE=Jim"><BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom"> </FORM>
FORMS
N.B. The neater and more organized you write your code, the easier it is to work with. Also, when you go back to make changes, having an orderly layout is half the battle.
5/1/2012
136
FORMS
We can label each button. <FORM> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ed">Eva Akello<BR> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Rick">Joe Nakato<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom">Tom Babigumira</FORM>
5/1/2012
137
FORMS
You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection <FORM>Who is your best friend? <BR> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE=Eva" CHECKED>Eva Akello<BR> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE=Joe">Joe Nakato <BR> <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom">Tom Babigumira </FORM>
FORMS
The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair BEST FRIEND=Eva (or whoever they pick).
5/1/2012
139
FORMS
Building Check Boxes is pretty much the same thing. <FORM> <INPUT TYPE="checkbox" NAME="Eva"> </FORM>
5/1/2012
140
FORMS
Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want) <FORM> <INPUT TYPE="checkbox" NAME="Ed"> <BR><INPUT TYPE="checkbox" NAME=Rose"><BR> <INPUT TYPE="checkbox" NAME="Tom"> <BR> <INPUT TYPE="checkbox" NAME="Bob"> </FORM>
FORMS
Each Check Box gets the same VALUE. <FORM> <INPUT TYPE="checkbox" NAME="Ed" VALUE="YES"><BR> <INPUT TYPE="checkbox" NAME="Rick" VALUE="YES"><BR> <INPUT TYPE="checkbox" NAME="Tom" VALUE="YES"><BR> <INPUT TYPE="checkbox" NAME="BM" VALUE="YES"> </FORM>
FORMS
Note - For Check Boxes the NAME changes and the VALUE stays the same AND with Radio Buttons, the VALUE changes but the NAME stays the same.
5/1/2012
143
FORMS
We can label each box. <FORM> <INPUT TYPE="checkbox" NAME="Eva" VALUE="YES">Eva Akello<BR> <INPUT TYPE="checkbox" NAME=Joe" VALUE="YES">Joe Nakato<BR> <INPUT TYPE="checkbox" NAME="Tom" VALUE="YES">Tom Babigumira<BR> <INPUT TYPE="checkbox" NAME="Becky" VALUE="YES">Becky Namale </FORM>
FORMS
You can add something on top of the buttons FORM>Which of these students are your friends?<BR> <INPUT TYPE="checkbox" NAME="Eva" VALUE="YES" CHECKED>Eva Akello<BR> <INPUT TYPE="checkbox" NAME=Joe" VALUE="YES">Joe Nakato<BR> <INPUT TYPE="checkbox" NAME="Tom" VALUE="YES" CHECKED>Tom Babigumira<BR> <INPUT TYPE="checkbox" NAME="Becky" VALUE="YES">Becky Namale</FORM>
FORMS
The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs... Eva=YES Tom=YES (or whatever they choose... if they choose nothing, nothing will be returned to you) Suppose you want to ask 3 different questions about the same group of students.
5/1/2012
146
FORMS
<FORM> <TABLE BORDER=1><TR><TD WIDTH=33%> Which of these guys are your friends?<BR> <INPUT TYPE="checkbox" NAME="Friend?..Eva" VALUE="YES">Eva Akello<BR> <INPUT TYPE="checkbox" NAME="Friend?..Joe" VALUE="YES">Joe Nakato<BR> <INPUT TYPE="checkbox" NAME="Friend?..Tom" VALUE="YES">Tom Babigumira<BR><INPUT TYPE="checkbox" NAME="Friend?..Becky" VALUE="YES">Becky
FORMS
</TD><TD WIDTH=33%>Which of these guys would you lend money to?<BR> <INPUT TYPE="checkbox" NAME="Lend money?..Eva" VALUE="YES">Eva Akello<BR><INPUT TYPE="checkbox" NAME="Lend money?..Joe" VALUE="YES">Joe Nakato<BR> <INPUT TYPE="checkbox" NAME="Lend money?..Tom" VALUE="YES">Tom Babigumira<BR> <INPUT TYPE="checkbox" NAME="Lend money?..Becky" VALUE="YES">Becky Namale
FORMS
</TD><TD WIDTH=34%>Which of these guys would you trust with your property?<BR> <INPUT TYPE="checkbox" NAME=Entrust property?..Ed" VALUE="YES">Eva Akello<BR> <INPUT TYPE="checkbox" NAME=" Entrust property?..Joe" VALUE="YES">Joe Nakato<BR> <INPUT TYPE="checkbox" NAME=Entrust property?..Tom" VALUE="YES">Tom Babigumira<BR><INPUT TYPE="checkbox" NAME=Entrust property?..Becky" VALUE="YES">Becky Namale</TD></TR> </TABLE></FORM>
5/1/2012
FORMS
After checking some options, something similar to the following name/value pairs will be sent. Friend?..Eva=YES Friend?.. Joe=YES Friend?..Tom=YES Lend money?...Tom=YES Lend money?...Becky=YES Entrust property?...Eva=YES Entrust property?...Tom=YES Entrust property?...Becky=YES
FORMS
You can also use images instead of words in a form e.g for presidential candidates, we can create a form containing pictures on candidates below which we put buttons. As a matter of fact, you can use just about anything in a form or a form in anything. Just watch your html syntax and avoid overlapping tags.
5/1/2012
151
FORMS
The next type of input is a Pull Down List. With this type you use <SELECT> instead of <INPUT> and it has a closing tag. Let's make one. <FORM> <SELECT>
</SELECT> </FORM> Try it and see the result.

FORMS
Don't forget to give it a name. <FORM> <SELECT NAME="BEST FRIEND"> </SELECT> </FORM> Next add a few options. <FORM> <SELECT NAME="BEST FRIEND"> <OPTION>Eva<OPTION>Joe<OPTION>Tom <OPTION>Becky</SELECT> </FORM>
FORMS
And give each <OPTION> a VALUE. <FORM> <SELECT NAME="BEST FRIEND"> <OPTION VALUE="Eva">Eva <OPTION VALUE=Joe">Joe <OPTION VALUE="TOM">Tom <OPTION VALUE=Becky">Becky </SELECT> </FORM> The default option is the one that is listed first.
FORMS
We can specify a default other than the first option in the list. <FORM> <SELECT NAME="BEST FRIEND"> <OPTION VALUE="Eva">Eva <OPTION VALUE=Joe">Joe <OPTION VALUE="TOM" SELECTED>Tom <OPTION VALUE=Becky">Becky </SELECT> </FORM>
5/1/2012
155
FORMS
A Scrolling List is very similar in construction to a Pull Down List. Let's add a few more names first. <FORM> <SELECT NAME="BEST FRIEND"> <OPTION VALUE="Eva">Eva <OPTION VALUE=Joe">Joe <OPTION VALUE="Tom">Tom <OPTION VALUE=Becky">Becky <OPTION VALUE="HORACE">Horace <OPTION VALUE="REGGIE">Reggie <OPTION VALUE="MYRON">Myron </SELECT></FORM>
FORMS
To turn it into a Scrolling List, we add a SIZE attribute to the <SELECT> tag. <FORM> <SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="ED">Eva <OPTION VALUE=Joe">Joe <OPTION VALUE="TOM">Tom <OPTION VALUE=Becky">Becky <OPTION VALUE="HORACE">Horace <OPTION VALUE="REGGIE">Reggie <OPTION VALUE="MYRON">Myron </SELECT></FORM>
FORMS
The SIZE is simply how many options show in the window. Again, the default value is the first <OPTION>, and again we can change that by selecting one.
5/1/2012
158
FORMS
<FORM> <SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="Eva">Eva <OPTION VALUE=Joe">Joe <OPTION VALUE="TOM" SELECTED>Tom <OPTION VALUE=Becky">Becky <OPTION VALUE="HORACE">Horace <OPTION VALUE="REGGIE">Reggie <OPTION VALUE="MYRON">Myron </SELECT> </FORM>
5/1/2012
FORMS
A very useful type of input is <TEXTAREA>. <FORM> <TEXTAREA NAME="COMMENTS"> </TEXTAREA> </FORM> Try and see how it looks like.
5/1/2012
160
FORMS
You control the size of the box like so... <FORM> <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> </TEXTAREA> </FORM> ROWS is the height, COLS is the width.
5/1/2012
161
FORMS
A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that's the case, they will just ignore it. <FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="soft"> </TEXTAREA></FORM> WRAP="soft" means that the text in the box wraps, but it is sent as one long continuous string.
FORMS
<FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="hard"> </TEXTAREA> </FORM> WRAP="hard" means that the text in the box wraps, and it is sent that way too.
5/1/2012
163
FORMS
<FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="off"> </TEXTAREA> </FORM> This is normally the default. WRAP="off" means that the text in the box does not wrap, although it is sent exactly the way it was typed in.
5/1/2012
164
FORMS
Yet another type of input is HIDDEN input. <INPUT TYPE="hidden" NAME="LOCATION" VALUE="USA Form"> A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page.
5/1/2012
165
FORMS
An occasionally useful input is the File Upload input. With it your visitors can send you a file right off their hard drive. <FORM> <INPUT TYPE=FILE NAME="myfile"> </FORM> N.B. Some browsers do not support this kind of input.
5/1/2012
166
FORMS
The SUBMIT and RESET buttons. <FORM> <INPUT TYPE="submit"> </FORM> SUBMIT of course, sends the data... Try it and see RESET, clears the form. <FORM><INPUT TYPE="reset"></FORM> Try it also
167
5/1/2012
FORMS
We can easily change what the buttons say. <FORM> <INPUT TYPE="submit" VALUE="Send it away data!"> <INPUT TYPE="reset" VALUE="Clear the form Norm!"> </FORM> Try it out If necessary, the SUBMIT button can also have a NAME. You would need this if, for whatever reason, you had more than one SUBMIT button.
FORMS
Can we use an image for a Submit button? <FORM> <INPUT TYPE="image" SRC="submit.gif"> </FORM>
5/1/2012
169
FORMS
Add WIDTH & HEIGHT so your browser can load your page quickly and efficiently. Add an ALT attribute so if someone is running without images they can still submit your form. And add BORDER=0 if you want the little link colored box to go away. <FORM><INPUT TYPE="image" SRC="images/submit.gif" WIDTH=94 HEIGHT=26 BORDER=0 ALT="Submit"></FORM>
FORMS
Note that the INPUT TYPE="image" is, by default, a Submit button only. You can't make
a Reset image button. Can I make a simple button that just takes the user to another page?
<FORM ACTION="../tables/index.html"> <INPUT TYPE="submit" VALUE=My new page"> </FORM> Try it

Frames
The basic concept goes like this: Each frame is a regular, complete html document. If you wanted to divide your page into 2 side by side frames, then you would put one complete html document in the left frame and another complete html document in the right frame If you need to write a third html document. This MASTER PAGE contains the <FRAME> tags that specify what goes where. As a matter of fact, that's about its only function.
Frames
There are only two main frame tags: <FRAMESET> and <FRAME>.
Using them will clearly tell what they are other than explaining them here.
5/1/2012
173
Frames
We shall use html files so we should create and name them. <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> This is to use for trying. </BODY> </HTML> Call this file Start"
Frames
Create another one and call it yoga.html <HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY>Another page here</BODY> </HTML> Save the two in the same folder.
5/1/2012
175
Frames
Create other four and give them names. Noe you have 6 independent files in one folder. Now create your master gage by starting with this. <HTML> <HEAD> <TITLE>My Framz Page- The Master Page</TITLE> </HEAD> <BODY></BODY> </HTML>
Frames
Remove the <BODY> tags. The master page doesn't use them! <HTML> <HEAD> <TITLE>My Framz Page- The Master Page </TITLE> </HEAD> </HTML>
5/1/2012
177
Frames
We use <FRAMESET> tags instead. <HTML> <HEAD> <TITLE>My Framz Page- The Master Page </TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>
5/1/2012
178
Frames
To keep things a little cleaner, I'm going to stop writing the <HTML>, <HEAD> and <TITLE> tags. Needless to say, keep them in your document. <FRAMESET> </FRAMESET> Now's a good time to save it. Save it in your folder Opening it now will show a blank page. All you have said so far is "This is my Master Page". 5/1/2012 stevalstevalsurvivor@yahoo.com.sg
179
Frames
Tell the browser to split the main window into 2 columns, each occupying 50% of the window. <FRAMESET COLS="50%,50%"> </FRAMESET> This will still be blank, we have one more thing to do before our 'system is operational'.
5/1/2012
180
Frames
We must tell the browser what to put in each frame. <FRAMESET COLS="50%,50%"> <FRAME SRC=Start.html"> <FRAME SRC=yoga.html"> </FRAMESET> Note that <FRAMESET> is a container tag, and <FRAME> is not. A container tag has an opening <TAG> and a closing </TAG>.
Frames
The <FRAMESET> tag does all the dividing. That's all it does... divide up windows. It specifies a few things regarding how to divide them up, but remember, whenever you want to do some dividing - use <FRAMESET>.
5/1/2012
182
Frames
Can we divide it into more than 2 pieces? Yes, just make sure that you specify a page for each section or lest the browser gets confused. <FRAMESET COLS="20%,20%,20%,20%,20%"> <FRAME SRC=Start.html"> <FRAME SRC=yoga.html"> <FRAME SRC=aminah.html"> <FRAME SRC="tina.html"> <FRAME SRC=gloria.html"> </FRAMESET>
Frames
We can make the frames of differents sizes. Just make sure your arithmetic is correct or the browser will come up with its own interpretation. <FRAMESET COLS="10%,20%,30%,15%,25%"> <FRAME SRC=Start.html"> <FRAME SRC=yoga.html"> <FRAME SRC=gloria.html"> <FRAME SRC="tina.html"> <FRAME SRC=aminah.html"> </FRAMESET>
5/1/2012 stevalstevalsurvivor@yahoo.com.sg
184
Frames
If we specify dividing into ROWS instead of COLS we get something else entirely. <FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC=Start.html"> <FRAME SRC=yoga.html"> <FRAME SRC=gloria.html"> <FRAME SRC="tina.html"> <FRAME SRC=aminah.html"> </FRAMESET>
5/1/2012
185
Frames
Let's go back down to 2 frames, divided equally into columns. <FRAMESET COLS="50%,50%"> <FRAME SRC=Start.html"> <FRAME SRC=yoga.html"> </FRAMESET> We can specify 50 pixels instead of 50%. And, we can use * instead of a number. The * means whatever is left over.
Frames
<FRAMESET COLS="50,*"> <FRAME SRC=Start.html"> <FRAME SRC="terri.html"> </FRAMESET> A popular frame layout is a narrow directory window on the left and a larger main window on the right
5/1/2012
187
Frames
If you divide up the windows using percentages (such as <FRAMESET COLS="15%,85%">) everything will probably look just good to you. But... to someone with a different screen resolution it might look different. The reason this happens is because you have specified that the left window should be 15%. 15% of what? 15% of whatever their horizontal screen resolution is. That means that that left window might look a little different to different people.
Frames
To fix that problem, just use an absolute dimension for the left window and make the right window elastic (such as <FRAMESET COLS="120,*">). N.B 120 pixels. We can have more than one leftover frame and specify a size relationship between them. <FRAMESET COLS="50,*,2*"> <FRAME SRC=Start.html"> <FRAME SRC=yoga.html"> <FRAME SRC=gloria.html"> </FRAMESET>
Frames
We were going to divide the given frame into half horizontally. <FRAMESET COLS="50,*,2*"> <FRAME SRC=Start.html"> <FRAME SRC=yoga.html"> <FRAMESET ROWS="50%,50%"> </FRAMESET> </FRAMESET>
Frames
We'll put Aminah back in on the top and Tina on the bottom. And that's that. <FRAMESET COLS="50,*,2*"> <FRAME SRC=start.html"> <FRAME SRC=yoga.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC=aminah.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET>
5/1/2012
191
Frames
We can divide more FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC=Start.html"> <FRAME SRC=Start.html"> <FRAME SRC=Start.html"> </FRAMESET> <FRAME SRC=aminah.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC=yoga.html"> <FRAME SRC="tina.html"> </FRAMESET></FRAMESET>
Frames
N.B. It is a good practice not to have more than 3 frames on your page. If you can avoid them altogether, that's even better. We can put pictures in the frames if we want to. Save the picture into your working folder as world.gif. <FRAMESET COLS="50%,50%"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC=yoga.html"> </FRAMESET>
Frames
Remember it is always good practice to include HEIGHT & WIDTH attributes for any image tag. Let's try to frame the picture nice and neat. <FRAMESET COLS="146,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC=aminah.html"> </FRAMESET>
Frames
Can divide the left frame horizontally into 2 sections. The top section to be 162 pixels high and the bottom section to be whatever is left over. We will put in world.gif and aminah respectively. <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162> <FRAME SRC=aminah.html"> </FRAMESET> <FRAME SRC=yoga.html"> </FRAMESET>
Frames
The scrollbars that you see can be specified as YES, NO or AUTO. YES means the window gets scrollbars whether they're needed or not. NO means there will be no scrollbars, even if your frame contents are big the browser will simply display as much as it can. AUTO is the default. If scrollbars are needed, they appear, if they are not needed they stay conveniently out of the way. Let's get rid of our scrollbars.
Frames
<FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO> <FRAME SRC=aminah.html"> </FRAMESET> <FRAME SRC=yoga.html"> </FRAMESET> Keep in mind, that you should be very careful about turning off the scrollbars.
5/1/2012
197
Frames
The browser automatically gives each frame some empty space around its contents. This is normally necessary for asthetics. You can control the size of these margins by using MARGINWIDTH and MARGINHEIGHT. They control the left & right and top & bottom margins respectively
Frames
We will set them both to 1. (1 is the minimum) <FRAMESET COLS="146,*"> <FRAMESET ROWS="162,*"> <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC=yoga.html"> </FRAMESET> <FRAME SRC=tina.html"> </FRAMESET>
5/1/2012
199

Basic HTML Formatting and Tags</TITLE

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Basic HTML Formatting and Tags</TITLE

Transféré par

Droits d'auteur :

Formats disponibles

BASIC HTML

Introduction to HTML Start, Programs, Accecories, Notepad. <HTML>

really ...and underlining. <BODY><U>Something</U> <I>really</I> <B>cool</B></BODY>

<THIS><THAT></THIS></THAT> g tags.... bad

<THIS><THAT></THAT></THIS> tags.... good stevalstevalsurvivor@yahoo.com.sg 5/1/2012

Basic formatting, line breaks, paragraph aligning

<BODY> Hey! <BR> What's <BR> going <BR>on <BR>here?? </BODY>

OUTPUT Hey Whats going on here??

Learning a language takes

Paragraphs and Alignment

Paragraphs and Alignment

Paragraphs and Alignment

is the same as...

<P>Some stuff</P><P>More stuff</P>

<BODY>Something<B> really<BR>cool<BR>like <BR>an<BR>icecube!</ BODY>

Something really cool like an icecube

Inserting images, relative paths

The same image has now been changed in size!

Links, image links, email links

Ordered/unordered lists, definition lists, more formatting

This is an ordered list 1. Uganda 2. Kenya 3. Tanzania 4. Rwanda

An unordered list red blue black yellow

unordered list tags

Ordered list tags

The Horizontal Rule.

The Horizontal Rule.

The Horizontal Rule.

The Horizontal Rule.

It can be made a solid line.

<PRE> (preformat) tag

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 101

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 103

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 105

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 107

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 113

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 115

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 116

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 117

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 119

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 120

</FORM> </BODY> </HTML>

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 124

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 127

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 130

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 131

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 135

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 141

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 142

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 144

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 145

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 150

</SELECT> </FORM> Try it and see the result.

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 153

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 154

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 156

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 157

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 162

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 168

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 170

<FORM ACTION="../tables/index.html"> <INPUT TYPE="submit" VALUE=My new page"> </FORM> Try it

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 174

5/1/2012 stevalstevalsurvivor@yahoo.com.sg 190