HTML CODES

Subject: HTML CODES February 27th 2011, 1:47 pm

Hey guys! So a while ago I decided to make a list of HTML codes.
Just for those of you that don't really know proper basic coding.
So here ya' go!

IMAGES:

Code:: <img src="URL TO IMAGE GOES HERE">

RESIZING IMAGES:

Code:: <img src="URL TO IMAGE GOES HERE" width="200" height="200">

Change the "200"s to whatever size in pixels you want.

IMAGE LINKS:

Code:: <a href="LINK URL GOES HERE"><img src="IMAGE URL GOES HERE" alt="YOUR HOVER TEXT GOES HERE"></a>

IMAGE LINKS OPEN IN NEW WINDOW:

Code:: <a href="LINK URL GOES HERE" target="_blank">
<img src="IMAGE URL GOES HERE" alt="YOUR HOVER TEXT GOES HERE"></a>

TEXT FONT:
Font Name: Century Gothic | Font Name: Comic Sans MS | Font Name: Impact

Code:: <font face"YOUR FONT NAME HERE">YOUR TEXT HERE</FONT>

Here is a list of web-safe fonts: Web-Safe Font List

Code:: <font color="YOUR COLOR NAME OR NUMBER HERE">YOUR TEXT HERE</font>

Here is a HTML color picker: HTML Color Picker

BOLD FONT:
This Font is Bold!

Code:: <b>YOUR TEXT HERE</b>

UNDERLINE FONT:
This Font is underlined!

Code:: <u>YOUR TEXT HERE</u>

ITALIC FONT:
This Font is italic!

Code:: <i>YOUR TEXT HERE</i>

STRIKE-THROUGH FONT:
~~This Font is strike through!~~

Code:: <s>YOUR TEXT HERE</s>

TEXT LINK:
This is a Link

Code:: <a href="YOUR LINK URL GOES HERE">YOUR TEXT GOES HERE</a>

TEXT LINK OPENS IN NEW WINDOW:
This is a Link

Code:: <a href="YOUR LINK URL GOES HERE" target="_blank">YOUR TEXT GOES HERE</a>

ALIGNING TEXT:

This Text is Left

Code:: <p align="left">YOUR TEXT HERE</p>

This Text is Centered

Code:: <p align="center">YOUR TEXT HERE</p>

This Text is Right

Code:: <p align="right">YOUR TEXT HERE</p>

ALIGNING IMAGES:

Code:: <p align="left"><img src="URL TO IMAGE GOES HERE"></p>

Code:: <p align="center"><img src="URL TO IMAGE GOES HERE"></p>

Code:: <p align="right"><img src="URL TO IMAGE GOES HERE"></p>

CREATING A BREAK:
This is some text and below this is a break.

This is some text and above this is a break.

Code:: <Br>

CREATING A HORIZONTAL LINE:
This is some text and below this is a line.

This is some text and above this is a line.

Code:: <hr>

CLICK-ABLE BUTTONS:

Code:: <FORM METHOD="LINK" ACTION="YOUR LINK GOES HERE">
<INPUT TYPE="submit" VALUE="YOUR BUTTON TEXT GOES HERE">
</FORM>

SIMPLE SCROLL BOX:

Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!

Code:: <div style="height:200px; width:200px; overflow:auto; border:1px solid gray;">
YOUR TEXT/IMAGES GOES HERE
</div>

Change the "200"s (size) and border size, style, and color to whatever you want.
Different border styles include: dashed, dotted, double, and solid.

ADVANCED SCROLL BOX:

Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!Hi, this is a scroll box, text or images go here!

Code:: <div style="overflow:auto; height: 200px; width:200px; font-family:century gothic; font-size: 14px; color:000000; line-height:10px; border: 2px dotted pink; border-color:000000;">
YOUR TEXT/IMAGES GOES HERE
</div>

Change the "200"s (size), font, font size, font color, line height, and border size, style, and color to whatever you want.
Different border styles include: dashed, dotted, double, and solid.

MARQUEE:

Code:: <marquee>YOUR TEXT/IMAGES GO HERE</marquee>

If you guys want any other codes, such as creating a table, divs, different marquee directions, speeds, and codes, CSS style properties, anything, just say so and I'll add it to the list. :)

Subject: Re: HTML CODES February 27th 2011, 1:49 pm

Updates:

2/28: Click-able button added :)
2/27: Marquee added :)

Guest

This is awesome Evie thanks I was wondering about some of this stuff

Subject: Re: HTML CODES February 27th 2011, 5:06 pm

Thanks Evie, this is very handy !! happydance

Subject: Re: HTML CODES February 27th 2011, 6:39 pm

I thought maybe some people could use it Smile

Thanks guys Razz

Subject: Re: HTML CODES February 27th 2011, 10:49 pm

I'm def going to use some of this. Some I know, but I didn't/don't know the scroll part and I'm still learning the 'click here to enlarge' thing. I'm wondering how to make my text 'blocked' like writing a story or something and you want it to look pretty evened out.

Also...I know about the 'break' but what if I want more space than that one break, how can I adjust that?

Subject: Re: HTML CODES February 27th 2011, 10:54 pm

I'll look into the text thing for you cece, as for the break, I usually just use multiple break codes next to each other to get more spaces in between text. :)

Subject: Re: HTML CODES February 27th 2011, 10:58 pm

So like I would do

instead of
and that would give me more space? And do it side by side? Maybe that's what I did wrong. I tried to place the

Like this and it did nothing.

Subject: Re: HTML CODES February 27th 2011, 11:29 pm

Well, you can place them side by side, top and bottom, as many as you like, and it should keep adding up, the more you use the bigger the space will become.

Guest

thankyou evie this is gonna be so helpful.... hiho

Guest

these have been a big help. thanks Evie. Smile

XX

Subject: Re: HTML CODES May 2nd 2011, 10:29 pm

I'm confuzzled on a few...maybe after I eat it will become easier to understand. Only a few...so I will have to study them, try them out, and practice practice practice. Thanks Evie hun and thanks for keeping this updated!! hiho

Guest

I use this almosr everyday, I would be so lost without it, thankyou Evie you may just be a little angel sent to cstyles to help hiho

Subject: Re: HTML CODES May 3rd 2011, 4:39 am

I know, some I know already...but some I don't and I love learning new things!!! Gonna have a few hours and just sit at my comp and practice a few! And to think I went to college for this and still don't know enough!!! Of course I guess it would have mattered had I actually finished the course!!! Lol!! Sometimes it's just hard to make a major decision about a life career!! hand dance