HTML 102

Group: Ian (1, 2, 3), Saria (4, 5, 6), Alejandro (7), Cristian (8, 9, 10)
1. What Image File Formats should be used for web pages, why (how does compression affect loading?)?
Most image file formats can be described as either being “lossy” or “lossless”. Lossy formats (JPG, BMP) lose data every time they’re tampered with and exclude some information (such as colours and pixels) to make the full sized image a smaller file size. Lossless formats preserve all the information but may be large in size (PNG).
The size of the file affects the time it takes to load the content on the webpage. Large, PNG images will take longer to load than low quality JPG images because the file size is drastically different. On a webpage the most common, settled choice seems to be medium quality JPGs, as they are quick to load and preserve a good amount of detail. Of course, on websites such as those from major companies and the government, it’s important to have high quality imagery and thus longer page loading may be traded for higher quality images. It all comes down to the balance between image quality and page loading.
Source: “How to Choose the Right Image File Format for Your Needs.” Ransen Software. Cad and Graphics Software, 2012. Web. 21 Nov. 2013.
2. How do you optimize images for the web?
You can optimize images for the web by using online services that can shrink images while maintaining their original picture. Some services remove unnecessary bytes, leaving the bare minimum for the detail in the image. Other services turn your file formats into lossy formats, reducing the size of the image but also compromising the quality. Some services have even mastered the way to compress images to small file sizes without losing any information.
Source: Muller, Gisele. “Tools and Tips on How to Optimize Images for the Web.” WDL. N.p., 7 Feb. 2013. Web. 21 Nov. 2013.
3What tricks and tips can you use to make your webpage load faster?
a) Use less javascript in your pages. Javascript takes more time than usual scripting to be read by the browser so try to use the least amount as possible, as well as the compressed version.
b) Use small sized media files. Reduce the file size of images and video to have the webpage load faster, which can include lowering the quality of the media or cropping parts that don’t need to be there.
c) Have no blank space in the source code. Blank space is still read by a web browser, so by removing as much space as possible there’s less things to be read and therefore less time it will take to load the page.
d) Enable caching. Caching is a temporary storage that the browser uses to remember that you’ve visited the website before. Enabling caching on your website can greatly increase loading speeds as the browser will pull information from it’s memory (cache). This can also help reduce bandwidth usage and server loading.
e) Use the CDN (Content Distribution Network). CDN is a large system connected through multiple servers spread in multiple data centres across the internet. This can help make webpages full of multimedia and Javascript pages load quickly.
Source: Sharma, Raman. “5 Easy & Effective Tricks To Make Your Website Load Faster.” All Useful Info. N.p., 6 Oct. 2013. Web. 21 Nov. 2013.
4) How can you use images in css, show us examples?

Images are usually added to HTML because it’s a lot easier. In order to add images in CSS, this following code must be used:

Body {background-image:url (‘insert name of file.jpg’) ; }

For example, if my file name was called “flower.jpg” this following code would be used:

Body {background-image:url (‘flower.jpg’) ; }

“CSS background properties are used to define the background effects of an element.”

Source: “CSS Background.” W3schools. N.p., n.d. Web. 21 Nov. 2013.

5) How To Add a YouTube Video to Your Web Site and video in html5?

To add videos to html5 this following code should be used:

<video width=”340” height=”450” controls>

<source src=”nameoffile.mp4” type=”nameoffile/mp4”>

<source src=”nameoffile.ogg” type=”nameoffile/ogg”>


To add a video from YouTube, this following code should be used:


a) “HTML5 Video.” W3schools. N.p., n.d. Web. 21 Nov. 2013.

b) “HTML – YouTube Videos.” W3schools. N.p., n.d. Web. 21 Nov. 2013.

6) How do you optimize video for the web and incorporate it in your web page?

 In order to optimize the video, keep in mind these few tips.

– Make sure the video is in its right file format:

Here are a few file formats: .mpg, .mp4, .mov, .wmv, .asf, .avi, .ra, .ram, .rm, .fly

– Page title

The page title should say something about the video to enhance search results

– Description

Keep the description brief and straight to the point. A description is important because it highlights what the video’s main points are to the page viewers.

– Comments

Allow viewers to post comments on your videos. It’s a way for viewers to engage with content.

– Rating

Allow viewers to rate your videos as popularity is one of the factors that determine the strength of your content

– Social media buttons (crucial!)

Make sure your videos have social media buttons so that page viewers can share this video to Facebook, Twitter, Tumblr… etc.

Source: Moehring, Keith. “Optimizing Video For Your Website (Part 3 of 3).” PR 20/20. N.p., 18 Aug. 2010. Web. 21 Nov. 2013.

7. How do you optimize sound for the web and incorporate it in your web page?

Audio files can be optimized by making sure the file names for audio are easy to locate, and easy to recognize. It is not the same to have a sound file name called: ding01.mp3, 01.mp3, ding.mp3 or even aif5b9e.mp3. Based on the previous examples, the best one would be ding01.mp3, because it is possible that there are other ‘ding’ files in the same file. By placing a number after the name, it will categorize it, and make it easier to locate. Also, a user will not be looking for a specific file but for a link that leads them to that file, it is very necessary to have links, text and transcripts to be very specific when referring to a specific file specifically video and audio files since browsers have a difficult time indexing them.

There are some easier ways to optimize audio, and that would be a tag called ID3 which helps to add information to an audio file. The ID3 is like having meta tags to your audio files so that the file can be easy located or so that the file can display its properties when called for. A final way to help optimize audio in a web page is to share the file with other sites that can spread the music, like radio station sites, iTunes or Soundcloud.

Source: “Multimedia SEO Guide: How to Optimize Images, Videos & Audio for Top Rankings.”
Ineedhits RSS. N.p., n.d. Web. 22 Nov. 2013.

8. What are some of the dos and don’ts of web design with media?

• People should be able to navigate through the website easily without problem. It should not take very long to go from place to place within the website.
• Everything should be close to each other and the colours used should be more understated so that it is easy to read the website.
• The fonts should be easy to read and understand.
• The content should all be related and put under certain headings so that they are easy to find.
• The security of the website should not be visible and it should be well protected.
a) “50 Questions to Evaluate the Quality of Your Website.” Search Engine Journal. N.p., 20 Feb. 2008. Web. 21 Nov. 2013.
9. What resolution should you design for?
• The most used resolution for designing websites is 1024×768, which is the most popular resolution.
Source: Rohde, Michael. “What Screen Resolution Do You Design For? Using the Less Framework.” HTML Goodies. N.p., n.d. Web. 21 Nov. 2013.
10Designing for mobiles?
When designing for a website it is best to use the resolution of 320×480.
Source: Source: Rohde, Michael. “What Screen Resolution Do You Design For? Using the Less Framework.” HTML Goodies. N.p., n.d. Web. 21 Nov. 2013.
Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: