How to Build Basic HTML by using Formatting tags:

·

6 min read

How to Build Basic HTML  by using Formatting tags:

1. What is Internet ?

The Internet is a vast network that connects computer all over the world. It is also known as network of network.

2.what is the Web ?

The World Wide Web usually called the Web. It is a collection of different websites. A Website is made up of related text, images and other resources, you can access and view websites using a type of application called Web browser. By the part of developing this web application we use HTML.

3. What is HTML?

HTML is actually shorthand for Hypertext Markup Language. It is the language of Web pages that tells a browser how to display certain elements, such as text and images through the use of codes and symbols.

4. What you need to know about HTML to get started :

Setting up a development environment for HTML is relatively easy, and requires only a few necessary tools. Here are the steps to set up a basic development environment for HTML:

  1. Text Editor : text editors include Visual Studio Code, Atom, Sublime Text, or Notepad++. Choose one that suits your needs and install it.

  2. Web Browser : Next, you will need to install a web browser such as Google Chrome, Mozilla Firefox, or Microsoft Edge. You will use your web browser to preview your HTML web pages as you develop them.

  3. Visual Studio code : It is a popular front-end template that will get you started quickly. It includes all the necessary files and folders to get you started with HTML development. To download and install visual studio code ,go through this link code.visualstudio.com/download.

  4. How to open it : Create an empty folder in any drives or Desktop and go to folder - right click-more options --open with vs code

  5. Learn about Git and GitHub:

    GIT : It is a free and open-source version control system that manages and keeps track of your code.

    GITHUB : It is a platformfor developer to store ,share and push there code in public.

    Learn about How toPush Code inGitHub:

    1. First download and install GIT and verify it's version by giving "git -v" in command prompt .

    2. second go to github.com and create a account bysignup. After creating account create a repository init.

    3. Go to vscode accounts icon --click sign in ---choose ur github account and connect itwithvscode.

    4. After connecting vscode with githubnow push your code into it by giving following comment.

    5. \=> Go to terminal---new terminal--enter

    6. \=>Now give your Github Repository commands

    7. \=> git init --- it will initiate git into your folder ,

    8. \=>git add . ---- it add all your files into git,

    9. \=>git commit -m "give message" ---it will commit your git and added a message which you given ,

    10. \=>git branch -m master/main----the branch present in your vscode

    11. \=> git remote add origin---- your repository link,

      \=>git push -u origin --- it push your code into github repository.

The basic HTML structure

The basic HTML structure consists of several elements that form the foundation of any web page. Here are the core HTML structures:

  1. <!DOCTYPE html>: This is the doctype declaration that tells the browser what version of HTML is being used on the page. In modern HTML, this is always set to HTML.

  2. <html>: The <html> tag represents the root element of an HTML page, and it contains all other HTML elements. The opening tag should always be paired with a closing tag, </html>.

  3. <head>: The <head> tag is not visible on the web page and contains metadata about the HTML page such as title, keywords, and script files.

  4. <title>: The <title> tag goes inside the head tag and specifies the title for the HTML page that appears in the browser window.

  5. <body>: The <body> tag contains all the visible content of the HTML page such as text, images, videos, and other HTML elements.

  6. <h1>…<h6>: These are headers that represent the importance of the text on the page. <h1> is the most important and <h6> is the least important header.

  7. <p>: The <p> tag stands for paragraph and is used to enclose one or more sentences of text..

    Text Formatting Tags of HTML :

    In the previous days we learnt how to create a web page with basic elements in HTML. In this section, we are going to learn about how to format the text such as making bold, italic, underline, changing font size and more. Formatting text is very important as well as interesting task in creating web pages.

    • 1.Bold, Italics, Underline:

    • 2. <strong>,<small> and <em> tags :

    • 3. Subscript and Superscript :

    • 4.Inserting and Deleting :

    • 5.Comparison of tags:

1. Bold, Italics, Underline:

<b>, <i>, <u> are the tags to make the text as bold, italic and underline. These are all container tags. You know well about container tags. All container tags required a closing tag. These tags are otherwise known as “Physical Style” tags.

Opening TagClosing TagDescription
<u></u>Text will be Underlined
<b></b>Text will be Bold
<i></i>Text will be Italic

Example:

    <html>
     <head>
       <title> Text Formatting </title>
      </head>
    <body>
      <h1> Formatting tags in html </h1>
      <p> <b>this is used to bold a text </b></p> 
      <p><i> this tag gives italic style to the text </i> </p>
      <p>  <u> It underlines the text. </p>
      <p> <b><i>combination of two tags gives
       bold and italic style together </i> </b></P>
    </body>
    </html>

2. <strong>,<small> and <em> tags :

In addition to bold and italic tags i.e. <b> and <i>, HTML provides <strong>, <em> tags to make the text as bold and italics. These tags are container tags.<small> tag keep text in small size.

Example:

    <html>
    <head>
       <title> Additional Text Formatting Tags </title> </head>
    <body>
           <p> <strong> Welcome to hashnode </strong> <br>
            <em> Welcome to my blogs </em>
    <small>this decresse the size of text</small></p>
    </body>
    </html>

3. Subscript and Superscript :

In HTML, the <sub> and <sup> tags are used to create subscript and superscripts respectively. As like as other formatting tags, this is also a container tag.

The text or number given between <sub> and </sub> will be displayed as subscript. Same as subscript, the text or number given between <sup> and </sup> will be displayed as superscript.

Example:

    <html>
    <head>
       <title> Subscript and Superscript </title></head>
    <body>
     <p>The scientific notation of Water is H<sub>2</sub>O <br>
      (a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></P>
    </body>
    </html>

4.Inserting and Deleting :

The text what you specify between <del> and </del> will be displayed as strike through.

The text you specify between <ins> and </ins> will be shown as underlined.

Example :

    <html>
    <head>
        <title> Inserting and Deleting text </title>
    </head>
    <body>
            <P>I brought <del>Mobile</del> <ins>laptop</ins></P>
    </body>
    </html>

5.Comparison of tags:

A few tags do the same things you have learned so far. For example, <b> and <strong>, <i> and <em>, <u> and <ins> and so on. These tags may be shows the same output, but the usage of tags are varying. The following table shows the usage of this kind of tags.