HTML -3
HTML - Fonts
Fonts play a very important role in making a website more user friendly and increasing
content readability. Font face and color depends entirely on the computer and browser that is
being used to view your page but you can use HTML <font> tag to add style, size, and color
to the text on your website. You can use a <basefont> tag to set all of your text to the same
size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts.
To change any of the font attributes at any time within your webpage, simply use the <font>
tag. The text that follows will remain changed until you close with the </font> tag. You can
change one or all of the font attributes within one <font> tag.
• Font Size
You can set content font size using size attribute. The range of accepted values is from 1(smallest)
to 7(largest). The default size of a font is 3.
<font size=7> text </font>
• Font Face
You can set font face using face attribute but be aware that if the user viewing the page doesn't
have the font installed, they will not be able to see it. Instead user will see the default font face
applicable to the user's computer
<font face=arial> text </font>
• Font Color
You can set any font color you like using color attribute. You can specify the color that you want by either
the color name or hexadecimal code for that color.
https://www.tutorialspoint.com/html/html_color_names.htm
<font color=“red”> text </font>
<font color= “#008000”>text </font>
• The <basefont> Element
The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the
document that are not otherwise contained within a <font> tag. You can use the <font> elements to
override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative font setting by
giving size a value of +1 for a size larger or −2 for two sizes smaller.
• Insert Image
Images are very important to beautify as well as to depict many complex concepts in simple way on your
web page. This tutorial will take you through simple steps to use images in your web pages.
You can insert any image in your web page by using <img> tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file
name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be
displayed.
• Image Location
Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory
and create a subdirectory images inside the home directory where we will keep our image test.png
• Image Width/Height
You can set image width and height based on your requirement using width and height attributes. You can
specify width and height of the image in terms of either pixels or percentage of its actual size.
• Set Image Border
By default, image will have a border around it, you can specify border thickness in terms of pixels using border
attribute. A thickness of 0 means, no border around the picture.
• Set Image Alignment
By default, image will align at the left side of the page, but you can use align attribute to set it in the center or
right.
HTML - Lists
HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list
elements. Lists may contain −
•<ul> − An unordered list. This will list items using plain bullets.
•<ol> − An ordered list. This will use different schemes of numbers to list your items.
•<dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.
• HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will
be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one
for each successive ordered list element tagged with <li>.
The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a
number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters. See examples in
<ol type = "a"> - Lower-Case Letters. pg no 126 to 130
• HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is created by
using HTML <ul> tag. Each item in the list is marked with a bullet.
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible options
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
HTML Definition Lists
HTML and XHTML supports a list style which is called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other
name/value list.
Definition List makes use of following three tags.
•<dl> − Defines the start of the list
•<dt> − A term
•<dd> − Term definition
•</dl> − Defines the end of the list
