Embarking on part 2 of my learning adventure....HTML

I am doing this blog completely in HTML

I have to say that I have been looking forward to this blog, I have always been keen to explore HTML further and I am glad that this blogging platform allows me to experiment this further. So I have set myself a challenge here to write this blog completely in HTML and demonstrate a few things I have learnt so far.

This blog should hopefully show you how to:

1. Create a heading
2. Create a paragraph
3. Create a list
4. Add a link
5. Create a table
6. Embed a Google calendar

• Create a heading

The code for 'heading is "h"'. So when you write your heading the code should start with < h1 > ( make sure you remove the spaces, I had to include spaces so that it would appear in the blog). The number next to the h represents the heading format which usually incorporates the font, size and colour of your web template design. My blog design uses the colours black, grey, blue and peach so the heading formats will incorporate this as well as the font.

Heading 1

Heading 2

Heading 3

Heading 4

• Create a paragraph

Like heading, the html code for paragraph is "p" or < p >. As you probably have noticed, at the end of each line or heading, you will see the code repeated but with a forward slash "/" or < / p >.

• Create a list

There are a couple of codes that can be used to create a list, I am only going to show you 2 (simple stupid). One list is called the ordered list or < ol > (or a numbered list as we know it) and the other is an unordered list or < ul > (the bulleted one, remember simple stupid).

Ordered list < ol >

1. Create a heading
2. Create a paragraph
3. Create a list
4. Add a link
5. Create a table
6. Embed a Google calendar

< /ol >

Unordered list < ul >

• Create a heading
• Create a paragraph
• Create a list
• Add a link
• Create a table
• Embed a Google calendar

< /ul >

• Add a link

This is one aspect of HTML that has been made easier by Google and other blogging platforms. Now it is possible to just write the word/s you want displayed, highlight it with your mouse, click on the LINK or HYPERLINK (usually represented by a chain link) button and it brings up a section to enter the weblink and then press OK and you are done! So nice and neat compared to writing out the whole link, we all know how nasty and long those links can be. But I am doing this all in HTML and I thought I better learn it just in case. The code for adding a link is "a" followed by "href=" which I understand this to mean hyperlinkreferenceequals and then you add the destination of where you want to go.

So I am going to add the links of where I learnt most of this stuff. This site is so good, it has mini tutorials about what you want to achieve. I have added this as a bookmark to my Delicious account and maybe I'll start tweeting and yammering away about it it's that good! Maybe my waters will break........ok too far.

w3schools.com Gotta check this out!

• Create a table

Becoming a bit more creative now and ambitious. I thought I would create a table that includes the codes and description of what I have learnt and have covered so far in the blog. I hope this works.

Codes or Tags used so far:

Code or Tag	Description
< h1 >, < /h1 >	Headings
< p >, < /p >	Paragraphs
< ol >, < /ol >	Ordered list (numbered)
< ul >, < /ul >	Unordered list (bulleted)
< a, < /a >	Add a link, this can be used to add a web link when used with "href" or "id" which is a bookmark within the link
< table >, < /table >	Add a table
< tr >, < /tr >	A table row
< td >, < /td >	A table cell

• Embed a Google Calendar

Just a little trick I learnt from a colleague a few weeks ago when I was working on a project and I thought I would share this one because it shows how awesome Google is when you put two of their elements (Google calendar and Google Blogger) together. I went and created a calendar just for Doc Man1 that only specifies the times of the lecture and tute. I didn't include location or anything specific because this calendar has to be public to everyone for it to work. (I am slightly satisfied at the fact that you can make something so public but unless people know about it it's not.) The beauty of this is that I can update the calendar at anytime and any changes are reflected on here. Cool huh.

Marziah Karch (2013) has blogged instructions on how to do this here.

• My learning curve

I am quite shocked that this has taken me 3 days to complete! This was a great task for me, I learnt that this is an exercise that requires patience and trial and error. My biggest surprise was that through the time spent physically writing code is extremely important and worth knowing. I feel that I can take this knowledge into any position. I didn't mind that blogger provided pop-up warnings whenever HTML didn't make sense, I took it as an opportunity to stop and make a cup of tea. I found that trying to embed an image in html code was the most time consuming and shocking experience, but worth mentioning as you can see in the blog there are images all over the place. Trying to size an image in pixels is horrible, but I know this is an area that I can try to improve. All I can say is thank goodness Google have made the sizing and alignment process easier to use.

As I look at the preview for the last time before I publish this, I can't help but laugh at the alignment of the images of my blog and the spacing of added links and paragraphs that have somehow gone awry but don't know how to fix because the spacebar doesn't seem to speak HTML. But I guess this proves that it was all HTML in its most rawest form.

Please let me know if you need any clarification, happy blogging! Liz

References

Karch, Marziah 2013 "How to Embed Google Calendar on a Website or Blog" - http://google.about.com/od/toolsfortheoffice/ss/embedCalendar.htm

W3schools.com -http://www.w3schools.com/