75
HTML & CSS The basics Tuesday, November 13, 12

2012 | Html & CSS by Jochem

  • Upload
    educie

  • View
    534

  • Download
    1

Embed Size (px)

Citation preview

Page 1: 2012 | Html & CSS by Jochem

HTML & CSSThe basics

Tuesday, November 13, 12

Page 2: 2012 | Html & CSS by Jochem

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

end of this week

Tuesday, November 13, 12

Page 4: 2012 | Html & CSS by Jochem

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

today

Overview web-development

HTML

Tuesday, November 13, 12

Page 6: 2012 | Html & CSS by Jochem

OVERVIEW WEB-DEVELOPMENTWhat does it take to build a website

Tuesday, November 13, 12

Page 7: 2012 | Html & CSS by Jochem

In essence

Tuesday, November 13, 12

Page 8: 2012 | Html & CSS by Jochem

In essence

HTML Content

Tuesday, November 13, 12

Page 9: 2012 | Html & CSS by Jochem

In essence

HTML

CSS

Content

Style

Tuesday, November 13, 12

Page 10: 2012 | Html & CSS by Jochem

In essence

HTML

CSS

Java-script

Content

Style

Behavior

Tuesday, November 13, 12

Page 11: 2012 | Html & CSS by Jochem

In essence

HTML

CSS

Java-script

Content

Style

Behavior

Tuesday, November 13, 12

Page 12: 2012 | Html & CSS by Jochem

Front-end & Back-endFrontend

Tuesday, November 13, 12

Page 13: 2012 | Html & CSS by Jochem

Front-end & Back-endFrontend Backend

Tuesday, November 13, 12

Page 14: 2012 | Html & CSS by Jochem

Front-end & Back-endFrontend

HTML CSS Java-script

Backend

Tuesday, November 13, 12

Page 15: 2012 | Html & CSS by Jochem

Front-end & Back-endFrontend

HTML CSS Java-script

Backend

PHP database

generate

Tuesday, November 13, 12

Page 16: 2012 | Html & CSS by Jochem

Local & Online

Tuesday, November 13, 12

Page 17: 2012 | Html & CSS by Jochem

Local & Online

Local

HTML CSSHarddrive

Java-script

Tuesday, November 13, 12

Page 18: 2012 | Html & CSS by Jochem

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

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

HTMLThe content of your website

Tuesday, November 13, 12

Page 21: 2012 | Html & CSS by Jochem

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

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

Why?

Tuesday, November 13, 12

Page 24: 2012 | Html & CSS by Jochem

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

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

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

Nesting tags

Tuesday, November 13, 12

Page 28: 2012 | Html & CSS by Jochem

Writing & formatting HTML

1. Create open & closing tag simultaneously

2. Use indents

Tuesday, November 13, 12

Page 29: 2012 | Html & CSS by Jochem

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

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

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

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

The head

Tuesday, November 13, 12

Page 34: 2012 | Html & CSS by Jochem

Tags - Headings

h1 to h6

Use h1 only for most important

Tuesday, November 13, 12

Page 35: 2012 | Html & CSS by Jochem

Tags - Text

Always nest <b>, <i>, <em> in <p>

Tuesday, November 13, 12

Page 36: 2012 | Html & CSS by Jochem

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

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

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

Attributes

Add extra information to tag

In opening tag

name=”value”

Tuesday, November 13, 12

Page 40: 2012 | Html & CSS by Jochem

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

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

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

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

CSSStyling your HTML

Tuesday, November 13, 12

Page 45: 2012 | Html & CSS by Jochem

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

Syntax

Tuesday, November 13, 12

Page 47: 2012 | Html & CSS by Jochem

ID & CLASS

Tuesday, November 13, 12

Page 48: 2012 | Html & CSS by Jochem

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

HTML5The new HTML standard

Tuesday, November 13, 12

Page 50: 2012 | Html & CSS by Jochem

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

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

data-attribute

<ul data-total=”12”> <li></li> <li></li></ul>

Tuesday, November 13, 12

Page 53: 2012 | Html & CSS by Jochem

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 55: 2012 | Html & CSS by Jochem

Data storage

localStorage

sessionStorage

Tuesday, November 13, 12

Page 56: 2012 | Html & CSS by Jochem

CSSAdvanced

Tuesday, November 13, 12

Page 57: 2012 | Html & CSS by Jochem

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

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

CSS3The latest standard

Tuesday, November 13, 12

Page 60: 2012 | Html & CSS by Jochem

Prefixes

-moz-

-webkit-

-o-

-ms-

Tuesday, November 13, 12

Page 61: 2012 | Html & CSS by Jochem

Borders

border-radius

box-shadow

Tuesday, November 13, 12

Page 62: 2012 | Html & CSS by Jochem

Backgrounds

background-size

Tuesday, November 13, 12

Page 63: 2012 | Html & CSS by Jochem

Texts

text-shadow

Tuesday, November 13, 12

Page 64: 2012 | Html & CSS by Jochem

@font-face

google fontface generator

Tuesday, November 13, 12

Page 65: 2012 | Html & CSS by Jochem

transitions

http://www.w3schools.com/css3/css3_transitions.asp

Tuesday, November 13, 12

Page 66: 2012 | Html & CSS by Jochem

JQUERYJavascript Library

Tuesday, November 13, 12

Page 67: 2012 | Html & CSS by Jochem

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

jQuery

Javascript library

Javascript made easier

Many predefined functions

Tuesday, November 13, 12

Page 69: 2012 | Html & CSS by Jochem

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

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

Do something

$(“#intro”).hide();

$(“#intro”).fadeIn();

$(“#intro”).slideUp();

Tuesday, November 13, 12

Page 72: 2012 | Html & CSS by Jochem

Attach Listener

$(“#intro”).click(function(){ //whatever you want to do});

Tuesday, November 13, 12

Page 73: 2012 | Html & CSS by Jochem

Alter HTML

$(“#intro”).html(“<p>hoi</p>”);

$(“#intro”).addClass(“changed”);

Tuesday, November 13, 12

Page 74: 2012 | Html & CSS by Jochem

Alter CSS

$(“#intro”).css(‘margin-top’, ‘100px’);

Tuesday, November 13, 12

Page 75: 2012 | Html & CSS by Jochem

Plugins

Fancybox http://fancybox.net/

Image Gallery http://slidesjs.com/

Zooming http://zoomy.me/

Tuesday, November 13, 12