HTML unit2-2

 Drop-Down:-

A drop-down list in HTML is a list of items that appear when a user clicks on a drop-down button. You can create a drop-down list using the <select> element. The options in the list are defined using the <option> element.

Here's an example of a simple drop-down list:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drop-Down</title>
</head>
<body>
<select>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

output:-image-01


 

 

 

Margins and border:-

Margins:-

 The HTML margin property is used to define the outer space around an HTML element. The margin property sets the margins for all four sides of an element (top, right, bottom, and left). The margin is the space outside of the border of an element, and it is used to separate an element from its surroundings.

You can set the margin property for an HTML element in CSS using the following syntax:

element {
margin: value;
}

where element is the selector for the HTML element you want to style and value is the size of the margin. The value can be specified in various units of measurement, such as pixels (px), percentage (%), or ems (em).

You can also set the margin property for individual sides of an element using the following syntax:

element {
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;
}

Border:-

The HTML border property is used to define a border around an HTML element. A border is a visual element that surrounds the content of an HTML element and separates it from other elements or the surrounding content.

You can set the border property for an HTML element in CSS using the following syntax:

element {
border: width style color;
}
 

code:02

<!DOCTYPE html>
<html>
<head>
<style>
.body{
background-color: yellow;
}
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body class="body">

<h2>Margins</h2>

<div>Top margin of 100px<br>Right margin of 150px<br>Bottom margin of 100px<br>left margin of 80px</div>

</body>
</html>
output:-image-02


 

 

 

Padding:-  

The HTML padding property is used to define the inner space around the content of an HTML element. The padding property sets the padding for all four sides of an element (top, right, bottom, and left). The padding is the space inside of the border of an element, and it is used to separate the content of an element from its border.

You can set the padding property for an HTML element in CSS using the following syntax:

element {
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
}
code:03

<!DOCTYPE html>
<html>
<head>
<style>
.body{
background-color: yellow;
}
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body class="body">

<h2>padding properties</h2>

<div>Top padding of 50px<br>Right padding of 30px<br>Bottom padding of 50px<br>Left padding of 80px</div>

</body>
</html>
output:-image-03




 

Note:- the main margins,borders and padding most importing of web design 

 image-m-b-r

Text, Fonts, and Icons:-

In HTML, text, font, and icons are all important elements that contribute to the overall appearance and functionality of a website.

Text is the primary means of conveying information and content on a website. HTML provides a number of tags for styling and formatting text, such as <p> for paragraphs, <h1> to <h6> for headings, and <em> for emphasis. The CSS font-family, font-size, font-weight, and color properties can be used to control the appearance of text.

Fonts are an essential aspect of the visual design of a website. They help to establish a consistent look and feel, and can be used to set the tone and personality of a website. Web fonts can be imported and used in a website using the CSS @font-face rule.

Icons are small, scalable graphics that are used to enhance the visual design of a website, as well as to provide navigation and other interactive elements. Icons can be created using various tools and technologies, such as vector graphics editors, and they can be implemented in a website using HTML and CSS. There are also many libraries and collections of icons available online that can be used on a website.

code:04

<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid gray;
}
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
font-weight: bold;
color: green;
}
p {
font-family: Verdana, sans-serif;
font-size: 14px;
color: black;
}
.icon {
width: 50px;
height: 50px;
background-image: url(icon.svg);
background-repeat: no-repeat;
display: inline-block;
}
</style>
</head>
<body bgcolor="yellow">
<div class="container">
<h1>Welcome to My Website</h1>
<p>This is a sample paragraph of text. It is used to demonstrate how text can be styled and formatted using HTML and CSS.</p>
<div class="icon"></div>
</div>
</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