Scribd
Upload
44 views27 pages

Code:-: Object 1

<SUMMARY> The document contains 19 objects that provide HTML code examples to demonstrate different HTML tags and concepts. The code examples cover basic HTML page structure, headings, paragraphs, lists, tables, images, and adding CSS styling. Each object includes the HTML code, a brief description of what the code is demonstrating, and the expected output. Overall, the document serves as a tutorial providing many examples of how to use various HTML elements and integrate basic CSS styling. </SUMMARY>

Uploaded by

Rajesh Jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
44 views27 pages

Code:-: Object 1

<SUMMARY> The document contains 19 objects that provide HTML code examples to demonstrate different HTML tags and concepts. The code examples cover basic HTML page structure, headings, paragraphs, lists, tables, images, and adding CSS styling. Each object includes the HTML code, a brief description of what the code is demonstrating, and the expected output. Overall, the document serves as a tutorial providing many examples of how to use various HTML elements and integrate basic CSS styling. </SUMMARY>

Uploaded by

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

Object 1 :- Write simple html program’s to view the architechture of program.

Code:-
<html>

<head>Welcome to the HTML tutorial</head>

<title> Rajesh Kumar</title>

<body></body>

</html>

Output :-

Object 2 :- Write html program to the write some peragraph.

Code :-
<html>

<head><title>Rajesh Kumar</title></head>

<body>

<p>I'm Rajesh Kumar from bca third year student. My hobby is codding,watch
movies and playing virtual games.<br>Eleven students are my class and two feculty

are tech in all subjects.<br>My Project is E learning.</p>

</body>

</html>
Output :-

Object 3 :- Write html program to print address,city,state and pin code.

Code :-
<html>

<head> <title>RAJESH KUMAR</title> </head>

<body>

    <p>Address - SP collage <br>City - Sirohi <br> Dist Sirohi <br>Pincode -


307001</p>

</body>

</html>

Output :-
Object 4 :- Write html program to heading concept.
Code :-
<html>

<head> <title>Rajesh Kumar</title> </head>

<body>

    <h1>This is heding.</h1>

    <h2>This is heding.</h2>

    <h3>This is heding.</h3>

    <h4>This is heding.</h4>

    <h5>This is heding.</h5>

    <h6>This is heding.</h6>

</body>

</html>

Output :-
Object 5 :- Write html program to use BOLD,ITALIC and UNDERLIND attributes.

Code :-
<html>

<head><title>Rajesh Kumar</title></head>

<body>

   <b>This is bold</b><br>

    <i>This is italic</i><br>

    <u>This is underline</u><br>

</body>

</html>

Output :-

Object 6 :- Write html program to use inline CSS.

Code :-
<html>

<head><title>Rajesh Kumar</title></head>
<body>

   <p style="front-family:serif;front.size:10px;color:red;">Welcome to the my


world...</p>

</body>

</html>

Output :-

Object 7 :- Write html program to h1,h2, P tag in style font-color and font-family
use inline CSS.

Code :-
<html>

<head><title> Rajesh Kumar </title></head>

<body>

<h1 style ="Text-Align: Center ; FONT-FAMILY: Segoe Print"> Welcome to home

Page </h1>

<h2 style =" Text-Align: Center; COLOR: GREEN"> HTML </h2>

<P style ="Text-Align: Center; FONT-FAMILY: Segoe Print"> Hypertext Markup

Language (HTML) is the standard markup language for Rajesh Kumars designed to be

displayed in a web browser.Web browsers receive HTML Rajesh Kumars from a web

server or from local storage and render the Rajesh Kumars into multimedia web
pages.<br><br> HTML describes the structure of a web page semantically and

originally included cues for the appearance of the Rajesh Kumar.HTML can embed

programs written in a scripting language such as JavaScript, which affects the

behavior and content of web pages.</p>

</body>

</html>

Output :-

Object 8 :- Write html program to use ul and li tag.

Code :-
<html>

<head> <title> Rajesh Kumar </title> </head>

<body>

<ul style = "list-style-type:circle; Color:purple; Font-Family:Segoe


Print;FONTSIZE:40px">

<li> Delhi

<li> Mumbai

<li> Kolkata

<li> Chennai
<li> Sirohi

</ul>

</body>

</html>

Output :-

Object 9 :- Write html program to use ol and li tag with list-sytle-type decimal in
css.

Code :-
<html>

<head> <title> Rajesh Kumar </title> </head>

<body>

<OL Style="List-Style-Type:Decimal; Font-Family:Segoe Print;Font-Size:30px">

<li>Rajesh

<li>Sahil

<li>Nishant
<li>Chand

<li>Bharat

<li>Pradhuman

</OL>

</body>

</html>

Output :-

Object 10 :- Write html program to use ol and li tag with list-sytle-type Lower-
Alpha in css.

Code :-
<html>

<head> <title> Rajesh Kumar </title> </head>

<body>

<OL Style="List-Style-Type:Lower-Alpha; Font-Family:Segoe Print;Font-Size:30px">

        <li>Rajesh
        <li>Sahil

        <li>Nishant

        <li>Chand

        <li>Bharat

        <li>Pradhuman

</OL>

</body>

</html>

Output :-

Object 11 :- Write html program to use ol and li tag with list-sytle-type Lower-
Greek in css.

Code :-
<html>

<head> <title> Rajesh Kumar</title> </head>

<body>
<OL Style="List-Style-Type:Lower-Greek; Font-Family:Segoe Print;Font-Size:30px">

        <li>Rajesh

        <li>Sahil

        <li>Nishant

        <li>Chand

        <li>Bharat

        <li>Pradhuman

</OL>

</body>

</html>

Output :-

Object 12 :- Write html program to use ol and li tag with list-sytle-type Lower-
Latin in css.

Code :-
<html>
<head> <title> Rajesh Kumar </title> </head>

<body>

<OL Style="List-Style-Type:Lower-Latin; Font-Family:Segoe Print;Font-Size:30px">

        <li>Rajesh

        <li>Sahil

        <li>Nishant

        <li>Chand

        <li>Bharat

        <li>Pradhuman

</OL>

</body> </html>

Output :-

Object 13 :- Write html program to use DL, DT and DD tag with style font-
family,font color and font-size in css.

Code :-
<html>
<head> <title> Rajesh Kumar </title> </head>

<body>

<DL>

<DT style="Font-Family:Segoe Print;COLOR:Green;Font-Size:50px"> Moniter

<DD> It is a Output Device

<DT> Mouse

<DD> It is a input Device

</DL>

</body>

</html>

Output :-

Object 14 :- Write html program print two images first image is without border
and second image is with the border and set background image use css.
Code :-
<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-image: url('image.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: 100%;

</style>

</head>

<body>

  <h1 style="text-align: right;color: aliceblue;">Image is without


border:</h1><br>

  <img src="Iron-man-full.jpg", width="250px" style="float: right;"><br>

  <h1 style="color: aliceblue;text-align:initial;">Img with border:</h1><br>

  <img style="border: 6px solid red;"src="download.jpg";input width="300px"; >


<br>

</body>

</html>

Output :-
Object 15 :- Write html program to print a table and use css inline.

Code :-
<html>

<head>

<title> Rajesh Kumar </title>

<body style="background-color:lightgray;">

<table border="5"width="50%">

<Caption style="caption side:bottom;"><b>Perform Information</b></caption>

<TR><TH>NAME</TH><TH>Age</TH></TR>

<TR align="center"><TD>Rajesh</TD><TD>21</TD></TR>

<TR align="center"><TD>Bharat</TD><TD>58</TD></TR>

</table>

</body>
</head>

</html>

Output :-

Object 16 :- Write html program to print table and use internal CSS.

Code :-
<html>

<head>

<title> Rajesh Kumar </title>

<body style="background-color:white;">

<b>Specified color in table</b><br>

<table border="1"style="text-align:center"width="50%">

<tr><th style="background-color:gray;">NAME</th>

<th style="background-color:gray;">Gender</th>

<th style="background-color:gray;">AGE</th>

</tr>

<tr align=center>

<td style="background-color:black;color:white;">Rajesh</td>
<td style="background-color:black;color:white;">Male</td>

<td style="background-color:black;color:white;">20</td>

</tr>

<tr align=center>

<td style="background-color:black;color:white;">Shrupal</td>

<td style="background-color:black;color:white;">Female</td>

<td style="background-color:black;color:white;">18</td>

</tr>

<caption style="caption-side:bottom;"><b>Personal Information</b>

</caption>

</table>

</body>

</head>

</html>

Output :-
Object 17 :- Write html program to print two tables and cell spacing to use
internal CSS.

Code :-
<html>

<head>

<title>Rajesh Kumar</title>

<body style="background-color:white;">

<b>With cell specing</b><br>

<table border="1"style="text-align:center"width="20%">

<tr><th>NAME</th><th>AGE</th></tr>

<tr align="center"><td>Amit</td><td>20</td></tr>

<tr align="center"><td>Rashmi</td><td>18</td></tr>

</table>

<b>With cell specing</b>

<table border="1"style="text-align:center"CELLSPACING="10"width="20%">

<tr><th>NAME</th><th>AGE</th></tr>

<tr align="center"><td>Paramvir</td><td>20</td></tr>

<tr align="center"><td>Radhika</td><td>18</td></tr>

</table>

</body>

</head>

</html>
Output :-

Object 18 :- Write html program to add social media icons with CSS.

Code :-
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="rajesh.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/4.7.0/css/font-awesome.min.css">

   

</head>

<body>
    <a href="#" class="card">

      <i class="fa fa-google"></i>

     </a>

    <a href="#" class="card">

        <i class="fa fa-instagram"></i>

    </a>

    <a href="#" class="card">

        <i class="fa fa-facebook-f"></i>

    </a>

    <a href="#" class="card">

        <i class="fa fa-whatsapp"></i>

    </a>

</body>

</html>

CSS :
*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

body{

    display: flex;

    justify-content: center;

    align-items: center;
    height: 100vh;

    background: #171717;

.card{

    width: 50px; height: 50px;

    /* background: rgba(255,255,255,0.144); */

    background-color: khaki;

    border-radius: 10px;

    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.205),

    inset 0 20px 20px rgba(253, 253, 253, 0.205);

    margin: 15px; display: flex;

    justify-content: center; align-items: center;

    text-decoration: none;

    font-size: 2em;

    color: black;

    position: relative;

    transition: box-shadow .4s, color .8s, transform .4s;

.card:hover{

    color: black;

    background-color: white;

    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.205);

    inset: 10 0px 20px rgba(255, 255, 255, 0.287);

    inset: 0 20px 10px rgb(255, 58, 58);

    inset: -20 0px 20px rgb(104, 255, 58);


    inset: -30 0px 20px rgb(71, 58, 255);

    transform: translateY(-10px);

Output :-

Object 19 :- Write html program to print table and caption to use inline CSS.

Code :-
<html>

<head>

<title>Rajesh Kumar</title>

<body style="background-color:light-gray;">

<table border="5"width="50%">

<Caption style="caption side:bottom;"><b>Train Info</b></caption>


<TR><TH>NAME OF TRAIN</TH><TH>PLACE</TH><TH>DESTINATION</TH></TR>

<TR align="center"><TD>Nagpur Duranto SPL</TD><TD>Bandra

Terminus</TD><TD>Nagpur</TD></TR>

<TR align="center"><TD>MADRAS

MAIL</TD><TD>MADRAS</TD><TD>DELHI</TD></TR>

<TR align="center"><TD>ASHRAM

EXP.</TD><TD>AHMEDABAD</TD><TD>DELHI</TD></TR>

<TR align="center"><TD>DECCAN

EXP.</TD><TD>CHENNAI</TD><TD>MUMBAI</TD></TR>

</table>

</body>

</head>

</html>

Output :-

Object 20 :- Write html program to background-image and a tag.

Code :-
<html>

<head>

<title>Rajesh Kumar</title>

<body style="background-image:url(back4.png);"><br>

<h2><i>Welcome to world travel<i><h2><br>

<i><b>Which zone you are integreted!<ul>

<li><a href="East.html">East</a>

<li><a href="North.html">North</a> <li><a

href="West.html">West</a>

<li><a href="South.html">South</a>

</ul></b></i>

</body> </html>

Output :-

Object 21 :- Write html program to use span tag.

Code :-
<html>
<head>

<title>Rajesh Kumar</title>

<body style="background-image:url(back4.png);"><br>

<span style="Text-align:center;"<br>

<h2><i>You create missing on valuable information</i></h2>

<br>

<h3><i>Anybody,Have a nice day</i></h3>

</span>

</body>

</head>

</html>

Output :-

Object 22 :- Write html program to use frameset and frame.

Code :-

rajesh1:
<html>

    <head>

    <title>Rajesh Kumar</title>
    <style>

        body{

            background-image: url("rajesh12.jpg");

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-size: 100%;

            text-align: center;

            font-family: seoge print;

        }

    </style>

</head>

    <body>

<b><br>

    <h2>The Devloper Family</h2><p>

    </body>

    </html>

rajesh2:
<html>

<FRAMESET ROWS="70,*">

<FRAME src="rajesh1.html"Margin height=0 Margin width=0 Name="FRAME1">

<FRAMESET COLS="35%,*">

<FRAME src="rajesh3.html"Name="FRAME2">

<FRAME src="rajesh4.html"Name="FRAME3">

</FRAMESET>

</FRAMESET>

</html>
rajesh3:
<html>

<body style="background-image:url(rajesh21.jpg);text-align:center;background-
repeat: no-repeat;background-attachment: fixed;background-size: 100vh;">

<br><br>

<img height="100"src="download.jpg"/>

<body> </html>

rajesh4:
<html>

<body style="background-image:url(rajesh21.png);background-attachment:
fixed;background-size: 100%;"><br/><br/>

<b><ul>

<li>Rajesh Kumar Devloper</li>

<li>Bharat Solanki Devloper</li>

<li>Sahil Khan Assistent Programmer</li>

<li>Chand Kumar Assistent Programmer</li>

<li>Nishant Assistent Devloper</li>

</ul></b>

</body>

</html>

Output :-

You might also like