HTML learn to design web page

HTML stands for HyperText Markup Language, which is used to create web pages.

HTML defines the structure of the web page, HTML was created by Tim Berner Lee, also known as the inventor of WWW (World Wide Web).

Software required to develop web pages?

  • Code Editor
  • Web Browser

Code editor

This software is used to write the code of programming languages like HTML, PHP, Python, etc.

Some of the most popular code editors are Notepad, Notepad++, Sublime Text 3, Visual Code Studio, atom

Web browser

This software is used to run web pages.

Structure of web page

<!DOCTYPE html>
<html lang="en">

<head>
<title>Structure of web page</title>
</head>
<body>
<p>
Structure of web page.
</p>
</body>
</html>

Note:

Save the file as First_page.html

Where

<!DOCTYPE html> tells to browser about the standard of the web page and ensures to support all HTML5 tags.

<html lang="en"> define web page language to english, it is also root of web page.

<head> it is called meta section of web page which contain all meta tags and resource file links like <title>, <link>, <script>, etc.

<title> define the title of the web page that displays at the title bar of the browser.

<body> it is the main part of the web page where actual data of application displayed and <body> tag define sectioning root of the application.

Content sectioning tags in HTML

  • <address>
  • <aside>
  • <article>
  • <header>
  • <footer>
  • <h1> to <h6> all heading tags
  • <main>
  • <nav>
  • <section>

<address> tag

This tag indicates about enclosing tag contain contact informatioin, address about person, people's, and organisation.

Example

<address>
24 Floor, Gandhi Road Delhi.
</address>

<aside> tag

This tag indicates the enclosing tag contains information that is indirect to the main content.

Example

<aside>
Find best resource at https://www.freecodepoint.com
</aside>

<article> tag

This tag can be used to show forum posts, blog posts, and stories.

Example

<article>
.... here can write story, post 
</article>

<header> tag

This tag contains introductory information about the web page and company logo, search form, etc.

Example

<header>
<h1>FreeCodePoint.com</h1>
</header>

<footer> tag

This tag contains website copyright data, about the author, links to related documents.

Example

<footer>
2020 All rights are reserved.
</footer>

<h1> to <h6> heading tags

Heading tags are used to writing the heading of web pages. <h1> is top-level heading and <h6> is lower-level heading.

Example

<h1>Heading1</h1>
<h2>Heading1</h2>
<h3>Heading1</h3>
<h4>Heading1</h4>
<h5>Heading1</h5>
<h6>Heading1</h6>

<main> tag

This tag contains the dominant content of the body of a document.

<nav> tag

This tag represent a section that contains navigation links.

Example

<nav>
<a href='/login'>Login</a>
<a href='/register'>Register</a>
</nav>

<section> tag

Represents a section of the web page.

Example

<section>
A part of section
</section>

Text tags

These text tags define data.

  • <blockquote>
  • <div>
  • <dl>, <dt>, <dd>
  • <ol>,<li>
  • <ul>,<li>
  • <p>
  • <hr>
  • <pre>
  • <figure>
  • <figcaption>

<blockquote> tag

used to quote a message or passage.

Example

<blockquote>
<p>
 I am not handsome but I can give my hand to someone who need help.. Because beauty is required in heart not in face!
</p>
<footer>
– A. P. J. Abdul Kalam
</footer>
</blockquote>

<div> tag

It is called a division tag, also called a container tag, that has no effect on content like <p> tag.

Example:

<div>
Dream is not that which you see while sleeping it is something that does not let you sleep
</div>

<dl>,<dt>, <dd> tag

<dl> stands for description list, <dt> stand for data terms or names, <dd> stands for description data.

<dl> create description list

<dt> create data terms

<dd> describe data or terms.

Example:

<dl>
<dt>Dream, Dream Dream. Dreams transform into thoughts and thoughts result in action.</dt>
<dd>- A. P. J. Abdul Kalam</dd>

<dt>My Lord,
Never let me climb so high
That I am unable to embrace another stranger,
Deliver me ever from such arrogance</dt>
<dd>- Atal bihari vajpayee</dd>
</dl>

 

<ol>,<li> tag

<ol> tag stands for ordered list, that is display an ordered list, and <li> stands for list.
Note: <ol> tags has attributes type, start

the type attribute has value one of the given value [1, a, A, i, I]

Example

<h2>Popular Web Browsers</h2>
<ol type="A" start="3">
<li>Google Chrome</li>
<li>Microsoft Edge</li>
<li>Opera</li>
<li>Mozilla Firefox</li>
</ol>

 

<ul>,<li> tag

<ul> tag stands for unordered list, that is display unordered list, and <li> stands for list.
Note: <ul> tag has attributes type

The type attribute has value of the given value ["disk", "circle", "square"]

Example

<h2>List of application softwares</h2>
<ul>
<li>MS Word</li>
<li>MS Excel</li>
<li>MS Power point</li>
</ul>

 

<p> tag

This is called paragraph tag, mainly used to write paragraphs, posts, articles, it is also called a container tag.

Example

<p>
All physical components which are attached to the computer are called Hardware.
</p>

 

<hr> tag

<hr> tag stands for Horizontal tag, this tag insert an horizontal tag.

 

<pre> tag

This tag display data as write within this tag, it can be used to display formatted text on the web page.

Example

<pre>
   *
  ***
 *****
</pre>

 

<figure> tag

This tag represents self-contained content, with optional <figcaption> tag.

<figcaption> tag

Describe the rest of the content of its parent tag, also represents caption or legend for content.

Example

<figure>
<img src="yoga.jpg" alt="Yoga">
<figcaption>Yoga</figcaption>
</figure>

 

Inline semantic tags

Inline tags mean a tag that has an effect in a line and has no 100% width is called inline tags.

and those tags that describe its meaning to both browser and developer are called semantics tags.

Popular semantics tags are:

  • <small>
  • <strong>
  • <a>
  • <span>
  • <code>
  • <time>
  • <mark>
  • <em>
  • <br>
  • <abbr>
  • <cite>

<small> tag

use to write small text line print, copyright content in small format.

Example:

<small>
&copy; All rights are reserved.
</small>

<strong> tag

<strong> tag create the importance of text and makes text some bold, it is also used to display a text for seriousness, urgency, and important text.

Example

<p>
Welcome to <strong>FreeCodePoint.com</strong>
</p>

<a> tag

It is called an anchor tag, which is used to create an internal, external link.

<a> tag has three main attributes.

  1. href   [ used to create a link ]
  2. name [used to create bookmark ]
  3. target [used to open a page in same, new tab ], has two value _blank (open a link in a new tab), _self (open a link in the same tab)

Example

<a href="https://freecodepoint.com" target="_blank">Freecodepoint.com</a>

where href is hypertext reference which specifies an address of source where the user will visit after clicking on this link and target="_blank" specify where a link will open, as you can see we have write _blank, it means this link file will open in new tab.

<span> tag

This tag is an inline tag, has an effect in a current line, can be used to format some text within a line, and it has no special effect like italic, underline, and bold tags.

Example

<span>Category: News</span>

<code> tag

This tag format a text and display content as computer code, it is used to write any computer code within it.

Example

<code>
var a,b,c;
a=10;
b=20;
c=a+b;
document.write("sum:"+c);
</code>

<time> tag

This tag used to display time content.

Example

<time>11:09:23 AM</time>

<mark> tag

This is also called a highlighter tag, it highlights contained text.

Example

<mark>H<sub>2</sub>O</mark>

<em> tag

Display emphasizes text like italic or screw text.

Example

<em>Welcome to freecodepoint.com</em>

<br> tag

This tag breaks a line.

<abbr> tag

Abbreviation element used to write acronym and abbreviation of words.

<abbr>Central Processing Unit</abbr>

<cite> tag

Used to describe creative work

Example:

Inventor of WWW was <cite>Tim Berners LEE</cite>

 

Demarcating tags

  • <del> tag
  • <ins> tag

<del> tag

Pass a line through a text

Example

Jeans Rs. 3,000 Rs. 2,000

<span>Jeans <del>Jeans Rs. 3,000</del> Rs. 2,000</span>

<ins> tag

Insert an underline line for selected text.

Example

A computer is an electronic machine.

<p>A computer is an <ins>electronic machine</ins></p>

 

Table tags

Table has number of tags to define table structure on the web page.

  • <table>
  • <thead> - Table head
  • <tbody> - Table body
  • <tr> - Table row
  • <th> - Table heading
  • <td> - Table data
  • <caption> - Table caption, contain text or title about table data.
  • <tfoot> - Table footer

Example

<table border="1" width="100%">
  <caption>Product prices</caption>
  <thead>
   <tr>
    <th>Sr no</th>
    <th>Product</th>
    <th>Price</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>1</td>
    <td>Mouse</td>
    <td>Rs. 300</td>
   </tr>

   <tr>
    <td>2</td>
    <td>Monitor</td>
    <td>Rs. 3000</td>
   </tr>

   <tr>
    <td>1</td>
    <td>Keyboard</td>
    <td>Rs. 800</td>
   </tr>
  </tbody>
  <tfoot>3 Rows</tfoot>
 </table>

Interactive elements tags

  • <details>
  • <summary>

Interactive tags provide tools collapse show hide content.

Example

<details>
     <summary>Computer</summary>
     A Computer is an electronic machine.
</details>

It will provide output as when the user will click on the summary text that is Computer, then the definition of the computer will show to the user.

Post written by: Hemant Singh
© 2020 - 2020 All rights are reserved