diff options
Diffstat (limited to 'usth/ICT3.2/prac/1')
36 files changed, 442 insertions, 0 deletions
diff --git a/usth/ICT3.2/prac/1/images/cat/lick-vet-penis.png b/usth/ICT3.2/prac/1/images/cat/lick-vet-penis.png new file mode 100644 index 0000000..27ecf70 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/cat/lick-vet-penis.png Binary files differdiff --git a/usth/ICT3.2/prac/1/images/cat/lsd-dragon.jpg b/usth/ICT3.2/prac/1/images/cat/lsd-dragon.jpg new file mode 100644 index 0000000..be8f84a --- /dev/null +++ b/usth/ICT3.2/prac/1/images/cat/lsd-dragon.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/cat/nailed-moonwalk.gif b/usth/ICT3.2/prac/1/images/cat/nailed-moonwalk.gif new file mode 100644 index 0000000..13df92d --- /dev/null +++ b/usth/ICT3.2/prac/1/images/cat/nailed-moonwalk.gif Binary files differdiff --git a/usth/ICT3.2/prac/1/images/cat/not-exist.jpg b/usth/ICT3.2/prac/1/images/cat/not-exist.jpg new file mode 100644 index 0000000..2ae228e --- /dev/null +++ b/usth/ICT3.2/prac/1/images/cat/not-exist.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/cat/oh.gif b/usth/ICT3.2/prac/1/images/cat/oh.gif new file mode 100644 index 0000000..b9c2603 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/cat/oh.gif Binary files differdiff --git a/usth/ICT3.2/prac/1/images/cat/ooer.jpg b/usth/ICT3.2/prac/1/images/cat/ooer.jpg new file mode 100644 index 0000000..836ef62 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/cat/ooer.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/cat/pan.jpg b/usth/ICT3.2/prac/1/images/cat/pan.jpg new file mode 100644 index 0000000..300070f --- /dev/null +++ b/usth/ICT3.2/prac/1/images/cat/pan.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/communist/black-hole.png b/usth/ICT3.2/prac/1/images/communist/black-hole.png new file mode 100644 index 0000000..c763709 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/communist/black-hole.png Binary files differdiff --git a/usth/ICT3.2/prac/1/images/communist/harry.jpg b/usth/ICT3.2/prac/1/images/communist/harry.jpg new file mode 100644 index 0000000..6423fb5 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/communist/harry.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/communist/nike.jpg b/usth/ICT3.2/prac/1/images/communist/nike.jpg new file mode 100644 index 0000000..3a2e448 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/communist/nike.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/communist/propaganda.jpg b/usth/ICT3.2/prac/1/images/communist/propaganda.jpg new file mode 100644 index 0000000..745f755 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/communist/propaganda.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/communist/sky.jpg b/usth/ICT3.2/prac/1/images/communist/sky.jpg new file mode 100644 index 0000000..c3d6d37 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/communist/sky.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/dog/centipede.png b/usth/ICT3.2/prac/1/images/dog/centipede.png new file mode 100644 index 0000000..0eea844 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/dog/centipede.png Binary files differdiff --git a/usth/ICT3.2/prac/1/images/dog/couple.jpg b/usth/ICT3.2/prac/1/images/dog/couple.jpg new file mode 100644 index 0000000..d0bb753 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/dog/couple.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/dog/deliver.jpg b/usth/ICT3.2/prac/1/images/dog/deliver.jpg new file mode 100644 index 0000000..5dbe387 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/dog/deliver.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/dog/fight.gif b/usth/ICT3.2/prac/1/images/dog/fight.gif new file mode 100644 index 0000000..b3e0db6 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/dog/fight.gif Binary files differdiff --git a/usth/ICT3.2/prac/1/images/dog/hit-karate-dad.jpg b/usth/ICT3.2/prac/1/images/dog/hit-karate-dad.jpg new file mode 100644 index 0000000..10dfcf4 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/dog/hit-karate-dad.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/dog/pic.jpg b/usth/ICT3.2/prac/1/images/dog/pic.jpg new file mode 100644 index 0000000..850f587 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/dog/pic.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/doggo-think.jpg b/usth/ICT3.2/prac/1/images/doggo-think.jpg new file mode 100644 index 0000000..c64f967 --- /dev/null +++ b/usth/ICT3.2/prac/1/images/doggo-think.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/thalos.jpg b/usth/ICT3.2/prac/1/images/thalos.jpg new file mode 100644 index 0000000..97ac41b --- /dev/null +++ b/usth/ICT3.2/prac/1/images/thalos.jpg Binary files differdiff --git a/usth/ICT3.2/prac/1/images/thumb-up.webp b/usth/ICT3.2/prac/1/images/thumb-up.webp new file mode 100644 index 0000000..adfa98d --- /dev/null +++ b/usth/ICT3.2/prac/1/images/thumb-up.webp Binary files differdiff --git a/usth/ICT3.2/prac/1/labwork.pdf b/usth/ICT3.2/prac/1/labwork.pdf new file mode 100644 index 0000000..14c8aa6 --- /dev/null +++ b/usth/ICT3.2/prac/1/labwork.pdf Binary files differdiff --git a/usth/ICT3.2/prac/1/task1.html b/usth/ICT3.2/prac/1/task1.html new file mode 100644 index 0000000..7c9433a --- /dev/null +++ b/usth/ICT3.2/prac/1/task1.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<body> + <h1>The Bachelor program is an importnt part of USTH.</h1> + <p> + It is applying the European Credit Transfer and Accumulation System (ECTS) + as in most of European countries, with the study program corresponds to + 180 Credits in 3 years (60 Credits/year). + </p> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task10.html b/usth/ICT3.2/prac/1/task10.html new file mode 100644 index 0000000..04750d3 --- /dev/null +++ b/usth/ICT3.2/prac/1/task10.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<style> +body { margin: 0; } +div { + box-shadow: + -1vmin 0 0 0 #2f528f inset, + 1vmin 0 0 0 #2f528f inset, + 0 1vmin 0 0 #2f528f inset, + 0 -1vmin 0 0 #2f528f inset; +} +.container { background: #c5e0b8 } +.header { + height: 20vh; + background-color: #4472c4; +} +.wrapper:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +.nav { + width: 25%; + height: 70vh; + background: #dbdbdb; +} +.footer { + height: 10vh; + background-color: #4472c4; +} +</style> + +<body> + <div class=container> + <div class=header></div> + <div class=wrapper> + <div class=nav></div> + <div class=section></div> + </div> + <div class=footer></div> + </div> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task11.css b/usth/ICT3.2/prac/1/task11.css new file mode 100644 index 0000000..dc06cc2 --- /dev/null +++ b/usth/ICT3.2/prac/1/task11.css @@ -0,0 +1,63 @@ +* { box-sizing: border-box } + +body { margin: 0 } + +header, nav, article, footer { + background-color: #5b9bd5; + color: white; + margin: 1vh 1vw; +} + +header, footer { + width: 96vw; + text-align: center; +} + +nav, article { + float: left; + height: 60vh; +} + +header { + height: 20vh; + line-height: 20vh; +} + +nav { width: 25vw } + +article { width: 69vw } + +footer { + height: 10vh; + line-height: 10vh; +} + +@media (max-width: 690px) { + nav, article { + width: 96vw; + height: auto; + } +} + +section:after { + content: ''; + display: table; + clear: both; +} + +p, img { margin: 1em } + +.box { + border: 2px solid #cbcbcb; + background-color: #538135; + text-align: center; + padding: 0.5em; +} + +img { + width: 10vw; + height: 10vw; + border: 2px solid #cbcbcb; +} + +a { text-decoration: none } diff --git a/usth/ICT3.2/prac/1/task11.html b/usth/ICT3.2/prac/1/task11.html new file mode 100644 index 0000000..a169dca --- /dev/null +++ b/usth/ICT3.2/prac/1/task11.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link rel='stylesheet' type='text/css' href='task11.css'> +<script src='task11.js'></script> + +<body> + <header> + <h1>Banner<h1> + </header> + + <section> + <nav> + <p id=cat class=box>Cats</p> + <p id=communist class=box>Communism</p> + <p id=dog class=box>Dogs</p> + <p id=about class=box>About</p> + </nav> + + <article id=foobar></article> + </section> + + <footer>Copyright</footer> + + <script> + for (id of ['cat', 'communist', 'dog', 'about']) { + document.getElementById(id).onclick = cb(id); + } + </script> + +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task11.js b/usth/ICT3.2/prac/1/task11.js new file mode 100644 index 0000000..55d7eba --- /dev/null +++ b/usth/ICT3.2/prac/1/task11.js @@ -0,0 +1,17 @@ +const files = {'cat': ['lick-vet-penis.png', 'lsd-dragon.jpg', + 'nailed-moonwalk.gif', 'not-exist.jpg', + 'oh.gif', 'ooer.jpg', 'pan.jpg'], + 'communist': ['black-hole.png', 'harry.jpg', + 'nike.jpg', 'propaganda.jpg', 'sky.jpg'], + 'dog': ['centipede.png', 'couple.jpg', 'deliver.jpg', + 'fight.gif', 'hit-karate-dad.jpg', 'pic.jpg']} + +function cb(id) { + let content = '<p>My name is Nguyễn Gia Phong<p>'; + if (id != 'about') + content = files[id].map(file => ` + <a href='images/${id}/${file}' target='_blank'> + <img src='images/${id}/${file}'> + </a>`).join(''); + return () => document.getElementById('foobar').innerHTML = content; +} diff --git a/usth/ICT3.2/prac/1/task2.html b/usth/ICT3.2/prac/1/task2.html new file mode 100644 index 0000000..92f9da0 --- /dev/null +++ b/usth/ICT3.2/prac/1/task2.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<body> + <h1>My favorite movies</h1> + <ol> + <li>American Hustle</li> + <li>American Psycho</li> + <li>American Ultra</li> + <li>A Quiet Place</li> + <li>A Simple Favor</li> + <li>Blade Runner 2049</li> + <li>Blender</li> + <li>Borat</li> + <li>Chronicle</li> + <li>Coraline</li> + <li>Django Unchained</li> + <li>Donnie Darko</li> + <li>Equilibrium</li> + <li>Euphoria</li> + <li>Fight Club</li> + <li>Friends with Benefits</li> + <li>From Beijing with Love</li> + <li>Get Smart</li> + <li>Identity</li> + <li>Inception</li> + <li>Inglourious Basterds</li> + <li>Interstellar</li> + <li>Jennifers Body</li> + <li>Joker</li> + <li>Keeping Up with the Joneses</li> + <li>Kung Fu Hustle</li> + <li>Leon The Professional</li> + <li>Maleficent: Mistress Of Evil</li> + <li>Mr and Mrs Smith</li> + <li>Mr Right</li> + <li>Mr Robot</li> + <li>My Days of Mercy</li> + <li>Nocturnal Animals</li> + <li>Pokemon: Detective Pikachu</li> + <li>Pulp Fiction</li> + <li>Red</li> + <li>Rubber</li> + <li>Scary Movies</li> + <li>Spider-Man: Far From Home</li> + <li>Spider-Man: Into the Spider-Verse</li> + <li>Splice</li> + <li>Spy Intervention</li> + <li>Taxi</li> + <li>The Bourne Identity</li> + <li>The Dark Knight</li> + <li>The Game</li> + <li>The Hunger Games</li> + <li>The Island</li> + <li>The Silence of the Lambs</li> + <li>The Texas Chainsaw Massacre</li> + <li>The Wrestler</li> + <li>Three Flavours Cornetto</li> + <li>Underworld</li> + <li>Unleashed</li> + <li>Up In The Air</li> + <li>Wreck-It Ralph</li> + <li>X-Men: Days of Future Past</li> + <li>X-Men: First Class</li> + <li>Zathura: A Space Adventure</li> + </ol> + <h1>Subjects I'm studying this semester</h1> + <ul> + <li>Scientific Writing</li> + <li>French 3.1</li> + <li>French 3.2</li> + <li>Object-oriented Systems Analysis and Design</li> + <li>Web Application Development</li> + <li>Machine learning and Data mining I</li> + <li>Graph Theory</li> + <li>Mobile Application Development</li> + <li>Advanced Databases</li> + </ul> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task3.html b/usth/ICT3.2/prac/1/task3.html new file mode 100644 index 0000000..01423e4 --- /dev/null +++ b/usth/ICT3.2/prac/1/task3.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<style> +img { + width: 50px; + height: 50px; +} +</style> +<body> + <img src='images/doggo-think.jpg'> + <img src='images/thalos.jpg'> + <img src='images/thumb-up.webp'> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task4.html b/usth/ICT3.2/prac/1/task4.html new file mode 100644 index 0000000..26f5329 --- /dev/null +++ b/usth/ICT3.2/prac/1/task4.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<style> +img { + width: 50px; + height: 50px; +} +</style> +<body> + <a href='images/doggo-think.jpg'><img src='images/doggo-think.jpg'></a> + <a href='images/thalos.jpg'><img src='images/thalos.jpg'></a> + <a href='images/thumb-up.webp'><img src='images/thumb-up.webp'></a> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task5.html b/usth/ICT3.2/prac/1/task5.html new file mode 100644 index 0000000..30691a6 --- /dev/null +++ b/usth/ICT3.2/prac/1/task5.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<style> +table, th, td { + border: 1px solid black; + border-collapse: collapse; +} +th, td { padding: 1em } +th { font-weight: bold } +td:first-child { font-weight: bold } +</style> + +<body> + <table> + <thead> + <tr> + <th></th> + <th>Monday</th> + <th>Tuesday</th> + <th>Wednesday</th> + <th>Thursday</th> + <th>Friday</th> + </tr> + </thead> + <tbody> + <tr> + <td>Morning</td> + <td>Math</td> + <td rowspan=2>Chemistry</td> + <td>Mobile</td> + <td></td> + <td>History</td> + </tr> + <tr> + <td>Afternoon</td> + <td>Physics</td> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task6.css b/usth/ICT3.2/prac/1/task6.css new file mode 100644 index 0000000..b08a136 --- /dev/null +++ b/usth/ICT3.2/prac/1/task6.css @@ -0,0 +1,21 @@ +html { + padding-bottom: 4em; +} + +body { + font-family: sans-serif; + line-height: 1.5em; + max-width: 40em; + padding: 0 2%; + margin: auto; + background-color: #eeeeec; + color: #2e3436; +} + +a { + color: #204a87; +} + +h1, h2, h3 { + line-height: 1.2em; +} diff --git a/usth/ICT3.2/prac/1/task6.html b/usth/ICT3.2/prac/1/task6.html new file mode 100644 index 0000000..a2a166a --- /dev/null +++ b/usth/ICT3.2/prac/1/task6.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<meta charset='utf-8'> +<link rel='stylesheet' type='text/css' href='task6.css'> +<style> +p.second { color: red } +</style> + +<body> + <p id=first style='font-size: 0.5em'> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </p> + <p class=second> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque + porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore + et dolore magnam aliquam quaerat voluptatem. + </p> + <p class=second> + Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem + vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil + molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla + pariatur? + </p> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task7.html b/usth/ICT3.2/prac/1/task7.html new file mode 100644 index 0000000..82782eb --- /dev/null +++ b/usth/ICT3.2/prac/1/task7.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<style> +img { border: 5px solid red } +img:hover { border-radius: 7% } +</style> +<body> + <img src='images/doggo-think.jpg'> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task8.html b/usth/ICT3.2/prac/1/task8.html new file mode 100644 index 0000000..ec64663 --- /dev/null +++ b/usth/ICT3.2/prac/1/task8.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<style> +a { text-decoration: none } +a:visited { color: red } +a:hover { color: green } +</style> +<body> + <a href='https://en.wikipedia.org/wiki/Foobar'>Foo</a> + <a href='https://en.wikipedia.org/wiki/Foo_was_here'>was here</a>, + <a href='https://en.wikipedia.org/wiki/Xyzzy_(computing)'>xyzzy</a> +</body> +</html> diff --git a/usth/ICT3.2/prac/1/task9.html b/usth/ICT3.2/prac/1/task9.html new file mode 100644 index 0000000..22ec14f --- /dev/null +++ b/usth/ICT3.2/prac/1/task9.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<style> +table, th, td { + border: 2px solid white; + border-collapse: collapse; +} +th, td { padding: 1em } +th { + font-weight: bold; + background-color: #1f497d; +} +tr { text-align: center } +tr:nth-child(odd) { background-color: #d0d8e8 } +tr:nth-child(even) { background-color: #e9edf4 } +</style> + +<body> + <table> + <thead> + <tr> + <th style='width: 21em'>Subject</th> + <th style='width: 12em'>ECTS</th> + </tr> + </thead> + <tbody> + <tr> + <td>Math</td> + <td>3</td> + </tr> + <tr> + <td>Physics</td> + <td>5</td> + </tr> + <tr> + <td>Chemistry</td> + <td>4</td> + </tr> + <tr> + <td>English</td> + <td>3</td> + </tr> + </tbody> +</body> +</html> |
