Scribd
Upload
18 views

HTML

Uploaded by

imaneluigi07
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

HTML

Uploaded by

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

Sure!

Here's a basic introduction to **HTML** (HyperText Markup Language), which is the


standard language for creating web pages and web applications. HTML provides the
structure for web content like text, images, links, and other elements.

---

### **1. What is HTML?**

HTML is used to define the structure of web pages. It consists of a series of elements that
represent the content of a page, such as headings, paragraphs, images, and links.

---

### **2. Basic Structure of an HTML Document**

A typical HTML document has the following structure:

```html

<!DOCTYPE html> <!-- Declaration specifying the document type -->

<html lang="en"> <!-- Root element of the document -->

<head>

<meta charset="UTF-8"> <!-- Character encoding for the document -->

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


responsive design -->

<title>My Webpage</title> <!-- Title of the page (shown in the browser tab) -->

</head>

<body>
<h1>Welcome to My Webpage</h1> <!-- Main heading -->

<p>This is a simple webpage created with HTML.</p> <!-- Paragraph of text -->

</body>

</html>

```

#### **Explanation of Basic Tags:**

- `<!DOCTYPE html>`: Declares the document type and version of HTML being used
(HTML5 in this case).

- `<html lang="en">`: The root element that wraps the entire HTML document, with the
`lang` attribute specifying the language.

- `<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 is
the most common).

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

- `<body>`: Contains the visible content of the webpage (e.g., headings, paragraphs,
images).

---

### **3. HTML Elements**

HTML elements are enclosed in **tags**. Tags come in pairs: an opening tag and a closing
tag.

- **Opening tag**: `<tagname>`

- **Closing tag**: `</tagname>`


For example:

```html

<p>This is a paragraph</p>

```

Some elements are **self-closing** (don't have a closing tag), such as images and links:

```html

<img src="image.jpg" alt="Description of the image">

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

```

---

### **4. Common HTML Tags**

Here are some of the most commonly used HTML tags:

#### **Headings**

HTML has six levels of headings, from `<h1>` to `<h6>`. `<h1>` is the most important
and `<h6>` is the least.

```html

<h1>Main Heading</h1> <!-- Most important heading -->

<h2>Subheading</h2>
<h3>Smaller Subheading</h3>

```

#### **Paragraphs and Text**

- `<p>`: Defines a paragraph.

- `<strong>`: Makes text bold and indicates strong importance.

- `<em>`: Makes text italic and indicates emphasis.

```html

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

<p><strong>This text is bold</strong> and <em>this is italic</em>.</p>

```

#### **Links**

- `<a href="URL">`: Creates a hyperlink.

```html

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

```

- **Targeting Links**: You can use the `target="_blank"` attribute to open links in a new
tab.

```html
<a href="https://www.example.com" target="_blank">Visit Example in a new tab</a>

```

#### **Images**

- `<img src="URL" alt="description">`: Embeds an image in a page.

- `src`: The source (URL) of the image.

- `alt`: Alternative text that describes the image (for accessibility).

```html

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

```

#### **Lists**

There are two types of lists: **ordered** and **unordered**.

- **Ordered List** (`<ol>`): A numbered list.

- **Unordered List** (`<ul>`): A bulleted list.

- **List Item** (`<li>`): Defines each item in the list.

```html

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>
</ul>

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

```

#### **Forms**

Forms are used to collect user input. Some common form elements include:

- `<form>`: Defines the form.

- `<input>`: Defines an input field.

- `<button>`: Defines a button.

- `<label>`: Defines a label for an input field.

```html

<form action="/submit" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<label for="email">Email:</label>

<input type="email" id="email" name="email">

<button type="submit">Submit</button>

</form>

```
---

### **5. HTML Attributes**

Attributes provide additional information about HTML elements. They are added inside the
opening tag.

Examples:

- **`id`**: Identifies an element uniquely.

- **`class`**: Groups elements for styling (CSS).

- **`style`**: Inline CSS styles.

- **`src`**: Source for media like images, videos, etc.

- **`href`**: URL for links.

```html

<div id="container" class="main">

<p style="color: red;">This is a red paragraph inside a div.</p>

</div>

<img src="logo.png" alt="Website Logo">

```

---

### **6. Tables**


Tables are used to organize data into rows and columns.

```html

<table>

<tr> <!-- Table row -->

<th>Header 1</th> <!-- Table header -->

<th>Header 2</th>

</tr>

<tr> <!-- Table row -->

<td>Row 1, Column 1</td> <!-- Table data -->

<td>Row 1, Column 2</td>

</tr>

<tr> <!-- Table row -->

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

```

- `<tr>`: Table row.

- `<th>`: Table header cell (usually bold and centered).

- `<td>`: Table data cell (regular data).

---
### **7. Semantic HTML**

Semantic HTML refers to using HTML tags that have meaningful names to describe the
content of a webpage, making it more accessible and SEO-friendly.

Examples:

- `<header>`: Defines the header section.

- `<footer>`: Defines the footer section.

- `<article>`: Defines a self-contained piece of content (e.g., a blog post).

- `<section>`: Defines a section of content.

- `<nav>`: Defines navigation links.

```html

<header>

<h1>My Website</h1>

<nav>

<a href="#home">Home</a>

<a href="#about">About</a>

</nav>

</header>

<section>

<h2>About Me</h2>

<p>This is a section about me.</p>

</section>
<footer>

<p>&copy; 2024 My Website</p>

</footer>

```

---

### **8. Conclusion**

HTML is the foundational language for web development. It allows you to structure content
on a webpage, from simple text to complex multimedia elements. The tags and attributes
you use in HTML determine how your content is displayed in the browser.

To create more complex websites, HTML is typically combined with **CSS** (for styling)
and **JavaScript** (for interactivity).

If you'd like to learn more about any specific part of HTML or need additional examples,
feel free to ask!

You might also like