Creating Lists in HTML

In HTML you can create lists using the <li> tag. There are two types of lists in HTML, Ordered lists and Unordered lists. In Ordered list, every item is marked with numbers. While in Unordered list, items are marked with bullets.

Unordered Lists

All the items in an Unordered list will be marked with bullets (or certain symbols).  The Unordered list is represented by <ul> tag. Check the example given below to understand how Unordered lists work in HTML.

Unordered list in html
Unordered list – Default Disc Type

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ul> tags.

Type Attribute Of Unordered Lists

In the example given above, You can see that the bullets are disc shaped. The default type of bullets are disc.

However you can make them square or circle according to your wish. To do that, you can use the attribute type for <ul> tag. Check the example given below.

Unordered List – Square and Circle

Ordered Lists

All the items in Ordered lists will be marked with numbers. The Ordered Lists are represented by <ol> tag. Check the example given below to understand how Ordered lists work in HTML.

Ordered List
Ordered List

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ol> tags.

Start Attribute in Ordered List

You can specify the number with which the list should start using the Start attribute. Check the example given below.

Start Attribute
Start Attribute

Type Attribute in Ordered List

You can specify the type of numbering in the list. The types can be numerical, alphabetical (lowercase or uppercase), capital roman, small roman, etc. Check the example given below.

Types Of Ordered List
Types Of Ordered List

In this way you can use the start attribute and the type attribute for ordered lists. You can also use these attributes together in one single list.

For instance, if you want to create a ordered list with uppercase alphabets and starting with symbol E then you can use the code given below:

Using Start and Type Attribute Together
Using Start and Type Attribute Together

You can test all these codes in the Codefap Online HTML Editor. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Everything about Tables In HTML

In this post, I’ll explain the very basics about tables in HTML. You will learn about how to add table border, spacing, padding, colspan, rowspan, etc.

To create a table in HTML you’ll need the following tags – <table>, <tr>, <td>. The <table> tag represents a HTML table. <tr> tag represents a row inside table. <td> tag represents a cell within a row.

Creating A Simple HTML Table

Given below is the code to create a very basic HTML table. This code creates a HTML table with a single row and 2 columns.

The result will be somewhat as shown below. It doesn’t look like a table because there is no table border. So we will add table border in our next step.

HTML Table

Border Attribute

You can add table border using the attribute border. In the code given below, i have added a table border of size 2 pixels. You can set this value according to your wish.

HTML TABLE BORDER

We got the table border but the content in this table is too tightly packed. So lets add some padding to it.

Cell Padding Attribute

The cellpadding attribute in table will basically add some space between the text and the cell border (not the table border). And you can set the amount of space in pixels.

Cell Padding

Now you know whats cellpadding but then what is cellspacing? Lets check it out.

Cell Spacing Attribute

The cellspacing attribute in table will add some space between the cell border and the table border. You can set the amount of space in pixels.

Cell Spacing

Cell Background Color

To add background color to a particular cell, we will use style attribute. Inside the style attribute we will have background property with some value. Check the code given below.

Cell Background Color

This code turns background color of Cell 1 into yellow. You can try and change it to red or any color of your choice. In the same way you can add color to any other cell.

Adding Multiple Rows

You can add multiple rows by using <tr> tag. Previously we had just one pair of <tr> tag, now lets add two pair of <tr> tags. This will create two rows.

Multiple Rows in HTML TABLE

Table Header

Apart from tr and td, there’s one more tag called the th (table header) tag. You can use it to make the text bold or strong. Check the code given below.

HTML TABLE HEADER TAG

We have learned a lot about tables in this post. Now only two things are remaining – rowspan and colspan attribute of cells.

Row Span

The rowspan attribute of table data (td) tag will convert the cell to occupy multiple rows. For example, if rowspan is 2 for a particular cell then that cell will occupy 2 rows.

HTML ROW SPAN 2

Col Span

The colspan attribute of table data (td) tag will convert the cell to occupy multiple columns. For example, if colspan is 2 for a particular cell then that cell will occupy 2 columns.

HTML COL SPAN 2

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Adding Images And Links To HTML Document

In this post we will see how to add images and links to our existing HTML document. This is very simple but i’ll try to show you more details about the same.

To add any image or link you will need Attributes. A Attribute in HTML is something which gives more information about a particular tag. So image tag (img) can have a attribute (src) which gives information about the location of image. Also anchor tag (a) which is basically a link, can have attribute (href) which gives information about destination web page.

Directory

Before we start to add Images or Links, I’ll create some set of folders in C drive. The directory and contents of these folders are displayed in the image given below.

directory

NOTE – We are inside the main directory and we are working on the document MAIN.html. All the codes given below in this post will be added only to MAIN.html.

Adding Image In HTML

You can add images using the image tag given below. Note that image tag has no closing tag but there’s a forward slash at the end of the tag. Also you can see the tag has SRC attribute which basically means SOURCE. We have to specify the source of image file.

We are currently in MAIN folderMAIN.html directory. We can display A.JPG, B.JPG, C.JPG and D.JPG image using the code given below. Also at the very end, i have displayed an image from the web.

Note that – To add a image from the web, we have used HTTP protocol. If we remove the HTTP part, the browser will search for the image inside the same folder in which the current HTML document is present. Also we have used forward slash instead of backward slash for fetching the source from the web.

Title Attribute For Image Tag

Did you notice that D.JPG is not present and thus the image will not be displayed. We can add title attribute to describe the image. So even if the image doesn’t show up, user can move the cursor over the image area and a title will be displayed.

html title

Adding Text Links In HTML

Similarly we can add Links in HTML. The only differences are – we have a tag and href attribute instead of img and src. And a tag has closing tag.  We can enclose any text or image between opening anchor tag and closing anchor tag and it will turn into a link.

I have added paragraph tags here because i want to links to appear on different lines and not on one single line.

Creating Image Links

Once you know how to add images and links to HTML document, you can easily create a image link. To do so, we will insert image between opening anchor tag and closing anchor tag.

I’ll add A.JPG, B.JPG and C.JPG and link them to X.HTML, Y.HTML and Z.HTML respectively. So when i click on A.JPG, the browser will open X.HTML web page.

Source Code

I have uploaded the files required for this post in zip format on dropbox. Just download the file and extract it in your C drive. You can then open main.HTML in web browser. Also you can play around with the code if you want to.

Download Link – Dropbox

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.