HTML cheat sheet

Friday, November 2, 2007

HTML cheat sheet

OVERVIEW

For those who are new to HTML before you feel overwhelmed lets learn a couple basics and try to disprove the thought "Only compter programers can learn HTML". Lets think of it this way. If you go into this thinking it is unlearnable or that you may be untechable, throw those thoughts away and remove the biggest barrier to learning....... what I call the "I can't do that" thoughts. We all have the ability to be the little train that could but before that we must believe we can. So here is some easy to learn HTML that you can add to comments or your multiply (section headers/titles see the marquee code usedat top of my web sites page) to dress them up a bit. If you learn HTMl gradually you will find the more you try it the better you get, and the more you will remember / retain.

insert text here
insert text
The strong and b commands (also called TAGS) both make text bold. you need a start tag and a stop tag the start looks like  and the stop looks like  (notice the stop comand has a / before the command text) the text you want to bold will be between the start and stop commands. (also could be called the begin and end commands)

So basicly you create these html commands with your desired text or pictures. Then copy it and paste it into comments or other sections of your web page or blog.

HTML is basic web programing / formating. You are creating commands that will tell the computers how and what to display.
====================================================
Links to valueable HTML resources

Here is a link to some Common HTML Codes
Here is a link to Color codes change color of text
More HTML help web sites: http://www.computerhope.com/learnhtm.htm#a
(a very good and easy to understand help site)

Link to CSS Reference css is style sheets for formating a web page. Cascading Style Sheet - instructions format whatever you put up, although your instructions may be overridden by the site (sometimes, appending !important helps). CSS instructions are entered inside an HTML STYLE tag.
Other Refernce Link: http://www.mandarindesign.com/style.html
=====================================================
CHEAT SEVEN

Setup html for adding a picture with "alt text" and if you click the picture it opens a link to a web address in a new window. hight and width can also be changed

Example:
<A href="http://ianbach.multiply.com/music/item/74" target=_blank><IMG height=200 alt="The Clash - London Calling" src="http://ianbach.com/images/london-calling-744583.jpg" width=201></A>

Preview:

<A href="http://choose a web link address" target=_blank><IMG height=200 alt="choose the text to display when mouse is over the image" src="http://choose the pictures address" width=201></A>

NOTE: the alt text (which will appear when a mouse is over the picture) is used by browsers to add content into search engine results. i.e. use alt text to improve search engine rankings.

You can add the <center> ( start command ) </center> ( stop ) or <marquee>
=====================================================

CHEAT SIX - IMAGE COMMANDS / HTML

Example - Basic image html command with size and alt text.
<img src="http://images.ianbach.multiply.com/image/5/photos/7/600x600/6/uss-constitution.jpg?et=BomZab1DfouQXP5dm7OOMw" alt= "still image of the USS Constitution" width="200" height="122" /> - notice how this command is all within one tag < >. at the end of the tag is the /> indicating end HTML command. The picture I am using was one I added to my photos. I went to the photo clicked it to open to the lage view and did a right click with my mouse over the picture. A menu will come up and choose "properties" at bottom of the small menu (window). A window will pop up telling you information. There you will see address (URL) mine said http://images.ianbach.multiply.com/image/5/photos/7/600x600/6/uss-constitution.jpg?et=BomZab1DfouQXP5dm7OOMw so I copied that info and pasted it here into the html image code. Also that same windows tells me the image's size is 600 x 367. So I want to make it one third that size. 200 x 122.

Preview:

On this one I wondered why was it centered? I didnt enter anything to center it in the html I pasted. Well I looked (see the edit html button up top right?) I normaly put a ???????????? before I click edit html so i can see where I am at. Well there was this command (before my html) and (after my html). the command is Paragrapgh. So what the commandd does is to tell the web browser that this is a paragraph with center alignment.

More Image Commands

Example - Here I changed the image size and stretched it.
<img src="http://images.ianbach.multiply.com/image/5/photos/7/600x600/6/uss-constitution.jpg?et=BomZab1DfouQXP5dm7OOMw" alt= "still image of the USS Constitution" width="600" height="122" />

Preview

Example - Enter a Link
<img src="http://ianbach.com/images/anke-edit.gif" alt= "moving image of Cleric in Everquest the Game" width="150" height="160" />
This is a moving image

Perview

Note that the html codes for inserting a moving image is no different from that of a non-moving image.

Lets add <marquee> </marquee> codes before and after the picture html

More image html command help CLICK HERE

Click Here for a cool website where you can edit a sample html and click preview

===============================================

CHEAT FIVE - Basic Commands / HTML

Example: <CENTER> - Tells the web browser to center the text.

<CENTER>This text would center on the page.</CENTER>

Preview:

This text would center on the page.

More Basics

Example - Change color of text
 Enter text here 

Preview
Enter text here

Example - Enter a Link
<a href="http://www.ianbach.com">enter link name or description here</a>

Perview
enter link name or description here

Example - Lets look at how to combine HTML codes.

black or default color text entered here Blue colored text entered here black colored text continued here.

Preview

black or default color text entered here Blue colored text entered here black colored text continued here.

Example - Ok now we will see what happens if we add another command and mix the start and stops throughout the text. Each command starts when you tell it when and where to start and stops when you tell it to.

black or default color text entered here black text in italics Blue text in italics Blue colored text entered here black colored text continued here.

Preview

black or default color text entered here black text in italics Blue text in italics Blue colored text entered here black colored text continued here.

================================================

CHEAT FOUR - Marquee

Create a banner text that scrolls across the text box.

This command <marquee> text </marquee> is very cool thanks to andreym24 for the cool new addition to this fun Blog I use it often. I come back here copy my old commands, edit them up a bit, and woot. makes it easy so I don't have to think about it much. I just copy, paste, and edit. Thanks to all those who have contributed, and to those who find this to be a usefull tool.

<marquee>Text Here</marquee>

<Marquee>test</marquee>

=======================================================

CHEAT THREE - Edit Text
Here I want to explain how to edit your text using HTML. This will give you more flexability and enhanced features / abilities. Also you can use this in comments and other areas that do not give you editing options. Most of the options used here are available in the Blog entry features.

Let's start with something basic.

Text Here

ok the Font size is the hieght of the text and the line hieght is the spacing plus text. So for double spaced text you would type 28 (in the line-height area) for a font-size of 14.
---------------------------------------
Here is a more advanced text edit and HTML

Preview

<div style="text-align:center;">Insert Text Here</div>

All the above areas to edit are pretty easy but lets see what we have.
NEW** = you can enter left right or center
You can use the (paragraph define tag / code) instead of the div command / tag

* <div style="text-align:position"> = you can enter left right or center
*  = Bold
*  = italics
* Insert text here = sutitute this text for the text you would like to enter.
* Size= this is a more basic sizing method then the above mentioned method
* <Color= I will try and make a color chart for different comonly used colors. The above color command is dark Blue.
** Notice how you have a begining and end HTML commands. Stuff like - goes before the text and goes after the text. Notice how the HTML command after has a / that is to indicate the close or end of the command.

Example

Insert Text Here

Preview

Insert Text Here

============================================================

CHEAT TWO - New Turtle
I wanted to edit my st HTML test and change the pisture and alt text and the href (linl)

For now I saved a turtle today and will be watching him close and am currently working to find out what food and stuff I need for him. My friend bought a house nearby and the old pool had been a koi pond. He had the pool drained so I stopped by to grab the turtles. One is already missing and hopefully he is lucky enough to find a new home.

Here is a pic of the little guy.

===========================================================

CHEAT NUMBER ONE
How to create a picture using html. (the picture will have alt text, href, and other cool things. (explained below)

I will be updating this as I regain some of the knowledge I have forgotten or haven't learned yet.

http://ianbach.com/images/artclimber.jpg

If I want to display that image file as a picture lets start with a HTML picture from my dot com that has alt text and also if you click the picture it sends the user somewhere.

Second Edit

ok I had to publish the post so that I could get the link for this specific blog entry

http://ianbach.multiply.com/journal/item/181/HTML_cheat_sheet

ok now we have to edit that mess and lets first see what is above

Here is a more simple view of the above html

ok heref means if this is where you go if you click.

target = blank (i think means open in a new window)
Please correct me when I am wrong also hehe I don;t mind at all, I love when I can learn and I am open to input

the width and height is in pixels and you can picture the size based on your current screen size. Most people run theirs by default at 800 x 600 or 1020 x 780 something like that so time to use those fractions eh hehe.

ok so lets see if this works

I want to send people back to this blog entry so I published it then went back to edit.

Now I can copy open the blog entry's link
http://ianbach.multiply.com/journal/item/181/HTML_cheat_sheet

I want this for my Picture
http://ianbach.com/images/artclimber.jpg

and if that's not enough I want text to pop up when a courser goes over the picture here is the text I will add:
Hello all from Ian Bach -------------I will you can click here to view my HTML CHEAT SHEET -------------- I will be working on this for a while and updating it as I find new tricks I have forgotten. I hope you find it to be a useful tool

here is how it looks after I edit

now I will try it

(check comments to view the tests - examples)

-----------------------------------------------------------

well it worked but it is a little large eh??

ok lets go back and this time edit the height and width instead of deleting that text (which makes the picture go to default / original size)

here is my next attempt which will try and make it a size that won't get people made if I post it. hehe

ok lets try that size now - (see comments for the results)

-----------------------------------------------

ok woot it worked roflmao

here lets add a thick boarder the higher the number the thicker the boarder should be

lets try

---------------------------------------------------------------

oops just noticed the "alt" text has a typo

so lets try this

-----------------------------------------------

51 comments:

Add comment

Counter Insurgency Blog - Syria, Iraq, & Afghanistan - Since 2007

Pages

Search This Blog

Friday, November 2, 2007

HTML cheat sheet

Preview:

Example: <CENTER> - Tells the web browser to center the text.

Preview:

51 comments: