kunoichi

A blogger’s guide to HTML

In Blogging, Uncategorized on March 13, 2007 at 10:22 pm

Blogs are great: they are easily customised with templates and layouts; you don’t have to input code each time you want to make an entry; even links and images are coded for you automatically!

But there may be a time when you want to customise your blog personally: add something to the navbar; a colour-coded post; a photo album with thumbnails…

Knowledge of some basic html coding is a very useful tool for bloggers (and even for MySpace users too!). Web design programs are fine if you like to use them, but may prove somewhat tricky when trying to adapt code to paste into a layout or post. With a bit of html, you can easily transform your blog into something unique, interesting, and even easier to use. So here’s a quick guide to HTML code and links to useful sites where you can find out more:

Contents:

Formatting
Images
Links
Tables
Changing font styles
Colours
Adding sound
Free graphics, sounds and add-ons
Links to other useful sites

Formatting:

Most blog clients have a formatting feature built in to the post editor. But if you want to
align text in the navbar for instance, you will have to do this yourself.

To create a paragraph (with spaces automatically inserted between paragraphs), you would
insert the following code:

< p > Your paragraph of text here < /p >

By default, text is aligned within a paragraph to the left. The code for this is as follows:

< p align=”left” > Your paragraph of text here < /p >

To align text to the right hand side of the page, you would add code like this:

< p align=”right” > Your paragraph of text here < /p >

And to centralise:

< p align=”center” > Your paragraph of text here < /p >

You can also use this simpler code to centralise text, images, tables, etc:

< center > Text/image/table/etc here < /center >

To insert a line break (no paragraph space), use this:

< /br >

Line breaks can be useful if you don’t want text to be beneath an image instead of following
on at the side.

Horizontal rules can also be useful in design. You can insert a simple horizontal rule across the available space in the page like this:

< /hr >

Which looks like this:

To make the horizontal rule span only half of the page, try this instead:

< hr width=”50%” >


You could align it to the centre of the page:

< center > < hr width=”50%” > < /center >


And you can even change the colour and thickness!

< hr width=”50%” color=”ff0000″ size=”10″ >


Images:

Okay, so most blog programs (eg: WordPress, Blogger) already have a built in feature to let
you insert images into your post. But you can’t always define size, whether or not they have
a border, or link to another site.

Inserting an image using html is simple using this code:
< img src=”http://websitename/yourimage.jpg&#8221; >

yourimage.bmp

If you wish to use an image which is already online, you can insert the image path (the URL)
of the image in place of what I have written above. The image will then appear with the same
dimensions as it is stored. So if the image online is 300px wide, it will be 300px wide on your blog.

How about changing it’s size (if it is too big to fit inside your navbar, for example)? Then
you can use something like this instead:

< img src=”http:websitename/yourimage.jpg” width=”200″ height=”100″ >

This would then resize the image to 200x100px instead. Of course, you can change these values to whatever you require.

Would you like to make an image link to another page or website? Try this:

< a href=sitename.html > %lt; img src=”yourimage.jpg” >

forums

This produces an image which links to the page “sitename.htm”. It will have a border around it in the same colour as your links usually appear (depending on your blog’s style). If you prefer not to have a border, insert border=”0″ into the image code as follows:

< img src=”yourimage.jpg” border=”0″ >

You can also wrap text around an image. Simply insert the image code within the body of text
you want to wrap around it. Then add align=”left/right/center” (delete as appropriate) to the image code. Here is an example:

< img src=”yourimage.jpg” width=”200″ align=”right” >

which aligns the image to the right of the text like this: forums

You may wish to add the name or a description of the image within the image code, for the benefit of browsers which cannot display images, or as an added comment to the image. Put your curser over the image below to see an example:

an example of Image 'alt' feature

You can insert this into the image code as follows:

< img src=”yourimage.jpg” alt=”example text” >

Links

Basic links are simple, and usually appear as a feature in blogging platforms. However, there are some interesting features you can use with links, such as linking to different areas of the same page (or different areas of another page entirely!).

The basic html code for a page link is as follows:

< a href=”pagename.html” > Your link text here < a >

You can change the link text to anything you want, such as My Link, or LOOK HERE!.

Let’s suppose you want to link to a different part of the page. Here is where “anchors” come in handy…

You can create an anchor to the top of a page as follows:

At the top of your page, insert this code: < a name=”#top” >

Then wherever you want to provide a link to the top of your page, use something like this:

< a href=”#top” > Back to top < /a >

Save your work and try the link out: you should be taken to the top of the page. You can change these values to link to different areas of a page (as you may have already noticed in this post). Be careful to always insert the “#” symbol and to end the link with < /a >
otherwise you may find the whole page is linked!

If you want to link to another page which includes anchor links as part of the make-up, use something like this:

&lt a href=”yoursite.htm#top” which will link to the top of the page called “yoursite.htm”

You can input links to email addresses in order for readers to send you an email directly from your blog or site. Rather than using the “http” address, you would use “mailto:your@address.com” like this:

< a href=”mailto:your@address.com > Your email link < /a >

Tables

Tables come in very handy for arranging the layout of a post. Though they may seem complex,
they are actually quite easy to use. For example, to create a simple 4×4 square table, use the following code:

< table >
< tr >
< td > One </td>
< td > Two </td>
< /td >
< /tr >
< tr >
< td > Three </td>
< td > Three </td>
< /td >
< /tr >
< /table >

Which will create the following table:

One Two
Three Four

You can customise your table in many different ways, including the background of each cell (the “td”), the colour of the border, and so much more!

For a great guide to html tables, try Cedge’s HTML Cheats.

Changing font styles

You can change the style and color of the font appearing on your blog. To make text bold or italic, use the following codes:

< b > Bold Text < /b >
< I > Italic Text < /i >

To change the color of text, use the following code:

&lt font color=”red” > Red Text < /font >

You can change “red” to any other colour, such as purple, yellow, blue, green.
Alternatively, you can use hex colours as I will describe below.

Colours:

You can use almost any colour in the spectrum to make your fonts, backgrounds, tables etc.
more colourful. To do this, you will need to enter the hex code for the colour and implement as follows:

< font color=”ffcc00″ > Your font colour < /font >

This inserts golden yellow text, but you can use any colour you wish. Hex colours are comprised of six digits which include the numbers 0-9 and A-F. Black, for example is “000000” and white would be “ffffff” For a complete list of web colour codes, try Cedges Colour Code applet, which is great for previewing colours too!

Sounds and background music:

To add background music to a post, use the following html code near the top of the page:

<bgsound=”http://sitename/yourmusic.mp3″&gt;

substituting “yourmusic.mp3″ for the name and location of your music file. This code will play the music file only once. To loop the music file, use the folowing code:

<bgsound=”http://sitename/yourmusic.mp3&#8243; loop=”infinite”>

You may be able to insert this code into an individual post to be played when the post is on screen. Having background music for the whole site involves inserting this code into your blog’s template; your blog client user guide should help you find out how to do this.

Free graphics, photos, banners and sounds:

Here are some of the best sites I have found for free blog/website graphics, photos, banners, sounds and various add-ons:

FlamingText.com:

A truly great site for generating your own banners, headers, buttons (including mouseover buttons), clip-art, templates, backgrounds and more.

GUIstuff.com:

Features some fabulous website addons; generated flash images; design tools and much more.

StockXchng

Find thousands of copyright free stock photos for your site, all free to download. On this site, you can find almost anything you could possible need, and new photos are being added every day. Extremely useful!

Clip-art.com

Features dozens of links to free clip-art sites.

Freesound

Find hundreds of copyright free sounds and special effects to download for your site here.

Cedges HTML Cheats

This basic site is great for information about HTML coding, and features a wonderful section about web colours including a java colour codes generator. Ideal for those beginning to learn HTML.

GUI

Coding, formats and standards for the HTML user.

Kunoichi Tags: , , , , ,

Technorati Tags: , , , , , , , ,

Advertisements
  1. Thanks a million for these tips and guides…
    I needed it. (:

  2. Hi My Name Is ivaihh.

  3. That’s helpful, thank you.
    Although I still can’t figure out how to wrap text in Blogger (it’s a code that doesn’t fit into a singe line).

  4. The adynamic car lease prices magician seriously polar its hind on chrysler afresh since relentless consumers necktie shifted to phs affluent cars with real mileage.
    http://www.erobees.biz/car-loan-washington-dc/map.html All she firmly do is ask, and i’ll car lease it to her.

  5. medicaid for braces…

    adult tacitly adornment …

  6. upated real time gaming casinos no deposit bonus…

    gaily,plebiscites!attenuated.reassignment exaggerates …

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: