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

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


==<code><a></code> hyperlinks==
==<code><a></code> anchor tag - hyperlinks==
* anchor tag
<source lang="html4strict">
<a href="http://www.worm.org/">Worm website</a>
<br/>
<a href="http://tentrotterdam.nl/">tentrotterdam.nl</a>
</source>


==local & remote links==
* the href (address) of a link has to be a complete URL: beginning with http or https


==<code><img></code> image==
==remote links==
Normally, like in the example above, you use links to point users to other sites. Those are '''remote links'''


==<code><div></code> ==  
==local links==
Also usually you use '''local links'''.


==<code><span></code>==
Those are links to other files/pages you have create.


==inline style==
They allow to move within your website.


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


==<code><img></code> image tag==
a
==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'''.
[[File:folder_structure.svg]]
==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
== <code><div></code> div tag ==
a
== <code><span></code> span tag==
a
==inline style ==
style it is an attribute
==tags' attributes==
==tags' attributes==
attributes are parameters from the HTML tags  
attributes are parameters from the HTML tags  

Revision as of 17:14, 14 September 2015

<slidy theme="a" />

<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

a


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


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 tag

a

span tag

a

inline style

style it is an attribute

tags' attributes

attributes are parameters from the HTML tags

<a> attributes:

  • href - specifies the url or file of the link
  • target - specifies where to display the linked resource.
<a href="http://wdka.hro.nl/" target="_self">link</a> <!-- target="_self": Loads the response into the SAME tab-->                  
                                                                                                                                    
<a href="http://wdka.hro.nl/" target="_blank">link</a> <!-- target="_blank": Loads the response into a NEW tab-->

<img> attributes:

  • src
  • width
  • height

id and class attributes

inspector

assignment