imageslider_feature_img

Image Slider Using HTML and CSS

Hello Friends,

In this blog tutorial, I am going to show you how to make an image slider using HTML and CSS.

this is really very simple and attractive functionality and will help you to make your site amazing and beautiful.


How will you develop this functionality?

Softwares used for building this functionality are given below:

NetBeans IDE

Xampp Softwares

Once you have successfully installed this above software then you just create a project with an appropriate name. and create a few files inside that project. See the below image for the same.

imageslider_filestr.

 


once you create all the required files and images then just copy and paste the below code.

slider.html :

<!DOCTYPE html>
<!--
HTML code for building image slider.
-->
<html>
<head>
<title>Image Slider</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="slider.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="slider">
<figure>
<img src="sliimg1.jpg" alt>
<img src="sliimg3.jpg" alt>
<img src="sliimg4.jpg" alt>
<img src="sliimg5.jpg" alt>
</figure>
</div>
</body>
</html>

slider.css :

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}

In case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

html_attributesnew

HTML ATTRIBUTES

Hello Friends,

HTML attribute is the properties by virtue of which HTML element change its nature.

I make this simple to understand it better.

we take an example of a plain white wall which does not look impressive with its white look but when we paint the same wall with some amazing color then it starts looking attractive and we can also draw few pictures over a wall.

So, here color and pictures are the attributes of a wall which makes it beautiful and attractive.

In the same manner HTML attributes just like color, background color, style, fonts and etc make our HTML document more attractive and beautiful.

In simple language, we can say that HTML attributes do the makeup of our HTML document.

In our next tutorial, we will let you explain each attribute with an example.


In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

html_quotation_and_citation_element

HTML QUOTATION AND CITATION ELEMENT

Hello Friends,

In this blog post, I am going to explain about HTML quotation and citation.

First of all, you should know that what is HTML quotation and citation?

You would have definitely heard about single quotes(‘ ‘) and double quotes(” “). These are the quotation mark, when we keep any sentence or paragraph inside these quotation mark then it is considered as a quotation.


Where we use these quotation mark?

Generally, we use these quotation mark to express the words said by others in our writing, for example,

Merry said “She is learning HTML” If we want to write this without quotes then we will write this like:

Merry said that she was learning HTML. These were the example of direct and indirect speech. So quotation mark is used in case of direct speech.

We also use quotation mark to represent any special name or any other important sentence that has to draw some extra attention.

And citation if used to define the title of the work.

We will explain you all elements which are used to quotes the sentences and citation. See the below example for the same.


HTML <q> for Short Quotations:

This element is used to get a short quotation, browser adds the quotation mark to the text which is written between <q> and </q>. See the below example for the same.

<p>The goal of education is to: <q>make people understood about their rights and duty.</q></p>

HTML <blockquote> for Quotations:

This element is used to define a section which is quoted from another source. See the the below example for the same. Browser usually indent <blockquote> element means they leave some space before and after the quotation.

<p>Here is a quote from a5theory website:</p>
<blockquote cite="http://a5theory.com/aws-ses-complete-guide-to-setup/">
There is nothing like this, this is just a name given by them to their service may be AWS provides some additional service with this like SNS for spam and bounce configuration and etc…… so they just would have given this name. do not confuse with this name.
</blockquote>

HTML <abbr> for Abbreviations:

This element is used to provide the abbreviation or achronym to the specific word or sentense. This abbreviation gives an idea to the browsers, translation system and all serch-engine to display the information about any word or sentense. See the below example for the same.

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="A5theory">WHO</abbr> was founded in 2017.</p>

<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>

</body>
</html>

HTML <address> for Contact Information:

This element is used to display the contact information of(author/owner) of a document or an article. Usually they are displayed in Italic and most of the browsers leaves a line break before and after the address. See the below example for the same.

<address>
Written by Jen lee.<br>
Visit us at:<br>
A5theory.com<br>
United states<br>
USA
</address>

HTML <cite> for Work Title:

This element is used to display the title and it is usually displayed in Italic. See the below example for the same.

<p><cite>The A5theory</cite> by Anurag Tiwari. Developed in 2017.</p>

HTML <bdo> for Bi-Directional Override:

This element is used to define the bi-directional override and used to override the current text text direction. See the below example for the same.

<!DOCTYPE html>
<html>
<body>

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>
</html>

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!