Evolution of the Web Page
Plain HTML to highly interactive pages
Last updated
Was this helpful?
Plain HTML to highly interactive pages
Last updated
Was this helpful?
In the beginning, HTML (Hyper Text Markup Language) was just a way to send text documents around the internet with links (hyper text) between documents.
1995 - HTML1.2 - Plain HTML - Text, Links, Images. No tables, to styling, no interactivity.
1999 - HTML 4.01 - Tables, CSS, JavaScript - Beginning of styling, interactivity
2016 - HTML 5 - Audio, Video, Canvas - Advances in styling, interactivity
Modern web pages depend on two additional technologies beyond HTML: CSS and JavaScript. These three components provide the underpinning of every web page.
All the front-end libraries and frameworks are just making it easier to create a web page that contain these three components.
So, let's breakdown these three components and what their individual purposes are.
Technology
Description
HTML
Hypertext Markup LanguageA mark-up language to describe the content of web pages
CSS
Cascading Style Sheet - A stylesheet language used to express the presentation of web pages.
JavaScript
A programming language used for both front-end and back-end development.
A good analogy for the HTML/CSS relationship within a web page is when you are creating a resume.
HTML - Text Content
HTML - Structure
CSS - Style
Personal Info
Work Experience
Education
Extra-curriculars
Headings
Bullet List, Ordered List
Paragraphs
Image
Colors
Fonts
Font-size
Positioning
The site csszengarden.com is a site that educates on the role CSS plays in design and has a link to provide both the HTML and CSS files separately and to view the impact CSS can make.
Go to the site, and click on the HTML FILE link to download the HTML file and then display that file in your browser by dragging in from your file explorer to a web browser window.
Below is the HTML with no CSS applied. Very basic, just text, links, and some standard headings.
Next, click on the VIEW ALL DESIGNS link and browse through each of the different design links on the right. Each of these designs has the exact same underlying HTML content, just a different stylesheet!
First, JavaScript can be used to add what I'd call eye-candy to the site. The content is all there, but it's dull without some action. JavaScript can be used to display the content in visually appealing ways and add movement with advanced animations. Below is an example of JavaScript being use in this capacity.
Users want a Desktop feel. No full page refreshes on changes.
JavaScript communicates with back-end services to retrieve/update data.
Google Search Input - A really good example of this is the Google Search screen. As the user types into the search input box, JavaScript is being used to communicate with the server and seamlessly retrieve and present relevant search strings based on what the user is typing.
Take a look at the Console Developer Tools Network Tab to see the network traffic.
NY Times - Article Comments
Navigate to the article, click on the Comments button at the bottom
JavaScript responds to the button click, sends as request to the server for all of the comments for the article, and then, without updating the entire page, inserts the new section for the user to interact with the comments.
Before JavaScript was added, web pages were "Static".
the web browser just needed to read in the HTML and CSS text files, apply the styles and load the page for display in the browser.
With JavaScript, we need a way to update the "Live" site with changes.
new HTML needs to be incorporated into the site.
The DOM, or Document Object Model, is an in-memory representation the web browser builds of the HTML document, as it loads the initial HTML page request.
The web browser makes this model accessible to web developers through what is called an API (Application Programming Interface), which is just a fancy term to describe the way different software systems communicate with each other programmatically.
Let's say web needed to change the title. The JavaScript code would need to use the DOM API to:
Find the node in the DOM that needs to be changed
Update the value for the title
Most changes are much more complex, replacing big chunks of the DOM.
