Scribd
Upload
0 views

HTML_Tutorial

This document provides a basic tutorial on HTML structure and common elements. It includes examples of essential tags, such as `<html>`, `<head>`, `<body>`, and various elements like headings, paragraphs, links, images, and lists. Additionally, it offers tips for writing clean and readable HTML code.

Uploaded by

Justin Stout
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

HTML_Tutorial

This document provides a basic tutorial on HTML structure and common elements. It includes examples of essential tags, such as `<html>`, `<head>`, `<body>`, and various elements like headings, paragraphs, links, images, and lists. Additionally, it offers tips for writing clean and readable HTML code.

Uploaded by

Justin Stout
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Basic HTML Tutorial

1. Basic Structure of an HTML Document

Every HTML document has a basic structure with essential tags. Here's a simple example:

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My First Webpage</title>

</head>

<body>

<h1>Hello, World!</h1>

<p>This is my first webpage using HTML.</p>

</body>

</html>

```

Explanation of the Structure:

- `<!DOCTYPE html>`: This declaration tells the browser to expect HTML5 code.

- `<html lang="en">`: The root element of the HTML document. `lang="en"` specifies the language of

the document (English).

- `<head>`: Contains meta-information about the document (such as its title, character set, and
viewport settings).

- `<meta charset="UTF-8">`: Specifies the character encoding for the document (UTF-8 supports

most characters).

- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Ensures the page is

responsive on different screen sizes (especially mobile).

- `<title>`: Defines the title of the webpage, which appears in the browser tab.

- `<body>`: Contains the main content of the webpage (text, images, links, etc.).

- `<h1>`: Represents the main heading of the page. `<h1>` is typically the largest and most

important heading.

- `<p>`: Represents a paragraph of text.

2. Common HTML Elements:

Here are some other common elements you will often use in HTML:

- Headings:

- `<h1>`, `<h2>`, `<h3>`, etc., are used for headings of different levels, from `<h1>` (most

important) to `<h6>` (least important).

- Paragraphs:

- `<p>`: Defines a paragraph.

- Links:

- `<a href="URL">Text</a>`: Creates a hyperlink. The `href` attribute specifies the link's

destination.

```html
<a href="https://www.example.com">Visit Example</a>

```

- Images:

- `<img src="image.jpg" alt="description">`: Embeds an image. The `src` attribute specifies the

image file, and the `alt` attribute provides a description if the image cannot be displayed.

```html

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

```

- Lists:

- **Unordered List** (bulleted list):

```html

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

```

- **Ordered List** (numbered list):

```html

<ol>

<li>First item</li>

<li>Second item</li>

</ol>

```
- Divisions (for organizing content):

- `<div>`: A block-level element used to group other elements.

- `<span>`: An inline element used for small sections of text.

3. Basic HTML Example:

Here's a more complete HTML document demonstrating these elements:

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Simple Webpage</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is a simple webpage to demonstrate HTML.</p>

<h2>Unordered List</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>
<h2>Ordered List</h2>

<ol>

<li>Introduction</li>

<li>Learning HTML</li>

<li>Building Webpages</li>

</ol>

<h2>Link Example</h2>

<p>Click <a href="https://www.w3schools.com">here</a> to learn more about HTML.</p>

<h2>Image Example</h2>

<img src="https://via.placeholder.com/150" alt="Placeholder Image">

<h2>Div Example</h2>

<div style="background-color: lightgray; padding: 20px;">

<p>This is a div container.</p>

</div>

</body>

</html>

```

4. More Tips:

- Always close your tags (for example, `<p>...</p>`, `<h1>...</h1>`).

- Use indentation to make the code more readable.

- Tags like `<meta>`, `<img>`, and others that don't have closing tags are self-closing.

You might also like