Month: August 2015

What is Markup?

A document file will contains plain text in the form of ASCII characters that anyone can read. However, reading and sending across internet will require common document format.

Markup languages have been developed from Standard Generalized Markup Language (SGML), creating tags that can be embedded to the contents of the document. These tags provide extra meaning and allow the web browsers to display them as a form of web pages with appropriate formatting structure.

Hyper Text Markup Language (HTML) is an example of a widely known and used markup language. HTML is the framework used to create web pages on the World Wide Web. HTML code is made up of characters inside angled brackets- known as HTML Element. Each element consists of two Tags: an opening tag and a closing tag (The closing tag has an extra forward slash in it.)1

Each HTML element will perform their specific function.

  • Layout the documents, e.g. <h1> to <h6> (for heading Level 1 to 6), <br> (perform a line break), <p> (defines a paragraph).
  • Employing Uniform Resource Locators (URLs) for links to other HTML documents, e.g. <a> (Anchor tag). These hyperlinks helps user in navigating the web.
  • Embed Images, audios, videos, program (in JavaScript, Flash or Applet). The multimedia web pages enrich user experience.

Note that the tags will be invisible to the user when you are viewing through a browser, but their effects can be seen on the page.

 

An example of a HTML page structure:

structure code

Html: The root element that contains all the other elements

Head: Contains information about the document

e.g. <title> shown in the top of the browser where you type in URL.

<meta charset= “utf-8”> specifies the character encoding

Body: Actual visible content of the document

Footer: Authorship, Copyright, Contact, Sitemap and back to top links

 

Cascading Style Sheets (CSS)

CSS provides the means of separating page content from page appearance.It uses rules to control the styling and layout of web pages.

E.g. Control the color of the text, the fonts to use and the size of those fonts, adding background colors to pages, background images, and how different elements are positioned on the screen.

CSS can apply style rule to more than one element at a time. A key benefit is that any changes made to CSS style rule will affect all elements that are associated with that rule.

 

An example of a web site illustration: Marina Bay Sands – Singapore

Layout of the contents flow sequentially from top to bottom:

Header: consisting of company logo and navigation panel

A Hero Element: specific type of large web banner on a homepage which is often the first visual a visitor encounters on the site

Main Body: displaying images link where you can click to access more information from another html document.

Footer: site, connect to social media, inquiries hotline

post

Without CSS, the web page will look like this:

screenshot-www.marinabaysands.com 2015-08-26 23-13-20

 

References:

Ray White(2004) Markup Languages

http://whitefiles.org/b1_s/1_free_guides/fg2cd/pgs/g03.htm 

Jon Duckett(2011) HTML & CSS

http://www.htmlandcssbook.com/images/press/book-paragraph.pdf

David Gould(2011, October 17) HTML5 and SEO: New Strategies for Optimizing

http://www.verticalmeasures.com/search-optimization/html5-and-seo-new-strategies-for-optimizing-code/

W3Schools Online Web Tutorials

http://www.w3schools.com/

Marina Bay Sands – Singapore Hotel

https://www.marinabaysands.com/

What is Markup?

Speaking about markup, it goes way back to the history of document formatting. Document markup is the process of adding codes to a document to form the structure of a document or the format in which it is to appear. The internet which has a network of webpages acts as a communication platform. These webpages need a common document format in which users navigate the web. One common document is the Hypertext mark-up language (HTML).

HTML uses different tags such as <body>, <div>, and <p> to layout the webpage and other tags such as <em> and <span> to give structure to the page. The latest HTML version is HTML5. Below is a basic HTML5 layout.

html layout

The most interesting new elements are new semantic elements like <header>, <footer>, <article> and <section>. New form control attributes like number, date, time, calendar and range. New gaphic elements: <svg> and <canvas>. New multimedia elements: <audio> and <video>.

Many applications are now rely more on HTML5 as it has more to offer. Many applications that were built for other platforms are being rewritten to support HTML5 applications. These are some of the examples of apps that uses HTML5.

HTML5 app No. 1: HTML5 slide apps

slide app1slideapp2

There are more than half a dozen HTML5 libraries for building slide decks in HTML instead of the well-known PowerPoint and two examples are fathom.js and reveal.js. These slide apps are able to change viewpoint by panning, twisting, turning or even rotating in 3D making them attractive, impressive and eye catching compared to the traditional PowerPoint. The core of the program uses basic HTML to lay out slides in DIVs given absolute coordinates. While designing slides, new HTML5 additions to CSS layout engine and canvas object are available for use.  Partnering with JavaScript, graphics can be drawn.

HTML5 app No. 2: Aviary

aviary2

Aviary is an impressive Photo Editor using JavaScript and HTML. Many important tools are available as buttons for any application that runs in your browser. This is a free application that provides more than what an average person require in a photo editor. Aviary uses HTML5’s Canvas object and it offers basic ways of drawing text and lines and a number of web apps even use these features to draw graphs.

HTML5 app No. 3: Scribd

Scribd

Scribd started out as a detailed Flash application for displaying documents. Its goal was to become the leading repository for documents on the Web, and only Flash has the font support and precise placement required to render accurately the wide range of documents of the world.

Today, with the two major features of HTML5: Web fonts and canvas, Scribd can function just like Flash. Web font enhancements have made it possible for Scribd to better capture fonts used in documents.

The improved HTML5 canvas enables Scribd to draw these letters and other bitmaps at arbitrary positions on the screen. Scribd’s HTML5 version is now simpler because there is no longer issues with the incompatibilities caused by using the Flash plug-in. The other features of the browser also work with the documents – unlike using the Flash plug-in. Users can select sentences or words directly with mouse clicks. Voilà. Complex documents are now treated just like regular websites.

References:
Peter Wayner(2012) 7 apps making the most of HTML5 from

http://www.infoworld.com/article/2615639/html5/7-apps-making-the-most-of-html5.html

Dennis G. Watson(2005) Brief History of Document Markup from https://chnm.gmu.edu/digitalhistory/links/pdf/chapter3/3.19a.pdf

W3schools.com (2014) What is New in HTML5? from http://www.w3schools.com/html/html5_intro.asp

Jennifer Marsman (2011) HTML5 Part 1: Semantic Markup and Page Layout from http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx

Featured

AY1516 Semester 1

This blog serves as a writing platform for current CS2024 students (if you’ve been unceremoniously kicked off, I apologize). I’ll be reading through anything posted up here and keeping track of interactions; online interaction on this blog will contribute to your Attendance and Participation grade. Welcome to the new semester.