I nte r n et & W W W

Internet och WWW, JUFE, Autumn 2021

Internet & WWWStudy Guide, Autumn 2021 [ for JUFE students who started 2020]

Teachers in the course:

Course communication

Grading

ScheduleHow should I study?

Learning outcomes

Scope of the course

A. Intro, HTML5 and CSS3List of useful pedagogical movie clipsAssignments

Assignment #1: Intro to computers and the InternetAssignment #2: HTML5 and CSSAssignment #3: CSS, part 2

Laboratory WorkLaboratory #1 - HTML5Laboratory #2a - HTML5, part 2Laboratory #2b - Apply CSS on a HTML5 pageLaboratory #3 - Stylesheets (CSS), Part 2

Written Exam

B. JavaScript etcList of useful pedagogical movie clips

Reflection Protocol

ReferencesIntegrated Development Environment, IDE / Tools

v.2021-12-04 1 (17)


About the study guideThis study guide is written with the purpose of helping you in your studies. It will be updatedonce in a while, and therefore make sure you have the latest version. The version id can beseen in the last part of the file name as: <filename>v.yyyymmdd_hhmm.pdf

Teachers in the course:

- Roger Nyberg [email protected]

Course communication

During this course we will communicate through all these channels:1. Web site: http://computing.du.se/edu/internet_www/ht2021/ This web site contains

the file system for this course. Here you should be able to find everything,including the latest version of this study guide.

2. Zoom: This is the main class room where we meet in real time using video andsound to have lectures, seminars and presentations and Q&A .1

a. In Zoom you should enter Edit Profile and add a photo of yourself in theZoom room (max 3 years ago). Also include your English and Chinesename as text. Why? Online sessions tend to be anonymous, and one way tomake it more social is to see who we are talking to. Hence the photo.

3. WeChat: Here is where we communicate through text about assignments andreading material.

It is your duty to keep track of all these communication channels above and to stay updated.

Grading

● One written exam, each graded on a scale 0 – 100%● Weekly Laboratories work or Assignments

○ Presentations and reports will be graded as [ Fail, Pass ]● The final grade will be determined by a weighting of laboratory work & Assignments,

and the written exam

1 Q&A: Questions and Answers session

v.2021-12-04 2 (17)

mailto:[email protected]

http://computing.du.se/edu/internet_www/ht2021/


Schedule

Week Date Room Module / To-Do! Note Teacher

w1 4 Nov2021

Zoom - Lect 0 Course introduction- Lect 1 Intro to computers and the Internet.

Downloadcourseliteratureand slidesathttp://computing.du.se/edu/internet_www/ht2021/

Roger Nyberg(rny)

w1 5 Nov2021

Zoom &wechat

- Lecture 2 HTML5, part 1- Work on Assignment #1: Intro to computers andthe Internet- Laboratory #1 - HTML5 with online supervision- Submit it to the student monitor before 14:00hours (CST) on 12 November.

Readchapter1and 2 in [1]

rny

w2 8 Nov2021

Zoom &wechat

- Lecture 3 HTML5, part 2- Work on Laboratory #2a - HTML5, part 2

Readchapter 3 in[1]

rny

w2 11 Nov2021

Zoom &wechat

- Lecture 4 Stylesheets (CSS), part 1- Work on Assignment #2: HTML5 and CSS- Work on Laboratory #2a - HTML5, part 2

Readchapter 4 in[1]

rny

w2 12 Nov2021

Zoom &wechat

- Submit Laboratory #1 - HTML5 to the studentmonitor before 14:00 hours (CST).- Work on Laboratory #2b - Apply CSS on aHTML5 page with online supervision

rny

w3 15 Nov2021

Zoom &wechat

- Submit Laboratory #2a - HTML5, part 2 to thestudent monitor before the start of the lecture.- Lecture 5 Stylesheets (CSS), part 2- Work on Assignment #3: CSS, part 2- Work on Laboratory #2b - Apply CSS on aHTML5 page

Readchapter 5 in[1]

rny

w3 18 Nov2021

Zoom &wechat

- Lecture 6: CSS rules, properties in generalSupervision online:- Complete Assignment #3: CSS, part 2- Work on Laboratory #3 - Stylesheets (CSS),Part 2

rny

w3 19 Nov2021

Zoom &wechat

Online supervision:- Submit Laboratory #2b - Apply CSS on aHTML5 page to the student monitor before thestart of the lecture.- Work on Laboratory #3 - Stylesheets (CSS),

rny

v.2021-12-04 3 (17)






https://docs.google.com/document/d/1YkE1tfRPM6aNCgAbdK8K-G4rTIh6QnUpRWGnSvc5ows/edit#heading=h.t7j19r5hvl83




Part 2- Submit your questions to the student monitorbefore 22:00 CST

w4 22Nov2021

Zoomandwechat

- Questions & Answers (Q&A). Note: Submit yourquestions to the student monitor before 19 Novat 22:00 hours

rny

w4 25Nov2021

Zoomandwechat

- Submit Laboratory #3 - Stylesheets (CSS),Part 2 to the student monitor before the start ofthe lecture.JavaScript Introduction 0- Create your SoloLearn account:https://www.sololearn.com/learning/1024

Readchapter 6 in[1]

rny

w4 26Nov2021

ZoomandWeChat

JavaScript Introduction 1 Readchapter 7 in[1]

rny

w5 29 Nov2021

ZoomandWeChat

JavaScript 2Lab work: SoloLearn JS

Readchapter 8 in[1]

rny

w5 2 Dec2021

ZoomandWeChat

JavaScript 3: Functions 1Lab work: SoloLearn JS

Readchapter 9 in[1]

rny

w5 3 Dec2021

ZoomandWeChat

JavaScript 4: Functions 2Lab work: SoloLearn JS

Readchapter 10in [1]

rny

w6 6 Dec2021

ZoomandWeChat

JavaScript 5: ArraysLab work: SoloLearn JS


rny

w6 8 Dec2021

ZoomandWeChat

JavaScript 6: ObjectsLab work: SoloLearn JS


rny

w6 9 Dec2021

ZoomandWeChat

JavaScript 7Lab work: SoloLearn JS


rny

w7 13 Dec2021

ZoomandWeChat

JavaScript 8- SUBMIT the SoloLearn JavaScript Certificateto the student monitor before the start of thelecture.


rny

w7 16 Dec2021

ZoomandWeChat

JavaScript 9: JSON rny

w7 17 Dec Zoom JavaScript 10 rny

v.2021-12-04 4 (17)

https://www.sololearn.com/learning/1024


2021 andWeChat

w8 20 Dec2021

- Questions & Answers (Q&A). Note: Submit yourquestions to the student monitor before 19 Novat 22:00 hours

rny(21x3=63h)

w8 22 Dec2021

Written Exam, arranged on campus by Dr. Y Liu rny/Dr Y. Liu1h

How should I study?

You should strive to solve your assignments just as you probably would do in "daily life atwork" by looking at how others solved similar problems. Make extensive use of the Internet,books, and so on. Often you will find similar problems as those you are having and you oftenby slight modifications use the solutions and apply them to your own problem.IMPORTANT: Visit this page https://www.du.se/en/library/academic-writing/Advice: Make sure you collect your own library of what you find while searching forsolutions. You will benefit from this later during the examination, the thesis and in life.

Learning outcomes

Upon completion of the course, the student shall be able to:

Concerning Knowledge and Understanding● Give details about the Internet’s development, terminology and concepts.● Give details about different methods which facilitate the administration and

design of web pages.● Give details about different theories for information architecture.

Concerning Skills and Abilities● Apply markup languages and Cascading Style Sheets in order to develop

static web sites.● Publish documents on a Web Server.● Apply methodologies for developing web site design.● Use common development tools when publishing information on the Internet.● Perform structured literature studies on the effects of Internet use and its

consequences for the individual.

v.2021-12-04 5 (17)

https://www.du.se/en/library/academic-writing/


Concerning Values and Attitudes● Based on relevant articles, analyze and discuss the effects of Internet use

and its consequences for the individual.

Scope of the course

The course consists of two interacting parts A and B, respectively.

A. Intro, HTML5 and CSS3

The aim of this part of the course is for you to learn:● Introduction to Internet & WWW

○ Computer hardware, software and Internet basics.○ The evolution of the Internet and the World Wide Web.○ How HTML5, CSS3 and JavaScript are improving web-application

development.○ The data hierarchy.○ Different types of programming languages.○ Object-technology concepts

● HTML5 startup○ Understand important components of HTML5 documents.○ Use HTML5 to create web pages.○ Add images to web pages.○ Create and use hyperlinks to help users navigate web pages.○ Mark up lists of information○ Create tables with rows and columns of data.○ Create and use forms to get user input.

● HTML5 continued○ Build a form using HTML5 input types.○ Specify an input element in a form as the one that should receive the focus

by default.○ Use self-validating input elements.○ Specify temporary placeholder text in various input elements○ Use autocomplete input elements that help users re-enter text that they have

previously entered in a form.○ Use a datalist to specify a list of values that can be entered in an input

element and to autocomplete entries as the user types.○ Use HTML5 page-structure elements to delineate parts of a page, including

headers, sections, figures, articles, footers and more.● Cascading Style Sheets (CSS) Startup

○ Control a website’s appearance with style sheets.

v.2021-12-04 6 (17)


○ Use a style sheet to give all the pages of a website the same look and feel.○ Use the class attribute to apply styles.○ Specify the precise font,size, color and other properties of displayed text.○ Specify element backgrounds and colors.○ Understand the box model and how to control margins, borders and padding.○ Use style sheets to separate presentation from content.

● Cascading Style Sheets (CSS) Continued○ Add text shadows and text-stroke effects.○ Create rounded corners.○ Add shadows to elements.○ Create linear and radial gradients, and reflections.○ Create animations, transitions and transformations.○ Use multiple background images and image borders.○ Create a multicolumn layout.○ Use flexible box model layout and :nth-child selectors.○ Use the @font-face rule to specify fonts for a web page.○ Use RGBA and HSLA colors.○ Use vendor prefixes.○ Use media queries to customize content to fit various screen sizes.

B. JavaScript etc

After you have learned HTML and CSS 3 it is time to head on and learn Javascript!

The aim of this part of the course is for you to learn:● JavaScript Introduction

○ Write simple JavaScript programs.○ Use input and output statements.○ Learn basic memory concepts.○ Use arithmetic operators.○ Learn the precedence of arithmetic operators.○ Write decision-making statements to choose among alternative courses of

action○ Use relational and equality operators to compare data items.

● JavaScript Control Statements I● JavaScript Control Statements II● JavaScript Control Functions● JavaScript Arrays● JavaScript Objects● JavaScript DOM● JavaScript Event Handling

v.2021-12-04 7 (17)


List of useful pedagogical movie clips

The video clips below are collected for you, aiming for quick understanding.Spending 1-2 hours going through the following movie clips is well worth the effort! You areof course free to choose other sources!

100 HTML5 versus HTML4 [3 min]This overview compares HTML5 to HTML4, and discusses HTML5's major improvementshttps://www.youtube.com/watch?v=9MzAzLHmaRsLynda.com

200 How To Validate HTML - Using an HTML Validator [4 min]How to use the web-based HTML validator (at http://validator.w3.org) on your codehttps://youtu.be/wNOVgWYThE8

300 HTML5 Video Tag: Tutorial [10 min]Shows you how to use HTML video tags to add videos to your website.https://youtu.be/Ynuz1UGPoTg

Difference between HTML5 and CSS3? [6 min]This overview explores the differences between HTML5 and CSS3, and discusses theadvantages and disadvantages of CSS3https://www.youtube.com/watch?v=j_pQp3KQulkLynda.com

How and Why To Use External CSS Files [10 min]How and why to use an external CSS file for styling your websites. Remember there arethree types of stylesheets: 1) External CSS (separate CSS files), embedded stylesheets (inthe head of the HTML document), and inline stylesheets (as an attribute of an HTMLelement)https://youtu.be/iBFiLQ-t-VA

JavaScript

JavaScript Tutorial for Beginners: Learn JavaScript in 1 HourIf you want to become a front-end developer, you have to learn JavaScript. It is theprogramming language that every front-end developer must know.https://youtu.be/W6NZfCO5SIk [49 min]Programming with Mosh

v.2021-12-04 8 (17)

https://www.youtube.com/watch?v=9MzAzLHmaRs

http://validator.w3.org

https://youtu.be/wNOVgWYThE8

https://youtu.be/Ynuz1UGPoTg

https://www.youtube.com/watch?v=j_pQp3KQulk

https://youtu.be/iBFiLQ-t-VA

https://youtu.be/W6NZfCO5SIk


JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy forhumans to read and write and it is easy for machines to parse and generate. It is based onJavaScript.

Learn JSON in 10 MinutesJSON is the most popular data representation format, and is one of the most important, andeasiest concepts you can learn in programming. This video covers what JSON is, why JSON isimportant, what JSON is used for, the syntax of JSON, and multiple examples of JSON. JSONallows you to create APIs, config files, and structured data. It covers the terminology, and goesthrough live examples of all the different JSON types.https://youtu.be/iiADhChRriM [12 min]Web Dev Simplified

Assignments

Assignment #1: Intro to computers and the Internet

1. Download: e-Book Deitel, Internet & WWW: How to Program, 5 edition. The e-book is tobe found in the course room.2. Read chapter 1 in [1]3. Solve Self-Review Exercises 1.1 to 1.5 in chapter 1 in [1].4. Solve exercise 1.11 and 1.13,

To submit: Nothing to submit,DEADLINE: See Schedule.

Assignment #2: HTML5 and CSS

1. HTML 5, part 2a. Read chapter 3 in [1].b. Answer the Self-Review Exercises 3.1 to 3.2c. Watch the video clips in HTML5 at List of useful pedagogical movie clipsd. Create HTML5 page containing a video clip of your preferencee. Solve the Exercises 3.8 to 3.11 in [1]

2. Cascading Style Sheets, part 1a. Read chapter 4 in [1].b. Answer Self-Review Exercise 4.1 and 4.2c. Watch the video clips in HTML5 at List of useful pedagogical movie clips

v.2021-12-04 9 (17)

https://youtu.be/iiADhChRriM


d. Solve Exercise 4.3 to 4.9 in [1]

To submit: Nothing to submit.DEADLINE: See Schedule.

Assignment #3: CSS, part 2

Cascading Style Sheets, part 11. Read chapter 5 in [1].2. Answer Self-Review Exercise 5.1 and 5.23. Watch the relevant video clips in HTML5 at List of useful pedagogical movie clips4. Solve Exercise 5.3 to 5.9 in [1]


Assignment #4: JavaScript, Functions and Arrays

JavaScript1. Read chapter 9 Functions and 10 Arrays in [1].2. Answer all Self-Review Exercises in chapter 9 and 103. Solve Exercises 9.15, 9.18, 9.19, 9.25 in [1]4. Solve Exercises: 10.10, 10.12, 10.14 in [1]


Assignment #5: JavaScript, Objects and DOM

JavaScript Objects and the Document Object Model1. Read chapter 11 Functions and 12 Arrays in [1].2. Answer all Self-Review Exercises in chapter 11 and 123. Solve Exercises 11.2, 11.7, 11.10 in [1]4. Solve Exercises: 12.3, 12.5 and 12.6 (Optional: 12.7 to 12.9) in [1]


Assignment #6: JavaScript Event Handling

JavaScript Event Handling1. Read chapter 13 Event Handling in [1].2. Answer all Self-Review Exercises in chapter 133. Solve Exercises 13.3, 13.4 and 13.5 (Optional: 13.6) in [1]

v.2021-12-04 10 (17)



Laboratory Work

Laboratory #1 - HTML5

You will find Laboratory #1 at http://computing.du.se/edu/internet_www/ht2021/assignments/

To submit: Groupwise: Write a Reflection Protocol about this lab. Submit your html fileand the reflection protocol to the student monitor, who will compress all files into one andsend it to the teacher.

DEADLINE: See Schedule

Laboratory #2a - HTML5, part 2

You will find Laboratory #2a athttp://computing.du.se/edu/internet_www/ht2021/assignments/

To submit: Groupwise: Write a Reflection Protocol about this lab. Submit your html file andthe reflection protocol to the student monitor, who will compress all files into one and send itto the teacher.DEADLINE: See Schedule

Laboratory #2b - Apply CSS on a HTML5 page

You will find Laboratory #2a athttp://computing.du.se/edu/internet_www/ht2021/assignments/

To submit: Groupwise: Write a Reflection Protocol about this lab. Submit your html file andthe css file and the reflection protocol to the student monitor, who will compress all files intoone and send it to the teacher.DEADLINE: See Schedule

Laboratory #3 - Stylesheets (CSS), Part 2

You will find Laboratory #3 at http://computing.du.se/edu/internet_www/ht2021/assignments/

v.2021-12-04 11 (17)

http://computing.du.se/edu/internet_www/ht2021/assignments/





To submit: Groupwise: Write a Reflection Protocol about this lab. Submit your html file andthe css file and the reflection protocol to the student monitor, who will compress all files intoone and send it to the teacher.DEADLINE: See Schedule

Written Exam

You need to bring your own computer to the exam.

● Internet & World Wide Web: How to Program, 5th Edition, Deitel and Deitel● All the Power-point slides● All relevant additional literature published on the course website● All video clips which are relevant to what we have covered● All Laboratories published● All Assignments published published

Reflection Protocol

The purpose of a “reflection protocol” is mainly for you to practice independent thinking from ascientific point of view, and via sharing it also gives a possibility to better understand anotherperson’s thinking. This often opens up for a fruitful dialogue and a way to learn!

How to write: Writing a reflection protocol is about writing down your own thoughts andquestions that came up as a result of your reading. It is not a summary, a review, not even toanalyze a text.It is about doing associations, reflections and to interpret a text and relate this to a theme ofsome kind.Maximum 1 page!Some questions which might help you on your way in writing the protocol.

● What went well?● What can be improved?● What do I need to learn more about?● What kind of knowledge and skills did I get?

v.2021-12-04 12 (17)


References

[1] Internet & World Wide Web: How to Program, 5th Edition, Deitel and Deitel

Integrated Development Environment, IDE / Tools

Code Lobster Download http://www.codelobster.com/download.htmlVisual Studio Code - Download: https://code.visualstudio.com/docs/?dv=win

Appendix N How to start using Solo Learn

Solo Learn is self-paced learning path for learning JavaScript

How to start using the website

1. Visit https://www.sololearn.com/learning/1024 (The page should look like inFigure 1: The SoloLearn Javascript webpage)

2. Start the learning path. You will be asked to Register. (It is free)a. Provide: e-mail addressb. When asked to enter your name, then enter: Real Chinese name + Pinyin

name + student number3. Start learning at the Introduction module on https://www.sololearn.com/learning/1024

After you have finished the six modules in the learning path of Solo Learn, then you willbe awarded a certificate!This certificate having your name and student number on it must be submitted to thestudent monitor, who will collect all certificates and send them to the teacher.

v.2021-12-04 13 (17)

http://www.codelobster.com/download.html

https://code.visualstudio.com/docs/?dv=win




Figure 1: The SoloLearn Javascript webpage

13 December is the deadline for submitting the certificate.

v.2021-12-04 14 (17)


How To Play Chase The Dragon DartsChase the Dragon is becoming more popular due to its relatively simple rule set

yet high skill-ceiling.

The catch is you will be focusing mostly on triples. In fact, it is one of the only games that

has such a strong focus on triples, making it the perfect match for more advanced players

looking to advance their game.

Similar to Around the Clock, Chase The Dragon has players attempting to hit a sequential

order of pre-determined targets to best their opponents.

If you are looking for a new and exciting way to improve your triples, let’s learn Chase the

Dragon!

Quick Look At Chase The Dragon Darts

Number of players 1-Unlimited

Numbers in play 10-20, and the Bullseye

Goal Be the first player to hit the trebles of 10 to 20 in order, then bothbulls

v.2021-12-04 15 (17)

https://darthelp.com/games/how-to-play-around-the-clock-darts/


Chase The Dragon Darts Rules

Just like Around the Clock, when you gear up to play a round of Chase the Dragon you can

turn off the part of your brain that worries about all that pesky math. Forget about adding,

multiplying, and subtracting because Chase the Dragon is ALL about pure skill.

And boy, will you have to bring it!

The goal of the game is for each player to hit the trebles of each segment starting on 10 and

ending on 20. Then the outer and inner bull before claiming his or her victory!

Trebles must be hit in a sequential order. For example, a player cannot hit a triple 14 without

having hit a triple 13 first. If by chance, a player manages to hit a target out of sequential

order, that dart is null, and the player must continue with the number they were supposed to

hit.

The main difference between Chase the Dragon and a game of Around the Clock is that

whereas in Around the Clock ONLY the numerical value counts, in Chase the Dragon the

win-condition is intricately tied to hitting the trebles. This means that double and single

scores are not valid.

Each player will have three darts per turn to score the corresponding triple.

If a valid triple is hit on the first or second throws, the player may use his or her leftover darts

to score on the next number in the sequential order.

If a player is unable to hit the corresponding target with any of his or her darts, the turn is

over, and the next player gets their turn.

v.2021-12-04 16 (17)


The Chase is over when a player catches the dragon by hitting all the corresponding trebles

and hitting the inner and outer bull respectively.

How To Score Chase The Dragon Darts

Because a typical game of Catch the Dragon is only played with two players (you can play

with more), it is relatively easy to keep a tidy “score.”

Write down the name of both players on the top of the chalkboard.

Down the sides write down the numeric value of each treble, starting with number 10 and

ending on number 20. Underneath, write down “Outer Bull” and “Bull’s Eye.”

Each time a player scores by hitting the appropriate target, make the corresponding mark

under their name.

Just like in a game of Around The Clock, there is no score per se; what matters here is the

chase and subsequent “catch” of the dragon.

The first player to hit each treble and bull in the sequence is the winner.

v.2021-12-04 17 (17)

Documents

I nte r n et & W W W