How to Add Images and Videos to an HTML Website on EC2

By Ravindra Bagale, trainer · LinkedIn · Last updated: 18 October 2026

1. Why a cloud engineer needs HTML and URLs

Why. You will not design websites; developers do that. But when a page or an image doesn't open on a server you run, the ticket comes to you. Users say "the site is broken", not "line 12 has a typo". To find the cause you must read the URL, the status code and the HTML the server sent.

What. Every item on a web page has its own URL:

1. The page itself, for example http://PUBLIC_IP/photo.html.
2. Every image on it, for example http://PUBLIC_IP/beach.jpg.
3. Every video, icon, CSS file and JavaScript file.

The browser asks for each one separately, and each one gets its own answer from the server.

Suppose we are YouTube. Its pages have two kinds of files:

1. Application files: the YouTube logo, the Home, Shorts and Subscriptions icons, the CSS and JavaScript. The YouTube team ships these with the site, and they are the same for everybody.
2. User-generated content: the videos and thumbnails that users upload every minute.

Both are served from URLs, and both can break.

2. HTTP status codes: what the server answered

Why. Every answer from a web server starts with a three-digit number, the status code. It tells you at a glance whether the request worked and, if not, whose side the problem is on. It's also a favourite interview question.

What. The first digit tells the family:

1. 2xx: success. 200 OK means the page was found and sent.
2. 3xx: redirect. The page is somewhere else and the browser is sent there, like call forwarding on a phone. 301 Moved Permanently means moved for good; 302 Found means moved for now.
3. 4xx: a problem with the request.
   • 401 Unauthorized: you must log in first.
   • 403 Forbidden: the server understood but will not give it to you.
   • 404 Not Found: there is no such page.
4. 5xx: a problem on the server. 500 Internal Server Error is a general server-side error; 503 Service Unavailable means the server can't handle the request right now.

Example 1: three URLs on your server. Suppose /var/www/html has only index.html:

1. http://PUBLIC_IP/ gives 200 OK and shows index.html.
2. http://PUBLIC_IP/index.html gives the same page, also 200 OK.
3. http://PUBLIC_IP/contact.html gives 404 Not Found, because there is no such file.

Example 2: no index.html at all. Delete or rename index.html and open http://PUBLIC_IP/ again. On Amazon Linux, Apache now shows its own test page ("It works!"), and the status code of that answer is 403 Forbidden. Apache doesn't list the files of the folder; it shows the test page instead, to say "the web server runs, but there is no home page yet".

You can see the code with curl on the server:

[ec2-user@ip-172-31-xx-xx ~]$ curl -s -o /dev/null -w "%{http_code}\n" http://localhost/
403

-o /dev/null throws the page away and -w "%{http_code}\n" prints only the status code. Put index.html back and the same command prints 200.

3. Seeing status codes in the browser: DevTools

Why. A page is many files. When one image is missing, the page still opens, so you need a way to see the answer for each file.

How.

1. Open the page in Chrome, Edge or Firefox.
2. Right-click anywhere on the page and choose Inspect (or press F12).
3. Click the Network tab.
4. Reload the page (F5).
5. Every file the page loads appears as one line. The Status column shows its code: 200, 404 and so on.

Example 3: what you will see.

1. On your own small page: one line for the HTML file and one for each image, all 200.
2. On a big site, suppose Instagram: dozens of lines appear and keep appearing, because the page keeps loading files and data in the background.
3. On a second reload you may see 304 Not Modified: the browser already had a fresh copy, so the server didn't send the file again.

4. Folders under /var/www/html become URL paths

Why. A real site has many pages and images. Keeping them all in one folder becomes a mess, so you make folders. You must know how a folder on the server turns into an address in the browser.

What. /var/www/html is the root of your website. Everything after the IP in the URL is a path inside that folder:

1. /var/www/html/index.html is http://PUBLIC_IP/.
2. /var/www/html/about.html is http://PUBLIC_IP/about.html.
3. /var/www/html/myphotos/gallery.html is http://PUBLIC_IP/myphotos/gallery.html.
4. /var/www/html/myphotos/images/beach.jpg is http://PUBLIC_IP/myphotos/images/beach.jpg.

Example 4: a missing folder name. gallery.html is inside myphotos, so http://PUBLIC_IP/gallery.html gives 404 Not Found. Apache looks for /var/www/html/gallery.html, and there is no such file. The folder name must be in the URL.

How. Make a services folder with two pages:

Step 1. Go to the web root:

cd /var/www/html

The folder belongs to root, so every change needs sudo:

sudo mkdir services
sudo nano services/service1.html

Step 2. Type <h1>Service 1</h1>, then save with Ctrl+X, Y, Enter.

Step 3. Make services/service2.html the same way, with <h1>Service 2</h1>.

Step 4. Open http://PUBLIC_IP/services/service1.html and http://PUBLIC_IP/services/service2.html.

A page outside /var/www/html is never served. A file you make in your home folder (/home/ec2-user) gives 404 however you type the URL.

5. After a stop and start: Apache and the public IP

Why. To save money you stop your instance when you finish practising. When you start it the next day, the site doesn't open. Two things changed.

What.

1. Apache is stopped. Starting the server does not start Apache unless you told it to.
2. The public IP is new. An instance without an Elastic IP gets a new public IPv4 address at every start.

How.

Step 1. Start the instance in the EC2 console and copy its new Public IPv4 address.

Step 2. Connect with SSH using the new IP.

Step 3. Start Apache:

[ec2-user@ip-172-31-xx-xx ~]$ sudo service httpd start
Redirecting to /bin/systemctl start httpd.service

The second line is normal. On Amazon Linux the old service command passes the job to systemctl, the tool that manages services, and says so.

Step 4. Tell Linux to start Apache at every boot. You run this only once per server:

[ec2-user@ip-172-31-xx-xx ~]$ sudo systemctl enable httpd
Created symlink /etc/systemd/system/multi-user.target.wants/httpd.service → /usr/lib/systemd/system/httpd.service.

Step 5. Open http://NEW_PUBLIC_IP/.

6. HTML basics: tags, head and body

Why. Developers give you the pages, but you must be able to open one, read it, and change a line, for example an image address, without breaking it.

What. HTML is written with tags in angle brackets:

1. An opening tag: <h1>.
2. The content.
3. A closing tag with a slash: </h1>.

Most tags come in pairs like this. A few tags have no content and no closing tag. <img> is one of them: you write <img src="beach.jpg"> and that's all.

A page has two parts inside <html>:

1. <head>: information about the page. The title shown on the browser tab, the small icon on the tab, and links to the CSS and JavaScript files. It isn't shown inside the page.
2. <body>: what you see: headings, text, images, videos.

Suppose we are YouTube. The tab text "YouTube" and the red icon on the tab come from the head. The videos, the search bar and the menu you see on the page are in the body.

The tags you will use most:

1. <h1> to <h6>: headings. h1 is the biggest, h6 the smallest.
2. <p>: a paragraph of text.
3. <li>: one item of a list, inside <ul> (a list with bullets) or <ol> (a numbered list).
4. <img>: an image.

And two words you will hear with HTML:

1. CSS is code that makes the page look good: colours, fonts, spacing, layout.
2. JavaScript is code that makes the page do things: menus that open, buttons that react.

Example 5: a complete small page.

<html>
<head>
  <title>Dubai</title>
</head>
<body>
  <h1>Welcome to Dubai</h1>
  <h2>Come and see the desert</h2>
  <p>Three days, two nights.</p>
  <ul>
    <li>Desert safari</li>
    <li>City tour</li>
  </ul>
</body>
</html>

1. The browser tab shows Dubai.
2. The page shows a big heading, a smaller heading, one line of text and a list with two bullets.

7. Your first image on a page

Why. Almost every page has images, and a broken image is one of the most common tickets.

What. The <img> tag shows an image. Its src attribute (source) says where the image is: a full URL, or a file name on your own server.

How.

Step 1. Start Apache and go to the web root:

sudo service httpd start
cd /var/www/html

Step 2. Make a new page:

sudo nano photo.html

Step 3. Type one line, with the address of an image (we'll see where to get it in the next section):

<img src="https://IMAGE_ADDRESS">

Step 4. Save with Ctrl+X, Y, Enter.

Step 5. Open http://PUBLIC_IP/photo.html.

That one line is enough. The browser adds the missing <html>, <head> and <body> by itself. For a real page, still write the full structure from Example 5.

Resizing. A photo from a camera is often wider than the screen. Add width:

<img src="https://IMAGE_ADDRESS" width="600">

1. width="600" means 600 pixels wide. Write only the number.
2. When you give only the width, the browser scales the height in the same proportion, so the image keeps its shape.
3. height="400" works the same way for the height. If you give both, the image can look stretched.

Example 6: the same image, two sizes.

1. Without width, a large photo fills the screen and you scroll to see it.
2. With width="600", it is 600 pixels wide and fits on a laptop screen.

8. Three ways to get an image onto your page

Why. The src must point to an image file that a browser can download. Where that file lives makes a big difference.

Way 1: use another website's image URL (hotlinking)

How to get the real address of an image.

1. Open the web page that shows the image.
2. Right-click the image.
3. Choose Copy image address (Chrome, Edge) or Copy Image Link (Firefox).
4. Check it: the address usually ends in .jpg, .jpeg, .png or .webp. Open it in a new tab: you should see only the image.

The small pictures in a search engine's image results often don't work. They are thumbnails that are usually stored inside the results page itself (their address starts with data:), not a link to the real file. Open the website that has the image and copy the address there.

The problems with hotlinking. It is quick for practice, but:

1. Every visitor of your page downloads the image from their server, so you use their bandwidth without permission.
2. The image may be copyrighted.
3. If they delete, rename or move the image, or their site is down, your page shows a broken image.
4. Many sites block it: they check which page is asking and refuse to send the image to other sites' pages. You then see a broken image icon.

The better way is to put an image you are allowed to use on your own server.

Way 2: download it onto the server with sudo wget

What. wget downloads a file from a web address (HTTP or HTTPS) and saves it in the current folder. Any kind of file: an image, a video, a PDF, a zip. The server downloads it directly; it doesn't pass through your laptop.

Why sudo. /var/www/html belongs to root. Without sudo, wget downloads the file but can't save it:

[ec2-user@ip-172-31-xx-xx html]$ wget https://example.com/images/beach.jpg
...
beach.jpg: Permission denied

Cannot write to ‘beach.jpg’ (Permission denied).

How.

Step 1. Copy the image address as in Way 1.

Step 2. Go to the web root and check where you are:

[ec2-user@ip-172-31-xx-xx ~]$ cd /var/www/html
[ec2-user@ip-172-31-xx-xx html]$ pwd
/var/www/html

Step 3. Download with sudo wget and the address. Suppose the address is https://example.com/images/sunset-over-the-beach-1200x800.jpg:

[ec2-user@ip-172-31-xx-xx html]$ sudo wget https://example.com/images/sunset-over-the-beach-1200x800.jpg
--...--  https://example.com/images/sunset-over-the-beach-1200x800.jpg
Resolving example.com (example.com)... ...
Connecting to example.com (example.com)|...|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: ... [image/jpeg]
Saving to: ‘sunset-over-the-beach-1200x800.jpg’
...
... ‘sunset-over-the-beach-1200x800.jpg’ saved [...]

200 OK is the status code from section 2; [image/jpeg] tells you that you really got an image.

Step 4. Check it, then give it a short name with sudo mv:

[ec2-user@ip-172-31-xx-xx html]$ ls
index.html  photo.html  sunset-over-the-beach-1200x800.jpg
[ec2-user@ip-172-31-xx-xx html]$ sudo mv sunset-over-the-beach-1200x800.jpg beach.jpg
[ec2-user@ip-172-31-xx-xx html]$ ls
beach.jpg  index.html  photo.html

Step 5. Open the image alone first: http://PUBLIC_IP/beach.jpg. If you see it, the file is served correctly.

Step 6. Use it on the page:

sudo nano photo.html

Change the line to:

<img src="beach.jpg" width="600">

Step 7. Save and refresh http://PUBLIC_IP/photo.html.

src="beach.jpg" has no http:// and no folder: it means "the file beach.jpg in the same folder as this page". For an image in a sub-folder, write the path, for example src="images/beach.jpg".

Example 7: an address with ?something after the name. Many image addresses end like beach.jpg?width=500. wget keeps all of it in the file name:

Saving to: ‘beach.jpg?width=500’

Delete everything from the ? before you run wget, or rename the file afterwards with sudo mv. If you do need the part after ?, put the whole address in single quotes, because characters like & mean something special to the shell:

sudo wget 'https://example.com/beach.jpg?width=500&q=80'

Way 3: upload from your laptop with scp

What. scp copies files between two machines over SSH, with the same key you use to log in. It works in both directions and with any folder you have permission for: laptop to server, server to laptop, or server to server.

wget and scp do different jobs:

1. wget runs on the server and pulls a file from a web address. The file must be on a website.
2. scp runs on your laptop and copies your own file over SSH. The file can be anywhere on your laptop.

How. Suppose your photo beach.jpg and your key mykey.pem are in the same folder on your laptop.

Step 1. On your laptop (PowerShell or Terminal), in that folder, copy the file to ec2-user's home folder:

scp -i mykey.pem beach.jpg ec2-user@PUBLIC_IP:/home/ec2-user/

Step 2. On the server, move it into the web root. ec2-user can't write to /var/www/html directly, so this step needs sudo:

sudo mv /home/ec2-user/beach.jpg /var/www/html/

Step 3. Open http://PUBLIC_IP/beach.jpg, then use <img src="beach.jpg"> as in Way 2.

9. Debugging a broken image

Why. Instead of the picture, the page shows a small broken-image icon. The page itself loaded (200), so the problem is one line of HTML or one file.

How.

1. Right-click the page and choose View Page Source (Ctrl+U). It shows exactly the HTML the browser got from the server. Find the <img> line and read the src.
2. Open the image address by itself, for example http://PUBLIC_IP/beach.jpg.
   • The image shows: the file is fine; the src in the page has a typo.
   • 404 Not Found: the file isn't where the URL says. Check with ls /var/www/html.
3. Open DevTools › Network and reload. The image's line shows its status code.

Example 8: the usual causes.

1. The page or the image was made in the home folder, not in /var/www/html.
2. A capital letter: the file is beach.jpg but the page says Beach.jpg. Linux file names are case-sensitive, so that is a different file and gives 404.
3. A wrong extension: the file is beach.jpeg but the page says beach.jpg.
4. The address you copied is a web page about the image, not the image file itself.
5. Hotlinking, and the other site blocks it.

10. Your own video on the page

Why. Images are not enough for many sites: a product demo, a course intro, a song.

What. The <video> tag shows a video file, with a <source> tag inside it saying where the file is and what type it is:

<video controls>
  <source src="myvideo.mp4" type="video/mp4">
</video>

1. controls adds the player buttons: play, pause, volume and the seek bar. Without it, the browser shows only a still picture with no buttons.
2. src="myvideo.mp4" is the file, here in the same folder as the page.
3. type="video/mp4" tells the browser what kind of file it is.
4. </video> closes the tag.

How.

Step 1. Put the video file in /var/www/html, with scp from your laptop or sudo wget from a web address, exactly like the image.

Step 2. Rename it to something short: sudo mv <long-name>.mp4 myvideo.mp4.

Step 3. Make the page:

sudo nano video.html

Type the three lines above, then save.

Step 4. Open http://PUBLIC_IP/video.html and press play.

Finding the address of a video file. When a page plays an .mp4 file directly, you can right-click the video and choose Copy video link, or open DevTools › Network, click the Media filter, reload and play: the .mp4 file appears in the list.

Use your own videos, or videos you have permission to use. If you download a sample video only for practice, keep it on your test server and delete it afterwards. Video files are big, and your server sends every byte of them to every visitor.

11. Embedding a YouTube video

Why. YouTube doesn't give you a video file to download and host. It gives you something better: an embed code. The video stays on YouTube, YouTube's player plays it, and your page shows it in a window.

How.

1. Open the video on YouTube.
2. Below the video, click Share.
3. Click Embed.
4. Click Copy. You now have an <iframe> code.
5. On the server: sudo nano video.html, paste the code under your <video> lines, and save.
6. Refresh http://PUBLIC_IP/video.html.

The code looks like this (VIDEO_ID is the video's own id):

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

1. iframe is a window on your page that shows another page, here YouTube's player.
2. width="560" height="315" is the size of that window. You can change it.
3. src is YouTube's embed address of this video.
4. allowfullscreen lets the viewer switch to full screen.

Example 9: two videos on one page. Paste two embed codes, one under the other, and the page shows two players.

For any YouTube video, always use YouTube's own embed code. Don't download it and put the file on your server.

12. When you're done: stop the instance

Why. A running instance keeps using free-tier hours even when nobody visits the page. Stopping keeps your files on the disk for next time.

1. In the EC2 console, select your instance.
2. Click Instance state › Stop instance.
3. Click Stop to confirm.

Next time, remember section 5: start Apache (or have it enabled) and use the new public IP.

13. The whole flow on one page

1. sudo service httpd start (and once: sudo systemctl enable httpd).
2. cd /var/www/html.
3. Folders here become URL paths: myphotos/gallery.html is http://PUBLIC_IP/myphotos/gallery.html.
4. Image from the web: sudo wget URL, then sudo mv long-name.jpg beach.jpg.
5. Image from your laptop: scp -i mykey.pem beach.jpg ec2-user@PUBLIC_IP:/home/ec2-user/, then sudo mv it into /var/www/html.
6. Page: sudo nano photo.html with <img src="beach.jpg" width="600">.
7. Video: <video controls> with <source src="myvideo.mp4" type="video/mp4"> and </video>.
8. YouTube: Share › Embed › Copy, paste the <iframe>.
9. Check: open each URL; 200 means fine, 404 means wrong name or folder; View Page Source and DevTools › Network when something is broken.

14. Hands-on lab: pages, folders, an image and status codes

Why this lab. Most website tickets are "page not found" or "image broken". This lab builds a small site with a folder, a page and an image, then breaks the image on purpose so you can see how a 404 looks from inside the server.

1. Start the server and check Apache
   • Command: sudo service httpd status
   • You should see: active (running) if you enabled it; otherwise run sudo service httpd start.
   • Check: Copy the new public IP from the EC2 console.
   • Why: After a stop and start, the public IP changes, and Apache runs only if it was enabled.
2. Read the status code of the home page
   • Command: curl -s -o /dev/null -w "%{http_code}\n" http://localhost/
   • You should see: 200
   • Check: 2xx means success.
   • Why: -o /dev/null throws the page away and -w prints only the status code, the server's one-number answer.
3. Ask for a page that doesn't exist
   • Command: curl -s -o /dev/null -w "%{http_code}\n" http://localhost/nothere.html
   • You should see: 404
   • Check: 4xx means a problem with the request.
   • Why: A 404 tells you Apache is fine and the file name or path is wrong. You look at the URL, not at the server.
4. Make a folder for photos
   • Command: sudo mkdir -p /var/www/html/myphotos/images
   • You should see: Nothing.
   • Check: ls /var/www/html/myphotos → images
   • Why: Every folder under /var/www/html becomes part of the URL: this one is http://PUBLIC_IP/myphotos/. Folders keep a growing site tidy.
5. Download an image onto the server
   • Command: cd /var/www/html/myphotos/images && sudo wget -O beach.jpg <image URL>
   • You should see: saved at the end of the wget output.
   • Check: ls -l shows beach.jpg with a size above 0.
   • Why: Use the URL of an image you are allowed to use. -O beach.jpg saves it under a short name, so the HTML stays simple.
6. Write a page that shows it
   • Command: sudo nano /var/www/html/myphotos/gallery.html
   • You should see: Type <h1>Beach</h1> and <img src="images/beach.jpg" width="400">, then save and exit.
   • Check: http://PUBLIC_IP/myphotos/gallery.html shows the heading and the picture.
   • Why: src="images/beach.jpg" is relative to the page's folder, so the browser asks for /myphotos/images/beach.jpg.
7. Check the image's own status code
   • Command: curl -s -o /dev/null -w "%{http_code}\n" http://localhost/myphotos/images/beach.jpg
   • You should see: 200
   • Check: In the browser, DevTools (F12) → Network shows beach.jpg with status 200.
   • Why: A page is many files, each with its own status. The page can be 200 while one image fails.
8. Break the image on purpose
   • Command: sudo mv beach.jpg Beach.jpg
   • You should see: Nothing.
   • Check: Reload the gallery: a broken-image icon. The curl from step 7 now prints 404.
   • Why: Linux names are case-sensitive: Beach.jpg isn't beach.jpg. This is the most common cause of broken images after uploading from Windows.
9. Fix it and stop
   • Command: sudo mv Beach.jpg beach.jpg
   • You should see: Nothing.
   • Check: The picture is back and curl prints 200. Then stop the instance.
   • Why: Fix the name, not the page, when the page is right. Stopping saves free-tier hours; the files stay on the disk.

15. Try at home

Recap

Ravindra Bagale, trainer: linkedin.com/in/ravindra-bagale. The file names (photo.html, beach.jpg, myvideo.mp4, mykey.pem), the folders myphotos and services, the Dubai page and the example.com addresses are examples for learning; PUBLIC_IP stands for your instance's public IPv4 address and VIDEO_ID for a YouTube video's id. Parts of the wget output are shortened with "..."; the hostname in the prompt is illustrative.

Revision, comparison and interview cards

Revise this lesson in a few minutes. Save the cards on your phone or download them as PNG files. The QR code on each card opens this lesson.

More cards: Ravi Sir's Cards.