Basic Syntax

Tutorial 1 of 4

1. Introduction

Welcome to this tutorial on basic HTML syntax. Our goal is to provide a concise and beginner-friendly guide to the fundamental syntax of HTML (Hypertext Markup Language), which is the standard markup language for creating webpages.

By the end of this tutorial, you should be able to:

Understand the basic structure of an HTML document
Use common HTML tags to structure your content
Create a simple webpage.

This tutorial assumes you have a basic understanding of how to use a text editor and a web browser. No prior experience with HTML or web development is required.

2. Step-by-Step Guide

HTML uses tags to structure and style content on a webpage. Tags are enclosed by angle brackets (< >). Most tags have both an opening tag (<tag>) and a closing tag (</tag>).

Example:

<p>This is a paragraph.</p>

In this example, <p> is the opening tag and </p> is the closing tag. The content between these tags is the paragraph text.

Let's take a look at the basic structure of an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

<!DOCTYPE html>: This declaration defines the document to be HTML5.
<html>: The root element of an HTML page
<head>: The element contains meta-information about the HTML page
<title>: The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
<body>: The element contains the visible page content
<h1>: The element defines a large heading
<p>: The element defines a paragraph

3. Code Examples

Now, let's see some practical examples:

Example 1: Headings

HTML headings are defined with the <h1> to <h6> tags:

<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
<h3>This is a Heading</h3>

Example 2: Links

HTML links are defined with the <a> tag:

<a href="https://www.example.com">This is a link</a>

href attribute specifies the URL of the page the link goes to.

Example 3: Images

HTML images are defined with the <img> tag:

<img src="image.jpg" alt="An image" width="500" height="600">

src attribute specifies the path to the image, alt attribute provides an alternate text for the image, width and height attributes provide dimensions for the image.

4. Summary

In this tutorial, we've covered the basic syntax of HTML, including the structure of an HTML document and the use of common tags such as <p>, <h1> to <h6>, <a>, and <img>.

For further learning, consider exploring more advanced HTML topics such as forms, tables, and CSS integration. W3Schools and MDN Web Docs are excellent resources for diving deeper into HTML.

5. Practice Exercises

Create an HTML document with a title, a heading, a paragraph, a link, and an image.
Create an HTML document with three levels of headings and two paragraphs.
Create an HTML document with a link that opens in a new browser tab.

Solutions

```html

My First Page

My First Heading

My first paragraph.

This is a link An image

```

```html

My Page

Heading Level 1

Heading Level 2

Heading Level 3

First paragraph.

Second paragraph.

```

```html

My Page This link opens in a new tab

```

The target="_blank" attribute in the third exercise causes the link to open in a new browser tab.