HTML (Hypertext Markup Language) is a markup language used for creating web pages and web applications. It is the standard language used for creating documents and web pages that are displayed in web browsers. HTML allows developers to structure content on a web page, define headings and paragraphs, create links, add images and videos, and much more.
HTML works by using tags to define elements on a web page, such as headings, paragraphs, images, and links. These tags are read by web browsers to display the content in the correct format, allowing the user to interact with the web page. HTML is an essential language for front-end web development, and is often used in conjunction with CSS and JavaScript to create dynamic and responsive web pages.
In this article, we will show you how to write the classic "Hello World" program using HTML. You will learn about the basics of HTML and its syntax, as well as how to create a basic web page.
Setting up Your Environment
Before writing your first "Hello World" code in HTML, you'll need a text editor.
A text editor is a tool that allows you to write and edit text files like the ones used in programming. There are many text editors available, and some are free while others come with a cost.
In this article, we'll simply use an HTML online editor right in your web browser. Simply sign up an account with Lightly IDE and you'll be able to create a HTML project in your workspace by clicking "+ Create Project" and select "HTML" in the project language list.
Besides online editors, you can also download different text editors to use it offline on your computer. Some popular text editors include Notepad++, Sublime Text, Atom, and Visual Studio Code.
Aside from a text editor, you will also need a web browser to open your HTML pages. Basically, most of our computers are already come with web browsers. Nevertheless, popular web browsers available, such as Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari.
With a web browser installed and set up, we are ready to start writing our first HTML code.
Understanding HTML Basics
HTML tags play a crucial role in creating the structure of a webpage. Every HTML document must have a basic structure including an HTML tag, head tag, and body tag.
The HTML tag, denoted by <!DOCTYPE html>, lets the browser know that the document is an HTML file. The head tag contains information about the page such as the title and links to stylesheets. The body tag contains the content of the webpage that will be visible to the user.
When writing a "Hello World" program in HTML, there are several elements that you need to understand. The first element is the "HTML" tag, which tells the browser that this is an HTML document.
Inside the HTML tag, you will find the "head" and "body" tags. The "head" tag contains information about the document, such as the title, while the "body" tag contains the content that will be displayed in the browser.
Within the "body" tag, you can use various other tags such as "h1" for headings, "p" for paragraphs, and "img" for images, to create your desired layout. It is important to make sure that all elements are properly nested and closed to avoid any rendering issues in the browser.
Writing "Hello World" in HTML
"Hello World" is a traditional first program when learning to code. It is a simple program that outputs the message "Hello, World!" on the screen. This program is often used as an introductory exercise in coding classes, as it teaches the basics of how to create a program and display an output.
In HTML, "Hello World" can be written using the
tag, which stands for "paragraph". This tag is used to define a paragraph of text and can be used to output the "Hello, World!" message on a web page.
To write "Hello World" in HTML, we first need to create an HTML document. We can do that by opening a new text document in any text editor, such as Lightly IDE or Visual Studio Code.
Then, we need to add the basic structure of an HTML document by typing <!DOCTYPE html> at the top of the file. Next, we'll add the opening and closing tags, and inside them, the
and tags.Finally, we can add the text "Hello World" by typing
Hello World
orHello World!
between the opening and closing tags. This will create a heading with our text in it. When we save the file with an ".html" extension, we can open it in a web browser and see our "Hello World" message displayed on the page.Testing "Hello World"
After writing the HTML code for your webpage, it's time to see how it looks in a browser. To do this, you need to open the HTML file in a browser. To start, open your preferred browser and then go to the "File" menu and select "Open File".
Alternatively, you can press "Ctrl + O" (Windows) or "Cmd + O" (Mac) to open the file. Once the file is open, the browser will show you how the HTML code is rendered as a webpage. If everything is correct, you should see your “Hello World” message displayed on the page.
Once you have written your "Hello World" code in HTML and saved it with an .html extension, you can open the file in a web browser to see the output. Simply double-click on the saved file and it should open in your default web browser. You should see the words "Hello, World!" displayed on a plain white background.
Congratulations! You have successfully written and executed your first HTML code. From here, you can continue learning and exploring all of the amazing things you can create with HTML.
In HTML, there are attributes that you can explore to define additional characteristics for an element. The attributes provide extra information about the element, such as the color of a text, the width of an image, or the behavior of a link.
Attributes are placed inside the opening tag of the element and consist of a name and a value, separated by an equal sign and enclosed in quotes.
Some common attributes used in HTML include href, src, alt, class, id, and style. The href attribute defines the URL of a link, while the src attribute specifies the location of an image.
The alt attribute provides a descriptive text for an image, which is displayed if the image fails to load. The class and id attributes are used to identify and style elements using CSS, while the style attribute allows inline styling of an element. Understanding how to use attributes is essential in HTML coding.
Resources for further learning
If you want to continue learning HTML, there are plenty of resources available online to help you. Here are a few:
- W3Schools HTML Tutorial: A comprehensive tutorial that covers everything from the basics to advanced topics.
- MDN Web Docs HTML Guide: Another comprehensive guide with plenty of examples and explanations.
- Codecademy HTML Course: An interactive course that allows you to practice writing HTML code in your browser.
- FreeCodeCamp HTML Course: A free course that covers the basics of HTML and HTML5.
These resources should give you a solid foundation in HTML and prepare you for more complex web development tasks. Happy coding!
Top comments (0)