DEV Community

Cover image for Day 1: Getting Started with HTML
Dipak Ahirav
Dipak Ahirav

Posted on

Day 1: Getting Started with HTML

#html #css #javascript #beginners

Welcome to the first day of your journey to mastering HTML and CSS! In this blog post, we'll cover the basics of HTML, the fundamental language for creating web pages. By the end of this post, you'll have created your very first HTML page.

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and design documents on the web. It structures the content, which includes text, images, links, and other media, to be displayed in web browsers.

Structure of an HTML Document

Every HTML document has a basic structure, which includes several essential elements. Here's a simple example of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first HTML page.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Let's break down the components:

  • <!DOCTYPE html>: This declaration defines the document type and version of HTML.
  • <html lang="en">: The root element of an HTML page, with the lang attribute specifying the language.
  • <head>: Contains meta-information about the document, such as the character set and the title.
  • <meta charset="UTF-8">: Specifies the character encoding for the document.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage is responsive on different devices.
  • <title>: Sets the title of the webpage, which appears in the browser tab.
  • <body>: Contains the content of the webpage, visible to users.

Creating Your First HTML Page

  1. Set Up Your Environment:

    • You only need a text editor (like Notepad on Windows or TextEdit on Mac) and a web browser (like Chrome, Firefox, or Safari).

  2. Write Your HTML:

    • Open your text editor and type the HTML code shown above.

  3. Save Your File:

    • Save the file with an .html extension. For example, index.html.

  4. Open Your HTML File in a Browser:

    • Double-click the saved file or right-click and choose "Open with" and select your browser.

You should see a page with the heading "Hello, World!" and a paragraph that says, "Welcome to my first HTML page."

Basic HTML Tags

Here are some fundamental HTML tags you'll use frequently:

  • Headings: Define headings with <h1> to <h6>. 
  <h1>Main Heading</h1>
  <h2>Subheading</h2>
Enter fullscreen mode Exit fullscreen mode
  • Paragraphs: Define paragraphs with <p>. 
  <p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode
  • Links: Create hyperlinks with <a>. 
  <a href="https://www.example.com">Visit Example</a>
Enter fullscreen mode Exit fullscreen mode
  • Images: Embed images with <img>. 
  <img src="image.jpg" alt="Description of image">
Enter fullscreen mode Exit fullscreen mode

Summary

In this first blog post, we introduced HTML and its basic structure. You learned how to create a simple HTML document and understood the purpose of essential HTML tags. In the next post, we'll dive deeper into text formatting and links, helping you build more structured content.

Stay tuned for Day 2, where we'll continue our HTML journey. Happy coding!

Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe:

Top comments (1)

Collapse
 
dipakahirav profile image
Dipak Ahirav •

Next part -> Day - 2

Read next

araldhafeeri profile image

Designing and Implementing Ant Design Global App Tour for React Apps.

Ahmed Rakan -

dsychin profile image

Lessons Learned Migrating from React CRA & Jest to Vite & Vitest

Desmond Chin -

prince_beec5ccde00b7c6c73 profile image

👻 Scary Ghost Cursor with Smoke Trail! 💀 code using html5,css3 and javascript

Prince -

shams_arman_510 profile image

BLA ! BLA! BLA! DECEMBER...!

shams Arman siddique -