Tuesday, 27 November 2012

Learn Webdesigning

LESSON 10 - RESOURSES

HTML is a widely used mark-up language that helps to build web pages. It is however just the beginning of it all. There is a bunch of other programming languages for web designing. Also, HTML (either of the types) helps you in designing a website. It is the foundation of all other web programming languages. However, there are bunches of resouses online few of which i would highlight shortly.

As a web designer, it is needful to have the knowledge of colors and its combination.
Posted by at No comments:
Learn Webdesigning

LESSON 9: USING FRAMES

What Frames Are

Frames is one of the newer features of HTML which is only implemented on the newest browsers (Netscape 2.0 and higher, and the new Internet Explorers, and many others) which allows a single browser window to be divided into multiple sections, each with an independent HTML page loaded inside it, and these HTML pages can interact with each other. Each page loaded within each section of the frames window is a separate HTML document.

Example of the code to a simple frames page...

<html>
<head><title>testing frames...</title></head>

<frameset cols="25%,75%">

<frameset>
<frame src="test.html" name="indexbar">
</frameset>

<frameset>
<frame src="main.html" name="main">
</frameset>

</frameset>

<noframes>
This page requires a frames-capable browser... please get one!
</noframes>
</html>


The frames page itself in most cases does not actually contain any content, all content is placed on the separate HTML pages loaded within each frame (section). Instead, the frames page acts as a guide, defining which page to be loaded into each frame, and the frame attributes themselves. As you may have noticed, a frames page closely resembles a normal HTML page, except that the body is replaced withframeset, and an additional noframes tag is added.

Using The Frameset Tag

 The frameset tags are used to define the characteristics of the frames, and the noframes tags are used to define what a browser that is not frames-enabled will see. Because the frameset tags are ignored by a non-frames browser, anything within the noframes tags will be considered a normal HTML page. So after the <noframes> tag should be placed the <body> tag, and then any content and tags, then concluded with the </body> tag, followed by the </noframes> tag. The noframes content will not be seen by someone using a frames-enabled browser unless they choose 'view source'.

The frameset tag will be used multiple times throughout a single frames page. The first frameset tag is used to define the number of separate frame columns within the browser window, and what width each of those windows will be. The next set of frameset tags will be used to define how many frame rows will be in the browser window, and each one's height. The row attribute is set separately for each column, for example, your first column may have 4 frames, and your second column may have 2 frames, etc. There is no specific limit on the number of frames you may have within a single browser window, but you must realize that your page will be viewed in different resolutions, from 640 x 480 pixels to 1024 x 768 pixels and greater. My advice is to limit your page to no more than 4 frames within a single browser window.

Defining Columns

 The first frameset tag should read <frameset cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">. This first tag will be closed with a </frameset> tag, but only after the frameset rows for each column are also defined. The SIZE_OF_COLUMN can be one of three numbers...
  • x% - each column is set by a percent of the available browser window. (x is a number from 1 to 100)
  • x - each column is set by a fixed pixel amount. (not recommended, because pixel widths vary depending on the viewer's resolution) (x is any number)
  • * - the * tells the browser to use all available space that is left for this column.

So a frameset reading <frameset cols="20%,80%"> would mean that the first column is the browser window will take up 20% of the browser window's width, and that the second column will take up 80% of the total browser's width. Another example is <frameset cols="120,*"> in which the first column is exactly 120 pixels wide, and the second column takes up all remaining width. Only one column is required, and there is no limit on how many columns can be defined.

Defining Rows

 Within the column defining frameset opening and closing tag are the row defining frameset tags. The number of row defining frameset tags is directly dependent on the number of columns defined in the column defining frameset tag. If there are two columns defined, there will be two separate row defining frameset tags, if three columns are defined, there will be three row defining frameset tags.

The row frameset tag should read <frameset rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">. The SIZE_OF_ROW is defined almost identically to the SIZE_OF_COLUMN... x% is the percent of available browser height, x is a defined pixel value in height, and * is all remaining space. Rows are defined top to bottom, and Columns are defined left to right.

Defining Frames

 Within each row frameset tag comes the frame tag, which defines which page is to be loaded in that frame and a few attributes on that frame. The simple frame tag reads <frame src="document_to_load.html">, where document_to_load is the name of the web page that is to be loaded in that frame, and the frame tag has no closing tag. The frame tag has some other useful attributes:
  • SCROLLING="yes|no|auto" - This defines if the frame has a scroll bar or not. By default the frame sets scrolling to auto, which means the browser determines if a scroll bar is needed. If set to yes, the frame will always have a scroll bar, and if set to no, the frame will never have a scroll bar.
  • NORESIZE - this attribute states that the user should not be able to resize the frame. By default the user is able to resize all frames within the browser window.
  • NAME="x" - this attribute defines the name of the frame, which is used to target pages to be loaded in that frame, which will be explained later. (x is any alphanumerical combination)
If you want scrolling to be disabled, just use the code:
<frame src="document_to_load.html" SCROLLING="no">
or if you want resizing to be disabled just use the code:
<frame src="document_to_load.html" NORESIZE>

Example of a complex frames page...

<html>
<head><title>testing complex frames</title></head>

<frameset cols="33%,33%,33%">

<frameset rows="*,100">
<frame src="page1.html" NAME="index">
<frame src="page2.html" NORESIZE>
</frameset>

<frameset>
<frame src="main.html" NAME="main">
</frameset>

<frameset rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html" SCROLLING="no">
</frameset>

</frameset>

<noframes><body>
This page requires a frames-enabled browser!
</body></noframes>

</html>


What this frames page looks like...


Using the TARGET attribute

 What if you have a page in one frame with a link, but when the user clicks the link, you want it to be loaded into one of the other frames you defined? This is what the TARGET attribute is for. The TARGET attribute is part of the <a href> tag. The a href tag used with the TARGET attribute reads:

<a href="page_to_load.html" TARGET="target_frame">text</a> 

Where page_to_load.html is the name of the file which should be loaded in the frame, target_frame is the defined name you gave to the frame that you wish the link to load into, and text is the anchored text of the link. If you link without a target, the linked page will load into the current frame. There are also a few other special magic targets which can be used where target_frame is:
  • TARGET="_blank" - link is loaded into a new blank browser window.
  • TARGET="_self" - link is loaded into frame that link was clicked in.
  • TARGET="_top" - link is loaded into current full browser window, and all frames disappear, leaving the new page to have the entire window.

Your own HTML page

Create a new file, called "frames.htm", which contains the following:

<html>
<head><title>My Home Page</title></head>

<!-- The page will have one row with two columns, one row with one column -->
<!-- The first frameset defines the rows: two rows, the second one is narrower -->
<frameset rows="85%,15%">

<!-- The second frameset defines the columns in the first row -->
<frameset cols="15%,85%">
<!-- Specify the two files to display in the first row -->
<!-- The first file will contain an index for your home pages -->
<frame src="indexbar.htm" name="indexbar">
<!-- The second file is Home.htm: the file you have been working on so far -->
<frame src="Home.htm" name="mainframe">
</frameset>

<!-- Specify the file to display in the second row -->
<!-- This file contains copyright information -->
<frame src="copyright.htm" name="copyright">
</frameset>


<!-- Define what to display to browsers which aren't frames-capable -->
<noframes>
This page requires a frames-capable browser... please get one!
</noframes>
</html>



Create another new file, called "indexbar.htm", which contains the following:

<html>
<body background="bgnd.gif"> 
<!-- The index page contains links to the main home page, and a feedback page -->
<!-- Those pages will load into the "main" target -->
<a href="Home.htm" target="mainframe">Home</a>
<a href="feedback.htm" target="mainframe">Feedback</a>
</body>
</html>



Create yet another new file, called "copyright.htm", which contains the following:

<html>
<body background="bgnd.gif">

<!-- The copyright page contains copyright information for your web pages -->
<center>Copyright &copy; 2012 YOURNAME</center>
</body>
</html>



Create an essentially blank file, called "feedback.htm". We will complete this file later.

<html>
<body background="bgnd.gif">
</body>
</html>
Posted by at No comments:
Learn Webdesigning

LESSON 8: FORMS

Forms

Forms allow you to add interactivity to your web documents by way of the <FORM> tag. 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


The <INPUT> tag provides the user with various ways of inputting information. There are several different <INPUT> tags. 

Form Input


Text

The most common TYPE of form <INPUT> is TEXT.

<INPUT TYPE=TEXT>

Every input needs a NAME.

<INPUT TYPE=TEXT NAME="ADDRESS">

When the user types in his address (for example 2 Victory Lane), it will become the input's value and be paired with ADDRESS so the end result after running it through Mailto Formatter will beADDRESS=2 Victory Lane.

We can if we want, type in a VALUE.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="Victory Lane">

This will automatically pair the value Victory Lane 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.

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="Victory Lane" SIZE=10>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="Victory Lane" SIZE=20>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="Victory Lane" SIZE=30>

The default value is 20.

If we want, we can specify how many characters a user can input. 
Go ahead and try to input more than 10 characters in the text box below:

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>

Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it dispays *** instead of the actual input. The browser will send you the input, it just won't display it.

<INPUT TYPE=PASSWORD>

Remember that each <INPUT> must have a NAME.

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

SIZE, VALUE, and MAXLENGTH modifiers/attributes work here also. By the way, a <TAG> tells the browser to do something.

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 the options.
First let's build some Radio Buttons.

<INPUT TYPE=RADIO NAME="POSITION">

Now add 2 more.

<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">

   

Hmmm... I suppose we should put a line break after each one.

<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><P>



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.

<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"><P>



Now label each button.

<INPUT TYPE=RADIO NAME="POSITION" VALUE="A"> hp<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="B"> Dell<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="C"> None of the above<P>

 hp
 Dell
 None of the above

You can also modify these labels with other html tags if you wish.

Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional).

What is your position within the company?<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="A" CHECKED> hp<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="B"> Dell<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="C"> None of the above<P>

What is your position within the company?
 hp
 Dell
 None of the above

The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair POSITION=A (or whichever they pick).

Building Check Boxes is pretty much the same thing. Start with this.

<INPUT TYPE=CHECKBOX NAME="A">

Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)

<INPUT TYPE=CHECKBOX NAME="A"><BR>
<INPUT TYPE=CHECKBOX NAME="B"><BR>
<INPUT TYPE=CHECKBOX NAME="C"><BR>



Each Check Box gets the same VALUE.

<INPUT TYPE=CHECKBOX NAME="A" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="B" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="C" VALUE="YES"><BR>



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. Don't feel bad, my simple mind still gets confused.

OK, let's label each box.

<INPUT TYPE=CHECKBOX NAME="A" VALUE="YES"> hp<BR>
<INPUT TYPE=CHECKBOX NAME="B" VALUE="YES"> Dell<BR>
<INPUT TYPE=CHECKBOX NAME="C" VALUE="YES"> None of the above<BR>

 hp
 Dell
 None of the above

And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults.

What positions do you occupy within the company?<BR>
<INPUT TYPE=CHECKBOX NAME="A" VALUE="YES" CHECKED> hp<BR>
<INPUT TYPE=CHECKBOX NAME="B" VALUE="YES" CHECKED> Dell<BR>
<INPUT TYPE=CHECKBOX NAME="C" VALUE="YES"> None of the above<BR>

What positions do you occupy within the company?
 Powerbuilder Developer
 Database Administrator
 None of the above
The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs...

A=YES
B=YES
(or what ever they choose... if they choose nothing, nothing will be returned to you)

YOUR HTML PAGE !!!

Add this as a feedback.htm form.

<html>
<body background="bgimage.png" bgcolor=#FFFFFF> 

<center><h1>Feedback Form</h1></center>
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
<input type=radio name="position" value="Developer" checked>Developer<br>
<input type=radio name="position" value="ProjMan">Project Manager<br>
<input type=radio name="position" value="TechMan">Technical Manager<br>
<input type=radio name="position" value="NOTA">None of the above
</p>
<p>
<b>When it comes to web browsers:</b><br>
<input type=checkbox name="Netscape" checked>I use Netscape Navigator<br>
&nbsp;&nbsp;<input type=radio name="NetscapeVer" value="2.0">version 2.0<br>
&nbsp;&nbsp;<input type=radio name="NetscapeVer" value="3.0" checked>version 3.0<br>
<input type=checkbox name="IExplorer">I use Microsoft Internet Explorer<br>
&nbsp;&nbsp;<input type=radio name="IEVer" value="2.0">version 2.0<br>
&nbsp;&nbsp;<input type=radio name="IEVer" value="3.0">version 3.0<br>
</p>

</body>
</html>


Save the file.

 


Pull Down and Scrolling Lists

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.

<SELECT>
</SELECT>

Don't forget to give it a name.

<SELECT NAME="POSITION">
</SELECT>

Next add a few options.

<SELECT NAME="POSITION">
<OPTION>hp
<OPTION>Dell
<OPTION>None of the above
</SELECT>

And give each <OPTION> a VALUE.

<SELECT NAME="POSITION">
<OPTION VALUE="A">hp
<OPTION VALUE="B">Dell
<OPTION VALUE="C">None of the above
</SELECT>

The default option is the one that is listed first.

We can specify a default other than the first option in the list.

<SELECT NAME="POSITION">
<OPTION VALUE="A">hp
<OPTION VALUE="B" SELECTED>Dell
<OPTION VALUE="C">None of the above
</SELECT>

A Scrolling List is very similar in construction to a Pull Down List. We'll add a few more options first. Then, all we do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag.

<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="A">hp
<OPTION VALUE="B">Dell
<OPTION VALUE="C">Toshiba
<OPTION VALUE="D">Sony
<OPTION VALUE="E">Apple
<OPTION VALUE="F">None of the above
</SELECT>

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.

<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="A">hp
<OPTION VALUE="B" SELECTED>Dell
<OPTION VALUE="C">Toshiba
<OPTION VALUE="D">Sony
<OPTION VALUE="E">Apple
<OPTION VALUE="F">None of the above
</SELECT>

Textarea

 A very useful type of input is <TEXTAREA>.

<TEXTAREA NAME="COMMENTS">
</TEXTAREA>

You control the size of the box like so...

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>

ROWS is the height, COLS is the width.


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.

Go ahead and type in the boxes...

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>

WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>

WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>

This is the default.
WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way it was typed in (like the little man a few textareas back).


YOUR FIFTH HTML PAGE !!!

Open Notepad, and add the following.

<html>
<body background="bgimage.jpg">

<center><h1>Feedback Form</h1></center>
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
</p>
<p>
<b>When it comes to web browsers:</b><br> .
</p>
<b>I rate your site as:</b><br>
<select name="Rating">
<option value="Wow">Wow! How did you do it?
<option value="good">Really good
<option value="interesting">Interesting
<option value="hmmm">Hmmm - seen better
<option value="tryagain">Try again bud!
</select>
</p>
<p>
<b>Comments:</b><br>
<textarea name="comments" rows="6" cols="50" wrap="physical">
</textarea>
</p>
</body>
</html>

Save the file.

Submit and Reset Buttons

Last on the list are the SUBMIT and RESET buttons.

They really are very simple...

<INPUT TYPE=SUBMIT>

SUBMIT of course, sends the data and RESET, clears the form.

<INPUT TYPE=RESET>

We can easily change what the buttons say.

<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>


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.

Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do:
1) you can send the data to a cgi script for processing, or
2) you can have the data emailed to you.
As for the first, whoever wrote the script can tell you how the data should be sent. 
The second, or mailto form should have the following attributes in the <FORM> tag.

Note- Microsoft's Internet Explorer 3.0 does not support mailto forms. When you try to submit the information, the new mail message window pops up. Explorer does however support forms sent to a CGI script.

<FORM METHOD=POST ACTION="mailto:eidzeiaiti@gmail.com" ENCTYPE="application/x-www-form-urlencoded">
This line is very important. The only thing you have to do is plug in your email address after mailto: The rest must be written exactly as shown. The words FORM, METHOD, POST & ACTION do not have to be capitalized but there must be a space between each attribute.. between FORM & METHOD, between POST & ACTION, and between .com" & ENCTYPE.

When you put a mailto form on your page and someone sends you information, you'll notice that it is sent with a default Subject. If your visitor was using Netscape you'd get the default Subject "Form posted from Mozilla". Other browsers might send "Form Response", etc.

You can change this by editing what's in the <FORM> tag as follows...

<FORM METHOD=POST ACTION="mailto:eidzeiaiti@gmail.com?subject=Company feedback form" ENCTYPE="application/x-www-form-urlencoded">

YOUR FIFTH HTML PAGE !!!

Open Notepad, and add the following.

<html>
<body background="bgimage.jpg">

<center><h1>Feedback Form</h1></center>
<br>
<form method=post action="mailto:YOUREMAILADDRESS?subject=Feedback" enctype="text/plain">
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
</p>
<p>
<b>When it comes to web browsers:</b><br>
</p>
<b>I rate your site as:</b><br>
</p>
<p>
<b>Comments:</b><br>
</p>
<p>
<input type="submit" value="Send it!"><br>
<input type="reset" value="Clear it!">
</p>
</body>
</html>


Save the file.
Posted by at No comments:
Learn Webdesigning

LESSON 7: Tables

Table is a matrix like structure which holds objects such as text, images, buttons and etc in its cells. In most professional web pages they are used in web pages to place adjust text and image positions even though you do not see table borders. Later you will see how it is possible to set the border size of tables to 0 to hide them.

Drawing a table

To draw a table we use <TABLE> tag. <TABLE> tag needs to related tags for its rows and columns. <TR></TR> tag is used to create a row in table. Each <TR></TR> tag nested in <TABLE> </TABLE> tag will create a new row in the table. In addition one or more <TD></TD> tags are used to create columns in each row. Following example produces a table with two rows.
<TABLE>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>
If you browse this code in a browser, you will not see any table but two lines of text. In fact table is there but you cannot see it. <TABLE> tag will by default create a table with border size of 0. You must use a “border” parameter to specify a border size for your table.
<TABLE BORDER=1>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>

Specifying table sizes
You can specify width for a table both in percents of page width and in pixels. This means if user resizes
browser window, browser will maintain a width of 50% of its window for the table.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

If you want you can determine table width in pixels. In this way width of the table will be fixed and resizing the browser window will not have any effect on the table size.
<TABLE WIDTH=250px BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
You can specify a height for your table too. Width and height of the table will be divided between cells in rows and columns so if table width is 100 pixels and there are 2 columns then width of each cell will be 50 pixels. Just pay attention that if you put a long text in a cell which is longer than the cell itself, cell will be expanded to fit the text in it.
Text alignment in table cells By default text entered in a cell will appear at the left side of the cell. You can add either of below options to <TD> tag to specify horizontal alignment of text inside the cell.
<TD ALIGN=CENTER> or
<TD ALIGN=RIGHT> or
<TD ALIGN=LEFT> (this option is the default if you do not specify)
You can also determine vertical alignment of text in a cell by adding VALIGN option to <TD> tag. There are three values for VALIGN option : TOP, BOTTOM and MIDDLE. MIDDLE is default value if you do not use this parameter.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% HEIGHT=100 BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>TOP LEFT</TD>
<TD ALIGN=RIGHT VALIGN=TOP>TOP RIGHT</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>BOTTOM LEFT</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS


As we mentioned earlier, tables are also used to hold images in their places. You can insert an image in a table cell by enclosing <IMG> tag between <TD></TD> tags of a certain cell.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=4>
<TR>
<TD><IMG SRC="bgimage.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>


Exercise
Important: Do not use any html authoring program like MS FrontPage, Expression or Dreamweaver. You must work on the codes using a simple text editor.
1. Create a 3*3 table. Use same alignments and make titles of table, rows and columns as bold.
2. Create a 2*2 table. Insert an image file (small sized) in each cell of table. Adjust cell alignment of each cell so that images gather at the center of the table sticking to each other. Adjust table width to 50% of web page width. Set the height of the table to 200.


From what we have above, we see that tables are important in web design because they help in holding text, pictures, buttons, etc. in their places. We will be exporing more options about table cells (cell padding, cell spacing ) and finally we will learn how to link different parts of a single image to different web addresses.

Cell Width (Column Width)

In previous lesson we learned how we can determine width and height of a table.
<HTML>
<HEAD>
<TITLE>Table: Column widths not specified</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above table we have not determined sizes for two cells in first row. However you can determine width of each column in your table by specifying width of cells in first row. Just be careful to specify correct sizes. For example if your table width is 200 pixels sum of cell widths in a row must be exactly 200 otherwise each browser will render the page differently because of the wrong setting.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS

First column 140 Pixels wide, second column 260 pixels wide

You can also determine cell widths in percent. Sum of cell width percentages must be 100%.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=35%>TOP LEFT</TD>
<TD WIDTH=65%>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>

When you determine sizes of first row cells you do not need to determine widths for second row cells etc.
If you want a cell to be empty, you cannot omit definition for that cell or just leave its content empty. Insert cell definition (using <TD> tag), and enter a &nbsp; between <TD></TD> tags. As we told in earlier lessons this means a space character. You must enter at least a single space in this form if you need an empty cell, otherwise area of the cell will not appear like an empty cell. Browsers will not render the cell correctly.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>

In above example we have two empty cells but because we have specified both table size and column sizes, table will not lose its shape and first column will be 140 pixels wide and the second column will be 260 pixels wide. If we remove sizes, we cannot guarantee how it will be displayed on different browsers and screen modes. We urge you to determine table sizes in every table you create. If you want your tables resize automatically to fit the browser window, you need to use percent sizes but if you want fixed width tables, use pixel sizes for your tables. Also if you want the size of a cell to be exactly the same as a picture (which is put inside it) you need to use pixel size.

Cell padding

You can specify two other important size parameters for a table. Cell padding is the space between cell borders and table contents such as text, image etc.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
Cell padding effect : <BR><BR>
<TABLE BORDER=3 CELLPADDING=20>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS

Cell Padding

Default value for this option is 1. It means the contents of a cell will have a distance of one pixel with borders. If you don't want any space between objects inside the cells and its borders you can determine a value of 0 for this option. You can also increase the padding size. In above example we have set a padding of 20 pixels to show you the effect. We have added a few arrows to the picture to show the padding distance.

Cell spacing

Cell spacing parameter determines the space between inner (cells) and outer parts (outer border) of a table. In fact a table is constructed form two borders. A outer border area and a cell border area. There is a space between cell area and outer border. We call this "cell spacing". If you increase this value you will have a thick border. Default value for this property is 2. If you specify 0 for it, you will have a very thin border.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
Cell spacing effect : <BR><BR>
<TABLE BORDER=3 CELLSPACING=20>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS

Cell Spacing

You can also mix cell spacing and cell padding options to make specific tables you need.

Tables and images

Sometimes you need an image which each section of it links to a different website address. When user clicks on different parts of the picture they will be navigated to different pages. In previous lessons you learned how to use an image as a link. In this special case you can cut your picture into as many parts as you need and insert them in a table that holds image parts beside each other. Then link each image part to a different page. You will also need to set both cell spacing and cell padding to a value of 0 to prevent the table from appearing between image parts. In this way users will see a single image but when they click on different parts of the image they will go to different addresses.
There are other methods of using image maps to accomplish the above purpose but we do not discuss it in this here.

Cells, rows and table itself can be painted with colors. In addition each cell or the whole table can have images as their background.

Table background color

Newer browser software (IE, Netscape and Firefox) support background colors for tables. It is possible to specify background color for a table inside <TABLE> tag.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BGCOLOR="#66CCFF">
<TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
It is possible however to specify different colors for each row or even each cell of the table. If you want to specify a color for an entire row, you can use BGCOLOR option inside <TR> tag.


<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#66CCFF">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR BGCOLOR="#CCFFFF">
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

As we mentioned earlier, it is also possible to specify a color for individual cells by using BGCOLOR option in <TD> </TD> cell tags. You can of course mix all above options to create a specific table design. In the example below, we change color of the first row to "#336699". We also change color of two cells in second row to "#66CCFF" and "#CCFFFF" respectively.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#336699">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%" BGCOLOR="#66CCFF">C</TD>
<TD width="50%" BGCOLOR="#CCFFFF">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Column Span

Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to join two first cells with each other to create something like Figure 7-4. COLSPAN=2 in <TD> tag means this specific column (cell) will span to two cells instead of one.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=300>
<TR>
<TD COLSPAN=2 WIDTH=100>A</TD>
<TD WIDTH=100>B</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Joining two columns using colspan

If you have 3 cells in each row by default and you extend a cells using COLSPAN=2 to two cells you should have two <TD> tags in that row instead of 3. In above figure 7-5, for the first row we have two <TD> tags and for second row we have 3 of them. Also if you define a width of 100 for a cell which has a COLSPAN=2, the resulting joined cell will have a width of 200.

Row Span

This time we want to join two cells in a column (from different rows) to each other. This is very similar to previous section with the difference that we now want to join cells from different rows rather than cells in different columns. We use ROWSPAN instead of COLSPAN to do this.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=200>
<TR>
<TD ROWSPAN=2>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Joining two rows using rowspan

Again when you have joined two cells using the option ROWSPAN=2 and your table has a total of 2 rows, first <TR> which shows the first row will contain 3 cells or <TD> tags but second row will have only 2 cells (because the first cell of second row has been joined to a cell in first row and actually has become a part of first row). Look carefully at example 7-5 and try to understand how ROWSPAN works. Again you may mix different tags to create your custom designed tables.

Nested Tables

In HTML (and also in Word processors) it is possible to nest tables in each other. If you are going to design complicated web pages you will do this most of the time. For example let’s assume you need a table with a border size of 3 in a specific part of a web page. To fix the position of that table in your desired place you can use a table with border size of 0 (hidden) which is just supposed to help us to position the other table. Nested table code is almost straightforward.

<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE border=0 width=500>
<TR>
<TD width="25%">&nbsp;</TD>
<TD width="25%">&nbsp;</TD>
<TD width="25%">
<TABLE border="2" width="100%">
<TR>
<TD width="50%">1-</TD>
<TD width="50%">HTML</TD>
</TR>
<TR>
<TD width="50%">2-</TD>
<TD width="50%">C Prog.</TD>
</TR>
<TR>
<TD width="50%">3-</TD>
<TD width="50%">JScript</TD>
</TR>
</TABLE>
</TD>
<TD width="25%">&nbsp;</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In this example we have a 1*4 table. We want to hold our main table inside this table in its third column
so that our main table will be shown in right side of the center of the screen. Main table has a border
size of 1 while first table is hidden. In below figure you can see both the hidden table and the main table.
Posted by at No comments:
Learn Webdesigning

LESSON 6: CLEAN CODE, COMMENTS, AND ESCAPE CODES

Clean Code

Clean code means that your HTML coding follows all specifications. Here are a few ways to keep your code clean:
  • Don't type special characters into your code, instead type their escape code... many characters should NEVER be typed directly into HTML code... for example the "<", ">", the "©", "&", and the " itself. Instead, type &escape_code; (Ampersand, Escape Code for Character, then a semicolon). For these 5 characters, here are the escape codes...
    • For the < type &lt;
    • For the > type &gt;
    • For the © type &copy;
    • For the & type &amp;
    • For the " type &quot;

  • Use quotes around values in attributes... For example, if you want a horizontal rule that is half of the screen width, type <hr width="50%"> rather than <hr width=50%>, or if you want one that is size 5 type <hr size="5"> rather than <hr size=5>.

  • Don't overlap tags... Overlapping occurs when Tag A starts, Tag B starts, Tag A closes, then Tag B closes. This will cause errors in sensitive browsers. For Example, it will not render correctly in Navigator 4.0 Beta1, Netscape purposefully built into the browser so developers could catch errors.
    • Examples:
    • Wrong Way (Overlaps):
      <font size=+1><b>This is Bold and One Font Size Bigger</font></b>
      Right Way (Doesn't Overlap):
      <font size=+1><b>This is Bold and One Font Size Bigger</b></font>
    • Wrong Way (Overlaps):
      <a href="here.html"><i>This link is italicized</a></i>
      Right Way (Doesn't Overlap):
      <a href="here.html"><i>This link is italicized</i></a>

The Comment Tag

If you are writing an HTML document, sometimes you may want to put little reminders to yourself with your code so that you will be able to interpret your coding better. A comment will not appear in a web browser when the page is displayed... it is only visible when the source code is viewed. You start commented text with <!-- and end it with -->. 


YOUR FIFTH HTML PAGE !!!

Add the following to your HTML page ("index.htm"):

<html>
<head><title>My Home Page</title></head>
<center><font color="Blue"><h1>This is a Heading 1</h1></font></center>
<hr>
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="myImage.png" border=0><b>YOURNAME</b>.<img src="myImage.png" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>>
<hr>
<h2>My favourite Web Sites</h2>
<br>

<!-- This list is an unordered list -->
<ul>
<li> <a href="http://www.cuatdtop.blogspot.com">The Reformers : Web Design</a> </li>
<li> <a href="http://www.microsoft.com">Microsoft</a> </li>
<li> <a href="http://www.xencon.com">Xenon Web Design</a> </li>
<li> <a href="http://www.hp.com">Hp</a> </li>
</ul>

</body>
</html>

Save the text file as "index.htm".
Posted by at No comments:
Learn Webdesigning

LESSON 5: LIST


The UNORDERED LIST

The Unnumbered List is the first of the three types of lists. This is probably the most common list you will use.

Example of an Unordered List...
  • pencils
  • pens
  • erasers
  • paper
  • glue
Notice the Bullet Before each List Item. Now here is the HTML Code for the Unordered List Above...

<ul>
     <li>pencils</li>
     <li>pens</li>
     <li>erasers</li>
     <li>paper</li>
     <li>glue</li>
</ul>

The <ul> tag is the opening Unordered List Tag. Therefore, the </ul> is the closing tag. Between these two tags you place LIST ITEMS, each one having an individual <li> opening tag, and an optional</li> closing tag. There is no limit to the number of List Items you may have in a single list.

The ORDERED LIST


The Ordered List, also known as the Numbered List, is very similar in structure to the unordered list, except each list item has a number in front of it, instead of a bullet. Also, the opening tag for the list is <ol>instead of <ul>, and the closing tag is </ol> instead of </ul>. List Items within the list still use the same tags.
Example of an Ordered List...
  1. pencils
  2. pens
  3. erasers
  4. paper
  5. glue
Notice the Number Before each List Item. Now here is the HTML Code for the Ordered List Above...

<ol>
     <li>pencils</li>
     <li>pens</li>
     <li>erasers</li>
     <li>paper</li>
     <li>glue</li>
</ol>

The Definition List


This type of list is a little more complicated, but still very easy to use. This list starts with the <dl> opening tag, and ends with the </dl> closing tag. This has another tag known as <dt> for Definition Term, and <dd> for Definition Definition. These two tags do not need closing tags.
Example of a Definition List...
alliance
A union, relationship, or connection by kinship, marriage, or common interest.
alligator
Large amphibious reptile with very sharp teeth, powerful jaws.
alliterate
To arrange or form words beginning with the same sound.

Now here is the HTML code for this Definition List...


<dl>
<dt>alliance
   <dd>A union, relationship, or connection by kinship, marriage, or common interest.
<dt>alligator
   <dd>Large amphibious reptile with very sharp teeth, powerful jaws.
<dt>alliterate
   <dd>To arrange or form words beginning with the same sound.
</dl>

YOUR FIFTH HTML PAGE !!!

Add the following to your HTML page ("index.htm"):

<html>
<head><title>My Home Page</title></head>
<center><font color="Blue"><h1>This is a Heading 1</h1></font></center>
<hr>
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="myImage.png" border=0><b>YOURNAME</b>.<img src="myImage.png" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
<hr>
<h2>My favourite Web Sites</h2>
<br>

<ul>
<li> <a href="http://www.cuatdtop.blogspot.com">The Reformers : Web Design</a> </li>
<li> <a href="http://www.microsoft.com">Microsoft</a> </li>
<li> <a href="http://www.xencon.com">Xenon Web Design</a> </li>
<li> <a href="http://www.hp.com">Hp</a> </li>
</ul>

</body>
</html>

Save the text file as "index.htm".
-->
YOU WOULD HAVE SOMETHING LIKE THIS


Posted by at No comments:
Learn Webdesigning

LESSON 4: LINKS AND IMAGES

Anchored Links
Without Links, the World Wide Web wouldn't be a web at all! To add a link... you will use the <a href="location"> opening tag and </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.

Example of a link...

Visit THE REFORMERS: WEB DESIGNING!

Visit <a href="http://www.cuatdtop.blogspot.com/"> THE REFORMERS: WEB DESIGNING </a>! 

Note: Although Links are usually used to send people to other web pages, you may also use it to send email to a specific address by using a location of mailto:user@host.

Example of a Mailto: Link...

Send email to Me!

Send email to <a href="mailto:eidzeiaiti@gmail.com">Me</a>!

In-line Images

You may also add images (pictures) to your web page, as long as the image is in the .gif or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images in <img src="location">. It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag, which will allow the image to take proper proportions on a browser that is not currently viewing images. It is also recommended to use the ALT="what picture is" to tell a person what a picture is in case it is still loading or they are not viewing images. (The IMG tag has no closing tag!)

Example of a basic in-line image...



Combining Links and Images

Many times you may want to have an image that is linked, so that if someone clicks the image, they will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREFtags. (<a href="location_of_link"><img src="location_of_image"></a>) You may also use the ALIGN tags with images!
When an image is also a link, it has a border around it by default. You can control the width of the border - or turn it off completely - by using border=n within the img tag. n is the width of the border (n = 0 for no border).

Example of a linked image...



<a href="http://www.cuatdtop.blogspot.com/"><img src="News.png" align=right border=0></a> 

YOUR FOURTH HTML PAGE !!!

Look for a picture on your computer and save it in the same folder where you have your index.html web page so as to make it possible and easier for the browser to read it. Save it as myImage.png


Add the following to your HTML page ("index.htm"):

<html>
<head><title>My Home Page</title></head>
<center><font color="Blue"><h1>This is a Heading 1</h1></font></center>
<hr>
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="myImage.png" border=0><b>YOURNAME</b>.<img src="myImage.png" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
</body>
</html>

Save the text file as "index.htm".

YOU WOULD HAVE SOMETHING LIKE THIS

Posted by at No comments:
Subscribe to: Posts (Atom)