Skip to content

Commit 9bd8650

Browse files
ajay-dhangarajay-dhangar
committed
added more docs
1 parent 8f52866 commit 9bd8650

39 files changed

+561
-48
lines changed

‎blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg

-93.9 KB
Binary file not shown.

‎blog/2021-08-26-welcome/index.md

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎docs/html-basics/_category_.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"label": "HTML - Basics",
2+
"label": "👩🏻‍💻 HTML - Basics",
33
"position": 2,
44
"link": {
55
"type": "generated-index",

‎docs/html-basics/attributes.mdx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
# 🙋🏻 HTML Attributes
6+
7+
HTML attributes provide additional information about HTML elements. They are always specified in the start tag and are written in name/value pairs like `name="value"`.
8+
9+
Attributes are used to define the characteristics of an HTML element and are always included in the opening tag. They provide additional information about the element, such as the element's behavior or appearance.
10+
11+
Here is an example of an HTML element with attributes:
12+
13+
```html title="index.html"
14+
<a href="https://html-mastery.github.io/">Visit HTML Mastery</a>
15+
```
16+
17+
In the example above, the `<a>` element is an anchor element that creates a hyperlink to another web page. The `href` attribute specifies the URL of the page the link goes to. The text between the opening and closing tags is the clickable text of the hyperlink.
18+
19+
## Common HTML Attributes
20+
21+
Here are some common HTML attributes that you will encounter frequently:
22+
23+
- `class`: Specifies one or more class names for an element (used to style elements with CSS).
24+
- `id`: Specifies a unique id for an element.
25+
- `style`: Specifies an inline style for an element.
26+
- `title`: Specifies extra information about an element (displayed as a tooltip).
27+
- `href`: Specifies the URL of the page the link goes to.
28+
- `src`: Specifies the URL of an image or other media file.
29+
- `alt`: Specifies an alternate text for an image.
30+
- `width`: Specifies the width of an image.
31+
- `height`: Specifies the height of an image.
32+
- `target`: Specifies where to open the linked document.
33+
34+
## HTML Attributes vs. HTML Elements
35+
36+
HTML attributes are used to define the characteristics of an HTML element, while HTML elements are the building blocks of HTML pages. HTML elements are delineated by tags, written using angle brackets.
37+
38+
Here is an example of an HTML element with attributes:
39+
40+
```html title="index.html"
41+
<a href="https://html-mastery.github.io/">Visit HTML Mastery</a>
42+
```
43+
44+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
45+
<a href="https://html-mastery.github.io/">Visit HTML Mastery</a>
46+
</BrowserWindow>
47+
48+
In the example above,
49+
50+
- `<a>` is the HTML element (anchor element).
51+
- `href` is the attribute name.
52+
- `"https://html-mastery.github.io/"` is the attribute value.
53+
- `Visit HTML Mastery` is the text content of the element.
54+
55+
## Summary
56+
57+
HTML attributes provide additional information about HTML elements. They are always specified in the start tag and are written in name/value pairs like `name="value"`. Attributes are used to define the characteristics of an HTML element and are always included in the opening tag.

‎docs/html-basics/doctypes.mdx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
5+
# 🙋🏻 Basic HTML Doctype
6+
7+
A **DOCTYPE** declaration is an instruction to the web browser about what version of HTML the page is written in. It is not an HTML tag, but an instruction to the web browser about the version of HTML the page is written in.
8+
9+
The **DOCTYPE** declaration is not case-sensitive. The **DOCTYPE** declaration for HTML5 is `<!DOCTYPE html>`.
10+
11+
The **DOCTYPE** declaration must be the very first thing in your HTML document, before the `<html>` tag.
12+
13+
Here is an example of a **DOCTYPE** declaration for HTML5:
14+
15+
```html title="index.html"
16+
<!DOCTYPE html>
17+
<html>
18+
<head>
19+
<title>Page Title</title>
20+
</head>
21+
<body>
22+
<h1>This is a Heading</h1>
23+
<p>This is a paragraph.</p>
24+
</body>
25+
</html>
26+
```
27+
28+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
29+
<div>
30+
<h1>This is a Heading</h1>
31+
<p>This is a paragraph.</p>
32+
</div>
33+
</BrowserWindow>
34+
35+
In the example above, the `<!DOCTYPE html>` declaration is the **DOCTYPE** declaration for HTML5. The `<html>` tag is the root element of the HTML document. The `<head>` element contains meta-information about the document, such as its title. The `<title>` element specifies a title for the document. The `<body>` element contains the visible page content. The `<h1>` element defines a large heading. The `<p>` element defines a paragraph.

‎docs/html-basics/formatting.mdx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
sidebar_position: 6
3+
---
4+
5+
# 🙋🏻 HTML Formatting Tags
6+
7+
HTML formatting tags are used to format text and control how it is displayed in the browser. They allow you to add emphasis, style, and structure to your content. In this tutorial, you will learn about the most common HTML formatting tags and how to use them in your web pages.
8+
9+
## HTML Formatting Tags
10+
11+
Here are some common HTML formatting tags that you can use to format text in your web pages:
12+
13+
- `<b>`: Bold text
14+
- `<strong>`: Strong text
15+
- `<i>`: Italic text
16+
17+
## HTML Bold Text
18+
19+
HTML bold text is defined with the `<b>` tag. The `<b>` tag is used to make text bold. It is a presentational tag that is used to add emphasis to text.
20+
21+
```html title="index.html"
22+
<!DOCTYPE html>
23+
<html>
24+
<head>
25+
<title>Bold Text Example</title>
26+
</head>
27+
<body>
28+
<h1>This is a Heading</h1>
29+
<p>This is <b>bold</b> text.</p>
30+
</body>
31+
</html>
32+
```
33+
34+
<BrowserWindow url="http://.../index.html">
35+
<div>
36+
<h1>This is a Heading</h1>
37+
<p>This is <b>bold</b> text.</p>
38+
</div>
39+
</BrowserWindow>
40+
41+
In the example above, the `<b>` tag is used to make the word "bold" bold. The text "This is bold text." is displayed as "This is **bold** text."
42+
43+
## HTML Strong Text
44+
45+
HTML strong text is defined with the `<strong>` tag. The `<strong>` tag is used to make text strong. It is a semantic tag that is used to indicate that the text is important or has strong emphasis.
46+
47+
```html title="index.html"
48+
<!DOCTYPE html>
49+
<html>
50+
<head>
51+
<title>Strong Text Example</title>
52+
</head>
53+
<body>
54+
<h1>This is a Heading</h1>
55+
<p>This is <strong>strong</strong> text.</p>
56+
</body>
57+
</html>
58+
```
59+
60+
<BrowserWindow url="http://.../index.html">
61+
<div>
62+
<h1>This is a Heading</h1>
63+
<p>This is <strong>strong</strong> text.</p>
64+
</div>
65+
</BrowserWindow>
66+
67+
In the example above, the `<strong>` tag is used to make the word "strong" strong. The text "This is strong text." is displayed as "This is **strong** text."
68+
69+
## HTML Italic Text
70+
71+
HTML italic text is defined with the `<i>` tag. The `<i>` tag is used to make text italic. It is a presentational tag that is used to add emphasis to text.
72+
73+
```html title="index.html"
74+
<!DOCTYPE html>
75+
<html>
76+
<head>
77+
<title>Italic Text Example</title>
78+
</head>
79+
<body>
80+
<h1>This is a Heading</h1>
81+
<p>This is <i>italic</i> text.</p>
82+
</body>
83+
</html>
84+
```
85+
86+
<BrowserWindow url="http://.../index.html">
87+
<div>
88+
<h1>This is a Heading</h1>
89+
<p>This is <i>italic</i> text.</p>
90+
</div>
91+
</BrowserWindow>
92+
93+
In the example above, the `<i>` tag is used to make the word "italic" italic. The text "This is italic text." is displayed as "This is *italic* text."
94+
95+
## Summary
96+
97+
HTML formatting tags are used to format text and control how it is displayed in the browser. The `<b>` tag is used to make text bold, the `<strong>` tag is used to make text strong, and the `<i>` tag is used to make text italic. Use these tags to add emphasis, style, and structure to your content.

‎docs/html-basics/headings.mdx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# 🙋🏻 HTML Heading tags
6+
7+
HTML headings are defined with the `<h1>` to `<h6>` tags. `<h1>` defines the most important heading, while `<h6>` defines the least important heading.
8+
9+
```html title="index.html"
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<title>Heading Tags</title>
14+
</head>
15+
<body>
16+
<h1>This is a Heading 1</h1>
17+
<h2>This is a Heading 2</h2>
18+
<h3>This is a Heading 3</h3>
19+
<h4>This is a Heading 4</h4>
20+
<h5>This is a Heading 5</h5>
21+
<h6>This is a Heading 6</h6>
22+
</body>
23+
</html>
24+
```
25+
26+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
27+
<div>
28+
<h1>This is a Heading 1</h1>
29+
<h2>This is a Heading 2</h2>
30+
<h3>This is a Heading 3</h3>
31+
<h4>This is a Heading 4</h4>
32+
<h5>This is a Heading 5</h5>
33+
<h6>This is a Heading 6</h6>
34+
</div>
35+
</BrowserWindow>
36+
37+
In the example above, the `<h1>` to `<h6>` tags define headings of different sizes. The `<h1>` tag defines the most important heading, while the `<h6>` tag defines the least important heading.
38+
39+
:::tip
40+
**Tip:** Use HTML headings to define the structure of your web page. Headings are important for search engine optimization (SEO) and accessibility.
41+
42+
**Best Practice:**
43+
- `<h1>` should be used for the main heading of the page.
44+
- `<h2>` to `<h6>` should be used for subheadings and other content headings.
45+
- Avoid skipping heading levels (e.g., using `<h1>` followed by `<h3>`).
46+
- Use headings to create a logical structure for your content.
47+
48+
:::
49+
50+
## Summary
51+
52+
HTML headings are defined with the `<h1>` to `<h6>` tags. `<h1>` defines the most important heading, while `<h6>` defines the least important heading. Headings are important for search engine optimization (SEO) and accessibility. Use headings to define the structure of your web page and create a logical structure for your content.

‎docs/html-basics/introduction-to-html.mdx

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
sidebar_position: 1
33
---
44

5-
# Introduction to HTML
5+
# 🙋🏻 Introduction to HTML
66

77
HTML stands for **Hyper Text Markup Language**. It is the standard markup language for creating Web pages. It describes the structure of Web pages using markup.
88

@@ -26,10 +26,73 @@ The end tag is written like the start tag, but with a forward slash inserted bef
2626
</html>
2727
```
2828

29+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
30+
<div>
31+
<h1>This is a Heading</h1>
32+
<p>This is a paragraph.</p>
33+
</div>
34+
35+
</BrowserWindow>
36+
2937
In the example above, the `<html>` tag is the root element of the HTML document. The `<head>` element contains meta-information about the document, such as its title. The `<title>` element specifies a title for the document. The `<body>` element contains the visible page content. The `<h1>` element defines a large heading. The `<p>` element defines a paragraph.
3038

3139
HTML documents are saved in `.html` or `.htm` file extension. The file extension is not mandatory, but it is a good practice to use it.
3240

3341
HTML documents are text files that can be created using any text editor. You can use Notepad, Notepad++, Sublime Text, Visual Studio Code, or any other text editor to create HTML documents.
3442

35-
In the next section, we will learn how to create an HTML document and view it in a web browser.
43+
## HTML Page Structure
44+
45+
An HTML document consists of the following parts:
46+
47+
<div style={{border: "1px solid #ccc", padding: "1rem", marginBottom: "1rem"}}>
48+
49+
&lt;!DOCTYPE html&gt;
50+
51+
&lt;html&gt;
52+
53+
<div style={{border: "1px solid #ccc", padding: "1rem", marginBottom: "1rem"}}>
54+
55+
&lt;head&gt;
56+
57+
<div style={{border: "1px solid #ccc", padding: "1rem", marginBottom: "1rem"}}>
58+
59+
&lt;title&gt;Page Title&lt;/title&gt;
60+
61+
</div>
62+
63+
&lt;/head&gt;
64+
65+
&lt;body&gt;
66+
67+
<div style={{border: "1px solid #ccc", padding: "1rem", marginBottom: "1rem"}}>
68+
69+
&lt;h1&gt;This is a Heading&lt;h1&gt;
70+
71+
&lt;p&gt;This is a paragraph.&lt;/p&gt;
72+
73+
&lt;!-- More content goes here --&gt;
74+
75+
</div>
76+
77+
&lt;/body&gt;
78+
79+
</div>
80+
81+
&lt;/html&gt;
82+
</div>
83+
84+
<br />
85+
86+
In this structure:
87+
88+
- The `<!DOCTYPE html>` declaration defines the document type and version of HTML.
89+
- The `<html>` element is the root element of an HTML page.
90+
- The `<head>` element contains meta-information about the document, such as its title.
91+
- The `<title>` element specifies a title for the document.
92+
- The `<body>` element contains the visible page content.
93+
- The `<h1>` element defines a large heading.
94+
- The `<p>` element defines a paragraph.
95+
96+
## Summary
97+
98+
HTML is the standard markup language for creating Web pages. It describes the structure of Web pages using markup. HTML elements are the building blocks of HTML pages and are delineated by tags, written using angle brackets. HTML tags normally come in pairs like `<p>` and `</p>`. The first tag in a pair is the start tag, the second tag is the end tag. HTML documents are saved in `.html` or `.htm` file extension and can be created using any text editor. An HTML document consists of the `<!DOCTYPE html>` declaration, `<html>`, `<head>`, `<title>`, and `<body>` elements.

0 commit comments

Comments
 (0)