HTML

HTML Lesson 6: How to Create New File in HTML?

With this Knowledge bit, we are going to learn how to make a new file in HTML and underlying structure of HTML.

How to make a new file in HTML

So to start working with HTML simply go to “Sublime text editor” and make a new file, save a file and name it as “First Page.html” (Note: .html is really important)

 

Why are we writing .html here? Because, when you open the chrome it tells Chrome to treat it as an HTML file, now take the first tag in Sublime as <h1> and write a content between the openings and closing tags

New File in HTML

Here the Sublime highlighted the tags by itself because it knows that it’s HTML. Save this again, and Open the file with Google Chrome.

Editing the New File in HTML

 

Remember the HTML is just text but our browser interprets and turns it into something like this

 

The general rule

 

When this .html is opened in Google Chrome you will get the page like this.

 

First tag in HTML

Here, it is not showing the actual HTML code, but showing a nice visual text. Now if you want to see your page actual source simply Right click on your page and then Click on “View Page Source” on chrome.

 

You will get the HTML code of this page as you can see below in the screenshot.

BUT <h1> This is My First Tag <h1> is not valid document but it is just a right tag. We are missing the underlying structure that every page needs like this:

HTML Structure

Every HTML document we create will start with this template, it’s a lot compared to what we have done so far.

About HTML structure:

  • It is always the same
  • The sublime text editor has a shortcut that gives us this structure.

How to get HTML Structure in Sublime Text 3

  • Type “HTML” and press “Tab”. You will get the structure automatically
  • Save the document

Understanding the HTML Structure

<!DOCTYPE html>

DOCTYPE having no closing tag, this tag indicates that your HTML content used HTML5 (The newest version).

<head>

Provides general information (metadata) about the document, so things like font files, our stylesheet, JavaScript file all those go in our head tag.

<title>

Defines the title of the document, shown in a browser’s title bar or on the page’s tab. It can only contain text, and any contained tags are ignored.

<body>

It represents all the contents of the HTML document.

Comments in HTML

Comments can be used to explain the purpose of the source code. Comments make it easier to understand code when you are editing at a later date. Comments are not rendered by the browsers.

  • This element is used to add a comment to an HTML document.
  • HTML comments are visible to anyone that views the page source code, but are not rendered when the HTML document is rendered by a browser
  • It starts with <! — And ends with ! –>
    • < (lesser sign) ! (exclamation mark) and – – (two hyphens)

Practical Illustration of HTML Structure and Comments

<title>

<body>

<–! Comments !–>

Save this file and open in Google Chrome like the previous method

Result

 

Source Code

 

Conclusion:

With this Knowledge bit, we have learned how to make the new file in HTML and underlying structure of HTML. In the next knowledge bit, we are going to learn basic tags of HTML.

Click to comment

Most Popular

To Top