You browser does not support JavaScript, or it is not enabled.
The functionality of this site requires enabled Javascripts.

   http://www.passco.com/npunit2.htm   Updated:   Ideal Presentation Configuration

Unit-1 Unit-1a Unit-2 Unit-3

Using Notepad+ and Making a Web Page - Unit 2 Part of the Basic3 Skills Online Courses

This tutorial is best viewed if your set the window to this width.

Align Next Prior/Unit1a Top/Unit1 Page 11 - Add a Table Block    Any hostess of a dinner party knows there are rules to setting a proper table. The same is true of the work horse block in HTML coding, the Table Block.    Tables are much like a movie theater with many seats (we call them "cells" in HTML).     Mega-Theaters are clusters of theaters. And, HTML tables can contain tables. For this reason, all <TABLE> tags MUST be paired with a </TABLE> tags.     Thus, it is good practice when coding HTML file that the "initial tag" of a block, and the "terminal tag" of a block, be coded at the same time.    <TABLE>       <FONT size=7>       This is a Sample File       </TABLE>    Let's edit in the outer most elements of the TABLE block tags. Align Next Prior/Unit1 Top/Unit1

View Background File: http://www.passco.com/images/trsample.gif Exercise 5 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the <TABLE> tag. Edit in the </TABLE> tag. Let's Save the file by clicking the "Save Icon". Let's remove the "Status" Bar (hint: find "Preferences"). Let's re-establish the "Status" bar.

Align Next Prior Top Page 12 - Add a Table Row    Well, let's assume you are assigned a seat numbered "12" in our theater.     I assume you realise that this piece of information is insufficient to your finding your seat.    The seat we are seeking is an element in another entity, and that entity must be more significant than the seat. Thus, the entity we are referring to is the "row".    The row block consists of the two "Table Row" tags, the <TR> and the </TR>.    <TABLE>       <TR>          <FONT size=7>          This is a Sample File          </TR>       </TABLE>    Be careful, the TABLE ROW block must be coded inside the TABLE block. The "blocks within blocks" rule in HTML is an absolute. Align Next Prior Top

View Background File: http://www.passco.com/images/tdsample.gif Exercise 6 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the <TR> tag. Edit in the </TR> tag. Let's Save the file by clicking the "Save Icon".

Align Next Prior Top Page 13 - Add Data Column    Well, so far we have seen that the TABLE tags defines the limits of a table structure. Next, we have learned that TABLE's have at least one "TR" set of "table row" tags. of course, tables can have multiple "TR" rows.    Because tables are the main elements of spreedsheets, and spreadsheet manipluate "data", the elements in a "table row" are called "table data" elements or "cells". In HTML these elements are called "TD" blocks. Of course, a single TR block must have at least on TD element, but it may and many TD blocks.    <TR>       <TD>          <FONT size=7>          This is a Sample File          </TD>       </TR>    Let's code the TD tags inside the TR block tags, and enclose the Font tag and text within the TD block. Align Next Prior Top

View Background File: http://www.passco.com/images/sizetablesample.gif Exercise 7 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the <TD> tag. Edit in the </TD> tag. Let's Save the file by clicking the "Save Icon".

Align Next Prior Top Page 14 - Set Table Size    Well, our table is simple. It is referred to as a 1-by-1 table, one row and one column (data element, cell). Why are tables so important? Well, they are the "work horse" element in web page design.    We are not going to be web page authors when we finish, but that is not an objective of the course. Remember, our objective is to become aware of some basic computer skills.    But, having a definite project in mind, as with our little web page, gives us a formal task to edit. Let's continue. Placing graphics and text on the monitor require sizing and placing them.    We are going to size our table with a width of 600 pixels, and a height of 200 pixels. These values are called "elements", having a name=argument syntax. Let's enter these entities in the Table tag. Align Next Prior Top

View Background File: http://www.passco.com/images/cntrtextsample.gif Exercise 8 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the WIDTH=600 element. Edit in the HEIGHT=200 element. Let's Save the file by clicking the "Save Icon".

Align Next Prior Top Page 15 - Center Table Text    We've mentioned a term called a "block". What is a HTML block?    It is a segment of code that has a beginning and an end. It has a "beginning tag", like <TABLE>, and a "terminating tag", like the </TABLE> tag.    All blocks of code MUST be internal to another block. Much, like our concept of placing "boxes in boxes". View our graphic and note the presence of one block of code embedded in another outer block.    Note, that all the characters edited form HTML tags except one string. This string is called "text". HTML files are composed of two entities, "tags" and "text".    Our next task is to "center" the presentation of our "text" in our single cell TABLE.    Let's edit in the "alignment element" in our "table data" tag. Align Next Prior Top

View Background File: http://www.passco.com/images/bordersample.gif Exercise 9 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the align=center element in the TD tag. Let's Save the file by clicking the "Save Icon".

Align Next Prior Top Page 16 - Table Borders    Did you notice that all the characters in our file were previously in UPPER CASE, except for our "text" string (This is a Sample File), and the last entry, "align=center".    HTML text strings are case independent, except for some special characters substitution. HTML tags ignore space strings of more that one space. So, the "space chatacter" is defined as   (in lower case characters).    What is the significance of the indentation of blocks .... nothing but a visual presentation for viewing the "boxes-within-boxes" structure of HTML coding. Programmers use indentation to visually "see" the logic of the code.    Well, let's place a border around our table. Add the "border=5" element to the TABLE tag.    The only other HTML tag the can be bordered are "graphic images". Align Next Prior Top

View Background File: http://www.passco.com/images/lightbluesample.gif Exercise 10 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the border=5 element in the TABLE tag. Let's Save the file by clicking the "Save Icon".

Align Next Prior Top Page 17 - Coloring Tables Here, the author has "bordered" all five TABLE blocks, and defined a specific color to each table. The outer TABLE(#1), in "lightgreen", has one row and two columns. . The left column (the SideBar), is shown with a line of four red links (Align ... Top). Followed by an "khaki" colored one row and one column TABLE(#2). Inside the khaki table is a "white" TABLE(#3) with a "1x3" structure. The khaki table is followed by four red links. . The right column of the outer "lighgreen" table contains a top line with one black text string and a red colored link. It is followed by a one "cell" TABLE(#4), whose background image is a graphic. Within that cell is a "gainsboro" colored TABLE(#5) containing our Exercise 11. Let's color our file's table with a "bgcolor=lightblue" element. Align Next Prior Top

View Background File: http://www.passco.com/images/centersample.gif Exercise 11 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the bgcolor=lightblue element in the TABLE tag. Let's Save the file by clicking the "Save Icon".

Align Next Prior Top Page 18 - Alignments On this page the "borders" of the five tables have been set to zero pixels. But, the colors are were maitained. The five tables are: The lightgreen 1x2 table. It is left justified on the page's "wheat" background. The gold 1x1 table. Its width is 100% of the Sidebar column. The white 1x2 "pagenation table. It is 95% the width of the Sidebar table, and it is "centered" in that array. The graphic in the right column if table #1, is not evident. The table's "background" is the graphic. This permit the last table to overlay the image. The "Exercise #12" table is a "right justified" 1x1 array with a "gainsboro" color. Lets place our table in a "center" block. Align Unit3 Prior Top

View Background File: http://www.passco.com/images/bgsample.gif Exercise 12 Read all instructions first. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter (again, if necessary). Edit in the <CENTER> tag. Edit in the </CENTER> tag. Let's Save the file by clicking the "Save Icon".

"Web Mastering at Affordable Prices"  PASSCo.COM

Updated: