Images

HTML Images

The Image Tag

The image tag doesn't have a closing tag like other tags we have used. EX: <p>Text here </p>. With the image tag everything is contained int the first bracket of the tag.

Adding Images From The Internet

Open a web browser like Google Chrome.
Do a search for what you're looking for, I searched the term "tigers".
Then click on the Images link to show only image results.

Open a web browser like Google Chrome.
Do a search for what you're looking for, I searched the term "tigers".
Then click on the Images link to show only image results.

Select the entire image link from the top of the browser (mine is highlighted blue below)
Be sure the link ends in the .jpg, .gif, .png, .jpeg extension. Other file types may cause problems.

Here is my example image address link:

https://cdn.britannica.com/s:800x450,c:crop/83/195983-138-66807699/numbers-tiger-populations.jpg

Explanation:

https://cdn.britannica.com is the web server address (using DNS!). The real server address is just an IP address.

/s:800x450,c:crop/83/195983-138-66807699/ is the directory structure where the file is located.

numbers-tiger-populations.jpg is the actual image file.

We can now just paste that whole link into the image source tag to add it to our webpage.

<img src="https://cdn.britannica.com/s:800x450,c:crop/83/195983-138-66807699/numbers-tiger-populations.jpg

" alt="tiger" width="500">

The src attribute is giving the address to the image file located on the remote server.

Adding Your Own Images

The Secure Copy command is used to transfer files from computer to computer in Linux.

$ scp file.jpg username@to_host:/remote/directory/

So in our case it would be something like this:

scp /Users/dcool/Desktop/file.jpg pi@100.11.81.217:/var/www/html

Now that we've copied the file to our web server, we can add it to our web page with the img tag.

As long as your image file is in the "root" of the web server -> /var/www/html , you won't need a path name. If you put it in a folder, then you'd need to specify... Everything is relative to the web server root, so you can omit the full path...

Example: If I created a file called soccer on the web server, the absolute path is /var/www/html/soccer. But for our HTML we only need the path after the /var/www/html... So our img tag would look like this:

Report abuse