Our Blog

In a web development and design industry, it is essential to learn the basic of creating a website. From coding to designing to the whole process of web development, developers and designers should have the knowledge on how to input elements like HTML and CSS, which are necessary for website creation. Moreover, with the vast innovation and wide scope of programming and designing, learning process should be continuous especially since the elements used are evolving. One of the recent advancements that developers find very useful is HTML5, the latest iteration of HTML.

What is HTML?

HyperText Mark-up Language is the primary publishing format for the web written by Tim Berners-Lee, founder of the Word Wide Web Consortium (W3C). It is the basic format for scripting language used to structure and present content on the World Wide Web. With the use of HTML, developers publish documents on pages including hyperlinks, headings, text, tables, photo, etc. From limited tags stuck in content styling and presentation, continuous improvement in the version of HTML included more tags for stylesheets, scripts, frames, embedded objects, accessible features and even the ability of scripting multimedia elements.

In 2004, Web Hypertext Application Technology Working Group (WHATWG) with members ranging from programmers and specification writers sets out to develop a new spec, HTML5. Soon after, the W3C—who was then developing the XHMTL—decided to stop and instead started collaborating with WHATWG in the HTML5 development (Mashable.com).

HTML5

As the new standard of HTML, HTML5 focuses on the needs of application developers that has been improved based on the previous versions. Developers find it easier to use elements for different animations, multimedia and complicated applications using HTML5. Despite the fact that developers have not finalized HTML 5 specifications, there are many exceptional features that they find useful in this latest iteration of HTML.

• HTML5 Canvas.
  This new element of HTML5 supports drag-and-drop of elements into a receiver called a “canvas”. The <canvas> tag is used to draw graphics, on the fly, on a web page. It is a bitmap system wherein everything is drawn as a single, flat picture. It is used for data visualization, animated graphics, web applications and games. (Hawkes, 2010)
  
  Example:
  <canvas id=”canvasName” width=”150″ height=”150″ style=”border:1px solid #000000;”></canvas>

• 
  
• HTML 5 Media Features
  There are different element tags for media contents that are made available in HTML5. Because of the intention to extend multimedia features, video and audio can be embedded in the website with native or customized controls. This includes the following:
• 
  
• Tag: <audio>
• Description: This tag defines sound contents with formats including mp3, ogg and/or wav. With this element, audio controls like play, pause and volume can be added in the audio content embedded in the web page.
• Example:
• <audio src=”audioFileLocation.mp3″>
• This fallback content is displayed only on browsers that do not support the audio tag.
• </audio>

• 
  
• Tag: <video>
• Description: This tag defines video or movie with formats including mp4, webM and/or ogg. With this element, video controls like play, pause and volume can be added in the video file embedded in the website.
• Example:
• <video src=”videoFileLocation.mp4″>
• This fallback content is displayed only on browsers that do not support the video tag.
• </video>
• 
  
• Tag: <source>
• Description: This element allows you to specify alternative video/audio files that the browser may choose from based on its media type or codec support.
• Example:
• <audio controls>
• <source src=”audioSetInOgg.ogg” type=”audio/ogg”>
• <source src=”audioSetInMp3.mp3″ type=”audio/mpeg”>
• This fallback content is displayed only on browsers that do not support the audio tag.
• </audio>
• 
  
• Tag: <embed>
• Description: This defines container for an external application or interactive content (plug-ins).
• Example:
• <embed src=”externalAppLocation.mov” width=”600″ height=”400″>
• 
  
• Tag: <track>
• Description: This defines text tracks for video and audio.
• Example:
• <video width=”320″ height=”200″ controls>
• <source src=”source1Location.mp4″ type=”video/mp4″>
• <track src=”subTitle1_en.vtt” kind=”subtitles” srclang=”en” label=”English”>
• </video>
• 
  

• HTML5 Geolocation API
  It can be used to find the location of the person browsing. This location API can be paired up with Google maps or Bing maps. It is fully supported by most modern desktop and mobile browsers like Internet Explorer, Firefox, Chrome, Opera, Safari, iPhone, Android and even Windows Phone.

• Example:
• function get_location_or_any_function_name_here() {
• if (navigator.geolocation) {
• navigator.geolocation.getCurrentPosition(any_function_name);
• } else {
• //This fallback content is displayed only on browsers that do not support Geolocation API.
• }
• }
• 
  
• function any_function_name(position) {
• var sample_variable_name_latitude = position.coords.latitude;
• var sample_variable_name_longitude = position.coords.longitude;
• //Indicate here the action you want to do on the gathered data above
• }

• HTML5 Web Storage
  With this element, web pages can store data locally within the user’s browser. It is for faster and more secured way of browsing pages without affecting the website’s performance. The two objects used for storing data are localStorage used to store data with no expiration date where in data will not be deleted and will be available the next day, week or year; and sessionStorage, which stores data for one session and allows data to be deleted when users close the browser window.
• 
  
• For: localStorage
• Example:
• //checks if the browser supports localStorage
  if (Modernizr.localStorage) {
  //If browser supports, sample code goes here….
  localStorage.setItem(“bar”, “HELLO WORLD”); //set local storage
  var foo = localStorage.getItem(“bar”); //get sample local storage
  alert(“Local storage has a value of ” + foo);
  } else {
  // This Fallback content is displayed only on browsers that do not support the localStorage.
  }
  
  
• For: sessionStorage
• Example:
• 
  //checks if the browser supports sessionStorage
  if (Modernizr.sessionStorage) {
  //if browser supports, sample code goes here….
  sessionStorage.setItem(“bar”, “HELLO WORLD”); //set session storage
  var foo = sessionStorage.getItem(“bar”); //get sample session storage
  alert(“Session storage has a value of ” + foo);
  } else {
  // This Fallback content is displayed only on browsers that do not support the sessionStorage.
  }

• HTML5 Application Cache
  HTML5 makes it easier for developers to create a web application that will be available even offline with the use of cache manifest file or the AppCache interface. Manifest file specifies the resources that will be cached in the browser that are possible to be retrieved faster. (Srinivasan, 2013)
• Example:
• <!DOCTYPE html>
• <html manifest=”sample.appcache”>
• some page to be cached here
• </html>
• 
  
• CACHE MANIFEST
• # the above line is required
• 
  
• CACHE:
• index.html
• images/IMG_SAMPLE.JPG
• css/style.css
• 
  
• # this line will require the user to be online.
• 
  
• NETWORK:
• *
• # offline.html will be served in place of all other .html files
• 
  
• FALLBACK:
• /index.html /offline.html
• 
  

CONCLUSION:

In the field of information technology, it is important to know the basic elements for website and mobile development. However, the evolution and development of elements like HTML affects the whole process, which needs a continuous effort when it comes to learning. Using improved features from HTML 5 can create more functional, accessible and innovative solutions for website creation even in a more demanding and complex technology. Developers and designers can also maximize their creativity and practice their fundamental skills with HTML5 in the creation of mobile application and game development. HTML5 make it easier for them to create web pages available in iPhone, tablets, and smartphones with its evolving features. Some of mobile devices that are compatible with HTML5 features are iPhone, iPad, tablets and other smartphones powered by Android and Windows.

Tags: co-creation web development, outsource web development, web de, web development, web development philippines