2012 | Html & CSS by Jochem

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

end of this week

planning

Day 1: HTML

Day 2: CSS

Day 3: HTML5 & CSS3

Day 4: jQuery

Day 5: Integrating

Overview web-development

OVERVIEW WEB-DEVELOPMENTWhat does it take to build a website

In essence

HTML Content

In essence

Content

In essence

Java-script

Content

Behavior

In essence

Java-script

Content

Behavior

Front-end & Back-endFrontend

Front-end & Back-endFrontend Backend

HTML CSS Java-script

Backend

HTML CSS Java-script

Backend

PHP database

generate

Local & Online

HTML CSSHarddrive

Java-script

Local & Online

HTML CSS

Online server

HTML CSSHarddrive Internet

Java-script

Local & Online

HTML CSS

Online server

HTML CSS

PHP database

Harddrive Internet

Java-script

HTMLThe content of your website

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”

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

Tags describe content blocks

Tags come in pairs : open & close

open tag: <tagname>

close tag: </tagname>

There are 107 different tags

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

Nesting tags

Tags in tags

A bold word in a paragraph

A paragraph in an article

Nesting tags

Writing & formatting HTML

1. Create open & closing tag simultaneously

2. Use indents

Empty content tags

Tags without content

Closing within start tag

Tag recap

Tags describe types of content

Open tag and close tag

<tag>..content..</tag>

Self-closing tags <br /> <img />

Basic HTML structure

Doctype: which version of HTML

Head: invisible meta information

Body: the actual content

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>

The head

Tags - Headings

h1 to h6

Use h1 only for most important

Tags - Text

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

Tags - Containers

descriptive containers

non-descriptive containers

<div> (block), <span> (text)

Tags - Lists

Also possible to have a list in a list item

For example a menu with submenu’s

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

Attributes

Add extra information to tag

In opening tag

name=”value”

Tags - Images

provide source in ‘src’ attribute

provide alternative text in ‘alt’

“relative” or “absolute” source

relative example src=”images/logo.png”

Tags - Links

Anchor

Provide link url in attribute ‘href’

Provide text to click in between tags

“relative” or “absolute” href

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)

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’

CSSStyling your HTML

Cascading Style Sheets

Define how HTML looks (colors, dimensions, borders, etc)

1 CSS file can be used for multiple HTML files

Syntax

ID & CLASS

Link CSS to HTML

Inline

Internal (in <head></head>) - we don’t use this

External

1.Browser default

2.External

3.Internal

4.Inline

HTML5The new HTML standard

New elements (tags)

<nav>http://www.w3schools.com/html/html5_new_elements.asp

New inputs

data-attribute

Media<video width="320" height="240" controls="controls">

</video>

</audio>Tuesday, November 13, 12

Canvas

Draw with javascript

http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

Data storage

localStorage

sessionStorage

CSSAdvanced

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

Pseudo classes

:hover

:focus

:first-child

:nth-child(n)

a:hover{ }

input:focus{ }

input:blur{ }

p:first-child{ }

li:nth-child(2n -1)

CSS3The latest standard

Prefixes

-webkit-

Borders

border-radius

box-shadow

Backgrounds

background-size

text-shadow

@font-face

google fontface generator

transitions

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

JQUERYJavascript Library

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

jQuery

Javascript library

Javascript made easier

Many predefined functions

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

Selecting

As with CSS, you need to indicate which HTML element you target

Almost exactly the same as with CSS

$(“selector”)

$(“div#intro”)

Do something

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

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

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

Attach Listener

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

Alter HTML

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

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

Alter CSS

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

Plugins

Fancybox http://fancybox.net/

Image Gallery http://slidesjs.com/

Zooming http://zoomy.me/

2012 | Html & CSS by Jochem

Documents

Supercharged HTML & CSS

Basic HTML/CSS

Introduction to HTML and CSS - Graduate School of … to HTML and CSS RobertRector’’ ... How to Use CSS with HTML" You’can’add’CSS’to’an’HTML’documentin’three’ways:

Basic HTML & CSS

HTML + CSS - ScottyLabs · HTML + CSS ScottyLabs WDW Overview HTML Tags CSS Properties Resources. OVERVIEW What are HTML and CSS? How can I use them? WHAT ARE HTML AND CSS? HTML -

HTML + CSS Examples

HTML SI CSS

HTML, CSS e JavaScript - profscarano.altervista.orgprofscarano.altervista.org/.../2016/08/Dispensa-HTML-CSS-JavaScript.pdf · HTML, CSS e JavaScript - prof.sse Lucia Tattoli e Maria

HTML CSS Cheatsheet

Html and css

HTML e CSS

Html,javascript & css

HTML&CSS Workshop.pptx

HTML & CSS

HTML Css Real

HTML, CSS, And JavaScript Mobile Development for Dummies html css javascript tutorial

Html css basic

Html css-xhtml

HTML, CSS, JavaScript

HTML X CSS