Learn With Steem Contest: Introduction to Web design with HTML5

image credit: pixabayedited with pixellab

Introduction

Computing started by using stand-alone computers to perform different computing operations. Later organizations began to connect their computers to share data and communicate, then they came an idea of creating a network. Networks like LAN (Local Area Network), was created but worked for small geographical area, then MAN (Metropolitan Area Network) but was able to cover cities and then WAN (Wide Area Network) emerged, this time it was exactly what was needed because it connects LANs and MANs across the globe. WAN raised the need to share data across the globe rather than within an organization or locality. This resulted in the evolution of Web also known as World Wide Web (WWW), with this multiple computers are connected to each other irrespective of geographical locations.

Knowing that there are some website design templates available, one shouldn't lack the knowledge or the concept of how those designs are made and the technicalities around it.

Concept of HTML

Hypertext Markup Language (HTML) was introduced in 1990. It's a standard language to read document in a browser. It has serval version, ranging from version 1.0 to 5.0.
HTML 5 was recommended as a standard language by W3C in 1997. HTML 5 was the next version after 4.0 and was the new standard. Majority of the browsers support HTML 5 element and Application Programming Interface (API).

Terms Associated with Web design

Web page is a single document file that when collated becomes a website. Web pages are stored on a Web server to make them available on the Internet for the users.
Web server is a computer with high processing speed and connected to the Internet, and is used to host and display the Web pages on a Web browser.
Web browser displays the Web pages using the HTTP protocol e.g Firefox, Opera, Safari, Internet Explorer, Ms Edge etc.
HTTP is a protocol that specifies how a Web page will be retrieved from the Web server.

Steps to view a Web page in a browser are as follows:

1. User specifies the Uniform Resource Locator (URL) of Web page in a browser.
2. The client browser sends the URL request to the appropriate Web server.
3. Web server processes the request and sends the Web page as a response to the browser.

source

Categories of a website

Websites are divided into two major categories which are:

• Static: These are informational sites, contents remaining unchanged, it consists of content such as text, images, videos and so on, it focuses on content presentation, and its simple to design as it provides no interaction.

• Dynamic: This allows customization of content and its appearance in browser, with up-to-date and reliable data, it generates content on-demand when user provides input and allows user interaction.

Technologies used for creating dynamic Web sites are as follows:
JavaScript: A scripting language used for creating dynamic Web pages.
CSS: Specifies the formatting of a Web page for both static and dynamic Web pages.
Extensible HTML: When used with JavaScript, displays the required user-defined data each time the Web page is loaded in the browser.
Dynamic HTML uses JavaScript and CSS to make dynamic Web pages and transform the look and feel of the Web pages.

designed with pixellab

Layout of a Page in HTML 5

HTML 5 contains a head section containing the unseen elements and the body section containing the visible elements of the document.
Earlier HTML provided different tags to build and organize the content in the body of the document.
The table tag was an element often used to present the data in an organized manner.
The div tag was another element used to display contents such as images, links, text, menus, forms, and so on.

source

Cascading Style Sheets (CSS): This provide visual styles to document elements with HTML. Is a rule based language that specifies the formatting instructions for content in an HTML document. It's purpose is to separate content from its formatting, so that it can define the layout and formatting of content in a separate file with a .css extension while allowing rules from different .css files to be merged or edited.

N/B: This task of combining and matching rules from different files is referred to as cascading.

jQuery
Is a JavaScript library supported on multiple browsers. It simplifies the design of client-side scripting on HTML pages.
Library is based on modular approach that allows creation of powerful and dynamic Web applications.

Summary

HTML5 is cooperative project between World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). New features of HTML5 would include tags such as canvas, article, nav, header, footer, section, audio, video and so on. Some of the technologies used for creating dynamic Web sites JavaScript, CSS, XHTML, and DHTML. The major browsers, such as Chrome, Firefox, Opera, Safari, Internet Explorer, and so on, are trying to add the new HTML5 features to the latest version of the browsers.

I am inviting @itymartin, @abiphil and @celebliss to comment of this informative and educative contest organised by @fredquamtum