HTML unit 2-1

 HTML-Forms

In HTML, a form is used to collect user input. It allows you to gather data from users and send it to a server for processing.

To create a form in HTML, use the <form> element, along with various form controls such as <input>, <textarea>, <select>, and <button>. 

For example:

<!DOCTYPE html>
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>

<button type="submit">Submit</button>
</form>
</body>
</html>

output:- image-01 


 

 

 

 

 

INPUT-TPYES:- 

HTML provides several types of input elements, which can be used to take user input. Some of the most commonly used input types are:

  1. Text: Used to take single-line text input, represented by the "text" input type.

  2. Password: Used to take password input, represented by the "password" input type. The characters entered by the user are masked to protect sensitive information.

  3. Radio: Used to provide a list of mutually exclusive options, represented by the "radio" input type. Only one option can be selected at a time.

  4. Checkbox: Used to provide a list of options that can be selected independently, represented by the "checkbox" input type. Multiple options can be selected.

  5. Submit: Used to submit a form, represented by the "submit" input type.

  6. Reset: Used to reset the form to its original state, represented by the "reset" input type.

  7. Button: Used to create a clickable button, represented by the "button" input type.

  8. Hidden: Used to store a value that is not displayed to the user, represented by the "hidden" input type.

  9. File: Used to upload a file, represented by the "file" input type.

  10. Image: Used to take an image as input, represented by the "image" input type.

  11. Number: Used to take numeric input, represented by the "number" input type.

  12. Range: Used to take a range of values as input, represented by the "range" input type.

  13. Date: Used to take a date as input, represented by the "date" input type.

  14. Time: Used to take a time as input, represented by the "time" input type.

  15. Color: Used to select a color, represented by the "color" input type.

These are the most commonly used input types in HTML.

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

 

INPUT-Attribute:-

 

The "input" element in HTML can have several attributes that are used to control and modify its behavior and appearance. Some of the most commonly used input attributes are:

  1. name: Specifies a name for the input element that can be used to access its value in a script.
  2. id: Specifies a unique identifier for the input element that can be used to style it with CSS.
  3. value: Specifies the initial value of the input element.
  4. type: Specifies the type of input element, such as text, password, radio, checkbox, submit, reset, button, file, image, number, range, date, time, or color.
  5. disabled: Specifies that the input element should be disabled, so that the user cannot interact with it.
  6. readonly: Specifies that the input element should be read-only, so that the user can only view its value and cannot modify it.
  7. required: Specifies that the input element must be filled out before the form can be submitted.
  8. placeholder: Specifies a short hint that describes the expected value of the input element.
  9. pattern: Specifies a regular expression that the input value must match in order to be valid.
  10. maxlength: Specifies the maximum number of characters that can be entered into the input element.
  11. size: Specifies the width of the input element, in characters.
  12. src: Specifies the source URL of the image for an "image" input type.
  13. alt: Specifies alternative text for an "image" input type.
  14. checked: Specifies that a "checkbox" or "radio" input type should be selected by default.
  15. min and max: Specifies the minimum and maximum values that can be entered into a "number" or "range" input type.

These are some of the most commonly used input attributes in HTML.

program:-code:02

<!DOCTYPE html>
<html>
<body>
<h1>The input value attribute to form</h1>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html> 

output:-image-02


 

 

 

 

HTML-GRAPHICS:-

HTML graphics refer to the process of creating visual content within a website using HTML code. The two main ways to create graphics in HTML are by using HTML elements like <img> and <canvas>, or by using CSS styles to create visual elements like shapes, background images, and animations.

The <img> element is used to display images on a web page. It requires a source attribute that specifies the URL of the image to be displayed, like this: <img src="image.jpg">.

The <canvas> element provides a way to create dynamic graphics and animations using JavaScript. It provides a 2D drawing surface that can be used to draw shapes, images, and text. For example:code:03

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML-Graphics</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>
<div style="background-image: url(image.jpg); background-color: green; border-radius: 50%; width: 200px; height: 200px;"></div>
</body>
</html> 

ouput:-image-03


 

 

 

  

 

 

 

 

 

Graphics svg :- 

SVG (Scalable Vector Graphics) is a vector graphics format used for displaying graphics on the web. Unlike raster graphics, which use pixels to represent images, SVG uses mathematical equations to describe graphics. This means that SVG graphics can be scaled up or down without losing quality, making it ideal for use on the web.

SVG graphics are created using XML code, which can be embedded directly into an HTML document. For example

 <svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

The above code creates a blue circle with a radius of 40 units and a center point at (50, 50). The width and height of the SVG element are set to 100 units each.

In addition to basic shapes like circles, rectangles, and polyglines, SVG also supports more complex graphics, including gradients, patterns, and masks. It also supports interactivity through the use of JavaScript, allowing for dynamic and animated graphics.

SVG has many advantages over raster graphics, including smaller file sizes, better scalability, and better accessibility. However, it may not be the best choice for all types of graphics, as it does not support as many features as raster formats like JPEG or PNG. For example, it does not support variable transparency levels for individual pixels.

MULTIMEDIA:-

HTML multimedia refers to the use of various media types in HTML documents, including images, audio, video, and animations. These elements can be added to an HTML page using HTML tags and attributes, along with supporting technologies such as CSS and JavaScript.

Here are some common HTML multimedia elements:

  • <img>: This tag is used to embed images in an HTML document. The src attribute specifies the URL of the image file.

  • <audio>: This tag is used to embed audio files in an HTML document. The src attribute specifies the URL of the audio file.

  • <video>: This tag is used to embed video files in an HTML document. The src attribute specifies the URL of the video file.

  • <canvas>: This tag is used to create dynamic graphics and animations in an HTML document using JavaScript.

  • <svg>: This tag is used to embed scalable vector graphics in an HTML document.

Multimedia elements can be customized using CSS and JavaScript to create rich and engaging user experiences. For example, you can use CSS styles to control the size, position, and appearance of images, and JavaScript to add interactivity to video and audio elements.

It's important to keep in mind that different browsers support different multimedia formats, so it's a good idea to use multiple formats to ensure that your content can be accessed by as many users as possible. For example, you might use both MP4 and WebM formats for video, and both MP3 and Ogg formats for audio.

CODE:04

<!DOCTYPE html>
<html>
<body>
<h1>image</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPIS8C2oNXxZh6GKeNqrjCRdtsS-0Jk4tHqrT7uevXrzbl5vsFCgy7wkbrhY673OVqHx-Y11JYzDcPJiH5Dc3I_vc2EC8q1cXWznyBykMQnijZGYDYF07KMAMdGXoPVmI69CwEAq1QAk5UhM-R2c9KxEanvBVB4Q1gLqk2dHcjTPIB6dl1tte2m0TbA/s628/ibm-new-logo.jpg"width="320" height="240"><br>
<h1>aduio</h1>
<audio controls="">
<source src="01.mp3" type="audio/mp3"></source>
</audio><br>
<h1>video</h1>
<video width="320" height="240" controls>
<source src="01.mp4" type="video/mp4">
</video><br>
<h1>canvas-graphics</h1>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script><br>
<h1>svg-graphics</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg><br>
</body>
</html>
 

 output:-image-04


 

  

 

Comments

Post a Comment

Popular posts from this blog

digital marketing ppt-u1

 ppt unit 1-1   download unit 1-2 download unit 2-1 download unit 2-2 download Migrating from Traditional Channels to Digital Channels Migrating from traditional to digital channels can be a significant undertaking for businesses, but it can also lead to significant benefits, such as increased reach, improved customer engagement, and better data-driven decision-making. Here's a breakdown of the process: 1. Define Your Goals and Objectives: What are you hoping to achieve with your digital presence? What specific metrics will you use to measure success? Who is your target audience, and what are their digital habits? 2. Assess Your Current Situation: What are your strengths and weaknesses in terms of digital marketing? What resources do you have available (budget, personnel, technology)? What are the potential risks and challenges of migrating to digital? 3. Choose the Right Digital Channels: Social Media: Which platforms are your target audience most active on? S...
Read more

SOFTWARE

Image
 01 Winrar -64-bit version-623 Download link click- 02 chrome setup Download link click- 03 Turbo-c Download link click-  Dev  C , C ++ 04 typing master 11 Download link click- 05 java software 64-bit version-8 Download link click-               64-bit                                        32-bit        06 Adobe-version-10 Download link click- 07 sublime text -64-version-4 Download link click- 08 python -64-bit-version-3.8.6 -32-bit-version-3.8.10 Download link click- 64-bit                                                  32-bit     09 MS-office 2007 Download link click-    Download link click-wps-office-2020    10 xampp ...
Read more

cn lab

Image
download   01 programs import java.net. * ; import java.io.*; class Ports { public static void main (String [] args) throws Exception { InetAddress h = InetAddress.getLocalHost(); String host =h. getHostName(); String haddr = h. getHostAddress();  System.out.println("\nHost Name: :"+ host);  System.out.println("In Host Address:: "+haddr); for (int i=0; i < 1024; i++) { Socket s=null; try  { s = new Socket ((host), i); System.out.println(" port "+ i + "Active"); } catch (SocketException se) { } catch(Exception e) { System.out.println(" Error...."); } } } } Output:- 02 -program 2 a) import java.io.*; import java.net. *; import java.lang. * ; class chats extends Thread { public static void main (String args []) { try { ServerSocket ss = new ServerSocket (111);  System.out.println ("server ready ");  Socket s = ss.accept (...
Read more

Computer Operations and Performing - D L Unit-1-1

Image
unit-1-1 download   unit-1-2 download   unit-1-3 download  unit-1-1 download  DIGITAL LITERACY syllabus :    Computer      A computer is a programmable electronic device that processes data to perform various tasks. It can store, retrieve, and process information and it is capable of executing a wide range of operations based on instructions provided to it. Computers come in various forms, including personal computers, laptops, servers, and embedded systems. 1.       Central Processing Unit (CPU): Often referred to as the brain of the computer, the CPU performs calculations and executes instructions.   2.       Memory (RAM): Random Access Memory is used to temporarily store data that the CPU needs to access quickly. It is volatile memory, meaning it loses its contents when the power is turned off.   3.       Storage: This includes devices l...
Read more

DS-Record-mca-04) write a program for evaluating a given postfix expression using stack.

Image
    Program:-04   AIM:- write a program for evaluating a given postfix expression using stack. #include<stdio.h> #include<conio.h> int stack[20]; int top = -1; void push(int x) { stack[++top] = x; } int pop() { return stack[top--]; } void main() { char exp[20]; char *e; int n1,n2,n3,num; clrscr(); printf("\nEnter the expression :: "); scanf("%s",exp); e = exp; while(*e != '\0') { if(isdigit(*e)) { num = *e - 48; push(num); } else { n1 = pop(); n2 = pop(); switch(*e) { case '+': { n3 = n1 + n2; break; } case '-': { n3 = n2 - n1; break; } case '*': { ...
Read more

DBMS Degree Lab Records

Image
  PRACTICAL-I ER-DIAGRAM FOR TRAIN SERVICES  DRAW   ER-DIAGRAM FOR TRAIN SERVICES IN A RAILWAY STATION                              An Entity can be any object, place, person or class. Entity is represented using rectangles. An “ Entity–Relationship Model’’ ( ER- model ) modelling was developed for database design by “ Peter Chen ” and published in a “1976”. An ER- model describes about the inter-related things of interest in a specific domain of knowledge. An ER model is composed of entity types and specifies relationships that can exist between instances of those entity types. RAILWAY MANAGEMENT SYSTEM :-     ·         Railway management System is the computerized system of reserving the seats of train seats in advanced . ·      On-line reservation has made t...
Read more

Unit 2: Foundations of Ownership, Security Related Concepts in Blockchain

  Unit 2: Foundations of Ownership, Security Related Concepts in Blockchain Foundations of Ownership In traditional systems, ownership is often documented and verified by centralized authorities (e.g., land registries, banks). In blockchain, ownership is established and proven through cryptographic methods, primarily using public-key cryptography . Public and Private Keys: Each user on a blockchain network has a unique pair of cryptographic keys: a public key and a private key. The public key acts as an address, similar to an account number, visible to everyone. It's used to receive assets or data. The private key is a secret code that grants control over the assets associated with the public key. Only the person possessing the private key can authorize transactions from that address. Digital Signatures: To prove ownership or authorize a transaction, a user digitally "signs" a message or transa...
Read more

Unit-1 Foundations of Software Systems and Blockchain

  Unit 1: Foundations of Software Systems and Blockchain 1. Layers of a Software System Software systems are typically organized into layers to separate responsibilities, improve maintainability, and allow independent scaling. Common layers include: Presentation Layer: Handles user interface (UI) and user interaction (e.g., web pages, mobile app screens). Application/Business Logic Layer: Contains the core business rules and orchestrates data flow, processing user requests (the "brains" of the application). Data Access Layer (DAL): Provides an interface for the application to interact with data storage, abstracting database complexities. Data Layer: The actual persistent storage for data (e.g., databases, file systems). This layered approach promotes modularity and makes systems easier to develop, test, and update. 2. Integrity Integrity in software systems ensures that data is accurate, consistent, and trustworth...
Read more

Access the Internet to Browse Infromation & E-Mail Operation- D L Unit-2-1

    1. what is internet and what are the applications        The internet is a global network of interconnected computers and other electronic devices that communicate with each other using standardized protocols. It allows users to access and share information, resources, and services across vast distances. The internet facilitates various activities such as communication, research, entertainment, commerce, and much more. Key components of the internet include: 1. **Network Infrastructure** :       This comprises physical and virtual components, including cables, routers, switches, servers, and data centers, that enable the transmission of data across the network. 2. **Protocols** :       Protocols are rules and standards that govern how data is transmitted, routed, and received across the internet. Examples include TCP/IP (Transmission Control Protocol/Internet Protocol), HTTP (Hypertext Transfer Protoc...
Read more

6)what are the various service of internet and protocols ICT-unit-1

Image
The Internet offers a wide range of services that cater to communication, information sharing, entertainment, and business operations. Below are some of the key services provided by the Internet: 1. World Wide Web (WWW) The World Wide Web is a vast collection of interlinked documents, websites, and multimedia content accessible through web browsers like Chrome, Firefox, and Safari. Uses: Accessing websites, reading articles, watching videos, conducting research, and browsing online content. Protocols: Primarily uses HTTP (Hypertext Transfer Protocol) and HTTPS (for secure communication). 2. Email (Electronic Mail) Email allows users to send and receive messages electronically over the Internet. Uses: Communication between individuals or organizations, file sharing, and business correspondence. Protocols: SMTP (Simple Mail Transfer Protocol), IMAP (Internet Message Access Protocol), and POP3 (Post Office Protocol). 3. File Transfer (FTP) The File Transfer Protocol (FTP) allows users to ...
Read more