CS511 ASSIGNMENT NO. 1 SPRING 2023 || 100% RIGHT SOLUTION || WEB ENGINEERING || BY VuTech
Visit Website For More Solutions
www.vutechofficial.blogspot.com
KINDLY, DON’T COPY PASTE
SUBSCRIBE, SHARE, LIKE AND COMMENTS FOR MORE UPDATES
QUESTION-1
Consider the html file named “Page.html” (attached in assignment folder) and perform the following tasks using CSS Attribute Selectors:
• Text color of all the controls in which the value of the attribute “id” is “Mainheading”, should be turned to red
• Text color of all the controls in which the value of the attribute “id” starts with “Sub”, should be turned to green
• Text color of all the controls in which the value of the attribute “id” ends with “paragraph”, should be turned to blue
• Text color of all the controls in which the value of the attribute “title” is “description”, should be turned to red
• Text color of all the controls in which the value of the attribute “href” contains the substring “vu”, should be turned to green
SOLUTION:
<html>
<head>
<title>
MC1234567
</title>
<style>
[id="Mainheading"] {
color: red;
}
[id^="Sub"] {
color: green;
}
[id$="paragraph"] {
color: blue;
}
[title="description"] {
color: red;
}
[href*="vu"] {
color: green;
}
</style>
</head>
<body>
<h1 id="Mainheading">This is main heading</h1>
<h2 id="Subheading1">This is first sub heading</h2>
<h2 id="Subheading2">This is second sub heading</h2>
<span title="description">This is first descirption</span>
<p id="Firstparagraph">This is first paragraph</p>
<p id="Secondparagraph">This is second paragraph</p>
<a href="https://www.vu.edu.pk"> Virtual University of Pakistan</a>
<br />
<a href="https://www.youtube.com/VirtualUniveristyChannel"> Virtual University Channel</a>
<br />
<br />
</body>
</html>
QUESTION-2
Create an HTML page named “Table.html”. The page should contain the following table:
|
Student ID |
Student Name |
Student Marks |
|
01 |
Ali |
50 |
|
02 |
Waseem |
40 |
|
03 |
Khadim |
70 |
|
04 |
Asghar |
60 |
Note:
1) You will submit HTML script files containing the required HTML scripts2) For CSS attribute selectors (in question no. 1), you can write the attribute selectors using embedded styling. This means that the CSS styles will be written in the same page (i.e. Page.html file)
3) The following HTML files will be submitted in zip folder as part of the solution
a. Page.html: This file will contain the code snippet of question no. 1
b. Table.html: This file will contain the code snippet of question no. 2
SOLUTION:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Student Marks</th>
</tr>
<tr>
<td>01</td>
<td>Ali</td>
<td>50</td>
</tr>
<tr>
<td>02</td>
<td>Waseem</td>
<td>40</td>
</tr>
<tr>
<td>03</td>
<td>Khadim</td>
<td>70</td>
</tr>
<tr>
<td>04</td>
<td>Asghar</td>
<td>60</td>
</tr>
</table>
</body>
</html>