Creating your first HTML document

Creating your first HTML document is an exciting step into the world of web development. HTML, or HyperText Markup Language, is the foundational language for building web pages. It provides the structure and content of a webpage, defining elements like headings, paragraphs, images, links, and more.

Step 1: Set Up Your Workspace

Open Visual Studio Code (VSCode) or WebStorm and create a new folder for your project. You can do this by selecting "File" -> "New Folder."

Inside your project folder, create a new file for your HTML document. Right-click on the folder, choose "New File," and name it with the .html extension, for example, index.html.

Step 2: Write the HTML Structure

Open your index.html file in Visual Studio Code or WebStorm, and start by typing the HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your First HTML Document</title>
</head>
<body>
 
</body>
</html>

<!DOCTYPE html>: This declaration defines the document type and version of HTML. In modern web development, it's always set to HTML5.
<html>: The root element that wraps all the content.
<head>: Contains meta-information about the HTML document, such as the character set and viewport settings.
<body>: Contains the visible content of the HTML document.

Step 3: Add Content to the Body

Inside the <body> section, you can add various HTML elements to structure your content. Let's start with a simple heading and a paragraph.

<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML document. Welcome to the world of web development!</p>
</body>

<h1>: Heading tag. HTML has six levels of headings, from <h1> (largest) to <h6> (smallest). <p>: Paragraph tag. Used for text content.

Step 4: View Your HTML Document

Save your index.html file (Ctrl + S or Cmd + S).

Open your file in the browser directly from VSCode or WebStorm:

VSCode: Right-click on the file in the file explorer and select "Open with Live Server."

WebStorm: Right-click on the file in the project explorer and choose "Open in Browser."

Alternatively, you can open your file in a separate browser window manually.

Congratulations! You've just created and viewed your first HTML document. This is a simple starting point, and as you learn more, you can add more elements, apply styles with CSS, and introduce interactivity with JavaScript.

Feel free to experiment with additional HTML elements and attributes to enhance your understanding of web development. The key is to practice and gradually build upon your knowledge.

Step 5: Utilize Features of VSCode/WebStorm (Optional)

Visual Studio Code and WebStorm provide various features to streamline web development:

Live Server (VSCode): This extension automatically refreshes your browser when you save changes, providing a live preview. Install it from the Extensions Marketplace.
IntelliSense (VSCode/WebStorm): These editors offer intelligent code completion, making it easier to write HTML by suggesting tags, attributes, and values as you type.
Integrated Terminal (VSCode/WebStorm): Access a terminal within the editor to run commands or scripts.

Elements, Tags and Attributes Images and other media