Commit cc5e33c9 authored by ASHISH CHANDRA's avatar ASHISH CHANDRA

ASHISH CHANDRA - MODIFICATION

parent 7c5ee2fa
ashishchandra
CS 251 Lab
===========================================================================================
In-Lab Assignment
Submitted by : Ashish Chandra
Roll No : 05D05016
Date : 20 July 2017
Email : ashishchandra@cse.iitb.ac.in
Mob : +91 9155743478
Declaration :
I have not given or received any unauthorized assistance while doing this assignment.
===========================================================================================
Open index.html file with any browser.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
\ No newline at end of file
/* Master Stylesheet for the Website */
.header {
background-color: springgreen;
color: navy;
}
.asshead {
background-color: tan;
}
.asssubhead {
background-color: tan;
}
.italic {
font-style: italic;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}
table, tr, td, th {
border: 5px solid gray;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
hr {
color: teal;
height: 3px;
border: 3px;
}
<html>
<head>
<title>Inlab Assignment 1 - CS 251 | Ashish Chandra</title>
<link rel="shortcut icon" href="icons/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body bgcolor="pink">
<div class="container">
<h1 class="header">Ashish Chandra</h1>
<h2 class="asshead">CS 251 Lab - Inlab Assignment 1</h2>
<h3 class="asssubhead">July 20, 2017</h3>
<hr /><hr />
<h4 class="asssubhead">Question 0</h4>
<div>This is a normal text.</div></br></br>
<div><i>This is an italic text made with &lt;i&gt; tag.</i></div>
<div class="italic">This is an italic text styled with css class named italic.</div></br></br>
<div><b>This is a bold text made with &lt;b&gt; tag.</b></div>
<div class="bold">This is a bold text styled with css class named bold.</div></br></br>
<div><u>This is an underlined text styled with &lt;u&gt; tag.</u></div>
<div class="underline">This is an underlined text styled with css class named underline.</div></br></br>
<div>This is a normal sized text.</div>
<div style="font-size:10px;">This is a small text with font-size 10px.</div>
<div style="font-size:30px;">This is a large text with font-size 30px.</div>
<div style="font-size:50px;">This is a giant-sized text with font-size 50px.</div>
<div style="font-size:60%;">This is a small text with font-size 60%.</div>
<div style="font-size:200%;">This is a large text with font-size 200%.</div></br></br>
<div style="color:red;">This is a red text.</div>
<div class="bold" style="color:green;">This is a green and bold text.</div></br></br>
<hr />
<h4 class="asssubhead" id="quest1">Question 1</h4>
<div><img src="images/prof-kavi.jpg" alt="Professor Kavi Arya" /><br />
Here is Prof. Kavi Arya who teaches SYSTEM SOFTWARE LAB at IIT Bombay.</div></br></br>
<div><img src="images/prof-uday.jpg" alt="Professor Uday Khedker" /><br />
This is Prof. Uday Khedker, the Head of Department of CSE, IIT Bombay.</div></br></br>
<hr />
<h4 class="asssubhead">Question 2</h4>
<div>This is a table containing 5 rows and 3 columns</div>
<div>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Currency</th>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
<td>Rupee</td>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>United States Dollar</td>
</tr>
<tr>
<td>Japan</td>
<td>Tokyo</td>
<td>Yen</td>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Russian Ruble</td>
</tr>
</table>
</div></br></br>
<hr />
<h4 class="asssubhead">Question 3</h4>
<div>
<a href="http://www.cse.iitb.ac.in/" title="CSE, IIT Bombay">CSE Department, IIT Bombay</a> - This link opens in same tab.<br>
<a href="#quest1" title="Go to Question 1">Jump to Question 1</a><br>
<a href="http://www.dictionary.com/" title="Dictionary" target="_blank">Dictionary.com</a> - This link opens in another tab.<br>
</div></br></br>
<hr />
<h4 class="asssubhead">Question 4</h4>
<div>
<span class="bold">Ordered List : Fruits to be purchased</span><br />
<ol>
<li>Banana</li>
<li>Papaya</li>
<li>Mango</li>
<li>Orange</li>
<li>Guava</li>
</ol>
</br></br>
<span class="bold">Unordered List : Domestic Animals</span><br />
<ul>
<li>Dog</li>
<li>Cow</li>
<li>Buffalo</li>
<li>Goat</li>
<li>Cat</li>
</ul>
</div></br></br>
<hr />
<h4 class="asssubhead">Question 5</h4>
<span class="bold">The table of Question 2 is now aligned here at the center.</span><br />
<div class="center">
<table class="center">
<tr>
<th>Country</th>
<th>Capital</th>
<th>Currency</th>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
<td>Rupee</td>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>United States Dollar</td>
</tr>
<tr>
<td>Japan</td>
<td>Tokyo</td>
<td>Yen</td>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Russian Ruble</td>
</tr>
</table>
</div></br></br>
<hr />
<h4 class="asssubhead">Question 6</h4>
<div style="color:yellow; background-color:red;">
This page is made pink by using the attribute bgcolor in the body tag.</br>
The attribute bgcolor is no more supported in HTML5.</br>
This &lt;div&gt; is made red using css.</div>
<p style="color:blue; background-color:lightgreen; padding:50px;">This is a paragraph. It has background lightgreen. The color of the text of this paragraph is blue. This paragraph has a padding of 50px on all four sides. Paragraph is a block element in HTML. This means there is default line-break before and after a paragraph.</p>
<div style="color:navy; background-color:papayawhip;">There are five line-breaks between this line</br></br></br></br></br>and this line.</div>
<hr />
<h4 class="asssubhead">Using CSS</h4>
<div style="color:indigo; background-color:aqua;">The background of this &lt;div&gt; is made aqua colored using CSS. The text color is made indigo also using CSS. CSS is a language which is used to add style to a webpage. Without CSS webpages will look very boaring.</div></br></br>
<div style="background-color:coral;">
<span style="font-family:'Times New Roman', Times, serif;">This is the Times New Roman font.</span></br>
<span style="font-family:Arial, Helvetica, sans-serif;">This is the Arial font.</span></br>
<span style="font-family:Courier New; font-size:100px;">This is the Courier New font with font-size 100px.</span></br>
<span style="font-family:Lucida Console; font-size:50px;">This is the Lucida Console font with font-size 50px.</span></br>
</div>
<hr />
<h4 class="asssubhead">Using Bootstrap</h4>
<span>This is a simple button on clicking which you jump to question 1.</span></br>
<div style="color:indigo; background-color:aqua; padding:20px;">
<a href="#quest1" title="Jump to Question 1"><button type="button" class="btn btn-success">Question 1 Jump</button></a>
</div></br></br>
<span>This is a group of justified buttons.</span></br>
<div class="btn-group btn-group-justified">
<a href="http://www.iitb.ac.in/" class="btn btn-primary">IIT Bombay</a>
<a href="http://www.iitd.ac.in/" class="btn btn-primary">IIT Delhi</a>
<a href="http://www.iitk.ac.in/" class="btn btn-primary">IIT Kanpur</a>
<a href="http://www.iitm.ac.in/" class="btn btn-primary">IIT Madras</a>
</div>
</br></br>
This is the end of assignment 1 of CS 251 Lab.</br>
Submitted by : Ashish Chandra</br>
Roll No : 05D05016</br>
Date : 20 July 2017</br>
Email : ashishchandra@cse.iitb.ac.in
</br></br></br></br>
</div>
</body>
</html>
ashishchandra
CS 251 Lab
===========================================================================================
Out-Lab Assignment
Submitted by : Ashish Chandra
Roll No : 05D05016
Date : 22 July 2017
Email : ashishchandra@cse.iitb.ac.in
Mob : +91 9155743478
Declaration :
I have not given or received any unauthorized assistance while doing this assignment.
===========================================================================================
Open index.html file with any browser.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
\ No newline at end of file
/* Master Stylesheet for the Website */
.header {
background-color: springgreen;
color: navy;
}
.asshead {
background-color: tan;
}
.asssubhead {
background-color: tan;
}
hr {
color: teal;
height: 3px;
border: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Outlab Assignment 1 - CS 251 | Ashish Chandra</title>
<link rel="shortcut icon" href="icons/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
</html>
<body bgcolor="pink">
<div class="container" id="top">
<h1 class="header">Ashish Chandra</h1>
<h2 class="asshead">CS 251 Lab - Outlab Assignment 1</h2>
<h3 class="asssubhead">July 22, 2017</h3>
<hr /><hr />
<h2>Blockquote</h2>
<p>This assignment attempts a grid-based responsive design.</p>
<blockquote>
<p>This outlab assignment is great to learn bootstrap and to make responsive designs using it. The bootstrap library has several cool responsive classes which are very easy to implement.</p>
<footer>Ashish Chandra</footer>
</blockquote>
<hr /><hr />
<h2>Photo Gallery</h2>
<p>We have used .thumbnail class to display an image gallery.</p>
<p>We have used .caption class to add style around the thumbnail.</p>
<p>Click on the images to enlarge them.</p>
<p>Resize the window to see that as the window shortens the sidewise images shifts below so that you don't have to scroll horizontally.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="images/tree.jpg" target="_blank">
<img src="images/tree.jpg" alt="Tree" style="width:100%">
<div class="caption">
<p>This beautiful tree image is clicked from my Canon IXUS camera.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="images/hut.jpg" target="_blank">
<img src="images/hut.jpg" alt="Hut" style="width:100%">
<div class="caption">
<p>This is a hut on roadside. It looks like a vehicle air pumping garrage.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="images/fields.jpg" target="_blank">
<img src="images/fields.jpg" alt="Fields" style="width:100%">
<div class="caption">
<p>This scene of fields is taken from a hilltop at Deoghar, Jharkhand.</p>
</div>
</a>
</div>
</div>
</div>
<hr /><hr />
<h2>Buttons</h2>
<span>This is a simple button on clicking which you jump to the top of this page.</span></br>
<div style="color:indigo; background-color:aqua; padding:20px;">
<a href="#top" title="Jump to Top"><button type="button" class="btn btn-success">Jump to Top</button></a>
</div></br></br>
<span>This is a group of justified buttons.</span></br>
<div class="btn-group btn-group-justified">
<a href="http://www.iitb.ac.in/" class="btn btn-primary">IIT Bombay</a>
<a href="http://www.iitd.ac.in/" class="btn btn-primary">IIT Delhi</a>
<a href="http://www.iitk.ac.in/" class="btn btn-primary">IIT Kanpur</a>
<a href="http://www.iitm.ac.in/" class="btn btn-primary">IIT Madras</a>
</div>
<hr /><hr />
<h2>Responsive Embed</h2>
<p>This is to embed a responsive video presented by IITB scholar Diptesh Kanojia such that it scales itself properly with aspect ratio 16:9 on devices of different widths.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/DgpdTHlNAyg"></iframe>
</div>
<hr /><hr />
<h2>Responsive Carousel</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/tree.jpg" alt="Tree from Canon IXUS" style="width:100%;">
<div class="carousel-caption">
<h3>Tree</h3>
<p>This tree was clicked from my Canon IXUS.</p>
</div>
</div>
<div class="item">
<img src="images/hut.jpg" alt="Hut along Roadside" style="width:100%;">
<div class="carousel-caption">
<h3>Garrage Hut</h3>
<p>It's a roadside vehicle air pumping point.</p>
</div>
</div>
<div class="item">
<img src="images/fields.jpg" alt="Fields from Hilltop" style="width:100%;">
<div class="carousel-caption">
<h3>Paddy Fields</h3>
<p>This is a view of Paddy Fields from Tapovan Hilltop, Jharkhand.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr /><hr />
</br></br>
This is the end of outlab assignment 1 of CS 251 Lab.</br>
Submitted by : Ashish Chandra</br>
Roll No : 05D05016</br>
Date : 22 July 2017</br>
Email : ashishchandra@cse.iitb.ac.in
</br></br></br></br>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment