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

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


==HTML element reference is your friend==
==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
https://developer.mozilla.org/en-US/docs/Web/HTML/Element



Revision as of 06:27, 15 September 2015

<slidy theme="a" />

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.

Folder structure.svg


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 directory.
  • 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

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.

Note:

id

Ids cannot repeat in the same file. They are used to distinguish tags

The symbol for id is: #

<div id="square" style="background:black; color:red; width:400px; height:10\
0px"/>

@Andre: show use of id as links points

class

Classes can be used INFINITE TIMES in a file. They are used to group tags.

The symbol for class is: #

<p class="text">A</p>                                                           
<p class="text">B</p>                                                           
<p class="text">C</p>

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