Difference between revisions of "Courses/Design & Technique-Essential Web Design/03"

From Publication Station
Line 1: Line 1:
<slidy theme="a"/>
<slidy theme="a"/>


==Looking at exercise==
=UTF-8 Encoding=
* place it in orange usb-stick :0
Use more than [https://en.wikipedia.org/wiki/ASCII ASCII] characters by telling to the browser your page uses [https://en.wikipedia.org/wiki/UTF-8 UTF-8]  
 
==Encoding==
Represent more than [https://en.wikipedia.org/wiki/ASCII ASCII] characters by telling to the browser your page uses [https://en.wikipedia.org/wiki/UTF-8 UTF-8]  
encoding scheme.
encoding scheme.


Line 14: Line 11:
<html>
<html>
  <head>
  <head>
  <meta charset="UTF-8" />
        <meta charset="UTF-8" />
   </head>
   </head>
</html>
</html>
Line 21: Line 18:
</source>
</source>


 
=Styling your page with CSS=
 
==Styling your page with CSS==


==CSS - Cascading Style Sheets ==  
==CSS - Cascading Style Sheets ==  
HTML is not meant to style (inline syling: <code>style="color:..."</code>) is old fashion and discouraged.
HTML is not meant to style (inline syling: <code>style="color:..."</code> is old fashion and discouraged).


'''CSS is the preferred to way to style.'''
'''CSS is the preferred to way to style.'''
* HTML tell the browser what content it should display
* HTML tell the browser what content it should display
* CSS tells the browser '''how to display''' that content.
* CSS tells the browser '''how to display''' that content.


==css in your html page==
==css inside an HTML page==
* CSS code goes inside the style tags <code><style> ... </style></code>  
* CSS code goes inside the style tags <code><style> ... </style></code>  
* inside the head of the html page.
* <code><style> ... </style></code> tags are placed inside the head of the HTML page.


<source lang="html4strict">
<source lang="html4strict">
Line 58: Line 51:


== anatomy of a css rule ==
== anatomy of a css rule ==
Each CSS style sheet is made of several rules.
Each CSS style sheet (all the styles of a page) is made of several rules.


Each '''rule''' follows the syntax:  
Each '''rule''' follows the syntax:  
   
   
[[File:Basic-Anatomy-of-a-CSS-Rule1.png|600px|]]
[[File:Basic-Anatomy-of-a-CSS-Rule1.png|600px|]]


<small>Source: http://dabrook.org/resources/posters/</small>
<small>Source: http://dabrook.org/resources/posters/</small>


==Example of a CSS rule==
==Example of a CSS rule==
Line 83: Line 76:
Here we are styling all the div elements in the html page.
Here we are styling all the div elements in the html page.


==css properties==


CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
==CSS Properties==
 
'''CSS Property reference''' https://developer.mozilla.org/en-US/docs/Web/CSS/Reference


Some properties.
Some properties.
Line 95: Line 89:
'''Use some of these properties to style your page.'''
'''Use some of these properties to style your page.'''


== a separate CSS file  ==
The CSS for a HTML page (or several pages) can stored outside that page, in '''css file.


To do that we need link the HTML file to the CSS file, using the tag link inside the html head.
= CSS position, display, float =
@andre: study and explain CSS position
https://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/
http://learn.shayhowe.com/html-css/positioning-content/


<link href="style.css" rel="stylesheet" />
== Position ==


<source lang="html4strict">
* absolute
<!DOCTYPE html>
* relative
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
....
</source>


== Display ==
@andre: SEE display property explain in http://dustwell.com/div-span-inline-block.html http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block


== display ==
* none / hidden - turns to '''none''' (hides) the display of the element.
* none - turns off the display of the element.
* inline - horizontal line of elements, but width and hide will be define by its content.
* inline - horizontal line of elements, but width and hide will be define by its content.
* block - vertical stack of elements.
* block - vertical stack of elements.
Line 123: Line 113:




 
=id and class attributes=
==id and class attributes==
Two of the most used attributes in HTML is id and class.  
Two of the most used attributes in HTML is id and class.  


They are important to distinguish and group different elements. And become particularly important in CSS styling.
They are important to distinguish and group different elements. And become particularly important in CSS styling.


Note:
* '''id (#) is used to 'distinguish'' tags'''
* '''class (.)''' is used to ''group'' tags'''
 


==id==
==id==
'''Ids cannot repeat in the same file.'''  
* '''id (#) is used to 'distinguish'' tags'''
* the same id cannot be repeated in the same file. Use only once.
* The symbol for id is: '''<code>#</code>'''


Ids are used to '''distinguish''' tags
<source lang="css">
p {color: black;
  font-weight: bold;
  }
 
p#special{ color: red;
          font-weight: normal;
          transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
}
</source>


The symbol for id is: '''<code>#</code>'''
<source lang="html4strict">
<source lang="html4strict">
<p id="special">I am special paragraph</p>
<p id="special">I am specific paragraph with id="special" </p>
<p>Just another paragraph.</p>
<p>Just another paragraph under the tag p .</p>
<p>More of the same.</p>
<p>Another one of the same tag p, without id.</p>
</source>
</source>


Note: Ids can server as a anchor (link) point within each page.
Only the paragraph with id="special" will be effected by the rule above <code>p#special</code>: red, normal weight, transform. The remaining paragraphs are only affect by the rule <code>p {...}</code>


==css id selector(for a specific element)==
==class==
* '''class (.)''' is used to ''group'' tags'''
* class can be used INFINITE TIMES in a file
* The symbol for class is: <code>.</code>


<code>#</code> is the symbol used to indicate an id.


if I write the rule:
<source lang="css">
<source lang="css">
p#special { transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);}  
p {color: black;
  }
 
.text{ color: black;
          font-weight: italic ;
          background: #003366;
          color: white;
}
</source>
</source>
Only the paragraph with id="special" will be effected by the rule above.
==class==
'''Classes''' can be used INFINITE TIMES in a file. They are used to '''group''' tags.
The symbol for class is: <code>.</code>
<source lang="html4strict">
<source lang="html4strict">
<div class="text">Aa</p>                                                           
<div class="text">This is a div tag</div>                                                           
<span class="text">Bbbbb</p>                                                          
<span class="text">This is a span tag</span>                                                         
<p class="text">Ccccccccccc</p>   
<p class="text">and this is a p tag</p>
<p>Notice how all the above tags with class="text" are styled the same way.</p>
<p>These 2 last tags, on the other hand have NOT class="text", and therefore remain are not affected by the CSS rule</p>
<p>Also notice how 3 different tags can look the same if they share the same class </p>   
</source>
</source>


==css class selector(for a group of elements)==
if I write the rule:
<source lang="css">
.text { background: blue;
        font-size:30pt;
        color: white; }
</source>


no matter what elements do have the class text, they will all be encompassed by this rule.


== Online Resources ==
== Online Resources ==
Line 186: Line 181:


==homework==
==homework==
Cadaver exquisite
Apply CSS to the content of your weblog
* copy one of the minimal paints or narratives from one of your colleagues to your computer of usb-stick
 
* using CSS and HTML transform it into is opposite ( you choose what opposite means to you in this situation)
* Make each entry (past or future) in your weblog will be wrapped inside a div
* save this transformed work and bring it to the class
* Give each entry div an unique id; and a common class. E.g <code><div id="entry01" class="weblog">
....</div></code>*
* Style each entry differently
* ADD content
 
@Andre: clarify .
 


==Next week==
==Next week==
Will be dedicated to CSS for typography; And web-fonts;
Will be dedicated to CSS for typography; And web-fonts;
----
BOOK SCAPES: http://www.julienlevesque.net/books-scapes/index2.html
== a separate CSS file  ==
Move this to next class
The CSS for a HTML page (or several pages) can stored outside that page, in '''css file.
To do that we need link the HTML file to the CSS file, using the tag link inside the html head.
<link href="style.css" rel="stylesheet" />
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
....
</source>

Revision as of 10:54, 6 September 2016

<slidy theme="a"/>

UTF-8 Encoding

Use more than ASCII characters by telling to the browser your page uses UTF-8 encoding scheme.

UTF-8 can represent any character in the Unicode table 

<!DOCTYPE html>
<html>
 <head>
         <meta charset="UTF-8" />
  </head>
</html>
<body></body>
</html>

Styling your page with CSS

CSS - Cascading Style Sheets

HTML is not meant to style (inline syling: style="color:..." is old fashion and discouraged).

CSS is the preferred to way to style.

  • HTML tell the browser what content it should display
  • CSS tells the browser how to display that content.

css inside an HTML page

  • CSS code goes inside the style tags <style> ... </style>
  • <style> ... </style> tags are placed inside the head of the HTML page.
<!DOCTYPE html>
<html>
 <head>
   <style>

     body{
       background: #FF19DC;
       color: black;
       font-family: mono;
      } 

   </style>
</head>
</html>
<body></body>
</html>

anatomy of a css rule

Each CSS style sheet (all the styles of a page) is made of several rules.

Each rule follows the syntax:

Basic-Anatomy-of-a-CSS-Rule1.png

Source: http://dabrook.org/resources/posters/


Example of a CSS rule

  • element: what element(s) is being styled e.g. div
  • property: what property of that element is being styled e.g. color
  • value: how the property is styled e.g. white
div {
      background: blue;
      color: white;
      width: 500px;
      height: 250px;
      font-size:30pt;
   }

Here we are styling all the div elements in the html page.


CSS Properties

CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Some properties.

  • color, background-color, width, height
  • border, box-shadow, list-style
  • margin, padding
  • transform, gradient, border-radius

Use some of these properties to style your page.


CSS position, display, float

@andre: study and explain CSS position

https://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/ http://learn.shayhowe.com/html-css/positioning-content/

Position

  • absolute
  • relative


Display

@andre: SEE display property explain in http://dustwell.com/div-span-inline-block.html http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block
  • none / hidden - turns to none (hides) the display of the element.
  • inline - horizontal line of elements, but width and hide will be define by its content.
  • block - vertical stack of elements.
  • inline-block - horizontal line of elements, but they can have a width and height.

https://developer.mozilla.org/en-US/docs/Web/CSS/display


id and class attributes

Two of the most used attributes in HTML is id and class.

They are important to distinguish and group different elements. And become particularly important in CSS styling.

  • id (#) is used to 'distinguish tags
  • class (.) is used to group tags


id

  • id (#) is used to 'distinguish tags
  • the same id cannot be repeated in the same file. Use only once.
  • The symbol for id is: #
p {color: black;
   font-weight: bold; 
   }

p#special{ color: red;
           font-weight: normal; 
           transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
}

<p id="special">I am specific paragraph with id="special" </p>
<p>Just another paragraph under the tag p .</p>
<p>Another one of the same tag p, without id.</p>

Only the paragraph with id="special" will be effected by the rule above p#special: red, normal weight, transform. The remaining paragraphs are only affect by the rule p {...}

class

  • class (.) is used to group tags
  • class can be used INFINITE TIMES in a file
  • The symbol for class is: .


p {color: black;
   }

.text{ color: black;
           font-weight: italic ; 
           background: #003366;
           color: white;
}

<div class="text">This is a div tag</div>                                                           
<span class="text">This is a span tag</span>                                                          
<p class="text">and this is a p tag</p>
<p>Notice how all the above tags with class="text" are styled the same way.</p>
<p>These 2 last tags, on the other hand have NOT class="text", and therefore remain are not affected by the CSS rule</p>
<p>Also notice how 3 different tags can look the same if they share the same class </p>


Online Resources


homework

Apply CSS to the content of your weblog

  • Make each entry (past or future) in your weblog will be wrapped inside a div
  • Give each entry div an unique id; and a common class. E.g

....*

  • Style each entry differently
  • ADD content
@Andre: clarify .


Next week

Will be dedicated to CSS for typography; And web-fonts;

BOOK SCAPES: http://www.julienlevesque.net/books-scapes/index2.html


a separate CSS file

Move this to next class

The CSS for a HTML page (or several pages) can stored outside that page, in css file.

To do that we need link the HTML file to the CSS file, using the tag link inside the html head. 

<link href="style.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
 <head>
 <link href="style.css" rel="stylesheet" /> 
</head>
<body>
....
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/03&oldid=3524’