My Daily learning - How to Code Day 8 of HTML: Images

nolimit909 (68)in #coding • 5 years ago

Good Evening everyone,

This is the continuation of prep for my honorable discharge from my Military Service. I'm going back to school for computer science. For my prep @richatvns is mentoring me in Calculus and the field of computer science. I'm taking online video classes on Calculus 3, learning HTML, then CSS, followed by Javascript on W3Schools As well as learning blockchain technology through Steem at the same time.

Everyday rich is requiring me as a "proof of work" to show what I learned that day to him.

So we came up with the great idea why not help others, and make a quick easy to follow tutorial by posting what I learned each day.
Since I'm only doing 1 short tutorial a day, it's so easy to follow along and learn (should be under 5 min).
I get the added bonus of repeating the material, such that I truly understand it.

jetseparator.gif

You can try your own coding here using this link:
https://www.w3schools.com/html/html_images.asp

Images are important to web pages because they add style, design and sophistication. I will explain some of the basic coding relating to images here.

In HTML, images are defined with the < img > tag. If you just want to place a single picture on your web page the coding will look like this:

PICTURE CODING.PNG

After you open the file in a web browser it will look like this:

PICTURE BROWSER.PNG

You can also use the "alt attribute" to display text when for some reason your image does not display properly. This allows your viewer or reader to understand what the web page should have displayed, had the link worked properly.

This is what the coding looks like:

ALT ATTRIBUTE CODING.PNG

When we open it up in a web browser, you see the broken mirror icon, which represents an incorrectly posted image, along with the descriptive text next to it.

ALT ATTRIBUTE BROWSER.PNG