Exercise 12: HTML 5 – 101

The difference between a website and a web page is quite simple. A website is a collection of web pages all under a similar domain. A web page is a unique page which is located on the web, under the collection of the website.

To create a web page, you will need to use HTML or HTML 5 coding. There are many elements which constitute HTML to format a web page.

Simply put, HTML is divided into two sections, the HEADER and the BODY. The HEADER consists of elements which have functions on a web page, but they are not visually displayed. Whereas the BODY contains elements of what can be seen on the web page. Coding inside of the BODY create format to the page, such examples are:

<p> creates a new paragraph

<br> breaks the link, moving elements down the page

<strong> creates bold text

To write an HTML tage, it must always have an opening tag at the beginning of the element ( <strong> ) and a closing one at the end ( </strong). There are some exceptions, such as inserting an image into a web page, this tag is singular, and does not require a closing tag. If tags did not close, the HTML reader would not be able to distinguish where an element starts or stops. A DOCTYPE tells the file reader what kind of file it is reading, an HTML file has the code HTML as it’s DOCTYPE.

The h1 tag determines Page Header titles and other significant text which will be displayed on the browser tag, and not simply on the page itself.

Having images on a webpage can be done two ways, either from a folder within the website, or linked from an external website.

Folder, the tag used would look like <img src=”image.png”>

External, the tag used would look like <img src=”http://answerguy.com/wp-content/uploads/2012/12/h1-and-influency-in-search-engine-optimization.gif“>

HTML 5 is the language makeup of the web. It is the text based language which can be read by web browsers where it translates it into the web pages we know today in Web 2.0. HTML 5 was developed alongside with the development of the internet. This coding stage allows for more complex applications and coding to be implemented into a website. Also, HTML 5 was developed to support cross-platform files.

FTP stands for File Transfer Protocol. It is used to transfer files from a local host to a web host on the internet, for example. Website developers would normally work offline on their computer, and then FTP their files onto the website host server, where they will then be read to format the website.

HTTP stands for HyperText Transfer Protocol. This is the language which web pages are read by web browsers on the internet. The browser interprets the HTML coding using HTTP to formulate the web page itself.

 

Sources:

Curee, Brian. “Webpage vs. Website; What’s the Difference?” Sonline MEDIA. N.p., n.d. Web. 7 Nov. 2013. <http://sonlinemedia.com/webpage-vs-website-whats-the-difference/>.

“File Transfer Protocol.” Wikipedia. Wikimedia Foundation, 13 Nov. 2013. Web. 7 Nov. 2013. <http://en.wikipedia.org/wiki/File_Transfer_Protocol&gt;.

“Glossary of Common Web Design Terms.” H2i Online. N.p., n.d. Web. 7 Nov. 2013. <http://www.h2ionline.com/web-design-glossary.html&gt;.

“HTML5.” Wikipedia. Wikimedia Foundation, 11 July 2013. Web. 7 Nov. 2013. <http://en.wikipedia.org/wiki/HTML5&gt;.

Lloyd, Ian. “Basic Structure of a Web Page.” HTML Elements | Learn HTML. Sitepoint, n.d. Web. 7 Nov. 2013. <http://reference.sitepoint.com/html/page-structure>.

“What Is HTTP?” Webopedia. Quinstreet Enterprise, n.d. Web. 7 Nov. 2013. <http://www.webopedia.com/TERM/H/HTTP.html&gt;.

Advertisements

Exercise 11: HTML 5 – 102

The optimal formats for web images would be JPEG, PNG, GIF, BMP, and PSD.

JPEG is good for keeping the file small, while losing a bit of information, reducing the quality a little bit. This format comes in 3 kinds, Baseline, recognized by all browsers. Baseline Optimized, this optimizes the colour for compression, recognized by most current web browsers. Progressive, this is where the image loads using a block like appearance. It pixelates until the final form is attained.

PNG is great because it has a small file size and does not lose quality or information. This file format is also good because it supports transparency, unlike JPEG.

GIF is a simple file format for images with limited colours. This format always reduces the amount of colours to 256. Resulting in loss of information and quality, however reducing the file size tremendously. This format is often used for web animations, buttons, banners, and other simple shapes where image quality is not the prime focus.

BMP is a format which is very large in file and does not lose any quality or information.

PSD are Photoshop files which contain all the information of an image (layers, masks, blending, etc). This format is not recognized to be displayed in a web browser. But they can be exported to any of the file formats above for previewing.

Optimizing images for web means it needs to go through a compression stage, where you will have a readable image file. Lossy compression is a saved imaged that is not exactly the original image, only noticeable by zooming in, as the data will only compress the image pixels at a 100% zoom view.

Lossless compression is the original image that takes up more memory as the image can be seen at high definition view, being able to be seen when zoomed in. This takes up more memory because the more spaces of data filled the more memory it will acquire.

When optimizing images for the web, there are many formats that are available yet few can be read on the web; JPEG, GIF and PNG files are examples. JPEG (.jpg) is a lossy compression, but is better for pictures with contrast and range of color.

GIF (.gif) seperates the data into every pixel allowing the user to examine the image from a zoomed in scale. GIF is also referred to as a series of pictures, created to appear as a looping video clip. PNG (.png), a greater color-depth along with takes up less memory, while it compresses a more defined photograph than .gif. It contains

There are many techniques focusing on different aspects of a website which can optimize website loading speed. First off, to reduce the size of images will greatly increase the load speed of the website. Perhaps an image which does not focus on quality should be in GIF (256 colours) format, instead of BMP (large file size). Also, when uploading an image to your website, upload the desired size for the image. Having an image load at 500×500 pixels which will then be displayed at 250×250 pixels will slow the loading speed. Reduce the size of the image before using it to upload. Also, enabling caches for your website can greatly increase loading time for your web page. Caches is information temporarily stored in the browser which will allow pages to load faster because it already has something to load. Using CSS (cascading style sheets) can allow pages to load faster. It has been tested that having a smaller amount of larger CSS files will load faster than many little CSS files.

Images are easily added to CSS or HTML through the use of the <img> tag. That means there is no opening and closing tag, and everything with between the two brackets. Find the simplified URL of the photo you desire, and insert into between the brackets with the img on the far left.  You can find these URLS easier by right clicking any photo and clicking “Copy Image Address.”

Example:

<img src=”smiley.gif” alt=”Smiley face”>

To add a YouTube video to your website, simply go to the desired video. Once on the page, click on the ‘Share’ button below the video. You will then have several options to choose from, select the “Embed” option and you will see HTML coding. Select the entire code and copy it. Then go to your coding for your web page and paste in the code to the desired location on the page. you may change the dimensions of the video by altering some of the code. If you look before, you will be width=”xxx” height=”xxx”. You may change these dimensions to those any you like.

Example of YouTube embed code:

To optimize videos for the web, the videos should use the appropriate codec, it should be short (12-30minutes), and small in dimension. Videos can be 320×240 pixels minimum, however if the dimensions are any smaller, it would become difficult to view. If viewers have high speed connection, larger video dimensions can be offered. With larger video dimension, you must use a data rate formula to maintain the quality of the video.

Data Rate= (frames per second) X (movie width) X (movie height) divided by 29000

To maintain quality, up the data rate in proportion to the image size. Remember that doubling image size (320×240 to 640×480) requires a 4X (not 2X) increase in data rate.

The video should be short rather than a 90minute movie because incorporating the video onto a webpage can take a while to upload. It can also take a while for it to load for the audience. To keep videos short, delete unnecessary scenes that are not essential to your topic.  After editing, experiment with different codecs and find which one creates the smallest acceptable file.

There are multiple ways to incorporate a video on to your webpage. One of the most popular ways, is via Youtube. Simply upload your video onto YouTube, grab your embed code and paste the code into your html code. The second method is inline video; this is similar to linking original pages to your website. Start by locating the video on your computer then link it using the html code:  <img=”video.avi”> Another option is using plug ins.

Sound/audio can be incorporated through MP3 files and the use of the <audio> and <audiocontrol> tags. These however are not excepted by internet explorer, but is by many other popular web browsers such as Chrome. You would need the open with <audio> and insert a <source src=”(audio file name)”type=audio(file type)”> for the file you would like. And close off with <Audio Control>

DO’S

DON’T’S

Maintain a theme throughout

Disorganization

Make your point clear to the viewer

Exaggerate/exceed color or fonts

Choose a color scheme visually appealing

Fill content strictly with images

Set up an easy navigation system

Fill page with too much text

Choose nice fonts and text is easily readable.

Forget to cite your sources

Make a blog on a topic you are passionate about too

Make a blog that bores you

The most common screen resolution is 1024 x 768, therefore you should optimize your webpage to that resolution. However,screen sizes vary and your webpage should be able to use a variety of resolutions such as 800 x 600 or 1280 x 1024 etc. Liquid layouts should be used, liquid layouts stretches to the user’s window.

When designing for mobiles, web pages should be kept simple. Web pages on mobile devices have a limited amount of space and resolution for content. If the web page is overcrowded with content, it makes the functionality difficult. Keep in mind people download and use your mobile apps/web page because they need info on-the-go, the user should be able to access what they’re looking for with minimum taps, swipes, and attention required.

Sources:

Chastain, Sue. “Which Graphics File Format Is Best To Use When?” About.com Graphics Software. About.com, n.d. Web. 10 Nov. 2013. <http://graphicssoft.about.com/od/graphicformats/f/summary.htm>.

Nela, Dunato. “Optimizing Images for Web.” inObscuro. 2012.

<http://inobscuro.com/tutorials/optimizing-images-for-web-35/>

Sharma, Raman. “5 Easy & Effective Tricks To Make Your Website Load Faster.” All Useful Info. Disqus, n.d. Web. 10 Nov. 2013. <http://allusefulinfo.com/5-easy-effective-tricks-to-make-your-website-load-faster/>.

“HTML Images”.w3schools. np.nd. Web. 13 Nov 13.

<http://www.w3schools.com/html/html_images.asp>

Clark, Scott. “How To Add a YouTube Video to Your Web Site.” HTML Goodies. Developer.com, n.d. Web. 10 Nov. 2013.

<http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061>.

“Web Video Optimization tips” Website Optimization. np. 29 Jun 07. Web. 13 Nov 13. <http://www.websiteoptimization.com/speed/tweak/video/>

“HTML5 Audio”. w3schools. np.nd. Web. 13 Nov 13.

Stone, John. “20 Do’s and Don’ts of Effective Web Design.” Web Design Ledger

RSS. <http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design>

Shaun Anderson.”Best Screen Resolution to Design Websites”. Hobo Web. 13 Nov 13.

<http://www.hobo-web.co.uk/best-screen-size/>

Oleg Lola. “10 Tips for Designing a Mobile-friendly Website”. Sitepoint. 13 Nov 13.

<http://www.sitepoint.com/10-tips-designing-mobile-friendly-website/>