2012 | html & css by jochem
TRANSCRIPT
![Page 1: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/1.jpg)
HTML & CSSThe basics
Tuesday, November 13, 12
![Page 2: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/2.jpg)
purpose of this course
You can only master web-development by doing it a lot
This course enables you to start doing it (a lot)
Learn the language
Walk through the possibilities
Know the (online) references for the future
Tuesday, November 13, 12
![Page 3: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/3.jpg)
end of this week
Tuesday, November 13, 12
![Page 4: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/4.jpg)
planning
Day 1: HTML
Day 2: CSS
Day 3: HTML5 & CSS3
Day 4: jQuery
Day 5: Integrating
Tuesday, November 13, 12
![Page 5: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/5.jpg)
today
Overview web-development
HTML
Tuesday, November 13, 12
![Page 6: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/6.jpg)
OVERVIEW WEB-DEVELOPMENTWhat does it take to build a website
Tuesday, November 13, 12
![Page 7: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/7.jpg)
In essence
Tuesday, November 13, 12
![Page 8: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/8.jpg)
In essence
HTML Content
Tuesday, November 13, 12
![Page 9: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/9.jpg)
In essence
HTML
CSS
Content
Style
Tuesday, November 13, 12
![Page 10: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/10.jpg)
In essence
HTML
CSS
Java-script
Content
Style
Behavior
Tuesday, November 13, 12
![Page 11: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/11.jpg)
In essence
HTML
CSS
Java-script
Content
Style
Behavior
Tuesday, November 13, 12
![Page 12: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/12.jpg)
Front-end & Back-endFrontend
Tuesday, November 13, 12
![Page 13: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/13.jpg)
Front-end & Back-endFrontend Backend
Tuesday, November 13, 12
![Page 14: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/14.jpg)
Front-end & Back-endFrontend
HTML CSS Java-script
Backend
Tuesday, November 13, 12
![Page 15: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/15.jpg)
Front-end & Back-endFrontend
HTML CSS Java-script
Backend
PHP database
generate
Tuesday, November 13, 12
![Page 16: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/16.jpg)
Local & Online
Tuesday, November 13, 12
![Page 17: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/17.jpg)
Local & Online
Local
HTML CSSHarddrive
Java-script
Tuesday, November 13, 12
![Page 18: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/18.jpg)
Local & Online
Local
HTML CSS
Online server
HTML CSSHarddrive Internet
Java-script
Java-script
Tuesday, November 13, 12
![Page 19: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/19.jpg)
Local & Online
Local
HTML CSS
Online server
HTML CSS
PHP database
Harddrive Internet
Java-script
Java-script
Tuesday, November 13, 12
![Page 20: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/20.jpg)
HTMLThe content of your website
Tuesday, November 13, 12
![Page 21: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/21.jpg)
Hyper Text Markup Language
Not a programming language
A markup/communication language
Describes all the different types of the content
“This is a Title”, “This is a Text”, “This is a Link”
Tuesday, November 13, 12
![Page 22: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/22.jpg)
Describing contentContinuing The project continued with the project of previous semester. A start had been made in designing an information sharing system for the faculty. Research question within this semester, a possibility to kickstart usage of the system was explored by means of qualitative research. The researched focussed on finding the relation between consuming information and generation of new question. The global hypothesis was that consuming information will generate new requests. For example, seeing projects in which lasercutting has resulting in nice prototypes, this might generate new requests considering the learning of lasercutting, experts and examples.This principle could then be applied on kickstarting usage of the system by inserting a large amount of
Continuing The project continued with the project of previous semester. A start had been made in designing an information sharing system for the faculty.
Research question within this semester, a possibility to kickstart usage of the system was explored by means of qualitative research.
The research focussed on finding the relation between consuming information and generation of new questions. The global hypothesis was that consuming information will generate new requests. For example, seeing projects in which lasercutting has resulting in
Tuesday, November 13, 12
![Page 23: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/23.jpg)
Why?
Tuesday, November 13, 12
![Page 24: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/24.jpg)
Tags
Tags describe content blocks
Tags come in pairs : open & close
open tag: <tagname>
close tag: </tagname>
There are 107 different tags
Tuesday, November 13, 12
![Page 25: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/25.jpg)
Your first website
Create ‘day1’ folder on your desktop
Open notepad++
Make new file
Place the code on the right
Save as ‘index.html’ in folder ‘day1’
Double click the ‘index.html’ file
Tuesday, November 13, 12
![Page 26: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/26.jpg)
Nesting tags
Tags in tags
A bold word in a paragraph
A paragraph in an article
Tuesday, November 13, 12
![Page 27: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/27.jpg)
Nesting tags
Tuesday, November 13, 12
![Page 28: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/28.jpg)
Writing & formatting HTML
1. Create open & closing tag simultaneously
2. Use indents
Tuesday, November 13, 12
![Page 29: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/29.jpg)
Empty content tags
Tags without content
<br> <img> <input>
Closing within start tag
<br /> <img /> <input />
Tuesday, November 13, 12
![Page 30: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/30.jpg)
Tag recap
Tags describe types of content
Open tag and close tag
<tag>..content..</tag>
Self-closing tags <br /> <img />
Tuesday, November 13, 12
![Page 31: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/31.jpg)
Basic HTML structure
Doctype: which version of HTML
Head: invisible meta information
Body: the actual content
Tuesday, November 13, 12
![Page 32: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/32.jpg)
Doctype
Indicate which version of HTML is used
In the old days: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Now: <!DOCTYPE html>
Tuesday, November 13, 12
![Page 33: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/33.jpg)
The head
Tuesday, November 13, 12
![Page 34: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/34.jpg)
Tags - Headings
h1 to h6
Use h1 only for most important
Tuesday, November 13, 12
![Page 35: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/35.jpg)
Tags - Text
Always nest <b>, <i>, <em> in <p>
Tuesday, November 13, 12
![Page 36: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/36.jpg)
Tags - Containers
descriptive containers
<header>, <section>, <footer>
non-descriptive containers
<div> (block), <span> (text)
Tuesday, November 13, 12
![Page 37: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/37.jpg)
Tags - Lists
Also possible to have a list in a list item
For example a menu with submenu’s
Tuesday, November 13, 12
![Page 38: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/38.jpg)
Exercise 1
Copy HTML structure from extra.lessormore.nl/basics/exercise1.txt
Past in new notepad++ file and save as ‘exercise1.html’ in ‘day1’ folder
Rebuild the website as on extra.lessormore.nl/basics/exercise1.html
Test by opening file in Chrome and refresh after typing
Use extra.lessormore.nl/basics/reference1.txt for help
Raise your hand if finished, take a break after we checked it
Tuesday, November 13, 12
![Page 39: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/39.jpg)
Attributes
Add extra information to tag
In opening tag
name=”value”
Tuesday, November 13, 12
![Page 40: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/40.jpg)
Tags - Images
provide source in ‘src’ attribute
provide alternative text in ‘alt’
“relative” or “absolute” source
relative example src=”images/logo.png”
Tuesday, November 13, 12
![Page 41: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/41.jpg)
Tags - Links
Anchor
Provide link url in attribute ‘href’
Provide text to click in between tags
“relative” or “absolute” href
Tuesday, November 13, 12
![Page 42: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/42.jpg)
Link to other HTML files
Create 2 empty files ‘projectX.html’ & ‘projectY.html’
Copy paste the standard HTML structure in each file
Add the menu on the right to exercise1.html (between header & section)
Tuesday, November 13, 12
![Page 43: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/43.jpg)
Exercise 2
Rebuild extra.lessormore.nl/basics/projectX.html for ‘projectX’ and ‘projectY’
Use for projectX image an absolute url (use online image)
Use for projectY image a relative url (use downloaded image)
Add ‘Read more...’ links in the projects list in ‘exercise1.html’
Tuesday, November 13, 12
![Page 44: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/44.jpg)
CSSStyling your HTML
Tuesday, November 13, 12
![Page 45: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/45.jpg)
Cascading Style Sheets
Define how HTML looks (colors, dimensions, borders, etc)
1 CSS file can be used for multiple HTML files
Tuesday, November 13, 12
![Page 46: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/46.jpg)
Syntax
Tuesday, November 13, 12
![Page 47: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/47.jpg)
ID & CLASS
Tuesday, November 13, 12
![Page 48: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/48.jpg)
Link CSS to HTML
Inline
Internal (in <head></head>) - we don’t use this
External
1.Browser default
2.External
3.Internal
4.Inline
Tuesday, November 13, 12
![Page 49: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/49.jpg)
HTML5The new HTML standard
Tuesday, November 13, 12
![Page 50: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/50.jpg)
New elements (tags)
<header>
<section>
<footer>
<article>
<figure>
<nav>http://www.w3schools.com/html/html5_new_elements.asp
Tuesday, November 13, 12
![Page 51: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/51.jpg)
New inputs
<input type=”color” />
<input type=”date” />
<input type=”email” />
<input type=”number” min=”1” max=”5” />
<input type=”url” />
Tuesday, November 13, 12
![Page 52: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/52.jpg)
data-attribute
<ul data-total=”12”> <li></li> <li></li></ul>
Tuesday, November 13, 12
![Page 53: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/53.jpg)
Media<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
</audio>Tuesday, November 13, 12
![Page 54: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/54.jpg)
Canvas
Draw with javascript
http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/
Tuesday, November 13, 12
![Page 55: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/55.jpg)
Data storage
localStorage
sessionStorage
Tuesday, November 13, 12
![Page 56: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/56.jpg)
CSSAdvanced
Tuesday, November 13, 12
![Page 57: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/57.jpg)
Selecting elements
h1, h1
ul > li
input[type=email]
a:hover
apply rules to multiple elements
only select direct children
select with corresponding attribute
pseudo-classes
Tuesday, November 13, 12
![Page 58: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/58.jpg)
Pseudo classes
:hover
:focus
:blur
:first-child
:nth-child(n)
a:hover{ }
input:focus{ }
input:blur{ }
p:first-child{ }
li:nth-child(2n -1)
Tuesday, November 13, 12
![Page 59: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/59.jpg)
CSS3The latest standard
Tuesday, November 13, 12
![Page 60: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/60.jpg)
Prefixes
-moz-
-webkit-
-o-
-ms-
Tuesday, November 13, 12
![Page 61: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/61.jpg)
Borders
border-radius
box-shadow
Tuesday, November 13, 12
![Page 62: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/62.jpg)
Backgrounds
background-size
Tuesday, November 13, 12
![Page 63: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/63.jpg)
Texts
text-shadow
Tuesday, November 13, 12
![Page 64: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/64.jpg)
@font-face
google fontface generator
Tuesday, November 13, 12
![Page 65: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/65.jpg)
transitions
http://www.w3schools.com/css3/css3_transitions.asp
Tuesday, November 13, 12
![Page 66: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/66.jpg)
JQUERYJavascript Library
Tuesday, November 13, 12
![Page 67: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/67.jpg)
Javascript
HTML & CSS are read and displayed
Javascript is ‘constantly’ running
Javascript can alter HTML & CSS
This can be done at any moment
For example after a ‘click’ or after a certain time
Tuesday, November 13, 12
![Page 68: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/68.jpg)
jQuery
Javascript library
Javascript made easier
Many predefined functions
Tuesday, November 13, 12
![Page 69: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/69.jpg)
Examples
hide()/show() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
fadeIn()/fadeOut() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle
slideUp()/slideDown() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
Animate() http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1
Tuesday, November 13, 12
![Page 70: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/70.jpg)
Selecting
As with CSS, you need to indicate which HTML element you target
Almost exactly the same as with CSS
$(“selector”)
$(“div#intro”)
Tuesday, November 13, 12
![Page 71: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/71.jpg)
Do something
$(“#intro”).hide();
$(“#intro”).fadeIn();
$(“#intro”).slideUp();
Tuesday, November 13, 12
![Page 72: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/72.jpg)
Attach Listener
$(“#intro”).click(function(){ //whatever you want to do});
Tuesday, November 13, 12
![Page 73: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/73.jpg)
Alter HTML
$(“#intro”).html(“<p>hoi</p>”);
$(“#intro”).addClass(“changed”);
Tuesday, November 13, 12
![Page 74: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/74.jpg)
Alter CSS
$(“#intro”).css(‘margin-top’, ‘100px’);
Tuesday, November 13, 12
![Page 75: 2012 | Html & CSS by Jochem](https://reader035.vdocuments.mx/reader035/viewer/2022062513/55574ea0d8b42a63448b4d22/html5/thumbnails/75.jpg)
Plugins
Fancybox http://fancybox.net/
Image Gallery http://slidesjs.com/
Zooming http://zoomy.me/
Tuesday, November 13, 12