Archive | Week Nine RSS feed for this section

MPM107 HTML5 102

15 Nov

George, Angie, Raine, Christina

What Image File Formats should be used for web pages, why (how does compression affect loading?)?The formats that should be used for webpages are GIF, JPEG, and PNG. These formats can also all be compressed. Depending on what the use of the image is, depends how which one to choose, and how to compress it. Examples can be found at Webstyle The reason that compressing files is important is because they are easier and faster to load. Many people have access to a variation of Internet speeds, as well as the images being accessed from multiple devices. If the image is easy to load, it makes it easy for anyone, anywhere, to access your website, and do so effortlessly.
How do you optimize images for the web?
Optimizing images for the web varies on the use of the image and what area you want to compromise. For this reason there are many different ways to optimize

your photos, and this is a link, along to the one mentioned before, which can be used to help you decide how you would like to optimize your photos. Just for example, if you wanted to create a JPEG image, you must note that it creates image noise. Basically you loose some of the colour detail in the image. (As can be seen in the example shown with the fish).
What tricks and tips can you use to make your webpage load faster?
One website,, discussed five tips they think are useful, and I think these are all ways which do make sense to speed up a webpage.

Tip #1: Don’t use more JavaScript in your webpage, I do not understand much about JavaScript, other than that it is another code or language that creates interactive effects, if you would like to know more about JavaScript, check out This Link.

Tip #2: Use small image and video files. Like discussed in the earlier part of this post, it is important to use smaller images and videos because it makes it easier for the web to load them.

Tip #3: Remove blank space from your code. The website says that this will increase loading speed, it does not say how, but I assume it is faster for the site to read through the code this way.

Tip #4: Enable webpage caching: the website describes this as “Webpage caching is a mechanism to make a temporary storage of HTML pages and images. It means if anyone visits your site, browser stores that page temporary. Caching is also use to reduce bandwidth usage and server load. That’s why the websites load faster after using webpage caching. If you are running a WordPress blog, you can use some of the plugins like WP Super Cache etc. to enable caching of webpages.” (

How can you use images in css, show us examples?One way to imagespriteexamplepicuse images in CSS is using image sprites. This is a collection of images made into one, and this also helps create a faster loading time. It also can be used with images for home pages, back or forward buttons, and then hover effect, or code, can be used over top.
How To Add a YouTube Video to Your Web Site and video in html5?
When on YouTube there is an Embed button, once you click this you will be given a code. This code can be taken and put into your code to create the video to be shown.
How do you optimize video for the web and incorporate it in your web page?
As discussed earlier in the post, you can use smaller, or compressed versions of a video because this will make it easier to load and view. It is important for people to be able to access information quickly and effortlessly, or else they may become frustrated with your website and click out.
How do you optimize sound for the web and incorporate it in your web page?
There are many things you can do to optimize you sound files visit this website for many ways to optimize you sound files. Some tips include: Performing basic sound editing to rid of unwanted noises (buzz, cough, sneeze). Another is to use digital enhancements to amplify the soundtrack (changing pitch shift)
What are some of the dos and don’ts of web design with media?
One major don’t in webpage design is over clutter. Many people try to add to much colour, and image, and the webpage becomes difficult to pay attention to, and sometimes hard to read. This takes away from the content, or the important aspects of the page. It is important to (or a Do) to find a theme you like, choose a few colors (1-3) main colors, to incorporate and stick to, and create an appealing site around that.
What resolution should you design for?
One website discussed that having multiple variations of website sizes is not uncommon because there are people accessing websites from so many different devices, which are all using different screen sizes. Also some people do not use there computer screen at full size when viewing webpage, and it is important to keep that in mind to. The author states “with so many different screen resolutions and window sizes in use, optimizing your website for one screen resolution doesn’t really make sense. If for some reason, you were forced to choose one, due to time constraints or otherwise, I would go with 1280 x 768. This is pretty much the baseline standard these days as far as desktop browsing goes. However, you should be designing your site for all window sizes using responsive design.” (
Designing for mobiles?
It is also important to remember that many mobile devices are unable to load the amount of graphics a computer can. Also, a computer and phone have different screen sizes, and the amount of information that can be viewed on one mobile screen versus a computer also varies. This website gives some great tips on how o optimize your site for mobiles as well. One tip discussed is using HTML5, because mobile device are capable of reading this, which will help keep the codes you already have create, mobile friendly, meaning you only have to do things once. Another tip I learned on my own is, for example, when using a server such as word press, you can go into your dashboard, and there is a link to make your website mobile, which also gives the creator a few wa ys on what the page will look like on a mobile device. There is a simplified, mobile friendly, version it can create, or you can make it exactly how it is seen on a computer.

Works Cited


MPM107 CSS 101

15 Nov

group: Christina, Raine, Angie, George

What is CSS and how does it work?
CSS stands for Cascading Style Sheets; this generally shows how to display HTML. This potentially allows web designers to divide their information.

CSS syntax
Some examples of CSS may be changing the colour of your webpage’s background, setting an image as a background etc. However, the code for changing the background colour is simple:
hr {colour:blue:}

The difference between ID and Class
The difference between an ID sector and CLASS sector is that ID is unique whereas CLASS is not. The element for both is quite different as well, the ID is seen as “#” basically a number symbol, and class is classified as a “.” just a simple period. ID CSS are only capable of being used once within an HTML document, however, a class CSS can definitely be used multiple times.
HTML code for ID: <p id=ExampleID1”>
HTML code for Class: <p class=’ExampleID1’>

Difference between External, Internal, Inline style sheet
Similarly, both External and Internal are found within the head sector of a webpage. An external style sheet is truly ideal when it comes down to changing the entire look of a webpage with just a file. The <link> tag is important when linking to the style sheet. Internal style sheets are generally placed within the <head> sector of your HTML document, the tags that classify an internal style sheet are <style></style>. Finally, the last important style sheet is referred to as an Inline style sheet.

What is a Box Model?
When the design of a webpage is being discussed, generally all the HTML elements can be placed within a “Box Model.” We normally begin with content in the middle where most of your text will appear, and then we add the padding, which surrounds the content and displays the background colour of that box. Thirdly, we have the boarder that comes after the content and padding which also displays the background colour. Lastly, the margin doesn’t contain a background colour it’s actually transparent as opposed to the other properties. On another note, when setting width and height of an element, it’s only to be done within the content sector of the box model!

Box Model CSS 101

This is the box model for CSS101

What do Floating and Positions do?
With floating, an element is capable of being shifted either to the right or left of the line, causing the elements after the float to flow around it. If the element were to be placed to the right, the content would flow to the left. However, the elements before it won’t have an affect whatsoever. Whereas with Positioning, this helps position the element either top, bottom, left or right. The difference between the two is quite obvious, floating can only be done right or left not up or down, whereas positioning there’s many ways of placing it anywhere dynamically.

CSS Grouping and Nesting
Grouping makes it much easier to sort the number of selectors without having to do it repeatedly.  For instance

However, when applying a selector within a selector this is classified as Nesting.
For instance

Basically, this helps align the text, and change the font colour!

Aligning Elements

Simply, by aligning the text within the property, this allows the elements to be aligned. For instance, if we were to place the text within the centre of the HTML document, we would use a simple code such as h1 {text-align: center} which would bring everything in the middle of the first header. Potentially, this helps allow the elements to be lined up, whether horizontally or vertically. This will all be centered within the margins.

How To Build a Navigator Bar

A Navigating Bar needs a standard HMTL base in order for it to work correctly.
<li><a href=”#home”>Home></a></li>
<li><a href=”#news”><News></a></li>

These navigating bars are extremely handy when linking to another webpage, or URL.


1. “HTML.” W3Schools Online Web Tutorials. N.p., n.d. Web. [Accessed: 14 Nov. 2013.] <;.

2. “Bleeping Computer.” How to Make a Horizontal Navigator Bar. (June 16, 2006) Web. [Accessed 14 Nov. 2013.} <>

3. “CSS101.” Box Model. N.p., n.d. Web. [Accessed: 14 Nov. 2013.] <>

4. “BarelyFitz Designs.” Learn CSS Positioning in 10 Steps. N.p., n.d. Web. [Accessed 14 Nov. 2013.] <>

5. Coyier, Chris. “The Difference Between ID and Class.” CSS-Tricks. Np., July 9, 2008. Web. [Accessed: November 14, 2013] <>