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

From Publication Station
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
FROM (previous) Classes 01


INTEGRATE
=A Web page=
 
* What is a web-page made of?
== Editor, Browser, Go ==
* What files do I save when I save a web-page?
 
* Editor - your HTML writing tool
* Browser - the interpreter of HTML, but also a debug and prototyping space. (Read about what goes on behind the scenes in a Web browser <ref>“Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction.</ref>)
 
==HTML==
* HTML is a markup language
* meaning: content is marked with different "values"; e.g: paragraph, bold, italic, heading title, etc
* marking is done through tags that wrap the content
 
http://publicationstation.wdka.hro.nl/go/kickoff/imgs/html.gif
 
* In order to '''format content with tags''' you need to enter the content between an opening and closing element. As in the following case:
<nowiki><h1>My Title</h1></nowiki>
** <nowiki><h1></nowiki> is the opening tag
** <nowiki></h1></nowiki> is the closing tag
 
* at times you'll find '''self-closing tags''' which have no content inside them, like horizontal rulers '''<code><hr /></code>'''
or line breaks <nowiki><br/></nowiki>


== Tools to make a web page ==
* HTML - the (markup) language
** content is marked with different "values"; e.g: paragraph, bold, italic, heading title, etc
** marking is done through tags that wrap the content
* Browser - the interpreter of HTML, but also a debug and prototyping tool. (Read about what goes on behind the scenes in a Web browser <ref>“Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction.</ref>)
* Text editor - the tool to for designers/developers/programmers tooh write webpages (and programs)tot


== essential HTML tags ==
== essential HTML tags ==
Line 31: Line 18:
italics: <i>
italics: <i>
bold: <b>
bold: <b>
 
hyper-links: <a>
Comments: <!-- comments -->
image: <img />
 
comments: <!-- comments -->
</pre>
</pre>


http://publicationstation.wdka.hro.nl/go/kickoff/imgs/html.gif


== HTML skeleton ==
* In order to '''format content with tags''' you need to '''enter the content between an opening and closing tag'''. As in the following case:
The previous tags only provided content formatting, yet '''to create any working web-page we need to always place the content inside a ''HTML page skeleton'''''.
<nowiki><h1>My Title</h1></nowiki>
 
** <nowiki><h1></nowiki> is the opening tag
[[File:skeleton.svg]]
** <nowiki></h1></nowiki> is the closing tag
 
 


At times you'll find '''self-closing tags''' which '''have no content inside them''', like horizontal rulers <code><hr /></code>
or line breaks <nowiki><br /></nowiki> or <img />




'''Exercise:'''
* create the structure of your weblog and initial content about yourself - who you are, who you want, etc... , using these tags.
* Find a new tag (in the HTML source of another page or using search ) and use it in your weblog


'''Homework:''' Continue adding content (text, imgs, links, divs, etc) to your weblog


See HTML Element Reference<ref>Mozilla Foundation. “HTML Element Reference,” n.d. https://developer.mozilla.org/en-US/docs/Web/HTML/Element.</ref> for a exhaustive list of the HTML tags.
See HTML Element Reference<ref>Mozilla Foundation. “HTML Element Reference,” n.d. https://developer.mozilla.org/en-US/docs/Web/HTML/Element.</ref> for a exhaustive list of the HTML tags.


==References, Notes and Optional Reading ==


<references />


“The Birth of the Web,”  http://home.web.cern.ch/topics/birth-web .
===<nowiki><a></nowiki> anchor tag - hyperlinks===


==Technical Resources ==
'''remote links''': Normally, like in the example above, you use links to point users to other sites. Those are '''remote links'''
* https://developer.mozilla.org/en-US/docs/Web/HTML - HTML (HyperText Markup Language)
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element - HTML element reference
*
*
=== Optional Reading ===
Stephenson, Neal. “Mother Earth Mother Board.” Wired, http://archive.wired.com/wired/archive/4.12/ffglass_pr.html.
 
Abbate, Janet. Inventing the Internet. MIT Press, 2000.
 
“Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
 
 
----
 
 
==HTML element reference==
... is your friend. It gives you information and examples on every HTML element
 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 
==<nowiki><a></nowiki> anchor tag - hyperlinks==
<source lang="html4strict">
<source lang="html4strict">
<a href="http://www.worm.org/">Worm website</a>
<a href="http://www.worm.org/">Worm website</a>
Line 84: Line 53:
</source>
</source>


* the href (address) of a link has to be a complete URL: beginning with http or https  
Note: the href (address) of a link has to be a complete URL: beginning with http or https  
 
==remote links==
Normally, like in the example above, you use links to point users to other sites.
 
Those are '''remote links'''
 
==local links==
Also usually you use '''local links'''.
 
Those are links to other files/pages you have create.


'''local links''': to links to other files/pages you have created, you use '''local links'''.
They allow to move within your website.
They allow to move within your website.


Line 103: Line 63:




==<code><img></code> image tag==
===<code><img></code> attributes:===
<source lang="html4strict">
<source lang="html4strict">
<img src="http://data.whicdn.com/images/106829085/large.gif" />
<img src="http://www.wdka.nl/wp-content/uploads/sites/4/2015/01/Project-Show_I1.jpeg" title="my pic" height="100px" width="200px"/>
<br/>
<br/>
<img src="my-img.jpg" />
<img src="my-img.jpg" />
</source>
</source>
* src: location of the image
* title: title of the image
* width
* height
===Get to know more and more about HTML tags ===
* https://developer.mozilla.org/en-US/docs/Web/HTML - HTML (HyperText Markup Language)
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element - HTML element reference
* “Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction


== HTML skeleton ==
The previous tags only provided content formatting, yet '''to create any working web-page we need to always place the content inside a ''HTML page skeleton'''''.
[[File:skeleton.svg]]


==Local file paths==
==Local file paths==
Line 116: Line 90:
To get an image to load or link to land on the right file, you have to '''indicate the correct path to them'''.
To get an image to load or link to land on the right file, you have to '''indicate the correct path to them'''.


[[File:folder_structure.svg]]
[[File:folder_structure.svg|700px]]
 


==Local file paths exercise==
==Local file paths exercise==
* Create an HTML file, that uses other local images and links to other local html files.
* Add to your weblog local images and links.
* Move the HTML file to a different folder.
* Move the HTML file to a different folder.
* Keep images and linked pages in the fold they were it.
* Avoid broken images links
* Try to make all the local files are '''not broken'''  in HTML file
 
 
=HTML <nowiki><div></nowiki> and <nowiki>span</nowiki> =
 
== <nowiki><div></nowiki> tag ===
The div tag is essentially a square container for other content.


== <nowiki><div></nowiki> div tag ==
The div tag is essentially a container of other content.
<source lang="html4strict">
<source lang="html4strict">
<div style="background:black; color:red; width:400px">                       
<div style="background:black; color:red; width:400px; height: 400px">                       
     <h1>Beautiful page</h1>                                                     
     <h1>Beautiful page</h1>                                                     
     <p>writing stuff                                                             
     <p>writing stuff                                                             
Line 135: Line 111:
</div>  
</div>  
</source>
</source>
== <nowiki><span></nowiki> span tag==
 
The span tag is like a color marker on text
 
'''[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">
<source lang="html4strict">
<p>A magazine that offers a platform for
<div style="background:black; color:red; width:400px; height: 400px">                    
  <span style="background:red; color:blue; font-size:40px">challenging and engaging</span>  
    <h1>Beautiful page</h1>                                                    
design and art practices</p>
    <p>writing stuff                                                           
      <i>inside</i>                                                           
    </p>                                                                       
</div>
</source>
</source>


style it is an attribute


==tags' attributes==
=HTML UTF-8 Encoding=
attributes are parameters that most the HTML tags allow
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.


==<nowiki><a></nowiki> attributes:==
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">
<a href="http://wdka.hro.nl/" target="_self">link</a> <!-- target="_self": Loads the response into the SAME tab-->                 
<br/>                                                                                                                                   
<a href="http://wdka.hro.nl/" target="_blank">link</a> <!-- target="_blank": Loads the response into a NEW tab-->       
</source>
* href: url or file of the link
* target: where (in what window) to display the linked file.


==<code><img></code> attributes:==
<source lang="html4strict">
<source lang="html4strict">
<img src="http://www.wdka.nl/wp-content/uploads/sites/4/2015/01/Project-Show_I1.jpeg" title="my pic" height="100px" width="200px"/>
<!DOCTYPE html>
<html>
<head>
          <meta charset="UTF-8" />
  <title>😸</title>
</head>
<body>
<h1>😽 s page</h1>
</body>
</html>
</source>
</source>
* src: location of the image
* title: title of the image
* width
* height
==inspector==
==assignment #1==
Create a webpage that is a minimalist painting.
===inspiration===
* Kazimir Malevich
* Yves Klein
* Mark Rothko
* Piet Mondrian
* Sol LeWitt
''WORK FROM INSTRUCTIONS (1971):<br/>
USING A BLACK, HARD CRAYON DRAW A TWENTY INCH SQUARE.
DIVIDE THIS SQUARE INTO ONE INCH SQUARES. WITHIN EACH
ONE INCH SQUARE, DRAW NOTHING, OR DRAW A DIAGONAL
STRAIGHT LINE FROM CORNER TO CORNER OR TWO CROSSING
STRAIGHT LINES DIAGONALLY FROM CORNER TO CORNER.''


==assignment #2==
Build a short story using links. At each link the user learns more, or gets more confused, about the story. It can simply be a labyrinth.


===inspiration===
* Hypertext fiction
* Olia Lialina [http://www.teleportacia.org/war/ My Boyfriend Came Back From the War ]
* Olia Lialina [http://www.c3.hu/collection/agatha Agatha Appears]
* jodi [http://wwwwwwwww.jodi.org/ wwwwwwwww.jodi.org]


==notes==
<references/>
* did not do id or class in morning.

Latest revision as of 11:35, 10 October 2018

A Web page

  • What is a web-page made of?
  • What files do I save when I save a web-page?

Tools to make a web page

  • HTML - the (markup) language
    • content is marked with different "values"; e.g: paragraph, bold, italic, heading title, etc
    • marking is done through tags that wrap the content
  • Browser - the interpreter of HTML, but also a debug and prototyping tool. (Read about what goes on behind the scenes in a Web browser [1])
  • Text editor - the tool to for designers/developers/programmers tooh write webpages (and programs)tot

essential HTML tags

Title Headers: <h1>,<h2>,<h3>,<h4>
Paragraph: <p>
Line break: <br />
italics: <i>
bold: <b>
hyper-links: <a>
image: <img />
comments: <!-- comments -->

http://publicationstation.wdka.hro.nl/go/kickoff/imgs/html.gif

  • In order to format content with tags you need to enter the content between an opening and closing tag. As in the following case:

<h1>My Title</h1>

    • <h1> is the opening tag
    • </h1> is the closing tag

At times you'll find self-closing tags which have no content inside them, like horizontal rulers


or line breaks <br /> or <img />


Exercise:

  • create the structure of your weblog and initial content about yourself - who you are, who you want, etc... , using these tags.
  • Find a new tag (in the HTML source of another page or using search ) and use it in your weblog

Homework: Continue adding content (text, imgs, links, divs, etc) to your weblog

See HTML Element Reference[2] for a exhaustive list of the HTML tags.


<a> anchor tag - hyperlinks

remote links: Normally, like in the example above, you use links to point users to other sites. Those are remote links

<a href="http://www.worm.org/">Worm website</a>
<br/>
<a href="http://tentrotterdam.nl/">tentrotterdam.nl</a>

Note: the href (address) of a link has to be a complete URL: beginning with http or https

local links: to links to other files/pages you have created, you use local links. They allow to move within your website.

Go to next <a href="next.html">Next</a> page.


<img> attributes:

<img src="http://www.wdka.nl/wp-content/uploads/sites/4/2015/01/Project-Show_I1.jpeg" title="my pic" height="100px" width="200px"/>
<br/>
<img src="my-img.jpg" />
  • src: location of the image
  • title: title of the image
  • width
  • height

Get to know more and more about HTML tags


HTML skeleton

The previous tags only provided content formatting, yet to create any working web-page we need to always place the content inside a HTML page skeleton.

Skeleton.svg

Local file paths

Local links and image are some times in parent or child folders, different from the folder of your webpage.

To get an image to load or link to land on the right file, you have to indicate the correct path to them.

Folder structure.svg

Local file paths exercise

  • Add to your weblog local images and links.
  • Move the HTML file to a different folder.
  • Avoid broken images links


HTML <div> and span

<div> tag =

The div tag is essentially a square container for other content.

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


Abstract Browsing is a Chrome extension by Rafaël Rozendaal that transforms web pages into colored divs.


span tag

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


HTML 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, including emoji, Chinese, Arabic, Greek, etc characters.

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


  1. “Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction.
  2. Mozilla Foundation. “HTML Element Reference,” n.d. https://developer.mozilla.org/en-US/docs/Web/HTML/Element.