Alhamdulillah we had successfully went through our first KOS1110, aka Computer in Science class at 12th February 2015. This class is taught by Dr Noraslinda binti Muhamad Bunnori from Biotech Department, KOS. InsyaAllah Dr Linda will teach us for the first 7 weeks, and the other 7 weeks will be taught by Dr. Khairul Bariyah. (bila la nak masuk html ni). Ok. And Alhamdulillah, in our first and foremost class we had learned about HTML.
Image 1 : Dr Linda - our beloved KOS1110 lecturer.
First of all, what is HTML? We often heard this word, but do we know the meanings of these lovely acronym? Literally, HTML is acronym for "Hypertext Markup Language". Conceptually, HTML basically means the language used to design web pages. In the other word, HTML is the language, or coding language designated for the web pages. Each and everything which appear in the website, including this article, are made up of various codes of HTML, which are then translated to the readable language as all of us can see now. The example of HTML :
Image 2 : HTML the basic
In this class, we have learned and practised 5 elements of HTML coding. First of all, the introduction. In the introduction, we had learned and practised the basic HTML coding, the opening, closing of HTML coding, and to change the font size using HTML. The HTML are as shown as in Image 2. The result of those coding is :
My First Heading
My first paragraph.
Alhamdulillah, our first HTML coding. Yeah...(hehe)
Then, the second one is to do list; ordered and unordered list. Unordered list is the list which is unordered (absolutely. haha). Just kidding. It is the list which is not in ordered manner, such as in numbered order, or alphabetical order etc. The example of unordered list is bullet list, and the example of HTML for unordered list is :
Image 3 : Unordered List
And when we transferred to normal language, it will become as follows ;
Disc bullets list:
- Apples
- Banana
- Lemons
- Oranges
Other than that, there are ordered list (alphabetical, numbered, etc). The example of HTML coding for ordered list :
Image 4 : Ordered List
Can you see the differrence? <ul> coding for unordered list, while <ol> for ordered list. And the result is...tadaa (sorry for the wrong spelling...haha) :
Letterss list:
- Apples
- Banana
- Lemons
- Oranges
Besides that, there are also nested list, which is as we can call as "list of the list". The following is the example of nested list :
Image 5 : Nested List
And........the result is....... :
A nested List:
- Coffee
- Tea
- Green Tea
- Chrysanthemum Tea (Fattah's favourite tea)
- Milk
After that, we also has learned how to link text, using HTML. For example, to link certain text to other text, paragraph or chapter etc, or to do hyperlink to websites. The following is the example of HTML of linking to other chapter :
Image 6 : Linking to other text/chapter
From Image 6, can you see the highlighted coding? If not, please wear spectacles (haha). The highlighted one is the coding to link to another text/chapter which is Chapter 4. Plus, if you can see at the Chapter 4, there are also coding <a name="C4"> for the usage of the linkage text above. Clicking the text 'See also Chapter 4" will direct you to the Chapter 4.
Other than that, we also had a (like) competition. To do hyperlink to Facebook account. The first three person will get extra mark. Alhamdulillah, Fattah from our group is among the three person. How we do the hyperlink code to our FB account? This is the example :
Image 7 : Linking to websites
And the result is :
(if you press the link, it will directly link you to Fattah's Facebook account)
For the last two elements, we had learned to put images and also for constructing tables. For putting image, there was also competition. Alhamdulillah, we also had winner from our group. Congratulations to brother Muhammad Azzubair bin Azeman. The example of the image coding (that we had learned) is :
Image 8 : HTML for image that we had learned
Apart of that, we also had learned to construct table, using HTML. In fact, if you want to make a table in Blogger itself for your blog post, you must use HTML. This is because, there is no button for making table in making blog post, unlike inserting image, making list etc. Therefore, you must learn HTML to make table in your blog. The example of HTML for making table :
Image 8 : HTML for making table
And the result is :
Without cellpadding:
| First | Row |
| Second | Row |
With cellpadding:
| First | Row |
| Second | Row |
Finally, we had given task to make a HTML coding which is consists of all elements of what we had learned in the class. the task is to make a table, which consists all the Kulliyyahs in IIUM Kuantan (with hyperlink to their respective Kulliyyah website in IIUM portal), with their respective deans (including their pictures, name and email), and also the list of departments in the respective Kulliyahs (using unordered list). We had given about an hour to complete the task.
As conclusion, Alhamdulillah we had finished our first class last two week. We are sorry for all the mistakes we had done in the class, as well as in the assignment. Hopefully all of us will do the best, insyaAllah. Let's learn knowledge for the sake of Allah. May Allah bless us. Amiin.....
Ready for the next class.... :-D
