Scribd
Upload
3 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 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
We take content rights seriously. If you suspect this is your content, claim it here.
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