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== | ||
<source lang="html4strict"> | |||
<a href="http://www.worm.org/">Worm website</a> | |||
<br/> | |||
<a href="http://tentrotterdam.nl/">tentrotterdam.nl</a> | |||
</source> | |||
* 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. | |||
<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.
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
a
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
