Web Design & New Media - ASSIGNMENT 2 : SINGLE HTML

Ashila Putri Sandi [0332938]

Web Design & New Media

Single HTML Webpage

INSTRUCTION 

SINGLE HTML WEB PAGE (20%) DUE WEEK 5

Create ONE (1) HTML page about yourself (not too brief). The file should include basic format (heading, paragraph, list item, etc), hyperlink (internal and external), basic styling (CSS) and images. Students should be able to display the understanding of basic HTML formatting element and CSS within the Web page.

REQUIREMENT:

You are required to create an HTML document that consists of all the elements that are discussed or showed in class. The file should well format with headings, paragraph, proper use of list options and hyperlinks. A clear presentation of content flow must be displayed so that user can easily navigate the page and understand the content.

SUBMISSION REQUIREMENT:

The file should be in HTML format (.html) and can be open from any modern browsers (Firefox or Chrome). Compress the file to .zip and upload it in Google Classroom within the given

time.

PROCESSES

The first thing that I did was making a layout on my sketchbook. I just did a pretty rough sketch for me to know the layout and position of my content. After that, I started to gather my own information and I made my own introduction for the webpage. I also did some research and tutorial on youtube of how to use Adobe Dreamweaver especially how to use HTML and CSS code.

Fig 1. First Layout Sketch

Fig 2. Second Layout Sketch

After my layout was being approved by Mr Shamsul, I started to to my html file on dreamweaver. For me, It was quite hard because we need to explore a lot about the coding and also be very careful and meticulous. Also, I did not manage to make the layout digitally, bacause I thought it would be faster and efficient for me to just try the layout on the dreamweaver and see how it goes.

Fig 3. The html language, Dreamweaver process

I actually just did all the tutorial and lecture that Mr Shamsul gave to the class, but I managed to do something different like using GIF, and sidebar menu which Mr Shamsul did not teach us.

Fig 4. Animated GIF for the header

Fig 5 Process while making the code and layout

My obstacle was choosing the right theme and being consistent in order to make a good web layout. Although I think I like the layout, but it seemed too messy in general. Moreover, it was kind of hard for me to do the layout that I wanted to make. After trying a couple of times, because I did have much time to explore more, I just did the basic thing and layout.

FINAL OUTCOME

FEEDBACK

I needed to fix some problem which were fixing the width and reducing the size of the image. So, I managed to move the header under the navigation code to make the navigation width longer.

REFLECTION

I have learned coding before in high school, but just the basic stuff. I remembered some of them, but most of all I needed to learned everything fast in this short semester because there wasn't much time. I had to learn and watch many tutorials by myself. It was quite hard and frustrating making an html and CSS coding, especially when my code didn't work and I had to figure it out my self and check the code more thoroughly. Unfortunately, I was too afraid to explore more about html and css coding so I just did the simple and basic thing to my single page which reflected my personality, and I used a bright colour scheme. Overall I realised that coding needs a precision and a problem solving while making it of course a lot if patient will be needed.

Google Drive Link