Monday, March 24, 2014

Teach yourself HTML: Part 4 Tables

This Multi-Part series will teach you the Beginnings of HTML. HTML Has many applications, from creating webpages, to .hta files to even formatting blog posts how you want.

These lessons are simple, easy to follow, and critically will remain relevant going forward. You can find the previous parts of the series:


For Addtional Resources, try HTML5: Up and Running or The Definitive Guide to HTML5 

4.1 Tables
This entire section is devoted to one element of html. This element is the table. It can be used to display scientific data or for page layout. It should be noted that people who use text only browsers, such as lynx, are incapable of displaying tables, so they arrange the table verticly, the first column on top of the second, the second column on top of the third and so on.

Table Setup

Tables are defigned useing the <TABLE></TABLE> tags. Between these tags go the tags that tell the browser how to display the data. The <CAPTION></CAPTION> tags go dirrectly bellow the <TABLE> tag. This tag tells the browser what the caption of the table should be. Next is the table row tag <TR></TR>. This tag defigns the rows. The tags that defign the individual cells that make up the columns go between the starting and ending tags. All of the table rows are defigned useing this tag. To defign individual cells you use the table defign tag <TD></TD>. The exception to this rule is if you want the cell to serve as a caption for the collumn, in wich case you would use the table heading <TH></TH>
tag to define the cell.

Sample Table

Below you will find a table that shows what each line of code does . The table has 2 rows and 2 columns with a caption.

<TABLE>
<CAPTION>The Caption</CAPTION>
<TR>
<TH>1stRow 1stColumn</TH>
<TH>1stRow 2stColumn </TH>
</TR>
<TR>
<TD>2stRow 1stColumn </TD>
<TD>2stRow 2stColumn </TD>
</TR>
</TABLE>

This will give you something that looks like this:
The Caption
1stRow 1stColumn 1stRow 2stColumn
2stRow 1stColumn 2stRow 2stColumn

Table Attributes

You can set the background color of the table, row, or individual cells by inserting the BGCOLOR attribute as described in lesson 4 to the <TABLE> tag, the <TR> tag, the <TH> tag, and to the <TD> tag. In the <TABLE> tag you can also set the border thickness useing the border attribute. The default is 1, 0 is no border. An example of this is showen below:

<TABLE BORDER="0"></TABLE>

an example of adding color to a cell is showen below

<TD BGCOLOR="BLUE"></TD>

You can aso set the alignment of the table in the <TABLE> tag to either left, center, or right. Also you can set the width of a table, cell, or row by adding the width attribute to any of these elements. Any width attribute can be expreesed as a percentage of screen size or as a fixed number of pixals. An exampl show ing the alignment and width of a table is below

<TABLE BORDER="0" ALIGN="CENTER" WIDTH="75%"></TABLE>

I should also mention the COLSPAN= and ROWSPAN= attributes. these attributes are applied to the <TD> tags and allow that cell to span the specified number of rows or columns. this is handy for tabular data, where multiple cells can be grouped.

In the example below, we span the first row, and the first column. The code

<TABLE >
<TR>
<TH >1stRow 1stColumn</TH>
<TH COLSPAN=2>1stRow 2ndColumn COLSPAN=2 </TH>
<!-- skip spanned column -->
</TR>
<TR>
<TD ROWSPAN=2>2ndRow 1stColumn </TD>
<TD>2ndRow 2ndColumn </TD>
<TD>2ndRow 3rdColumn </TD>
</TR>
<!-- skip spanned row -->
<TD>3rdRow 2ndColumn </TD>
<TD>3rdRow 3rdColumn </TD>

</TR>
</TABLE>

Produces the following table:


1stRow 1stColumn 1stRow 2stColumn COLSPAN=2
2stRow 1stColumn
ROWSPAN=2
2ndRow 2ndColumn 2ndRow 3rdColumn
3rdRow 1stColumn 3rdRow 3rdColumn


It should be worth noting that most tables have also been replaced by CSS, especially for page layout. that said, tables are still valid, and quick and easy to do.

Teach Yourself HTML: Part 3 Colour and Graphics

This Multi-Part series will teach you the Beginnings of HTML. HTML Has many applications, from creating webpages, to .hta files to even formatting blog posts how you want.

These lessons are simple, easy to follow, and critically will remain relevant going forward. You can find the previous parts of the series:


For Addtional Resources, try HTML5: Up and Running or The Definitive Guide to HTML5 

3.1 Default Colors
HTML allows you to set the color of just about every element. Objects that allow you to do this include:
· Backgrounds
· Text
· Borders
· Tables
· The Document Itself


adding color is accomplished using the color attribute in tags. The default colors for the page however go in the body tag and have their own special attribute. Colors can defignd using either names or hex codes. Values for both of these can be found in the appendix at the back.

It should be noted that most webpages use cascading style sheets to control colour.

Default Link Color
In html there are three types of links. Links (link) which havent been visited, Active links (Alink) which are being loaded, and Visited links (Vlink) which have been visited. All three can have different colors. The colors are set in the body tag with the value equal to the color code. For example

<BODY LINK="#008000" VLINK="#FF0000" ALINK="blue">

The caracters in the quotes are the color codes set in hexidecmal. This allows you to create any color you wish just by changeing the charachters. Note that the pound sign ( # ) is allways required. Also the ALINK is set using normal words as an alternative to the codes. This method is easier but offers less control then the hex code method

Text Color
HTML also allows the default text color to be set in the body tag. This is done the same way as the links only the attribute is TEXT . the example below shows how it is set

<BODY TEXT="#000000">

Background Color
HTML also allows the default background color to be set in the body tag. This is done the same way as the links only the attribute is BGCOLOR . the example below shows how it is set

<BODY BGCOLOR="white">


3.2 Object Color
Any object that can have a color can be set using the COLOR attribute. The COLOR attribute can be added to the font tag, horizontal rules, headings, and many other objects. It should be noted that a tag can have more than one attribute assigned to it. We will demonstrate its placement in the font tag, as that is where it is most commonly used

<FONT SIZE="-2" COLOR="white">

the color attribute is added like any other attribute to any tag

3.3 Inserting Graphics In the Document
To insert a graphic in a web page you use the the <IMG SRC> Tag. There is no closing tag for this tag. The tag also lets you set the graphic size and alignment. The basic tag would appear as:

<IMG SRC="filename.gif">



The Height and Width atributes can be used to set the size of an image, either larger or smaller. These are set by setting the attribute to the number of pixals you want that dimentions to appear. So a tag that sets the height to 120 and width to 60 would look like:

<IMG SRC="filename.gif" HEIGHT="120" WIDTH="60">



The align attribute allows you to set the location of the picture to text and other objects. Possible properties this attribute can accept include:
· Top
· Bottom
· Middle
· Left
· Right
· Center
An image aligned to the left would appear as:

<IMG SRC="filename.gif" HEIGHT="120" WIDTH="60" Align="Left">

Images as links

Images can also be used instead of text for a link. This is done by placeing the image tag where the text would normaly appear. To identify the image as a link a blue border will appear around it. The code would look like:

<A HREF="link.html"><IMG SRC="filename.gif"></A>



To remove the border around the image that identifies it as a link, set the border atribute to 0 in the image tag. The link above without a border would look like:

<A HREF="link.html"><IMG SRC="filename.gif" BORDER="0"></A>

As a Background

Html also allows you to set images as a background for your page. For example if the topic of the page is spiders then you can set the background of the page to be a spider web. Backgrounds can be set for a number of objects includeing

· tables (covered latter in the book)
· the document itself

To set the background of a document you add the background attribute to the body tag with its value set to the filename:

<BODY BACKGROUND="filename.ext">

Teach Yourself HTML: Part 2 Links

This Multi-Part series will teach you the Beginnings of HTML. HTML Has many applications, from creating webpages, to .hta files to even formatting blog posts how you want.

These lessons are simple, easy to follow, and critically will remain relevant going forward. You can find the previous parts of the series:

Part 1
For Addtional Resources, try HTML5: Up and Running or The Definitive Guide to HTML5 

2.1 Links to Other Pages and Files

One of HTMLs greatest powers is the ability to link pages togeateher through a piece of text called a hot link or link. When the link is clicked it will bring you to a different document, a different section in the same one, or to a completly diferent web site. All links use the same basic code, the HREF tag which looks like <A HREF=“”></A>. The filename of the link goes in between the quotes ant the link text goes between the first and second tags. A link to a different web site would look like:

<A HREF="http://www.somewhere.net/here">This is A link</A>

A link to another file on your sit would look like:

<A HREF="myfile.html">This is also a link</A>


2.2 Mail and News Links

You can also use a link to to go to a newsgroup or send email. To use an email link in the quotes you would use a mailto statement followed by the email address. A newsgroup link would use NEWS instead of mailto. An email link is showen below:

<A HREF="mailto:myemail@me.com">email me here</A>

A newsgroup link looks like the sample below:

<A HREF="NEWS:comp.lang.javascript">comp.lang.javascript Newsgroup</A>

Mailto links are pretty common. Almost nobody uses Newsgroups anymore, having been replaced by social media and web forums.

2.3 In Document Links
Links can also be used to jump to a previous or later part of the document. This is done by first createing a named anchor and then linking to it. A named anchor tells the browser where to go when the link calls it. A named anchor looks like

<A NAME="anchorname">Text</A>

A named anchor’s text is ussualy a section heading but can also be a key word. Their is no change to the text in a named anchor. Text is not even required for a named anchor but it is good style to use it. A link to a named anchor is the same as to a file except that you would use the pound and then the anchorname instead of the file name as showen below

<A HREF="#anchorname">go to text</A>

if you wish to link to that exact spot from a different document then all you have to do is add the documents filename where the anchor is contained so the tag looks like

<A HREF="filename.html #anchorname">go to text in filename</A>

Teach yourself HTML

This Multi-Part series will teach you the Beginnings of HTML. HTML Has many applications, from creating webpages, to .hta files to even formatting blog posts how you want.

These lessons are simple, easy to follow, and critically will remain relevant. going forward.

For Addtional Resources, try HTML5: Up and Running or The Definitive Guide to HTML5

1.1 HTML Conventions
HTML has very basic conventions that are easy to learn and use. Every tag has a corresponding closing tag. The closing tag will always contain a forward slash ( / ) to signify that that is what it is. Your page will not look correct if you leave out the closing tag. Also it is considered to be good style to type all your code in uppercase letters except for filenames which are allways typed in lowercase letters. This makes it easier to see against the text to be displayed on the page. Filenames should also always be in quotes“” as should all atributes. Also in the case of different spellings for words, use the American spelling e.g. use color not colour.


1.2 Basic Page
Every HTML document has several basic elements common to all documents. These tell the browser information on how to display the page. Typically these include the HEAD, BODY, and TITLE tags, as well as those that identify the specific type of document. The basic code for a web page should look like:

<HTML>
<HEAD>
<TITLE>This is the title of the page displayed in the browsers title bar</TITLE>
</HEAD>
<BODY>
The body of the document is inserted between the body tags
</BODY>
</HTML>


1.3 Text FormattingParagraphs

HTML has several methods to format text. First there is the paragraph tag <P></P> used to identify the beginning and end of a paragraph. The <P> goes at the beginning of the paragraph and the </P> signifies the end of the paragraph.

Headings


HTML allows for the use of six different size headings. These headings are of various sizes and usually are bold text . These headings would be coded as

<H1></H1> Largest Heading
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6> Smallest Heading

Heading one is larger then heading two and so on.


Fonts


HTML allows for the use of multiple colors and true type fonts. These are used with the font <FONT></FONT> tag. The attribute size is used and is specified as a number between -4 and +3 including +0. The attribute is entered with the positive or negative sign, so a tag for a +1 font size would look like:

<FONT SIZE="+1">The text to be affected goes here</FONT>

For how to use color please see the color chapter later in the book

Logical Style vs. Physical Style

Logical and Physical Styles are two different ways to set the appearance of text in a HTML document. Logical style tells the browser what is being done and the browser figures out how to display it. Logical tags are

<DFN></DFN> Definition
<EM></EM> Emphasis
<CITE></CITE> Titles of books, videos, media, etc.
<CODE></CODE> Computer code e.g. Visual Basic, C++, C, HTML
<STRONG></STRONG> Strong Emphasis



There are others however they are rarely used. Physical style specifically tells a browser what to do to text, bold and italics. Logical style should not be used with physical style and physical style should not be used with logical style in the same document. Physical style has tags such as

<BLINK></BLINK> Blinking text
<SUP></SUP> Supper Script
<SUB></SUB> Sub Script
<B></B> Bold
<I></I> Italics
<TT></TT> Typewriter Text

Miscellaneous Formatting

There are two other text formating tags used. The <PRE></PRE> tag will display text with spaces and alignment exactly as it is typed. The <BLOCKQUOTE></BLOCKQUOTE> tag is used for lage quotations, the quote going between the starting and closeing tag. The blockquote can also be used to give a margin to a whole page, just place the starting tag under the body tag, and the closeing above the end body tag.
To center text use the <CENTER></CENTER> tag. You place the text inbetween the opening and closeing tags. The line break tag <BR> and the horizontal rule <HR> are the excption to the rule. These tags have no closeing tag. The line brake tag is used to cause the browser to skip a line, and to continue to display the text on the next line. The horizontal rule tag is used for createing a line accross the page as a divider or section break

Lists

One of the best ways to layout data is with a list. Lists have several varieties but 2 out of three are very simalar. The 3 types of lists are

· unordered (bullets)
· numbered (numbers)
· definition



for numbered and unordered lists each element uses the line item tag <LI></LI> the text for the list goes between the two tags. The unoredered list elements are placed between the <UL></UL> tags and the numbered list is placed between the <OL></OL> tags. For example bellow is a small unordered list

<UL>
<LI>First item</LI>
<LI>second item</LI>
</UL>
the ordered list is exactly the same except that you replace the <UL></UL> Tags with the <OL></OL>
A Definition list is a bit different it requires more tags. You put the list elements between the <DL></DL> tags. The term to be defigned has the <DT></DT> Definition term tag and goes between the opening and closeing tags the definition itself goes between the <DD></DD> Definition tags. You can make the term and deffinition be on the same line by adding the compact atribute to to the <DL> tag so it looks like <DL COMPACT>

VB Script to work with windows environment variables

Some applications require that a folder be added to the path environment variable to find DLL's or configuration Files. this is as simple as Calling the path, then Appending a ; and thenewpath to it.

 Set ObjWsh = WScript.CreateObject("WScript.Shell")   
 Set WshEnv = objWsh.Environment("SYSTEM")   
 WshEnv("Path") = WshEnv("Path") & ";C:\PathTo\Add"  

there are 2 types of environment variables we can use - User and System. User apply only to the current user, Whereas System are system wide. the Line WshEnv=objWsh.Environment("SYSTEM") creates the WSHEnv Object set to system - so when we call the Path variable in the next line, it is the system path, and not the user path we are returning.

In this example, to append a folder to the path, we set the Path WshEnv("Path") equal to itself + the & (amperstand concatenation string) and the string we want to add (Prefixed with a semicolon, which is the Separator used in the path Variable) ";C:\PathTo\Add" (N.B to enclose this in Quotes since its a literal string)