Html-Images & Pictures
Html – images & pictures
Images are considered as a staple for any web designer, so it is of utmost importance for you understand how to utilize them properly. In order to locate an image onto a website, one requires knowing where the image file is placed within the file tree of the web server — the URL (Unified Resource Locator).
In order to place an image on your webpage utilize the <img /> tag. Like the <br /> tag, <img /> tag does not need a formal ending tag. However, all we need to do to close this tag out with a slash (/) located just within the ending bracket (/>).
HTML Image Code:
|
1 |
<img src="http://www.htmlfreecodes.com/blog/wp-content/uploads/2017/01/sunset1.jpg" /> |
HTML Image:
 |
We’ve presented a global URL of an image we have saved on Html free codes web server so that you can keep on with us. You should be able to utilize the URL in the example to submit this image on your own web page, if you have an active connection to the internet. If not, you will have to download (right click the image and Save As…on a PC, control-click and Save on a Mac). Once stored to your local computer, point the image src characteristic to the lately downloaded image file. It might help to store the image file in the same folder as your web page.
Html – image src characteristic
What makes an image tag display an image is the source characteristic (src). An image source is a URL value and should point to the directory place of an image file. Let’s take one more look at the code from our first HTML image example.
HTML Image Code:
|
1 |
<img src="http://www.htmlfreecodes.com/blog/wp-content/uploads/2017/01/sunset1.jpg" /> |
An image source value is fundamentally the URL of a picture file. It tells the web browser where the image is located so that it can then show the image properly.
Html – source urls
Image source URLs can be either local or global, it means that that the picture files you want to show on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).
- Global: http://www.htmlfreecodes.com/blog/wp-content/uploads/2017/01/sunset1.jpg
- Local: blog/wp-content/uploads/2017/01/sunset1.jpg
Local URLs are proportionate to the file root of the web page itself. For example, if the picture file is located inside the same directory as the web page, then the local URL for the image would basically be the name of the image, as it is dwelling in the identical directory as the HTML page.
Local URLs Explained:
| Local Src | Location Description |
| src=”sunset1.jpg” | picture file resides in same directory as .html file |
| src=”01/sunset1.jpg” | picture file resides in the pics directory |
| src=”../sunset1.jpg” | picture resides one folder “up” from the .html file |
| src=”../wp-content/uploads/2017/01/sunset1.jpg” | picture file resides in the pics directory, one folder “up” from the .html file. |
In order for you to utilize local URLs pictures must dwell on the same web host as your html file. A URL cannot include drive letters such as C:\, as a src URL is a relational interpretation according to the location of the.html file and the place of the picture file. Something like src=”C:\www\web\pics\” will not work.
Each URL format has its pros and cons. Utilizing the URL of pictures on other sites raises a problem if the other site vary the physical place of the picture file. Copying the file straight to your web server solves this problem. However, as you keep on uploading picture files to your system, you may finally face shortage on hard drive space. Utilize your best judgment according to your condition.
Html – image height and width characteristics
Height and width which are HTML characteristics define an feature’s height and width assets. These values can either be percentage-based (%) or based on pixel sizes.
HTML Height and Width Characteristics:
|
1 |
<img src="sunset1.jpg" height="50" width="100" /> |
HTML Height and Width (Pixels):
|
Above, we’ve utilized hard-coded pixel values for the height and width of the sunset image to make sure that this image will always submit 50 pixels high by 100 pixels wide. We make sure that the image will just show 50 pixels high by 100 pixels wide, through hard-coding these values even if the picture file itself happens to be much larger. We risk some severe skewing as the browser wants to recoil our image into our small box, if the aspects of the picture are much larger.
Height and width values can be a percentage as well. Percentage values are associated with the parent HTML feature (usually the body). It means that an image with a height and width of 100% will gather that whole body feature (1024×768) if you have a parent feature like a <body> feature that is the whole screen (1024×768). In our example below, we have located the image in a table feature that is about 400 pixels wide by 200 pixels tall.
HTML Height and Width Code:
|
1 2 3 4 5 6 7 |
<table height='200' width='400'> <tr> <td> <img src="http://www.htmlfreecodes.com/blog/wp-content/uploads/2017/01/sunset1.jpg" height="100%" width="100%"> </td> </tr> </table> |
HTML Height and Width (Percentage):
|
|
This image is now pixelated, having been submitted to fill the 400×200 table feature. The reason we are seeing a low-quality, pixelated rendering of the image is because the actual image file is much smaller than 400×200 and has been stretched by the web browser as we coded it to do so.
When you are trying to locate images on your web page, a few things have to be remembered:
- Maintain the same height to width ratio.The ratio is crucial, and must be preserved to avoid skewing.
- Always scale down.— Larger images will always scale down well and keep on looking swindler.
If no height or width characteristic is stipulated within the <img> tag, the browser will use the real aspects of the image file to submit the image. If the picture file is too large this can raise issues with the page layout, as other HTML features will be moved further down the page in the presence of an over-sized image.
Another idea that should be noted is that as a browser starts submitting HTML parts, it manages them one after another in progression. Before it can move from one feature on to the next, the browser requires understanding the size and shape of an feature. If this information is presented in the tag, that’s one less step is needed by the browser to submit an image feature and will lead to faster page loading for your users.
html – alternative characteristic
If for some reason the browser cannot find the image, or if a user has image files disabled in their web browser settings the alt characteristic determines alternate text in order to be showed. Text-only browsers to a great extent depend on the alt characteristic as they are not able to show pictures.
HTML Alternative Characteristic (alt):
| <img src=”http://example.com/brokenlink/sunset.gif” alt=”Beautiful Sunset” /> |
HTML Alternative Text Characteristic:
| Beautiful Sunset |
The alt characteristic is also a characteristic that search engines may seek when showing images. In order to receive “credit” from a search engine the text value included within this characteristic must reflect the material of the image.
html – horizontally align images
Images can be arranged horizontally to the right or to the left of other features utilizing the align characteristic. Image features are arranged to the left by default.
- align
- right
- left
HTML Align Characteristic Code:
|
1 |
<img src="sunset.gif" align="right"> |
HTML Image Align: Right:
|
As you can see, the image’s right edge has now been arranged with the right edge of the display box. As the display box is the parent feature, this is the optimal behavior for the align characteristic. If we consider this example a step further, you can obtain some actually great designs by embedding aligned images within paragraph <p> features.
HTML Image Align Code:
|
1 2 3 4 5 6 |
<p>This is first line !!!</p> <p> <img src="http://www.htmlfreecodes.com/blog/wp-content/uploads/2017/01/sunset1.jpg" align="right"> The image will appear along the...isn't it? </p> <p>This is third line !! </p> |
Image Wrap Around:
This is first line !!!
This is third line !! |
Html gifs vs. jpegs vs. pngs
Gifs are best utilized for banners, clip art, and buttons. The main cause for this is that .gif files can have clear backgrounds — an invaluable characteristic when it comes to web design. On the down side, gif files are confined to only 256 colors and any .gif image including more than a few colors tends to have a larger file size than their jpeg or png counterparts. Enormous picture files are a epidemic of web design!
Jpegs have an unlimited color wheel and a high compression rate, which reduce the size of your load times and stores on hard drive space. Although .jpeg (or .jpg) files don’t allow for clear backgrounds, their size/quality ratio is outstanding. It’s best to use .jpeg files for photo galleries or artwork. Evade utilizing .jpeg files for graphical designs, though; keep on utilizing them for thumbnails, backgrounds, and photo galleries.
PNG image files which have a large color wheel, low file size, and allow for transparencies like .gif images do are the best of both worlds. They might just be the best format for any web graphics with a high-compression rate and clear coloring.
When you are not sure, try to store an image in multiple formats and decide which is better, keeping file size and quality in mind.
tips
- In order to edit your images find a good graphics editing program.
- A graceful load of your page will be possible via defining a height and width for your images