Day -3 Creating your First HTML Document, Understanding the Basic Structure
Welcome back to Day 3 of our 30-day HTML tutorial series! Today, we're diving into the heart of HTML by creating our first HTML document. We'll also explore the basic structure of an HTML page, which includes the <html>, <head>, and <body> elements.
Creating Your First HTML Document
To begin, open your chosen text editor. If you haven't decided on one yet, consider options like Visual Studio Code, Sublime Text, Atom, or any other code editor that supports HTML syntax highlighting.
Now, follow these steps to create your first HTML document:
Step 1: Open a New File
Open your text editor.
Click on "File" and select "New" to create a new document.
Step 2: Start with HTML Tags
In your new document, type the following:
Step 3: Save Your File
Save the file with an ".html" extension, such as "index.html."
Congratulations, you've just created your first HTML document!
Understanding the Basic Structure
Now, let's break down the structure of the HTML document you just created:
<!DOCTYPE html>: This declaration defines the document type and version of HTML you're using. In this case, it's HTML5.
<html>: The root element that encloses all the content on the web page.
<head>: Contains meta-information about the document, including the page title, character set, and links to external resources like CSS and JavaScript files.
<title>: Sets the title of the web page, which appears in the browser's title bar or tab.
<body>: Contains the visible content of the web page, such as text, images, links, and other elements.
<h1>: A heading element that defines the top-level heading on your page. You can use headings from <h1> (the highest level) to <h6> (the lowest level) to structure your content hierarchically.
Viewing Your HTML Document
To view your HTML document, simply open it with a web browser. Right-click on the HTML file you created, select "Open with," and choose your preferred browser. You should see a basic webpage with the heading "Hello, HTML!" displayed in your browser window.
Comments
Post a Comment
Thank You !