The internet, also known as the World Wide Web, started to really take shapes in the 1980s, and basically has exploded into all aspects in our society. We can find all kind of information in the internet, we can also interact with it, we shop online, we pay our bill, we order food deliveries, we book hotel and airline reservation, we chat, we socialize, … I don’t think we can live without it now.
So have you consider what really happens when when you visit a web site, how information is delivered to you? If you are curious, you can do a “view source” to see the underlying HTML codes. Give it a try, but will probably give you a big headache reading it, as it is usually very complex and long. Today’s web pages are very complex and can deliver very sophisticated user experience to you.
For pure education purpose, I would like to drop back to a simple demo. I will introduce you to a very simple HTML page so that you can look under the hood, but also understand it. Even if you are not technical, or that if you are a student trying to learn to code, I hope that this will provide some insight to you.
An HTML page usually consist of 3 core parts:
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheet) for visual styling
- JavaScript for data manipulation and processing
To illustrate our first example, below is a simple HTML page with embedded CSS and JavaScript code. It has a very simple purpose, just display a ticking digital clock. I prepared this example in Trinket.io. It is interactive, so please feel free to run the code, or make a few changes in the code to see the changed result interactively.
An HTML document is like the envelope that you can put all your contents into. There are different HTML Tags that gives the specific instruction to the we browser. All HTML document consist of the following simple structure like below, and lots of details will go between the header section and the body section.
<html>
<head>
<!-- This is the header section -->
</head>
<body>
<!-- This is the body section -->
</body>
</html>
Most HTML pages now will use some CSS for styling, and JavaScript for data manipulation. They are optional but they will provide more elegant visualization and interactive activities on the page. In our example, both the CSS and JavaScript code is embedded in the same HTML file, so that you can see everything in one page, It is usually a good practice to place the CSS and JavaScript in separate files, which will make your development much more organized.
CSS codes are enclosed with <style></style> and JavaScript codes are enclosed within <script></script>
<Style>
/* This is the styling section */
</style>
<script>
// This is the JavaScript section
</Script>
If you are interested in learning more, here are some links from w3schools:
Hope you enjoy this simple illustration, happy coding !