This shot will show you how to create your avatar and icon images.
An avatar in HTML is an image which really small circular. It is like an icon only that avatars pictures of persons, not things or symbols.
In Using Html and CSS, You can create a simple avatar.
Add your Html code.
<html>
<head>
<title>Avatar Creation</title>
</head>
<body>
<img src="path/to/and/name/of/your/image/file">
</body>
</html>
Add styles to your HTML file. This is where it happens: the creation of the avatar. We have to add height and width values to the image, and both values have to be the same to create a square shape. Using a border radius of 50%, we can convert our square shape into a circular one, basic mathematics.
Now in your CSS, you can add the following codes.
img.avatar{
height:50px;
width:50px;
border-radius:50%;
vertical-align: middle;
}
We have successfully made our avatar. So this is a breakdown of how our code did it.
Line 1: we start the HTML tag and close it on line 21.
Line 2: start the head tag and close it on line 12.
Line 3: make our page title using the title tag.
Line 4 to line 11: start and close the style tag, which contains our styling for the avatar image.
The body from lines 16 to 20 contains two img tags, which we shall use to create our avatar.