HTML Images and Comments: Welcome to Ushanand Academy, Now we will discuss about Learn HTML Images and Comments. In This Article will take you through all the important Learn HTML Images and Comments, so let’s start looking at them one by one.
Learn HTML Images
HTML Images: Drawing many complex concepts on your web page in a simple way and beautifying pictures is very important. This tutorial will take you through the simple steps to use images in your web pages. Please Read & Learn All Articles of HTML Tutorial Series.
Insert Image
You can insert any image into your web page using the <img> tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, meaning, it can contain only a list of attributes and no closing tag.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
You can use a PNG, JPEG or GIF image file depending on your ease, but make sure you specify the correct image file name in the src attribute. The name of the image is always sensitive.
The height attribute is a mandatory attribute that specifies an optional text for the image, if the image cannot be displayed.
Set image location
Usually we keep all images in a separate directory. So let’s put the HTML file test. HTML in our home directory and create a sub-delimited image inside the home directory where we will test our image.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
Set Image Width/Height
You can determine the width and height of the image based on your requirement using the width and height attributes. You can specify the width and height of an image in terms of the percentage of pixels or its actual size.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
Set Image Limit
By default, there will be a border around the image, you can specify the border thickness in terms of pixels using the border attribute. A thickness of 0 means no boundaries around the image.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
Set image alignment
By default, the image will align on the left side of the page, but you can use the align attribute to set it to center or right.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
Free web graphics
For free web graphics including patterns you can see free web graphics.
Learn HTML Comments
HTML Comments: Comments is a piece of code that is ignored by any web browser. It is a good practice to add comments to your HTML code, especially in complex documents, to indicate sections of a document, and to any other notes that look at the code. Comments increase the code’s readability. And helps you understand your code.
Html Comments <-! … -> placed between tags. Therefore, any content <-! … -> will be treated as a comment with tags and will be completely ignored by the browser.
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
Valid vs Invalid Comments
Comments do not create a nest which means that a comment cannot be placed inside another comment. The second double-dash sequence “-” cannot appear inside a comment except as part of the closing -> tag. You should also ensure that there are no spaces in the start-in of the comment string.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
However, the following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.
Multilingual comments
HTML also supports multi-line annotations. But, so far we have seen single line comments.
You can comment multiple lines by special start tag <! – And the last tag -> is placed before the first line and at the end of the last line as shown in the example below.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>
Conditional comments
Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored by other browsers. They are supported from Explorer 5 onward, and you can use them to give conditional instructions in different versions of IE.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>
You will come across a situation where you will need to implement a different style sheet based on different versions of Internet Explorer, in which conditional comments are helpful.
Using comment tags
There are some browsers for commenting on a portion of HTML code that support the <comment> tag.
Note – The <Comment> tag in HTML5 has been removed. Do not use this element.
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>
Script code comment
Although you will learn JavaScript with HTML in a separate tutorial, here you have to keep in mind that if you are using Java Script or VB Script in your HTML code, put that script code inside the appropriate HTML comments. Is recommended so that older browsers work properly.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>
Style sheet comment
Although you will learn to use style sheets with HTML in a separate tutorial, here you have to note that if you are using cascading style sheets (CSS) in your HTML code, then that style sheet inside the appropriate HTML annotations Is recommended. To insert code. So that older browsers can work properly.
For Example:
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>
