Showing posts with label HTML. Show all posts

Thursday, 13 February 2025

Use HTML elements and tags

Here's an example HTML document that uses various HTML elements and tags:

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Document</title>

</head>

<body>

<h1>Welcome to My Website</h1>

<nav>

<ul>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<h2>Home Section</h2>

<p>This is the home section of my website.</p>

<button>Click me!</button>

</section>

<h2>About Section</h2>

<p>This is the about section of my website.</p>

</section>

<h2>Contact Section</h2>

<p>This is the contact section of my website.</p>

<form>

<label for="email">Email:</label>

</form>

</section>

</main>

</footer>

</body>

</html>

This example uses various HTML elements and tags, including:

- Structural elements: <!DOCTYPE html>, <html>, <head>, <body>

- Heading elements: <h1>, <h2>

- Navigation elements: <nav>, <ul>, <li>, <a>

- Sectioning elements: <header>, <main>, <section>, <footer>

- Text elements: <p>, <button>, <label>, <input>

- Image elements: <img>

- Form elements: <form>, <input>, <textarea>, <select>, <option>, <button>

- Table elements: (not used in this example)

- Semantic elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

Note that this is not an exhaustive list of all HTML elements and tags, but it covers many of the common ones.

Wednesday, 12 February 2025

Enlist various HTML elements and tags

Here is a comprehensive list of HTML elements and tags:

Structural Elements

1. <!DOCTYPE html> - Document type declaration

2. <html> - Root element of the HTML document

3. <head> - Contains metadata about the document

4. <title> - Sets the title of the page

5. <body> - Contains the content of the HTML document

Headings

1. <h1> - Main heading

2. <h2> - Subheading

3. <h3> - Sub-subheading

4. <h4> - Sub-sub-subheading

5. <h5> - Sub-sub-sub-subheading

6. <h6> - Sub-sub-sub-sub-subheading

Text Elements

1. <p> - Paragraph

2. <span> - Inline container

3. <br> - Line break

4. <hr> - Horizontal rule

5. <pre> - Preformatted text

6. <code> - Code snippet

7. <kbd> - Keyboard input

8. <samp> - Sample output

9. <var> - Variable

10. <abbr> - Abbreviation

11. <address> - Contact information

12. <b> - Bold text

13. <i> - Italic text

14. <u> - Underlined text

15. <s> - Strikethrough text

16. <del> - Deleted text

17. <ins> - Inserted text

18. <mark> - Highlighted text

19. <ruby> - Ruby annotation

20. <rt> - Ruby text

21. <rp> - Ruby parenthesis

Lists

1. <ul> - Unordered list

2. <ol> - Ordered list

3. <li> - List item

4. <dl> - Definition list

5. <dt> - Definition term

6. <dd> - Definition description

Links

1. <a> - Anchor (link)

2. <link> - Link to external stylesheet or script

Images

1. <img> - Image

2. <figure> - Figure (image with caption)

3. <figcaption> - Figure caption

Tables

1. <table> - Table

2. <tr> - Table row

3. <td> - Table data cell

4. <th> - Table header cell

5. <caption> - Table caption

6. <col> - Table column

7. <colgroup> - Table column group

8. <thead> - Table header

9. <tbody> - Table body

10. <tfoot> - Table footer

Forms

1. <form> - Form

2. <input> - Form input field

3. <textarea> - Form textarea

4. <select> - Form dropdown menu

5. <option> - Form option

6. <button> - Form button

7. <label> - Form label

8. <fieldset> - Form fieldset

9. <legend> - Form legend

10. <output> - Form output

Semantic Elements

1. <header> - Header section

2. <nav> - Navigation section

3. <main> - Main content section

4. <section> - Section

5. <article> - Article

6. <aside> - Aside

7. <footer> - Footer section

8. <details> - Details element

9. <summary> - Summary element

10. <dialog> - Dialog element

Multimedia

1. <audio> - Audio element

2. <video> - Video element

3. <source> - Media source

4. <track> - Media track

5. <canvas> - Canvas element

6. <embed> - Embed element (deprecated)

Interactive Elements

1. <button> - Button element

2. <input> - Input element

3. <select> - Select element

4. <textarea> - Textarea element

5. <label> - Label element

6. <fieldset> - Fieldset element

7. <legend> - Legend element

8. <output> - Output element

Deprecated Tags

1. <font> - Font element (deprecated)

2. <center> - Center element (deprecated)

3. <strike> - Strike element (deprecated)

4. <applet> - Applet element (deprecated)

5. <embed> - Embed element (deprecated)

6. <object> - Object element (deprecated)

7. <param> - Param element (deprecated)

Note: This list is not exhaustive, but it covers most of the common HTML elements and tags.

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It is the backbone of a website, providing the structure and content that the web browser renders to the user.

HTML is made up of a series of elements, represented by tags (<>), which are used to wrap around content and apply meaning to it. These elements can be used to define headings, paragraphs, images, links, forms, tables, and more.

Some key features of HTML include:

1. Markup language: HTML uses tags to mark up content, making it easy to understand and interpret.

2. Structural: HTML provides a structural framework for web pages, defining the relationships between different elements.

3. Platform-independent: HTML can be used on any device or platform that supports a web browser.

4. Extensible: HTML allows developers to create custom elements and attributes using technologies like CSS and JavaScript.

Common HTML elements include:

- Headings (h1-h6)

- Paragraphs (p)

- Images (img)

- Links (a)

- Lists (ul, ol, li)

- Tables (table, tr, td)

- Forms (form, input, textarea)

HTML is often used in conjunction with other technologies like:

- CSS (Cascading Style Sheets) for styling and layout

- JavaScript for dynamic behavior and interactivity

- Server-side programming languages like PHP, Ruby, and Python for dynamic content generation

Overall, HTML is a fundamental building block of the web, providing the structure and content that makes up a web page.

TAGS OF HTML

Here are the common HTML tags, grouped by category:

Basic Structure

1. <!DOCTYPE html> - Document type declaration

2. <html> - Root element of the HTML document

3. <head> - Contains metadata about the document

4. <title> - Sets the title of the page

5. <body> - Contains the content of the HTML document

Headings

1. <h1> - Main heading

2. <h2> - Subheading

3. <h3> - Sub-subheading

4. <h4> - Sub-sub-subheading

5. <h5> - Sub-sub-sub-subheading

6. <h6> - Sub-sub-sub-sub-subheading

Text Elements

1. <p> - Paragraph

2. <span> - Inline container

3. <br> - Line break

4. <hr> - Horizontal rule

5. <pre> - Preformatted text

Lists

1. <ul> - Unordered list

2. <ol> - Ordered list

3. <li> - List item

4. <dl> - Definition list

5. <dt> - Definition term

6. <dd> - Definition description

Links

1. <a> - Anchor (link)

2. <link> - Link to external stylesheet or script

Images

1. <img> - Image

2. <figure> - Figure (image with caption)

3. <figcaption> - Figure caption

Tables

1. <table> - Table

2. <tr> - Table row

3. <td> - Table data cell

4. <th> - Table header cell

5. <caption> - Table caption

Forms

1. <form> - Form

2. <input> - Form input field

3. <textarea> - Form textarea

4. <select> - Form dropdown menu

5. <option> - Form option

6. <button> - Form button

Semantic Elements

1. <header> - Header section

2. <nav> - Navigation section

3. <main> - Main content section

4. <section> - Section

5. <article> - Article

6. <aside> - Aside

7. <footer> - Footer section

Multimedia

1. <audio> - Audio element

2. <video> - Video element

3. <source> - Media source

4. <track> - Media track

Interactive Elements

1. <details> - Details element

2. <summary> - Summary element

3. <dialog> - Dialog element

Deprecated Tags

1. <font> - Font element (deprecated)

2. <center> - Center element (deprecated)

3. <strike> - Strike element (deprecated)

4. <applet> - Applet element (deprecated)

5. <embed> - Embed element (deprecated)

Note: This is not an exhaustive list, but it covers most of the common HTML tags.

Friday, 31 January 2025

Create Login Page in HTML

HTML Login Form

A login form is one of the most vital features in web development. It makes it possible to identify users and, based on that identification, either admit entry to a private area or block it.

To standard field Architecture, such a form usually combines a field for input of a username or e-mail address with another field for a password. It features a button to log in. More often than not, the form would allow new users to signup or register.

When the user clicks the submit button the form sends back what was entered to the server. The server then verifies that the credentials are correct. In case of matching login details with the stored data, access will be permitted to secure content on the site. If the details are wrong an error message will be shown. The user can then try again.
This is an important HTML login form that would work in securing Web applications. It provides access

Step 1: Setting Up the HTML Document

The very first thing you need to do is to set up the HTML document. Open your favourite code editor. Create a new file. Add the basic HTML structure. Include the necessary tags. Get started

Syntax:

<html>

<head>

<titile>Title Name</titile>

</head>

<body>

//... data

</body>

</html>

Step 2: Adding Input Fields

Inside the form element, add two input fields. One for username. Another is for the password. The input tag uses type="text." This is for the username. Type="password" is for the password. Different labels are also good. Accessibility is important in both fields.

Step 3: Next, Add a Submit Button

Put a form submit button with general incorporation of the <button> component with type="submit" This will make it possible for the user to submit form data to the server. This button should be clearly labeled regarding its function. For example, "Login" or "Submit".

Example:

<-- HyperText Markup Language-->

<html>

<--to store metadata about a web page-->

<head>

<--to define the title of a document.-->

<title>Login Page</title>

</head>

<--to define the main content of a web page-->

<body>

Enter User Name: <input type="text"><br><br>

Enter Password: <input type="Password"><br>

<button>Submit</button> <button>Cancle</button>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------------ Output:

Thursday, 30 January 2025

Write a program Image Maping

Image Maps

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

<!DOCTYPE html>

<html>

<body>

<h2>Image Maps</h2>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

</map>

</body>

</html>

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

Syntax:

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

Shape="rect"

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

Shape="poly"

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

<!DOCTYPE html>

<html>

<body>

<h2>Image Maps</h2>

<p>Click on the cup of coffee to execute a JavaScript function:</p>

</map>

function myFunction() {

alert("You clicked the data name!");

}

</script>

</body>

</html>

Chapter Summary

Use the HTML <map> element to define an image map
Use the HTML <area> element to define the clickable areas in the image map
Use the HTML usemap attribute of the <img> element to point to an image map

Sunday, 12 January 2025

Write a program Design web Page using HTML

<-- HyperText Markup Language-->

<html>

<--to store metadata about a web page-->

<head>

<--to define the title of a document.-->

<title>Login Page</title>

</head>

<--to define the main content of a web page-->

<body>

<tr>

<td><a href="Login Page">Login Page</td>

<td><a href="Registration">Registration</td>

<td><a href="Images">Images</td>

<td><a href="Linking">Linking</td>

</tr>

</td></tr>

</table>

<tr>

<td width="300" style="color:#a569bd">Attenntion

<p>This Branch Under Science Faculty</p></td>

<td width="400" style="color:#2874a6">Notification

<p>Admission Open<br>BCA<br>BBA<br>MBA<br></p></td>

<td width="300" style="color:#5dade2">News

जिजाऊ माँ साहेब व स्वामी विवेकानंद जयंती - कार्यक्रमाचे.<br>

PhD Admission Notice in Botany & Biotechnology 2025.<br>

31st Raman Memorial Conference - 2025 at Department of Physics, "Quantum Science & Technology (पूंजकीय विज्ञान आणि तंत्रज्ञान)"<br>

PhD Admission Notice 2025 Biotechnology SPPU<br>

</p></td>

</tr>

</table>

</body>

</html>

Monday, 16 December 2024

Write a program to login page using Form Tag in html

Write a program to login page using Form Tag in html

<html>

<head>

</head>

<body>

<form>

<tr>

<td>Enter Your Name:<input type="text" name="t1" required></td>

</tr>

<tr>

<td>Enter Password:<input type="Password" name="p1" required></td>

</tr>

<tr>

<td><button>Submit</button>  <button>Cancle</button></td>

</tr>

</form>

</table>

</body>

</html>

Thursday, 19 September 2024

Write a Program to NOFRAME using html

<!DOCTYPE html>

<html>

<head>

<title>noframe</title>

</head>

<p>This window does not supperted your PC</p>

</body>

</html>

Tuesday, 10 September 2024

Write Program to Clickable Dropdown menu using html

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

background-color: #3498DB;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropbtn:hover, .dropbtn:focus {

background-color: #2980B9;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 160px;

overflow: auto;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

</style>

</head>

<h2>Clickable Dropdown</h2>

<p>Click on the button to open the dropdown menu.</p>

<button onclick="myFunction()" class="dropbtn">Dropdown</button>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</div>

/* When the user clicks on the button,

toggle between hiding and showing the dropdown content */

function myFunction() {

document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it

window.onclick = function(event) {

if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");

var i;

for (i = 0; i < dropdowns.length; i++) {

var openDropdown = dropdowns[i];

if (openDropdown.classList.contains('show')) {

openDropdown.classList.remove('show');

}

</script>

</body>

</html>

Write a program to Select Option using html

<!DOCTYPE html>

<html>

<head>

<title>Select Option Program</title>

</head>

<body>

<h1>Select Option Program</h1>

Select Your Language:

<option>English</option>

<option>Hindi</option>

<option>Marathi</option>

</select><br>

<button>Click Me<button>

</body>

</html>

Write a program Image using html

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

src - Specifies the path to the image
alt - Specifies an alternate text for the image

Syntax:

<!DOCTYPE html>

<html>

<head>

<style>

img {

width: 100%;

}

</style>

</head>

<body>

</body>

</html>

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

<!DOCTYPE html>

<html>

<head>

<style>

/* This style sets the width of all images to 100%: */

img {

width: 100%;

}

</style>

</head>

<body>

<h2>Width/Height Attributes or Style?</h2>

<p>The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.</p>

<p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:</p>

</body>

</html>

Common Image Formats:

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Chapter Summary

Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
Use the CSS float property to let the image float to the left or to the right

Write a program to Select File using html

<!DOCTYPE html>

<html>

<body>

<h1>Select File</h1>

Select Your File: <input type="file">

</body>

</html>

Write a program to Video Tag using html

<!DOCTYPE html>

<html>

<body>

<h1>The video element</h1>

Your browser does not support the video tag.

</video>

</body>

</html>

Write a program to Frame

<html>

<head>

<title>HTML Frames</title>

</head>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>

Thursday, 29 August 2024

Write a Program to Background Color In Html

<!DOCTYPE html>

<html>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Write a Program to Inline CSS in Html

<!DOCTYPE html>

<html>

<body>

<p>I am normal</p>

<p style="color:Green;">I am Green</p>

<p style="color:#cb4335;">I am flush mahogany red</p>

</body>

</html>

Write a program to Ordered List And Unordered List

<!DOCTYPE html>

<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

</ol>

</body>

</html>

Write a Program to UnOrdered List in Html

<!DOCTYPE html>

<html>

<body>

<h2>An UnOrdered HTML List</h2>

<ul>

<li>Coffee</li>

</ul>

</body>

</html>

Write a Program to Ordered List ih

<!DOCTYPE html>

<html>

<body>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

</ol>

</body>

</html>

Write a program to button ih html

<!DOCTYPE html>

<html>

<body>

<h2>HTML Buttons</h2>

<p>HTML buttons are defined with the button tag:</p>

<button>Click me</button>

</body>

</html>