Home Up Contentsimages/1-3ML.tif

GRAD Engineering LLC

 

HTML beginners guide

I know very little about HTML but that has never stopped a Professor before.  I needed to learn a little HTML and here is what I learned.  First I edited other peoples HTML to see how it works. I copied a HTML file into notepad edited it / save it then open it with internet explorer to see what changed.  

HTML <commands> use "<" and ">"    
HTML commands usually have a <start> and </stop>.   
Using word pad or any text editor: do not type RED comments!

<HTML>We want to use HTML

<HEAD>Header

<TITLE><My first></TITLE>Title of page, not seen

</HEAD>Not header (turn off header)

<BODY>This is the body or main part of the page.

<!-- If you need to make a comment don't use red-->

<P>Type something here.</P>

</BODY>End of body

</HTML>End of HTML

 Type something here.
<HTML>We want to use HTML

<HEAD>Header

<TITLE><My first></TITLE>Title of page, not seen

</HEAD>Not header (turn off header)

<BODY>This is the body or main part of the page.

<P>Type something here.</P>

<P>Start a new paragraph here. This line could be really long then stop the paragraph.</P>

</BODY>End of body

</HTML>End of HTML

 Type something here.

Start a new paragraph here. This line could be really long then stop the paragraph.

 
<HTML>We want to use HTML

<HEAD>Header

<TITLE><My first></TITLE>Title of page, not seen

</HEAD>Not header (turn off header)

<BODY>This is the body or main part of the page.

<P>Type something here.</P>

<P>Start a new paragraph here. This line could be really long.  <BR> but if we use the BR command then we get a new line inside the paragraph. Then stop the paragraph.</P>Most people use <BR> at the beginning of a line but in the HTML code it can be placed any where. 

</BODY>End of body

</HTML>End of HTML

 Type something here.

Start a new paragraph here. This line could be really long.
but if we use the BR command then we get a new line inside the paragraph. Then stop the paragraph.

 
<HTML>We want to use HTML

<HEAD>Header

<TITLE><My first></TITLE>Title of page, not seen

</HEAD>Not header (turn off header)

<BODY>This is the body or main part of the page.

<P>Type something here.</P>

<P ALIGN=LEFT>This should be to the left. </P>

<P ALIGN=CENTER>Text is often <BR>centered</P>

<P ALIGN=RIGHT>Text on the right</P>

</BODY>End of body

</HTML>End of HTML

 Type something here.

This should be to the left.

Text is often
centered

Text on the right

 
<HTML>

<HEAD>

<TITLE><My first></TITLE>

</HEAD>

<BODY>

<P>Type      something            here.</P>White spaces mean nothing. If you want space use &nbsp;

<P>Type &nbsp;&nbsp;&nbsp;&nbsp;something &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;here.</P>

</BODY>

</HTML>

 Type something here.

Type     something         here.

 
<HTML>

<HEAD>

<TITLE><My first></TITLE>

</HEAD>

<BODY>

<H1> Heading 1</H1>

<H2> Heading 2</H2>

<H3>Type something here.</H3> Use H1 through H6

</BODY>

</HTML>

Heading 1

Heading 2

Type something here.

 
<HTML>

<HEAD>

<TITLE><My first></TITLE>

</HEAD>

<BODY>

<H1><center> Heading 1</center></H1>

<P>Some times you need <B>bold</B> and some times you don't.  Some times you need <I>italicized</I> text.  Then there is <STRIKE>strike through</STRIKE> text.  What about <U>underlined</U> text.  Once I wanted to get it <SUP>up</SUP> but I really wanted to get it <SUB>down</SUB>.  There is also <BIG>big</BIG> and <SMALL> small</SMALL>.</P>

</BODY>

</HTML>

Heading 1

Some times you need bold and some times you don't. Some times you need italicized text. Then there is strike through text. What about underlined text. Once I wanted to get it up but I really wanted to get it down. There is also big and small.
<HTML>

<HEAD>

<TITLE><My first></TITLE>

</HEAD>

<BODY>

<H1><center> Heading </center></H1>

<P><FONT SIZE="1">This is font size 1.</FONT> </P>Note: turn font on and off.

<P><FONT SIZE="2">This is font size 2.</FONT> </P>

<P><FONT SIZE="3">This is font size 3.</FONT> </P>

<P><FONT SIZE="4">This is font size 4.</FONT> </P><P><FONT SIZE="5">This is font size 5.</FONT> </P><P><FONT SIZE="6">This is font size 6.</FONT> </P><P><FONT SIZE="7">This is font size 7.</FONT> </P>

</BODY>

</HTML>

Heading

This is font size 1.

Note: turn font on and off.

This is font size 2.

This is font size 3.

This is font size 4.

This is font size 5.

This is font size 6.

This is font size 7.

 
<HTML>

<HEAD>

<TITLE><My first></TITLE>

</HEAD>

<BODY TEXT="#000000" BGCOLOR="#FFFFFF">black text, white back ground

<H1><center> Heading </center></H1>

<P>If you do not understand HEX numbers then go here: HEX <P>

<P>Your color monitor makes colors by adding three colors together.  RED GREEN and BLUE.  In HEX FF is the biggest 8 bit number and 00 is the smallest number.<P>

<P><FONT COLOR="#FF0000">Red is full on while Green and Blue are off. </FONT><FONT COLOR="#00FF00">Green is full on.</FONT><FONT COLOR="#0000FF"> Only Blue is on.</FONT><FONT COLOR="#FFFF00"> Red + Blue = Yellow.</FONT><P>

 </BODY>

</HTML>

 

Heading

If you do not understand HEX numbers then go here: HEX

 

Your color monitor makes colors by adding three colors together. RED GREEN and BLUE. In HEX FF is the biggest 8 bit number and 00 is the smallest number.

 

Red is full on while Green and Blue are off. Green is full on. Only Blue is on. Red + Blue = Yellow.

 
<HTML>

<HEAD>

<TITLE><My first></TITLE>

</HEAD>

<BODY TEXT="#FFFFFF" BGCOLOR="#000000">

<H1><center> Heading </center></H1>

<P>This in normal text.<P>

<HR>Horizontal rule

<P><TT>This text is mono spaced like a typewriter makes.</TT>

 </BODY>

</HTML>

Heading

This in normal text.

 

This text is mono spaced like a typewriter makes.

 
<HTML>

<HEAD>

<TITLE><My first></TITLE>

</HEAD>

<H1><center> Heading </center></H1>

<P>We have some text here then a line and a picture.<P>

<HR>

<IMG SRC="USBcable.jpg">But what is we want the picture centered with a border.

<CENTER><IMG SRC="USBcable.jpg" border=10></CENTER>

 </BODY>

</HTML>

 

Heading

We have some text here then a line and a picture.

 

But what is we want the picture centered with a border.

 

 
<HTML>

<BODY>

<table border="1" width="100%" bgcolor="#000000">

<tr>
<td width="33%"><b><p align="right"><font color="#FFFFFF">
<img Src="seg_blank_horz.gif"><img Src="seg_grn_horz_1.gif"><img Src="seg_grn_horz_1.gif"><img Src="seg_grn_horz_1.gif"><img Src="seg_grn_horz_.1gif"><img Src="seg_yel_horz_1.gif"><img Src="seg_yel_horz_1.gif"><img Src="seg_red_horz_1.gif"><img Src="seg_red_horz_'.gif"><img Src="seg_blank_horz.gif">
</font><b/>
<P><TT>Text here.</TT><P>
</font>
<td width="34%"><p align="left">
<img Src="meter.gif"><br>
<img Src="meterblank.gif"width="52" height="8"><img Src="meterARM.gif"width="3" height="16">
</font>
</tr>

</BODY>

</HTML>

 Sorry I can not get a table to work inside a table.

If you go to EXAMPLE you can see what this table looks like.

You can set FONT COLOR and BGCOLOR. <TB BGCOLOR="#000000">

Table size cand be set in pixels, percent or left automatic.

Notice some of the pictures have their size set not left automatic.

<TABLE BORDER=10>

 

More when I have more time!