2.1 Text Formatting
Until now we have learned to insert simple text into our web pages. In this lesson we will learn
text formatting
techniques. This part of html writing skills is the most important part of our whole web design
course. So you must learn it word by word.
2.2 Changing text style
We can make a text bold, italic or underlined. If you want to make a text bold, you must inclose it
in <b>…</b> tags.
<body>
This is very <b> important </b>
</body>
In above text the word “important” is typed bold. You can make a text italic by inclosing it in
<i>…</i> tags.
And finally you can make some text underlined by inclosing it in <u>…</u> tags.
Example 2.1:
<html>
<head>
<title>Example 1, Lesson 2</title>
</head>
<body >
<b>This text is bold</b><br>
<i>While this one is Italic</i><br>
<u>and this text is underlined</u><br>
<b><i>Look at this, this is both bold and italic</i></i>
</body>
</html>
- In above example you can see that how we can make a text both bold and italic or any other
combination. - You may notice the tag <br> in the end of each line. Let’s see what is this tag. If you insert enter
keys (new line characters) at the end of each line and wish that it will make new lines in your
output page you will soon be
disappointed. - All lines will be in a single line in output web page. No matter how html code is written in separate
lines. To break lines in output web page you must insert <br> tags in breaking points. Also pay
attention that <br> tag is one of few single tags in html language . It has not an ending tag.
2.3 Nested Tags
In previous section we saw a line of code with nested tags.
<b><i>This is both bold and italic</i></b>
When you use nested tags you must be sure that they do not overlap each other. They must be
nested exactly. For example some part of text may change to bold although it is not desired.
2.4 Text with fixed width font
As you may know, regular fonts use different horizontal space. For example letter ‘w’ uses more
space than the letter ‘i’. Sometimes we need a font with exactly the same width for all letters . For
example if you want to make a table of numbers and you want the columns to be exactly under
each other in different rows, we will need this kind of text.
To specify this kind of text you must use <tt>…</tt> tags. tt means Typewriter Text.
2.5 Changing size and face of fonts
We can change face and size of fonts using <font>…</font> tags. Also using this tag alone will
not change the text. You need to use parameters for this tag. This parameters specify what kind of
change you need in text font.
2.6 Size of font
To change size of font in a part of text, inclose it with a <font> tag as below:
<font size=n>…,</font>
n is size of font. size of font must be a number between 1 and 7. If you insert some text without
determining its size default size will be 3.
<html>
<head>
<title>Example 2, Lesson 2</title>
</head>
<body >
<font size=1>1This text is bold</font><br>
<font size=2>2This text is bold</font><br>
<font size=3>3This text is bold</font><br>
<font size=4>4This text is bold</font><br>
<font size=5>5This text is bold</font><br>
<font size=6>6This text is bold</font><br>
<font size=7>7This text is bold</font><br>
</body>
</html>
2.7 Face of fonts
We can use a font for a part of text by specifying its name.
<font face=”font name here”>…</font>
You must insert font name in double quotes in above tag.
Example 2.3:
<html>
<head>
<title>Example 3, Lesson 2</title>
</head>
<body >
<font face=”ARIAL”>This text is in ARIAL font</font><br>
<font face=”IMPACT”>This text is in IMPACT font</font><br>
</body>
</html>
This text is in ARIAL font
This text is in IMPACT font
- In above example we have used Arial and Impact fonts while you can use any font you want.
- Warning: Fonts will be displayed on your viewer if specified font is installed on your computer. So
be careful while using new fonts. It’s better to use native windows fonts in your pages. Windows is
used by about %95 of web surfers. - Alternatively you can use several font faces for each part of your text. In this way your browser
will try alternative fonts if it can not find primary font.
<font face=”arial,helvatica”>…</font>
2.8 Changing font colors
In previous lesson you learned how to change web page background color. Here we will learn how
to change text
color. Look at this example:
Example 2.4:
<!DOCTYPE html>
<html>
<head>
<title>Example 4, Lesson 2</title>
</head>
<body >
<font color=”#ff0000″>this text is in red color.</font><br>
<font color=”#00ff00″>this text is in green color.</font><br>
<font color=”#0000ff”>this text is in blue color.</font><br>
</body>
</html>
this text is in red color.
this text is in green color.
this text is in blue color.
In above text different colors are used. You can change text color by changing color number. If
you don’t remember how to specify color numbers return to previous lesson and review section on
“web page background color”.
2.9 Combining Font attributes
We can obviously combine <font> tag parameters as we wish. In this way we will be able to
have text with different colors, font faces and font sizes.
You can even use text styles with <font> tag by nesting style and font tags.
<b><i><font size=”5″ face=”impact” color=”#00ff00″>
How is this ?
</font></i></b>
2.10 Changing default font colors in a web page
Each browser has its own default settings for text color, link color, visited link color and active link
color.
Text color default is black. Links are usually blue. To change default settings for these values you
must use <body> tag with more parameters.
<body bgcolor=”#ffffff” text=”#000000″ link=”#0000ff”
vlink=”#00ff00″ alink=”#ff0000″>some text </body>
bgcolor: web page background
text: text color
link: link color
vlink: visited link
alink: active link
2.11 End
This lesson included some of the most important techniques in html writing. Now you must be able
to use any kind of text in your web pages.
As remembering so much tags and parameters is difficult, you must use them repeatedly so that
you can remember them.
I always tell this sentence in my programming classes: “No one becomes a programmer
without programming”
Notice:
- Write a html page that uses lines with these styles in separate output lines:
italic and bold
italic and underlined
bold and underlined - Make a web page with a banner text on it. Our banner is made of characters in increasing sizes
to banner’s middle and then decreasing size to its end. First character starts with the size 1,
middle character size is 7 and last character size is 1 again. Banner text is “mylonglongname”. - Write a html page with 9 separate lines in different colors. State color of each line in its text.
Learn Free Web Design Courses with Online in 5 days students are learning Web Design on Udemy. Free learning on Udemy. Web Design for … HTML, CSS and JavaScript: The Complete Web Developer Course. Online
