Title and bio: your first tags
The first thing to do is select edit on the file called index.html. This is the main file for your website’s content. When someone visits your site, what you put here is going to be what they see.
By default, you’re going to see something like the following screenshot:
What you should do is erase everything between the things that pieces of text that read <body> and </body>. That means you’ll have a page that looks like
Now that we’ve got the equivalent of a blank canvas, let’s go ahead and start adding content.
What you’re doing here is writing marked up text. This means that you write the text you want to appear—whether that text is a title, a bullet point in a list, a paragraph, or the text of a link—and then you add code around this text in order in order to turn it one of those things.
The very first thing we’ll make is the title of our page.
First, after the thing that says <body> write the text of your title! I’m choosing
left_adjoint's Computational Peculiarities
based on my handle as an experimental musician and writer.
To mark it up we put an <h1> before the start of the title and at the end of the title we put a </h1>. Typing those exactly as written is important! So my title is going to look like
<h1>left_adjoint's Computational Peculiarities</h1>
Now, click on the View in the top-right corner of the page to see what you’ve made so far! For me, it looks like the following image
The <h1> is the “open” tag for the heading and the </h1> is the “close” tag for the heading, and whatever text you put between the open and close tag is the text that is used to make the heading.
The h1 means “largest possible heading”, which is what you’d use for a title or something along those lines. There are others, h2 through h6, where the bigger the number the smaller the heading. Think of something like sub-titles or sub-headings within a book’s table of contents.
As an aside: why is it called h1? Because this technology is all decades old and, when it was first invented, having as few characters as possible to send over the internet was important to make communication as fast as possible. These days, when people regularly stream high definition video at 60 fps, a few extra characters don’t matter much. We’ve kept the old names, though, so that all websites still work no matter how old they are.
If at this point, you’ve managed to make a title for yourself and have it show up correctly, congrats! You’ve now successfully practiced the main skill you need for writing any web page no matter how complex: writing opening and closing tags and putting text between them. Everything else is just details.
But our tutorial doesn’t end here and we’ll dig into at least a bit more of the details.
The last thing to do in this section is try writing a little bio about yourself and what you do. You’re going to put that bio between two paragraph tags: <p> is the open tag for paragraphs and </p> is the closing tag for paragraphs. For my example, I decided it looked better if I broke it into two paragraphs
<p>My name is Clarissa Littler, or left_adjoint in the weird small places of the internet, and I'm an artist, programmer, and teacher based in Portland, OR.</p>
</p>I create poetry, generative art, algorithmic music, and essays on the relationship between people and technology. Below I link to some of the projects I've worked on!</p>And if we save and view this site, it will look like
In the next section, we’re going to start talking about showing off projects and how to embed media and create links.