HTML basics
Postad den 28 Jan 2009 vid 23:36

As you may have noticed while posting articles and blog entries, you can use HTML to enrich your content. I thought I'd post a basic introduction to HTML (HyperText Markup Language) for those who are interested, and I'll write this in English so that everyone can partake of this information ;)

I wont explain how to make full HTML documents, only how to use HTML while posting on massivedamage.se or other HTML enabled venues.

HTML 101:


HTML consists mainly of things called Elements (a.k.a "Tags"), an element is surrounded by angle brackets (chevrons). Here's a simple element:
<ELEMENT>

That's just an example of how an element can look like, it doesn't actually exists in the HTML namespace and would be ignored by your webbrowser.

This element is a standalone element, however elements can also have a closing tag.
Example:
<ELEMENT></ELEMENT>

Notice the forwardslash in the closing tag, this marks that the effect of this element shall end there. Elements can also contain attributes. Attributes are included in the opening tag but never in the closing tag, also; the values of attributes should be enclosed in either single- or double-quotes:
<ELEMENT attribute="value">
and/or
<ELEMENT attribute="value"></ELEMENT>

Let's learn some HTML!


Before we continue let me just clarify that HTML elements are cAsE iNsEnSiTiVe; you can use upper- or lower-case, but it is recommended to use lower-case as XHTML (a markup language similar to HTML) is strictly lower-case.

Ok, now that you know how an element looks like let's have the real deal; here's 3 HTML elements:
<B>BOLD</B> makes text bold.
<I>ITALIC</I> makes text appear italic.
<U>UNDERLINE</U> gives the text an underline.

These elements consist of a starter tag and an ending tag, pretty straightforward stuff. Elements can also be nested:
<B><U><I>All 3 combined</I></U></B>

When nesting elements they must be closed in order, as shown above.
Let's continue with styling text with HTML. Let me introduce to you the following element:
<FONT></FONT>

With this element you can change the size and color of your text with the use of attributes, it's quite straightforward:
<FONT color="red" size="6">Big red text</FONT>
<FONT color="#0000FF" size="2">Small blue text</FONT>

The value of the size attribute ranges from one to seven, one being the smallest size and seven being the largest. Color can be described in either common color words like "red", "blue", "lightgrey" or, for more precision, you can use hexadecimal color coding, e.g. "#AB5F8D", "#000000" etc.
Try www.colorpicker.com when you need hexadecimal colors.

The next step


Alright, now that you've mastered the art of styling text let's move on to some more advanced HTML; I bring to you Lists, Images and Hyperlinks!

Let us begin with lists. In HTML there are two types of lists; ordered and unordered lists:
<UL></UL> An empty unordered list.
<OL></OL> An empty ordered list.

To add listitems into the list we use the ListItem element:
<LI></LI>

Result:
<UL>
<LI>Banana</LI>
<LI>Apple</LI>
<LI>Geometrid</LI>
</UL>

Gives:
  • Banana
  • Apple
  • Geometrid

<OL>
<LI>Banana</LI>
<LI>Apple</LI>
<LI>Geometrid</LI>
</OL>

Gives:
  1. Banana
  2. Apple
  3. Geometrid

Great stuff! Let's move onto Images:
<IMG src="mypicture.jpg" alt="A picture of my pet geometrid">

The image element has two attributes, namely src which stands for "source" and alt which stands for "alternative text".

The src attribute points to the image you want to display e.g. "myface.gif", "pictures/wedding.jpg", "http://www.funstuff.com/pics/lit_match_at_gasstation.png". The alt attribute should contain a description of the image, it's used in browsers that do not support/has disabled images, both attributes are non-optional. Notice that the image element does not have a closing tag.

Piece of cake, yes? :)
To round off this blog-entry let's take a look at clickable links, or hyperlinks as they're officially called. It's one of the most important element yet it's quite tiny:
<A></A>

"A?" you ask bewildered, why "A"? Well it stands for "Anchor", which makes perfect sense.

The link element has two attributes; href and target. The meaning behind those might perhaps not be all that clear so let me elaborate. href is short for Hyper Reference and this is the destination to which the link is to point to. With the target attribute you can control whether the link should be opened in the current window/tab, replacing the website you're looking at, or if it should be opened in a new window/tab. The target attribute is optional.

The default behavior for a link is to open in the current tab and it's the same as specifying a target of "_self" (yes, beginning with an underscore). To make it open in a new tab you can set the target to "_blank". You might have guessed that the text that you want clickable is placed between the opening and closing tags. You can also place images between the tags.
Observe the following examples:
<A href="http://www.mymindblowingwebsite.com/" target="_blank">Visit my website</A>
The text "Visit my website" becomes clickable and opens a new tab.

<A href="http://goreandhorror.com">Click here for fun pics!!!</A>
This will replace the current page with fun pictures.

<A href="http://www.zombo.com/" target="_blank"><IMG src="arrow.png" alt="What is Zombo?"></A>
Results in a clickable picture

Important notice: when linking to resources outside of the current website (which you will most likely be doing) you must remember to begin the href attribute with "http://" otherwise the link will become a so-called "local link" and it will try to find the resource on the current website. This is one of the top rookie mistakes.

Congratulations! you have made it through "HTML basics with Blueroot". You're probably filled with questions and thoughts, if so hyperlink yourself to a comment box near you and give your keyboard a good tapping.

Have yourself a goodnight!

Over & out,
~Blueroot

</BLOG-ENTRY>

Massivedamage.se V1.2
Postad den 23 Jan 2009 vid 17:10

Jag har uppdaterat massivedamage.se litegrann:
  • Annorlunda design pÃ¥ top-loginfältet.
  • Listan pÃ¥ medlemmar syns hela tiden sÃ¥ det gÃ¥r snabbare att komma Ã¥t bloggarna etc.
  • Lista med händelser pÃ¥ massivedamage.se (t.ex. nya blogg inlägg) som visas högst upp pÃ¥ framsidan när man har loggat in, och dÃ¥ bara om det finns nya händelser.

    Listan visar händelser sen ditt senaste gamla login, if that makes sense, jag tror det ska funka :) säg till om den krånglar.
    För tillfället visar listan enbart nya blogg inlägg, nya artiklar och nya projekt.

    Om det finns behov så kan jag inkludera nya kommentarer och blogg/artikel edits.

    Report bugs :)
    Kom gärna med nya ideer/feature requests.

    ~Blueroot
  • "Test your color IQ"
    Postad den 17 Sep 2008 vid 7:02



    Testa hur bra du ser färger genom att sortera färgade fyrkanter.
    Jag fick "perfect" hihi ^^

    Color test

    ~Blueroot

    Internet Explorer 6 -▁-
    Postad den 15 Sep 2008 vid 20:31

    Omg, jag såg massivedamage.se i IE6 för första gången idag, ser helt förjävligt ut. Vilken tur att fler och fler börjar använda Firefox och så har IE7 kommit ut redan och IE8 är på väg.. och FF3.1.. och Opera 9.6 (Opera rules!).

    "IE6, every webdesigners nightmare!"

    ~Blueroot

    Panik!
    Postad den 15 Sep 2008 vid 6:07

    O nej, en bugg i hemsidan! Man kan inte ändra på sitt lösenord. Jag försöker om och om igen, får felmeddelande. Värför?? Loggar ut, loggar in.. går inte, jag kan inte logga in igen :( Vad händer?? Kollar test servern, fungerar hur fint som helst. Kollar i databasen, lösenordsfältet verkar vara intakt. Skriver DEBUG kod och laddar upp, alla variablar är korrekta, hur kan det vara? Värför kan jag inte logga in?? Vänta nu gick det med browserns autologin funktion.. men inte när man skriver in manuellt. Hmmm... Testar igen, nä, nu funkar det inte :( Verkar ju helt random :( Måste vara fel på våran host, jäkla host! Kollar i databasen igen.. men allt är ju korrekt...

    *klick*

    Aaahhhh..... :) Nu fattar jag, allting ÄR korrekt, mitt lösenord ändrades vid första försöket men det fanns ingen OK meddelande så jag försökte igen och igen med det nu gamla lösenordet *doh*. Sen hjälpte det inte att min browser Opera ändrar på lösenorder för autologin funktionen när man skriver ett nytt lösen manuellt.

    Det fanns ingen bugg alls :P

    Version 1.1 - massivedamage.se
    • La till ett OK meddelande när man ändrar pÃ¥ lösenordet.


    ~Blueroot

    Ignition and launch!
    Postad den 14 Sep 2008 vid 22:30

    Wohoo, den nya websidan är äntligen färdig och uppladdad till servern :D
    Det tog 1½ vecka av svett, blod, Pepsi och hårt arbete för att knida ihop sidan ;)

    Designen är framtagen av Stefan som satt i timmar och brainstormade, ritade och designade, justerade och finslipade, raderade allt och började om, gick på toa och fick snilleblixt ... ok, ok, jag vet inte hur han gjorde det men fint blev det :)

    Roligt var det, och nu är det färdigt, känns bra!
    Nu gäller det bara att folk använder sig av websidan! *hint* ;)

    Over and out.

    ~Blueroot

    1 ... 3 4 5 6
    Copyright © 2008 Massive Damage