Sunday 12 March 2023

HTML First Program

Hello, HTML!

In this post, I will guide you through writing your first program in HTML. Don't worry if you've never written a line of code before, I will explain everything you need to know in simple terms. By the end of this post, you'll have a basic understanding of HTML and be ready to start creating your own web pages. So let's get started and discover the exiting world of web development!

To write and execute HTML code, you'll need a text editor such as Notepad, Sublime Text, or Visual Studio Code. Here are the steps to write and execute HTML code:

  1. Open a text editor.

Some popular HTML text editors:

  • Sublime Text
  • Atom
  • Visual Studio Code
  • Notepad++
  • Brackets
  • TextMate
  • Coda
  • Komodo Edit
  • Bluefish
  • Eclips

Visual Studio Code (VS Code) is a highly recommended text editor for HTML development due to its powerful features and user-friendly interface. It offers a wide range of plugins and extensions that can enhance the HTML development experience, such as Live Server for live preview of web pages, Emmet for fast HTML and CSS coding, and Prettier for code formatting.

Additionally, VS Code offers excellent integration with other web development tools and frameworks, such as JavaScript, CSS, and Node.js. Its built-in terminal also allows developers to run commands and scripts without leaving the editor, making it a convenient and efficient tool for HTML development.

2. Type in the HTML code.

3. Save the file with a .html extension, such as index.html.

4. Open the file in a web browser, such as Chrome or Firefox, by double-clicking on it or right-clicking and selecting "Open with".

5. The HTML code will be displayed as a web page in the browser.

Let us write the code in VS Code editor!

HTML code to print Hello, HTML!.

<!DOCTYPE html>
<html>
<head>
<title>First Program</title>
</head>
<body>
<h1>Hello, HTML!</h1>
</body>
</html>

Let's break it down:

  • <!DOCTYPE html>: This is a declaration that tells the browser which version of HTML is being used. In this case, it's HTML5.

  • <html>: This is the opening tag for the HTML document. Everything that goes in the HTML document is contained within these tags.

  • <head>: This is where metadata about the document is placed, such as the title, stylesheets, and scripts. This content is not displayed on the page.

  • <title>: This is the title of the document, which is displayed in the browser's title bar.

  • <body>: This is where the content of the page goes, such as headings, paragraphs, images, and links. This is what is displayed on the page.

  • <h1>: This is a heading tag that indicates the most important heading on the page.


    Output


  • The above code will display the output on the browser as below



    Wow!!! we have done our first program!


    Practice Time!


    1. Write HTML code to display "I have started learning HTML"?


    Please comment the answer in comments section!



No comments:

Post a Comment

HTML Text Formatting

<i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. How...