Let’s Make Our Step Toward Web Development.

Learning HTML helps you build the structure of any website, isn’t it awesome? let’s go through it.

Now, Before Starting Our Programming Journey, We need an editor to write our code. (We can write it in notepad as well, but that will make our developer life challenging)

so, Let’s choose a code editor, below I am writing down some good options.

• Sublime Text: A popular, cross-platform code editor with a vast library of plugins and a minimalistic UI.
• Atom: An open-source, hackable code editor developed by GitHub, with a large plugin ecosystem and customizable interface.
• Visual Studio Code:(We will be using it) A free, open-source code editor developed by Microsoft, with support for debugging, version control, and embedded Git.
• vim: A powerful, terminal-based code editor known for its efficient keyboard shortcuts and steep learning curve.
• IntelliJ IDEA: A proprietary code editor developed by JetBrains, with a focus on developer productivity and intelligent code assistance.
• Eclipse: A widely-used, open-source code editor for Java development with a large ecosystem of plugins and extensions.
• TextMate: A proprietary code editor for macOS, with a “bundle” system for extending its features.

You can choose any of the above code editors (Remember not to love or hate any of them, as each one of them has its pros and cons)

Now we can start with HTML in the code editor:

Create a file and name it index.html or index.htm, as you have understood we can use both .html and .htm extensions for HTML files, but generally, we use .html.

now we can write anything here we want and if we open this file in browser we will see that in the browser.

But we will write it in proper structure and will use the power of HTML.

Now generally emmet comes installed in the code editor, so if we will type ! and press enter. we should be able to see the boiler plate code of HTML.

if it is not working for you, just copy and paste the below code, (we will understand what it is one by one.

    
    
    
    Document


    

This is a basic HTML document that sets up the structure of a web page.

The first line, , is a document type declaration, which tells the web browser that this is an HTML document.

The element is the container for all the other elements on the page, and it has a lang attribute set to "en" for English.

Inside the element, we have the

element, which contains information about the document that is not visible to the user. Inside the element, we have several tags. The first one specifies the character encoding for the document, which is set to UTF-8.

is a compatibility mode tag, this will force Internet Explorer to use the latest rendering engine rather than an older one.

helps make the website look good on all devices (i.e. responsive design), by setting the width of the viewport to the width of the device and setting the initial scale to 1.0.

The

element contains the text that appears in the browser's title bar or tab. The text inside the element "Document" is used as the title of the web page.

The

element contains the visible content of the web page. Currently, it is empty, but this is where you would put the main content of your webpage like text, images, links, etc.

Finally, the closing tag indicates the end of the HTML document.

In summary, this code sets up the basic structure of a web page, including the head section with metadata such as the character encoding, viewport and a title; and the body section where the main content of the webpage will reside.

Let’s see how it is looking in browser

Let’s first replace Document with name Vivek and see how it changing in browser.

As you can see title changed to Vivek in the browser as well, but there is nothing in the body of the browser. because there is nothing in the body tag of HTML as well.

The

tag is an essential element in HTML as it represents the content that will be displayed on the webpage. It's where you put all the visible elements such as headings, paragraphs, images, links, and more.

Speaking of headings, there are six different levels of heading tags in HTML, ranging from

to

. Each heading level decreases in size as you go from

to

. For example,

is the largest heading size and it's typically used for the main title of a webpage.

    
Heading 1

    
Heading 2

    
Heading 3

    
Heading 4

    
Heading 5

    
Heading 6

Paragraph tags, or

, are used to add text and other types of content to a webpage. You can add a title attribute to a paragraph tag, as in

Vivek News

. This title attribute will appear as a tooltip when a user hovers over the paragraph.

  
Vivek News

Hyperlinks, or links, can be added to a webpage using the anchor tag, or . The href attribute is used to specify the destination URL of the link. It's a good practice to use descriptive link text that accurately describes the destination webpage. For example

Learn more about our News research

The tag is used to add images to a webpage. The src attribute is used to specify the URL or file path of the image, and the alt attribute provides alternative text for the image in case it can't be displayed. You can also add attributes such as srcset, sizes and width where srcset is used to define different size of images, sizes attribute which defines how the image will be displayed on the webpage, and width which is used to define the width of the image on webpage.

In summary, the body tag is an essential element in HTML and it’s where you put all the visible elements of a webpage. The heading tags, paragraph tags, anchor tags, and image tags are some of the most commonly used elements within the body section. Each tag has its own specific attributes that can be used to customize the appearance and behavior of the elements on the page.

Here is all the code we have written

    
    
    
    Vivek


    
Heading 1

    
Heading 2

    
Heading 3

    
Heading 4

    
Heading 5

    
Heading 6

    
Vivek News

    Learn more about our News research
    

Let’s see what our web page looks like now :

See, how easy it was to make our first web page.

GitHub Link for Learning Html: https://github.com/viveksinra/FSJS_LEARNING/tree/master/html_only

GitHub Link for Learning FSJS:

https://github.com/viveksinra/FSJS_LEARNING

Hope this article helped you learn something. Please consider to follow me

This article is published w/ Scattr ↗️