How to Show Play Icon On Image Hover

Recently I was testing some little strategy on my projects in which I need to show play icon on image hover. Showing play icon on image when someone navigate the cursor on that image. This was slightly tricky for me but I did it in a short while. So going to share this experience with my readers, which can learn from it and can do it better than this.

How to Show Play Icon On Image Hover

How to Show Play Icon On Image Hover:

In this guide we will show play icon on image hover with little work on HTML & CSS. You can use simply use your personal computer notepad to run below coding.

HTML Code:

<div class="itemsContainer">
<div class="image">
<a href="https://www.youtube.com"> 
<img src="http://www.example.com/Your-Pic.jpg" /></a>
</div>
<div class="play">
<a href="https://www.youtube.com">
<img src="http://www.example.com/Hover-Pic.png" /></a>
</div>
</div>

Above HTML, we also added link on Icon or the entire icon overlay. When someone click on icon then link would be work perfectly.

CSS Code:

<style>
.ImageContainer {
background: white;
    float: left; //It also can be right OR left
    position: relative;
    width: 300px; // You can change its width OR height
    height: 300px;
    margin-right: 20px;
}
.ImageContainer:hover .play{display:block}
.play{
  position: absolute;
  display: none;
  top: 0%;
  margin: 0 auto;
  left: 0px;
  right: 0px;
  z-index: 100;
  opacity: 0.9; // Reduce the opacity to increase the background pic visibility
}
</style>

Above CSS is pretty straight forward to go ahead. First one section handles the image styling only.

ImageContainer

Whereas, second one shows the image hover styling. We setup recommended opacity but you can reduce it as you like to see it, opacity reduce the image hover colors or overlay and increase the actual background image visibility.

ImageContainer:hover

Furthermore, you can itself add your own custom CSS or html to modify the above code as your requirements.

Let us know, if you find this guidelines useful and valuable. Simply test this code in your code editors and if you found any issue or error then join us on our community forum to directly interact with us.

How to Make Responsive Tables

How to Make Responsive Tables:

Website main objective is to serve user with maximum approach. Responsive website is the biggest goal in this era because responsive website might grab many users with maximum range. Sometime we have responsive theme but some elements are not responsive. HTML table is one of the element, may be you are going to add pricing tables on site but when someone open your site from mini devices then he can not able to see accurate information in positive manner. So, responsive tables is the crucial element of responsive website and we can’t overlook it. For this purpose, We will show you that how to make responsive tables with minimum efforts.

How to Make Responsive Tables

To make responsive tables, first Download ZURB responsive tables zip file for give the appropriate shape to tables. You can use the above given source for downloading and review the below screenshot.

How to Make Responsive Tables

After getting above ZURB responsive tables zip file, Now you need to concentrate on it to go ahead. Zip file contains few stylesheets and java query files, which helps to make tables fully responsive. Now extract this zip file to any specific folder, after do that, open your code editor and add few below HTML lines, Copy the below HTML table code and paste into any editor.

<table class="responsive">
 
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 <th>Header 3</th>
 <th>Header 4</th>
 <th>Header 5</th>
 <th>Header 6</th>
 <th>Header 7</th>
 <th>Header 8</th>
 </tr>
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 <td>row 1, cell 3</td>
 <td>row 1, cell 4</td>
 <td>row 1, cell 5</td>
 <td>row 1, cell 6</td>
 <td>row 1, cell 7</td>
 <td>row 1, cell 8</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 <td>row 2, cell 3</td>
 <td>row 2, cell 4</td>
 <td>row 2, cell 5</td>
 <td>row 2, cell 6</td>
 <td>row 2, cell 7</td>
 <td>row 2, cell 8</td>
 </tr>
</table>

Grab the above code and paste to any code editor, Now its time to establish link among these downloaded CSS files and this simple HTML table, which you created couple a minute ago. For this purpose, we will add few lines before table tag, which will connect those elements. You can see these lines below,

 <!-- Combine and Compress These CSS Files -->
 <link rel="stylesheet" href="stylesheets/globals.css">
 <link rel="stylesheet" href="stylesheets/typography.css">
 <link rel="stylesheet" href="stylesheets/grid.css">
 <link rel="stylesheet" href="stylesheets/ui.css">
 <link rel="stylesheet" href="stylesheets/forms.css">
 <link rel="stylesheet" href="stylesheets/orbit.css">
 <link rel="stylesheet" href="stylesheets/reveal.css">
 <link rel="stylesheet" href="stylesheets/mobile.css">
 <!-- End Combine and Compress These CSS Files -->
 <link rel="stylesheet" href="stylesheets/app.css">
 <link rel="stylesheet" href="responsive-tables.css">
 <script src="javascripts/jquery.min.js"></script>
 <script src="responsive-tables.js"></script>

Just you need to do only add these above lines before closing head tag. You clearly can see, every above line consist a specific CSS stylesheet name, which convert this simple HTML table to responsive table. But few are most important in these above lines like last three,

 <link rel="stylesheet" href="responsive-tables.css">
 <script src="javascripts/jquery.min.js"></script>
 <script src="responsive-tables.js"></script>

Above scripts lines are most important, Specially these files are most compulsory include responsive-tables.css, jquery.min.js, responsive-tables.js to build responsive table. Further globals.css,typography.css, grid.css etc are optional but can use for build table more stylish.

Note:

A concise note before going to compile process, CSS files and HTML table file should be in the same folder then connection can be built among those files. Secondly above code class="responsive", which we used in HTML table tag code, is to create the connection between Cascading files and HTML. So, don’t be panic.

Summing up the both HTML table code and ZURB responsive tables css framework, you can create attractive or fully responsive tables without any hesitation. If you like this then must share with your friends and relations. Don’t forget your precious feedback. 😉

HTML Comment tag And its Advantages

HTML Comment tag And its Advantages:

As we learned regarding HTML (Hyper Text Markup Language) numbers of lessons earlier. On that position, We have much knowledge about html code so, few essential and crucial tips to be noted. During writing coding few rules are exist, May be developer’s are familiar with html comment inside coding. If you are not aware so, read this article carefully. HTML Comment will support developers to understand the code level/stage and its position. Lets assume that, If you are client in a software house and working as a developer. Now while writing code, If you utilize html comments inside your coding on every step and guide in your comments. Then company hire a new developer with you, And this developer working on your previous codes files or coding document. If you had put html comments inside your code on every step and guide friendly then new developer will understand your code easily otherwise new developer will headache for you. Therefore, try to add meaningful html comments and don’t utilize redundant or unnecessary html comments. HTML comment contains on particular html tag. To understand and view this tag, See the below example.

<html>
<body>
<!-- Start First Heading -->
<h1> Hello World </h1>
<!-- End First Heading -->
</body>
</html>

See the above html comment tags and its utilization for html code. This procedure is quite simple and don’t hard struggle need for this step. You can add html tag and elements or attributes inside html comments tags. In this process and after debug or compile , Browser don’t display these tags.  Which are available inside of html comment tag. See the below example to understand it.

<html>
<body>
<!-- <h1> Enter your paragraph content </h1> -->
</body>
</html>

Above example is similar like previous one, But slightly changes exist both of them. You can clearly see that, We utilize heading tag in above html code but this heading tag presence found inside of html comment tag. That’s why after compile or run above html code, Browser will not display the above html heading. The above code result should be a blank page.

HTML Comment Advantages:

As we mentioned in above statement that, html comment tag have a lot of advantages to the perspective of developer and non-developer. Because html comment tag provides us flexibility to understand it better way. According to our experience, Finest developers need to memorize it and utilize it during writing code. But once again, Don’t use redundant and useless comments inside your comments because it will make your comment complicated. Professional developer recommend to utilize comments while coding.

Try to use html comment during writing html code. HTML comment is not harmful for your code and will not spoil your code. So, Don’t be worried and be profession with your passion. You can ask any query with the use of below comment box. 🙂

HTML Head Elements

HTML Head Elements:

HTML <head> is a necessary part of hyper text markup language. HTML head element is a container and we utilize this head block to add multiple elements. HTML Head container contains few major tag like <title> <style><link> and <meta> tag elements. We can also add <meta> tag element such as Google verification meta info etc. We will observe all of these elements one by one and understand its importance.

HTML <Title> Element:

HTML <title> tag element is utilize with every signal page. We can preview this title element in our browser top bar. We utilize this element in search engines during make Seo snippets. See the example below and try to understand it.

<head>
<title>Knowledge idea is a education and learning based website.</title>
</head>

In the above example, You can estimate the value of title tag element. Every website or blog pages have an title tag element and we put this <title> tag inside of head container.

HTML <Link> Element:

HTML <link> tag utilize for internal links means inside of website document or file and other we utilize this link tag for external source like Pingback relation urls etc. inside of head container. See the example below.
Below link element specify the path of css document.

<head>
<link rel="stylesheet" type="text/css" href="http://www.knowledgeidea.com/css/style.css">
</head>

Below link element specify the website favicon icon path .

<head>
<link rel="shortcut icon" href="http://www.knowledgeidea.com/images/favicon.jpg" title="Favicon" />
</head>

Below link element specify the Pingback link.

<head>
<link rel="pingback" href="http://www.knowledgeidea.com/abc.php" />
</head>

In the above lines of code, We write few common links elements. In the above code, We write first StyleSheet link element second line contains favicon link element same as third contains pingback link element respectively. You can add multiples links elements inside head container.

HTML <Meta> Element:

HTML <meta> tag element provide the meta information about particular webpage. Mostly usage of <meta> tags are, meta title, meta description, meta keyword, author links and meta robots etc. Almost <meta> elements belong to Organic Seo. We utilize meta information for search engine ranking and Seo Purpose. Search engines take this meta information and show in the form of search results. So keep remember that, Meta elements are the crucial part of web development. To understand in better way, See the example below.
Specify the Meta Description element below.

<head>
 <meta name="description" content="Enter Your Page Description"/>
</head>

Specify the Meta Keyword element below.

<head>
 <meta name="keyword" content="Enter Your Page keyword"/>
</head>

Specify the Meta Robots element below.

<head>
 <meta name="Robots" content="noodp,noydir"/>
</head>

Specify the Meta author element below.

<head>
 <meta name="author" content="Enter author name"/>
</head>

In the above meta information, We clarified four meta elements with meaningful example. Keep remember that, Above four meta elements are essential meta elements and on every web page should have these meta elements. Must try to add these html head elements on all web pages. If you love our work and our skills criteria then please Subscribe our Newsletter here. For further query leave comment below. 🙂

Use of HTML Class Attribute

Use of HTML Class Attribute:

Our HTML (Hyper Text Markup Language) lessons, By and by going basic to advance level. We already mentioned, In Create html form lesson about cascading style sheets and utilize it in form buttons. Same as earlier, Now we will do discuss explanatory on html classes attribute. HTML Class attribute uses for to make attractive interface. HTML is only used for develop interface but html class use for give any style to this interface. We will reveal a lot of codes and attributes inside html class. Go ahead, And take meaningful example below.

<html>
<body>
<input type="button" name="Signup" value="Signup" class="sbutton">
</html>
</body>

Above we shows that, Only HTML code but if you noticed. We written tiny button code with html class attribute like class="sbutton" So, its means that,sbutton class have specific command of CSS, which will apply on this button tag because this html class presence inside of this input button tag. So it is important that, to provide the code of CSS (Cascading Style Sheets). We mention CSS code below for this above input button class with sbutton. See the example below.

<style>
.sbutton{
 font-family:Verdana, Geneva, sans-serif;
 font-size:19px;
 background:#00AFEF;
 color:#FFF;
 border-radius: 25px;
 text-shadow: 1px 1px #000;
 border:groove;
}
</style>

The above CSS code will make this html input button attractive/Stylish through html class. This code contains particular attributes like font-family, font-size, background, color and further on. Look at the above style code once again and observe that, We mentioned Style tag on first line as a
opening tag and again put in last line with backslash as a closing tag same as in html tags rules. You can add multiples attributes to make this button attractive and beautiful. You can utilize best code editors to write your development codes. You can see the below preview of above whole code in notepad editor and on the left hand side preview of button style.

HTML Class

Summarize the html and html class with CSS, You can design handsome forms and numerous interfaces. After read this article and after know about html class, Your interest will increase in html development. Hopefully, This lesson will increase your development skills. For more discussion regarding html class or development, leave your comment below. 🙂

HTML Form Elements or Input Elements

HTML Form Elements or Input Elements:

HTML (Hyper Text Markup Language) provide the flexibility to create interactive html forms and make it useful with html form elements or attributes. HTML form input elements is really finest and advantageous step during making html form.This lesson belongs to the previous lesson such as, we learned in earlier lesson about “How to Create interactive html form”  So, if you’re not aware with the previous lesson then read this first. In this lesson, We will disclose to html form input elements or attributes. So before go ahead, We want to clarify few things. We will discuss and read about major html form input elements. So, Crucial html form input elements are given below.

  • Text-Box
  • Button
  • Check-boxes
  • Radio Button
  • File Choose Field
  • Date Control

Text-Box Element:

HTML allows to add multiple appropriate text-boxes in own html forms. Usually we saw that,First name, Last name and email text boxes appear in the html forms. To build and develop these text box, We need to write particular html code. See the code below and its result.

<input type="text" name="firstname" value="First name"><br>
<input type="text" name="lastname" value="First name"><br>

See the above text boxes code result below.
html form elements

You can easily change input type text to password for password box. Because password type hide your characters and make it private. To understand password type criteria. See the code below.

<input type="Password" name="Password" value="Password">

Button Element:

HTML allows us to add buttons and customize its text. To create buttons in html, We need to write specific html code. See the example below and its result.

HTML Code Result
<input type=”Button” value=”Click Here”>

Check-Boxes Elements:

Check boxes is an essential element or attribute of html forms. Because if we need choose something else from sum of multiple things so we utilize check boxes. See the example below and its results.

<input type="Checkbox" name="Month" value="January"> Ali birthday in january<br>
<input type="Checkbox" name="Month" value="June"> Ali birthday in june<br>
<input type="Checkbox" name="Month" value="July"> Ali birthday in june<br>
<input type="Checkbox" name="Month" value="August"> Ali birthday in August<br>

See the above html check boxes code result below.

html form elements

Radio Button Element:

Check boxes and radio buttons have same work and criteria. But it depends on your choice that which will you pick for your own form. Radio button code is same like check boxes code. Only the change in input type section. Just replace Checkbox type to radio. To understand in better way, See the below code and its results.

HTML Code Result
<input type=”radio” name=”Gender” value=”Male”>Male<br>
<input type=”radio” name=”Gender” value=”Female”>Female<br>
Male
Female

File Choose Filed:

Often, We see this element in forms like for image or any doc file upload. So it it is important part in form elements. See the below html code and  its result.

HTML Code Result
<input type=”file” name=”doc”>

Date Element:

In html form elements, We can develop date calendar. Its not consist of huge code but its have a single line code. You can utilize this elements many of places like ask birthday, ask day,year,month etc. See the below html code and  its result.

Date: <input type="Date" name="Date">

See the above date element code preview below.

html form elements
Hopefully, After read these html form elements now you can engage and develop form attributes easily. Must do practice itself. Keep remember that, date element doesn’t support all browser so don’t be confused. Try Google Chrome because it is compatible mostly for all html elements and user-friendly. I suggest you to read “HTML 5 Basic tags” to increase your html and development knowledge.You can leave your comment below, If you found any error or bug during practice. 🙂

How to Create Interactive HTML Form

How to Create Interactive HTML Form:

HTML (Hyper Text Markup Language) is a powerful coding language, Which help us to develop interactive forms in quick ways. In earlier lesson, We learned that, How to create html table and learned about html list respectively. Now lets Move on little bit basic to advance side so, you will see that, We are expand out html course gradually. In this lesson, we will disclose to interactive html form. Developing interactive form is the major and essential element for web pages. After read this article or take this lesson, You will be capable to build your own forms in html. Sometime few bloggers and beginners faces unsatisfactory moments because they don’t have enough knowledge about html and development. Therefore, We always suggest that, If you are beginner so start with first lesson: What is HTML step by step Guide. Come back on topic, and start journey with interactive html forms. See the example code below and specially its result.

HTML Form

Above form is the combination of html and slightly include CSS (Cascading Style Sheets). we will show you step by step that how we build above form and make it attractive through CSS. I know that, We are learning about html form not CSS but without CSS ,we can’t made a form attractive like above form.  So, Let’s take start, We divided this above form in several steps to understand better and easy way.

 Step 1:

Open your best code editor but we used simple notepad for this form. After open editor, Now start typing code with open mind. First we need to provide open and closing tags of HTML and then start Body tags. Provide webpage title before body tag. After complete these mandatory tags. Start form code now, First we mention heading tags and inside heading tags write your form heading such as above form heading is “Submit Your Query” then we provide html list tags with instruction. First step process code are mentioned below.

<html>
<title>Submit Your Query</title>
<head></head>
<body>
<h2>Submit Your Query</h2>
<ol>
<li>
Fill only valid query, Which belongs to you.
</li>
<li>
You can discuss regarding your problem.
</li>
<li>
Beware about talking personal matters.
</li>
</ol>

In the above code we put OL Li tags, these are the html list tags. To understand in better way, You need to Read HTML List tags article.

Step 2:

After proceed first step, Now move on second step in which we start form structure with input box such as first name, email, message, buttons etc For this purpose in html, we utilize special code for these input boxes and buttons. See the entire code of html form below but in the next steps we will discuss separately on every part of below code.

First Name:
Last Name:
Email:
Type Your Message: <textarea name=”typemessage” cols=”20″ rows=”8″ value=”Submit Query”>

Don’t be confused and don’t feel panic because above code contains only few things first is “first name” box second is “last name box” third is input “email” box and finally is “type your message” box. But few things are looking different like html table tags and form tag. See the code below.

<Form name="Submit query" method="post" action="Link your server file">
</form>

This above code represents an appropriate form. Means that, above entire form structure are enclosed in the above form tag. Form tag instruction is that, Just place your form name inside of this form tag then tell the method of this form like post finally put the form action part, which could be a server-side action file. I will discuss you about server-side action file in our next article because this article only for interactive html form.

Discuss on Step 2 (Input Boxes):

Above we mentioned entire form code but now we discuss separately on every part of above code. To better understand the first name, last name, email and message boxes code see the example below.

<table border="3" class='form'>
<tr>
<td ><b>First Name:</b></td>
<td><input type="text" name="Firstname" size="20" value="Type your first name here"></td>
</tr>

In the above code, We cut the few piece of code for you to understand this code deeply.In the above short code , You can clearly see that, input type="text" This tiny code represent the empty box in html form. Slightly ahead, name="Firstname" This code represent the box name and this name is useful for server-side. Next is size="20" This tiny code arrange the width and height  size of the box,keep remember use numeric value to arrange size inside double quotes. Finally in the above code you will see value="Type your first name here" This code is used for write something else inside empty box, You can consider it as default text. Summarize the above whole code, Same as we developed three text box with the same procedure.

Discuss on Step 2 (Message Area):

Now move to the message or comment box in html form. we utilize different tags with different attributes. See the code below.

Type Your Message:
<textarea name="typemessage" cols="20" rows="8" value="Submit Query">

In the above code, After the table tags. You saw that, We used textarea tag to explain message or comment box in html form. We used textarea tag two times first for opening tag and second for closing tag with backslash. Next is name attribute same as above examples. Slightly ahead, You will see cols="20" rows="8" This attribute represent the number of columns and rows which are exist in the message box. You can increase or decrease the level of columns and rows.

Discuss on Step 2 (Input Buttons):

Finally, We reach on submit or reset buttons step, Where we understand the button coding in html form. See the code below.

<tr>
 <td colspan="2" align="Right"><input type="submit" name="submitquery" class='submitbutton'
 value="Submit Query" size="20">
 <input type="reset" name="reset" value="Reset" size="20" class='submitbutton'></td>
 </tr>

In the above code, first we utilize table tags same as above and tables attributes to arrange this form. Next is form buttons concept, which is quite simple. Same as above input type="submit" tag but little bit change. This time type is a submit instead of text. Name and value procedure are same as above examples.

Cascading Style Sheets (CSS):

As we said in the first paragraph, We utilize CSS code to make this form attractive. So that is our duty to reveal this code here. See the below CSS code, Which are attached with the above form.

<style>
.form{
background-color: #90C140;
font-family: Comic Sans MS;
color: White; 
font-size: 15px;
}
.submitbutton{
background-color: Blue;
border-radius: 12px;
color: White; 
}
</style>

You can manually add the above CSS code before starting html in this form. Then start your html form code with the above given instruction. Hope you will get success. Always care about opening and closing tag maybe it can be the cause of error or bug. Few articles are helpful to better understand this form construction. Must read below articles.

Sum up the above whole process or steps , You can develop  efficient and interactive html forms. Always do practice without practice that would not be possible to achieve your aims. For more fresh html or development articles or lessons subscribe our website. If you found any bug or error during practice then you can leave your question.

How to Create HTML Table with Attributes

How to Create HTML Table with Attributes:

Development is the essential and magnificent part of every website or application. As in earlier lesson, We learned about HTML List and it types explanatory. With the help of hyper text markup language, We can develop web pages interface and make it user-friendly. In this lesson, we will divulge the html tables with comprehensive explanation. A simple html table consist on numerous/given rows and columns. Rows look like a horizontal line and columns look like vertical line. But in html, We write particular code to build html table with rows and columns. Lets see below code and its result.

HTML Code Result
<table border=”3″>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Larry</td>
<td>Page</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuckerberg</td>
</tr>
First Name Last Name
Larry Page
Mark Zuckerberg

In the above table, We clearly build simple table with specific html table code. In this code we utilize few tag such as tr which stands for table row next is td which stands for table data. Inside table tag you can put table border like this code border="3" this is look like a border/grid of this table. You can also put background color with this tiny code bgcolor="Green" and simply type your color name or color code. But if you noticed that, first row of above table is bold instead of second and third rows. Actually in first row,  we applied this tag th Which stands for table heading and this tag represent the first row as a heading of this html table. For beginners its look like a complicated cobweb but with the passage of time and daily practice, You will be capable to understand this code easily. Lets take a little bit enhancement in this html table, See below.

HTML Code Result
<table border=”3″ width=”304″>
<tr>
<th colspan=”2″>FullName</th>
<th>Age</th>
</tr>
<tr>
<td>Larry</td><td>Page</td><td>41</td></tr>
<tr>
<td>Mark</td><td>Zuckerberg</td><td>30</td>
</tr>
<tr>
<td>John</td><td>David</td><td>25</td>
</tr></table>
Full Name Age
Larry Page 41
Mark Zuckerberg 30
John David 25

In the above table , We accumulate the two rows and merge in one row with the help of colspan="2".This code does extend the current row cell and include the second row in themselves. If you noticed that, We added this code inside th heading tag therefore, this code apply only for this specific area. You can try this colspan="2" on many of places of your html table code. Secondly same as colspan="2" You can try Rowspan="2" then compile it and check display. See the example below.

HTML Code Result
<table border=”3″ width=”304″>
<tr>
<th Rowspan=”2″>FullName</th>
<th>Age</th>
</tr>
<tr>
<td>Larry</td><td>Page</td><td>41</td></tr>
<tr>
<td>Mark</td><td>Zuckerberg</td><td>30</td>
</tr>
<tr>
<td>John</td><td>David</td><td>25</td>
</tr></table>
Full Name Age
Larry Page 41
Mark Zuckerberg 30
John David 25

In the above table , We accumulate the two columns and merge in one column with the help of Rowspan="2".This code does extend the current column and include the second column in themselves. Actually in simple words, colspan="2" & Rowspan="2" are vice versa to each other. Don’t be worried, because this is not a tricky task for beginners. Always practice as yourself and share your coding skills with your friends.

The above all procedure build html table respectively. Grab and copy these codes and try it as yourself. Without practice and struggle, You will not get your aims and maybe forget your coding skills. Be professional with your passion. If you have more questions regarding html table then tell me below.

Create Ordered and Un-Ordered HTML List

Create Ordered and Un-Ordered HTML List :

HTML (Hyper text markup language) contains on numerous tags. With the usage of these html tags, we can develop many of those things instantly like web pages etc. At this time, we will learn about create html lists and its types in html to enhance our html development skills. We will develop and reveal many kinds of html list. Lets take start.

HTML Code Result
 <UL>
<Li>United States</Li>
<Li>United Kingdom</Li>
<Li>United Arab Emirates</Li>
<Li>Singapore</Li>
<UL>
  • United States
  • United Kingdom
  • United Arab Emirates
  • Singapore

The above html list style called to be default bullet style “disc”. We are capable to change the style type with the little bit changing in html code. See below.

HTML Code Result
 <UL type=”Circle”>
<Li>United States</Li>
<Li>United Kingdom</Li>
<Li>United Arab Emirates</Li>
<Li>Singapore</Li>
<UL>
  • United States
  • United Kingdom
  • United Arab Emirates
  • Singapore

Circle Disc and Square are the bullet list types in html. You may use these types same as shown in above html code.In the above html code, we utilize UL tag, Which stands for un-ordered list and second Li tag,Which stands for Line item. Lets assume that, If we need to initiate list with numeric digits and alphabetic character so, We utilize ordered list tags see the example below.

HTML Code Result
 <OL start=”1″>
<Li>United States</Li>
<Li>United Kingdom</Li>
<Li>United Arab Emirates</Li>
<Li>Singapore</Li>
<OL>
  1. United States
  2. United Kingdom
  3. United Arab Emirates
  4. Singapore

OL instead of UL change the html list style un-ordered to ordered list.Ordered list is the abbreviation of OL. Slightly ahead, You can clearly see the above html code, We utilize start="1" this is look like a command for a compiler to start html list with given query.Same apply this html code but change its type default to alphabets. See the example below.

HTML Code Result
 <OL type=”a”>
<Li>United States</Li>
<Li>United Kingdom</Li>
<Li>United Arab Emirates</Li>
<Li>Singapore</Li>
<OL>
  1. United States
  2. United Kingdom
  3. United Arab Emirates
  4. Singapore

You can see that, above html code shows the country’s name in ordered list with lower case alphabet. Now we abbreviate the whole ordered list types in the below table. You can pick one of these to expand your code style.

 Ordered List Types with Code  Result
Type=”A”  A,B,C,D,E,F and so on 
Type=”a”  a,b,c,d,e,f and so on
Type=”I”  I,II,III,IV,V and so on
Type=”i”  i,ii,iii,iv,v and so on
Type=”1″  1,2,3,4,5 and so on

Grab these types of code and put inside UL and OL tags.Usage of above tags and its types, you can develop attractive lists in html. Recapitulate the ordered and un-ordered list ,We can utilize these html list tags in our content paragraphs during writing or development procedure. In the next article, we will briefly guide about html tables. For further query and question concern html ordered and un-ordered list use below comment box.

HTML 5 Marquee Tag with attributes

HTML 5 Marquee Tag with attributes:

HTML 5 marquee tag is utilized to scroll specific text or string in particular direction. HTML marquee tag is common same like other html 5 tags. We will learn about html marquee tag with new additional attributes. As everyone knows, If we need something else in scroll form then we utilize this tag. In above line, I mentioned about additional attributes like direction of string, marquee scrolling speed, marquee stop if cursor over on string and again if cursor out on string, marquee scrolling in loops and many more additional attributes. Mostly we utilize this marquee tag in news headlines on website under header. Let’s start, Hopefully all  we know about this one simple marquee.

<html>
<title>Marquee tag tutorial by knowledgeidea.com</title>
<head></head>
<body>
<marquee>Breaking news:Wordpress have multiple features</marquee>
</body>
</html>

Above marquee code is quit simple. Now adding some additional attributes inside marquee to enhance marquee tag.

<html>
<title>Marquee tag tutorial by knowledgeidea.com</title>
<head></head>
<body>
<marquee behavior="scroll" bgcolor="yellow" onmouseover="this.stop();" onmouseout="this.start
();">Breaking news:How are you pakistan... how about you</marquee>
</body>
</html>

Keep attention on above marquee code, In which you will see some code like behaviour=”scroll” this attribute scroll string or text with consistency. Slightly ahead, you will see bgcolor=”yellow” using for background colour, hope you already familiar with background colour attribute. Slightly ahead, you will see onmouseover=”this.stop();” It does stop scroll the text when someone else take cursor over the text or string. Next is onmouseover=”this.start();” It does starts scroll the text when someone else take out cursor over the text. 

Now add few attribute in the above marquee tag. You can see that, we are going in depth of marquee tag on every turn. Let’s see.

<html>
<title>Marquee tag tutorial by knowledgeidea.com</title>
<head></head>
<body>
<marquee behavior="scroll" bgcolor="yellow" scrolldelay="5" loop="3">Breaking news:How are you pakistan... how about you</marquee>
</body>
</html>

As we said above, We can take control on marquee speed easily. You will find scrolldelay=”5″ this attribute monetize the marquee speed with accuracy. This attribute delay the marquee with the provided number of value, you can try 5,10,100 number values etc with scrolldelay=”number values”as yourself for practice. Few characters ahead, you can see  loop=”3″ this attribute work as a scrolling loop means that, if you put 3 number value of loop then its scrolls the text three-time and stop after finish the loop.Some important marquee attributes are explicitly explain given as under.

Attributes Value Short description
bgcolor=”Green” Name of color & color code like, #fffff Use for background color.
behavior=”Scroll” Value could be Scroll,Slide,right,left,up,down,alternate Use for scrolling direction.
onmouseover=”this.stop();” Value must be this.stop(); Use for stop scrolling text or string.
onmouseout=”this.start();” Value must be this.start(); Use for start scrolling text or string.
Scrolldelay=”5″ Value in Numbers Use for delay reduce/delay time in marquee.
scrollamount=”10″ Value in Numbers Use for increment/Grow in speed.
Loop=”4″ Value in Numbers Use for circling/loop text with in given value of number
width=”12px” height=”12%” Both attributes value in numbers or percentage User for adjust marque area/height or width

Above all attributes are mentioned with short description, you can simply add these attributes inside marquees and try it yourself. Hopefully you will see satisfy result. I personally suggest you 🙂 See the list of important html 5 tags.

Let us know, about your opinion and skillful ideas. If you have further query then you can comment below. You can subscribe our newsletter to keep update yourself. Your feedback is respectful for us.