WEB DESIGN AND NEW MEDIA - Assignment 2 (Single HTML webpage)

WEB DESIGN AND NEW MEDIA - Assignment 2 (Single HTML webpage)

2 May, 2018 - 20 May, 2018 (Week 6 - Week 8 )

Jesslyn Fabryando (0332213)

Web Design and New Media

Lecture 6: Cascading style sheet (CSS)

3 May, 2018 (Week 6)

On the sixth week of the semester, our lecturer explained about the difference between HTML 4 and HTML 5. For HTML 5 it is known as its semantic elements. Semantics is the study of the meanings of words and phrases in a language.

Semantic elements = elements with a meaning.

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements:

• <div> and <span>  - Tells nothing about its content.

Examples of semantic elements:

• <form>, <table>, and <article> - Clearly defines its content.

Fig. 1. New Semantic Elements in HTML 5

Fig. 1.1. Difference between html 4 and html 5

We were also given a lecture about 'Block element' and 'Inline element'. Block elements always appear in new line.  E.g. <h1>, <p>,  <ul> and <li>. Inline elements always appear to continue on the same line. E.g. <b>, <I>, <em>, <a> and <img>. 

Aside from this, we were introduced to CSS. Css allows you to create rules that specify how the content of an element should appear. CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.

A CSS rule contains two parts: a selector and a declaration.

Fig. 1.2. CSS style rules with HTML Elements 

Fig. 1.3. CSS properties affect how elements are displayed

Tutorials 6: Cascading style sheet (CSS) 

3 May, 2018 (Week 6)

After the lecturer, we were asked to try out different types of CSS codes. We learnt how to change the words in the header to be all in capital letters and we change the font color as well.

Fig. 1.4. Codes typed in Dreamweaver Software and added CSS codes

Fig. 1.5. Results of the coding opened in web browser applying CSS codes

Tutorials 7: Cascading style sheet EXERCISE(CSS) - Online

9 May, 2018 (Week 7)

On the seventh week, we have online class where we were asked to make the same outcome just like the file given to us by Mr. Shamsul. All the text that colored pink it's a link where we should link it to another page.

INSTRUCTION:

FINAL OUTCOME:

Fig. 2. Codes for week 7 exercises

Fig. 2.1. Outcome for week 7 exercises

a:link - a normal, unvisited link (COLORED PINK)
a:visited - a link the user has visited (COLORED INDIGO)
a:hover - a link when the user mouses over it (THE WORDS WILL APPEAR UNDERLINED)
a:active - a link the moment it is clicked (COLORED BLUE)

---

WORK PROGRESS - ASSIGNMENT 2

16 - 17 May, 2018 (Week 8)

On the eight week of class, we were brief for our second project which is to make our own web page. In class, we were given an exercise where we follow Mr. Shamsul step by step on how to add boxes, insert background color and many more. We were being familiarized with the codes so that it will be easier for us to do our second project. This time, Mr. Shamsul taught us external CSS codes that is link to the html file. Going back home, we were asked to finalize the wireframe so that we can start already creating our web page and it will be easier to design later on. 

Fig.3. Web References

Fig. 3.1. Wireframe sketch

Fig. 3.2. Color Scheme

Fig. 3.3. Header designed in Illustrator

On the 17 of May we continue designing our web page, where we can ask question and consult with our lecturer if we have problems or things that were not clear.

Fig. 3.4. Preview of the whole landing page (FINAL OUTCOME)

During this second project, I somewhat feel enjoying doing the coding however, it is a bit stressing when some content are not align and there are so many errors. It is a bit challenging whenever the code doesn't work and we need to figure it out. Overall doing this coding I need to understand all the codes in order for me to be easy creating a website especially later on for my final assignment. During the time when I am stuck because there is something wrong with the code, I usually spend a lot of time figuring out by watching some tutorials or search in google wha t could I have gone wrong. It took a lot of time doing coding. However it was fun.

FINAL OUTCOME

Link: https://youtu.be/GAk44tIeJPM