Scribd
Upload
13 views17 pages

CONTENT

The document provides a comprehensive guide on various HTML and CSS techniques, including using sub and sup tags, creating tables, adding form elements like text boxes and password fields, and applying CSS selectors. It includes code examples for each topic, demonstrating practical applications such as styling elements and creating structured layouts. Additionally, it covers advanced CSS properties like outlines and borders for images.

Uploaded by

Kanak Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views17 pages

CONTENT

The document provides a comprehensive guide on various HTML and CSS techniques, including using sub and sup tags, creating tables, adding form elements like text boxes and password fields, and applying CSS selectors. It includes code examples for each topic, demonstrating practical applications such as styling elements and creating structured layouts. Additionally, it covers advanced CSS properties like outlines and borders for images.

Uploaded by

Kanak Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

CONTENT:

S.NO: TOPIC: PAGE NO.:

1. USING SUB % SUP TAG

2. USING FRAME ATTRIBUTE

3. CREATING A TABLE

4. CREATING A TABLE USING


SPANNING
5. ADDING A TEXTBOX

6. ADDING A PASSWORD FIELD

7. BASIC SELECTOR IN CSS

8. USING OUTLINE PROPERTY

9. ADDING BUTTONS

10. ADDING BORDER TO AN IMAGE

1 USING SUB % SUP TAG:


<!DOCTYPE html>
6of 9 1
<html lang="en">
<head>
<title>Chemical % Mathematical Formulae</title>
</head>
<body>
USING CHEMICAL AND MATHEMATICAL FORMULAE:-<BR><br>
<b><u>Chemical Formulae</u></b><BR>
CO<sub>2</sub><BR>
H<sub>2</sub>O<br>

<b><u>Displaying Mathmatical Formulae</u></b><br>


(A+B)<sup>2</sup>=A<sup>2</sup>+B<sup>2</sup>+2AB<br>
(A-B)<sup>2</sup>=A<sup>2</sup>+B<sup>2</sup>=-2AB<br><br>
<p>ABHI TEAM</p>
</body>
</html>

OUTPUT:
2 USING FRAME ATTRIBUTE:

6of 9 2
<html>
<head>
<title>Creating table</title>
</head>

<body topmargin=50 leftmargin=50 Bgcolor="lightgreen">


<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="LEFT"
HEIGHT="50" WIDTH="80" FRAME="BOX">
<TR BGCOLOR="YELLOW">
<TH>BOX</TH>
</TR>
</table><br>

<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="CENTER"


HEIGHT="50" WIDTH="80" FRAME="ABOVE">
<TR BGCOLOR="YELLOW">
<TH>ABOVE</TH>
</TR>
</table><br>

<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="RIGHT"


HEIGHT="50" WIDTH="80" FRAME="BELOW">
<TR BGCOLOR="YELLOW">
<TH>BELOW</TH>
</TR>

6of 9 3
</table><br>

<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="LEFT"


HEIGHT="50" WIDTH="80" FRAME="Rhs">
<TR BGCOLOR="YELLOW">
<TH>RHS</TH>
</TR>
</table><br>

<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="CENTER"


HEIGHT="50" WIDTH="80" FRAME="Lhs">
<TR BGCOLOR="YELLOW">
<TH> LHS</TH>
</TR>
</table><br>

<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="RIGHT"


HEIGHT="50" WIDTH="80" FRAME="Vsides">
<TR BGCOLOR="YELLOW">
<TH>VSIDES</TH>
</TR>
</table><br>

<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="LEFT"


HEIGHT="50" WIDTH="80" FRAME="Hsides">

6of 9 4
<TR BGCOLOR="YELLOW">
<TH>HSIDES</TH>
</TR>
</table><br>

<table Border=5 Bordercolor="red" BGCOLOR="WHITE" ALIGN="CENTER"


HEIGHT="50" WIDTH="80" FRAME="Void">
<TR BGCOLOR="YELLOW">
<TH>VOID</TH>
</TR>
</table>
</body>
</html>

OUTPUT:

6of 9 5
------------------------------------------------------------------------------------
3 CREATING A TABLE:
<HTML>
<HEAD>
<TITLE>CREATING A TABLE</TITLE>
</HEAD>

<BODY topmargin="50" leftmargin="50" BGCOLOR="PINK">


<TABLE BORDER="3" BGCOLOR="WHITE" BORDERCOLOR="PURPLE"
BACKGROUND="WHITE-BACKGROUND.JPG" ALIGN="CENTER" CELLPADING="10"
CELLSPACING="10" HEIGHT="300" WIDTH="400">
<TR>

<TH>S.NO</TH><TH>NAME</TH><TH>GRADES</TH><TH>BEHAVIOUR</TH>
</TR>

<TR>
<TD>1</TD><TD>ABHI</TD><TD>A+</TD><TD>GOOD</TD>
</TR>

<TR>
<TD>2</TD><TD>HONEY</TD><TD>A</TD><TD>EXCELLENT</TD>
</TR>

<TR>
6of 9 6
<TD>3</TD><TD>SHAGUN</TD><TD>B</TD><TD>AVERAGE</TD>
</TR>
</TABLE>
</BODY>
</HTML>

OUTPUT:
------------------------------------------------------------------------------------
4 CREATING A TABLE USING SPANNING;
<HEAD>
<TITLE>SPANNING</TITLE>
</HEAD>
<BODY BGCOLOR="LIGHTYELLOW">
<TABLE BORDER="5" BORDERCOLOR="RED">
<TR>
<TH COLSPAN="4" ALIGN="CENTER">CLASS10TH</TH>
</TR>
<TR>
6of 9 7
<TH
ROWSPAN="3">DETAILS</TH><TH>S.NO</TH><TH>NAME</TH><TH>GRADES</T
H>
</TR>
<TR>
<TD>1</TD><TD>HONEY</TD><TD>A</TD>
</TR>
<TR>
<TD>2</TD><TD>SHAGUN</TD><TD>A+</TD>
</TR>
</TABLE>
</BODY>
</HTML>

OUTPUT:
------------------------------------------------------------------------------------
5 ADDING A TEXT BOX:
<HTML>

6of 9 8
<HEAD>
<TITLE>USING FORM ELEMENTS</TITLE>
</HEAD>
<BODY BGCOLOR="CYAN">
<FORM>
NAME<INPUT TYPE="TEXT" NAME="FIRSTNAME" SIZE="30"
MAXLENGTH="10" VALUE="">
<BR><BR>
FATHER'S NAME<INPUT TYPE="TEXT" NAME="SECONDNAME" SIZE="30"
MAXLENGTH="10" VALUE="">
</FORM>
</BODY>
</HTML>

OUTPUT:
------------------------------------------------------------------------------------
6 ADDING A PASSWORD FIELD:
<HTML>
<HEAD>
6of 9 9
<title>using password field</title>
</HEAD>
<BODY BGCOLOR="LIGHTGREEN">
<FORM>
<P>ENTER USERNAME<INPUT TYPE="TEXT" NAME="USERNAME"
SIZE="30"></P><BR><BR>
<P>ENTER PASSWORD:<INPUT TYPE="PASSWORD" NAME="PASSWORD"
SIZE="20"></P>
</FORM>
</BODY>
</HTML>

OUTPUT:
------------------------------------------------------------------------------------
7 BASIC SELECTOR IN CSS:
A- USING UNIVERSAL SELECTOR:
<HTML>
<HEAD>

6of 9 10
<TITLE>UNIVERSAL SELECTOR</TITLE>
<STYLE TYPE="text/css">
*{color: green; font-size: 20px;}
</STYLE>
</HEAD>
<BODY>
<H1>UNIVERSAL SELECTOR</H1>
<P>USING UNIVERSAL SELECTOR IN CSS</P>
</BODY>
</HTML>

------------------------------------------------------------------------------------
B- USING TYPE SELECTOR:
<HTML>
<HEAD>
<TITLE>TYPE SELECTOR</TITLE>
<STYLE TYPE="text/css">
H1{font-weight: bold;font-family: arial; color: red;}
P{color:green; font-size: 20px;}
</STYLE>
</HEAD>
<BODY><H1>TYPE SLECTOR</H1>
<P>USING TYPE SELECTOR IN CSS</P>
</BODY>
</HTML>
6of 9 11
------------------------------------------------------------------------------------
C- USING CLASS SELECTOR:
<HTML>
<HEAD>
<TITLE>CLASS SELECTOR</TITLE>
<STYLE TYPE="text/css">
.my_class{color: red;}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="my_class">CLASS SELECTOR</H1>
<P CLASS="my_class"> GROUPING ELEMENTS WITH CLASS SELECTOR IN
CSS</P>
</BODY>
</HTML>

------------------------------------------------------------------------------------
D- USING ID SLECTOR:
<HTML>
<HEAD>
<TITLE>ID SELECTOR</TITLE>
<STYLE TYPE="text/css">
#my_id{color: red;}
#my_font_id{font-style: oblique;}
</STYLE>
6of 9 12
</HEAD>
<body>
<H1 ID="my_id"> ID SELECTOR</H1>
<P ID="my_font_id"> USING ID SELECTOR IN CSS</P>
</body>
</HTML>

------------------------------------------------------------------------------------
OUTPUT:

A B

C D
6of 9 13
8 USING OUTLINE PROPERTY:
<HTML>
<HEAD>
<TITLE>OUTLINE PROPERTY</TITLE></HEAD>
<STYLE TYPE="text/css">
BODY{background-color: lightyellow; color:black;}
P{font-family: Lucida handwriting ; font-size: 20px;}
</STYLE>
<P STYLE="outline-style: dashed; outline-color: green; outline-width: thick;">
Negative Mind Never Produces Positive Rsults.
</P><BR>
<P STYLE="outline-style: dotted; outline-color: purple; outline-width: thick;">
It is better to melted in feelings than to be frozen in differences.
</P><BR>
<P STYLE="outline-style: solid; outline-color: rgb(128, 0, 32); outline-width:
thick;">
If you have the courage to begin, you always have the courage to succeed.
</P><BR>
<P STYLE="outline-style: ridge; outline-color: #f72; outline-width: thick;">
Sucess only comes when our dreams get bigger than our excuses.
</P><BR>
<P STYLE="outline-style: double; outline-color: rgb(128, 0, 107); outline-
width: thick;">
In life, choose to remain motivated and not munipulated.
</P><BR>
6of 9 14
<P STYLE="outline-style: inset; outline-color:lightblue; outline-width: thick;">
Sucess is building a bridge between I can't and I am.
</P><BR>
<P STYLE="outline-style: outset; outline-color: red; outline-width: thick;">
Any knowledge which is not put into practice is like food which is not
digested.
</P><BR>
<P STYLE="outline-style: groove; outline-color: rgb(0, 124, 128); outline-
width: thick;">
Always be with people who know your value and not your price.
</P>
</BODY>
</HTML>

OUTPUT:

-----------------------------------------------------------------------------
6of 9 15
9 ADDING BUTTONS:
<HTML>
<HEAD>
<title>USING FORM ELEMENTS</title>
</HEAD>
<BODY BGCOLOR="#66CCFF">
<FORM NAME="INPUT" ACTION="html_form_action.asp" METHOD="Get">
<BR><BR>
USERNAME:<INPUT type="Text" name="user"><BR><BR>
<input type="submit" value="SEND">
<input type="reset" value="RESET">
</FORM>
</BODY>
</HTML>

OUTPUT:

6of 9 16
-----------------------------------------------------------------------------
10 ADDING BORDER TO AN IMAGE:
<html>
<head>
<title>ADDING BORDER</title>
</head>
<body>
<img src="Screenshot_20231108_173434_Chrome.jpg" Border="5">
</body>
</html>

OUTPUT:

-----------------------------------------------------------------------------

6of 9 17

You might also like