Tuesday, August 29, 2023

Internal (CSS) in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{background-color:pink;
        font-style: italic;}
    #A{color: brown; font-size: large;}
    #B{color: green; font-size:large;}
    #C{color: orangered;
    font-size:large;}
    #b{color: aquamarine;
    font-size:larger;}
    #X{ background-color: pink;}
    img{border-style:double;
    border-width: 10px;
    border-radius: 50px;
}
    </style>
</head>
<body>
   <div>
   <font size="30"><center> <h1>Mozilla is cool</h1></center></font>
  <img src="mozilla.png" alt="">
   <br>
   <p>At Mosilla,we are a global community of </p>
   <br>
   <p id="A">1 technologists</p>
   <p id="B">2 thinkers</p>
   <p id="C">3 builders</p>
   <br>
   <p id="X">working together to keep the internet alive and accessible,
so people worldwide can be
    <p id="X"> informed contributers and creators of the Web.We believen
this act of human collaboration</p>
    <p id="X"> accros an open platformis essential to individual growth
and our collective future.</p>
   <br>
   <p id="X">Read the<b>Mozilla Manifesto</b> to learn ever more about
the values and principles that guide the pursuit of our mission</p>
</div>
</body>

</html>

 

Friday, August 25, 2023

Creating Presentation on Google Slides

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://docs.google.com/presentation/d/17FTQUw_AmziT59i
    XEdqPIQ1LTJb9Cv4kmVB4JqBhW0c/edit?usp=sharing" frameborder="0">
</iframe>
</body>
</html>

Creating CV form in Google Form

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://forms.gle/voEzjNshNSZ8hdLr7" frameborder="0">
</iframe>
</body>
</html>

ID tag .html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #A {
            background-color: rgb(61, 197, 197);
        }

        #B {
            background-color: blue;
        }

        #C {
            background-color: blueviolet;
        }

        #abc {
            background-color: brown;
        }

        #box {
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <p id="A">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Magni sequi commodi adipisci nihil odit unde,
        reiciendis neque officiis itaque reprehenderit a. Rerum
doloremque sequi adipisci amet ab eius? Atque, sint.</p>
    <p id="B">Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Corrupti mollitia recusandae ut numquam sequi
        delectus, sint dicta suscipit tempora laboriosam tenetur
rerum. Veritat illum in, consequuntur voluptatibus
        suscipit nobis cumque.</p>
    <p id="C">Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Nes molestiae aliquid odio sed vitae
        expedita unde rerum quam, nihil iure, quibusdam distinctio.
Fugassumenda ipsam nostrum necessitatibus
        dolores distinctio mollitia.</p>
    <p id="D">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://docs.google.com/presentation/d/17FTQUw_AmziT59i
    XEdqPIQ1LTJb9Cv4kmVB4JqBhW0c/edit?usp=sharing" frameborder="0">
</iframe>
</body>
</html> corrupti alias! Ea adipisci et natus
        nobis ab quam tempora dolorum excepturi minus magni, ipsam numquam
         omnis! Eos, magni quo?</p>
    <p id="abc"> Lorem ipsum dolor, sit amet consectetur adipisicing elit.
         hic reiciendis veniam laudantium? Sed
        quisquam rerum aperiam pariatur, animi quod accusantium minus,
         et hic fugiat ab, at officia neque?
    </p>
    <img src="celebrate.jpg" alt="" id="box">
</body>

</html> 

Cricket Live Score Board in google sheet

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://docs.google.com/spreadsheets/d/1Te9qKoSL0MIIfK
s4sHD9va-jZZHX0YILM1jOoP0tcC0/edit?usp=sharing" frameborder="0">
</iframe>
</body>
</html>

Salary Statement in google sheet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://docs.google.com/spreadsheets/d/1N5Bkn8izz0j
    _-4wwKzU1MJQQ8Ag4VZ0iBE4sdnIl9gM/edit?usp=sharing" frameborder="0">
</iframe>
</body>

</html> 

Attendance sheet on google sheet

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://docs.google.com/spreadsheets/d/1D7LYK6ct
    _qmx1t7JLSXTy5ooPwr9mCWPkJ_L7BrM-Ss/edit?usp=sharing"
     frameborder="0">
    </iframe>
</body>
</html>

Internal (CSS) in HTML

 <!DOCTYPE html>

<html>
<head>
    <title>My first website</title>
    <style>
        p{
            background-color: pink;
            border: 2px solid red;
        }
        h1{
            background-color: pink;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <h1>abc</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Facilis totam veritatis quidem, excepturi saepe delectus recusandae
eligendi rerum quas repudiandae.</p>
</body>

</html>
Cascading style sheet(css)
<!-- 3 TYPES(style)
inline (attribute)
internal(Tag)
external -->

Friday, August 18, 2023

Basic Calculation in sheet

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://docs.google.com/spreadsheets
/d/1ztOCQFDBiKmW2pBKg58JzPg0VS3y-8p1y3CMU3kZMME/edit
?usp=sharing" height="800" width="1400"
     frameborder="0"></iframe>
</body>
</html>

Made CV in Doc and insert into html using i frame tag

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <iframe src=
   "https://docs.google.com/document/d/19LTCnw9rSCScFeOi9-
PBERlqMfhs53iEGivqBaLdrsY/edit?usp=sharing"
   height="500" width="1100" frameborder="0">
</iframe>
</body>
</html>

Inserting Doc work in html using i frame tag

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <iframe src=
"https://docs.google.com/document/d/1CoLXkewx3eDOp5D8d
cvpcy8vrueA8c8kQF7F8kfRys0/edit?usp=sharing"
height="500" width="1100">
   
   </iframe>
</body>
</html>

Inserting Online Video Link using i frame tag to html

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe
width="560" height="315"
src="https://www.youtube.com/embed/sSypBUeP0YI"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"
allowfullscreen>
</iframe>
   
</body>
</html>

Inline And Block Elements in html

 <!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
   
    <p>Inline elements in html </p><br><br>

    <a>
    <br>
    <i>
    <input>    
    <label>
    <object>
    <sup>
    <time>
    <b>        
    <abbr>
    <select>
    <span>
    <img>
    <sub>
    <script>
    <br><br>

   <p>Block-level element</p> <br><br>

    <table>
    <form>
     <h1>-<h6>
     <adress>
     <div>
     <video>  

  </body>

</html>

Monday, August 14, 2023

14 August 2023

Document




Independance Day



Greetings and very good morning to everyone present.Today on this auspicious day I am going to speak about the date 14th of
The Muslims of the subcontinent finally achieved their own territory on August 14th, allowing them to live their lives in accordance
with their religion. Mr.Muhammad Ali Jinnah, Pakistan attained independence on August 14, 1947. Mr.Jinnah held the view hat Muslims could only live happily when they would own a nation headed by their own people and one that would adhere to Islamic philosophy.





History Of Pakistan

The area constituting Pakistan was historically a part of the British Indian Empire throughout much of the nineteenth
The East India Company begun their trade in colonial India in the 17th century, and the company rule started from 1757
when they won the Battle of Plassey.[5] Following the Indian Rebellion of 1857,
the Government of India Act 1858 led to the British Crown assuming direct control over much of the Indian subcontinent.
All-India Muslim League was founded by the All India Muhammadan Educational
Conference at Dhaka, in 1906, in the context of the circumstances that were generated over the division of Bengal in 1905
and the party aimed at creation of a separate Muslim state. The period after World War I was marked by British reforms
such as the Montagu-ford Reforms, but it also witnessed the enactment of the repressive Rowlatt Act and strident calls for
self-rule by Indian activists. The widespread discontent of this period crystallized into nationwide non-violent movements
of non-cooperation and civil disobedienc .The idea for a separate Muslim state in the northwest regions of South Asia was
introduced by Allama Iqbal in his speech as the President of the Muslim League in December 1930.[8] Three years later,
the name of "Pakistan" as a separate state was proposed in a declaration made by Chaudhary Rahmat Ali, in the form of
an acronym. It was to comprise the five "northern units " of Punjab, Afghania (erstwhile North-West Frontier Province),
Kashmir, Sindh, and Baluchistan. Like Iqbal, Bengal was left out of the proposal made by Rehmat Ali.





Public Celebrations

As the month of August begins, special stalls, fun fairs and shops are set up across the country for the sale of national
flags, buntings, banners and posters, badges, pictures of national heroes, multimedia and other celebratory items.
Vehicles, private buildings, homes, and streets are decorated with national flags, candles, oil lamps, pennants and
buntings .Businesses engage in rigorous marketing,[51] as do leading designer fashion outlets which stock
independence-themed clothing, jewellery and self-adornments The day begins with special prayers for the integrity, solidarity, and development of Pakistan in mosques and religious places across the country. Citizens attending independence day parades and other events are usually dressed in Pakistan's official colours, green and white Many people meet their friends and relatives, dine over Pakistani food, and visit recreational spots to mark the holiday. Public functions including elaborate firework shows, street parades, seminars, televised transmissions, music and poetry contests children's shows and art exhibitions are a common part of the celebrations. Along with flag hoisting, the national anthem is sung at various government places, schools, residences, and monuments on the day, and patriotic slogans such as Pakistan Zindabad









Friday, August 11, 2023

Option value.html

<!DOCTYPE html>
<html>
    <head>
       
        <body>
            <p>
                choose a car
                <select name="" id="">
                    <option value="">honda</option>
                   <option value="">audi</option>
                    <option value="">mehran</option>
                   <option value="">BMW</option>
                </select>
            </p>
        </body>
    </head>
</html>

Legend tag and radio attribute

Document
Contact Us
Male

Female

Other

Legend tag and radio attribute

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <fieldset>
      <legend>Contact Us</legend>
          <form action="thnks.html">
     
              <input type="radio" name="A" id="">Male <br><br>
              <input type="radio" name="A" id="">Female <br><br>
              <input type="radio" name="A" id="">Other<br><br>
           
             

            </form>
  </fieldset>


</body>
</html>Legend tag And
Document
JOB FOAM
Name:

Gender: Male Female Others

Age:

Qualification:

City:

Religion:

CNIC

CNIC issue date:

Contact No:

Email

Instagram/Facebook:

Making Foam In HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <fieldset style="background-color: blue;">
    <center>JOB FOAM </center>
   <form action="">
     Name: <input type="text"><br><br>
    Gender:
  <input type="radio" name="A"> Male
    <input type="radio" name="A">Female
    <input type="radio" name="A">Others <br><br>
    Age: <input type="text"> <br><br>
    Qualification: <input type="file"> <br><br>
    City: <input type="text"> <br><br>
    Religion: <input type="text"> <br><br>

    CNIC <input type="text"> <br><br>
    CNIC issue date: <input type="date"> <br><br>
    Contact No: <input type="text"> <br><br>
  Email <input type="email"> <br><br>
  Instagram/Facebook: <input type="password"><br><br>




 </fieldset>



   </form>
</body>
</html>

Friday, August 4, 2023

How we make Mark Sheet

Document

GROUP PRE-ENGENERING
Registration No. 143090014
Certificate No. 291237

M.SHAHEER UL HASSIAN S/D of MUHAMMAD HANIF of (institution) Faiza College Munir Road,Lahore.(Ex Student)___________
______________________________________has secured the marks against each subject in the Higher Secondary School Certificate (HSSC) Examination held in the month(s) of NOV/DEC
Marks od identification:_________________________________

Totall
Subject(s) Subj.Max Marks
Marks Obtaned
Pass/Fail Remarks
HSSC-1
HSSC-2
P.i & P.ii Totall
Th. Pr. Th. Pr. Totall
1 English Compulsary
200
065 065 047 047
112
Pass
2 Urdu Compulsary
200
058 058 54 54
122
Pass
3 Islamic Education
050
030 030
030
Pass
4 Pakistan Studies
050
028 020 038
Pass
5 Mathamatics
200
045 045 077 077
123
Pass
6 Physic
200
028 015 045 028 015 043
88
Pass
7 Chemistry
200
020 011 031 036 010 046
77
Pass













Totall Marks Obtained 578/1100 (Five Hundred Seventy Eight Out Of Eleven Hundred)
The candidate has Cleared the Compartment and placed in grade C _________________________________________________________________________________
He/She has pased the examination with Multiple Attempts

Making (HSSC) Result Sheet In HTML

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{border: 2px solid black;}
        table{border-collapse: collapse;}

    </style>
</head>
<body>
    <p>
        <b>GROUP</b>
        <u>PRE-ENGENERING</u><br>
            <b>Registration No.</b>
            <u>143090014</u><br>
            <b>Certificate No.</b>   <u>291237</u>   <img src="mark sheet.jpg" width="100" length="100""alt=""align="right"><br><br>
<u><b>M.SHAHEER UL HASSIAN</b></u>          S/D of <u><b>MUHAMMAD HANIF</b></u>
of (institution) <u>Faiza College Munir Road,Lahore.(Ex Student)</u>___________ <br>
______________________________________has secured the marks against each subject in the Higher Secondary School Certificate (HSSC) Examination held in the month(s) of <u>NOV/DEC</u> <br>
Marks od identification:_________________________________
<table>
    <tr>
        <td rowspan="3"></td>
        <td rowspan="3"> <b>Subject(s)</b></td>
        <td rowspan="3"> <b>Subj.Max Marks</b></td>
        <td colspan="7"> <b> <center>Marks Obtaned</center></b></td>
     
        <td rowspan="3"> <b>Pass/Fail</b></td>
        <td rowspan="3">Remarks</td>
    </tr>
    <tr>
        <td colspan="3"> <center><b> HSSC-1</b></center></td>
        <td colspan="3"> <center> <b>HSSC-2</b></center></td>
        <td rowspan="2"> <b> P.i & P.ii Totall</b></td>
    </tr>
    <tr>
        <td> <b>Th.</b></td>
        <td> <b>Pr.</b></td
        <td> <b>Totall</b></td>
        <td> <b>Th.</b></td>
        <td> <b>Pr.</b></td>
        <td> <b>Totall</b></td>
       
    </tr>
    <tr>
        <td>1</td>
        <td>English Compulsary</td>
        <td> <center>200</center></td>
        <td>065</td>
        <td></td>
        <td>065</td>
        <td>047</td>
        <td></td>
<td>047</td>
        <td> <center>112</center></td>
        <td> <center>Pass</center></td>
        <td></td>  
    </tr>
    <tr>
        <td>2</td>
        <td>Urdu Compulsary</td>
        <td> <center>200</center></td>
        <td>058</td>
        <td></td>
        <td>058</td>
        <td>54</td>
        <td></td>
        <td>54</td>
        <td> <center>122</center></td>
        <td> <center>Pass</center></td>
        <td></td>

    </tr>
    <tr>

        <td>3</td>
        <td>Islamic Education</td>
        <td> <center>050</center></td>
        <td>030</td>
        <td></td>
        <td>030</td>
        <td></td>
        <td></td>
        <td></td>
        <td> <center>030</center></td>
        <td> <center>Pass</center></td>
        <td></td>
    </tr>
    <tr>
<td>4</td>
<td>Pakistan Studies</td>
<td> <center>050</center></td>
<td></td>
<td></td>
<td></td>
<td>028</td>
<td></td>
<td>020</td>
<td>038</td>
<td> <center>Pass</center></td>
<td></td>
    </tr>
    <tr>
        <td>5</td>
        <td>Mathamatics</td>
        <td> <center>200</center></td>
        <td>045</td>
        <td></td>
        <td>045</td>
        <td>077</td>
        <td></td>
        <td>077</td>
        <td> <center>123</center></td>
        <td> <center>Pass</center></td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>Physic</td>
        <td><center>200</center></td>
        <td>028</td>
        <td>015</td>
        <td>045</td>
        <td>028</td>
        <td>015</td>
        <td>043</td>
        <td><center>88</center></td>
        <td><center>Pass</center></td>
        <td></td>
    </tr>
    <tr>
        <td>7</td>
        <td>Chemistry</td>
        <td><center>200</center></td>
        <td>020</td>
        <td>011</td>
        <td>031</td>
        <td>036</td>
        <td>010</td>
        <td>046</td>
        <td><center>77</center></td>

        <td><center>Pass</center></td>
        <td></td>

    </tr>
    <tr>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
        <td><br></td>
    </tr>
</table>
<br>
Totall Marks Obtained <u> <b>578/1100 (Five Hundred Seventy Eight Out Of Eleven Hundred)</b></u><br>
 <u>The candidate has Cleared the Compartment and placed in grade C </u>_________________________________________________________________________________ <br>
He/She has pased the examination with Multiple Attempts
    </p>
   
</body>
</html>

Digital Clock using html , java , CSS

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...