Website Development Prices

Search Blog

Monday, February 22, 2016

HTML elements - links and formatting text

 There are a certain number of tags for formatting text.

Example:

<p>This is text with <b>bold</b>, <i>italic</i>, <u>underline</u> and <s>strikethrough</s> letters. It also contains a combination of styles, such as <b><i>bold and italic</i></b>. Text within         HTML tags will        ignore the extra space between the words         and new rows     <pre>unless      you use       the tags for  reformatting</pre>.

</p>

Result:



Note: even though the text can be formatted using the above attributes, this mode is not desirable. If you want to define how a text is displayed, you should use CSS rules, rather than using HTML tags. Conclusion: HTML should only define the structure of the text, but not the rules for presentation.

The text you need to format set in <span> tags, and add some CSS class.



Links

Links are the elements that lead to other pages or to other section of the same page. They are Indicated with the <a> tag, and for specifying the destination is used href attribute. When I say section, I mean any element of page that is marked by some identifier.

Example 2: different types of links.

<a href="http://www.marijarikic.com/en/index.html">Link to external web page</a>.<br />
<a href="#S4">Link to section 4 on the same page</a>.<br />

<a href="https://en.wikipedia.org/wiki/Suzuki#2000.E2.80.942009">Link to section on external web page</a>.<br />

<!-- Rest of the code you can find at the end of this article -->

Result:




If you need to open the linked page in a new window, use target = "_ blank" attribute. Its default value is _self and therefore the link opens in the current window.

Example 3:

<a href="http://www.rmbooks.com/book_details.php?isbn_upc=9781927330678" target="_blank">This page will be open in new window</a>.<br /><br />

<!-- Rest of the code you can find below -->

Complete code used in examples.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.