[oescripting] Helper Stationery for Lesson 1 and 2

HTML/CSS Positions
 1st script CodeDivisionsImagesleft positiontop positionbottom positionright 
positionHtml TagsHtml AttributesStyleHorizonal CenterVertical Center 
Instructional Stationery on Html and Positions 

This is an instructional stationery that I am hoping will assist you in 
understanding the codes that you are learning in Lesson 1 - 2. To navigate push 
the buttons and read the text in the text box for the codes and explanations. 
Click the buttons in order and if you need to go backwards, start the stat over 
again. 

The main html elements you need to include in every script are the opening and 
closing html tags, opening and closing head tags, opening and closing body 
tags. These tags tell the script that we are writing an html document. Every 
html tag must start and end with greater than and less than symbols. 

Click the first button for a look at the starting script codes. It doesn't 
matter whether you have it on the same line or different lines with spaces 
because the symbols are what interpret where a tag begins and ends. 
<html><head><title></title></head>
<body>
</body>
</html> Adding a division 

Divisions are tags that also need to have an opening and closing tag to specify 
the beginning and the end. We can position the divisions by using a style 
attribute to apply some style and give the division a height, width, background 
color and absolute positions. 

Notice that there are no equals signs used for the division because there are 
only 1 or two attributes that work with divisions. Instead we use style to 
format the divisions. Divisions need to have an opening and closing tag. <div 
style="position:absolute; left:20px; top:20px; background-color:blue; 
width:300px; height:300px;">
Text here
</div> Adding Images 

To add images to our scripts we use the img tag. As of this writing, you are 
not required to use a closing tag for the img tag and can have as many as you 
need inserted inbetween the opening and closing body tags. 

The yellow square image is placed 100 pixels from the left and 100 pixels from 
the top of the screen to show you a sample. 

The second coding below is the background attribute you can add to your body 
tag to insert a background image for the page. This should be a seamless image. 
<img src="file path" height="32px" width="32px" style="Position:absolute; 
left:100px; top:100px;"> 

<body background="path to background"> Left position 

To position an image or a division at the left top position, you may use the 
coding shown below. This is the default position where a position is not 
specified so if you are going to place it here you do not even have to use the 
style coding. 

See the blue square for the placement of the image when coded this way. <img 
src="file path" style="position:absolute; left:0px; top:0px;"> Top position 

To position an image or a division 100 pixels from the top of the screen, you 
may use the coding shown below. <img src="file path" style="position:absolute; 
left:0px; top:100px;"> Bottom Position 

To position an image or division 10 pixels from the bottom of the screen, you 
may use the coding shown below. <img src="file path" style="position:absolute; 
left:0px; bottom:10px;"> Right Position 

To position an image or division 10 pixels from the right and bottom of the 
screen, you may use the coding shown below. <img src="file path" 
style="position:absolute; right:10px; bottom:10px;"> HTML Tags 

HTML tags always begin and end with greater than and less than symbols. Some 
tags require a closing tag and others do not but all tags that you may want to 
add to the basic script will be placed inside of the opening and closing body 
tags. <img src="">
<div>Text here</div> HTML Attributes 

Html Attributes will always need to have an equals sign following them and they 
can be placed in most tags with the exception of the division tag that only 
recognizes the align attribute. You should try to place the value of the 
attribute in double quotes to make sure your script will read the attributes 
sucessfully and remember not to accidentally delete the ending greater than 
symbol for the tag when you insert attributes. 

Below are some of the attributes you have starting using in your scripts. 
background="" - to specify a background image 
bgcolor="" - to specify a background color 
Width="" - to specify a width for images. 
Height="" - to specify a height for images. Style Properties 

Style is unique because it does not use equals signs the way html attributes 
do. We always enclose style properties inside of double quotes and separate the 
style property (keyword) and the value for that property with a colon. Once we 
have completed one property and value, we use a semi-colon so we can keep 
adding more properties. We follow this method throughout whenever we work with 
style inside of an html tag. style="position:absolute; left:10px; top:10px;" 
style="width:100px; height:100px; background-color:#000000;" Center 
Horizontally 

You can center an object horizontally by taking the width of the page (your 
screen resolution width) and subtracting the object width (either an image or 
division), divide it by 2 and use this pixel number as your left position. 
style="position:absolute; left:496px; top:your choice;" Center Horizontally 

You can center an object vertically by taking the height of the page (your 
screen resolution height) and subtracting the object height (either an image or 
division), divide it by 2 and use this pixel number as your top position. 
style="position:absolute; left:your choice; top:368px;"

GIF image

GIF image

JPEG image

BEGIN:VCARD
VERSION:2.1
N:;nobody
FN:nobody
EMAIL;PREF;INTERNET:nobody@xxxxxxxxxx
REV:20060619T032110Z
END:VCARD

Other related posts: