Adjust image size in HTML not difficult. Here are the details Simple way to resize HTML images with everyone.
In this article, we will learn together about HTML Image, how to add images to HTML, along with knowledge about deploying and using it through each specific example.
Previously, in the early days, websites only contained text content. This makes them quite boring and uninteresting. Over time, programming technology has increasingly discovered that modern websites can now embed photos and even videos inside to attract more visits. All thanks to smart tags in HTML. With photos, img tags are indispensable.
In the tutorial below, you will learn how to add images to your website to attract more viewers and many other methods of inserting images using img in HTML. Basically, you have 2 ways:
Via the link or full URL to access the file online.
Provides the file path relative to the location of the current website file.
Image syntax in HTML
In HTML, images are defined by tags
Card is an empty tag, containing only attributes and no closing tag. Attributes src Specifies the URL (web address) of the image.
alt attribute
Attributes alt Used to add descriptive text to images. If for some reason the user cannot view the photo (due to weak network, attribute error src or use a screen reader).
The value of the alt attribute is the image description.
If the browser cannot find the image, it displays the attribute value alt.
Note: attribute alt is required. The website will not be valid if the image does not have this attribute.
Image dimensions – width and height
Use attributes style to determine the height and width of the image.
Also you can use attributes width and height.
Attributes width and height Always define the width and height of an image in pixels.
Note: Always specify the image size, otherwise it may be difficult for the website to load the image.
Width, Height or Style?
Attributes width, height and style are all valid in HTML5. However, it is recommended to use attributes style because it helps prevent the Style Sheet file from changing the size of the image.
The images are in another folder
If not specifically specified, the browser will look for the image in the same folder as the page. If you store images in a subfolder, you must include the folder name in the properties src.
The image is on another server
Some websites store photos on private servers. In fact, you can access images from any web address in the world.
Animation
HTML can display animated images (GIF).
Images act as links
To use an image as a link, provide a tag into the card
Note: border:0; added to prevent IE9 (and earlier) from displaying a border around an image (when the image is a link).
Embossed image
Characteristic float In CSS, it is used to make images float to the right or left of text.
Hình ảnh này sẽ nổi về bên phải văn bản.
This image will float to the left of the text.
Create maps using Image Map images
Card is used to define image-map, an image with areas that when clicked will have some effect, whatever you set. For example, with the following image, we will place click areas where the computer, phone and coffee cup are:
This is the code for the full .htm file, you can copy it to notepad, save it as a .htm file and run it on your computer.
Quantrimang.com
Click vào máy tính, điện thoại hoặc cốc cà phê trong ảnh để đi đến trang mới và đọc nhiều hơn về topic:
Attributes name of card attached to the tag's usemap attribute create a relationship between the image and the map. Element
includes cards Defines clickable areas in the image-map.
Background image
To add a background image on an HTML element, use the CSS property background-image.
Add a background image to the page, using the background-image property on the BODY element.
Hình nền
To add a background image on a paragraph in HTML, use the CSS property background-image.
Add a background image to the page, using the background-image property on the P element.
...
Element
HTML5 has additional elements for added flexibility when specifying image sources.
Element includes the number of elements , Each element references different image sources. This way the browser will choose the image that best suits the current viewing style and/or device.
Each element has properties that describe when to best match which image. The browser will use the element first matches the attribute value, ignoring elements after.
Shows a rose image if the viewport is at least 650px and a white flower image if it is at least 465px.
Note: Always use elements as the last child element in the element . Element is used by browsers that do not support the element use, or otherwise card Whichever is suitable.
Read HTML screen
A screen reader is software that reads HTML code and converts text, allowing users to “hear” the text. Screen readers are very useful for visually impaired people.
Caption photos with numbers
Speaking of captions, there are many ways you can add captions along with images. There's nothing stopping you from doing this because it's very easy to do in HTML.
For example:
Khủng long T-Rex trưng bày ở bảo tàng đại học Manchester.
That's it. It contains the content you need and can be styled with CSS. But there is a problem here: there is no semantic link between the image and the caption. That may cause screen reading problems. For example, when there are 50 images and captions, which caption should go with the image?
A better solution is to use components
and in HTML. They are created for this purpose. Sample code is as follows:
T-Rex trưng bày ở trường đại học Manchester.
In short, card used to add or embed images on a web page. The “img” tag is an empty tag. That means it can contain just an attribute list and no closing tag. Adding photos improves quality and enhances the design and visual structure of the website. Currently, the website does not directly add images to the web platform because images are linked to each web page using tags More convenient and has enough space to accommodate large photos.
Outstanding attributes of the card Need to remember:
Src Specify the path to the image.
Alt contains alternative content for the image.
Crossorigin used to import images from third-party sites, allowing cross-origin access to be used with canvas.
Height Determines the height of the image.
Width Determines the width of the image.
Ismap Specify an image as the server-side image map.
Loading used to specify whether the browser should delay loading the image until some condition is met or load the image immediately.