Courses/Design & Technique-Essential Web Design/03 - Revision history

Andre: /* homework */

2018-10-10T11:34:13Z

homework

← Older revision		Revision as of 11:34, 10 October 2018
Line 175:		Line 175:



	~~=homework=~~
	~~Apply CSS to the content of your weblog~~

	= Online Resources on CSS =		= Online Resources on CSS =

Andre: /* homework */

2017-09-26T08:39:57Z

homework

← Older revision		Revision as of 08:39, 26 September 2017
Line 178:		Line 178:
	=homework=		=homework=
	Apply CSS to the content of your weblog		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 <code><div id="entry01" class="weblog">
	....</div></code>*
	* Style each entry differently
	* ADD content



	= Online Resources on CSS =		= Online Resources on CSS =

Andre: /* Online Resources on CSS */

2017-09-26T08:38:54Z

Online Resources on CSS

← Older revision		Revision as of 08:38, 26 September 2017
Line 191:		Line 191:
	* Lynda.com CSS-Selectors (Part 1) http://www.lynda.com/CSS-tutorials/CSS-Selectors/192036-2.html?org=hr.nl		* Lynda.com CSS-Selectors (Part 1) http://www.lynda.com/CSS-tutorials/CSS-Selectors/192036-2.html?org=hr.nl
	* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html		* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html
	* http://www.w3.org/Style/Examples/007/center.en.html		* Centering elements with http://www.w3.org/Style/Examples/007/center.en.html



	= Art works, making heavy use of CSS =		= Art works, making heavy use of CSS =
	Florian Cramer ''Local Impro Snodge '' http://cramer.pleintekst.nl/deplayer-impro-snodge/ - essencially gifs and CSS		Florian Cramer ''Local Impro Snodge '' http://cramer.pleintekst.nl/deplayer-impro-snodge/ - essencially gifs and CSS

Wilco: Reverted edits by Justgerrardz (talk) to last revision by Andre

2017-09-14T18:07:37Z

Reverted edits by Justgerrardz (talk) to last revision by Andre

← Older revision		Revision as of 18:07, 14 September 2017
Line 192:		Line 192:
	* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html		* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html
	* http://www.w3.org/Style/Examples/007/center.en.html		* http://www.w3.org/Style/Examples/007/center.en.html
	* [http://www.papdan.com/services/web-design/ Melbourne Web Designer]

Justgerrardz at 04:07, 13 September 2017

2017-09-13T04:07:20Z

← Older revision		Revision as of 04:07, 13 September 2017
Line 192:		Line 192:
	* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html		* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html
	* http://www.w3.org/Style/Examples/007/center.en.html		* http://www.w3.org/Style/Examples/007/center.en.html
			* [http://www.papdan.com/services/web-design/ Melbourne Web Designer]

Andre at 20:17, 6 April 2017

2017-04-06T20:17:03Z

← Older revision		Revision as of 20:17, 6 April 2017
Line 1:		Line 1:
	~~=HTML <nowiki><div></nowiki> and <nowiki>span</nowiki> =~~

	~~== <nowiki><div></nowiki> tag ===~~		=Styling your Web page with CSS=
	~~The div tag is essentially a square container for other content.~~

	~~<source lang="html4strict">~~
	~~<div style="background:black; color:red; width:400px; height: 400px">~~
	~~<h1>Beautiful page</h1>~~
	~~<p>writing stuff~~
	~~<i>inside</i>~~
	~~</p>~~
	~~</div>~~
	~~</source>~~


	'''[https://chrome.google.com/webstore/detail/abstract-browsing/nmkbjeagaobhphiipgigbjhligebkfcg?hl=en-US Abstract Browsing]''' is a Chrome extension by [http://www.newrafael.com/ Rafaël Rozendaal] that transforms web pages into colored divs.


	~~=== <nowiki> span</nowiki> tag ===~~
	~~<source lang="html4strict">~~
	~~<div style="background:black; color:red; width:400px; height: 400px">~~
	~~<h1>Beautiful page</h1>~~
	~~<p>writing stuff~~
	~~<i>inside</i>~~
	~~</p>~~
	~~</div>~~
	~~</source>~~


	~~=HTML UTF-8 Encoding=~~
	~~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 scheme.~~

	~~UTF-8 can represent any character in the [http://unicode-table.com/en/ Unicode table], including emoji, Chinese, Arabic, Greek, etc characters.~~

	~~<source lang="html4strict">~~
	~~<!DOCTYPE html>~~
	~~<html>~~
	~~<head>~~
	~~<meta charset="UTF-8" />~~
	~~<title>😸</title>~~
	~~</head>~~
	~~<body>~~
	~~<h1>😽 s page</h1>~~
	~~</body>~~
	~~</html>~~
	~~</source>~~

	~~-----~~

	=Styling your page with CSS=

	==CSS - Cascading Style Sheets ==		==CSS - Cascading Style Sheets ==

Andre: /* id */

2016-09-13T10:28:02Z

← Older revision		Revision as of 10:28, 13 September 2016
Line 153:		Line 153:

	<source lang="css">		<source lang="css">
	p {color: black;		p { color: black;
	font-weight: bold;		font-weight: bold;
	}		}

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


	<source lang="html4strict">		<source lang="html4strict">

Andre: /* class */

2016-09-13T10:27:21Z

class

← Older revision		Revision as of 10:27, 13 September 2016
Line 178:		Line 178:

	<source lang="css">		<source lang="css">
	p {color: black;		p {
			color: black;
	}		}

	.text{ color: black;		.text{ color: black;
	font-weight: italic ;		font-weight: italic ;
	background: #003366;		background: #003366;
	color: white;		color: white;
	}		}
	</source>
	<source lang="html4strict">		</source>
	<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>		<source lang="html4strict">
	<p>These 2 last tags, on the other hand have NOT class="text", and therefore remain are not affected by the CSS rule</p>		<div class="text">This is a div tag</div>
	<p>Also notice how 3 different tags can look the same if they share the same class </p>		<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>
	</source>		</source>

Line 199:		Line 204:

	-----		-----


	= a separate CSS file =		= a separate CSS file =

Andre: /* Art works, making heavy use of CSS */

2016-09-13T10:17:25Z

Art works, making heavy use of CSS

← Older revision		Revision as of 10:17, 13 September 2016
Line 240:		Line 240:

	= Art works, making heavy use of CSS =		= Art works, making heavy use of CSS =
	~~Nan Wang Eyes~~:		Florian Cramer ''Local Impro Snodge '' http://cramer.pleintekst.nl/deplayer-impro-snodge/ - essencially gifs and CSS

Andre at 16:19, 12 September 2016

2016-09-12T16:19:47Z

← Older revision		Revision as of 16:19, 12 September 2016
Line 1:		Line 1:
	=HTML div and span=		=HTML <nowiki><div></nowiki> and <nowiki>span</nowiki> =

	== <nowiki><div></nowiki> tag ===		== <nowiki><div></nowiki> tag ===
Line 28:		Line 28:


	=UTF-8 Encoding=		=HTML UTF-8 Encoding=
	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]		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 scheme.		encoding scheme.
Line 39:		Line 39:
	<head>		<head>
	<meta charset="UTF-8" />		<meta charset="UTF-8" />
	<title>~~ðŸ˜¹<~~</title>		<title>😸</title>
	</head>		</head>
	~~</html>~~		<body>
	<body>		<h1>😽 s page</h1>
	<h1>~~ðŸ˜¹<~~s page</h1>		</body>
	</body>		</html>
	</html>
	</source>		</source>

Line 53:		Line 52:

	==CSS - Cascading Style Sheets ==		==CSS - Cascading Style Sheets ==
	HTML is not meant to style (inline syling eg: <~~code~~><h1 style="color:red ~~brackground~~:black></~~code~~> is old fashion and discouraged).		HTML is not meant to style (inline syling eg: <pre><h1 style="color:red;background:black></pre> is old fashion and discouraged).

	'''CSS is the preferred to way to style.'''		'''CSS is the preferred to way to style.'''
Line 120:		Line 119:
	* [https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform], gradient, border-radius		* [https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform], gradient, border-radius

	'''Use some of these properties and others that you ~~find out~~ in your page.'''		'''Use some of these properties, and others that you discover in your page.'''


			-----


			=Inspecting a page=
			The browser (Chrome and Firefox) offer the possibility of inspecting a page with the option '''Inspect Element'''.

			This possibility allows for prototyping (changing and seeing immediately the result ) a page's CSS and HTML.

			'''Keep in mind that this changes WILL NOT be saved.
			To do so you need to copy them to the editor and save them.
			'''



			-----


Line 130:		Line 146:
	* '''id (#) is used to 'distinguish'' tags'''		* '''id (#) is used to 'distinguish'' tags'''
	* '''class (.)''' is used to ''group'' tags'''		* '''class (.)''' is used to ''group'' tags'''


	==id==		==id==
Line 182:		Line 197:


	~~== inspector ==~~

			-----


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

Line 205:		Line 220:


	==homework==		=homework=
	Apply CSS to the content of your weblog		Apply CSS to the content of your weblog

Line 215:		Line 230:


	== Online Resources on CSS ==
			= Online Resources on CSS =
	* CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference		* CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
	* Lynda.com CSS-Selectors (Part 1) http://www.lynda.com/CSS-tutorials/CSS-Selectors/192036-2.html?org=hr.nl		* Lynda.com CSS-Selectors (Part 1) http://www.lynda.com/CSS-tutorials/CSS-Selectors/192036-2.html?org=hr.nl
Line 223:		Line 239:


	= ~~Artistic~~ use of CSS=		= Art works, making heavy use of CSS =
	Nan Wang Eyes:		Nan Wang Eyes:

	~~Book Scapes: http://www.julienlevesque.net/books-scapes/index2.html (advanced, maybe to when introduce CSS position )~~



	~~------~~



	~~= CSS position, display, float =~~
	~~@andre: study and explain CSS position in next class~~
	~~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~~