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.)
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.
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:
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
Without CSS, the web page will look like this:
Ray White(2004) Markup Languages
Jon Duckett(2011) HTML & CSS
David Gould(2011, October 17) HTML5 and SEO: New Strategies for Optimizing
W3Schools Online Web Tutorials
Marina Bay Sands – Singapore Hotel