You are viewing the article How to Insert an Image in HTML at Tnhelearning.edu.vn you can quickly access the necessary information in the table of contents of the article below.
wikiHow is a “wiki” site, which means that many of the articles here are written by multiple authors. To create this article, 34 people, some of whom are anonymous, have edited and improved the article over time.
This article has been viewed 35,771 times.
Adding photos to your website or social media profiles is a great way to beautify your profile. The HTML code for inserting images is very simple, often the first lesson for HTML beginners.
Steps
Insert photos
- Some hosting blog services allow you to upload images using the blog’s admin tools.
- If you use a paid web host, upload photos to your site using an FTP service. Create an “images” folder to save files scientifically. [1] X Research Source
- If you want to use an image from another website, you’ll need to get permission from the creator. If they agree, you can download the photo to your computer, then upload it to a photo hosting service.
- If you want to insert an image into the forum, you can type it directly in the post. Many forums use a custom system instead of HTML. Ask other forum users if you don’t know how.
- <img>
- If you post images to the images directory on your website, link to the images using the /images/ filename path. If that doesn’t work, the image folder may be in another folder. Let’s move it back to the root directory.
- <img src=”http://www.exampleimagehost.com/my-cute-dog.jpg”>
- <img src=”http://www.exampleimagehost.com/my-cute-dog.jpg” alt=”my dog is eating tangerines”>
- If the image is not important to the content of the page, add the alt attribute without text (alt=””). [3] X Research Sources
Adjust options
- <img src=”http://example.com/example.png” alt=”display this” width=200 height=200> (pixels, or use “CSS pixels” on HTML5.) [5] X Source research[6] X Research source
- or <img src=”http://example.com/example.png” width=100% height=10%> (Percentage of website size or percentage of HTML elements in an image.)
- If you enter only one property (horizontally or vertically), the browser will adjust the rest by width:height ratio.
- <img src=”http://example.com/example.png” title=”Photograph by J. Godfrey”>
- <a href=”http://www.urloflink.com”><img src=”http://urlofimage.com/image.gif”></a>
Advice
- Keep a copy of the photo on your computer in case of an accident.
- Animations (GIFs) are suitable for logos or animations, while JPEGs are suitable for complex images such as photographs.
- Make sure the URL contains the image format (.jpg, .gif, etc.).
- In most cases, you should choose a .gif, .jpeg, .jpg or .png image format. [7] X Research Sources Other formats often do not display correctly in web browsers.
Warning
- Do not “hotlink” by inserting a URL from someone else’s website. This will use the bandwidth of that website without bringing them any visitors. Besides, hotlinked images will disappear if the other hosting website goes down. If the web host detects your behavior, they can change the image displayed on your website. [8] X Research Sources
wikiHow is a “wiki” site, which means that many of the articles here are written by multiple authors. To create this article, 34 people, some of whom are anonymous, have edited and improved the article over time.
This article has been viewed 35,771 times.
Adding photos to your website or social media profiles is a great way to beautify your profile. The HTML code for inserting images is very simple, often the first lesson for HTML beginners.
Thank you for reading this post How to Insert an Image in HTML at Tnhelearning.edu.vn You can comment, see more related articles below and hope to help you with interesting information.
Related Search: