Week 4- "The First Quiz"

Let the picture tells how my first quiz was going on.

And this is the marks I get.

Week 3- "Form de LabTest"

Today, Mr.Syamsul gave us a sheet of paper and asked us to make a form with html knowledge that we had learned from previous theory class. As usual, I used Adobe Dreamweaver CS6 to create it.

Here's my result of the form. Got a bit different from the request. But what so ever? The main functions were over there =D

Here's some different type in the form I created:-

1: Text Box

2: Text Area. 

         The difference between text box and text area is text box provided only 1 line for user to key in            the information, while text area can make multiple lines of information when user type "Enter".

3: Radio Button. 

         User only can select one option in this type.

4: Check Boxes. 

         User can check multiple options in this type.

5: Multiple Selection. 

          User can view all options in this selection.

6: Select. 

          User can see one option and they click the box, all options will come out under the box. This                  selection can use when the options were so large to save places.

7: Password Box

          When user make an input in password box, the words will be hidden and only showed the                      length of the word.

8: Summit & Reset

          These are the buttons that can allow the information in the form summit or reset. When user                    click "Summit", the form will process in the action that created in HTML. When "Reset"                      button is clicked, all information in the form will be cleared.

Week 2- "Adding Some Tabs"

Today, Mr.Syamsul asked us to modify the previous lab tutorial, which is add some tabs into the page. Lets review the product of previous lab tutorial.

"HOME", "INFO", "ACADEMIC" and "CONTACT" are the tabs that can found in the original file that Mr. Syamsul given. Now I am going to add some tabs which names "HOBBY" and "EXPERIENCE".

Actually it's very easy. At first, I change the table width and the image's width to 1536px to make the columns fix the table without changing the column's size.Then, I add the two lines of coding which link to the two .html files.

At the same time, make sure the files need to be created and key the actions that need to perform when user clicks the button into the .html. And anything just same as what I had learned before.

Taada~Here's the result. Two columns are added behind it(Just ignore the typing error..).

_______________________________________________________________

But did anyone notice what's wrong on it??

Er-hem. I just noticed that this result couldn't fix my laptop's screen as it's too long for it(That wasn't a problem when it opened in lab with wider screen display).

But what's matter, this is just a practice. Smile :) 

I was upset on this for 2 seconds.

Week 1- "HTML in basic(editing)"

In the first lab class, Mr.Syamsul Bahrin Zaibon teached us about difference between http and https. https is something like security website.

After this, he gave us a set of html codes to let us edit some designs and contents. 

There is two files which in MAC and WINDOWS. We are using WINDOWS platform during the lab class so I extracted the second folder.

This is part of the original output that designed by En. Syamsul. This html code is a simple website design that shows time and content. It also provide button that can view other information in different html codes.

After I extracted the folder, it will show some files which in format .html and .jpg .

I try to open one of the html files with Dreamweaver 8 in lecturer's instruction. Although this is not the first time I meet html codes, but first time read and edit it using a proper application.

Dreamweaver 8  is a software that can produce a web page that suit for beginners. In Dreamweaver 8, user can view the code in several modes, which are in Code (upper image), Design (output, bottom image) and Split. Code mode lets us edit the code to change the design, Design mode lets user preview the output and could make change through simple buttons showed below the design, Split mode can view together with codes and design, user could make change from the codes and directly preview the output. During the lab tutorial, I modified the design in Code mode and Design mode(for change color and size of fonts) only, as I just realize the Split mode after I finished the task.

This is part of the source code in info.html. As I mentioned just now, I had studied about html code by myself when I was interested in blog designing, but it happened a few years ago when I was in secondary school, I mostly forgot about it so it also takes time for me to read through all the codes. With the image above, I am here to explain what I had changed for this lab session.

1. Photo in the website(Red Colored)

The underlined word in the code is the name of image that show in the design in same location of html code stored. I wish to change the image, so I googled it with size 1024*200  that stated in the codes.

After I choose a image that I satisfied, I download it into the same location, then i renamed the image as work1.jpg and replace the underlined code.

2. Color with codes(grey colored)

I discovered the codes and find out all the color codes, and changed it to the color that I wanted.

I am not so expert to memorize all the color codes, this color chart is a tool and also a "trick" for me to complete this part. This is very useful and I guess that I gonna use this for future lessons. I modified the design to themed purple to match the image that I found.

3. Contents and Information(Blue Colored)

This part is quite simple, I just changed the contents to what I wants. I also changed the color and size of fonts using Design mode to match the website I modified. But when I tried to delete the word "content right" and the table that separates into two parts, I found no way to do so. After I search from internet, I roughly understand why(refer to No.4). Lastly I just delete the words, and make the color same with LHS.

It seems feel same as what I expected but actually no because I know if the sentences in LHS are too long, it will not continue to RHS, but automatically go to next line.

I hope that I could modified it with correct way. I believe one day I can do it. So I learn.

4.<td> Colspan(Green colored)

After few times I modified the codes, I cannot do what I want(delete the column and make it into one) because from beginning, the structure of the design is table-based to create buttons.

source: http://www.w3schools.com/tags/att_td_colspan.asp

From the definition, in the code Mr Syamsul provided, colspan"4" means it will have a table with four columns. This is to create four buttons that shows different information. 

______________________________________________________________________________________

After mostly one hour of modifying (actually not need too much time to complete the task when we get practiced well), the codes and output went like this.

Anyone can spot all the differences?


P.S.: Sorry for the low quality images. I will make it better on the next post ya.