creative web 02 - html & css basics

56
#Creative Web HTML & CSS

Upload: lukas-oppermann

Post on 26-Jun-2015

169 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Creative Web 02 - HTML & CSS Basics

#Creative WebHTML & CSS

Page 2: Creative Web 02 - HTML & CSS Basics

#HTMLStructure & content

Page 3: Creative Web 02 - HTML & CSS Basics

Sir Tim Berners-LeeInvents the Internet of today 1989

Page 4: Creative Web 02 - HTML & CSS Basics

#HTML

<!DOCTYPE html> <html> <head> </head> <body> !

</body> </html>

declares an html 5 document

wraps all html

holds meta-data, css & the title

holds all visible elements, that define structure and content.

Page 5: Creative Web 02 - HTML & CSS Basics

#HTML - documentsAn html document always has the file extension .html and should be saved as an UTF-8 document. Whitespace between tags is mostly ignored. !<!DOCTYPE html> defines the document as an html 5 document. MUST be the first element and on line 1. !<html> wraps everything after doctype, has no real usage. !<head> holds meta tags, css files and the title tag. !<body> holds all the content that will be displayed in the browser.

Page 6: Creative Web 02 - HTML & CSS Basics

#Head

<head> <meta charset="utf-8"> <meta name="description" content="…"> <meta name="robots" content="index,follow"> <title>Your Name | Photography…<title/> </head>

Place meta tags, css files and the title (important for seo) here.

Page 7: Creative Web 02 - HTML & CSS Basics

#HTML - <head>The <head> element holds general info (metadata) about the html document. This mainly including the title, meta-tags and linked style sheets files. !charset declares the character encoding (utf-8 enables characters like ä,ö or ß). Short syntax is widely supported. Should be the first tag in the head. !description ca. 150 chars, describe page content, may be used by search engines to display as result text. !robots tells search engines how to index your page !title ca. 60 chars, different for every page, descriptive, including key words for the given page

Page 8: Creative Web 02 - HTML & CSS Basics

#Body

<body> <div> <img src=“media/bear.png” alt=“…”> <ul> <li>list item</li> </ul> </div> </body>

Holds all the content that will be displayed in the browser.

Page 9: Creative Web 02 - HTML & CSS Basics

#HTML - <body>The <body> element holds all the content that will be displayed in the browser. !Elements are defined by a compulsory opening and closing tag <div>…</div>. !Void elements like <img> do not have a closing tag. Those are very rare. !Child elements like the <li> need to be within a defined parent element, for li this is a <ul>, <ol> or <dl>.

Page 10: Creative Web 02 - HTML & CSS Basics

#StyleEnforce a good coding style to make it easy to maintain your HTML.

1 TAB indentation per nesting level

new elements are placed on new line

<div> <img src=“media/bear.png” alt=“…”> <ul> <li>list item</li> </ul> </div>

Page 11: Creative Web 02 - HTML & CSS Basics

#HTML coding styleThis coding style makes it easy to maintain your html. !Use only lowercase for everything (tags, attributes, classes,…). Only copy text may use mixed or upper case. !Indentation use 1 TAB as indentation per nesting level. !Elements on new line every block, list, or table element should be on a new line with indentation per level. !Use <p> for paragraphs, never use <br>.

Page 12: Creative Web 02 - HTML & CSS Basics

#CSSStyling the web.

Page 13: Creative Web 02 - HTML & CSS Basics

Håkon Wium Lie*1965 Norway / Opera

Page 14: Creative Web 02 - HTML & CSS Basics

#CSS

CSS (Cascading Style Sheets) is a styling language used to define the formatting & looks of a document written in a markup language (e.g. HTML).

Cascading means that a style with a lower specificity is replaced by a style with a higher specificity.

!

Developed by Håkon Wium Lie and Bert Bos 1994-96

Current Version CSS 3 (not fully implemented)

Page 15: Creative Web 02 - HTML & CSS Basics

#CascadingA more specific style overwrites a less specific one.

Page 16: Creative Web 02 - HTML & CSS Basics

#Cascading

CSS employes a Cascading method to deal with multiple competing styles for one element.

This means CSS starts from the most generic set of style-rules and overwrites rules that are different in more specific rule-sets.

!

If a generic rule says “all text is red” and another rule says “the first headline is blue”, the first headline will be blue, because it is more specific.

Page 17: Creative Web 02 - HTML & CSS Basics

The level of detail with which something is described.

a circle (generic)

a red circle (specific)

#Specificity

Page 18: Creative Web 02 - HTML & CSS Basics

#CSS SpecificySpecificy: The more detailed you specify an element, the higher its specificy. You should however aim for a good code structure, so that you do not need to be very specific.If you need to be very specific, you are likely to overwrite much code, which makes your CSS hard to maintain.

Page 19: Creative Web 02 - HTML & CSS Basics

#SelectorsAn HTML-Element is selected by using Classes, IDs, etc.

.logo #navi img

<div class=“logo”…> <ul id=“navi”…> <img …>

Page 20: Creative Web 02 - HTML & CSS Basics

#CSS SelectorsSpecificy: element selectors (e.g. img) are less specific than classes which are less specific than IDs.

!

Elements can be used with different classes.

Classes can be used multiple times.

IDs may only be used once per document.

!

You should always use classes and never IDs or element selectors, if you do not have a really good reason for it. This will help in preventingspecificity-problems.

Page 21: Creative Web 02 - HTML & CSS Basics

#Multi-element selectorsYou can specify a selector with multiple selector-elements.

.navigation.main-navi {…}

<ul class=“navigation main-navi”>…</ul>

no space!

space, but not . (dot)

Page 22: Creative Web 02 - HTML & CSS Basics

#Hierarchical selectorsYou can specify an element within another element.

.navigation .main-navi {…}

<div class=“navigation”> <ul class=“main-navi”>…</ul> </div>

1 space!

ul is placed within div

Page 23: Creative Web 02 - HTML & CSS Basics

#Advanced CSS SelectorsMulti-element selectors: an element can be selected by using multiple selectors which are present on this one element (e.g. ID + class, multiple classes, etc.) this makes the selector more specific. You should try to only do this if really necessary.

.class-one.class-two{…}

#elementid.class-two{…}

Hierarchical selectors: an element can be selected in relation to its parents. For e.g. you can select an element with a class .child within an element .parent.

.parent .child{…}

Page 24: Creative Web 02 - HTML & CSS Basics

#What is a ruleA CSS-file has a very flat hierarchy, only selectors & rules

selector { attribute: value; /* <- rule */}

Page 25: Creative Web 02 - HTML & CSS Basics

#A rule setA set of rules are grouped under a selector to which those rules apply.

.navigation-item { color: black; font-size: 16px;}

Page 26: Creative Web 02 - HTML & CSS Basics

#CSS RulesCSS is a very simple language with only one level of hierarchy*: Rules belong to selectors.

SELECTOR

→ Rule

You can group multiple rules to a selector, but if you assign an attribute like color, twice, only the last rule will be used.Keep selectors as short and low in specificity as possible.

* some exceptions like media queries or keyframe animations

Page 27: Creative Web 02 - HTML & CSS Basics

#StyleEnforce a good coding style to make it easy to maintain your CSS.

1 TAB indentation 1 rule per line

selector and closing { on new line

selector { attribute: value; attribute: value;}

1 space after attribute:

Page 28: Creative Web 02 - HTML & CSS Basics

#StructureGroup rules by elements, sections & pages.

/*#################*/ /* HOMEPAGE */.banner-image { … } .banner-button { … } .banner-headline { … } .intro-copy { … } .intro-link { … }

Page 29: Creative Web 02 - HTML & CSS Basics

#Don’tsWhat not to do within CSS.

Page 30: Creative Web 02 - HTML & CSS Basics

#Never use mixed case Do: Name everything with lowercase latin (a-z) characters & dash “-”.

.logo

.user-picture

.wide-section-banner

Page 31: Creative Web 02 - HTML & CSS Basics

#Never use !important If you need to use !important, refactor your code instead. !

!important marks a rule as more important to overwrite other rules. This can lead to maintenance problems.

Page 32: Creative Web 02 - HTML & CSS Basics

<p style=“color:red”>…</p>

#Never use inline-styles Do: Use classes and external CSS-files.

Page 33: Creative Web 02 - HTML & CSS Basics

img{ …}

#Don’t use element selectors Only use element selectors when you know you can not use a class (mostly in resets).

Page 34: Creative Web 02 - HTML & CSS Basics

#logo{ …}

#Never use IDsDo: Always use classes instead of IDs.

Page 35: Creative Web 02 - HTML & CSS Basics

#Do’sWhat to do within CSS.

Page 36: Creative Web 02 - HTML & CSS Basics

#Functional class names Name classes by their functions, NOT their appearance.This way class names remain good, even if their appearance changes.

.portfolio-thumb

.article-preview

.red-h1

Page 37: Creative Web 02 - HTML & CSS Basics

#Reusable classesCreate classes you can reuse, like a class .button for all buttons. Add classes to buttons to change specific attributes.

.button{…}

.button– –blue{ background: blue; }

<div class=“button button- -blue”>…

Page 38: Creative Web 02 - HTML & CSS Basics

#Use descriptive class namesAlways use your class names as a way of describing what a it does.

.action-button{…}

.annotation{…}

.red-headline

Page 39: Creative Web 02 - HTML & CSS Basics

#loading CSSHow to include a CSS-File?

Page 40: Creative Web 02 - HTML & CSS Basics

#Linking a CSS-file

A CSS-file is linked within the head of your HTML-document using the link-tag.

<link href="style.css" rel="stylesheet" media="screen">

<head>

</head>

Page 41: Creative Web 02 - HTML & CSS Basics

#Linking CSS-filesYou include a CSS-File into your HTML-page by linking it in the <head> of the document using the <link>-tag. !The following 4 attributes need to be set on the <link>-tag !href path to file (e.g. ./css/style.css) !rel always stylesheet !media is optional only use it if you need to define a separate print style sheet, or target different devices with it.

Page 42: Creative Web 02 - HTML & CSS Basics

#PathAbsolute vs. relative

Page 43: Creative Web 02 - HTML & CSS Basics

Absolute: My keys are in my car in Berlin. !

Relative to my car:My keys are in my car.

#Absolute vs. relative

Page 44: Creative Web 02 - HTML & CSS Basics

#Absolute pathAn absolute path stays the same no matter from where you use it. It always starts from your server. !

http://www.google.com

http://code.jquery.com/jquery-2.1.1.min.js

Page 45: Creative Web 02 - HTML & CSS Basics

#Relative path

A path which is relative to the file it is used in. !

layout/icons.svg subfolder in current folder ./js/jquery.js !../css/style.css subfolder in parent folder !/images/cat.jpg subfolder in root

Page 46: Creative Web 02 - HTML & CSS Basics

#PathsGenerally you only want to use relative paths, because this way you can move your website and it keeps working.

css/style.css from current files directory go into subfolder css/ and find style.css

../css/style.css from current files directory go into parent folder, now go into subfolder css/ and find style.css

/css/style.css go into root directory, from there into subfolder css/ and find style.css (you normally do not use this).

Page 47: Creative Web 02 - HTML & CSS Basics

#QuizAbsolute or relative

Page 48: Creative Web 02 - HTML & CSS Basics

http://tiny.cc/cw-path

Page 49: Creative Web 02 - HTML & CSS Basics

images/bears/polarbear.jpg

Page 50: Creative Web 02 - HTML & CSS Basics

cdn.jquery.com/jquery.js

Page 51: Creative Web 02 - HTML & CSS Basics

./layout/logo.png

Page 52: Creative Web 02 - HTML & CSS Basics

mediawiki.com/imgs/tiger.jpg

Page 53: Creative Web 02 - HTML & CSS Basics

../icons/icons.svg

Page 54: Creative Web 02 - HTML & CSS Basics

/Users/lukas/web/logo.jpg

Never ever use this!

Page 56: Creative Web 02 - HTML & CSS Basics

#Homeworkhttp://tiny.cc/cw-css

http://tiny.cc/cw-path