Skip to content
Snippets Groups Projects
Commit 4e364242 authored by Andrej Rasevic's avatar Andrej Rasevic
Browse files

adding week1 lecture code examples

parent cee515fe
No related branches found
No related tags found
No related merge requests found
Showing
with 701 additions and 0 deletions
article {
color: orchid;
/* inherited */
border: medium solid;
/* not inherited */
}
h2 {
color: forestgreen;
}
article h2 {
color: inherit;
/* h2 inside article will be orchid color (not forestgreen)*/
}
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Inline Style</title>
<link rel="stylesheet" href="propinheritance.css">
</head>
<body>
<h1>Introduction to CS</h1>
<h2>CSS property inheritance</h2>
<article>
<h2>H2 with enforced inheritance</h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<p>
Corrupti sit dolores maxime <span>recusandae</span> fugit alias aliquam
error inventore! Consequuntur incidunt mollitia, nulla blanditiis
nesciunt atque a commodi ipsam totam voluptatem.
</p>
</article>
</body>
</html>
\ No newline at end of file
body {
font-family: sans-serif;
/* notice, using serif */
}
* {
color: teal;
}
div.xxx.yyy {
color: blue;
font-size: 20px;
}
p * {
/* note that only descendants (not p itself) are affected by this style */
color: peachpuff;
}
/* Try first-line as well */
p:first-letter {
font-weight: bold;
font-size: 4rem;
/* try with em */
}
p:first-line {
font-weight: 400;
font-size: 2em;
}
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pseudoelements</title>
<link rel="stylesheet" href="pseudoElements, universal.css" type="text/css" />
<!-- If you omit the type attribute, the browser will make an educated
guess at the content type by looking at the rel attribute instead. So
it will assume the type is text/css where the rel attribute is
stylesheet, for example.
Read more: https://html.com/attributes/link-type/#ixzz5yTAj77mD -->
</head>
<body>
<h1>Partnerships</h1>
<p>
The future of <strong> public higher education in America</strong>
depends on forming effective partnerships with government,
industry, business, faculty and students to carry on the discovery
and creation of knowledge that underlies the continuing improvement
of our social, civic, economic and cultural lives.
</p>
<p>
The President has facilitated the establishment and enhancement of many
partnerships that
will benefit both the university and the larger society.
</p>
<div class="xxx yyy">Hello World</div>
</body>
</html>
\ No newline at end of file
/* This is a comment in CSS */
/* The next line tell us the font to look for. The last line is a generic
/* font family (serif, sans-serif, monospace)*/
body {
font-family: arial, Helvetica, "Times New Roman", sans-serif;
/* background: #F5F5DC; */
background: rgba(125, 125, 125, 0.5);
color: teal;
font-size: 90%; /* try different percentages */
}
a:link {
color: blue;
}
a:visited {
color:purple;
}
a:hover {
color: red;
}
a:active {
color: gray;
}
h1 {
color: gray;
}
pre {
color: gray;
font-style: italic;
text-align: center;
}
pre:hover {
font-size: 2em;
}
strong {
color: red;
}
ol {
list-style-type: lower-latin; /* try lower-roman, upper-roman, upper-latin */
}
ul {
color: maroon;
list-style-image: url(bus.gif);
/* list-style-type: circle; /* try disc, square, none */
}
table {
background-color: black; /* try commenting this out */
border-collapse: separate; /* try collapse */
border-style: double; /* try solid, dashed, groove, ridge, inset, outset */
border-color: red;
border-width: .125em;
text-align: center; /* try left, right */
}
th {
background-color: #F5DEB3;
padding: 8px;
}
td {
background-color: white;
}
/* class selector */
.styleOne {
color: red;
font-style: italic;
text-align: center;
}
/* class selector */
.styleTwo {
color: gray;
font-style: oblique;
text-align: center;
}
.styleThree {
color: blue;
background-color: white;
}
/* id selector */
#additionalInfo {
color: green;
font-weight: bold; /* try normal, bolder, 100, 200, 300, 400 (normal)..., 700 (bold), 900*/
text-align: center;
}
\ No newline at end of file
<!doctype html>
<head>
<meta charset="utf-8" />
<title>Class Id Selectors</title>
<link rel="stylesheet" href="Selectors.css" />
</head>
<body>
<h1>The Road Not Taken</h1>
<p> The following is a famous poem by <em>Robert Frost</em>(1874&ndash;1963).
We will study his work this semester.
</p>
<!-- careful with the identation of pre -->
<pre class="styleOne">
Two roads diverged in a yellow wood
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth
</pre>
<!-- notice the use of multiple class selectors -->
<pre class="styleTwo styleThree">
Then took the other as just as fair
And having perhaps the better claim
Because it was grassy and wanted wear;
Though as for that, the passing there
Had worn them really about the same
</pre>
<pre class="styleOne">
And both that morning equally lay
In leaves no step had trodden black
Oh, I kept the first for another day!
Yet knowing how way leads onto way
I doubted if I should ever come back
</pre>
<pre class="styleTwo">
I shall be telling this with a sigh
Somewhere ages and ages hence
Two roads diverged in a wood
And I took the one less traveled by
And that has made all the difference
</pre>
<h2>Midterm Paper Questions</h2>
<ol>
<li>Which road would you travel(<strong>today</strong>)?</li>
<li>Which road have you been taken?</li>
</ol>
<h3>Final Paper Questions</h3>
<ul>
<li>Compare Robert Frost work with another author discussed in lecture.</li>
<li>What is the major contribution of Robert Frost's work?</li>
</ul>
<h3>Schedule</h3>
<table>
<tr>
<th>Week</th>
<th>Reading</th>
<th>Work</th>
</tr>
<tr>
<td>1 </td>
<td>Poem</td>
<td>Report</td>
</tr>
<tr>
<td>2 </td>
<td>Paper</td>
<td>Quiz</td>
</tr>
</table>
<h3>Additional information</h3>
<p id="additionalInfo">You can find additional information in
<a href="http://en.wikipedia.org/wiki/The_Road_Not_Taken_(poem)">Wikipedia
Reference</a>
</p>
</body>
</html>
\ No newline at end of file
body {
/* note multiple values are given as "fallback"s. */
font-family: arial, Helvetica, sans-serif;
background: #F5F5DC;
font-size: 90%;
}
.noShorthand {
/* Font specification */
font-style: italic;
font-variant: small-caps;
font-weight: normal;
font-size: .80em;
line-height: 1.1em;
font-family: Verdana, Arial, sans-serif;
/* Border specification */
border-width: 2em;
border-style: solid;
border-color: green;
/* Margin specification */
margin-top: 6em;
margin-right: 8em;
margin-bottom: 4em;
margin-left: 2em;
/* Padding specification*/
padding-top: 3em;
padding-right: 4em;
padding-bottom: 2em;
padding-left: 1em;
}
.withShorthand {
/* Font specification */
font: italic small-caps normal .80em/1.1em Verdana, Arial, sans-serif;
/* Border specification */
border: 2em solid green;
/* Margin specification */
margin: 6em 8em 4em 2em;
/* Padding specification*/
padding: 3em 4em 2em 1em;
}
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Shorthand Properties</title>
<link rel="stylesheet" href="ShorthandProperties.css" />
</head>
<body>
<h1>Partnerships</h1>
<p class="noShorthand">
The future of public higher education in America depends on forming
effective partnerships with government, industry, business, faculty
and students to carry on the discovery and creation of knowledge
that underlies the continuing improvement of our social, civic,
economic and cultural lives.
</p>
<p class="withShorthand">
The President has facilitated the establishment and enhancement of
many partnerships that will benefit both the university and the
larger society.
</p>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<!-- For responsive page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Basic HTML5 Document" />
<meta name="keywords" content="HTML5, Responsive, CMSC389N"/>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<title>HTML TEMPLATE</title>
</head>
<body>
<ol type = "I">
<li>Shakira</li>
<li>JLo</li>
</ol>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Character References</title>
</head>
<body>
<table>
<tr> <th>Name</th> <th>Symbol</th> </tr>
<tr> <td>Copyright</td> <td>&copy;</td> </tr>
<tr> <td>Registered Trademark</td> <td>&reg;</td> </tr>
<tr> <td>Ampersand</td> <td>&amp;</td> </tr>
<tr> <td>Less than</td> <td>&lt;</td> </tr>
<tr> <td>Greater than</td> <td>&gt;</td> </tr>
<tr> <td>Right Arrow</td> <td>&rarr;</td> </tr>
<tr> <td>Left Arrow</td> <td>&larr;</td> </tr>
<tr> <td>Non-breaking space</td> <td>&nbsp;</td> </tr>
<tr> <td>Pi</td> <td>&pi;</td> </tr>
<tr> <td>Degree</td> <td>&deg;</td> </tr>
<tr> <td>Acute</td> <td>&acute;</td> </tr>
<tr> <td>Infinity</td> <td>&infin;</td> </tr>
</table>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Common Tags</title>
</head>
<body>
<h1>Introduction(h1)</h1>
<h2>Overview(h2)</h2>
<h3>Conclusion(h3)</h3>
<h4>References(h4)</h4>
<h5>Appendix A(h5)</h5>
<h6>Appendix B(h6)</h6>
<p>
This document presents some frequently used tags for the
development of html files. For example, the text you are currently
reading is enclosed in &lt;p&gt; &lt;/p&gt; tags.
</p>
<p>
This line illustrates that we <b>can bold</b> easily with the
&lt;b&gt; tag.
</p>
<p>
Now we are illustrating how we can create superscripts
(10<sup>th</sup>) or subscript (log<sub> 2 </sub> n)
</p>
<p>
Showing how to generate quotes: <q>To be or not to be</q>
</p>
<p>Java code printed using the pre tags:
</p>
<pre>
/* Java code presented using the <strong>pre tag</strong> */
import javax.swing.*;
public static void main(String[] args) {
System.out.println("Hello World");
}
</pre>
<p><em>Java code printed using p tags:</em>
</p>
<p>
/* Java code presented using the <q>pre tag</q> */
import javax.swing.*;
public static void main(String[] args) {
System.out.println("Hello World");
}
</p>
<p>
<em>This line has been displayed using the &lt;em&gt;
tag</em><br /> <strong>This line has been displayed using the
&lt;strong&gt; tag</strong><br /> <b>This line has been
displayed using the &lt;b&gt; tag</b><br /> <i>This line has
been displayed using the &lt;i&gt; tag</i><br />
</p>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image</title>
</head>
<body>
<p>The School mascot is Testudo.
<img src="testudo.jpg" width="84" height="111" alt="Testudos' image'" />
</p>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Links</title>
<style>
#p1 {
margin-bottom: 70em;
}
</style>
</head>
<body>
<h1>Link Examples</h1>
<p id="p1">
<a href="http://www.jalopnik.com">Jalopnik Web Page</a>
<br /><br />
<a href="http://www.umd.edu"><img src="testudo.jpg" width="84" height="111" alt="Testudos Image" /></a>
<br /><br />
<a href="Image.html">Image Example Page</a>
<!-- bookmarks allow us to jump to specific parts of a page -->
<a href="#courseInfo">Course Info</a>
<!-- if the bookmark is in another page it can be accessed as follows: -->
<a href="BasicHTMLSkeleton.html">Bookmark to BasicHTMLSkeleton</a>
<a href="#">Current Page Link</a>
<!-- Opens page in new window/tab -->
<br /><br />
<a href="Image.html" target="_blank">Image Example Page in New Window/Tab</a>
</p>
<h2 id="courseInfo">Course Info</h2> <!-- id attribute allow us to create bookmark -->
<p>
Blah Blah Blah, final office hours will be posted later on piazza. Exercise 1 will be posted at the end of the week.
</p>
<a href="#">Current Page Link</a>
<ul>
<li><a href="description.pdf">description.pdf</a></li>
<li><a href="description.pdf" download>description.pdf (with download option)</a></li>
</ul>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lists</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Java</li>
<li>PHP</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Java</li>
<li>PHP</li>
</ol>
<h2>Ordered List (Reversed)</h2>
<ol reversed>
<li>Java</li>
<li>PHP</li>
</ol>
<h2>Nested Lists</h2>
<ol>
<li>Old Languages
<ol>
<li>Fortran</li>
<li>C</li>
</ol>
</li>
<li>New Languages
<ul>
<li>JavaScript</li>
<li>C#</li>
</ul>
</li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>cmsc131</dt>
<dd>First Java Course</dd>
<dt>cmsc132</dt>
<dd>Second Java Course</dd>
</dl>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode/favicon.ico

3.55 KiB

CodeExamples/Week1/IntroHTMLCode/testudo.jpg

3.13 KiB

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Program Template</title>
</head>
<body>
<script>
// "use strict"; Defines that JavaScript code should be executed in strict mode.
// New in ES5
"use strict";
var i = 10;
console.log(i);
/* Your JavaScript here */
</script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
main();
function main() {
for (let i = 1; i <= 4; i++) {
document.writeln(i + "<br>");
}
document.writeln("Value if i: " + i); //Generates ReferenceError
evaluate(200);
}
function evaluate(x) {
if (x >= 100) {
let y = x * 100;
document.writeln("Value in if: " + y);
}
//return y; // undefined (see console)
}
</script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
var v1 = prompt("Enter value");
console.log("First value entered: " + v1);
var v2 = Number(prompt("Enter positive value"));
if (v2 < 0) {
console.error("Negative value provided.");
} else {
console.info("Positive value provided");
}
console.warn("You should always start your projects early");
</script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Example</title>
</head>
<body>
<script>
"use strict";
main();
function main() {
const MAX_TEMP = 4;
document.writeln("Contant value: " + MAX_TEMP);
MAX_TEMP = 6; // see console
}
</script>
</body>
</html>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment