This document provides information on various web development topics such as linking files, paths, CSS, JavaScript, and patterns. It discusses absolute vs relative paths and examples of each. CSS topics covered include linking external style sheets, CSS selectors like ID, class, and element selectors, and CSS specificity. JavaScript topics include linking JavaScript files and writing JavaScript code. Patterns discussed include building navigations from lists. Assignments are provided to create HTML pages with navigation and styling, link a JavaScript file with an alert, read about JSON, and learn about handlebars.js templating.

1. Creative Web 2.

2. Linking to files can be done using
a relativ path or and absolute path

3. An absolute path is…
a path which starts from the domain

4. Examples of absolute paths!
"
http://domain.com/img/image.png"
"
btk-fh.de/css/style.css

5. A relative path is…
a path relative from the current file

6. root
site
imgs
css
← index.html (current file)

7. Linking from…"
index.html to base.css in folder css

8. root
site
imgs
css
index.html
base.css
/css/base.css

9. Linking from…"
index.html to img.png in folder imgs

10. root
site
imgs
css
index.html
img.png
../imgs/img.png!
(../ moves one directory up)

11. CSS

12. Cascading Style Sheets are…"
a language to define the style of
HTML elements

13. Advantages of css…
separating design (css) from logic !
and structure (html). This makes !
the design easily reusable and !
maintainable."

14. Linking external stylesheets!
"
<link rel="stylesheet" href="./libs/css/base.css"
type="text/css" media="screen" charset="utf-8" />"
"
href is the relative or absolute path to the file."
"
media is the media the stylesheet is used for, "
mainly screen and print."

15. In a css file you define a css rule!
"
selector{!
! attribute: value;!
}

16. A selector tells css which element
to apply the styles to.

17. #unique ID-selectors start with a # and select
the element with the id unique."
"
e.g. <div id=“unique”>…"
"
IDs can only be used once per html-page."
"
IDs consist of letters A-Z, numbers and
underscore _ NO spaces, or other special
characters.
ID Selector

18. .reuse class-selectors start with a . and
select all elements with the class reuse."
"
e.g. <div class=“reuse”>…"
"
Classes can be used multiple times per html-
page."
"
Classes consist of letters A-Z, numbers and
minus - NO spaces, or other special
characters
Class Selector

19. div element-selectors name the tag name
and select all elements of the type div."
"
e.g. <div>…"
"
Element-selectors should be used with
caution because they are not very specific.
Element Selector

20. Selector weight (importance)

21. When multiple css rules apply to an element
and change the same property e.g. color the
weight of the selectors defines which one will
win.

22. div{!
! color: red;!
}!
"
.reuse{!
! color: blue;!
}!
"
#unique{!
! color: purple;!
}
<div id=“unique” class=“reuse”>Text</div>"
A class has more weight
than an element-selector
An id has more weight
than a class-selector

23. .font-red{!
! color: red;!
}!
"
.reuse{!
! color: blue;!
}
<div class=“reuse font-red”>Text</div>"
Both class-selector have
the same weight, the last
selector in the css file
wins.

24. .font-red.reuse{!
! color: red;!
}!
"
.reuse{!
! color: blue;!
}
<div class=“reuse font-red”>Text</div>"
Two class-selector have
more weight, than one
selector, so two classes
win.

25. CSS Selectors are read from !
right to left

26. Find all li-elements
Find all of those li-elements inside an element
with a class reuse
Find all of those li-elements inside an element
with a class reuse which are inside the
element with the id unique
#unique .reuse li{!
! color: red;!
}!

27. Optimize css by being specific on the right of
selector."
"
You could add a class .navi to those li-
elements and change the css to
.navi{!
! color: red;!
}!

28. Javascript

29. Linking a javascript files!
"
<script type="text/javascript" src=“./libs/js/
javascript.js“></script>"
"
src is the relative or absolute path to the file."
"
Javascript files should always be linked just "
before the closing tag of the body </body>

30. Javascript
Inside the js file you can write javascript without "
declaring any head, etc. e.g."
"
alert(‘treeeees!’);"
"
This is a function and will create a popup with "
the text treeeees! Which tells you that you "
linked the file correctly.

31. Patterns

32. Navigations are build from lists

33. Typically a navigation is a list of links
<ul>!
! <li><a href=“index.html”>home</a></li>! !
! <li><a href=“about.html”>about</a>!
! ! <ul class=“sub-menu”>!
! ! ! <li><a href=“me.html”>me/a></li>!
! ! ! <li><a href=“cv.html”>CV</a></li>!
! </li>!
</ul>

34. Navigations are build from lists

35. Typically a navigation is a list of links
<ul>!
! <li><a href=“index.html”>home</a></li>! !
! <li><a href=“about.html”>about</a>!
! ! <ul class=“sub-menu”>!
! ! ! <li><a href=“me.html”>me/a></li>!
! ! ! <li><a href=“cv.html”>CV</a></li>!
! </li>!
</ul>

36. Assignments
1. Write 3 html pages with a navi <ul> linking them
together."
• Use the same stylesheet for all three files"
• Add content and style it using css"
• try at lest 5 css3 properties like gradient,
border-radius, transform, etc."
• try to reuse css styles by using multiple classes
per element when it makes sense

37. Assignments
2. Create and link a javascript file with the alert inside,"
so that you see the alert message when you open
the html file in your browser"
"
3. Read this article to get an idea what JSON is
http://de.wikipedia.org/wiki/JavaScript_Object_Notation"
"
4. If you know JS already read up on handlebars.js

38. Lukas Oppermann
lukas@vea.re