Google Ad

Advanced Web Desgining Practial Question and Answer


(Q1)

Write a program using html with following CSS specification-

 

  1. The background colour of the company name should be in green.
  2. The text colour of the company name should be red.
  3. The heading should be large –with font ''comic sans ms''
  4. The description of the company should be displayed in blue color in a paragraph.
Answer:-

Note: In this question, They had not mentioned that which css use. Like internal css, inline css or external css. So here we can use any of them. Then inline css is most easy type of css. Here we will create this program using Inline CSS.

Program :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1 style="font-family: comic sans ms;">This is large Heading with font "comic sans ms"</h1>
    <p style="background-color: green; color: red">Company Name : XYZ Corporate Comoany</p>
    <p style="color: blue "    >Description : Write any description you want here</p>
</body>
</html>

Output:

 

outpu1

(Q2)

Write Html5 code with CSS as follows-

 

  1. To create form to accept name,age, email address, from the user.
  2. Create a submit button to send the data.
  3. The heading of the form should have a background colour and a different font style.
Answer:-

Program :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<h1 style="background-color: red; font-family: cursive;">Form Heading</h1>
<form>
    name : <input type="text" name="name"><br><br>
    email : <input type="text" name="email"><br><br>
    Age   :
    <input type="radio" name="male" value="m">Male
    <input type="radio" name="female" value="f">Female<br><br>
    <input type="submit" name="submit" value="submit">
    
</form>
</body>
</html>

 

outpu2

(Q3)

Write Html5 code with CSS as follows-

  1. Create ordered list with names of tourist Cities
  2. Create  unordered  list  with tourist places of those cities
  3. Divide   the   list    into   two sections  left  and  right by using CSS.
Answer:-

Program

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /* Pen-specific styles */
* {
  box-sizing: border-box;
}


/* Pattern styles */
div {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 1rem;
}

.left-half {
  background: #ff9e2c;
}

.right-half {
  background: #b6701e;
}
</style>

</head>
<body>

<div class="left-half">
<p>tourist Cities</p>
<ol>
<li>Mumbai</li>
<li>Delhi</li>
<li>Gujrat</li>
<li>Punjab</li>
</ol>
</div>

<div class="right-half">
<p>tourist Cities</p>
<ol>
<li>Mumbai</li>
<li>Delhi</li>
<li>Gujrat</li>
<li>Punjab</li>
</ol>

</div>

</body>
</html>

 

outpu3

(Q4)

What are the uses of <P>, <B>, <br> and <mark> tags?

Answer:-

(1) <P> Tag : 

Meaning :  The <p> tag defines a paragraph. It is a block-level element and always starts on a new line. The <p> tag comes in pairs which is opening and closing tag.

Syntax    :  <p>...... content (Elements).......</p>

Example : 

 <!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

<p>This is a paragraph</p>

</body>

</html>

 

(2) <B> Tag : 

Meaning :  The <b> tag specifies bold text without any extra importance.

Syntax    :  <b>...... content (Elements).......</b>

Example : 

 <!DOCTYPE html>
<html>
<body>

<h1>The b element</h1>

<p>This is normal text - <b>and this is bold text</b>.</p>

</body>
</html>

 

(3) <B> Tag : 

Meaning :  <br> tag is used to break line. The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag.

Syntax    :  <br>  (Only have opening tag)

Example : 

 <!DOCTYPE html>
<html>
<body>

<h1>The br element</h1>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

</body>
</html>

 

(4) <Mark> Tag : 

Meaning :  The <mark> tag defines marked text. <mark> tag is used to highlight the specific word or sentence.

Syntax    :  <mark>...... content (Elements).......</mark>

Example : 

<!DOCTYPE html>
<html>
<body>

<h1>The mark element</h1>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

(Q5)

Create  a  website  using   HTML  and  CSS  code  to  design  webpages  as follows -

The  first  webpage  will  accept  the  name  of  the  traveller,  date  of  travel  , telephone number . It also has submit button as an image .

The second webpage has information about the name of transporter, time , seat no and destination displayed one below the other in the form of unordered list as

Name of transporter – Air Asia Time - 09:30 am

Seat no – B39 Destination - Delhi

Both pages should be interlinked.  Create external stylesheet  with relevant tags.

Answer:-

Program :

Below is code for firstpage.html Page

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <h1> Traveller </h1>

<form>
    First Name <input type="text" name="name"><br><br>
    Date of Travel <input type="date" name="date"><br><br>
    Telephone Number <input type="tel" name="phone"  required><br><br>
    <a href="secondpage.html"><img src="submit.png" style="height: 42px;"></a>

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

 

Below is code for  secondpage.html 

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <h1>Congratulations, Please check below details.</h1>

    <p>Name of transporter - Air Asia</p>
    <p>Seat no - B39</p>
    <p>Destination - Delhi</p>

<a href="firstwebpage.html">Back to Form</a>

</body>
</html>

 

Output

First Page

 

Second Page

(Q6)

SOP 1 : Creation of website using HTML5  (Practical SOP 1)

Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for 2 separate pages having different file names such as first page as Index. html and second page as page2.html. Use any theme such as college profile  or  company  profile  etc.  Every  page  must  contain  proper  Meta information and design web page as follows-

  1. The index page must contain a heading which is highest among other text on pages and must be at centre of the page. There must be a paragraph which introduces general information about the theme chosen must have at least 3 physical style tags and one image with alternate text. This page must be connected to other two pages with proper navigational links.
  2. The 2nd page must contain the feedback or enrolment form related with theme chosen with features of HTML5. The form must contain text element and email address of the company or person. Include the submit button.

    Creation of website using HTML5

    Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for 2 separate pages having different file names such as first page as Index. html and second page as page2.html. Use any theme such as college profile  or  company  profile  etc.  Every  page  must  contain  proper  Meta information and design web page as follows-

  3. The index page must contain a heading which is highest among other text on pages and must be at centre of the page. There must be a paragraph which introduces general information about the theme chosen must have at least 3 physical style tags and one image with alternate text. This page must be connected to other two pages with proper navigational links.
  4. The 2nd page must contain the feedback or enrolment form related with theme chosen with features of HTML5. The form must contain text element and email address of the company or person. Include the submit button.
Answer:-

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>College Profile</title>
</head>
<body>

    <center><h1>Welcome to the Thakur College (Your College Name)</h1></center>
    <b>General Information : </b>
    <p>Thakur Junior College was established in 1992, by the founding members, with the notion of providing an avenue of learning within easy reach to the growing young population of Kandivali and its vicinity. It was a natural augmentation by the Thakur Educational Trust, for the S.S.C. Pass-out students of the various schools as well as Thakur Vidya Mandir. Thakur College had a humble beginning with only 57 students in FYJC first batch of Commerce stream. Its success led to the commencement of the Junior Science stream and the Degree College in 1997 followed by the Post Graduate section in 2002.</p>

    <b>The management is committed to continually improve the service quality through</b><br>

<big>Training and retraining of educationists to enhance the competencies</big><br>
<i>Improvement in learning resources such as laboratories, library etc</i><br>
<u>Adopting</u><br>

<h2>To give us feedback, Fill up the form.</h2>
<a href="page2.html">Link is here</a>

</body>
</html>

 

 

page2.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<h1>Feedback Form</h1>
<form>
    Full Name<input type="text" name="name"><br><br>
    Mobile Number<input type="text" name="mobile"><br><br>
    Your Email<input type="email" name="email"><br><br>
    Gender:
    Male   <input type="radio" name="male">
    Female<input type="radio" name="female">
<br><br>
    <input type="Submit" name="Submit">
</form>

</body>
</html>

 

Output

(Q7)

SOP 2 :   Create a webpage using  HTML and CSS code to design a web page as the layout displayed below.

The top section will display the heading , ‘Tourist places’   in header. The section on the left has list of cities. The right hand side displays tourist places of any one of the city .

Use Inline style sheet in the top section to display background color for the text ‘Tourist places’. Use internal stylesheet for the left and right section with background color and font styles.

Answer:-

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Tourist PLACES</title>
</head>
<body>

<center>
<table border="1px">
    
    <tr style="background-color: aliceblue">
        <th colspan ="2"><h1>Tourist PLACES</h1></th>
    </tr>
    <tr >
        <td style="background-color: khaki">
            <p><h3>City</h3></p>
<ol>
    <li>Pune</li>
    <li>BANGLORE</li>
    <li>HYDERABAD</li>
    <li>Delhi</li>
</ol>
    </td>


        <td style="background-color: pink">
    <p><h3>Tourist PLACES in Pune</h3></p>
<ul>
    <li>SHANIVARWADA</li>
    <li>KELKAR </li>
    <li>KELKAR </li>
</ul>
</td>
    </tr>

</table>
</center>
</body>
</html>

 

Output

 

(Q8)

SOP 4 :  Creation of website using HTML5 and CSS.

Create a webpage as given layout use <nav>,<header>,<footer>,<aside>,

<article> with CSS.

Answer:-

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Title</title>

        <style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  background-color: lightgray;
      margin-top: -475px;
}
</style>


    </head>
    <body style="background: lightgrey;">
        <h1>News</h1>

        <header>
            
            <nav style="background: darkblue;color: white !important;">
                <a href="#" style="color: white">HOME</a>&nbsp;&nbsp;&nbsp;
                <a href="#" style="color: white">ARCHIEVES</a>&nbsp;&nbsp;&nbsp;
                <a href="#" style="color: white">ABOUT</a>&nbsp;&nbsp;&nbsp;
            </nav>
        </header>
        <article>
           
            <section style="background: darkgrey; width: 900px;">
                 <h2 style="">Local News</h2>
                <p style="background: white;     padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>

            </section>
            <section style="background: white; width: 900px;">
                <p style="    padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>
                </section>

                  <section style="background: darkgrey; width: 900px;">
                 <h2 style="">National News</h2>
                <p style="background: white;     padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>

            </section>
            <section style="background: white; width: 900px;">
                <p style="    padding: 13px;">Fire ighter rescue man from building this is local news1<br>
                    (reporter name, date)<br>
                    This is fighter detail text, this is the storyof fighter,

                    </p>
                </section>

            

    
        <aside style="    background: darkgray;"> <b style="font-size: 30px">Be a news Reporter</b><br>
        if you see news happening, Send us a text</aside>

        <footer style="background: darkblue;color: white !important;">Footer Information</footer>

    </body>
</html>

 

Output

 

(Q9)

SOP 5 :   Use of Audio on web pages using HTML5.

Create a webpage named audio.html to set an audio file in web page with controls such that it uses HTML5 elements. The audio file must play as soon as  the  webpage  loads  in  browser  and  it  will  start  over  again,  every  time when it is completed.

Create another webpage named audio1.html which provides multiple source file formats for the same audio file that plays a sound automatically with controls. The browser should display the message with appropriate attribute, when audio file is not supported by browser. The code must incorporate the list of sound files formats (like wav, MP3 or ogg etc).

Answer:-

audio.html  (With infinite loop ie. autoplay)

<!DOCTYPE html>
<html>
<body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

 

audio1.html  (With control)

<!DOCTYPE html>
<html>
<body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

 

 

(Q10)

SOP 6 :   Use of video on web pages using html5.

Create a webpage named video.HTML to display a video file on web page and plays automatically with controls. The dimension of video area should be 150 * 150 pixels.

Create another webpage which provide multiple source file formats for the same audio file that plays a sound automatically with controls. The dimension of  video  area  should  be  100*100  pixels.  The  browser  should  display  the message  with  appropriate  attribute  when  audio  file  is  not  supported  by browser.  The  code  must  incorporate  the  list  of  video  files  formats  (like webM, MP4 or ogg etc).

 

Answer:-

video.html  (With infinite loop ie. autoplay)

<!DOCTYPE html>
<html>
<body>

<h1>The video element</h1>

<video width="320" height="240" controls autoplay loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

 

video.html  (With control)

<!DOCTYPE html>
<html>
<body>

<h1>The video element</h1>

<video width="320" height="240" controls >
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

 

 

(Q11)

SOP 7 :   Navigation on an image using Client side image Mapping in web page using html 5.

  • Create a webpage named imagemap. html with an inserted image having jpeg, png or gif extension. Create 3 different shapes (like rectangle, circle and polygon) which do not overlap. Note the co-ordinates making use of Ms-Paint/GIMP/IrfanView/Pinta. Each shape should be mapped or navigate with  a  different  URL  that  should navigate to a local webpage.

 

Answer:-

index.html

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

 

 

(Q12)

Write html code to display tet XII Online Exams having font-size 26px, text color red and underline text effect using CSS

Answer:-

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<p style="font-size: 26px; color: red; text-decoration: underline;">XII Online Exams</p>

</body>
</html>

(Q13)

Write html code to display text world is beautiful having font-size 35px; LETTER-SPACING: 10PX;, specing between letters using CSS

Answer:-

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<p style="font-size: 35PX; LETTER-SPACING: 10PX;">world is beautifu</p>

</body>
</html>