The Basics of HTML Code

9 October 2008

HTML stands for HyperText Markup Language. It’s not really a programming language like Java, Perl, C, or BASIC– it’s much simpler. It’s a way of describing how a set of text and images should be displayed to the viewer, similar in concept to a newspaper editor’s markup symbols.

http://www.jmarshall.com/easy/html/

Though you never need to use HTML code, there are opportunities for you to choose to employ the code rather than stick to WordPress’s settings. Think of it like driving manual instead of automatic.

You only need to know a few codes to be able to fix/ format those annoying little things like line spacing and the photo positioning. You never have to deal with tables— WordPress does all that formatting for you (and won’t actually allow tables).

IMPORTANT: You must remember to “close” most tags (i.e. use end tags). For example, if you want a word(s) in italics, you need to place the code for italics before the word(s), and the same code again preceded by a slash at the end of the word:

<i>italics</i>

If most of your page suddenly appears entirely in bold or italic, then you’ve probably forgotten an end code (with the slash) somewhere.

Below is a list of the simplest HTML code. Leave me a comment if you want to know more, or Google “basic html”.

<i>italics</i> or <em>italics</em>
<b>bold</b> or <strong>bold</strong>
<u>underline</u>

Create lists as either ordered (i.e. number):

<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>

Or unordered (bulletpoints):

<ul>
<li>1st bulletpoint</li>
<li>2nd bulletpoint</li>
<li>3rd bulletpoint</li>
</ul>

Create links to other websites (or posts on your blog):
<a href=”http://website URL”>The Text People Will See As the Link</a>

Create text to appear when the mouse passes over a link
<a href=”http://website URL” title=”This website is good”>The Text People Will See As the Link</a>

Some code does not require an end code. Some examples:

<br> Creates a line break
<p> Creates a paragragh break (a space between paragraphs)
<hr> Creates a horizontal rule (line)
<hr size=”5″> Creates a thicker horizontal rule (line)

Link to another part of the page— use if you want refer to info elsewhere on a long page, or take readers Back to Top:

This link…
<a href=”#top”>Any text you want</a>

…takes you anywhere on this page where you have placed:
<a name=”top”></a>


WordPress for Dummies

30 March 2008

Read the review . . .Yes, now there is “the book”.
Read the review here . . . >

There is heaps of free “how to” stuff on the internet, and on WordPress itself, but for those who still like to thumb through pages, this book could be for you.

(I must admit to owning “the Idiots Guide to Creating a Web Page”– it looks lovely over there on the shelf . . .)


Summary of the Online Workshop

27 February 2008

Thanks to all those who participated in the online workshop in Term 4 last year.

If you’re anything like me, I’m still trying to catch up with some things from Term 4!

Fortunately, Merryn has put together this handy, easy-to-follow SUMMARY OF THE BLOGGING WORKSHOP. So, if you want the quick, quick version, check out Merryn’s update

Happy blogging! I’m still happy for people to contact me with questions.


Adding a slideshow

4 December 2007

If you have a running series of photos you want to display, there are a couple ways to do it.

The easiest, I’ve found, is to use Slide.com. Visit WordPress’s FAQ page to learn more . . . or

This is what you will do:

  1. Go to Slide.com
  2. Sign in or get a FREE account
  3. Upload photos— you can upload a whole bunch at a time
  4. Customise your slide show— styles, skins, themes . . .
  5. When you’re happy, SAVE and get code— the code with be in square brackets. You can go back and edit your slideshow at any time.
  6. COPY the code onto your post or page
  7. Then is appears, like this one I did (with a bit of a sepia/ 8mm theme):

    I’ve also found it useful for concert posters:

    They are different sizes because I changed the width and height settings in the code. the first one is “w=426&h=320” and the poster is “w=280&h-240”


Posts & pages—what’s the difference?!

26 November 2007

Learn how to Add & Edit a Post on your blog . . .


A post is a topic of conversation which usually appears on the front page of your blog. Readers then add comments about that post—you’ll end up with a string of comments on that topic. When a new topic arises, its time for a new post—but readers can still comment on any post. Remember “blog” comes from “web log”—so a blog is basically an online journal for everyone to read.

Have a look at Waimea Senior Music , a student-administered site, to see the latest conversation piece there–a slideshow farewell from one of our international students

A page is something that you want to keep static on your blog. For example, WordPress automatically gives you an “About” page, assuming that you want to tell others about you or your group. Other pages might be a “Contact” page if you are looking to be found or a “Resources” page if you want to add things that your kids will refer to often.

Have a look at the Belle a Cappella Videos and mp3s page as an example.

Readers may be able to comment on pages if you choose to give them that option. Learn how to do this under Add & Password-Protect a Page


Hey, I’ve got a question for Chris…

26 November 2007

How secure is all this? Who can get access?
If I set up a page for my seniors how do i make sure only they have access?
Can I password some things?


Changing the look of your blog

22 November 2007

If you haven’t worked it out for yourself yet, here are some step by step instructions on Howto: Change the look of your blog.

You will learn to:

  • Change the theme– choose from a large number of preset themes that can totally change the feel of your blog
  • Add a header picture– choose one of your own pictures to remain at the top of your blog at all times
  • Work with widgets– your list of links is a widget, as is your calendar and you list of pages. These can all be moved around on the side of your page, or swapped for other more interesting widgets!

There are many different types of widgets. To learn more about what they do, visit the FAQ page at WordPress.com


Add a link to your blog

20 November 2007

I’D BE HAPPY TO WALK YOU THROUGH IT!– i’ve just discovered how to use WINK software to create tutorials. Check out “Howto: add links” to go through a step by step tutorial— more of these to come!


add a linkGreat to see people starting to play with this site. Please continue to add links to your blogs— whether blog-in-progress or blog-of-the-century let’s see it.

Once you are an administrator, you can add a link:

Visit Sarah’s blog: ICTPD and Personalising Learning at TCS

  1. Go to the DASHBOARD
  2. choose BLOGROLL
  3. click ADD LINKS
  4. add the NAME (what will appear on the site), the URL (copy this from the top of your blog page) and a DESCRIPTION (what appears when your mouse goes over the link
  5. be sure to add your link to the correct CATEGORY– create a category if you don’t want it to appear under “Sample Blogs”