In this blog we will discuss about the necessary steps to follow while creating web pages. However, before discussing about the steps, let’s understand what static and dynamic web pages are.
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 in the web browser. HTML language is responsible for the preparation of the static web content.
Dynamic-web page updates and receive live responses from the web server. For instance, let’s not worry about how to get dynamic response in the webpage as we will discuss this topic in the forthcoming series.
Now let’s understand how to create 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 in defining the content of the web page by providing it a meaningful structure. The below screenshot will depict the relationship in HTML tags structure.
Document Root <html>: When the web page is loaded in to the browser, the HTML file is described as HTML Document. Browser interprets and analyze all the HTML elements internally to render the uploaded 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 its 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. This will control the look and feel of the document. It is used to describe the proper presentation of the web page using HTML tags. The new tags introduced in HTML5 are,
<header> – This element helps 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 navigation depends on the design structure of the web page.
<article>-HTML5 use article tag for representing content. However, previous HTML versions used div tag for representing blog content or any web page document. Example for article tag can be forum post, magazine, newspaper article and others.
<section>-Section tag defines sections in a document. Example of section 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.
In the above screenshot is a footer section which provide all the necessary information inside the footer tag.
The below steps will describe how to prepare a static web page from scratch.
For writing the HTML code we need a text editor. In Industry people use Sublime Text editor, notepad++, Visual studio code. For now, let us use Sublime Text editor.
Step 1: Click on the following 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: Write the desired HTML code. Refer the link to find the logic of the web page created.
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 and closes in the same format.
- The ‘head’ is the 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.
- 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 website’s 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 is an individual component of the website such as header, footer and other sections 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. It helps in 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.
Thus, to summarize the concepts learnt, we understood how to structure the content by using HTML5 semantics elements as header, nav, section, article and footer. In the coming series, we shall study in detail about the usage of each of these elements.