WEB DESIGN AND NEW MEDIA - ASSIGNMENT 2
2 October - 29 October 2017 (Week 5- Week 10)
Aurelia Regina Sutjahjokartiko, (0329953)
Web Design and New Media
Second Assignment : Personal Website / Portofolio Website
Lecture 1
2 October 2017
CSS External Style
An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.
Step by step :
1. Create style sheet
Type CSS code into a plain text file, and save with a .css extension (for example, styles.css).
2. Link to the Style Sheet from the HTML Documents
Add the following code between the <head></head> tags of all HTML documents that you want to reference the external style sheet. This code uses the HTML <link> element to link to the external style sheet.
So, by linking to it from all web pages, all of your HTML documents will use the styles from your external style sheet resulting in a consistent look and feel.
If you want to change anything, you only need to update the external style sheet.
Lecture 2
12 October 2017
Box Model
In this day we learnt about Introduce CSS Box Model and function of a: link, a : visited, a: hover, a: active.
The function of a : link is to show link it self, a : visited for show that link is has been clicked, a : hover is when the cursor near the link, so the color change. and a : active is when the mouse is clicking the link, so the color change.
Lecture 3
23 October 2017
Position in CSS
Static : Default value. Elements render in order, as they appear in the document flow
Absolute : The element is positioned relative to its first positioned (not static) ancestor element
Fixed : when you scroll down, it will stick into where you set up
Relative : The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
Instruction
Second Assignment - Single HTML Web page (20%) Due date- Week 6
Create ONE (1) HTML page about yourself. The file MUST include basic format
(heading, paragraph, list item, and element of hierarchy), hyperlink (internal and
external), basic styling (CSS) and images.
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.
Objective:
Students should be able to display the understanding of basic HTML formatting
element and CSS within the Web page. Student should be able to style the HTML
elements using different method of employing CSS.
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 TImES within the given time.
Project Progression
In this assignment, actually i challanged my self to put javascript elements event i dont understand what it is (because i dont have enough time and final exam is waiting), but i am trying to understand it.
For the banner, i made it from my picture and i used canva.com because the font is legal. For the icon facebook, behance, instagram, i found it from w3school. Furthermore, for the logo, i made it myslef.
For the "My abilities of Software" section, i made it with javascript and i "fork" from other website that they provide javascript.
Feedback (for this assignment)
For the first time submission , it looks like weird in Mr Shamsul's laptop, also in Mac, so thats why he ask me to redo the html version. So, i redo it and i added some javascript for my ability software.
Aurelia Regina Sutjahjokartiko, (0329953)
Web Design and New Media
Second Assignment : Personal Website / Portofolio Website
Lecture 1
2 October 2017
CSS External Style
An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.
Step by step :
1. Create style sheet
Type CSS code into a plain text file, and save with a .css extension (for example, styles.css).
 |
| Figure |
Add the following code between the <head></head> tags of all HTML documents that you want to reference the external style sheet. This code uses the HTML <link> element to link to the external style sheet.
 |
| Figure |
So, by linking to it from all web pages, all of your HTML documents will use the styles from your external style sheet resulting in a consistent look and feel.
If you want to change anything, you only need to update the external style sheet.
Lecture 2
12 October 2017
Box Model
In this day we learnt about Introduce CSS Box Model and function of a: link, a : visited, a: hover, a: active.
The function of a : link is to show link it self, a : visited for show that link is has been clicked, a : hover is when the cursor near the link, so the color change. and a : active is when the mouse is clicking the link, so the color change.
Lecture 3
23 October 2017
Position in CSS
Static : Default value. Elements render in order, as they appear in the document flow
Absolute : The element is positioned relative to its first positioned (not static) ancestor element
Fixed : when you scroll down, it will stick into where you set up
Relative : The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
Instruction
Second Assignment - Single HTML Web page (20%) Due date- Week 6
Create ONE (1) HTML page about yourself. The file MUST include basic format
(heading, paragraph, list item, and element of hierarchy), hyperlink (internal and
external), basic styling (CSS) and images.
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.
Objective:
Students should be able to display the understanding of basic HTML formatting
element and CSS within the Web page. Student should be able to style the HTML
elements using different method of employing CSS.
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 TImES within the given time.
Project Progression
In this assignment, actually i challanged my self to put javascript elements event i dont understand what it is (because i dont have enough time and final exam is waiting), but i am trying to understand it.
For the banner, i made it from my picture and i used canva.com because the font is legal. For the icon facebook, behance, instagram, i found it from w3school. Furthermore, for the logo, i made it myslef.
For the "My abilities of Software" section, i made it with javascript and i "fork" from other website that they provide javascript.
 |
| Figure. this banner elements i got from codacademy.com |
 |
| Figure. My Abilities of Software |
Feedback (for this assignment)
For the first time submission , it looks like weird in Mr Shamsul's laptop, also in Mac, so thats why he ask me to redo the html version. So, i redo it and i added some javascript for my ability software.
Comments
Post a Comment