College of Staten Island CSC225 Midterm Exam Part 1 Spring 2018 Prof. Hershenson

ID: 3738653 • Letter: C

Question

College of Staten Island CSC225 Midterm Exam Part 1 Spring 2018 Prof. Hershenson HTMLS& CSS3-Midterm Exam Part 1a (7 points) Using notepad++ write html for the following table. Make border-1 table width 75% cell padding 10px. Label and center the table as well as the content within each cell as listed below Heading 1 Heading 2 Heading 3 Column 2 Column Column 3 Column 4 Column 5 Midterm Exam Part 1b (7 points) Using notepads+ write html and ess for the following using div structure: (Place the semantic labels listed below as headings 1 ch15 tagsin each of the divs. Header Content Navigation Sidebar Footer HTML Midterm: Part 1C-(20 points) Create a webpage about your major here at College of Staten Island. Including skills that you have learned, courses you have completed and career goals. Create a web page from scratch using assets you have selected including not less than 3 images of your choice but they should include at least one picture of yourself, one of the CSI logo and 1 other that supports your content. The styles and layout are up to you and should be reflected in your css Your webpage must use the following features of HTMLS and Css3: Some content including what your studying and your career intentions .Using external CSS files Links (both to external websites and to sections of the same page) Images (at least one filtered with a drop shadow features of our own choosing) Table listing the courses you have taken so far and in which semester completed Extra Credit:5 points Design the page using responsive cSS design for: smartphone, tablet and desktop devices displays.

Explanation / Answer

Ans 1 a.

<html>
<head>
<style type="text/css"> //css style for table, th, td

{

border: 1px solid;
border-collapse: collapse;
}
td{ //table data style
text-align: center;
}
</style>

</head>

<body>
<table cellpadding="10">
<tbody>
<tr>
<th>Heading 1</th>

<th>Heading 2</th>

<th>Heading 3</th>
</tr>

<tr>
<td rowspan="3">column 1</td>

<td colspan="2">column 2</td>
</tr>

<tr>
<td>column 3</td>

<td rowspan="2">column 5</td>
</tr>

<tr>
<td>column 4</td>
</tr>
</tbody>
</table>
</body>
</html>

---------------------------As per your output given above :) --------------------------------

Ans 1)b.

<html>
<head>
  <style>
   #header{
    border: 1px solid;
    width:100%;
    height:50px;
    text-align: center;
   }
   #sidebar-left{
    float:left;
    width:15%;
    border: 1px solid;
       text-align: center;

}
   #main{
    float:left;
    width:70%;
    border: 1px solid;
                                text-align: center;
   }
   #sidebar-right{
    float:right;
    width:14.5%;
    border: 1px solid;
                                 text-align: center;
   }
   #footer{
    clear:both;
    height: 50px;
    width: 100%;
    text-align: center;
    border: 1px solid;
   }
   #sidebar-left, #main, #sidebar-right{
    min-height: 600px
   }
  </style>
</head>
<body>
  <div id="header"><h1>Header</h1></div>
  <div id="sidebar-left"><h1>Navigation</h1></div>
  <div id="main"><h1>Content</h1></div>
  <div id="sidebar-right"><h1>Sidebar</h1></div>
  <div id="footer"><h1>Footer</h1></div>
</body>
</html>

-----------------------------------------------------------------------------------------------------------ANs. 3:- To make page responsive you can use <meta> Element in your page/web application

initial-scale=1.0"> //meta element

and set the css style for the device you want to implement

e.g.:-

@media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}