Interactive Design: Exercises
Chai Yi Xuan / 0346645 / B' Creative Media
Interactive Design
Exercises / HTML & CSS Document Development
LECTURES
Week 1 (Websites)
What is a website?
A website is a web document in the Internet that has a page or more and is created with intended purposes.
Types of websites:
- Informational website
- Corporate website
- Portfolio website
- Brochure website
- Entertainment website
- Personal website
- Educational website
- E-commerce website
- Nonprofit website
Week 2 (Web Design and New Media)
Web Standards
With the diversity in the way people access the web, there's a very high probability that your website will look different to many of your visitors than it does to you. Despite these differences, the most important part of your website is its content, and all users should be able to access that. The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards.
Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access your site.
The W3C has defined dozens of standards, including the standard markup languages we use to build websites. The standard markup languages we'll be using in this course are:
- HTML
- CSS
We come across all kinds of documents everyday; newspapers, insurance forms, catalogues etc.Many web pages act like electronic versions of these documents.
In all kinds of documents, structure is very important in helping readers to understand the messages we are trying to convey and to navigate around the document.
Week 3
The three common image formats for Web are:
1. JPEG (Joint Photographic Expert Group)
- Highly compatible and small size and very little loss of quality. It is saved using lossy compression. JPEG format usually used for photos on the Web.
2. GIF (Graphics Interchange Format)
- Uses lossless compression.
- You save the image over and over again without lose any data.
- It uses 8-bit lossless format which support a maximum of 265 colors.
- Unique feature of this formate is its ability to be animated.
- This format is an excellent choice for logo, limited color images that need to be in small size.
- It is small in size but not suitable for photos.
3. PNG (Portable Network Graphics)
- It contained a bitmap of indexed colors and uses lossless compression.
- It also allows full range of color and better compression.
- Support image with transparent.
INSTRUCTIONS
To-Do List:
- Learn how to code a HTML document
- Stylizing a HTML document with a CSS stylesheet
We had three exercises to have us be more familiar with HTML coding and CSS styling.
The first exercise is to make us know what tags to use to achieve desired outcomes. After this exercise, I was more familiar with each code used and its functions.
 |
| Figure 1.1: Screenshot of coded HTML website (Link) |
The second exercise was similar to the first one, except with the need to implement images in them. We also learned about jump links in class and had to use it in our exercise.
 |
| Figure 1.2: Screenshot of exercise (Link) |
In the third exercise, we were introduced to CSS styling. We had a tutorial session on how to create a CSS stylesheet and learned about the different customization we can do in it. Then, we had to code a HTML web document along with a CSS stylesheet according to the example given to us. We also had to code it to make it responsive to different screen sizes.
 |
| Figure 1.3: Screenshot of coded website for exercise 3 (Link) |
REFLECTIONS
Despite my aversion and lack of interest for coding, I was excited for the module. I had a little bit of HTML coding experience from my secondary school studies, but I wasn't the best at them and couldn't remember half of the codes used. These exercises gave a good refresher course on how to code a full HTML webpage. I never coded a CSS stylesheet before, so it was intriguing to see the amount of coding that goes into just customization. Overall, I gained some coding knowledge, and kind of looking forward to the rest of the assignments.
Comments
Post a Comment