EC2 वरच्या HTML Website मध्ये Images आणि Videos कसे add करायचे

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

1. Cloud engineer ला HTML आणि URLs का लागतात

का. Websites तुम्ही design करणार नाही; ते developers करतात. पण तुम्ही चालवत असलेल्या server वर एखादं page किंवा image उघडत नसेल, तर ticket तुमच्याकडे येतं. Users सांगतात "site बिघडलीय", "line 12 मध्ये typo आहे" असं कोणी सांगत नाही. कारण शोधायला तुम्हाला URL, status code आणि server ने पाठवलेलं HTML वाचता आलं पाहिजे.

काय. Web page वरच्या प्रत्येक गोष्टीची स्वतःची URL असते:

1. Page स्वतः, उदाहरणार्थ http://PUBLIC_IP/photo.html.
2. त्यावरची प्रत्येक image, उदाहरणार्थ http://PUBLIC_IP/beach.jpg.
3. प्रत्येक video, icon, CSS file आणि JavaScript file.

Browser प्रत्येक गोष्ट वेगळी मागतो, आणि प्रत्येकीला server कडून वेगळं उत्तर मिळतं.

समजा आपण YouTube आहोत. त्याच्या pages वर दोन प्रकारच्या files असतात:

1. Application files: YouTube चा logo, Home, Shorts आणि Subscriptions चे icons, CSS आणि JavaScript. या YouTube ची team site सोबतच देते, आणि त्या सगळ्यांसाठी सारख्याच असतात.
2. User-generated content: users दर मिनिटाला upload करतात ते videos आणि thumbnails.

दोन्ही URLs वरून serve होतात, आणि दोन्ही तुटू शकतात.

2. HTTP status codes: server ने काय उत्तर दिलं

का. Web server च्या प्रत्येक उत्तराची सुरुवात तीन आकडी number ने होते, त्याला status code म्हणतात. Request चाललं की नाही, आणि नसेल तर problem कोणाच्या बाजूला आहे, हे एका नजरेत कळतं. Interview मध्ये पण हा आवडता प्रश्न आहे.

काय. पहिला आकडा family सांगतो:

1. 2xx: success. 200 OK म्हणजे page सापडलं आणि पाठवलं.
2. 3xx: redirect. Page दुसरीकडे आहे आणि browser ला तिकडे पाठवलं जातं, phone वरच्या call forwarding सारखं. 301 Moved Permanently म्हणजे कायमचं हललं; 302 Found म्हणजे तात्पुरतं हललं.
3. 4xx: request मध्ये problem.
   • 401 Unauthorized: आधी login करावं लागेल.
   • 403 Forbidden: server ला request कळली, पण तो ते तुम्हाला देणार नाही.
   • 404 Not Found: असं page च नाही.
4. 5xx: server वर problem. 500 Internal Server Error हा server-side चा general error; 503 Service Unavailable म्हणजे server आत्ता request handle करू शकत नाही.

Example 1: तुमच्या server वरच्या तीन URLs. समजा /var/www/html मध्ये फक्त index.html आहे:

1. http://PUBLIC_IP/ ला 200 OK मिळतो आणि index.html दिसतं.
2. http://PUBLIC_IP/index.html ला तेच page, हेही 200 OK.
3. http://PUBLIC_IP/contact.html ला 404 Not Found, कारण अशी file च नाही.

Example 2: index.html च नसेल तर. index.html delete किंवा rename करा आणि http://PUBLIC_IP/ परत उघडा. Amazon Linux वर Apache आता स्वतःचं test page ("It works!") दाखवतो, आणि त्या उत्तराचा status code असतो 403 Forbidden. Apache folder मधल्या files ची list दाखवत नाही; त्याऐवजी test page दाखवतो, म्हणजे "web server चालू आहे, पण अजून home page नाही".

हा code तुम्ही server वर curl ने बघू शकता:

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

-o /dev/null page फेकून देतो आणि -w "%{http_code}\n" फक्त status code print करतो. index.html परत ठेवा, मग तीच command 200 print करते.

3. Browser मध्ये status codes बघणं: DevTools

का. एक page म्हणजे खूप files. एखादी image नसली तरी page उघडतं, म्हणून प्रत्येक file चं उत्तर बघायचा मार्ग पाहिजे.

कसं.

1. Page Chrome, Edge किंवा Firefox मध्ये उघडा.
2. Page वर कुठेही right-click करून Inspect निवडा (किंवा F12 दाबा).
3. Network tab वर click करा.
4. Page reload करा (F5).
5. Page load करत असलेली प्रत्येक file एका line मध्ये दिसते. Status column मध्ये तिचा code दिसतो: 200, 404 वगैरे.

Example 3: तुम्हाला काय दिसेल.

1. तुमच्या स्वतःच्या छोट्या page वर: HTML file ची एक line आणि प्रत्येक image ची एक, सगळ्या 200.
2. मोठ्या site वर, समजा Instagram: डझनभर lines येतात आणि येतच राहतात, कारण page background मध्ये files आणि data load करतच असतं.
3. दुसऱ्यांदा reload केल्यावर 304 Not Modified दिसू शकतो: browser कडे आधीच fresh copy होती, म्हणून server ने file परत पाठवली नाही.

4. /var/www/html खालचे folders URL paths बनतात

का. खऱ्या site वर खूप pages आणि images असतात. सगळं एकाच folder मध्ये ठेवलं तर गोंधळ होतो, म्हणून folders बनवतो. Server वरचा folder browser मध्ये address म्हणून कसा येतो ते माहीत पाहिजे.

काय. /var/www/html हा तुमच्या website चा root आहे. URL मध्ये IP नंतर जे काही येतं, तो त्या folder च्या आतला path असतो:

1. /var/www/html/index.html म्हणजे http://PUBLIC_IP/.
2. /var/www/html/about.html म्हणजे http://PUBLIC_IP/about.html.
3. /var/www/html/myphotos/gallery.html म्हणजे http://PUBLIC_IP/myphotos/gallery.html.
4. /var/www/html/myphotos/images/beach.jpg म्हणजे http://PUBLIC_IP/myphotos/images/beach.jpg.

Example 4: folder चं नाव राहिलं तर. gallery.html ही myphotos च्या आत आहे, म्हणून http://PUBLIC_IP/gallery.html ला 404 Not Found येतो. Apache /var/www/html/gallery.html शोधतो, आणि अशी file नाही. URL मध्ये folder चं नाव पाहिजेच.

कसं. दोन pages असलेला services folder बनवूया:

Step 1. Web root मध्ये जा:

cd /var/www/html

हा folder root चा आहे, म्हणून प्रत्येक बदलाला sudo लागतो:

sudo mkdir services
sudo nano services/service1.html

Step 2. <h1>Service 1</h1> type करा, मग Ctrl+X, Y, Enter ने save करा.

Step 3. services/service2.html पण तशीच बनवा, <h1>Service 2</h1> टाकून.

Step 4. http://PUBLIC_IP/services/service1.html आणि http://PUBLIC_IP/services/service2.html उघडा.

/var/www/html च्या बाहेरचं page कधीच serve होत नाही. Home folder (/home/ec2-user) मध्ये बनवलेल्या file ला URL कशीही type केली तरी 404 च येतो.

5. Stop आणि start नंतर: Apache आणि public IP

का. पैसे वाचवायला practice संपल्यावर तुम्ही instance stop करता. दुसऱ्या दिवशी start केल्यावर site उघडत नाही. दोन गोष्टी बदललेल्या असतात.

काय.

1. Apache बंद असतो. तुम्ही सांगितलं नसेल तर server start झाल्यावर Apache start होत नाही.
2. Public IP नवीन असतो. Elastic IP नसलेल्या instance ला प्रत्येक start ला नवीन public IPv4 address मिळतो.

कसं.

Step 1. EC2 console मध्ये instance start करा आणि त्याचा नवीन Public IPv4 address copy करा.

Step 2. नवीन IP वापरून SSH ने connect करा.

Step 3. Apache start करा:

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

दुसरी line normal आहे. Amazon Linux वर जुनी service command काम systemctl कडे देते (services सांभाळणारं tool), आणि तसं सांगते.

Step 4. Linux ला सांगा की प्रत्येक boot ला Apache start कर. हे एका 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. http://NEW_PUBLIC_IP/ उघडा.

6. HTML basics: tags, head आणि body

का. Pages developers देतात, पण तुम्हाला एखादं page उघडून वाचता आलं पाहिजे, आणि एखादी line, उदाहरणार्थ image चा address, न बिघडवता बदलता आली पाहिजे.

काय. HTML angle brackets मधल्या tags ने लिहितात:

1. Opening tag: <h1>.
2. आतला content.
3. Slash असलेला closing tag: </h1>.

बहुतेक tags असे जोडीने येतात. काही tags ना content नसतो आणि closing tag पण नसतो. <img> त्यातलाच एक: <img src="beach.jpg"> लिहिलं की झालं.

<html> च्या आत page चे दोन भाग असतात:

1. <head>: page बद्दलची माहिती. Browser tab वर दिसणारं title, tab वरचा छोटा icon, आणि CSS आणि JavaScript files च्या links. हे page च्या आत दिसत नाही.
2. <body>: जे दिसतं ते: headings, text, images, videos.

समजा आपण YouTube आहोत. Tab वरचं "YouTube" आणि लाल icon head मधून येतात. Page वर दिसणारे videos, search bar आणि menu body मध्ये असतात.

सगळ्यात जास्त वापरायचे tags:

1. <h1> ते <h6>: headings. h1 सगळ्यात मोठं, h6 सगळ्यात लहान.
2. <p>: text चा एक paragraph.
3. <li>: list मधला एक item, <ul> (bullets ची list) किंवा <ol> (numbers ची list) च्या आत.
4. <img>: image.

आणि HTML सोबत ऐकू येणारे दोन शब्द:

1. CSS म्हणजे page छान दिसावं म्हणून लिहिलेला code: रंग, fonts, spacing, layout.
2. JavaScript म्हणजे page काहीतरी करावं म्हणून लिहिलेला code: उघडणारे menus, react करणारी buttons.

Example 5: एक पूर्ण छोटं 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. Browser tab वर Dubai दिसतं.
2. Page वर एक मोठं heading, एक लहान heading, text ची एक line आणि दोन bullets ची list दिसते.

7. Page वर तुमची पहिली image

का. जवळजवळ प्रत्येक page वर images असतात, आणि तुटलेली image हे सगळ्यात common tickets पैकी एक आहे.

काय. <img> tag image दाखवतो. त्याचा src attribute (source) सांगतो image कुठे आहे: पूर्ण URL, किंवा तुमच्याच server वरच्या file चं नाव.

कसं.

Step 1. Apache start करा आणि web root मध्ये जा:

sudo service httpd start
cd /var/www/html

Step 2. नवीन page बनवा:

sudo nano photo.html

Step 3. एक line type करा, image च्या address सोबत (तो कुठून मिळवायचा ते पुढच्या section मध्ये बघू):

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

Step 4. Ctrl+X, Y, Enter ने save करा.

Step 5. http://PUBLIC_IP/photo.html उघडा.

तेवढी एक line पुरेशी आहे. राहिलेले <html>, <head> आणि <body> browser स्वतः add करतो. खऱ्या page साठी मात्र Example 5 सारखी पूर्ण रचना लिहा.

Size बदलणं. Camera मधला photo बहुतेक वेळा screen पेक्षा रुंद असतो. width टाका:

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

1. width="600" म्हणजे 600 pixels रुंद. फक्त आकडा लिहा.
2. फक्त width दिली की browser height त्याच प्रमाणात बदलतो, म्हणून image चा आकार बिघडत नाही.
3. Height साठी height="400" असंच चालतं. दोन्ही दिले तर image ताणलेली दिसू शकते.

Example 6: एकच image, दोन sizes.

1. width शिवाय मोठा photo पूर्ण screen भरतो आणि बघायला scroll करावं लागतं.
2. width="600" ने तो 600 pixels रुंद होतो आणि laptop screen वर मावतो.

8. Page वर image आणायचे तीन मार्ग

का. src ने अशा image file कडे point केलं पाहिजे जी browser download करू शकेल. ती file कुठे आहे यावर खूप फरक पडतो.

मार्ग 1: दुसऱ्या website ची image URL वापरा (hotlinking)

Image चा खरा address कसा मिळवायचा.

1. Image असलेलं web page उघडा.
2. Image वर right-click करा.
3. Copy image address (Chrome, Edge) किंवा Copy Image Link (Firefox) निवडा.
4. Check करा: address बहुतेक .jpg, .jpeg, .png किंवा .webp ने संपतो. नवीन tab मध्ये उघडा: फक्त image दिसली पाहिजे.

Search engine च्या image results मधली छोटी चित्रं बहुतेक वेळा चालत नाहीत. ती thumbnails असतात, जी बहुतेक results page च्याच आत साठवलेली असतात (त्यांचा address data: ने सुरू होतो), खऱ्या file ची link नसते. Image असलेली website उघडा आणि तिथून address copy करा.

Hotlinking चे problems. Practice साठी हे quick आहे, पण:

1. तुमच्या page चा प्रत्येक visitor image त्यांच्या server वरून download करतो, म्हणजे तुम्ही त्यांची bandwidth परवानगीशिवाय वापरता.
2. Image वर copyright असू शकतो.
3. त्यांनी image delete, rename किंवा हलवली, किंवा त्यांची site बंद पडली, तर तुमच्या page वर तुटलेली image दिसते.
4. बऱ्याच sites हे block करतात: कुठलं page मागतंय ते check करतात आणि दुसऱ्या sites च्या pages ना image पाठवत नाहीत. मग तुटलेल्या image चा icon दिसतो.

चांगला मार्ग म्हणजे वापरायची परवानगी असलेली image तुमच्या स्वतःच्या server वर ठेवणं.

मार्ग 2: sudo wget ने server वर download करा

काय. wget web address (HTTP किंवा HTTPS) वरून file download करतो आणि current folder मध्ये save करतो. कुठलीही file: image, video, PDF, zip. Server ती थेट download करतो; ती तुमच्या laptop मधून जात नाही.

sudo का. /var/www/html root चा आहे. sudo शिवाय wget file download करतो, पण save करू शकत नाही:

[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).

कसं.

Step 1. मार्ग 1 सारखा image चा address copy करा.

Step 2. Web root मध्ये जा आणि आपण कुठे आहोत ते check करा:

[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. sudo wget आणि address देऊन download करा. समजा address 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 हा section 2 मधला status code; [image/jpeg] सांगतो की तुम्हाला खरंच image मिळाली.

Step 4. Check करा, मग 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. आधी फक्त image उघडा: http://PUBLIC_IP/beach.jpg. दिसली तर file बरोबर serve होतेय.

Step 6. Page वर वापरा:

sudo nano photo.html

Line बदलून अशी करा:

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

Step 7. Save करा आणि http://PUBLIC_IP/photo.html refresh करा.

src="beach.jpg" मध्ये http:// नाही आणि folder पण नाही: याचा अर्थ "या page च्याच folder मधली beach.jpg file". Sub-folder मधल्या image साठी path लिहा, उदाहरणार्थ src="images/beach.jpg".

Example 7: नावानंतर ?काहीतरी असलेला address. बरेच image addresses beach.jpg?width=500 असे संपतात. wget हे सगळं file च्या नावात ठेवतो:

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

wget चालवायच्या आधी ? पासूनचं सगळं काढून टाका, किंवा नंतर sudo mv ने rename करा. ? नंतरचा भाग खरंच लागत असेल, तर पूर्ण address single quotes मध्ये टाका, कारण & सारख्या characters चा shell साठी वेगळा अर्थ असतो:

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

मार्ग 3: laptop वरून scp ने upload करा

काय. scp दोन machines मध्ये SSH वरून files copy करतो, login साठी वापरता त्याच key ने. तो दोन्ही दिशांना चालतो, आणि परवानगी असलेल्या कुठल्याही folder सोबत: laptop ते server, server ते laptop, किंवा server ते server.

wget आणि scp ची कामं वेगळी आहेत:

1. wget server वर चालतो आणि web address वरून file ओढतो. File एखाद्या website वर असली पाहिजे.
2. scp तुमच्या laptop वर चालतो आणि तुमची स्वतःची file SSH वरून copy करतो. File laptop वर कुठेही असू शकते.

कसं. समजा तुमचा photo beach.jpg आणि तुमची key mykey.pem laptop वर एकाच folder मध्ये आहेत.

Step 1. Laptop वर (PowerShell किंवा Terminal), त्या folder मध्ये, file ec2-user च्या home folder मध्ये copy करा:

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

Step 2. Server वर ती web root मध्ये हलवा. ec2-user थेट /var/www/html मध्ये लिहू शकत नाही, म्हणून या step ला sudo लागतो:

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

Step 3. http://PUBLIC_IP/beach.jpg उघडा, मग मार्ग 2 सारखं <img src="beach.jpg"> वापरा.

9. तुटलेली image debug करणं

का. Picture ऐवजी page वर तुटलेल्या image चा छोटा icon दिसतो. Page स्वतः load झालं (200), म्हणजे problem HTML च्या एका line मध्ये किंवा एका file मध्ये आहे.

कसं.

1. Page वर right-click करून View Page Source (Ctrl+U) निवडा. Server कडून browser ला नक्की कोणतं HTML मिळालं ते दिसतं. <img> ची line शोधा आणि src वाचा.
2. Image चा address एकटा उघडा, उदाहरणार्थ http://PUBLIC_IP/beach.jpg.
   • Image दिसली: file ठीक आहे; page मधल्या src मध्ये typo आहे.
   • 404 Not Found: URL सांगते तिथे file नाही. ls /var/www/html ने check करा.
3. DevTools › Network उघडा आणि reload करा. Image च्या line मध्ये तिचा status code दिसतो.

Example 8: नेहमीची कारणं.

1. Page किंवा image home folder मध्ये बनवली, /var/www/html मध्ये नाही.
2. Capital letter: file beach.jpg आहे पण page मध्ये Beach.jpg. Linux मध्ये file च्या नावात capital-small फरक पडतो, म्हणून ती वेगळी file ठरते आणि 404 येतो.
3. चुकीचं extension: file beach.jpeg आहे पण page मध्ये beach.jpg.
4. तुम्ही copy केलेला address image बद्दलच्या web page चा आहे, image file चा नाही.
5. Hotlinking, आणि दुसरी site ते block करते.

10. Page वर तुमचा स्वतःचा video

का. बऱ्याच sites ना images पुरत नाहीत: product demo, course intro, एखादं गाणं.

काय. <video> tag video file दाखवतो, आणि त्याच्या आतला <source> tag सांगतो file कुठे आहे आणि कुठल्या type ची आहे:

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

1. controls ने player ची buttons येतात: play, pause, volume आणि seek bar. ते नसेल तर browser फक्त स्थिर चित्र दाखवतो, buttons नाहीत.
2. src="myvideo.mp4" म्हणजे file, इथे page च्याच folder मध्ये.
3. type="video/mp4" browser ला सांगतो file कुठल्या प्रकारची आहे.
4. </video> tag बंद करतो.

कसं.

Step 1. Video file /var/www/html मध्ये ठेवा, laptop वरून scp ने किंवा web address वरून sudo wget ने, अगदी image सारखं.

Step 2. छोटं नाव द्या: sudo mv <long-name>.mp4 myvideo.mp4.

Step 3. Page बनवा:

sudo nano video.html

वरच्या तीन lines type करा, मग save करा.

Step 4. http://PUBLIC_IP/video.html उघडा आणि play दाबा.

Video file चा address शोधणं. एखादं page थेट .mp4 file चालवत असेल, तर video वर right-click करून Copy video link निवडू शकता, किंवा DevTools › Network उघडा, Media filter वर click करा, reload करून play करा: list मध्ये .mp4 file दिसते.

तुमचे स्वतःचे videos वापरा, किंवा ज्यांची परवानगी आहे ते. Sample video फक्त practice साठी download केला, तर तो test server वरच ठेवा आणि नंतर delete करा. Video files मोठ्या असतात, आणि तुमचा server प्रत्येक visitor ला त्यांचा प्रत्येक byte पाठवतो.

11. YouTube video embed करणं

का. YouTube तुम्हाला download करून host करायला video file देत नाही. त्यापेक्षा चांगलं देतं: embed code. Video YouTube वरच राहतो, YouTube चा player तो चालवतो, आणि तुमचं page तो एका window मध्ये दाखवतं.

कसं.

1. YouTube वर video उघडा.
2. Video च्या खाली Share वर click करा.
3. Embed वर click करा.
4. Copy वर click करा. आता तुमच्याकडे <iframe> code आहे.
5. Server वर: sudo nano video.html, तुमच्या <video> lines खाली code paste करा, आणि save करा.
6. http://PUBLIC_IP/video.html refresh करा.

Code असा दिसतो (VIDEO_ID म्हणजे त्या video चा स्वतःचा 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 म्हणजे तुमच्या page वरची एक window जी दुसरं page दाखवते, इथे YouTube चा player.
2. width="560" height="315" ही त्या window ची size. ती बदलता येते.
3. src हा या video चा YouTube embed address.
4. allowfullscreen ने बघणाऱ्याला full screen करता येतं.

Example 9: एका page वर दोन videos. दोन embed codes एकाखाली एक paste करा, page वर दोन players दिसतात.

कुठल्याही YouTube video साठी नेहमी YouTube चाच embed code वापरा. तो download करून file तुमच्या server वर ठेवू नका.

12. काम झालं की: instance stop करा

का. Page कोणीही उघडत नसलं तरी चालू instance free-tier hours वापरत राहतो. Stop केल्याने तुमच्या files पुढच्या वेळेसाठी disk वर राहतात.

1. EC2 console मध्ये तुमचा instance select करा.
2. Instance state › Stop instance वर click करा.
3. Confirm करायला Stop वर click करा.

पुढच्या वेळी section 5 लक्षात ठेवा: Apache start करा (किंवा enable केलेला ठेवा) आणि नवीन public IP वापरा.

13. पूर्ण flow एका ठिकाणी

1. sudo service httpd start (आणि एकदाच: sudo systemctl enable httpd).
2. cd /var/www/html.
3. इथले folders URL paths बनतात: myphotos/gallery.html म्हणजे http://PUBLIC_IP/myphotos/gallery.html.
4. Web वरची image: sudo wget URL, मग sudo mv long-name.jpg beach.jpg.
5. Laptop वरची image: scp -i mykey.pem beach.jpg ec2-user@PUBLIC_IP:/home/ec2-user/, मग sudo mv ने /var/www/html मध्ये.
6. Page: sudo nano photo.html मध्ये <img src="beach.jpg" width="600">.
7. Video: <video controls>, आत <source src="myvideo.mp4" type="video/mp4">, आणि </video>.
8. YouTube: Share › Embed › Copy, <iframe> paste करा.
9. Check: प्रत्येक URL उघडा; 200 म्हणजे ठीक, 404 म्हणजे नाव किंवा folder चुकला; काही तुटलं तर View Page Source आणि DevTools › Network.

14. Hands-on lab: pages, folders, image आणि status codes

हा lab का. बहुतेक website tickets "page सापडत नाही" किंवा "image तुटलीय" अशी असतात. हा lab folder, page आणि image असलेली छोटी site बनवतो, आणि मग image मुद्दाम तोडतो, म्हणजे server च्या आतून 404 कसा दिसतो ते बघता येतं.

1. Server start करा आणि Apache तपासा
   • Command: sudo service httpd status
   • काय दिसेल: enable केलं असेल तर active (running); नाहीतर sudo service httpd start चालवा.
   • Check करा: EC2 console मधून नवीन public IP copy करा.
   • का: Stop आणि start नंतर public IP बदलतो, आणि enable केलं असेल तरच Apache चालू असतो.
2. Home page चा status code वाचा
   • Command: curl -s -o /dev/null -w "%{http_code}\n" http://localhost/
   • काय दिसेल: 200
   • Check करा: 2xx म्हणजे success.
   • का: -o /dev/null page टाकून देतो आणि -w फक्त status code print करतो, server चं एका number मधलं उत्तर.
3. नसलेलं page मागा
   • Command: curl -s -o /dev/null -w "%{http_code}\n" http://localhost/nothere.html
   • काय दिसेल: 404
   • Check करा: 4xx म्हणजे request मध्ये प्रॉब्लेम.
   • का: 404 सांगतो की Apache ठीक आहे आणि file चं नाव किंवा path चुकलाय. Server नाही, URL बघायची.
4. Photos साठी folder बनवा
   • Command: sudo mkdir -p /var/www/html/myphotos/images
   • काय दिसेल: काहीच नाही.
   • Check करा: ls /var/www/html/myphotos → images
   • का: /var/www/html खालचा प्रत्येक folder URL चा भाग होतो: हा http://PUBLIC_IP/myphotos/. Folders वाढणारी site नीट ठेवतात.
5. Server वर image download करा
   • Command: cd /var/www/html/myphotos/images && sudo wget -O beach.jpg <image URL>
   • काय दिसेल: wget output च्या शेवटी saved.
   • Check करा: ls -l मध्ये beach.jpg 0 पेक्षा जास्त size सह दिसते.
   • का: तुम्हाला वापरायची परवानगी असलेल्या image ची URL वापरा. -O beach.jpg ती छोट्या नावाने save करतो, म्हणून HTML सोपं राहतं.
6. ती दाखवणारं page लिहा
   • Command: sudo nano /var/www/html/myphotos/gallery.html
   • काय दिसेल: <h1>Beach</h1> आणि <img src="images/beach.jpg" width="400"> type करा, मग save करून बाहेर पडा.
   • Check करा: http://PUBLIC_IP/myphotos/gallery.html मध्ये heading आणि picture दिसतात.
   • का: src="images/beach.jpg" page च्या folder पासून relative आहे, म्हणून browser /myphotos/images/beach.jpg मागतो.
7. Image चा स्वतःचा status code तपासा
   • Command: curl -s -o /dev/null -w "%{http_code}\n" http://localhost/myphotos/images/beach.jpg
   • काय दिसेल: 200
   • Check करा: Browser मध्ये DevTools (F12) → Network मध्ये beach.jpg status 200 सह दिसते.
   • का: Page म्हणजे अनेक files, प्रत्येकीचा स्वतःचा status. Page 200 असूनही एखादी image fail होऊ शकते.
8. Image मुद्दाम तोडा
   • Command: sudo mv beach.jpg Beach.jpg
   • काय दिसेल: काहीच नाही.
   • Check करा: Gallery reload करा: तुटलेल्या image चा icon. Step 7 चा curl आता 404 print करतो.
   • का: Linux नावं case-sensitive: Beach.jpg म्हणजे beach.jpg नाही. Windows वरून upload केल्यावर तुटलेल्या images चं हे सगळ्यात नेहमीचं कारण.
9. Fix करा आणि stop करा
   • Command: sudo mv Beach.jpg beach.jpg
   • काय दिसेल: काहीच नाही.
   • Check करा: Picture परत आलं आणि curl 200 print करतो. मग instance stop करा.
   • का: Page बरोबर असेल तर page नाही, नाव दुरुस्त करा. Stop केल्याने free-tier hours वाचतात; files disk वर राहतात.

15. घरी करून बघा

Recap

Ravindra Bagale, trainer: linkedin.com/in/ravindra-bagale. File names (photo.html, beach.jpg, myvideo.mp4, mykey.pem), myphotos आणि services folders, Dubai चं page आणि example.com चे addresses शिकण्यासाठीची उदाहरणं आहेत; PUBLIC_IP म्हणजे तुमच्या instance चा public IPv4 address आणि VIDEO_ID म्हणजे YouTube video चा id. wget output चे काही भाग "..." ने छोटे केलेत; prompt मधलं hostname उदाहरणादाखल आहे.

उजळणी, तुलना आणि मुलाखत cards

हा lesson काही मिनिटांत revise करा. Cards phone वर save करा किंवा PNG download करा. प्रत्येक card वरचा QR हा lesson उघडतो.

अजून cards: Ravi Sir's Cards.