Skip to content

Commit 65444c9

Browse files
ajay-dhangarajay-dhangar
committed
added more docs
1 parent fde50cd commit 65444c9

File tree

6 files changed

+785
-1
lines changed

6 files changed

+785
-1
lines changed

‎docs/html-basics/block-inline.mdx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
sidebar_position: 10
3+
---
4+
5+
# 🙋🏻 HTML Block and inline Elements
6+
7+
HTML elements can be classified into two main categories: block-level elements and inline elements. Understanding the difference between these two types of elements is essential for creating well-structured and visually appealing web pages.
8+
9+
## Block-Level Elements
10+
11+
Block-level elements are HTML elements that create a block of content on a web page. These elements typically start on a new line and take up the full width of their container. Block-level elements can contain other block-level elements or inline elements.
12+
13+
Here are some common block-level elements:
14+
15+
- `<div>`: Defines a division or section of content.
16+
- `<p>`: Defines a paragraph of text.
17+
- `<h1>` to `<h6>`: Defines headings of different levels.
18+
- `<ul>`: Defines an unordered list.
19+
- `<ol>`: Defines an ordered list.
20+
- `<li>`: Defines a list item.
21+
- `<table>`: Defines a table.
22+
- `<form>`: Defines a form.
23+
24+
Block-level elements are often used to structure the layout of a web page and create distinct sections of content. They can be styled using CSS to control their appearance, such as setting the background color, margin, padding, and border.
25+
26+
## Inline Elements
27+
28+
Inline elements are HTML elements that do not create a new line and only take up as much width as necessary. These elements are typically used within block-level elements to style or format text or other content.
29+
30+
Here are some common inline elements:
31+
32+
- `<span>`: Defines a span of text.
33+
- `<a>`: Defines a hyperlink.
34+
- `<strong>`: Defines text with strong importance.
35+
- `<em>`: Defines text with emphasis.
36+
- `<img>`: Defines an image.
37+
- `<input>`: Defines an input field.
38+
39+
Inline elements are often used to apply styles to specific parts of the content, such as changing the font color, size, or style. They can be styled using CSS to control their appearance, such as setting the text color, font size, and text decoration.
40+
41+
## Difference Between Block-Level and Inline Elements
42+
43+
|No. | Block-Level Elements | Inline Elements |
44+
|----|----------------------|-----------------|
45+
|1. | Start on a new line | Do not start on a new line |
46+
|2. | Take up the full width of their container | Only take up as much width as necessary |
47+
|3. | Can contain other block-level elements or inline elements | Cannot contain block-level elements |
48+
|4. | Commonly used for structuring the layout of a web page | Commonly used for styling or formatting text or other content |
49+
50+
## Combining Block and Inline Elements
51+
52+
In practice, web developers often combine block-level and inline elements to create complex layouts and designs. By using a combination of block-level and inline elements, you can achieve a wide range of visual effects and structures on a web page.
53+
54+
For example, you can use block-level elements to create sections of content with distinct styles and layouts, while using inline elements to apply styles to specific parts of the content, such as links, text formatting, or images.
55+
56+
Understanding the difference between block-level and inline elements and how to use them effectively is key to creating well-structured and visually appealing web pages. By mastering the use of block and inline elements, you can create web pages that are both functional and aesthetically pleasing.
57+
58+
## Summary
59+
60+
Block-level elements create a block of content on a web page and start on a new line, taking up the full width of their container. Inline elements do not create a new line and only take up as much width as necessary. By combining block-level and inline elements, you can create visually appealing and well-structured web pages.

‎docs/html-basics/classes.mdx

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
sidebar_position: 11
3+
---
4+
5+
# 🙋🏻 HTML Classes
6+
7+
HTML classes are used to apply styles and attributes to HTML elements. By assigning a class to an element, you can define specific styles for that element using CSS. Classes are a powerful tool for styling web pages and creating visually appealing designs.
8+
9+
## Creating Classes
10+
11+
To create a class in HTML, you use the `class` attribute on an HTML element. The `class` attribute specifies one or more class names for an element, separated by spaces. You can assign the same class to multiple
12+
13+
```html title="index.html"
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<title>Class Example</title>
18+
<style>
19+
.red-text {
20+
color: red;
21+
}
22+
23+
.bold-text {
24+
font-weight: bold;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<h1 class="red-text">This is a Heading</h1>
30+
<p class="red-text bold-text">This is a paragraph.</p>
31+
</body>
32+
</html>
33+
```
34+
35+
<BrowserWindow url="http://.../index.html">
36+
<div>
37+
<h1 style={{color: "red"}}>This is a Heading</h1>
38+
<p style={{color: "red", fontWeight: "bold"}}>This is a paragraph.</p>
39+
</div>
40+
</BrowserWindow>
41+
42+
In the example above, two classes are defined in the `<style>` section of the HTML document: `.red-text` and `.bold-text`. These classes define styles for text color and font weight, respectively. The classes are then applied to the `<h1>` and `<p>` elements using the `class` attribute.
43+
44+
## Applying Multiple Classes
45+
46+
You can apply multiple classes to an HTML element by separating the class names with spaces. When multiple classes are applied to an element, the styles defined in each class are combined to create the final appearance of the element.
47+
48+
```html title="index.html"
49+
<!DOCTYPE html>
50+
<html>
51+
<head>
52+
<title>Multiple Classes Example</title>
53+
<style>
54+
.red-text {
55+
color: red;
56+
}
57+
58+
.bold-text {
59+
font-weight: bold;
60+
}
61+
62+
.underline-text {
63+
text-decoration: underline;
64+
}
65+
</style>
66+
</head>
67+
<body>
68+
<p class="red-text bold-text underline-text">This is a paragraph.</p>
69+
</body>
70+
</html>
71+
```
72+
73+
<BrowserWindow url="http://.../index.html">
74+
<div>
75+
<p style={{color: "red", fontWeight: "bold", textDecoration: "underline"}}>
76+
This is a paragraph.
77+
</p>
78+
</div>
79+
</BrowserWindow>
80+
81+
In the example above, three classes are defined in the `<style>` section of the HTML document: `.red-text`, `.bold-text`, and `.underline-text`. These classes define styles for text color, font weight, and text decoration, respectively. All three classes are applied to the `<p>` element using the `class` attribute.
82+
83+
## Using Classes with CSS
84+
85+
Classes are commonly used with CSS to style HTML elements. By defining styles in CSS and applying them to elements using classes, you can create consistent and visually appealing designs for your web pages.
86+
87+
<Tabs>
88+
<TabItem value="css" label="styles.css">
89+
```css title="styles.css"
90+
.red-text {
91+
color: red;
92+
}
93+
94+
.bold-text {
95+
font-weight: bold;
96+
}
97+
98+
.underline-text {
99+
text-decoration: underline;
100+
}
101+
```
102+
</TabItem>
103+
<TabItem value="html" label="index.html">
104+
```html title="index.html"
105+
<!DOCTYPE html>
106+
<html>
107+
<head>
108+
<title>Multiple Classes Example</title>
109+
<link rel="stylesheet" href="styles.css">
110+
</head>
111+
<body>
112+
<p class="red-text bold-text underline-text">This is a paragraph.</p>
113+
</body>
114+
</html>
115+
```
116+
</TabItem>
117+
118+
</Tabs>
119+
120+
<BrowserWindow url="http://.../index.html">
121+
<div>
122+
<p style={{color: "red", fontWeight: "bold", textDecoration: "underline"}}>
123+
This is a paragraph.
124+
</p>
125+
</div>
126+
</BrowserWindow>
127+
128+
In the example above, the styles for the classes `.red-text`, `.bold-text`, and `.underline-text` are defined in an external CSS file named `styles.css`. The classes are then applied to the `<p>` element in the HTML document using the `class` attribute.
129+
130+
## Summary
131+
132+
HTML classes are used to apply styles and attributes to HTML elements. By assigning classes to elements, you can define specific styles for those elements using CSS. Classes are a powerful tool for styling web pages and creating visually appealing designs. By combining classes and CSS, you can create consistent and visually appealing designs for your web pages.

‎docs/html-basics/ids.mdx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
sidebar_position: 12
3+
---
4+
5+
# 🙋🏻 HTML Ids
6+
7+
HTML IDs are used to uniquely identify elements on a web page. By assigning an ID to an element, you can reference that element in CSS and JavaScript to apply styles or perform actions. IDs are a powerful tool for targeting specific elements and adding interactivity to web pages.
8+
9+
## Creating IDs
10+
11+
To create an ID in HTML, you use the `id` attribute on an HTML element. The `id` attribute specifies a unique identifier for an element, which must be unique within the entire HTML document. You can assign an ID to any HTML element, such as headings, paragraphs, images, links, and more.
12+
13+
```html title="index.html"
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<title>ID Example</title>
18+
<style>
19+
#heading {
20+
color: blue;
21+
}
22+
23+
#paragraph {
24+
font-size: 16px;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<h1 id="heading">This is a Heading</h1>
30+
<p id="paragraph">This is a paragraph.</p>
31+
</body>
32+
</html>
33+
```
34+
35+
<BrowserWindow url="http://.../index.html">
36+
<div>
37+
<h1 style={{color: "blue"}}>This is a Heading</h1>
38+
<p style={{fontSize: "16px"}}>This is a paragraph.</p>
39+
</div>
40+
</BrowserWindow>
41+
42+
In the example above, two IDs are defined in the `<style>` section of the HTML document: `#heading` and `#paragraph`. These IDs define styles for text color and font size, respectively. The IDs are then applied to the `<h1>` and `<p>` elements using the `id` attribute.
43+
44+
## Referencing IDs
45+
46+
You can reference an element by its ID in CSS and JavaScript to apply styles or perform actions on that element. To reference an element by its ID in CSS, you use the `#` symbol followed by the ID name. To reference an element by its ID in JavaScript, you can use the `document.getElementById()` method.
47+
48+
<Tabs>
49+
<TabItem value="html" label="index.html">
50+
51+
```html
52+
<!DOCTYPE html>
53+
<html>
54+
<head>
55+
<title>ID Example</title>
56+
<link rel="stylesheet" href="styles.css">
57+
</head>
58+
<body>
59+
<h1 id="heading">This is a Heading</h1>
60+
<p id="paragraph">This is a paragraph.</p>
61+
<script src="script.js"></script>
62+
</body>
63+
</html>
64+
```
65+
66+
</TabItem>
67+
<TabItem value="css" label="styles.css">
68+
69+
```css
70+
#heading {
71+
color: blue;
72+
}
73+
74+
#paragraph {
75+
font-size: 16px;
76+
}
77+
78+
```
79+
80+
</TabItem>
81+
82+
<TabItem value="js" label="script.js">
83+
84+
```js
85+
// Get the element with the ID "heading"
86+
var heading = document.getElementById("heading");
87+
// Change the text color of the heading
88+
heading.style.color = "red";
89+
```
90+
91+
</TabItem>
92+
93+
</Tabs>
94+
95+
<BrowserWindow url="http://.../index.html">
96+
<div>
97+
<h1 style={{color: "red"}}>This is a Heading</h1>
98+
<p style={{fontSize: "16px"}}>This is a paragraph.</p>
99+
</div>
100+
</BrowserWindow>
101+
102+
In the example above, the `#heading` ID is referenced in the `styles.css` file to change the text color of the `<h1>` element to blue. The `#heading` ID is also referenced in the `script.js` file to change the text color of the `<h1>` element to red using JavaScript.
103+
104+
## Summary
105+
106+
HTML IDs are used to uniquely identify elements on a web page. By assigning an ID to an element, you can reference that element in CSS and JavaScript to apply styles or perform actions. IDs are a powerful tool for targeting specific elements and adding interactivity to web pages.

0 commit comments

Comments
 (0)