Adding images, Anchors, ordered/unordered list and description of a list in Html.

Html Attribute

HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.

For example in the following code the elements h1, p, and div has the attributes style, name, and class respectively.

<h1 style=”color:red”>

<p name=”customerDetails”>

<div class=”someClass”>

Adding the image

Adding an image on your webpage is very easy to do.

The <img/> tag places an image in an HTML page.

The <img/> tag has two required attributes: src and alt. The img tag is a self closing tag. Meaning that the forward slash “/” you place after img closes the tag right there, no need for a separate closing tag.

In the src attribute you have to give the url/location of the file and in alt you have to write a name/brief description. The value of alt is very important, it tells the search engines what that image is about. Also the value of alt shows in place of the image if the image fails to load.

Here’s how to add an imageimgex.PNG

I have used an online editor called codepen to  display this example.

Adding Anchors

Tell me did you always wonder how just by a click of a button you went from one site to another! Well here’s your answer! in HTML those links are called hyperlinks. You can add hyperlinks with the <a></a> tags. It’s really quite simple just like adding a image. Similarly in <a></a>  you have to write the URL of the page you want the user to go to in the href attribute. href stands for hypertext reference. It’s the source of the file used by the tag.  It looks like this <a href=”https://www.codershorthead.wordpress.com”&gt; That’s the address of my blog!</a> this will appear like this on the web page.

aher

 

Adding an list

In HTML there are three types of lists. They are the following.

Ordered list

In HTML an ordered list starts with an <ol> tag, an unordered list starts with a <ul> tag, and a description list starts with a <dl> tag.

Each list item in the lint starts with the <li> tag.

The list items in an ordered list will be marked with numbers by default.

The <ol> tag has a type attribute by which we can change the serialized numbers to uppercase letters, lowercase letters, roman number with uppercase letters, roman number with lowercase letters and the default serialized numbers.

However you can select from which number the counting begins in serialized numbers by using the size attribute. You can give size any value and it will start from there. The following types only works in ordered list

orlistype

Unordered list

The <ul> tag has a type attribute by which we can change the disc dots to circle dots or square dots but it does not work in Html5. In Html5 you can change it like this for inline style <ul style=”list-style-type:square”>or like this for external/internal. You can also add an image but more on that later.

ul{

list-style-type:square;

}

here is an example.

listun

Description list

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term).You can write them as.

<dl>
<dt>Chocolate Milkshake</dt>
<dd>chocolate flavored milk i like it very much.</dd>
<dt>Ketchup</dt>
<dd>paste of tomatoes tasty paste of tomatoes tasty.</dd>
</dl>

here is an example.dlist

So there you go! Today you learnt how to add an image, anchor(hyperlink), and 3 types of lists in html.

Note: Now be sure to practice and follow this blog for new ways to code or just #learnsomethingnew.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s