WordPress HTML

If web design and WordPress are new to you, here are some pointers to get you started.

HTML

Of course you can do a lot with WordPress without delving into the HTML tab, but when you’re ready to do more, you will need to become familiar with is the basics of HTML.  For HTML pages, each url or web address points to a separate file on a disk somewhere, typically on a web server.

e.g. http://example.com/home.html

HTML documents are constructed with:

  • Markup Tags
  • Content
  • References to images, etc.
  • Links

Markup Tags tell the web browser how to display the content.  For example, the Bold tag tells the web browser to display the text in bold.   The bold markup tag looks like this:

<b>Something to bold</b>

Notice how the tag surrounds the content to which it applies.  Tags can be and typically are nested as well.

A simple HTML document consists of some document tags like this:

<html>
  <head>
    <title>This shows up in your browser's window frame</title>
  </head>
  <body>
    Here is where your page content goes.
  </body>
</html>

The browser doesn’t care about the indentation, that is for us humans trying to manage the markup codes.  Notice how the “title” tag is surround by the “head” tag, which in turn is surrounded by the “html” tag.  Tags can be either upper or lower case as well.

Some of the common HTML tags are:

<b>bold</b>
<i>italic</i>
<em>emphasize</em>
<p>paragraph</p>
<a href="anotherpage.html">Click here for anotherpage</a>
<img src="picture.jpg" />

The “anchor” tag “a” identifies a link, both the visible “Click here” part and the url or address of the page the browser should load if the link is clicked.

The “image” tag “img” references an image file that should be loaded and displayed on the page, in line with the content.  Tags that do not surround content don’t have a “closing” tag, but you should “close” your tag with a space and a slash before the trailing greater than sign like we did above.

There is also a “div” tag which works a lot like a paragraph tag.

<div>some block of content</div>

There is also a “span” tag that works a lot like a generic font control tag.

<span>some important words</span>

CSS

These “div” and “span” tags allow us to format our content with CSS styles.  It’s the modern way to format documents because it lends itself to site wide consistency.  With CSS, you define content types or “classes” like “important” and then create a CSS definition of what items marked with those classes look like.  For example.

.important {
    color: red;
}
<span>Now Hear This!!!</span>

To build on our earlier HTML example, we’ll show this in the context of an HTML document.

<html>
  <head>
    <title>This shows up in your browser's window frame</title>
    <style type="text/css">
      .important {
        color: red;
      }
    </style>
  </head>
  <body>
         Here is where your page content goes.
    <span>Now Hear This!!!</span>
  </body>
</html>

Notice we introduced the “style” tag, which goes in the “head” portion of the document.  These CSS definitions can also go into a separate file and referenced by this and all documents on your web site to keep the definitions the same across your entire web site.  An example of this tag that goes in the “head” section is:

<link rel="stylesheet" type="text/css" media="all" href="styles.css" />

There are many CSS rules you can use in the class definition.  Here are some common ones.

.example {
  color: red;
  text-align: center;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 20pt;
}

This of course is not an exhaustive list, and this is not an exhaustive tutorial.  Much more information can be found on the web at sites like www.w3schools.com/css/

WordPress

WordPress is a content management system that let’s you ignore most of the issues of dealing with web pages, and just post your content.  It does this by storing your content in a database and then assembling the all the markup and content when the page is requested by a visitor.

WordPress has a “Visual” editor that let’s you manage content without knowing any HTML or CSS.  That works fine for basic formatting, but there are times when you’ll have to dip into the “HTML” view of your page content to do more sophisticated layout.

One common reason to dip behind the “Visual” tab into the “HTML” tab is to specify options when you insert a youtube video into your site.  It’s really easy.

  1. On each youtube video page, there is a “Share” button which expands a section below the video.
  2. In this new section, there is an “Embed” button which expands another section below it.
  3. This newly expanded section contains a box with an “iframe” tag already highlighted.
  4. Below that are some other options you can tweak and the embed codes will automatically update.  If you’re trying to keep people on your site, you might uncheck the “Show suggested videos when the video finishes” check box.
  5. When you’re happy with your options, simply copy and past the “iframe” HTML code into the HTML tab on one of your posts.  It’s that easy.

That should get you going in the right direction to posting your own content.

This entry was posted in News. Bookmark the permalink.

Comments are closed.