I sort of despise technology. Which is ironic, given that I've spent the best part of my adult life writing about technology in one form or another.
My problem is an innate lack of technical ability combined with a constitutional inability to give up on anything until I've worked out how to do it. It's probably an ego thing.
Anyway, I've worked out a few HTML tricks over the past year, all of which I've used on blogs successfully. On the basis other people might find them useful I'll share them here. Feel free to add your own HTML wisdom in the comments!
- To create a link. If you want to create a link in basic text on your website, the HTML code is dead simple. Just copy/paste this text: <a href =”https://www.yourlinkhere.com”> Text </a>. The first web address should be the page you want to link to, and the ‘text’ part is the word you want to make into a link.
- Create bold or italic text. This is fairly simply achieved by adding certain tags around the text you want to change. For bold text you can either use <b>text<b/> or <strong>text</strong>. For italics, try <i>text</i> or <em>text</em>
- Create underlined text using a similar technique, by adding these tags around your desired text <p style = “text-decoration: underline”>text you want to underline</p>
- Want to force a link to open in a new browser window? Simply add target = “blank” to your link code, so it looks like this: <a href =”https:www.yourlinkhere.com” target=”_blank”> Text</a>
- To add an image. The basic HTML to insert an image into a blog post is as follows: <img src = “image.jpg”> The img src simply means ‘image source’. Often the name of the image will actually need to be a URL because the image is hosted, either within your blog, or on another website or server. In this case, the URL needs to go inside the quotation marks. Not sure of the URL? Right click on the image and look at the properties, which will give you a location URL.
- Make a simple email link. An email link is similar to a hyperlink but you replace the https:// part of the code with mailto: and then replace the URL with an email address. So a simple email link might look like this: <a href = “mailto:you@domain.com”>email me!</a>
- Making a slightly fancier email link is simple. For example, you might want to define what should appear in the subject line of the email when someone emails you via your website. In that case, you would use this code: <a href="mailto:you@domain.com?subject=About Your Blog">email me!</a> This will generate an email to your specified address with the subject line ‘about your blog’.
- Make an image into a clickable link. You might want to do this if you want your blog header to link to your home page, or to create a simple blog badge. The basic code looks like this: <a href="https://www.placeIwanttolinkto.com"><img src="https://www.URLofmyimage.com"</a>
- Create a simple ‘Contact Me’ form on your site. This is a big issue for me, as you can use commercial services and widgets for contact me forms, but they’re often unreliable, or cost money. If you want a very simple contact me form on your site or blog, then copy/paste this code, ensuring to insert your email address in the relevant spot, and also deciding what words you want to use for the various sections of the form – this code will generate a form with a space for someone's name, their comment, and a 'submit' button which will send the contents to you as an email:
<FORM action="mailto:me@domain.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>
