Difference between revisions of "Courses/Design & Technique-Essential Web Design/02"
Line 1: | Line 1: | ||
From website: use animations: http://publicationstation.wdka.hro.nl/go/kickoff/presentation09.html | From website: use animations: http://publicationstation.wdka.hro.nl/go/kickoff/presentation09.html | ||
Line 4: | Line 7: | ||
FROM (previous) Classes 01 | FROM (previous) Classes 01 | ||
INTEGRATE | INTEGRATE | ||
=A Web page= | |||
* What is a web-page made of? | |||
* What files do I save when I save a web-page? | |||
== HTML== | |||
* HTML - the languange | |||
* 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>) | |||
* Text editor - the tool to for designers/developers/programmers tooh write webpages (and programs)tot | |||
tags | |||
Essential HTML page structure | |||
Basic content tags: p, b, i, img ... | |||
hyper-links | |||
== The Browser: the interpreter == | |||
Exercise: create the structure of your weblog and initial content about yourself - who you are, who you want, etc... | |||
Homework: Continue adding contet to your weblog | |||
== Editor, Browser, Go == | == Editor, Browser, Go == | ||
==HTML== | ==HTML== |
Revision as of 16:45, 31 August 2016
From website: use animations: http://publicationstation.wdka.hro.nl/go/kickoff/presentation09.html
FROM (previous) Classes 01
INTEGRATE
A Web page
- What is a web-page made of?
- What files do I save when I save a web-page?
HTML
- HTML - the languange
- Browser - the interpreter of HTML, but also a debug and prototyping space. (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
tags Essential HTML page structure Basic content tags: p, b, i, img ... hyper-links
The Browser: the interpreter
Exercise: create the structure of your weblog and initial content about yourself - who you are, who you want, etc... Homework: Continue adding contet to your weblog
Editor, Browser, Go
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:
<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/>
essential HTML tags
Title Headers: <h1>,<h2>,<h3>,<h4> Paragraph: <p> Line break: <br /> italics: <i> bold: <b> Comments: <!-- comments -->
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.
See HTML Element Reference[2] for a exhaustive list of the HTML tags.
References, Notes and Optional Reading
- ↑ “Introduction to HTML” https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction.
- ↑ Mozilla Foundation. “HTML Element Reference,” n.d. https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
“The Birth of the Web,” http://home.web.cern.ch/topics/birth-web .
Technical Resources
- 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
<a> anchor tag - hyperlinks
<a href="http://www.worm.org/">Worm website</a>
<br/>
<a href="http://tentrotterdam.nl/">tentrotterdam.nl</a>
- 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.
They allow to move within your website.
Go to next <a href="next.html">Next</a> page.
<img>
image tag
<img src="http://data.whicdn.com/images/106829085/large.gif" />
<br/>
<img src="my-img.jpg" />
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.
Local file paths exercise
- Create an HTML file, that uses other local images and links to other local html files.
- Move the HTML file to a different folder.
- Keep images and linked pages in the fold they were it.
- Try to make all the local files are not broken in HTML file
<div> div tag
The div tag is essentially a container of other content.
<div style="background:black; color:red; width:400px">
<h1>Beautiful page</h1>
<p>writing stuff
<i>inside</i>
</p>
</div>
<span> span tag
The span tag is like a color marker on text
<p>A magazine that offers a platform for
<span style="background:red; color:blue; font-size:40px">challenging and engaging</span>
design and art practices</p>
style it is an attribute
tags' attributes
attributes are parameters that most the HTML tags allow
<a> attributes:
<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-->
- href: url or file of the link
- target: where (in what window) to display the linked file.
<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"/>
- 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):
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 My Boyfriend Came Back From the War
- Olia Lialina Agatha Appears
- jodi wwwwwwwww.jodi.org
notes
- did not do id or class in morning.