DIYDay Lesson 14: HTML Basics

Ready to get back on the horse? Now that you know how to format a book, make a cover page, and all that jazz, let’s see if we can spruce up your internet homestead. Before I begin, I would like to say that there are many places out there which provide you with pre-made templates to make your life easier. But if you want more of a personal touch to your template or want to make your own, begin with the basics. Get ready for a lot of reading.

HTML stands for HyperText Markup Language. If the internet were a body, this would be its skeleton. There are a number of other coding languages out there, Python, Ajax, Javascript, to name a few, but all of them rest on the HTML framework. What HTML does is create structure and it does so by using code with tags that form brackets. Each tag begins with <something> and ends with </something>. If you are missing one or the other, your code will not work, so it’s important to pay attention to the details. Now, the two most important things you will learn with HTML is hyperlinks and tables.

Hyperlinks

Hyperlinks and anchors are two apples on the same tree. They take your page text from “Visit my website at https://aliannedonnelly.com ” to Visit my website. Now, there is nothing wrong with spelling out a link. But if your link takes up two or three lines, you might want to hyperlink. We do this with an <a> tag. On the back end (where your readers can’t see) it looks like this: <a href=”xyzlink“>Something</a>. “a” tells the browser that what follows are directions to go to another place. “href” tells it this will be another website. “Something” tells it how to make the link look on the page. This can be either text or a graphic, which will make it look more like a button. “/a” tells it this is the end of the direction.

While links take people to completely different pages, anchors make them jump around on the same page. For example, you can have a table of contents at the top and let your readers jump to chapter 17 instead of starting from the beginning. In this case, you need two pieces of code. The hyperlink you create will be in the table of contents and will look much like the link code above, but at the end it will have a bit extra. For example, <a href=”xyzlink#anchor“> . But this link needs something to point to, so at the place where you want your link to go, you add a little tag like this: <a name=”anchor”>, which tells the browser, HERE I AM!

Got it? Good. Moving on.

Tables

Organization is my middle name. Well, not really, but I am a stickler for details. The thing is, everyone who looks at your page will see it differently because everyone uses a different device. What you think looks fantastic on your monitor will look cluttered and disorganized on another. To minimize this, use tables. Yeah, they’re a little involved and cumbersome with the code, but trust me, the end result is worth it.

In code, a table is organized by rows and goes from the outside in. Every element has its own tag, and must therefore have an end tag. Note that if you forget even one end tag, you may have to start from the beginning.

<table> – begins the table. The /table (end table) tag will go all the way at the end.

<tbody> – means this is where the contents begin. the /tbody tag goes just before the /table tag.

<tr> – starts the table row. Depending on how many columns you have, the /tr tag will go after you close the last column. You can have as many rows as you need.

<td> – defines the cell in the row. They go from left to right and each cell must be closed with a /td tag.

so your table code might look something like this:

<table>
<tbody>
<tr>
<td> First cell in the first row</td>
<td>Second cell in the first row</td>
</tr>
<tr>
<td> First cell in the second row</td>
<td> Second cell in the second row</td>
</tr>
</tbody>
</table>

And your table will look something like this:

First cell in the first row	Second cell in the first row
First cell in the second row	Second cell in the second row

You can define how you want your table to look with other attributes such as width, height, borders, padding, margins, background, etc. Read all about them here. If you look at the bottom of my home page, the social media buttons are all in a table with an image set as the background to make it look like a button.  If you look at one of my book pages (screen cap below), you will see it has a sidebar on each side of the main content. I did this with tables.

Now, this works, because my website has a fixed width template. That means that regardless of the size of the screen a reader is using, my website will always be the same ratio of width-to-height. Flexible width templates rearrange your content to fit the screen so readers don’t have to scroll left to right. This is great for the reader, but not so much for the person designing the site, because you never know how things will look once you alter the width, which is why you should always test your website on multiple computers and screens.

Remember, no one learns to be fluent in HTML or any other language. We learn the basics of what they can do, and then go online and google the specific piece of code we need 😉 Good luck!