Introduction to HTML5

Introduction to HTML5

Introduction to HTML

HTML is the typical markup language for creating Web pages.

So, The question arises what actually is HTML?

  • HTML stands for Hyper Text Markup Language.
  • HTML describes the structure of a web page.
  • HTML consists of elements.
  • HTML elements tells the browser how to display content.
  • We can create static web pages with HTML only.

Keywords:

  1. Hyper Text - It simply means “Text within Text”.
  2. Markup Language - It implies a language which gives layout or is used for applying format to a text document.

Environment Setup

To be able to create a HTML file we don’t require different type of software, a simple text editor is good enough.
For example, Notepad (for Windows) or TextEdit (for Mac).
But in our case, we will be working with VSCode.

HTML Basics

Basic structure of HTML Program

For Example:

<!DOCTYPE html>  
<html>  
    <body>  
	    <h1>My First Heading</h1>  
	    <p>My first paragraph.</p>  
    </body>  
</html>

NOTE: As we know that HTML files are a form of text files, but for them to be able to read by browser we need to save them as “name.html” format.

HTML Documents

  • All documents must start with a document type declaration: <!DOCTYPE html>.
  • The html document starts with <html> and ends with </html>.
  • And last but not the least all the content to be presented on the web page is placed between <body> and </body>.

NOTE: You don’t need to worry if you don’t understand something now we will learn about each and everything as we move forward.

The <!DOCTYPE> Declaration

As the name implies that it is used to represent the document type.
The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

The < html > and < body > Declaration

<html>

The <html> element is the root element and it defines the whole document. It has start tag <html> and an end tag </html>.

<body>

As the name suggests this tag represents the body of the document. And just like <html> tag it also has a starting <body> and ending </body> tag.

HTML Headings

HTML Headings are used to mention or represent headings between a range of <h1> to <h6>.
Where <h1> represents the most important heading while <h6> represents the least important heading.

HTML Paragraph

The <p> defines a paragraph and it also starts with <p> and ends with </p>.

NOTE: It is always required of you to apply the ending tags for the tags that require end tags to show expected result. Otherwise, the result won’t be in required format.

HTML Empty Elements

In HTML there are some tags that don’t need any content to within them to provide the result.
Viz: <br> is a tag that is an empty element a sit doesn’t require any content within it to provide a break in the line.
It can be compared to the new line element (\n) in most of the programming languages.

First HTML Programs

Like every other language we learn we start with the most simplest of the program. So we are going to do the same as we start our journey with HTML.

  • Program for hello World:

    • Open your text editor.

    • Write the program given below:

      <!DOCTYPE html>
<html>
    <body>
  	  <h1>HELLO WORLD!!!!!</h1>
    </body>
</html>

    • Save the file as helloworld.html (or name it according to what you prefer but the extension must be .html as explained above).

    • Open the file in your preferred browser.

      Result:

  • Program showing the usage of heading:

    • Open your text editor.

    • Write the program given below:

      <!DOCTYPE html>
<html>
    <body>
 	   <h1>HELLO WORLD!!!!!</h1>
 	   <h2>HELLO WORLD!!!!!</h2>
 	   <h3>HELLO WORLD!!!!!</h3>
 	   <h4>HELLO WORLD!!!!!</h4>
 	   <h5>HELLO WORLD!!!!!</h5>
 	   <h6>HELLO WORLD!!!!!</h6>
    </body>
</html>

    • Save the file as heading.html.

    • Open the file in your preferred browser.

      Result:

  • Program showing the use of HTML <p> and <br> tag:

    • Open your text editor.

    • Write the program given below:

      <!DOCTYPE html>
<html>
    <body>
 	   <h1>HELLO WORLD!!!!!</h1>
 	   <p>
 		   This was wonderful!!!!!
 	   </p>
 	   <p>
 			Hope I can do something like this again.<br>I feel so good that I did these.   
 	   </p>
    </body>
</html>

    • Save the file as break.html.

    • Open the file in your preferred browser.

      Result:

NOTE: When you make any changes to code you can either refresh the page in the browser and it’ll be the updated version of the code or if you’re using VSCode then you can make use of “LiveServer” extension it will automatically update the page which is opened in the browser so you won’t need to worry about refreshing the page every other time you make changes to the code.


Author: Asmit Kumar Sharma

Comments

Post a Comment