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/

Advertisements