Fonts & Lists in HTML

HTML also contains tags for changing the attributes of our texts such as font and color.

Headers -There is an element called <Hx> that we can use in HTML to define the parts of the text that we want to consider as headers (sections, chapters, etc.). This tag assigns one larger text size (based on x, as we will see), makes it bolder as well as decides to start a paragraph after this header.

The header size can vary from 1 to 6 and we have 6 possible tags: H1, H2, H3, H4, H5 and H6.

Font- In HTML the FONT tag is used to give the text different styles, colors and effects which makes it look more enjoyable when displayed on our website. In HTML 4.01 this tag is not used and its function is replaced using CSS which will we study inwards.

Font styles HTML- offers a range of tags that can be used to set styles various text located within these tags. Some of them are:

B (bold).

I (italics).

U (underlined).

STRIKE (strikethrough).

SUP (superscript).

SUB (subscript).

BLINK TT (teletype).

BIG (big).

SMALL (small).

In HTML, we can place text in several styles at the same time as it can be bold and italic as follows:

<B> <I> Text with two different styles. </I> </B>

The following is an example illustrating the use of styles in above.

<HEAD> <TITLE> Title of the document </TITLE>

</ HEAD>


<h1> Header H1 </h1>

<h2> Header H2 </h2>

<h3> Header H3 </h3>

<h4> Header H4 </h4>

<h5> Header H5 </h5>

<h6> Header H6 </h6>

<b> Font size </b>

<BR> <font SIZE = 1> 1 </font>

<font SIZE = 2> 2 </font> <font SIZE = 3> 3 </font>

<font SIZE = 4> 4 </font>

<font SIZE = 5> 5 </font>

<font SIZE = 6> 6 </font>

<font SIZE = 7> 7 </font>

<font SIZE = 6> 6 </font>

<font SIZE = 5> 5 </font>

<font SIZE = 4> 4 </font>

<font SIZE = 3> 3 </font>

<font SIZE = 2> 2 </font>

<font SIZE = 1> 1 </font>

<P> <B> Colors </b>

<font COLOR = # 800000> C </font> <font COLOR = # 000080> O </font>

<font COLOR = # 000080> L </font> <font COLOR = # 008000> O </font>

<font COLOR = # 00FFFF> R </font> <font COLOR = # FF0000> E </font>

<font COLOR = # C0C0C0> S </font>. <font COLOR = # 800080> D </font>

<font COLOR = # 008080> E </font>. <font COLOR = # FF0000> L </font>

<font COLOR = # 808080> E </font> <font COLOR = # FF00FF> T </font>

<font COLOR = # 00FF00> R </font> <font COLOR = # 808000> A </font>

<font COLOR = # FFFF00> S </font>

<P> <b> Bold </b> <br> <i> Italics </i> <br>

<U> Underlined </ u>

<Strike> Strikethrough </ strike>

<br> A <sup> Superscript </sup>

<br> B <sub> Subscript </sub>

<Blidhëz> Blidhëzing </ blidhëz>

<br> <tt> Typewriter (Teletype) </tt>


<big> Big text </big>

<br> <small> Small text </small>



One of the key features of the Web, which has made it even more successful, is the link between documents which are located on different servers. The connection can be made with images, audio, video as well as other web pages. Connections can be created using the A and tag its attributes NAME, ‘A HREF’, TARGET. If the link makes the page link to another page, where the latter is part of the same site then the link is known as internal link. If the link you link to a new page, but to another site then the link is known as an external link. It can also

we create a link that takes us to another part of the same page. A link is specified by of the <a> tag. Anything written between the open <a> tag and the closing tag </a> will be part of the connector which after being clicked by the user will go to the new page.

Links to a new WEB page – To link a page to another page you need to open the tag<a> contain the ‘href’ attribute and the attribute value is the name of the file you need to pass.

An example might be:


<p> Go back to <a href= <example1.html>> First Example </a> </p>

</ Body>

Both files (hidden1.html and example2.html) need to be found in the same

folder. When we click on the link Link that I created the example page will open1.html in it same window.

If we want to go to a new page of another site we will again use the <a> element and the href attribute but this time we need to set the full page URL as the value of the href attribute. where we want to go.

Such as: <body> <p> Do you want to visit <a href= <

se </a>? </p> </body>

When creating links, keep in mind to use words that define as much as possible concise site where you will be directed. On the other hand to help the user visually it is advisable to color the links in order to make them more visible among other words site content. Many web designers use images within the <a> element. In case that you use the figures it should be a good explanation of the page to which it directs you. within the <a> element can also be used with the title attribute and its value will be the explanation you want to appears in the case that we approach the mouse over the connector. This trick is valid especially in cases where the conjunction is figure.

Thus e.g. we add to our example the following lines:

<p> <a href= title= very powerful search. </ P>

Link email addresses

In some cases we have seen that the addresses of different people appear on the page and after clicking on to open a window which allows you to send an email to the newly clicked address. For her create a link on an email address you need to add the href attribute which as a value should have:

<a href=mailto:[email protected]> [email protected] </a>


In HTML we have two types of lists: Unordered lists that are in the form of full filled points.

Ordered list that are a sequence of numbers or letters.

Example of unordered lists



<h4> Unordered list: </h4>


<Li> Coffee </ li>

<Li> Tea </ li>

<Li> Milk </ li>

</ Ul>

</ Body>

</ Html>

Example of listed lists



<h4> Ranked list: </h4>


<Li> Coffee </ li>

<Li> Tea </ li>

<Li> Milk </ li>

</ Ol>

</ Body>

</ Html>

Example of intertwined lists



<h4> Interlocking list: </h4>

<ul> <li> Coffee </li>

<Li> Tea


<li> Black Tea </li>

<li> Green Tea </li>

</ul> </li>

<Li> Milk </ li>

</ Ul>

</ Body>

</ Html>

Posted in C++


Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

Tables & Forms

Wed Jul 1 , 2020
Tables HTML has a set of tags that are used to present text in the form of a table. these tags are: • TABLE: marks the beginning and end of a table • TR: marks the beginning and end of a line • TH: marks the beginning and end of […]

You May Like