Skip to content

Commit 1a19549

Browse files
sivaprasath2004sivaprasath2004
authored
Merge branch 'main' into sivaprasath-closes-issue-3958
2 parents 6ee77c0 + 479740f commit 1a19549

22 files changed

+1532
-203
lines changed

‎blog/Dockerize Spring-boot with Github-Actions/images/image01.png

184 KB
Loading

‎blog/Dockerize Spring-boot with Github-Actions/images/image02.png

117 KB
Loading

‎blog/Dockerize Spring-boot with Github-Actions/images/image03.png

155 KB
Loading

‎blog/Dockerize Spring-boot with Github-Actions/images/image04.png

88.8 KB
Loading

‎blog/Dockerize Spring-boot with Github-Actions/images/image05.png

93.3 KB
Loading

‎blog/Dockerize Spring-boot with Github-Actions/index.md

Lines changed: 462 additions & 0 deletions
Large diffs are not rendered by default.

‎blog/authors.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,9 @@ nayanika-mukherjee:
7070
title: Full Stack Developer
7171
url: "https://github.com/Nayanika1402"
7272
image_url: https://avatars.githubusercontent.com/u/132455412?v=4
73+
74+
DharshiBalasubramaniyam:
75+
name: Dharshi Balasubramaniyam
76+
title: Full Stack Developer
77+
url: "https://github.com/DharshiBalasubramaniyam"
78+
image_url: https://avatars.githubusercontent.com/u/139672976?s=400&v=4

‎courses/html/basic/basic-tags-and-elements.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
id: basic-tags-and-elements
3+
title: Basic Tags and Elements
4+
sidebar_label: Basic Tags and Elements
5+
sidebar_position: 3
6+
description: "Learn the basic tags and elements of HTML, the foundation of web development."
7+
tags: [html courses, web development in html courses, html basic, basic tags and elements]
8+
keywoards: [html courses, web development in html courses, html basic, basic tags and elements]
9+
author: [CodeHarborHub, Ajay Dhangar]
10+
---
11+
12+
<img src="/courses/html/basic-tags-and-elements.png" alt="Basic Tags and Elements banner" />
13+
14+
<br />
15+
<br />
16+
17+
In this section, you will learn the basic tags and elements of HTML, the foundation of web development. HTML stands for HyperText Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
18+
19+
## What are HTML Tags and Elements?
20+
21+
HTML tags and elements are the building blocks of HTML pages. HTML tags are used to define the structure of a web page and are written using angle brackets (`<` and `>`). HTML elements are delineated by tags and provide information about the content of the page. Browsers do not display the HTML tags, but use them to interpret the content of the page.
22+
23+
HTML elements can be nested within each other to create a hierarchy of content. For example, a paragraph element (`<p>`) can contain a link element (`<a>`) or an image element (`<img>`). This nesting of elements allows you to create complex layouts and structures for your web pages.
24+
25+
## Basic HTML Tags
26+
27+
Here are some of the basic HTML tags that you will use frequently when creating web pages:
28+
29+
| Tag | Description |
30+
| --- | ----------- |
31+
| `<html>` | Defines the root element of an HTML page |
32+
| `<head>` | Contains meta-information about the document, such as the title and links to external resources |
33+
| `<title>` | Defines the title of the document, which is displayed in the browser tab |
34+
| `<body>` | Contains the content of the document, such as text, images, and links |
35+
| `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Defines headings of different levels |
36+
| `<p>` | Defines a paragraph of text |
37+
| `<a>` | Defines a hyperlink to another web page or resource |
38+
| `<img>` | Defines an image to be displayed on the page |
39+
| `<ul>`, `<ol>`, `<li>` | Defines unordered and ordered lists |
40+
| `<table>`, `<tr>`, `<th>`, `<td>` | Defines a table with rows, headers, and data cells |
41+
| `<div>`, `<span>` | Defines generic containers for grouping and styling content |
42+
43+
These are just a few of the many HTML tags available for creating web pages. As you learn more about HTML, you will discover additional tags and elements that can be used to enhance the structure and appearance of your pages.
44+
45+
## Example: Creating a Simple HTML Page
46+
47+
Let's create a simple HTML page that demonstrates the use of some basic tags and elements. Open a text editor and create a new file named `index.html`. Copy and paste the following code into the file:
48+
49+
```html title="index.html"
50+
<!DOCTYPE html>
51+
<html>
52+
<head>
53+
<title>My First Web Page</title>
54+
</head>
55+
<body>
56+
<h1>Welcome to My Web Page</h1>
57+
<p>This is a paragraph of text.</p>
58+
<a href="https://codeharborhub.github.io/">Visit CodeHarborHub</a> <br /><br />
59+
<img src="https://github.com/codeharborhub.png" alt="CodeHarborHub Logo" width="40" />
60+
</body>
61+
</html>
62+
```
63+
64+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
65+
<h1>Welcome to My Web Page</h1>
66+
<p>This is a paragraph of text.</p>
67+
<a href="https://codeharborhub.github.io/">Visit CodeHarborHub</a>
68+
<br /><br />
69+
<img src="/img/nav-logo.jpg" alt="CodeHarborHub Logo" width="80" />
70+
</BrowserWindow>
71+
72+
In this example, the HTML file contains the following elements:
73+
74+
- `<!DOCTYPE html>`: This declaration defines the document type and version of HTML.
75+
- `<html>`: This element is the root element of an HTML page.
76+
- `<head>`: This element contains meta-information about the HTML document.
77+
- `<title>`: This element specifies the title of the HTML document.
78+
- `<body>`: This element contains the content of the HTML document.
79+
- `<h1>`: This element defines a heading.
80+
- `<p>`: This element defines a paragraph.
81+
- `<a>`: This element defines a hyperlink.
82+
- `<img>`: This element defines an image to be displayed on the page.
83+
84+
You can open the `index.html` file in a web browser to see the rendered web page. Experiment with adding and modifying different elements to create your own web pages using HTML tags and elements.
85+
86+
87+
## Summary
88+
89+
In this section, you learned about the basic tags and elements of HTML, the foundation of web development. HTML tags are used to define the structure of a web page, and HTML elements provide information about the content of the page. By using HTML tags and elements, you can create structured documents with text, images, links, and other elements. As you continue to learn HTML, you will discover additional tags and elements that can be used to enhance the appearance and functionality of your web pages.

‎courses/html/basic/intro-html.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ title: Introduction to HTML
44
sidebar_label: Introduction to HTML
55
sidebar_position: 1
66
description: "Learn the basics of HTML, the foundation of web development, and create your first web page."
7-
tags: [html courses, web development in html courses, html basic]
8-
keywoards: [html courses, web development in html courses, html basic]
7+
tags: [html courses, web development in html courses, html basic, introduction to html]
8+
keywoards: [html courses, web development in html courses, html basic, introduction to html]
99
author: [CodeHarborHub, Ajay Dhangar]
1010
---
1111

1212
<img src="/courses/html/intro-html.png" alt="Introduction HTML banner" />
1313

14+
<br />
1415
<br />
1516

1617
In this section, you will learn the basics of HTML, the foundation of web development, and create your first web page. HTML stands for HyperText Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

‎courses/html/basic/setting-up-html-environment.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
id: setting-up-html-environment
3+
title: Setting Up HTML Environment
4+
sidebar_label: Setting Up HTML Environment
5+
sidebar_position: 2
6+
description: "Learn how to set up your HTML development environment and create your first HTML file."
7+
tags: [html courses, web development in html courses, html basic, html environment, setting up html environment]
8+
keywoards: [html courses, web development in html courses, html basic, html environment, setting up html environment]
9+
author: [CodeHarborHub, Ajay Dhangar]
10+
---
11+
12+
<img src="/courses/html/setting-up-html-environment.png" alt="Setting Up HTML Environment banner" />
13+
14+
<br />
15+
<br />
16+
17+
In this section, you will learn how to set up your HTML development environment and create your first HTML file. Setting up your HTML environment is the first step in creating web pages using HTML. You need a text editor to write your HTML code and a web browser to view your web pages.
18+
19+
## Setting Up Your HTML Environment
20+
21+
To set up your HTML environment, you need to install a text editor and a web browser. Here are the steps to set up your HTML environment:
22+
23+
### Step 1: Install a Text Editor
24+
25+
A text editor is a software application used for creating and editing plain text files. You can use a text editor to write your HTML code. There are many text editors available, but some popular text editors for web development are:
26+
27+
- **Visual Studio Code**: A free source code editor developed by Microsoft.
28+
- **Sublime Text**: A proprietary cross-platform source code editor.
29+
- **Atom**: A free and open-source text and source code editor.
30+
- **Notepad++**: A free source code editor for Windows.
31+
- **Brackets**: A free source code editor for web development.
32+
- **Vim**: A highly configurable text editor built to enable efficient text editing.
33+
- **Emacs**: An extensible, customizable, free/libre text editor.
34+
35+
You can choose any text editor based on your preference and install it on your computer.
36+
37+
:::tip recommended
38+
39+
We recommend using **Visual Studio Code** as it is a popular text editor for web development and has many features that make it easy to write and edit HTML code.
40+
41+
:::
42+
43+
### Step 2: Install a Web Browser
44+
45+
A web browser is a software application used to access information on the World Wide Web. You can use a web browser to view your web pages. There are many web browsers available, but some popular web browsers for web development are:
46+
47+
- **Google Chrome**: A fast, secure, and easy-to-use web browser developed by Google.
48+
- **Mozilla Firefox**: A free and open-source web browser developed by the Mozilla Foundation.
49+
- **Microsoft Edge**: A web browser developed by Microsoft.
50+
- **Safari**: A web browser developed by Apple Inc.
51+
- **Opera**: A web browser developed by Opera Software.
52+
- **Brave**: A free and open-source web browser developed by Brave Software.
53+
54+
You can choose any web browser based on your preference and install it on your computer.
55+
56+
:::tip recommended
57+
58+
We recommend using **Google Chrome** as it is a popular web browser with good developer tools that make it easy to debug and test your web pages.
59+
60+
:::
61+
62+
### Basic Information For Setting Up HTML Environment
63+
64+
:::info How to Set Up Your HTML Environment with Visual Studio Code
65+
66+
**Visual Studio Code** is a popular text editor for web development that provides many features to help you write and edit HTML code. It has built-in support for HTML, CSS, and JavaScript, as well as extensions that can enhance your web development experience.
67+
68+
To set up your HTML environment with Visual Studio Code, follow these steps:
69+
70+
1. Install Visual Studio Code on your computer. You can download Visual Studio Code from the official website: [https://code.visualstudio.com/](https://code.visualstudio.com/).
71+
2. Open Visual Studio Code.
72+
3. Create a new file by clicking on `File` $\rightarrow$ `New File`.
73+
4. Save the file with the `.html` extension, such as `index.html`.
74+
5. Write your HTML code in the file.
75+
6. Save the file.
76+
7. Open the HTML file in your web browser to view the web page.
77+
8. install the **Live Server** extension in Visual Studio Code to view the web page in real-time.
78+
79+
Congratulations! You have set up your HTML environment with Visual Studio Code. You can now create and view web pages using HTML.
80+
81+
:::
82+
83+
## Creating Your First HTML File
84+
85+
To create your first HTML file, follow these steps:
86+
87+
1. Open your text editor.
88+
2. Create a new file and save it with the `.html` extension, such as `index.html`.
89+
3. Write the following HTML code in the file:
90+
91+
```html title="index.html"
92+
<!DOCTYPE html>
93+
<html>
94+
<head>
95+
<title>My First Web Page</title>
96+
</head>
97+
<body>
98+
<h1>Hello, World!</h1>
99+
<p>Welcome to my first web page.</p>
100+
</body>
101+
</html>
102+
```
103+
104+
4. Save the file.
105+
5. Open the HTML file in your web browser to view the web page.
106+
6. You should see the following output in your web browser and try to use url `http://127.0.0.1:5500/index.html` to view the web page:
107+
108+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
109+
<h1>Hello, World!</h1>
110+
<p>Welcome to my first web page.</p>
111+
</BrowserWindow>
112+
113+
In this example, the HTML file contains the following elements:
114+
115+
- `<!DOCTYPE html>`: This declaration defines the document type and version of HTML.
116+
- `<html>`: This element is the root element of an HTML page.
117+
- `<head>`: This element contains meta-information about the HTML document.
118+
- `<title>`: This element specifies the title of the HTML document.
119+
- `<body>`: This element contains the content of the HTML document.
120+
- `<h1>`: This element defines a heading.
121+
- `<p>`: This element defines a paragraph.
122+
- The text between the opening and closing tags of each element is the content of that element.
123+
- The HTML file is saved with the `.html` extension, such as `index.html`.
124+
125+
Congratulations! You have created your first web page using HTML. In the next section, you will learn more about HTML elements and attributes.
126+
127+
## Summary
128+
129+
In this section, you learned how to set up your HTML development environment and create your first HTML file. Setting up your HTML environment is the first step in creating web pages using HTML. You need a text editor to write your HTML code and a web browser to view your web pages.

0 commit comments

Comments
 (0)