All CategoriesFull stack Web Development

Building Blocks of Web Page

In this blog we will discuss about the necessary steps to follow while creating the web pages. Before discussing about the steps lets  understand what are static and dynamic web pages.

What Are Static and Dynamic Web Page

The static web page is stable which means the content of the page will remain the same every time the HTML file is loaded into the web browser. HTML language is responsible to prepare the static web contents.
Dynamic-web page updates and receive live responses from the web server. Example of Dynamic web page is flipkart or Amazon websites.  For time being do not worry about how to get dynamic response in the webpage because we will focus on preparing and discussing this topic in next series of this blog.
Now lets understand how to create a static web pages using basic HTML tags.

What Are Tags

Tags are words or characters represented inside angle brackets. They are responsible for the preparation of the structure of the web page. Tags like paragraph <p>, heading <h1>, line break <br>  are some of the basic tag elements.Tags share parent and child relationship just like ancestor and descendant relationship in code. If you understand this relationship, then it’s easy to prepare any complex web page. Tags help us to define the content of the web page with providing the  meaningful structure. The below screenshot will depict the relationship in HTML tags structure.

Document Root <html>: When your web page is loaded in to the browser, the HTML file is described as HTML Document. Browser interprets and parse all the HTML elements internally to render your document in the web page. <html> is the root element. Document is a programming API for HTML. It defines the logical structure of documents and the way a document is accessed and manipulated.
Element : Everything in html is an Element which is described in the above screen. Head and body are the two default  sub child of the Document Root .
Every element will create their own family tree. example <p> tag describes the Text Node and <h1> describe their own Text Node. They are the family of a  <body>tag who is the descendant of <p> tag and <h1>tag.
The below screenshot represents the basic building block for creating a simple web page. Let us study this in detail.

HTML5 have new tags called semantic tags which will control the look and fill of the document. It is used to describe the proper presentation of the web page using HTML tags. The new semantic tags introduced in HTML5 are,
<header> – This element help us to create the top most part of any web page. It will describe the heading.

<nav> -This element allows the creation of navigation list in horizontal and vertical formats. In the above screenshot you can find the list items. It has Courses (with dropdown icon), Centers, Corporate, Reviews, Free Resource, Login and Enroll Now button. Navigation bar is in the header section of web page. We can also prepare vertical navigation bar, using nav tag and your navigation  depends on the design structure of the web page.  
<article>-HTML5 use article tag for representing contents. However, previous HTML versions used div tag for representing content description about blog or any web page document. Example for article tag can be forum post, magazine, newspaper article.
<section>-Section tag defines sections in a document. Examples of sections would be chapters, various tabbed pages in tabbed dialog box, or the numbered sections of a thesis. A website’s home page could be split into sections for introduction, news items, and contact information.
<aside>– Aside tag represent the sidebar or callout boxes. They represent outside the section tag. Author information, related content, advertisement, website newsletter comes with in the sidebar.
<footer>- Footer tag represent the bottom part of the website where we can find all the necessary information been represented inside the footer tag.

In the above screenshot we have added our Acadgild website footer which provide all the necessary information inside the footer tag.
Now let us understand with writing code in which we should know how to use semantic tags for preparing a static website. The below steps will describe to prepare static web page from scratch.
For writing the HTML code we need any text editor. In Industry people use Sublime Text editor, notepad++,Visual studio code. In this blog we will be using Sublime Text editor:
Step 1: Please click on the link SublimeText  to download.
Step 2: Create a folder in any directory of your computer system.
Step 3: Open Sublime Text editor go to toolbar select Project>Add Project to a folder.
Step 4: Right Click on to the folder which is added into the sublime text.
Step 5: Save the file as index.html.
Step 6: Now let us write our HTML code. Refer the link to find the logic of this created web page.
Let’s check how the browser interprets the first created web page.

Explanation of the code:

The structure starts with <body> tag. The entire code content is under the body tag.
Let discuss each line of code in detail

  • <! DOCTYPE> – All HTML files are declared with <! DOCTYPE html> and it is not an element or a tag in HTML. It is a standardization of HTML5 version.
  • Opening <..> and closing tag <…/>- HTML starts with an opening tag <html> ends with </html>.  Every tag opens in the same format and closes in the same format as well.
  • The ‘head’ is a vital part of the HTML element which contains the ‘title’ of the webpage and ‘meta’.NOTE: ‘Meta’ is an element introduced in HTML5 that describes the internal information to the browser. ‘charset’ is the attribute of meta tag which defines the encoding format of the HTML file and provides the internal information to the browser at the time of parsing.
  • <body> is a tag and a visible part of the entire HTML document.
  • The header is a child of the body which is the heading part of HTML.

  • h1 is a tag to represent the heading. The font size of h1 content will be large.
  • Nav is an element which represents the navigation. It provides the nesting of each list item element.
  • ul is an element which represents the unordered list and surrounds the list items.
  • li is an element which represents the list for preparing navigation content items.
  • aside is an element which represents the side component of a website. Aside tag surrounds the websites important links and information, advertisement and external links.
  • article tag is an element which represents the entire content of the page.example forum post, magazine, newspaper.
  • <section> tag is an element which represents a section of a document. It an individual component of a website such as a header , footer and other section of the document.
  • <br> tag is broken element tag which will break one line and provides space for the next line.
  • center tag is an element which aligns any element in the center of the web page.


Footer tag will define the lower part of the web page. In the above screenshot, footer tag is in the middle, which means that we have used one more element as a <center> tag which provides a structure of footer in the middle of the web page.

We discussed about the new elements of HTML. The main idea of using the HTML5 is avoiding the div tag for building the web page. Writing a lot of div tag, leads to confusion in the structure of the web page. So, avoid including numerous div tags on the web page. Use new semantic for preparing a good structure.
HTML5 is the latest version that will help the construction of web pages with clear semantics. The above screenshot showcases a simple and organized web page structure. It also displays the difference between earlier HTML versions and HTML5 version.

Conclusion:

Thus, to summarize the concepts learnt, we understood how to structure the content by using HTML5 semantics elements as header, nav, section, article, footer. In the coming series blog, we shall study in detail about the usage of each of these elements.

Related Popular Courses:

ONLINE DEVELOPER TRAINING

DEVOPS CERTIFICATION

CRYPTOCURRENCY MINING

DATA SCIENCE EDUCATION

GOOGLE ANDROID LEARNING

 

Tags

Som

is a full-stack web developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 4 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn full-Stack web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close