Disclaimer: This tutorial helps our clients write the HTML to insert into WordPress Posts, Pages and Widgets. It is in no way a complete introduction to html, and someone wanting to learn more best check out W3Schools. They’re awesome.
What is HTML?
HTML makes the world wide web go around. It’s a kind of like DNA except for websites.
Writing something in html is just like writing something in Microsoft Word or Notepad, except that you tell the browser what type of thing you’re writing. You do this by beginning with an opening tag, such as “<p>” and ending with a closing tag such as “</p>”.
Luckily WordPress handles most of the html for you. Sometimes some HTML knowledge comes in handy when editing your Posts and Pages, and it’s always necessary to update some Widgets.
The Gnitty Gritty
Paragraphs, for instance, begin with a “<p>” and end with a “</p>”. The code for the paragraph above, then would be.
<p>Writing something in html is just like writing something in Microsoft Word or Notepad, except that you tell the browser what type of thing you’re writing.</p>
If you want to add a line break without adding an additional paragraph, add a “<br/>” at the end of the line.
If you want a header like “Writing HTML” above, begin that line with an “<h2>” and end it with a “</h2>”. A smaller and less important header is signified by beginning with “<h3>” and ending with “</h3>”. Widgets don’t need headers–they should be built in already.
This is a H2 Header.
<h2>This is a H2 Header.</h2>
This is a H3 Header.
<h3>This is a H3 Header.</h3>
Linking to your other posts and pages is an important part of running an easy-to-navigate website, and it also tells Search Engine’s what’s important (and that you’re doing a good job).
You’ll also want to link to content on other websites from time to time.
Links have the following structure:
<a href=”https://www.artsygeek.com”>This text will be a link to the home page of Artsy Geek.</a>
If you want the link to open up into a new window, include “target=”_blank”” in the opening tag.
<a href=”https://www.artsygeek.com” target=”_blank”>This text will be a link to the home page of Artsy Geek that opens in a new window.</a>
Linking to Email Addresses
When you link to an email address, replace the entire web address (starting with that “http://”) with “mailto:” followed by the email address you want to link to.
<a href=”mailto:email@example.com”>This text links to an email to firstname.lastname@example.org</a>
That’s the basics.
We hope you enjoyed this Technology for Everyone Tutorial.
Leave a comment and let us know if everything was clear.
Happy Internet Sailing! It’s a beautiful World Wide Web out there just waiting to be discovered…and conquered.