Scribd
Upload
7 views

HTML

Uploaded by

selamselam0970
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

HTML

Uploaded by

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

Sure!

HTML (HyperText
Markup Language) is a
fundamental technology
used to create web pages.
It consists of a series of
elements, which you can
use to structure the content
on the web page. Here's a
detailed breakdown:

### HTML Document


Structure

An HTML document
typically consists of two
main parts: the head and
the body.

#### 1. `<!DOCTYPE
html>`

This declaration defines the


document type and version
of HTML
being used. The current
standard is HTML5.

```html
<!DOCTYPE html>
```

#### 2. `<html>` Element

This is the root element of


an HTML page. It contains
all other elements.

```html
<html>
<!-- head and body
elements go here -->
</html>
```
#### 3. `<head>` Element

Contains meta-information
(metadata) about the
document, such as its title,
character set, and links to
stylesheets.

```html
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description"
content="Free Web
tutorials">
<meta name="keywords"
content="HTML, CSS,
JavaScript">
<meta name="author"
content="John Doe">
<link rel="stylesheet"
href="styles.css">
</head>
```

#### 4. `<body>` Element

Contains the content of the


HTML document, which is
displayed in the web
browser.

```html
<body>
<!-- Content goes here -->
</body>
```

### Common HTML


Elements
#### Text Elements

- **Headings**: Define
headings in the document.
There are six levels (`<h1>`
to `<h6>`).

```html
<h1>This is a heading</h1>
<h2>This is a sub-
heading</h2>
```

- **Paragraphs**: Define
paragraphs of text.
```html
<p>This is a
paragraph.</p>
```
- **Links**: Create
hyperlinks to other pages or
resources.

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

- **Lists**: Create ordered


(`<ol>`) and unordered
(`<ul>`) lists.

```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
```

#### Media Elements

- **Images**: Embed
images.

```html
<img src="image.jpg"
alt="Description of image">
```
- **Videos**: Embed videos.
```html
<video width="320"
height="240" controls>
<source src="movie.mp4"
type="video/mp4">
Your browser does not
support the video tag.
</video>
```

#### Forms

Used to collect user input.

```html
<form action="/submit-form"
method="post">
<label
for="name">Name:</label>
<input type="text"
id="name" name="name">
<input type="submit"
value="Submit">
</form>
```

### Attributes

HTML elements can have


attributes that provide
additional information.
Attributes are always
included in the opening tag
and usually come in
name/value pairs like
`name="value"`.

#### Common Attributes


- **`id`**: Specifies a unique
id for an element.

```html
<p id="unique-id">This is a
paragraph with an id.</p>
```

- **`class`**: Specifies one


or more class names for an
element (used for CSS
styling).

```html
<p class="my-class">This is
a paragraph with a
class.</p>
```

- **`src`**: Specifies the


source file
for media elements.

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

- **`href`**: Specifies the


URL for links.

```html
<a
href="https://www.example.
com">This is a link</a>
```
### Semantic HTML
Semantic HTML introduces
meaning to the web page
rather than just
presentation. Examples
include:

- **`<header>`**: Defines a
header for a document or
section.
- **`<nav>`**: Defines a set
of navigation links.
- **`<article>`**: Defines
independent, self-contained
content.
- **`<section>`**: Defines a
section in a document.
- **`<footer>`**: Defines a
footer for a document or
section.

### Example of a Complete


HTML Document
Here's a complete HTML
document to put everything
together:

```html
<!DOCTYPE html>
<html>
<head>
<title>My First HTML
Page</title>
<meta charset="UTF-8">
<meta
name="description"
content="An example HTML
page">
<meta name="keywords"
content="HTML, example">
<meta name="author"
content="Your Name">
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My
Web Page</h1>
</header>
<nav>
<ul>
<li><a
href="#section1">Section
1</a></li>
<li><a
href="#section2">Section
2</a></li>
</ul>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first
section of my web
page.</p>
<img src="image1.jpg"
alt="A descriptive image">
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second
section of my web
page.</p>
<video width="320"
height="240" controls>
<source
src="video.mp4"
type="video/mp4">
Your browser does
not support the video tag.
</video>
</section>
<footer>
<p>Contact
information: <a
href="mailto:someone@exa
mple.co
m">[email protected]
m</a>.</p>
</footer>
</body>
</html>
```

This covers the basics and


some advanced features of
HTML. Let me know if you
have any specific questions
or need further details on
any part!

You might also like