Note on 4/3/21: The fonts aren't working currently on this page, it's not fantasticly useful right now, my tone is bad, I'll fix it next week
Note on 5/3/21: Fonts are working now, remember to put type="text/css" inside the style tag where you import the font. Shown in code, also, my homepage works fine without that bit
So, you've created a Neocities page, and you want to put a title at the top of it. Nothing fancy, just some words in a box. Shouldn't be a problem, right? But you draw your basic rectangle and put some text in it using this method:
<div style="width:500px;height:100px;border:1px solid #000;">This is a rectangle!</div>
Which produces this:
Which is a perfectly serviceable box with words in it, until you look at it (as someone is bound to do) a pocketable touchscreen device. Because the width of that box is in pixels. Which are frowned upon on the modern internet (literally in the case of mobile users) as the great variety of viewing devices means that more now than ever, we need things to fit the width of the screen.
SVG! Scalable Vector Graphics are a fantastic invention which means that we can draw things (in myriad different programs, which I don't use) or describe things in code (which I do use). And in bareish HTML, we can draw our lovely box which scales with window size, and even round the corners.
Here's the overall code used to create the graphic at the bottom of the page, as used on the homepage of this site. A number of readers will probably just copy it and go at this stage. Enjoy.
<svg viewBox="0 0 500 100">
<defs>
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@600&display=swap");
</style>
</defs>
<rect x="3" y="3" rx="2" ry="2" width="99%" height="95%"
style="fill:white;stroke:black;stroke-width:5;opacity:1" />
<style><![CDATA[svg text{stroke:none}]]></style>
<text x="50%" y="20%" dominant-baseline="middle" text-anchor="middle" font-size="20"font-family="Cabin">WELCOME</text>
<text x="50%" y="37%" dominant-baseline="middle" text-anchor="middle" font-size="20"font-family="Cabin">TO</text>
<text x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" font-size="40" font-family="Cabin">CARRYNICK</text>
<image x="10%" y="10%" width="30%" height="150%" href="bullethole.svg" />
</svg>
Those of you still here, I'm going to poorly explain each of the elements involved here.
Viewbox: This is the magic that fits the box to the screen. The two zeroes in this example are your starting points for drawing within the viewbox, and the other two numbers are setting the size of the coordinate system used. The viewbox automatically scales to the width of the window using this, 500 and 100 are simply telling it that I want to do my drawing on a 500 (horizontal) by 100 (vertical) grid, so the 100 is always equal to a fifth of the page width. Nifty.
Defs and Styles stuff: I'm not quite sure what it does, but it works to bring in the font I'm going to use on the text. That's a useful thing if you decide you don't like your current font, you don't have to redraw the whole thing. (Actually: defs means defining things to reuse in the SVG multiple times, style seems to be a way of doing CSS stuff within the SVG stuff in your HTML, so you take the link to the font from Google fonts using the @import URL)
Rect: This guide and some trial and error gave me a rounded rectangle in the correct colour.
Style: I have no idea where that line even came from. It works and I'm not messing with it. Use the email on my homepage to tell me where I've went wrong if you feel strongly about this. Edit: Google points me to some funy compatability things, which may or may not be obsolete
Text: The percentages are describing where in the viewbox the text ought to be, I found these values by guesswork followed by trial and error. The dominant-baseline and text-anchor are telling it I want it centered on those points, not aligned to the side, and the rest is very self-explanatory.
Image Much the same as the text, choose where you want it, place it there, scale it correctly (distorted by viewbox being wider than it is tall, easily undone), and Robert's your cousin's Dad
Then you close up the SVG, and test it, and be unhappy with how it turned out, and change it, and test it again. This is called rapid iteration by fancy corporate people.
<svg version="1.1" viewBox="0 0 500 100">
<defs>
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@600&display=swap");
</style>
</defs>
<rect x="3" y="3" rx="2" ry="2" width="99%" height="95%"
style="fill:white;stroke:black;stroke-width:5;opacity:1" />
<style><![CDATA[svg text{stroke:none}]]></style>
<text x="50%" y="20%" dominant-baseline="middle" text-anchor="middle" font-size="20"font-family="Cabin">WELCOME</text>
<text x="50%" y="37%" dominant-baseline="middle" text-anchor="middle" font-size="20"font-family="Cabin">TO</text>
<text x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" font-size="40" font-family="Cabin">CARRYNICK</text>
<image x="10%" y="10%" width="30%" height="150%" href="bullethole.svg" />
</svg>