Coloring links: Difference between revisions

From EdX Copyright Online Course
Jump to navigation Jump to search
[unchecked revision][checked revision]
(initial revision)
 
(updated examples)
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
This wiki supports the <code>rel</code>, <code>rev</code> and <code>class</code> attributes on links.
This wiki supports css <code>style</code> attributes on links.


The syntax is a little unorthodox but is set using the following:
The syntax is a little unorthodox but is set using the following:


==rel attribute==
==style attribute==
To set the rel attribute, place one or more tokens in double-parentheses at the end of the link title. e.g.:
To set the style attribute on a link, enclose the link title within a span with a defined style - in this case specifically, color. e.g.:


<pre><nowiki>
<pre><nowiki>
  [http://cyber.law.harvard.edu/ Berkman((me home))]
[http://cyber.law.harvard.edu/ <span style="color:green;">Berkman</span>]
</nowiki></pre>
</nowiki></pre>


The above would be converted to the following link:
The above would be converted to the following link:


<source lang=html4strict>
<a href="http://cyber.law.harvard.edu/"><span style="color:green;">Berkman</span></a>
  <a href="http://cyber.law.harvard.edu/" rel="me home" class="external">Berkman</a>
</source>
 
==class attribute==
To set the class attribute, the same syntax is used, but tokens which represent classes are prefixed with a dot:


Notice that there are two elements both in front and behind the colored link.
<pre><nowiki>
<pre><nowiki>
  [http://cyber.law.harvard.edu/ Berkman((me .class1 home .class2))]
<span style="color:green;">
</nowiki></pre>
</nowiki></pre>


Becomes:
and
 
<source lang=html4strict>
  <a href="http://cyber.law.harvard.edu/" rel="me home" class="external class1 class2">Berkman</a>
</source>
 
==rev attrribute==
Similar to the class attribute, prefixing with a tilde (~) sets the <code>rev</code> attribute.
 
==removing attributes==
Tokens may be prefixed by a minus sign (-) to indicate that you don't want to ''add'' the token, but ''remove'' it. For example:


<pre><nowiki>
<pre><nowiki>
  [http://cyber.law.harvard.edu/ Berkman((me -.external home))]
</span>
</nowiki></pre>
</nowiki></pre>


Becomes:
These HTML elements that wrap the section to which color needs to be applied. Both parts are necessary as the rendered HTML must be able to tell the browser where the span, and with that the coloring, starts and ends.
 
<source lang=html4strict>
  <a href="http://cyber.law.harvard.edu/" rel="me home">Berkman</a>
</source>


==caveats==
==caveats==
Colorization of links only works on external links for the moment so internal wiki links in the form of:
There are no caveats at the moment.
 
<pre><nowiki>
[[Internal_Page|Link]]
</nowiki></pre>
 
will not work - these will need to be converted to external links in the form of:
 
<pre><nowiki>
[http://hostname.domainname.tld/Internal_Page Link((.class))]
</nowiki></pre>


==examples==
==examples==
<pre><nowiki>
<pre><nowiki>
[http://www.google.com/ This((.link_red))] is a link in red.
[http://www.google.com/ <span style="color:red;">This</span>] is a link in red.
</nowiki></pre>
</nowiki></pre>
* [http://www.google.com/ This((.link_red))] is a link in red.
* [http://www.google.com/ <span style="color:red;">This</span>] is a link in red.
<pre><nowiki>
<pre><nowiki>
[http://www.google.com/ This((.link_green))] is a link in green.
[http://www.google.com/ <span style="color:green;">This</span>] is a link in green.
</nowiki></pre>
</nowiki></pre>
* [http://www.google.com/ This((.link_green))] is a link in green.
* [http://www.google.com/ <span style="color:green;">This</span>] is a link in green.
<pre><nowiki>
<pre><nowiki>
[http://www.google.com/ This((.link_blue))] is a link in blue.
[http://www.google.com/ <span style="color:blue;">This</span>] is a link in blue.
</nowiki></pre>
</nowiki></pre>
* [http://www.google.com/ This((.link_blue))] is a link in blue.
* [http://www.google.com/ <span style="color:blue;">This</span>] is a link in blue.
<pre><nowiki>
<pre><nowiki>
[http://www.google.com/ This((.link_yellow))] is a link in yellow.
[http://www.google.com/ <span style="color:yellow;">This</span>] is a link in yellow.
</nowiki></pre>
</nowiki></pre>
* [http://www.google.com/ This((.link_yellow))] is a link in yellow.
* [http://www.google.com/ <span style="color:yellow;">This</span>] is a link in yellow.




<pre><nowiki>
<pre><nowiki>
[http://cyber.law.harvard.edu/cfl/Main_Page This((.link_green))] is a green link.
[http://cyber.law.harvard.edu/cfl/Main_Page <span style="color:green;">This</span>] is a green link.
</nowiki></pre>
</nowiki></pre>
* [http://cyber.law.harvard.edu/cfl/Main_Page This((.link_green))] is a green link.
* [http://cyber.law.harvard.edu/cfl/Main_Page <span style="color:green;">This</span>] is a green link.

Latest revision as of 23:18, 26 January 2013

This wiki supports css style attributes on links.

The syntax is a little unorthodox but is set using the following:

style attribute

To set the style attribute on a link, enclose the link title within a span with a defined style - in this case specifically, color. e.g.: 

[http://cyber.law.harvard.edu/ <span style="color:green;">Berkman</span>]

The above would be converted to the following link: 

<a href="http://cyber.law.harvard.edu/">Berkman</a>

Notice that there are two elements both in front and behind the colored link. 

<span style="color:green;">

and 

</span>

These HTML elements that wrap the section to which color needs to be applied. Both parts are necessary as the rendered HTML must be able to tell the browser where the span, and with that the coloring, starts and ends.

caveats

There are no caveats at the moment.

examples

[http://www.google.com/ <span style="color:red;">This</span>] is a link in red.
  • This is a link in red.
[http://www.google.com/ <span style="color:green;">This</span>] is a link in green.
  • This is a link in green.
[http://www.google.com/ <span style="color:blue;">This</span>] is a link in blue.
  • This is a link in blue.
[http://www.google.com/ <span style="color:yellow;">This</span>] is a link in yellow.
  • This is a link in yellow.


[http://cyber.law.harvard.edu/cfl/Main_Page <span style="color:green;">This</span>] is a green link.
  • This is a green link.
Retrieved from "http://cyber.harvard.edu/cx/?title=Coloring_links&oldid=3920"