# **Homework #3 Web**
###### tags: `Introduction_to_Computer_2021_Spring` `NTU`

---

#### Due Time: **<font color="red">2021/05/11 23:59</font>**
#### TA hours: (五)13:00-14:00 @BL603
#### FB作業討論區: [社團](https://www.facebook.com/groups/computer2021spring/)
#### Contact TAs: computer2021Spring[at]gmail.com

- Late Submission Policy: <font color="red">30% </font> off per day; Please remember to email TAs, otherwise we will regard it as no submission.

---

### **How to hand-in Homework3**
1. Please create a "readme.txt" file and write down your website link if you got one.
2. Save all your website matrials into folder named "website" and create a "index.html" inside the folder make it as the home page. TA will read "index.html" if you dont got one, you will get zero point.

    hw3/
    |-- readme.txt
    |-- website/
        |---- index.html
        |---- & other materials you need

3. Zip the whole hw3 folder into **.zip** file. (not .rar or .tar format)
4. Upload to Ceiba

---

## **<font color="brown">*Build your personal website:*</font>**

> Please build a simple homepage which includes:

#### Problem 1: You need to write a brief biography about you. The biography should include the following items. (10%)
* Your high school and its hyperlink. (5%)
* The department you major in and its hyperlink. (5%)

#### Problem 2: More information about yourself. Please list at least 3 of your hobbies with corresponding hyperlink to its related website. (10%)
* For example, if you like to play basketball, you can put a hyperlink to your favorite NBA player/team in your website.

#### Problem 3: You need to put a photo in the webpage. (10%)
* Please adjust the image to a suitable size.
* For example:

#### Problem 4: Customize your website logo. (10%)
* For example:

#### Problem 5: Customize your background music, you should have your website with a background music auto play recursively. (10%)

<audio/>

#### Problem 6: Your website should have css to make it pretty. You may use the tag "style" to create css effect. (10%)
* You have to use css in your web page. (5%)
* When you hover the hyperlink in problem 1, the color of hyperlink should turn to red. (5%)

#### Problem 7: Display Date and Time using Javascript (20%)
* Assign the date/time to the content (innerHTML) of the element in the format below. (5%)
* date/time format:
<p>4-26-2021 21:34:05</p>
* Hint: you can define where the date/time should be shown in the HTML page using an \<span> or \<p> element
* Update your clock in real time (once per second). (15%)
* Hint: You can define a function to update the current time and set a timer to call this funtion every second.

#### Problem 8: Publish Your Website (20%)
* You can use any web host if you want, but please make sure the link to your website is avaliable during this semester.
* Here are some recomended web hosts you can use.
* [台大個人網頁空間](http://oper.cc.ntu.edu.tw/docs/student_homepage.html)
* [Github Page](https://gitbook.tw/chapters/github/using-github-pages.html)

---

### Tips
* Some examples if you have no ideas.
1. 陳銘憲教授: http://arbor.ee.ntu.edu.tw/faculty.html
2. 李宏毅教授: https://speech.ee.ntu.edu.tw/~hylee/
3. 王鈺強教授: http://vllab.ee.ntu.edu.tw/ycwang.html
* Upload your website (problem 8) to web may be the hardest part in this homework, so it’s recommend to create a plain text and upload it first, make sure you figure out all the steps.

### References
* [W3School](https://www.w3schools.com/html/default.asp) (Beautiful templates and html examples)
* [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/) (Front-end framework)
* [Font-awesome](https://fontawesome.com/icons?d=gallery&p=2) (Beautiful Icons)
* [Clock](https://www.arclab.com/en/kb/htmlcss/display-date-time-javascript-php-ssi.html) (Clock example)