HTML, or HyperText Markup Language, serves as the foundational building block of web development.
It provides the essential structure for webpages, defining how content is organized, displayed, and connected, characterised by a set of elements and tags.
With HTML, you can format text, create links, embed images, and establish the overall layout of a webpage.
Tags and attributes are used to create an HTML document. The Initial Declaration for all HTML documents is <!doctype HTML>, then other tags and their attributes follow.
For instance, here is a simple example of how an HTML document should be formatted:
<!DOCTYPE html>
<html>
<head> Page info and styles go here</head>
<body>……</body>
</html>
Under the head tag, you can put the <title>…</title> and <styles>…..</styles> for page info and styling. Attributes provide additional information about the elements, enhancing their functionality and appearance.
Using Sublime Text For HTML Documents
To create your first HTML document using Sublime Text, you will begin by launching the application. Once opened, select ‘New File’ from the File menu or simply use the keyboard shortcut Ctrl + N (or Cmd + N on Mac). This action opens a blank document as shown below:
First, you need to declare the document type at the very top of your HTML file. Type the following line to indicate that you are creating an HTML5 document:
<!DOCTYPE html>
Next, structure your document by adding the “ tag, which is essential as it encompasses all the other HTML elements. Here is how you should proceed:
<html>
The “ section comes next. Within this section, you can include metadata, links to CSS files, and the title of your document. Use the following code snippet to create the head:
<head> <title>My First HTML Document</title> </head>
After the head, cover the main content of your HTML file by adding the “ section. All visible elements such as text, images, and links will be placed here. Start with this basic structure:
<body> <h1>Hello, World!</h1> <p>Welcome to my first HTML document created with Sublime Text.</p> </body>
Finally, close the HTML document with the closing tag:
</html>
In total, your first HTML code should look like the one in the image below:
Once you have finished writing your HTML code in Sublime Text, the next vital step is to save your work correctly. To do this, navigate to the top left corner of Sublime Text and click on the “File” menu. From the dropdown options, select “Save As.”:
Here, it’s crucial to choose an appropriate file name for your HTML document. A good practice is to use descriptive names that reflect the content of the document, using lowercase letters and replacing spaces with hyphens or underscores. Ensure to append the file extension “.html” at the end of your file name to indicate that it is an HTML document. This allows web browsers to recognize and render the file correctly.
Once your file is saved, you can easily preview it in your web browser.
There are multiple ways to open your HTML file. One of the simplest methods is to use the built-in functionality by right-clicking on your HTML file within the editor and selecting “Open in Browser.”:
Alternatively, you can use keyboard shortcuts, depending on your operating system, to quickly preview your file, or open the HTML directly from your file explorer.
After opening it in your browser, the display should look like the one in the image below:
Congratulations on creating your first HTML Document. In the next article, we talk about styles and attributes, so you can learn how to create beautiful web pages with vibrant colours.
