HTML Introduction - Besic of html language
HTML Introduction
HTML (HyperText Markup Language) is the standard language used to create and design web pages. It forms the structure of web content and is essential for web development. Below are some basic details and concepts about HTML:
1. HTML Structure
An HTML document is composed of elements, which are the building blocks of web pages. These elements are represented by tags, which define the content and structure of the web page.
2. Basic HTML Document
Here's a simple example of an HTML document:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. Key Components
- <!DOCTYPE html> : This declaration defines the document type and version of HTML.
- <html> : The root element that contains all other HTML elements.
- <head> : Contains meta-information about the document, such as the title, character set, and linked resources like CSS and JavaScript.
- <title> : Sets the title of the web page, displayed in the browser tab.
- <body> : Contains the content of the web page, such as text, images, links, etc.
4. Common HTML Tags
- Headings : `<h1>` to `<h6>` tags are used for headings, with `<h1>` being the highest level and `<h6>` the lowest.
```html code
<h1>This is a heading</h1>
<h2>This is a subheading</h2>
```
- Paragraphs : `<p>` tag is used for paragraphs.
```html code
<p>This is a paragraph.</p>
```
- Links : `<a>` tag is used to create hyperlinks.
```html code
<a href="https://www.example.com">Visit Example</a>
```
- Images : `<img>` tag is used to embed images.
```html code
<img src="image.jpg" alt="Description of image">
```
- Lists : `<ul>` for unordered lists and `<ol>` for ordered lists. List items are defined with `<li>`.
```html code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
```html code
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
```
- Tables : `<table>` for tables, with `<tr>` for table rows, `<th>` for table headers, and `<td>` for table data.
```html code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
```
5. Attributes
Attributes provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs like `name="value"`.
- `href` in `<a>` tag specifies the URL.
- `src` in `<img>` tag specifies the image source.
- `alt` in `<img>` tag provides alternative text for the image.
6. HTML5 Semantic Elements
HTML5 introduced several new semantic elements that provide better meaning and structure to web content:
- `<header>` : Defines a header for a document or section.
- `<nav>` : Defines a set of navigation links.
- `<section>` : Defines a section in a document.
- `<article>` : Defines an independent, self-contained content.
- `<footer>` : Defines a footer for a document or section.
Conclusion
HTML is the foundational language for web development, enabling the creation and structuring of web content. Understanding these basics will help you build and design web pages effectively.
Comments
Post a Comment