Upload
educie
View
534
Download
1
Tags:
Embed Size (px)
Citation preview
HTML & CSSThe basics
Tuesday, November 13, 12
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
end of this week
Tuesday, November 13, 12
planning
Day 1: HTML
Day 2: CSS
Day 3: HTML5 & CSS3
Day 4: jQuery
Day 5: Integrating
Tuesday, November 13, 12
today
Overview web-development
HTML
Tuesday, November 13, 12
OVERVIEW WEB-DEVELOPMENTWhat does it take to build a website
Tuesday, November 13, 12
In essence
Tuesday, November 13, 12
In essence
HTML Content
Tuesday, November 13, 12
In essence
HTML
CSS
Content
Style
Tuesday, November 13, 12
In essence
HTML
CSS
Java-script
Content
Style
Behavior
Tuesday, November 13, 12
In essence
HTML
CSS
Java-script
Content
Style
Behavior
Tuesday, November 13, 12
Front-end & Back-endFrontend
Tuesday, November 13, 12
Front-end & Back-endFrontend Backend
Tuesday, November 13, 12
Front-end & Back-endFrontend
HTML CSS Java-script
Backend
Tuesday, November 13, 12
Front-end & Back-endFrontend
HTML CSS Java-script
Backend
PHP database
generate
Tuesday, November 13, 12
Local & Online
Tuesday, November 13, 12
Local & Online
Local
HTML CSSHarddrive
Java-script
Tuesday, November 13, 12
Local & Online
Local
HTML CSS
Online server
HTML CSSHarddrive Internet
Java-script
Java-script
Tuesday, November 13, 12
Local & Online
Local
HTML CSS
Online server
HTML CSS
PHP database
Harddrive Internet
Java-script
Java-script
Tuesday, November 13, 12
HTMLThe content of your website
Tuesday, November 13, 12
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
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
Why?
Tuesday, November 13, 12
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
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
Nesting tags
Tags in tags
A bold word in a paragraph
A paragraph in an article
Tuesday, November 13, 12
Nesting tags
Tuesday, November 13, 12
Writing & formatting HTML
1. Create open & closing tag simultaneously
2. Use indents
Tuesday, November 13, 12
Empty content tags
Tags without content
<br> <img> <input>
Closing within start tag
<br /> <img /> <input />
Tuesday, November 13, 12
Tag recap
Tags describe types of content
Open tag and close tag
<tag>..content..</tag>
Self-closing tags <br /> <img />
Tuesday, November 13, 12
Basic HTML structure
Doctype: which version of HTML
Head: invisible meta information
Body: the actual content
Tuesday, November 13, 12
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
The head
Tuesday, November 13, 12
Tags - Headings
h1 to h6
Use h1 only for most important
Tuesday, November 13, 12
Tags - Text
Always nest <b>, <i>, <em> in <p>
Tuesday, November 13, 12
Tags - Containers
descriptive containers
<header>, <section>, <footer>
non-descriptive containers
<div> (block), <span> (text)
Tuesday, November 13, 12
Tags - Lists
Also possible to have a list in a list item
For example a menu with submenu’s
Tuesday, November 13, 12
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
Attributes
Add extra information to tag
In opening tag
name=”value”
Tuesday, November 13, 12
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
Tags - Links
Anchor
Provide link url in attribute ‘href’
Provide text to click in between tags
“relative” or “absolute” href
Tuesday, November 13, 12
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
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
CSSStyling your HTML
Tuesday, November 13, 12
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
Syntax
Tuesday, November 13, 12
ID & CLASS
Tuesday, November 13, 12
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
HTML5The new HTML standard
Tuesday, November 13, 12
New elements (tags)
<header>
<section>
<footer>
<article>
<figure>
<nav>http://www.w3schools.com/html/html5_new_elements.asp
Tuesday, November 13, 12
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
data-attribute
<ul data-total=”12”> <li></li> <li></li></ul>
Tuesday, November 13, 12
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
Canvas
Draw with javascript
http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/
Tuesday, November 13, 12
Data storage
localStorage
sessionStorage
Tuesday, November 13, 12
CSSAdvanced
Tuesday, November 13, 12
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
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
CSS3The latest standard
Tuesday, November 13, 12
Prefixes
-moz-
-webkit-
-o-
-ms-
Tuesday, November 13, 12
Borders
border-radius
box-shadow
Tuesday, November 13, 12
Backgrounds
background-size
Tuesday, November 13, 12
Texts
text-shadow
Tuesday, November 13, 12
@font-face
google fontface generator
Tuesday, November 13, 12
transitions
http://www.w3schools.com/css3/css3_transitions.asp
Tuesday, November 13, 12
JQUERYJavascript Library
Tuesday, November 13, 12
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
jQuery
Javascript library
Javascript made easier
Many predefined functions
Tuesday, November 13, 12
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
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
Do something
$(“#intro”).hide();
$(“#intro”).fadeIn();
$(“#intro”).slideUp();
Tuesday, November 13, 12
Attach Listener
$(“#intro”).click(function(){ //whatever you want to do});
Tuesday, November 13, 12
Alter HTML
$(“#intro”).html(“<p>hoi</p>”);
$(“#intro”).addClass(“changed”);
Tuesday, November 13, 12
Alter CSS
$(“#intro”).css(‘margin-top’, ‘100px’);
Tuesday, November 13, 12
Plugins
Fancybox http://fancybox.net/
Image Gallery http://slidesjs.com/
Zooming http://zoomy.me/
Tuesday, November 13, 12