Scribd Logo
Upload

Welcome to Scribd!

  • 17 views

    Institutional Training: Question No. 1

    Uploaded by

    Sorabh Singh
    The document provides instructions for an institutional training assignment on web development. It includes 5 questions asking students to write HTML code to create web pages with different features: 1) Center aligned text in various fonts, 2) Use of HTML tags like paragraphs and headings, 3) An image background with alternate text, 4) An information table with rowspan and colspan, 5) A linked image to another page. For each question, the student provides the code and expected output.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Institutional Training: Question No. 1

    Uploaded by

    Sorabh Singh
    17 views14 pages
    The document provides instructions for an institutional training assignment on web development. It includes 5 questions asking students to write HTML code to create web pages with different features: 1) Center aligned text in various fonts, 2) Use of HTML tags like paragraphs and headings, 3) An image background with alternate text, 4) An information table with rowspan and colspan, 5) A linked image to another page. For each question, the student provides the code and expected output.

    Original Description:

    Original Title

    $orabh_20BCS5514

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides instructions for an institutional training assignment on web development. It includes 5 questions asking students to write HTML code to create web pages with different features: 1) Center aligned text in various fonts, 2) Use of HTML tags like paragraphs and headings, 3) An image background with alternate text, 4) An information table with rowspan and colspan, 5) A linked image to another page. For each question, the student provides the code and expected output.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    17 views14 pages

    Institutional Training: Question No. 1

    Uploaded by

    Sorabh Singh
    The document provides instructions for an institutional training assignment on web development. It includes 5 questions asking students to write HTML code to create web pages with different features: 1) Center aligned text in various fonts, 2) Use of HTML tags like paragraphs and headings, 3) An image background with alternate text, 4) An information table with rowspan and colspan, 5) A linked image to another page. For each question, the student provides the code and expected output.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 14

    INSTITUTIONAL

    TRAINING

    NAME OF STUDENT : Sorabh Singh


    STUDENT UID :20BCS5514
    CLASS AND GROUP : ITB19
    SUBJECT: WEB DEVELOPMENT
    WORKSHEET -01

    Question no. 1

    AIM OF THE EXPERIMENT : Create a web page which should have titled as
    defined by the user. It should display content in bold, italic, underlined and entire
    content should be center aligned. Include the link to www.google.com also.
    CODE:

    <!DOCTYPE html>
    <html>
    <head>
    <title>iBlog</title>
    </head>
    <body bgcolor="#F2EDD7"><center>
    <h1> The font is in bold</h1>

    <p><bold>Lorem, ipsum dolor sit amet consectetur


    adipisicing elit. Doloribus veniam facilis ipsa illo eaque harum
    ipsam minima recusandae, dolore voluptatum.</h1>

    <p><i>Another early blog was Wearable Wireless Webcam,


    an online shared diary of a person's personal life combining
    text, and digital pictures transmitted live from a wearable
    computer and EyeTap device to a web site in 1994.</i></p>

    <h1> The font is in underline</h1>

    <p><u>This practice of semi-automated blogging with live


    video together with text was referred to as sousveillance,
    and such journals were also used as evidence in legal
    matters.</u></p>

    <a href="https://google.com/search?q=Juice+Wrld">For
    more information Click here</a>
    </center>
    </body>
    </html>
    OUTPUT:

    Question no. 2

    AIM OF THE EXPERIMENT: Create a HTML Document in


    such a way that it should include the tags like
    paragraph, h1 to h6 heading,break tag usage.

    CODE:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Question 2</Title>
    </head>
    <body bgcolor="#F2EDD7">
    <p style = "font-family:georgia,garamond,serif;font-
    size:16px;">
    Themes and styles also help keep your document
    coordinated. When
    you click Design and choose a new Theme, the pictures,
    charts, and
    SmartArt graphics change to match your new theme.
    When you apply
    styles, your headings change to match the new
    theme.<br><br>
    Save time in Word with new buttons that show up
    where you need them.
    To change the way a picture fits in your document,
    click it and a button
    for layout options appears next to it. When you work
    on a table, click
    where you want to add a row or a column, and then
    click the plus
    sign.<br><br>
    Reading is easier, too, in the new Reading view. You
    can collapse parts
    of the document and focus on the text you want. If you
    need to stop
    reading before you reach the end, Word remembers
    where you left off -
    even on another device.<br><br>
    WD_20ITB-19
    </p>
    <b>Different Heading Sizes:</b>
    <h1>Heading size 1</h1><br>
    <h2>Heading size 2</h2><br>
    <h3>Heading size 3</h3><br>
    <h4>Heading size 4</h4><br>
    <h5>Heading size 5</h5><br>
    <h6>Heading size 6</h6><br>
    </body>
    </html>

    OUTPUT:

    QUESTION No. 3
    AIM OF THE EXPERIMENT: Create a web page which
    should have an image as background width 400px and
    500px dimensions. If the image could not be loaded, it
    should display an alternate text which should inform
    the user about the same.

    CODE:

    <!DOCTYPE html>
    <html>

    <head>
    <title>Question 3</Title>
    </head>

    <body bgcolor="F2EDD7">
    <center>
    <h2>Welcome to Cartoon World</h2>
    <center><img
    src="https://i.pinimg.com/originals/a0/0a/0e/a0
    0a0ebb23d43309c5add91a8f1fcca3.jpg"
    alt="Cartoon pic" width="400px"
    height="500px">
    <p>The <b> Cartoon World Foundation
    </b>is home to all the original artwork I have
    produced as an artist,
    cartoonist and illustrator over these last
    55 years<br>
    including Kim Casali’s Love is… Roald
    Dahl’s Big Friendly Giant, Friendship is… and
    many more, plus my
    personal collection of classic and vintage
    signed original cartoon art.</p>
    </center>

    </body>

    </html>

    OUTPUT:

    Case-1:- when the image loaded successfully.


    Case-2:- when the image is not able to load may be
    due to network issue.

    QUESTION NO. 4

    AIM OF THE EXPERIMENT: Create a web page


    using HTML Table Tag in such a way it should
    display First name, last name, age, multiple
    telephone numbers of the user. The table caption
    of the table should be User Information which
    should be displayed at the Top of the table. Try
    using rowspan and colspan feature of table.

    CODE:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Question 4</title>
    </head>

    <body bgcolor="F2EDD7">
    <table border="12" cellspacing="5"
    align="center" cellpadding="8">
    <center>
    <h3><b>User Information</b></h3>
    </center>

    <tr>
    <th>SrNo</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Contact Details</th>
    </tr>
    <tr>
    <td>1.</td>
    <td>Mansi</td>
    <td>Singh</td>
    <td>50</td>
    <td>9872345222</td>
    </tr>
    <tr>
    <td>2.</td>
    <td>Saurabh</td>
    <td>Singh</td>
    <td>19</td>
    <td>8299711882</td>
    </tr>
    <tr>
    <td>3.</td>
    <td>Shirley</td>
    <td>Setia</td>
    <td>20</td>
    <td>9876543372</td>
    </tr>
    <tr>
    <td>4,</td>
    <td>Katherine</td>
    <td>Langford</td>
    <td>21</td>
    <td>9876543231</td>
    </tr>
    <tr>
    <td>5.</td>
    <td>Tom</td>
    <td>Cruise</td>
    <td>27</td>
    <td>9876544125</td>
    </tr>
    </table>
    </body>
    </html>

    OUTPUT:

    QUESTION NO. 5

    AIM OF THE EXPERIMENT: Insert an image and


    create a link such that clicking on image takes user to
    the other page.
    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>New world</title>
    </head>
    <body bgcolor="F2EDD7"> <center>
    <header><b>Lets Move to Another world of this
    Era</b></header> <br>

    <main>
    <a href="https://dribbble.com/tags/ghost_ui"
    target="_blank"><img src="https://encrypted-
    tbn0.gstatic.com/images?q=tbn:ANd9GcRH6CXOAx-
    IgjbumslCOgbsILh-hzBBMfWMQw&usqp=CAU"
    alt="HorrorWorld"></a>
    </main>

    <footer>
    <p>Click on the above pic to accept the challenge!
    </p>
    </footer>
    </center>
    </body>
    </html>
    OUTPUT:

    Before clicking on the image:-

    After clicking on the image:-

    You might also like