Showing off your projects: images

What if you don’t have any media to embed for your project? The easiest thing, then, is to find some kind of picture to use as a preview of the project you made and include that instead!

On Neocities, and any other hosting site, you’ll need to upload the pictures you want to use before you can use them. You can do this from the site’s dashboard and clicking on the Upload button.

Once we have our files uploaded, we can add it in the HTML!

I’m going to create a new heading for this project, in this case it’s something related to the small internet—a rather interesting alternative to mainstream web sites—and I’ve uploaded an image file called GeminiSpace.png. So I’m going to use a tag called img to make the image, with an attribute src similar to the href attribute we used to make links and an attribute called alt where we put a description of the image to help people with screenreaders.

    <h2>Geminispace site</h2>

    <img src="GeminiSpace.png" alt="A screenshot of a gemini site called Inconsistent Universe">

    <p> I have a geminispace site, often called a gemini <i>capsule</i>, at gemini://inconsistentuniverse.space. You should be able to view it with any gemini browser! If you're not familiar with geminispace, you can learn more <a href="https://gemini.circumlunar.space">at the Gemini project website</a>. </p>

The image will be, by default, included at whatever resolution you took it. We’re going to talk later about how resizing can work but for now my best advice is that you can crop your images to be roughly the size you want them to appear as on the screen, experimenting with aspect ratios and such. If you want a square image, try to crop it so that it’s square.

You also might notice that the tag img only has an open and not a close tag! This is one of the few tags that’s an exception. Almost every other tag other than img has both an open and close tag.

Right now, in the following screenshot, you can see how the site looks with my image included:

Now we’ve introduced all the basic parts of HTML that we need to describe the content of our portfolio site.

However, we’re not even close to done! We’re now free to start changing the way everything looks with Cascading Style Sheets or CSS. In the next module, we’ll be showing how to tweak the color, shape, and layout of your portfolio site!