-EJ- Engineering Assistance

HTML

HTML is not hard to grasp. There are those who attempt to explain it and make it seem a lot more difficult than it really is. Basically there are two main principles to make use of: tags and attributes. Tags are enclosed by < and > and basically define functions, actions, properties. Attributes are enclosed within tags and define properties associated with them. The basic layout of an HTML document is: <html><head>content</head><body>content</body></html>. Look at the tags and attributes, see what they do, and the rest is up to your imagination to decide how to use them. Experiment! But if you are going to know HTML, you should learn CSS as well. CSS is not covered here because there’s too much stuff for that.

TAGS AND THEIR ATTRIBUTES

PRIMARILY TEXT RELATED

<b> - makes text bold. Ex. <b>text</b>

<big> - one font size bigger. Ex. <big>littlebigger</big>

<div> - for content, use mainly with CSS. Ex. <div>text and more text</div>

<font> - for text. Ex. <font>Wowee</font>

color="black or 000000" – color may be written as word or hexadecimal

face="type of font" or, face="type of font, type of font, etc" – this way browser has more than one type of font to choose from

size="number"

<h1> to <h6> - makes different size text, h1 smallest. Ex. <h6>Big Yay!</h6>

<i> - makes text italic. Ex. <i>text</i>

<nobr> - does not wrap the text around the page. Ex. <nobr>Hoopa</nobr>

<ol> makes numbered list. Ex. <ol><li>stuff</li><li>morestuff</li></ol>

<li> - use within <ul> for bulleted list. Ex. <ul><li>stuff</li><li>morestuff</li></ul>

type="a, A, i, I, or 1" – type can be used within <ol> and <li>

a – lowercase letters

A – uppercase letters

i – lowercase roman numerals

I – uppercase roman numerals

1 – arabic numerals

<pre> - preformatted text, shows text how you type it. Ex. <pre>I t w i l l d i s p l a y w i t h a l l t h e s e s p a c e s</pre>

<s> - strikethrough. Ex. <s>strikethrough</s>

<small> - one font size smaller. Ex. <small>littlesmaller</small>

<span> - for content, use mainly with CSS. And, does not generate a break. Ex. <span>stuff and more stuff</span>

<sub> - subscript. Ex. <sub>low</sub>

<sup> - superscript. Ex. <sup>high</sup>

<tt> - monotype, or monospaced. Ex. <tt>monotype</tt>

<ul> - makes bulleted list. Ex. <ul><li>stuff</li><li>morestuff</li></ul> (also see <ol> / <li> )

type="disc, circle, or square" – type can be used within <ul> and <li>

disc – solid circle

circle – hollow circle

square – solid square

<wbr> - breaks text where you want. Ex. <nobr>notbroken <wbr>andbroken</nobr>

NOT NECESSARILY TEXT RELATED

<a href> use to place whatever file you want in a webpage and allow activation by text or an object. Ex. <a href="filename.ext">Clicking on this text opens the file. You can also place an image or another object in place of this text, go to the img tag</a>

<body>

bgcolor - background color. Ex. bgcolor="FFFFFF"

text - text color. Ex. text="008800"

link – color of unvisited links

alink – color of link as it is clicked

vlink – color of link after it has been visited

background – sets background image. Ex. background="nugget.jpeg"

<br /> - create break in text.

<center> - centers text or object. Ex. <center>centered</center>

<frameset> - use instead of <body> in other words, don’t include within body, Ex. <frameset>content</frameset>

rows="number, number, etc" – sets rows (can also use percentage)

cols="number, number, etc" – sets columns (can also use percentage)

<frame> - set frame, Ex. <frame src="document.html">

frameborder="0 to whatever"

scrolling="yes / no"

<noframes> - sets content if frames cannot be displayed, Ex. <noframes><body>content</body></noframes>

<head> - necessary part, goes after <html> and before <body>

<title> - essential part, displays title of document in the top of window. Ex. <title>thetitleofdocument</title>

<basefont> - sets document-wide settings for font, use same as font tag with color, face, and size attributes. Ex. <basefont color="0000FF" />

<hr /> - makes horizontal line

noshade

size="number" – sets thickness of line

<img> - images. Ex. <img src="gifimage.gif" />

align="top, bottom, middle" – sets positioning of text w/ respect to image

<map> - image map. In order to use <map> you must also have an <img> tag. OK this is how you do it: first give the map name and id attributes, where name and id will be the same. The name and id connect to the image that will be used for the map. Within the <img> tag give it the attribute usemap="#name and id of <map> tag desired". You must include the # symbol. Next…

<area /> - defines a hot spot desired. You must use at least one.

shape="rect, circle, or poly" required, sets shape of hot spot

coords="numbers" required, coordinates for the hot spot. Coordinates format is different for each shape attribute. The following formats are how the numbers should be entered for each shape in the cords attribute:

for rect – left-x, top-y, right-x, bottom-y

for circle – center-x, center-y, radius

for poly – x1, y1, x2, y2, … xn, yn

href="filename.ext" – required, sets the file to be activated for the hotspot

<table> - makes table

<caption> - information shown above table

<td> - sets data, <th> - sets headings. Put these within <tr> if there are multiple rows desired. Ex. <td>content</td>

colspan="number of columns" – widens th or td into additional columns

rowspan="number of rows" – widens th or td into additional cells

<tr> - sets rows, make sure <td> or <th> goes within <tr>

bgcolor="FFFFFF" - background color, use for table, tr, td, or th.

bordercolor="color" – color of table border

cellpadding="number" – sets spacing between data within cell and cell border

cellspacing="number" – sets width of border between cells

NON-SPECIFIC ATTRIBUTES

accesskey="key on keyboard" – so you can access by pressing button on keyboard. Use for most anything

align="left, center, right, justify" Use for most anything

alt="texttext" – text which displays in place of object if object cannot be shown by browser. Use for most anything

border="0 to whatever" – adjust image border (for images or tables)

height="number" – sets height

id="name" – use in relation to target

marginheight="number" – sets top margin (Netscape only)

marginwidth="number" – sets left margin (Netscape only)

name="name" – use in relation to target

leftmargin="number" – sets left margin (IE only)

tabindex="number" – sets the order in a tabbing sequence through a document

topmargin="number" – sets top margin (IE only)

target="name or id" – sets target for which activity to occur, use for frames or in general. Use for <a href>, <area>

_blank – load page into a new window, Ex. target="_blank"

_self – load page over current location, Ex. target="_self"

_parent – load the link over the parent location, Ex. target="_parent"

_top – load the link over all the locations in the window, Ex. target="_top"

title="yesyesyes" – shows the little caption when you place your cursor over text or object. Use for <img>

valign="top, middle, bottom, baseline" Use for <img>

width="number or percentage" Use for <hr>, <img>, <table>, <tr>, <td>, <th>

CHARACTERS

  - makes space