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
Hide whitespace changes
Inline Side-by-side
Showing
with 574 additions and 0 deletions
CodeExamples/Week1/IntroHTMLCode-2/Coco.jpg 0 → 100644
+ 0
− 0
View file @ 4e364242
CodeExamples/Week1/IntroHTMLCode-2/Coco.jpg

778 KiB

CodeExamples/Week1/IntroHTMLCode-2/DOM Example.html 0 → 100644
+ 52
− 0
View file @ 4e364242
<!DOCTYPE html>
<html>
<head>
<title>
Shape Shed - Examples - CSS + DOM = A Beautiful Couple
</title>
<style type="text/css" media="screen">@import "domExample.css";</style>
</head>
<body id="front-door">
<div id="kitchen">
<div id="fridge">
<p>Extra Pulp OJ</p>
</div>
<div id="freezer">
<p>Ice Cream</p>
</div>
</div>
<div id="lounge">
<div id="sofa">
<p>Newspaper</p>
</div>
<div id="chair">
<p>Cushion</p>
</div>
</div>
<div id="bedroom">
<div id="bed">
<p>Duvet</p>
</div>
<div id="lamp">
<p>Lightbulb</p>
</div>
</div>
<div id="bathroom">
<div id="shower">
<p>Shower Gel</p>
</div>
<div id="sink">
<p>Soap</p>
</div>
</div>
<h1>What's this all about</h1>
<p>This is an example showing CSS and the DOM used together. </p>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/background.css 0 → 100644
+ 19
− 0
View file @ 4e364242
body {
/* background properties */
background-color: silver;
/* background-image: url(campusBldg.jpg); */
background-image: url(Coco.jpg);
background-repeat: repeat-x repeat-y;
/* try repeat-x, repeat-y, no-repeat, repeat */
background-attachment: scroll;
/* try scroll, fixed */
background-size: 10cm;
/* shorthand version for above background properties */
/* DISABLED background: silver url(Coco.jpg) repeat-y fixed center; */
}
CodeExamples/Week1/IntroHTMLCode-2/background.html 0 → 100644
+ 52
− 0
View file @ 4e364242
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Background</title>
<link rel="stylesheet" href="background.css" type="text/css" />
</head>
<body>
<h1>Partnerships</h1>
<p>
Another sign of community-building is the growth of
UM-partnerships. The investment of pivate resources in the UM
mission suggests that shared goals -education, innovation, and
entrepreneurship--create productive alliances. Such public/private
partnerships are helping to make UM education affordable and
accessible to all students. Chevy Chase Bank has joined with UM in
a partnership that will benefit scholarships and better athletics
facilities. Dell and Apple computers have joined forces with the
Office of Information Technology to provide affordable computers
for students, faculty and staff.
</p>
<p>
Progress on the new M Square Research Park, 128 acres at the
College Park Metro station, is another example of such
partnerships. Collaboration between the University, the State, the
federal government and private sector businesses promise to build
UM's research programs in depth and breadth. Several steps occurred
this year that advanced the University closer to the complete
vision of M Square as a hub for collaborative research initiatives:
the National Foreign Language Center moved into the Patapsco
Building at M Square and Datastream graduated from the Technology
Advancement Program on campus to the Technology Ventures building
at M Square. Physically, the site is now primed with 65 acres
readied for new building construction. Construction of the first
120,000 square foot spec building is set to begin this October, and
the main road, University Research Court, is now completed. The
residential component of M Square, which will provide upscale
condominiums to researchers and the general public, has received
its state approvals. An exciting feature of this condominium
project is that the university will own 50 units, which will be
allocated on a competitive basis to attract the "best and the
brightest" graduate and postdoctoral students and visitors from
around the world.
</p>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/backgroundStretch.css 0 → 100644
+ 10
− 0
View file @ 4e364242
body {
background: url(c3.jpg);
background-repeat: no-repeat;
/* try repeat-x, repeat-y, no-repeat, repeat */
background-size: cover;
background-position: center; /* try left right */
}
/* try without the following rule */
CodeExamples/Week1/IntroHTMLCode-2/backgroundStretch.html 0 → 100644
+ 53
− 0
View file @ 4e364242
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Background</title>
<link rel="stylesheet" href="backgroundStretch.css" type="text/css" />
</head>
<body>
<h1>Partnerships</h1>
<p>
Another sign of community-building is the growth of
UM-partnerships. The investment of pivate resources in the UM
mission suggests that shared goals -education, innovation, and
entrepreneurship--create productive alliances. Such public/private
partnerships are helping to make UM education affordable and
accessible to all students. Chevy Chase Bank has joined with UM in
a partnership that will benefit scholarships and better athletics
facilities. Dell and Apple computers have joined forces with the
Office of Information Technology to provide affordable computers
for students, faculty and staff.
</p>
<p>
Progress on the new M Square Research Park, 128 acres at the
College Park Metro station, is another example of such
partnerships. Collaboration between the University, the State, the
federal government and private sector businesses promise to build
UM's research programs in depth and breadth. Several steps occurred
this year that advanced the University closer to the complete
vision of M Square as a hub for collaborative research initiatives:
the National Foreign Language Center moved into the Patapsco
Building at M Square and Datastream graduated from the Technology
Advancement Program on campus to the Technology Ventures building
at M Square. Physically, the site is now primed with 65 acres
readied for new building construction. Construction of the first
120,000 square foot spec building is set to begin this October, and
the main road, University Research Court, is now completed. The
residential component of M Square, which will provide upscale
condominiums to researchers and the general public, has received
its state approvals. An exciting feature of this condominium
project is that the university will own 50 units, which will be
allocated on a competitive basis to attract the "best and the
brightest" graduate and postdoctoral students and visitors from
around the world.
</p>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/boxModel.css 0 → 100644
+ 69
− 0
View file @ 4e364242
/* Setting bigger root font size */
/* html {
font-size: 30px;
} */
body {
font-family: arial, sans-serif;
/* width: 25em;
height: 25em; */
border-style: solid;
border-color: blue;
padding: 1em;
/* change to 0 em, 1 ... 6 em */
margin: 1em;
/* change to 0 em, 1 ... 6 em */
}
/* see that with the following rule the paragraph inside
article inherits the padding of article */
/* article p {
padding: inherit;
} */
#paddingTests {
background-color: gray;
color: yellow;
/* width: 4em;
height: 2em; */
padding: 1em;
/* change to 0 em, 1 ... 6 em */
border-color: red;
border-style: solid;
border-width: 1em;
/* change to .5 em */
}
#marginTests {
background-color: gray;
color: yellow;
width: 30em;
height: 20em;
margin: 2em auto;
/* change to 0 em, 1 ... 6 em */
/* also test adding auto after 2em */
border: 5px dashed red;
}
#outer {
width: 6em;
border: 1em ridge red;
}
#inner {
border: .5em solid lightblue;
padding-left: .5em;
}
/* this is an adjacent sibling selector */
p + div{
padding: 10em;
}
/* this is a child selector */
div > div {
color: orangered;
}
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/boxModel.html 0 → 100644
+ 33
− 0
View file @ 4e364242
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Box Model Tests</title>
<link rel="stylesheet" href="BoxModel.css" />
</head>
<body>
<article id="paddingTests">
<h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. </h1>
<p>Facere nostrum saepe temporibus eum, obcaecati possimus quos
error cum nesciunt cupiditate at voluptatum magnam voluptas
laborum. Suscipit libero voluptas adipisci autem?</p>
</article>
<p id="marginTests">
Facere nostrum saepe temporibus eum, obcaecati possimus quos error cum nesciunt
cupiditate at voluptatum magnam voluptas laborum. Suscipit libero voluptas
adipisci
autem?
</p>
<div id="outer">
<div id="inner">
Testudo
</div>
</div>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/c3.jpg 0 → 100644
+ 0
− 0
View file @ 4e364242
CodeExamples/Week1/IntroHTMLCode-2/c3.jpg

143 KiB

CodeExamples/Week1/IntroHTMLCode-2/descendantSelector.css 0 → 100644
+ 15
− 0
View file @ 4e364242
body {
font-family: arial, sans-serif;
}
a {
font-size: 2em;
color: green;
}
/* When a found in li override previous a definition */
li a {
font-size: 4em;
font-style: italic;
color: red;
}
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/descendantSelector.html 0 → 100644
+ 24
− 0
View file @ 4e364242
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Descendant Selectors</title>
<link rel="stylesheet" href="DescendantSelector.css" />
</head>
<body>
<h1>Local Newspaper</h1>
<p>
For news about the City of College Park and the University of
Maryland you can check the (<a
href="http://www.diamondbackonline.com/">Diamondback</a>)
</p>
<h1>World News</h1>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li>Nightly News</li>
</ul>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/domExample.css 0 → 100644
+ 21
− 0
View file @ 4e364242
/*-----------------------------------------------------------------------------
Example credit to:
author: george ornbo
website: http://www.shapeshed.com
-----------------------------------------------------------------------------*/
body
{
font: 76%/150% "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
color: #333366;
}
/* This demonstrates accessing and manipulating using the DOM (Document Object Model) */
/*Color the ice cream red!*/
#kitchen {
color: red;
}
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/domExample.html 0 → 100644
+ 52
− 0
View file @ 4e364242
<!DOCTYPE html>
<html>
<head>
<title>
Shape Shed - Examples - CSS + DOM = A Beautiful Couple
</title>
<style type="text/css" media="screen">@import "domExample.css";</style>
</head>
<body id="front-door">
<div id="kitchen">
<div id="fridge">
<p>Extra Pulp OJ</p>
</div>
<div id="freezer">
<p>Ice Cream</p>
</div>
</div>
<div id="lounge">
<div id="sofa">
<p>Newspaper</p>
</div>
<div id="chair">
<p>Cushion</p>
</div>
</div>
<div id="bedroom">
<div id="bed">
<p>Duvet</p>
</div>
<div id="lamp">
<p>Lightbulb</p>
</div>
</div>
<div id="bathroom">
<div id="shower">
<p>Shower Gel</p>
</div>
<div id="sink">
<p>Soap</p>
</div>
</div>
<h1>What's this all about</h1>
<p>This is an example showing CSS and the DOM used together. </p>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/externalFile.css 0 → 100644
+ 2
− 0
View file @ 4e364242
h1 {color: red;}
p {font-size: 2em;}
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/externalFile.html 0 → 100644
+ 12
− 0
View file @ 4e364242
<!doctype html>
<head>
<title>External Style File</title>
<!-- The next line connects this file with the style sheet -->
<link rel="stylesheet" href="ExternalFile.css" type="text/css" />
</head>
<body>
<h1>Additional information</h1>
<p> Additional information can be found through the undergraduate web page.
</p>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/googleFont.css 0 → 100644
+ 17
− 0
View file @ 4e364242
#para1 {
font-family: Chilanka;
background-color: gray;
color: yellow;
border: 5px dashed red;
margin:.5em;
padding:.5em;
}
#para2 {
font-family: Ubuntu;
border: 1em ridge red;
margin:.5em;
padding:.5em;
}
CodeExamples/Week1/IntroHTMLCode-2/googleFont.html 0 → 100644
+ 28
− 0
View file @ 4e364242
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Shorthand Properties</title>
<link rel="stylesheet" href="googleFont.css" />
<link href="https://fonts.googleapis.com/css?family=Chilanka|Ubuntu&display=swap"
rel="stylesheet">
</head>
<body>
<p id="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et pariatur,
neque libero recusandae unde blanditiis itaque sit. Excepturi maiores aperiam
cupiditate necessitatibus suscipit, et praesentium. Quaerat, facere? Voluptates,
numquam dicta?</p>
<p id="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident esse,
dolor quae ipsa ipsum dolores sint cum harum, commodi earum amet magnam! Doloribus
beatae accusantium ipsam magni quis sequi. Tempore.</p>
<p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
esse, dolor quae ipsa ipsum dolores sint cum harum, commodi earum amet magnam!
Doloribus beatae accusantium ipsam magni quis sequi. Tempore.</p>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/html5Elements.html 0 → 100644
+ 71
− 0
View file @ 4e364242
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Elements</title>
</head>
<body>
<header>
<h1>Review Site</h1>
</header>
<nav>
<a href="http://www.umd.edu">UMD Web Site</a>
</nav>
<article class="programming_languages_reviews">
<header>
<h2>Java</h2>
</header>
<section class="faculty_reviews">
<h2>Faculty Reviews</h2>
<article class="faculty_review">
<h2>Dr. JavaJava</h2>
<p>Great Language</p>
<footer>
<p>Submitted on <time datetime="2016-01-04 17:00">Jan 4</time></p>
</footer>
</article>
<article class="faculty_review">
<h2>Dr. AssemblyAssembly</h2>
<p>I prefer Assembly</p>
<footer>
<p>Submitted on <time datetime="2016-01-02 14:00">Jan 2</time></p>
</footer>
</article>
<article class="faculty_review">
<h2>Dr. JavaScript</h2>
<p>I prefer JavaScript</p>
<footer>
<p>Lorem ipsum
voluptatem quisquam alias quam itaque enim sit laudantium
doloremque fuga laborum
officiis accusamus deserunt sint porro? <span
style="display: inline-block; margin-top: 100px; ">Aliquid</span> repellat
sed quas ipsa vitae, tenetur sit error expedita dicta. In incidunt
quaerat odio
delectus, magni iste fugit, quis rerum quae similique consequatur
consectetur
nemo. Laboriosam?</p>
</footer>
</article>
</section>
<footer>
<p>UMCP Java Reviews</p>
</footer>
</article>
<footer>
&copy;UMCP
</footer>
</body>
</html>
\ No newline at end of file
CodeExamples/Week1/IntroHTMLCode-2/iframeExample.html 0 → 100644
+ 20
− 0
View file @ 4e364242
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: rgb(20,40,100, .5);
}
</style>
</head>
<body>
<h2>iframe Example</h2>
<p>Can display just about anything in the frame, you have control over sizing</p>
<iframe src="https://www.cnn.com/" height="200" width="300"></iframe>
</body>
</html>
CodeExamples/Week1/IntroHTMLCode-2/internalStyle.html 0 → 100644
+ 24
− 0
View file @ 4e364242
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Inline Style</title>
<style>
h1 {
color: blue
}
p {
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>Introduction to CS</h1>
<p>The following courses are provided by the Department of Computer Science.
</p>
</body>
</html>
\ No newline at end of file
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