Saturday, July 22, 2017

HTML 5 tutorials Part 3 - Bacis of HTML - Lists and Links

In this part we are going to discuss different kind of lists and links.

Lists


Unordered List

unordered list is the bulleted list which is defined using the tags ul and li.

<ul>
<li>1<sup>st</sup></li>
<li>2<sup>nd</sup></li>
</ul>

We can create nested lists with another ul tag within the li tag.
                <ul>
<li>1<sup>st</sup>
<<ul>
<li>1.1</li>
</ul>
</li>
<li>2<sup>nd</sup></li>
</ul>

Ordered List

We can create ordered lists using the <ol> and <li> tags. Define in the same way as unordered list.

Definition List

Definition list are used to have term and put its definition next to it.

<dl>
<dt>HTML</dt>
<dd>Hyper text markup language</dd>
</dl>

Links

Linking is not just the adding links to the other documents on the internet. Link can be link to another document on internet, link to a particular section on the page or link to particular section on some another page.

Link to other docments

Links can be absolute or relative.

Absolute url is the fully qualified name of the resource like http://www.foo.com/foo.html

Relative url is relative to the base url mentioned in the Head tag.

Links within document

We can have a named anchor and can be used using the # symbol to point a anchor to it. We can also link to elements in the page based on their ID.


Exercise: Use the above 2 concepts to create a link to a specific section to a different page.


These are the ways to use the links using the anchor tag. we have other ways to specify the links like area tag.

area tag

Area tag is used to specify a hyperlink with a text and a corresponding area on the image map.  Wonder how different links open up when you click different parts of the images. That is done using the image map.

There are different attributes available to

Target

Target attribute tells the user where the link will be opened or whether the resource is available for download. If the target attribute is not present by default the behavior is navigation. If the client finds the target attribute and as per the specification it should navigate or download the resource. If the download attribute is present it may specify the name of the file on the file system. Different values can be provided in the target attr.

_blank
Opens the link in the new browser tag.
_parent
Opens the link in the parent form.
_self
It will open the navigation link in the current frame.
_top
Opens the link in the top most frame.
framename
Opens the link in the specified frame name.

attributes on link tag

author
This attributes specify the author of the immediate parent article element if there is one present or use the author of the page.
prefetch
Specifies that target resource should be preemptively stored in the cache.
nofollow
Indicates that the current document's original author does not endorse the reference document by the link. This is used while adding links to the external resources which are not in your domain.


Note: Please try them at home.

No comments:

Post a Comment