HTML/HTML5 Tutorial

Saturday, January 13, 2018

How To Create Image Gallery In Html

Hello Friend My Name Is Viraj,Today I Will Create Image Gallery And Display On A Webpage.The emergence of CSS3 technology has enabled web designers to display images in a more interesting format without the need for jQuery. In this tutorial I would like to show you a simple way to animate an image gallery using HTML and CSS3.Sometimes you just want a simple Image Gallery. With no php, javascript or flashy Adobe flash required. Just simple, quick and dirty HTML that you can type out and be done with your post.The images you want to use in their Original format.Every image in a thumbnail format (duplicates, preferably in 150x150px).Optional: HTML editor with color coding.This article will provide code snippets on how to make an image gallery using nothing but CSS3. This will be of particular use for sites that specialize in showing images, or for commerce sites that use thumbnail images of products and want the functionality of enlarging the images.There are two variants of the demo: demo 1 and demo 2. While the variations are extremely similar, they do exhibit different characteristics. As we step through the code, those differences will be noted. The original author of this code is unknown. The site from which I discovered how to create this image gallery does not list the developer’s name.Let’s get started with placing the images on the screen. This will be done simply by floating the images to the left. There will be four rows that contain four pictures each and will be set at 25% height and width. The borders are placed in a container through box-sizing.In this tutorial you will learn how to create a simple and effective html photo gallery using a little JavaScript that you might need for your portfolio or a personal project.As this will be just a simple html photo gallery, when you hover the thumbnails, we will change the source of images just by using a single line of JavaScript, so the difficulty should be easy.Here In This Html Tutorial We Will Create Image Gallery In Html/Css/Javascript Code.Here In This Blog We Will Create Image Gallery In Html/Css/Javascript Code.Here Is An Example Related To Topic Bellow....................

So Let Begin With Our Coding............

Step 1 :

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="E:\sheru_pick\IMG_20160603_225817.jpg">
<img src="E:\sheru_pick\IMG_20160603_225817.jpg" alt="Baby Lab" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="E:\sheru_pick\IMG_20160605_195420.jpg">
<img src="E:\sheru_pick\IMG_20160605_195420.jpg" alt="Baby Lab" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="E:\sheru_pick\IMG_20160605_195420.jpg">
<img src="E:\sheru_pick\IMG_20160605_195420.jpg" alt="Baby Lab" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="E:\sheru_pick\IMG_20160607_151914.jpg">
<img src="E:\sheru_pick\IMG_20160607_151914.jpg" alt="Baby Lab" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>

</html>

Output :

Thursday, January 11, 2018

How To Create a Modal In html

Hello Friend My Name Is Viraj,Today I Will Create a Modal And Display On A Webpage.
We’ve familiarized ourselves with HTML and CSS; we know what they look like and how to accomplish some of the basics. Now we’re going to go a bit deeper and look at exactly how elements are displayed on a page and how they are sized.In the process we’ll discuss what is known as the box model and how it works with HTML and CSS. We’re also going to look at a few new CSS properties and use some of the length values we covered in Lesson 3. Let’s begin.Before jumping into the box model, it helps to understand how elements are displayed. In Lesson 2 we covered the difference between block-level and inline-level elements. To quickly recap, block-level elements occupy any available width, regardless of their content, and begin on a new line. Inline-level elements occupy only the width their content requires and line up on the same line, one after the other. Block-level elements are generally used for larger pieces of content, such as headings and structural elements. Inline-level elements are generally used for smaller pieces of content, such as a few words selected to be bold or italicized.Exactly how elements are displayed—as block-level elements, inline elements, or something else—is determined by the display property. Every element has a default display property value; however, as with all other property values, that value may be overwritten. There are quite a few values for the display property, but the most common are block, inline, inline-block, and none.We can change an element’s display property value by selecting that element within CSS and declaring a new display property value.The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element.The previous chapter introduced the basic text formatting properties of CSS, but that was only one aspect of styling pages. Defining the layout of a web page is an entirely different beast. That’s what this chapter is about.The “CSS box model“ is a set of rules that define how every web page on the Internet is rendered. CSS treats each element in your HTML document as a “box” with a bunch of different properties that determine where it appears on the page. So far, all of our web pages have just been a bunch of elements rendered one after another. A big part of your job as a web developer will be to apply rules from the CSS box model to turn a design mockup into a web page. As you work through this chapter, you might find yourself wondering why we have to learn all these rules instead of just uploading a giant static image of a web page (i.e., a mockup) to a web server and calling it a day.Indeed, this would make life a lot easier; however, if we didn’t separate out our content into HTML, search engines would have no way to infer the structure of our web pages, we couldn’t make our site responsive, and there would be no way to add fancy animations or interactivity with JavaScript. That’s a big enough trade-off to make CSS a worthwhile cause.This chapter covers the core components of the CSS box model: padding, borders, margins, block boxes, and inline boxes. You can think of this as the “micro” view of CSS layouts, as it defines the individual behavior of boxes. In future chapters, we’ll learn more about how HTML structure and the CSS box model combine to form all sorts of complex page layouts.The box model is our toolkit for customizing this default layout scheme. A value of block will make that element a block-level element.Here In This Html Tutorial We Will Create a Modal In Html/Css/Javascript Code.Here In This Blog We Will Create a Modal In Html/Css/Javascript Code.Here I Will Give An Example Related To Bootstrap And How To Use It.Here Is An Example Related To Topic Bellow.

So Let Begin With Our Coding............

Step 1 :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Modal Example</h2>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>


<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">


<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

</div>

</body>

</html>

Output :

How To Use Progress Tag In Web Page

Hello Friends My Name Is Viraj,Today I Will Use Progress Tag On Your Web Page.As per the standard defined by W3C, the progress element represents the completion progress of a task. A progress element must have both a start tag (i.e. <progress>) and an end tag (i.e. </progress>), even though it looks like a replaced element (like an input). This is good though, as it helps with fallback content as we'll cover later.Apart from the global attributes, it can have two more attributes:
max - Indicates how much task needs to be done before it can be considered as complete. If not specified the default value is 1.0.
value - Indicates the current status of the progress bar. It must be greater than or equal to 0.0 and less than or equal to 1.0 or the value of the maxattribute (if present).

Note that only adding the max attribute doesn't change the state of the progress bar because the browser still doesn't know what value to represent.This is pretty much all that we can do in HTML as rest of the work is done by CSS. At this stage let's not worry about the fallback techniques for supporting older browsers that don't understand the progress element.HTML5 introduced the progress bar element, which allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progressIn this article, we will discuss how to add this element in the document, how to style it with CSS and animate the progress bar meter.The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than zero and be a valid floating point number. The default value is 1.This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.A simple code example of creating a Line shaped progress bar and animating it from 0% to 100%. See the install documentation for different installation options.A few examples of using ProgressBar.js which can be quickly tested in JSFiddle. You can submit your own example suggestions to this issue.Hello Friend My Name Is Viraj,Today I Will Use Progress Tag And Display On A Webpage.Here In This Html Tutorial We Will Like To Show How To Use Progress Tag In Web Page Using Html Code.Here In This Tag Value And Max Is Define As Show In Code.Here Is An Example Related To Topic.

So Let Begin With Our Coding............

Step 1:

<!DOCTYPE html>

<html>

<body>

Downloading progress:

<progress value="22" max="100">

</progress>

</body>

</html>

Output :

How To Use Audio Tag In Html

Here In This Html Tutorial We Will Show The Functionality Related To Audio Tag.When writing in HTML, the <audio> tag is an inline element used to embed sound files into a web page. It is useful when you want to add any audio, such as a song or interview, to your web pages. The following sections contain information about this tag, including an example of it in use, as well as related attributes and browser compatibility.Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair; all tags support standard attributes. The following table shows all of the current unique HTML attributes for the <audio> tag, as well as a description of each.The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source>element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.It is recommended that both height and width to be directly proportional to avoid problems.

To hide the player the value of the hidden attribute (which is false at the moment) will be replaced by true. This thing is done if you are absolutely sure that the user does not wish to stop the sound.The HTML <audio> tag is used to embed audio in web pages.he HTML <audio> tag is used to specify audio on an HTML document.HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".In our series on HTML5, we've discussed geolocation, link relations, form and keyboard events, media events, mouse events, global attributes and multimedia. This week we're going to expand upon our discussion on multimedia and delve further into HTML5's <audio> tag.The <audio> tag is new to HTML, like the <video> tag, and allows developers to embed music on their websites (and unlike earlier attempts to add audio to a website, it isn't limited to old-fashioned midi music). That said, it does have limitations on the types of files that can be used. Currently any recent browser that is based on Webkit, such as Chrome and Safari, supports the use of regular .mp3 files. Others, such as Firefox, only support the .ogg format.The good news is that you can either convert your files from .mp3 to .ogg (one audio conversion tool, media.io, can be used online) or just supply two versions of your audio file, one in each format. When Safari, for instance, comes across the <audio> tag, it will ignore the .mp3 file and move directly to the .ogg file.In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg.The Tag Is Shown As, <audio> Tag.

Here Is An Example Related To <audio> Tag.

Step 1 :

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="Kick.ogg" type="audio/ogg">
<source src="Kick.mp3" type="audio/mpeg">

</audio>

</body>

</html>

Output :

How To Use Image Tag In Html

Here In This Html Tutorial We Will Show The Functionality Related To Image Tag.The HTML <img> tag is used to put an image in an HTML document.Before you use the <img> tag, you need to ensure that the image exists on the internet. You then reference the location of that image when using the <img> tag.The <img> tag is written as <img src="" alt=""> (no end tag) with the image URL inserted between the double quotes of the src attribute.The alt attribute provides alternative text for users who are unable to view the image. Some reasons why users can't view the image might include having a slow Internet connection, they are vision impaired and are using text-to-speech software, the image won't load for some reason, etc. Note that the alt attribute is a required attribute.The src attribute identifies an image by a URL. The image defined by the URL is retrieved by the browser and inserted into the document when the page loadIncluding an image from another website like this is sometimes called “hotlinking.” Not all external-URL images are “hotlinks” — only when you link to an image that is already on another sight so that you don’t have to download it yourself.Hotlinking is sometimes just fine. For instance, in the above example we hotlinked an image from Wikimedia Commons. This is a Public Domain image hosted by a media provider. No problem. However, it can be a problem in certain circumstances.First of all, if the image in question is under copyright, and you do not have permission to use it, you may be in violation of copyright laws by hotlinking. Because you aren’t actually putting the image on your site, there is a bit of a legal gray area here, but it is at least potentially a problem.Related to that, even if isn’t illegal, it may be immoral or unethical if you know that the image owner does not want you to hotlink their pictures. While you aren’t exactly “stealing” the image, you are using up their bandwidth and creating ill will.Finally, if you don’t control the hotlinked image, it might change. Sometimes this just happens because sites go down or get rearranged. However, sometimes a perturbed site owner will deliberately change an image in response to hotlinking.

Hotlinking to an image hosting service is just fine, and it’s also reasonable to hotlink an image in a casual conversation on a forum or blog comment. But if an image is an integral part of your content (even if the content is a link to the image’s original source), you really should save the image to your own server.The Tag Is Shown As, <img> Tag.A relative URL does not include the domain name, and is relative to either the current page, or the current domain. If you begin the URL without a slash ( / ), it will be relative to the current page. If you begin with a slash, it will be relative to the domain.It is almost always the best idea to use source URLs which are relative to the domain, not the page. They will not break if the page content is moved or copied.
Additionally, when linking to images on your own site, it is almost always best to use relative URLs rather than absolute URLs. This way, the URLs won’t break when you change domains (which will happen automatically if you use a development or staging server in addition to your production one).HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.The <img> element, like most elements, is a container. It is not an image in and of itself, but a receptacle for one.Just as the p element holds a paragraph, the img element holds an image. However, it does so in a entirely different way. Most notably, the image is a separate file that loads into the space created by the img element.There are three types of image files used in HTML, indicated by different filename extensions: .jpg, .gif and .png (also know as JPEGs, GIFs and PINGs); which we will look at next.Let's first take a look at what I used to display the image below. Note that there is no closing tag. It's one of the few elements that doesn't use them.

Here Is An Example Related To <img> Tag.

Step 1 :

<!DOCTYPE html>
<html>
<body>

<img src="IMG_20160607_152001.jpg" alt="Puppy" width="500" height="600">

</body>

</html>

Output :

HTML/HTML5 Tutorial

Saturday, January 13, 2018

How To Create Image Gallery In Html

Thursday, January 11, 2018

How To Create a Modal In html

How To Use Progress Tag In Web Page

How To Use Audio Tag In Html

How To Use Fieldset Tag In Web Page

How To Use Marquee Tag In Html

How To Use Image Tag In Html

How To Create Image Gallery In Html

Search This Blog