HTML & CSS - Images

Images play an important role in our society. They allow us to visually see what sometimes words cannot express or explain. In the case of webpages, images allow us to make the page more aesthetically appealing to attract an audience. “A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one.” (Duckett 97). Images help engage our audience with our webpage.

Within the fifth chapter of HTML & CSS, I had learned about adding and manipulating images in your webpage. To add images, you use the <img> element. This is empty tag which means that there is no closing tag (</img>). By adding a src to your <img> element, you are telling the browser where it can find the image. The value of src is set to a relative URL normally. The alt attribute allows you to add a small description of the picture. I had learned that the description isn’t an actual description that goes onto your webpage but instead describes the picture if you are unable to see it.

I had learned that images on a webpage are measured in pixels. Pixels are very small units that make up a digital photograph. “Images often take longer to load than the HTML code that makes up the rest of the page.” (Duckett 100). It is a good idea to alter the size of the image so the browser can edit the rest of the text so it leaves enough room for the image to load. This is when the text of a page appears before the pictures when loading or refreshing occasionally. This has happened to me many times before and the reason revolves around the size of the image.

Aligning your images is very important when organizing the content of your webpage whether it be horizontal alignment or vertical alignment. To align your images horizontally, you use the align attribute and set the value to either left or right, depending on where you want your picture placed (align=“left” or align=“right”). By aligning the picture to the left, it allows your text to shift to the right whereas by aligning to the right, your text shifts to the left. To align your pictures vertically, you set the value of your align attribute to either top, middle, or bottom (align=“top” or align=“middle” or align=“bottom”). This allows you to organize your webpage a little more, making it visually appealing.

Basically, the purpose of web design (in my eyes) is to make your webpage more attractive to the eye. By making it more attractive, it allows you to attract a larger audience. Images are significant to webpages because they provide a hint to the visitor as to what your webpage is about. For my webpage on music, I had inserted a picture I took of a small portion of my Spotify music list. After taking it, I had saved it into a folder created on my desktop titled “images” as the book had instructed me to save my image. Sadly, the image did not appear in my webpage how I wanted it to appear (size-wise) because I have not learned how to specify the size of the image. Although I have learned quite a lot from this book so far and am enthusiastic to find out what I will learn next.

What kind of people do you guys think should be skilled in web design?

Below I have inserted an image of the HTML code I created as well as the (not so great) view on Safari.

View in TextWrangler

View in Safari (as you can see, the picture is very big and doesn't show the text very well)