Adding Images
Images on HTML
20 September 2022 (Week 4)
Mabuchi ARATA / 0351579
Typograohy / Bachelor of Design (Hons) in Creative Media1, Introduction
From last week, we've started to learn about the way to use HTML, this week, due to lecturer's illness, we had no lesson and I have spend time doing to complete different lacture's task, however , I just checked the google slide provided for Friday's lecture (I couldn't attend to the Friday lecture because I had work to do for social innovation...). The lecture was about insering images into a HTML file. This is what I've got from the slide in google classroom.
2, What I've got?
1, Inserting image
In the website design, you must feel like expressing information through images. when you want to add images in your HTML website, use <img> tag to your websie. This is the single sided tag that you can insert your image by just adding image file name with file type or URL and add size of an image to show any images on your website.
<img src="6.JPG">
As the example shows, once you state the tag by using the sign called "img", you need to just insert your image name after the satement of src, make sure you must save your mage file if you want to upload images from your computer.
You can also add attlibute to describe an image in the HTML by inserting sign "alt" which can be used to insert additional information to the image.
You can also resize your images by adding command of weight and height, this can be done by just adding the keywords of "height" and "weight", after the statement of the name of th file saved in the same pkace where HTML files are saved. Make sure the unit for the size is using "pixel" to adjust the size of the image.
2, Different images
Before you insert any images on your HTML files, you must understand the ideas of basic three different image file ideas, JPG, PNG and GIF, these three different imgage file ideas are most familier type of image file and you must understand for better website developing.
・JPG is the short term of "Join Photographic (Experts) Group" which is the one of most used image file.This image file usesfile compression to reduce file size but it remains the quality of image itself. (It uses lossy compression, so it can be said that the quality of an image itself is decresed bit)
・PNG is the short term of "Portable Networks Graphic". This type of image file requires bigger size of images, this is because in PNG image file uses lossless compression which can maintain the quality of image compared to the lossy compression, therefore it can be said that PNG has better image quality compared to the JPG image file. Another point that PNG image file can do is PNG file can handle tansparent background, unlike JPG image file with uses white for background, PNG fie can use transparent
background which means PNG file is better to use in designing logos.
・GIF is the short term "Graphic Interchange Format". This is the unique image format compared to the other image type. Even through it uses lossless compression (which suppose to maintain quality of original file), the maximum available colour is about 256 colours, as the results, the GIF image file has smaller file size compared to other image fies like GIFnad PNG files. The another important feature that only GIF file can do is combining multiples image file to make an animation. This feature ables to create moving image in the image files, however the limitation of image file itself redices the quality of image...
As I mentioned the all three main image file features, all of them has different advantages and disadvantages, you must handle all of pros and Cons of these image files to create good websites.
3, Attributes
Attribute is basically any identification of elements to create hierarchy on your website, it helps to create elemets that you want to emphasise more compared to the other elements in the website. There are mainly two different attribute ideas are existed, ID and Class attribute. These attribute ideas can' work alone, you must use CSS rule (Group of one or more CSS properties (Specific rules for HTML) which are to be applied to one or more target HTML (keyword for accessing specific websites) → Group of one or multiple numbers of specific HTML rules that can be applied to one or more numbers of specific keyword for particular websites) to indicate words ,that developers want to emphasize in the websites, to be displayed as we want to show in the screen.
・ID attribute
It is the attribute to ideantify the elements show in the HTML from other elements in the one particular HTML page, this is essential to emphasise only one element has same value for the ID attribute to make attribute unique.
・Class attribute
This attribute can provide an element a unique identify to make it different to other instance of the same elements on the same page. Unlike ID attribute, this can be used to identify group of elements in the web page and it can emphasise multiple pararaph on the page.
As the paragraph shown above you can understand the ideas about attributes as the way to identify the elements existing in the HTML pages. ID attributes only emphasises one particular element on the other hand, Class attributes can emphasise multiple number of group emlements in same file. Make sure to understand the feature of both attributes to use wisely to emphasise ket eements in your HTML websites.
4, References
Adobe JPG vs PNG
WhatIs.com PNG (Portable Network Graphics)
Adobe GIF file
JENKOV.COM CSS Properties and CSS rules
w3 schools HTML <form> target Attributes
コメント
コメントを投稿