Immortal Ideas
Adding Hero Image
A hero image is that big image banner that you see on the homepage of websites. It reinforces the idea that the website propogates.
Let's first choose a picture. Download a CC0 Mars Picture and then copy paste it into the folder where the Mars.html file resides. The image needs to be in the same folder as the html file. Rename the photo and set the name as Mars-photo.jpg
Now let's open the Mars.html file with Visual Studio. Go to the menu of Visual Studio. Click on the file menu and then click on the Open File menu. Locate the Mars.html file and select it.
So upto now the code is -
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Mars Calling. Get Your Tickets Now!</h1>
</body>
</html>
We will now add the image after the H1 tag.
The code for that is -
<img src="Mars-Photo.jpg">
Put the name of the image exactly as it is. Also note that this <img> element has no closing tag. Everything is written within the bracket.
So, the full code with the H1 will look like this-
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Mars Calling. Get Your Tickets Now!</h1>
<img src="Mars-Photo.jpg">
</body>
</html>
Now suppose you created an Images folder within the main folder. In that case, you need to mention the 'path' using the slash symbol - /
<img src="Images/Mars-Photo.jpg">
__________________________________________
If you click on the html file and open it on your browser, it will now look like this
