Let’s write a simple HTML code together, step by step with practical explanations and solutions
Code: “Hello, World!” in HTML
Goal: Create an HTML page that displays “Hello, World!” in any browser or a browser.
Steps to follow:
- Load your preferred code editor, in this case, we are using Notepad.
- Creating of a new file and saving it with the right extension that is html, for example html
- In this context, you are supposed to write the HTML Structure
Note that HTML documents starts with a basic structure that includes the:
<!DOCTYPE html> <html> <head> and <body> elements.
Take a look at the inputs below:
Vivid Explanations:
Consider the below syntaxes and their duties as mentioned early:
-
<!DOCTYPE html>: this declares the document type as HTML5
-
<html>: this is known to be the root of the HTML document
-
<head>: this also contains metadata about the document, such as the title, the styles in the context and also the scripts.
-
<body>: this is known to have contains the content of the entire site or the content of the HTML document
Adding the Title:
Add a title to the HTML document using the <title> element
Consider the diagram below:
Explanation:
The <title> element sets the title of the HTML document, which appears in the browser’s title bar and in search engine results.
Adding the Content:
You must add a content, that is “Hello, World!” to the HTML document using the <p> element
Consider the below explained diagram:
Explanations:
In the given context, the <p> represents a paragraph of a text
Saving and opening the input in a Browser
After the precise completion of all inputs, make sure to save the file with for example, hello.html file and open it in a window, preferably a web browser, such as google chrome, Mozilla Firefox or even Microsoft Edge.
Solutions:
Amazingly, you have written your first HTML code using a simple text editor. In this case, when you open the ‘hello.html’ file in a browser, you should see “Hello, World” displayed on the page.
TIPS AND VARIATIONS:
- You have the liberty to change the text content of the <p> element to display different messages
- You can also, add more HTML elements such as:
- <h1>
- <img>
- <a>
…to create a more complex HTML page.
- You can also or a user has the right to use the CSS to style the HTML content and make it look more visually appealing.
- In addition, a user can also use JavaScript to add interactivity to the HTML page.
About Author
Discover more from SURFCLOUD TECHNOLOGY
Subscribe to get the latest posts sent to your email.
