HTML-FOR-EVERYONE

HTML for everyone

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>

Linkage

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.

Inserting Links

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>

This text will be a link to the home page of Artsy Geek.

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>

This text will be a link to the home page of Artsy Geek.

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:info@artsygeek.com”>This text links to an email to info@artsygeek.com</a>

This text links to an email to info@artsygeek.com

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.

About the Author: Jen

Leader of the Artsy Geek team and creator of Camp Artsy Geek, Jen comes from a long line of get-rich-quick-schemers. A serial entrepreneur, she launched her first business at the age of 12: a crocheted good pop up. A lover of good design and effective marketing, Jen believes that life -- and business -- should be fun and enjoyable. Life is short! Follow your dreams and train your brain to support your success. We're in this together. Rock on!

Chime In!

You!


*