Wednesday, December 5, 2018

How to use Lists in HTML?

                5 comments   

HTML Lists

          You can represent any information through the lists in HTML.  HTML list make your webpage in well-formed look. There are three types of the list in HTML. These are an ordered list, unordered list, description list and nested list is nothing but list inside a list. In the web designing and development, lists play the vital role, basically creating menu or navigation bar.

 There are some terms, you should have to know.

 <ul>:- It is used for the unordered list.
<ol>:- It is used for the ordered list.
<li>:- It is used for list item.
<dl>:- It is used for description list.
<dt>:- It is used for the term in the description list.
<dd>:- It is used to describe the term in a description list.
type:- This an attribute which is used to define item serial number.
start:- This an attribute which is used to define start point. 

Ordered-Lists

This list is in the order form. You can order such a list in many ways, such as numbers (1, 2, 3, 4), small Roman numbers (I, ii, iii, iv), capital Roman (I, II, III, IV) small alphabets (a, b, c, d), capital alphabets (A, B, C, D) etc. This type of list you can create by using <ol> tag.

    Example of Ordered Lists

You use the <ol> tag to create the ordered list as I told you earlier. After this tag, you define the list item to use <li> tag. This tag is also used in the unordered list. An example of this is being given below.

The above script will generate the given web page.


order-list


Attribute

Attribute type in the ordered lists

You can also use the type attribute with the Ordered List. By Type Attribute, you tell how you want to order the list. Like if you want a list of numbers, then you define the value of type attribute 1. Apart from this, if you want to list in alphabet order, the value of the type attribute will be a. You can also define the list with roman letters, for this, you give the value I of the type attribute. 
type="1“ --> start numbering with numbers (default)
type="A“ --> start numbering with uppercase (capital) letters
type="a“ --> start numbering with lowercase (small)  letters
type="I“ --> start numbering with uppercase (capital) roman numbers
type="i“  --> start numbering with lowercase (small) roman numbers

 Attribute start in the ordered lists

         This an attribute which is used to define start point from where item serial number will continue.
Start=“20” à By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute.

 <ol type=“1” start=“20”>
    <li>Book</li>
              <li>Copy</li>
              <li>Pen</li>
           </ol>

 Output:-           20 Book
                21 Copy
                22 Pen



 Now you can use the below code and try to get the output using both attribute type and start.

The above script will generate the given web page.


type-attribute

Unordered-Lists

This type of list is in unordered form. Items like this list are represented with bullets, circle and squire etc. This type of list you can create by using <ul> tag.

 Attribute type unordered lists
Disc --> Sets bullet (default)
Circle --> Sets circle
Square --> Sets square

None --> The list items will not be marked

    Example of Unordered Lists

You use the <ul> tag to create an unordered list. After this tag <li> tag item list is defined. In this type of list, 3 types of type attribute can be given.
With disc, circle and square values, you can create different types of unordered lists. An example is given below.

The above script will generate the given web page.


unordered-list

Description Lists

In the Description list first, you define a list item and then provide its definition. This type of list you can create by using <dl> tag. The <dt> tag is used to declare list item and <dd> tag for its definition.

Example of Description Lists

By definition Definition lists you provide a definition of a term. To create Definition lists, you use <dl>, <dt> and <dd> tags. An example is given below.

The above script will generate the given web page.


definition-list

Nested Ordered Lists

            List under list is called nested list. It can be defined for each list ordered list, unordered list and definition list accordingly. You can see in the below example. Inside Tea, there are two items Black tea and Green tea.
<ul>
    <li>Coffee</li>
    <li>Tea
            <ul>
<li>Black Tea</li>
                  <li>Green Tea</li>
     </ul>
     </li>
     <li>Milk</li>
</ul>


For your practice, you can use the below code.


The above script will generate the web page as below.


ordered-nested-list

Nested Unordered Lists

                This is the same as nested ordered lists only you have to replace <0l> into <ul>.  


The above script will generate the given web page.


unordered-neststed-list

Nested Description Lists

This is the also description list inside the description list.


The above script will generate the given web page.


definition-nested-list
Hopefully, this "HTML Tutorial - Lists” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips. 

Previous:- Img tag in HTML?           Next:- Block & Inline tag in HTML?             


Monday, December 3, 2018

How to use Image Tag in HTML?

                No comments   

Introduction of HTML Images

Images on webpage should be attractive and beautiful. You can add an image on the webpage using HTML. For this, you will have to use <img> tag. The <img> tag provides many attributes from which you can control the presentation of the image.

Syntax and Attribute of <img> tag

<img src=”url” alt=“text”><img>

 <img> tag is an empty tag because it is without closing/end tag. It    contains attributes only.

src:- src attribute specifies the URL (web address) and Path of the image.

alt:- alt attribute provides an alternate text instead of image, if the user unable to view image because of slow connection.

width:- With this attribute, you can set the width of the image.

height:- With this attribute you can set the height of the image.

style:- With this attribute you can apply CSS rules on the images.

Including images in web page

You can use <img> tag to include images in any webpage as mentioned above. The use of src attribute with <img> tag is necessary. All the attributes are optional. Example of this tag is below.



The above script will generate the output on the web page as below.


html-img-tag

Setting alternative text with images

Because of some reason, if the image is not shown then alternate text display in that place. These attributes are also used to tell the search engines about what the image is about to. An example of this is given below.
      If there is no picture load due to any reason, then alternate text will be shown in this way.


html-img-alt

Setting height & width of images

You use height and width attributes to set height and width. Their values will be in integers.
        The above script will generate the given webpage.


html-img-height-weight

Setting border of images

You can also set the border of the image, for this, you use the border attribute. This attribute has the value border size.
        The script above will generate the given web page.

html-img-border

Making image a link

 You can even make a link for the image. By doing so, whenever a person clicks on an image, a new webpage will open. For this you write <img> tag in <a> tag. Instead of text in the anchor tag you define the <img> tag.
An example of this is given below.
This script generate the the output as below.

html-img-link

The above example shows an image where you can open the link to click on image.

Hopefully, this "HTML Tutorial - Image” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips. 
Previous:- How to use Table Tag in HTML?          Next:- How to use List in HTML?      
  

How to use Table Tag in HTML?

                1 comment   


You can use tables to render data in the structured form. By adding tables to your webpage, you can make it even more structured and attractive. To create tables in HTML, you use <table> tags. This tag has a sub tag called <tr> table row tag. <tr> tag also has a sub tag called <td> table data tag.

Saturday, December 1, 2018

What is Attribute in HTML?

                No comments   

        

Introduction

         In this "HTML Tutorial - Attributes", we will cover the syntax,  scope, guideline and global attributes. Attributes are defined in all the HTML tags. With attributes, you can configure the contents of tags accordingly. Attributes are used for advanced configuration. Attributes are given additional commands by the interpreter, which tells them how to show the content of an element.

For example, if you don't want a default page background, you can change it accordingly. Similarly, if you don't want a default text color, you can also change it accordingly.

Syntax HTML Attributes

The general syntax for defining attributes in HTML is given below.

<tagName attributName = "value">
some content here
</tagName>

As you can see in the syntax above, the attributes are always defined in the start tag. These are written in pairs of name and value.

It is very easy to use attributes. All you need to know which attribute to use. Let's try to understand the use of attributes with an example.

       <html>
     <head>
<title> myPage </title>
     </head>
<body bgcolor = "blue">
<h1 style = "color: black"> heading </h1>
<p style = "color: red">
This is a paragraph about learning html attributes.
</p>
</body>
        </html>

In the above example, attributes have been used in 3 places. The background color of the page is defined by using bgcolor attribute in the first <body> tag. When you do not define a background color, by default background color is white.

But as I told you that you can configure the elements according to your attributes, so you can keep the background color that you want to keep on your page. Like I gave blue in the example.

The second attribute is used in the heading tag. This is the style attribute. With this attribute, you can apply CSS (Cascading Style Sheet) to tags. Advanced configuration is done through CSS, which will be forwarded to you. Here the color of heading has been changed by the style attribute.

The third attribute is used in the paragraph tag, which is changing the color of the paragraph, just like the heading tag.

The above example produces the below-given output.
HTML Attributes

The scope of HTML Attributes

The scope of attributes is according to their tags. The effect of the attribute that you apply with the tag remains limited to the same tag.

For example, you have defined text color green while using the style attribute in the body tag. The body tag is for the entire page so this attribute will show the entire text of the page in green.

But it will only happen until a body tag defines the small tag text in the second color. If a subtag defines the same attribute then its value in the condition will override the value of the attribute defined in the parent tag.

For example, to color green define a paragraph tag, this color will override the color of the body tag and your paragraph will show in green text. The scope of attributes in HTML is being explained by the following example.

   <html>
<head>
<title> myPage </title>
</head>
<body style = "color: red">
Learn html Attribute <br>
Lean html on mybloghelp.com<br>
Learn html in HTML Tutorial - Attributes
<p style = "color: green">This is scope of HTML Attribute</p>
</body>
    </html>

In the above example, you can see that the text color of the paragraph is defined separately. It overrides the body's text color. Running this script will show the output given below.
HTML Attributes



Guidelines For Using HTML Attributes

There are some guidelines for using HTML attributes. By following which you can make better use of attributes. These are being given below.

1. Always define attributes in lower case.
                2. Always define the attributes of values in the quotation mark.

HTML Global Attributes

In HTML, global attributes are attributes that are commonly used with all HTML tags. Their list is being given below.

1. id 

The id attribute is used to define the unique id of a tag. Different styles can be applied to that tag from the value defined in this attribute.

     <tagName id = "idName"> other content </tagName>

          2.  class

Class attribute is also similar to id attribute. The id of a tag is unique and can not be define for the second tag. But many elements can define the same class. This is used to apply the same styles to multiple tags.

<tagName1 class = "className1"> other content </tagName1>
<tagName2 class = "className2"> other content </tagName2>

    3. style

Style attribute is used to apply CSS rules to an element. The CSS that is applied by this attribute is called inline CSS.

<tagName style = "attribute: value;"> content </tagName>

     4. title

With the title attribute, you can specify the name of an element or give more information about it.

<tagName title = "name"> content </tagName>

5. accesskey

With this attribute, you can define a shortcut key to create a focus on a tag.

<tagName accesskey = "shortcutkeyName"> content </tagName>

6. dir

This attribute defines the direction of the content defined in the tag inside the tag. This attribute can be defined by rtl, ltr and auto three values.

<tagName dir = "value"> content </tagName>

7.lang

This attribute is used to define the language of content inserted inside the tag.
<tagName lang = "EN"> content </tagName>

There are more new global attributes defined in HTML5, which you can learn by reading related tutorials.

Hopefully, this "What is Attribute in HTML?” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips. 


Previous:- Setup Environment for HTML.               Next:- How to use Heading in HTML?






































Followers

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.