DEV Community: Mahalakshmi C

HTML Table

Mahalakshmi C — Wed, 22 Jul 2026 15:31:55 +0000

An HTML table is used to organize and display data in rows and columns.
Tables are useful when we need to present related information in a structured format, such as student marks, employee details, product information, prices, and schedules.
An HTML table is created using the <table> tag.

HTML Table Elements

<table>-used to element defines the complete table.

Table row — The <tr> element creates a row in the table.

Table Header —the <th> element defines a heading or header cell.

By default, the text is usually bold and centered.

Table Data - The <td> element defines a normal data cell.

Table Title - The <caption> element adds a title to the table.

Table Header Section - The <thead> element groups the header rows of a table.

Table Body Section - The <tbody> element groups the main data rows of a table.

Table Footer Section - The <tfoot> element groups the footer or summary rows of a table.

Column Group - The <colgroup> element is used to group one or more columns in a table.

HTML Table Attributes

colspan - The colspan attribute allows one cell to occupy multiple columns.

rowspan - The rowspan attribute allows one cell to occupy multiple rows.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
      <meta charset="UTF-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
       <title>Student Details</title> 
<style> 
table {
 width: 100%; border-collapse: collapse;
} 
th, td {
 border: 1px solid black; padding: 10px; text-align: left;
} 
th { 
  background-color: lightgray; 
} 
</style> 
</head> 
<body> 
<table>
 <caption>Student Details</caption>
 <thead>
   <tr>
     <th>Name</th>
     <th>Course</th>
     <th>Age</th>
  </tr> 
 </thead> 
 <tbody>
  <tr>
    <td>Aswin</td>
    <td>Full Stack Development</td>
    <td>24</td>
  </tr> 
  <tr>
    <td>Ravi</td>
    <td>Web Development</td>
    <td>25</td>
 </tr>
</tbody> 
<tfoot> 
  <tr> 
    <td colspan="3">Student Information</td>
  </tr> 
 </tfoot> 
</table> 
</body> 
</html>

output:

HTML Form - Elements

Mahalakshmi C — Mon, 20 Jul 2026 12:04:43 +0000

HTML provides several form elements that allow users to enter, select, and submit data.
Each form element has a specific purpose, such as collecting text, selecting an option, uploading a file, or submitting a form.

The most commonly used HTML form elements are:
input

label
textarea
select
option
optgroup
button
fieldset
legend
datalist

The <label> element provides a description for a form field. It helps users understand what information they need to enter and also improves accessibility.

<label for="name">Name:</label>
<input type="text" id="name">

textarea

The <textarea> element creates a multi-line text box for entering long text.

Used For

Comments
Feedback
Address
Messages

<textarea rows="4" cols="30"></textarea>

select

The <select> element creates a drop-down list from which users can choose one or more options.

option

The <option> element defines each item inside a <select> drop-down list.

optgroup

The <optgroup> element groups related options inside a drop-down list, making long lists easier to organize.

<select>
<optgroup label="Frontend">
<option>HTML</option>
<option>CSS</option>
</optgroup>
<optgroup label="Backend">
<option>Python</option>
<option>Java</option>
</optgroup>
</select>

button
The element creates a clickable button. It can be used to submit a form, reset a form, or perform other actions using JavaScript.

<button type="submit">Submit</button>

fieldset
The <fieldset> element groups related form fields together by drawing a border around them. It helps organize forms into sections.

legend
The <legend> element provides a title or caption for a <fieldset>.

<fieldset>
<legend>Personal Information</legend>
<input type="text">
<input type="email">
</fieldset>

datalist
The <datalist> element provides a list of suggested values for an field. Users can either choose one of the suggestions or type their own value.

<label>Choose a Browser:</label>
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>

Example

HTML Form

Mahalakshmi C — Fri, 17 Jul 2026 12:58:39 +0000

<input> Tag

The <input> tag is one of the most important HTML form elements.

It is used to create different types of input fields where users can enter or select data.
The behavior of the tag depends on its type attribute. By changing the value of type, the same tag can create a text box, password field, email field, radio button, checkbox, file upload, and many other input controls.

Syntax:

<input type="value">

The type Attribute

The type attribute defines what kind of input field the browser should display.

There are many input types available. The most commonly used ones are:

text
password
email
number
date
radio
checkbox
file
submit
reset
button

type="text"- Creates a single-line text box.

<input type="text">

type="password"- Creates a password field where the entered characters are hidden.

<input type="password">

type="email"- Accepts email addresses and performs basic email validation.

<input type="email">

type="number"- Allows users to enter only numeric values.

<input type="number">

type="date"- Displays a calendar for selecting a date.

<input type="date">

type="radio"- Allows users to select only one option from a group.


<input type="radio" name="gender"> Male

<input type="radio" name="gender"> Female

type="checkbox"- Allows users to select multiple options.

<input type="checkbox"> HTML

<input type="checkbox"> CSS

<input type="checkbox"> JavaScript

type="file"- Allows users to upload files from their device.

<input type="file">

type="submit"- Creates a button that submits the form data to the server.


<input type="submit" value="Register">

type="reset"- Creates a button that clears all form fields.

<input type="reset" value="Clear">

type="button"- Creates a normal button. It does not submit the form unless JavaScript is added.

<input type="button" value="Click Me">

HTML form - Attributes

Mahalakshmi C — Thu, 16 Jul 2026 14:24:28 +0000

A form acts as a bridge between the user and the website. It collects information entered by users and sends it to a server where it can be processed, stored, or validated.

Without HTML forms, websites would only display information. Users wouldn't be able to interact with them by entering data.

In this blog, we'll learn everything about HTML Forms, including how they work, their important attributes, and the most commonly used form elements.

What is HTML Form?
An HTML Form is a section of a webpage used to collect user input.

It contains different input fields such as:

Text boxes
Password fields
Radio buttons
Checkboxes
Drop-down lists
File upload
Buttons

The collected information is usually sent to a web server for processing.

Syntax

<form>
    Form Elements
</form>

What Happens Without HTML Forms?

Imagine visiting these websites without forms:

Gmail - You cannot enter your email or password.
Amazon - You cannot search products.
Instagram - You cannot login or sign up.

The HTML <form> element is used to create an HTML form for user input.

Important Attributes of the <form> Tag

action
method
name
novalidate
autocomplete
target

action Attribute

The action attribute tells the browser where to send the form data after the user clicks the Submit button.

<form action="login.php">

Method Attribute

The method attribute tells how the form data should be sent to the server.
There are two commonly used methods:

GET
POST

The GET method sends form data through the URL. It is mainly used when the data is not sensitive, such as search queries.

<form action="login.php" method="GET">

The POST method sends form data inside the request body, so it does not appear in the URL.

<form action="search.php" method="POST">

name Attribute

The name attribute gives a name to the form or its controls. When the form is submitted, the server identifies each value using its name.

<input type="text" name="username">
<input type="password" name="password">

novalidate Attributes

HTML checks required fields before submitting.

<input type="email" required>

The browser won't submit until a valid email is entered.

autocomplete Attribute

This attribute tells the browser whether it should remember previously entered values.

<form autocomplete="on">

target Attribute

The target attribute specifies where the server's response will be displayed after the form is submitted.

_self (Default)- Opens the response in the same browser tab.

<form target="_self">

_blank - Opens the response in a new browser tab.

<form target="_blank">

HTML Forms are one of the most powerful features of HTML because they allow users to interact with websites. Understanding the <form> tag, its attributes like action and method, and common form elements is an essential step toward becoming a web developer

HTML Attributes

Mahalakshmi C — Wed, 15 Jul 2026 12:39:54 +0000

In this blog, we'll explore what HTML attributes are, why they're important, their syntax, and the most commonly used attributes with simple explanations.

As I continued learning, I realized that these are play a key role in making web pages functional and meaningful. Attributes provide additional information about HTML elements, helping define their behavior, appearance, and purpose. Without attributes, HTML would only provide the basic structure of a webpage, but many essential features-like links, images, and forms-wouldn't work as expected.

What are HTML Attributes?

All HTML elements can have attributes

HTML attributes provide additional information about HTML elements.
They define the behavior, appearance, or properties of an element.
Attributes usually come in name/value pairs like: name="value"

Syntax

<tagname attribute="value">Content</tagname>

Uses

Add extra information to HTML elements.
Link web pages using the href attribute.
Display images using the src attribute.

Attributes

The href (hyperlink)attribute specifies the URL of the page the link.

<a href="https://www.google.com">Visit Google</a>

The id attribute gives an HTML element a unique name. An id should be used only once on a webpage.

<h1 id="main-heading">Welcome to My Website</h1>

The class attribute groups one or more HTML elements together. Multiple elements can have the same class.

<p class="text">HTML</p>
 <p class="text">CSS</p>

The style attribute is used to apply CSS directly to an HTML element.

<h2 style="color:blue;">Hello World</h2>

The title attribute provides additional information about an element. A tooltip appears when the user places the mouse pointer over the element.

<p title="This is a paragraph">Move your mouse here.</p>

The src attribute specifies the location (source) of an image, audio, video, or other external file.

<img src="flower.jpg">

The alt (alternative text) attribute provides a text description for an image if it cannot be displayed.

<img src="cat.jpg" alt="Cute white cat">

The width and height of an image , div or other elements.

<img src="flower.jpg" width="300" height="200">

The placeholder attribute displays hint text inside an input field until the user enters data.

<input type="text" placeholder="Enter your name">

CSS Selector

Mahalakshmi C — Tue, 14 Jul 2026 14:38:13 +0000

What are CSS Selectors?

CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them

Type of CSS selector

Element Selector:

Selects all elements with the same HTML tag.

button {
    background-color: green;
    color: white;
    padding: 10px;
}

Class Selector:

The class attribute is used to group multiple HTML elements.
You can apply the same CSS style to all elements that have the same class name.
In CSS, the class selector is represented by a dot (.).

.title {
    color: green;
}

ID Selector:

The id attribute is used to identify one unique HTML element.
Each id value should be used only once on a page.
In CSS, the ID selector is represented by a hash (#).

#logo {
    color: red;
}

Group Selector

The Group Selector is used to apply the same CSS style to multiple selectors.
It is represented by a comma (,).

h2, p {
    margin: 20px;
}

Universal Selector

The Universal Selector selects all HTML elements on the page.
It is represented by the * symbol.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

HTML Code

<body>

    <h1 id="logo">My Website</h1>

    <h2 class="title">Welcome</h2>

    <p class="title">This is my first paragraph.</p>

    <button>Login</button>
    <button>Sign Up</button>

</body>

output:

HTML Tags

Mahalakshmi C — Sun, 12 Jul 2026 14:48:06 +0000

What is HTML?
HTML stand as HyperText Markup Language, is the standard markup language used to create and structure the content of a web page.

What is HTML Tag?
HTML uses tags to create the structure of a web page. Tags are enclosed in angle brackets (< >).

DOCTYPE HTML
<!DOCTYPE html> tells the browser that the document is written in HTML5. It should always be the first line of an HTML document.

HTML Tag
The <html> Tag is the root element of an HTML document.

Head Part

The <head> Tag contains information about the webpage, such as the title, CSS links, meta tags, and scripts. It is not displayed on the webpage.
The <title> tag sets the title of the webpage, which appears on the browser tab.
The <meta> tag provides additional information (metadata) about the webpage, such as character encoding and responsive viewport settings.
The <style> tag is used to write Internal CSS to style HTML elements.

Body Part

The <body> tag contains all the visible content of the webpage, such as headings, paragraphs, images, buttons, forms, and links.
The Heading tags are used to create headings.<h1> is the largest heading, and <h6> is the smallest.
The <p> tag is used to create a paragraph.
The <a> Anchor tag is used to create a hyperlink, allowing users to navigate to another webpage or website.
The <img> tag displays an image on the webpage.
The <div> tag is a block-level container used to group multiple HTML elements together for styling and layout.
The <span> tag is an inline container used to style or highlight a small part of the text.
The <br> tag inserts a line break, moving the next content to a new line.
The <hr> tag creates a horizontal line to separate sections of content.
The <button> tag creates a clickable button.
The <input> tag creates an input field where users can enter data.

<!DOCTYPE html>
<html>

<head>
    <title>Basic HTML Example</title>
</head>

<body>

    <!-- Div Tag -->
    <div>

        <!-- Heading Tag -->
        <h1>Welcome to My Website</h1>

        <!-- Paragraph Tag -->
        <p>This is a simple HTML page created using basic HTML tags.</p>

        <!-- Image Tag -->
        <img src="profile.jpg" alt="Profile Image" width="200">

        <br><br>

        <!-- Anchor Tag -->
        <a href="https://www.google.com">Visit Google</a>

        <br><br>

        <!-- Input Tag -->
        <input type="text" placeholder="Enter your name">

        <br><br>

        <!-- Button Tag -->
        <button>Submit</button>

    </div>

</body>

</html>

What is GitLab? How to Install, Use, and Push Code .

Mahalakshmi C — Fri, 10 Jul 2026 17:26:43 +0000

Hii Guys

In this blog, we are going to see how to install GitLab and Works.

What is GitLab?

GitLab is a web-based DevOps platform that provides:

Git repository hosting
Continuous Integration / Continuous Deployment (CI/CD)
Issue tracking
Project management tools

👉 GitLab Official website:(https://gitlab.com?utm_source=chatgpt.com)

👉 GitLab Official Download:(https://gitscm.com/downloads?utm_source=chatgpt.com)

How to Create a GitLab Account

Create GitLab Account
Sign up using email
Verify your account

How GitLab Works

Create a repository (project)
Clone it to your local system
Make changes
Commit changes
Push to GitLab

Basic Git Commands

Initialize Git Repository

git init
Creates a new Git repository in your folder

2.Check Status

git status
Shows changed, staged, and untracked files.

3.Add Files

git add file_name
Adds a specific file .

git add .
Adds all files.

4.Commit Changes

git commit -m "Your message"
Saves changes with a message.

5.Connect to GitLab Repository

git remote add origin https://gitlab.com/username/project.git
Links your local project to GitLab.

6.Push Code

git push -u origin main

"origin" → remote name
"main" → branch name
"-u" → sets upstream (first time only)

7.Clone Repository

git clone https://gitlab.com/username/project.git
Downloads project from GitLab.

8.Pull Latest Changes

git pull
Gets latest updates from GitLab.

HTML Inline and Block Element

Mahalakshmi C — Thu, 09 Jul 2026 14:12:07 +0000

What is HTML Element?

An HTML element is the fundamental building block of a webpage that tells a web browser how to structure, format, and display content.
The HTML element is everything from the start tag to the end tag.

Example:

       <h1>My First Heading</h1>

HTML elements are mainly divided into two types:

Block Elements
Inline Elements

Block Elements

A block element always starts on a new line and takes up the full available width by default.

Block Elements: <div>, <p>,<h1>–<h6>, <ul>, <li>, <header>, <footer>, and <section>.

<h1>Welcome</h1>
<p>Hello</p>
<div>Content</div>

Output:
Welcome Hello Content

Inline Elements

An inline element does not start on a new line.It only takes up as much width as its content needs.

Inline Elements: <span>, <a> (hyperlinks), <strong>, <em>, <img>, and <button>.

<span>Hello</span>
<span>World</span>

Output:Hello World

Diagram of HTML Elements:

Learning HTML and CSS

Mahalakshmi C — Wed, 08 Jul 2026 17:03:19 +0000

Hi All,

I started learning HTML and CSS. My trainer taught us how to design the Instagram login page. I learned how to use HTML tags like heading, Image, Input and CSS properties like Flexbox, padding, margin, and border.

After class, I practiced by creating the Netflix sign-in page. I am happy because I completed it and learned something new.

I am excited to learn more and improve my web development skills every day.