[BEGINNER] HTML Guide

Off Topic
,
1

What is HTML?

HTML stands for HyperText Markup Language, which is the standard language used for creating web pages. It provides a way to structure and format text and other content, and to add images, links, and other multimedia elements to web pages. HTML is a markup language, which means that it uses special tags to define the structure and appearance of a web page.

Basic HTML Structure

Every HTML document begins with a document type declaration (<!DOCTYPE html>), which tells the browser what version of HTML the page is written in. Following the doctype declaration is the <html> tag, which encloses the entire document. Inside the <html> tag, you’ll find the <head> and <body> sections.

The <head> section contains metadata about the document, such as the page title and any links to CSS stylesheets or JavaScript files. The <body> section contains the content of the page, including text, images, and other multimedia elements.

Here’s a basic HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

HTML Tags

HTML uses tags to define the structure and content of a web page. Tags are enclosed in angle brackets (< >) and can contain attributes that provide additional information about the tag.

Here are some of the most common HTML tags:

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: These tags are used to define headings of various sizes.
  • <p>: This tag is used to define paragraphs of text.
  • <a>: This tag is used to define hyperlinks.
  • <img>: This tag is used to add images to a web page.

Adding Images

To add an image to a web page, you can use the <img> tag. The <img> tag is an empty tag, which means that it does not require a closing tag. Instead, you can include attributes within the opening tag to specify the image source, alt text, and other properties.

Here’s an example of how to add an image to a web page:

<img src="image.jpg" alt="A beautiful sunset">

In this example, the src attribute specifies the location of the image file, while the alt attribute provides a text description of the image for users who are unable to see the image.

You can also include other attributes within the <img> tag to control the size, alignment, and other properties of the image. For example:

<img src="image.jpg" alt="A beautiful sunset" width="500" height="300" align="right">

In this example, the width and height attributes specify the dimensions of the image, while the align attribute specifies that the image should be aligned to the right side of the page.

Best Practices

When creating HTML code, it’s important to follow best practices to ensure that your code is easy to read, maintain, and modify. Here are a few tips to keep in mind:

  • Use indentation to make your code easier to read.
  • Use comments to explain your code and make it easier for others to understand.
  • Use semantic HTML to ensure that your code is accessible and optimized for search engines.
  • Use external CSS files to separate

This Is Part 1, and Part 2 Is Coming Soon!!

4 Likes