Basic HTML Tricks for the Wizard
From HostBaby Wiki
I'm going to try and compile a list of basic HTML code snippets for everyone to use. We've covered most of this in other posts, but I thought I'd try to get a cohesive list going here. Naturally you'll have to change the links and the image locations for YOUR site, but these should work great.
Let me know if you want me to add anything to this list. Smile
Contents |
Line Breaks
Go to the next line:
this text is on the first line<br>this text is on the next line.
which results in:
this text is on the first line
this text is on the next line.
New paragraph:
Code:
this text is the first paragraph.<br><br>this text is in the next paragraph
which gets you:
this text is the first paragraph.
this text is in the next paragraph.
Linking
A basic HTML link:
<a href="http://hostbaby.org/">Hostbaby User Forums</a>
You can use a basic HTML link to link to a page, a file (a song, a pdf, tablature, whatever). Really anything that can be linked to.
Just substitute "hostbaby.org" for the URL (internet address) of your choosing
And insert whatever text you like for "Hostbaby User Forums" and that will become the clickable text.
A link that opens in a new window:
<a target="_blank" href="http://hostbaby.org/">Hostbaby User Forums</a>
Images
Display an Image The code is :
<img src="http://website.com/images/mypicture.jpg">
Where "website/images/" is the domain path where the photo is located.
"images" is the folder where the image is located in your website and
"mypicture.jpg" is the name and *file extension of your image.
Anything you upload via the wizard can be added to your product page like this.
<img src="yourwebsite.com/images/xxxx.jpg">
Just insert your domain name, and the filename of the photo and **extension instead of "xxxx"
It's also good to name your files (before you upload them) in all lowercase with no spaces. This makes the linking easier.
An Image that IS a link:
Code:
<a href="http://red-lantern-band.com/"><img src="http://red-lantern-band.com/images/michelebaby-208x177.jpg"></a>
- A file extension is the kind of file. In this case ".jpg"
Fonts
Using a font face/size tag to control the appearance of text :
To change the font type:
<font face="Trebuchet MS, Impact">Hi friends</font>
(It's good to specify a 'backup font' in case the first font is not supported by a browser, hence we added 'Impact' after the comma.
Here we've specified, font color, font size and font type:
<font face="Trebuchet MS, Impact" size="5" color="navy">This text will be large, navy blue and Trebuchet font.</font>If you simply want to increase the size of a font from it's default size you can use
size="+1"
Bolding:
<b>This would be bold</b> and this would not.
EX: This would be bold and this would not
Italics
<i>this would be italics</i> and this would not.
EX: this would be italics and this would not.
Using a font face/size tag to control the appearance
<font face="Trebuchet MS, Impact" size="5" color="navy"><marquee>Here is another way to scroll words across the screen!</marquee></font>
==The Scrolling Marquee== (as seen here): Code:
<marquee>Here is another way to scroll words across the screen!</marquee>
Links Back To You
Put a banner on your page and provide the code for folks to link back to you:
Code:
<textarea cols="65" rows="2"><a target="_blank" href="http://hostbaby.com/"><img src="http://www.red-lantern-band.com/images/hostbabylogo.jpg"></a></textarea>
By using that <textarea> business, you can have the code showing on the page without the wizard 'eating' the HTML and just displaying the banner a 2nd time. Of course you have to change the href="" and the img src="" parts to refer to YOUR site instead of mine, but if you do, it should work great. This is a bit complex, feel free to email me on any of this for help. Smile
This is a really great website for learning Basic HTML tricks http://w3schools.com
