Blog 2

HTML5(HyperText Markup Language)

HTML5 is the newest version of HTML which is a standard programming language used when creating websites (W3Schools, 2016). It was introduced in 2014 (W3C(World Wide Web Consortium), 2014) and replaced HTML 4.01, XHTML(eXtensible HyperText Markup Language) 1.0 and XHTML 1.1 (Pilgrim, 2010) which were introduced in 1999(W3C, 1999), 2000(W3C, 2000) and 2001(W3C, 2001) respectively. As Anthes (2012) argues it brings many new features to HTML standard such as access to geolocation, richer graphics and a capability to play videos. As Lawson and Sharp (2012) argue HTML5 enables developers to use functions that were previously accessible only through other applications and make them compatible with every modern web browser and device. Another crucial feature of HTML5 is, according to Lubbers et al. (2011), the ability to evolve rapidly and address real life problems web developers have with developing websites.

Example

An excellent example of a website using HTML5 features is youtube.com. It is natively playing videos in HTML5 player if the web browser supports it (Youtube, 2016)(fig.1).

image02

Figure 1 HTML5 player on youtube.com

Source: Techquickie (2015)

CSS3(Cascading Style Sheet)

Goldstein et al. (2011) indicate that CSS is a style language describing how code written in HTML is presented. Without it, websites written in HTML would have been able to use only one font, one colour of text, one layout, etc. It was introduced in 2006 in its first form and has been under ongoing, open source development(supervised and controlled by W3C) since then (Gasston, 2011). As Frain (2012) argues it gives the developer the opportunity to replace very complicated to use JavaScript with relatively easy to use code to achieve: gradients, shadows, typography, animations and transformations. It makes developing websites much easier and faster for developers, and because of it users without experience in JavaScript can still develop an accessible and responsive website.

Example

A very impressive example of a website created using only HTML and CSS is Mark J. Sebastian’s portfolio available from www.markjsebastian.com(fig.2). It allows the user to move between photos using their mouse and every click or scroll starts an animation of moving.

image00

Figure 2 Mark J. Sebastian’s portfolio

Source: Sebastian (2016)

Notepad++

Notepad++ is an advanced source code editor, exclusive to Windows, that was initially released in 2003 and has been developed as an open source project since then (Mombrea, 2013) with its last update being published only a few days ago, on 20th of November (Ho, 2016a). It is an advanced version of available in Windows Notepad that is programming friendly and better optimised regarding resource usage. Its long features list consists of for example syntax highlighting, auto-completion, compatibility with many different programming languages and zooming in and out(Ho, 2016b).

Example

How a standard layout and colours look in Notepad++ can be seen in figure 3. It is not an actual program but a joke published by the author on the official website of Notepad++.

image01

Figure 3 Notepad++ standard layout and colours

Source: Ho (2016c)

References

Anthes, G. (2012) HTML5 leads a web revolution, Communications of the ACM, 55 (7), pp. 16-17.

Frain, B. (2012) Responsive Web Design with HTML5 and CSS3, Birmingham, Packt Publishing Ltd.

Gasston, P. (2011) The Book of CSS3: A Developer’s Guide to the Future of Web Design, San Francisco, No Starch Press.

Goldstein, A., Lazaris, L. and Weyl, E. (2011) HTML5 and CSS3 for the Real World, Collingwood, SitePoint Pty. Ltd.

Ho, D. (2016a) Notepad++ 7.2.1 released (online).

Available from <https://notepad-plus-plus.org/news/notepad-7.2.1-released.html>

(Accessed 27th November 2016)

Ho, D. (2016b) Notepad++ Features (online).

Available from <https://notepad-plus-plus.org/features/>

(Accessed 27th November 2016)

Ho, D. (2016c) Screenshot (gif), Notepad++ official website (online).

Available from <https://notepad-plus-plus.org/assets/images/notepad4ever.gif>

(Accessed 27th November 2016)

Lawson, B. and Sharp, R. (2012) Introducing HTML5, Berkeley, New Riders.

Lubbers, P., Albers, B. and Salim, F. (2011) Pro HTML5 Programming, (2nd ed.), New York, Springer Science+Business Media, LLC.

Mombrea, M. (2013) Tools we love: Notepad++ (online).

Available from <http://www.itworld.com/article/2833295/open-source-tools/tools-we-love–notepad–.html>

(Accessed 27th November 2016)

Pilgrim, M. (2010) HTML5: Up and Running, Sebastopol, O’Reilly Media, Inc.

Sebastian (2016) Photography by Mark J. Sebastian – Portraiture (online).

Available from <http://www.markjsebastian.com>

(Accessed 27th November 2016)

Techquickie (2015) HTML5 as Fast As Possible (online film).

Available from <https://www.youtube.com/watch?v=IsXEVQRaTX8>

(Accessed 26th November 2016)

W3C (1999) HTML 4.01 Specification W3C Recommendation 24 December 1999 (online).

Available from <https://www.w3.org/TR/html4/>

(Accessed 25th November 2016)

W3C (2000) XHTML™ 1.0: The Extensible HyperText Markup Language A Reformulation of HTML 4 in XML 1.0 W3C Recommendation 26 January 2000 (online).

Available from <https://www.w3.org/TR/2000/REC-xhtml1-20000126/>

(Accessed 25th November 2016)

W3C (2001) XHTML™ 1.1 – Module-based XHTML W3C Recommendation 31 May 2001 (online).

Available from <https://www.w3.org/TR/2001/REC-xhtml11-20010531/>

(Accessed 25th November 2016)

W3C (2014) HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Recommendation 28 October 2014 (online).

Available from <https://www.w3.org/TR/2014/REC-html5-20141028/>

(Accessed 25th November 2016)

W3Schools (2016) Introduction to HTML (online).

Available from <http://www.w3schools.com/html/html_intro.asp>

(Accessed 25th November 2016)

Youtube (2016) YouTube HTML5 Video Player (online).

Available from <https://www.youtube.com/html5?gl=GB>

(Accessed 26th November 2016)

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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