Lesson Series

Using HTML and CSS with WordPress

Any WordPress theme has the capability to be configured differently than intended by the author of the theme. However, this can be cumbersome, depending on which theme you are trying to edit. And WordPress, by nature does not make editing the CSS code easy. And theme updates can also erase alterations you have made to the style sheet(s). There is one theme, though, that builds into its structure a flexible CSS setup that allows you to alter at will very specific areas of the website, and does it in a way that is fairly easy to understand for the beginner. The theme I am talking about is called Weaver, and it should be easily obtained for anyone who has an active WordPress site or blog.

What makes Weaver special is that it allows the user a multitude of intelligent choices to alter the design of the site. A beginner can simply make the choices it gives, in terms of color, size, special effects, etc. Plus it has many functional aspects, such as what ancillary info about each post you want to display, hiding titles and tags you may not want to display, and so forth. In essence, it allows you to make a WordPress site look more like a website, and not a blog. And, of course, you can still have a separate blog attached to the site.

More advanced users can use its many options in regard to adding, or altering the CSS of the site. Many of the nodules for affecting the appearance of the site, also have optional dialog boxes that allow for additional CSS code. This is a huge plus in the ability to position and size things the way you want. And it doesn’t stop there. There are additional codings areas for the head area of the site for additional CSS styling, Google Analytics code, and other features you may need to add.

Through my next series of blog entries, I am going to concentrate on showing the beginner how to successfully operate a WordPress site. I will start with some basics, though, about how HTML and CSS work, and how they work together. I will demonstrate later in the series how you can use html and css in your WordPress theme, but more specifically, a site with the Weaver theme installed.

Anyone with an active WordPress site should be able to install the Weaver theme any time they want and just start adjusting the settings. If you know HTML and CSS, you should immediately recognize the nature of this theme. In making its choices of settings to choose, the developer did it with design at the forefront. If you don’t know HTML and CSS, there will still be plenty of variables and design choices, right at your fingertips. Come back to learn about HTML and CSS though, as it will only enhance your experience greatly.

Posted in HTML-CSS Lessons | Tagged , , , , , | Leave a comment

Basic HTML

Understanding HTML can be a little intimidating at first, but it doesn’t have to be hard to understand. Basically, every type statement on a website page needs to have tag identifiers to tell the browser what it is and how to interpret it.

But first what does an HTML tag look like. An HTML tag is an identifier surround by the symbols <tag> and <tag/>. Every element has an opening tag, <tag> and the closing tags < />. You can recognize the closing tag by the additional / before the last >.

A basic web page is constructed somewhat like this:

<html>
<head>
</head>
<body>
</body>
</html>

Everything between the <html> and </html> tags is the entire page. Everything between the <head> and </head> tags contains vital information for the site to display and perform properly. Everything between the <body> and </body> tags is the visible part of the web page. You should also note here that <head> and <body> sections of the web page are contained within another tag, <html>. You will see this pattern repeatedly as you build web pages.

Here is another example of a simple HTML page. You will notice that now within the <body> tags, there now appears two more sets of tags that contain specific content. The first set of tags are the <h1></h1> tags that contain the headline, and a set of paragraph tags (<p></p>) containing the first paragraph. All web browsers have automatic settings for these tags, so simply by using these tags alone with no other information, any web browser will render these tags properly. Other standard tags are the subheadings (<h2></h2>,<h3></h3> thru <h6></h6>.

<html>
<head>
</head>
<body>
<h1>This is a Headline.</h1>
<p>This is the first paragraph.</p>
</body>
</html>

When this page renders in a browser, the only thing visible to the reader is the content between the <h1> tags and the <p> tags, as shown below:


This is a Headline.

This is the first paragraph.


Another tag is the <blockquote></blockquote>. This tag offsets its content from the rest of the text. People will recognize this as a callout, quote, highlight, etc. of something you want your audience to pay special attention to, usually something from the text itself.

All of the tags so far have been in some from of a paragraph, that the tags used separated the content inside it from the content inside the other tags. There are other tags, however, that can be used specifically on the content within the tags, such as for bolding and italicizing text. You can use the <strong></strong> tag for bolding text, or the <em></em> tag for italicizing.

<html>
<head>
</head>
<body>
<h1>This is  Headline.</h1>
<p>This is the first paragraph.</p>
<blockquote>This is the blockquote.</blockquote>
<p>This is the second paragraph.</p>
<h2>This is a second-level headline.</h2>
<p>This is the first paragraph <em>after</em> the <strong>second-level heading</strong></p>
</body>
</html>

Again, the following is how the code above would looked rendered inside a typical browser:


This is Headline.

This is the first paragraph.

This is the blockquote.

This is the second paragraph.

This is a second-level headline.

This is the first paragraph after the second-level heading


You can try this out yourself if you have a text editor that can save files in the html format. Simply paste the code above into the text editor, save it appropriately as an html document, and then open it with a web browser. You should see very similar formatting as the formatted text you see here.

Posted in HTML-CSS Lessons | Tagged , , , | Leave a comment

Lists in HTML

My last post did not get into lists, but this is a good category to learn on its own. Lists consist of two types of tags working together. The first tag you need to know is the <ul> or <ol> tags, and their closing companions, </ul> and </ol>. These tags are wrapped around the list, and are different in the type of list they represent. <ul> is for “unordered list”, like a bulleted list, and <ol> is for “ordered list,” where html will provide a numbered list of your items.

In order to specify the list items, they are wrapped in <li> </li>, for “list item”. The finished code for an ordinary list with a heading might look like this:

<h2>Shopping List</h2>
<ul>
<li> bananas</li>
<li>tomatoes</li>
<li>cereal</li>
<li>rice</li>
<li>dog treats</li>
</ul>

Displayed as:


Shopping List

  • bananas
  • tomatoes
  • cereal
  • rice
  • dog treats

Now an ordered list:

<h2>Shopping List</h2>
<ol>
<li> bananas</li>
<li>tomatoes</li>
<li>cereal</li>
<li>rice</li>
<li>dog treats</li>
</ol>

Displayed as:


Shopping List

  1. bananas
  2. tomatoes
  3. cereal
  4. rice
  5. dog treats

Posted in HTML-CSS Lessons | Tagged , , , | Leave a comment

The Role of Tables in Early Web Development

The roots of CSS lie in a need for web site developers and designers to control the design aspects of their web pages. Before the advent of CSS, designers were forced to use tables, in order to control the layout, the placement of images, etc. Sites with complex backgrounds had to be sliced in very complex ways to accommodate creative placement and style. Tables will always have a useful purpose, as tabular data will always be required, but it is best used in that specific role, and not as a layout tool. Before the advent of CSS, though, there was little else one could used to add unique style, layout and design to a website.

Before I get into CSS, it may be helpful to see how tables work. Tables use a series of tags in combination, somewhat like the lists used tags in combination. The first set of tags tag is simply <table></table>. As one might expect, the <table> tags are wrapped around the entire table. Inside these tags there will be two other sets, <tr></tr> and <td></td>. The <tr> tags represents rows, and the <td> tags represent cells within those rows.

Here is an example of the structure:

<table>
<tr><td>Blue</td><td>Orange</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

Blue Orange
Red Yellow

This table example is extremely simple. There are also ways to combine cells within rows or columns.

<table>
<tr><td colspan=”2″>Blue</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

Blue
Red Yellow

In the example above, by adding …colspan=”2″… to the first openingtag in the row, html combined the the cells across the two columns of the table to make one cell. The second set of

tags are removed as all the columns of the table are accounted for, and is not needed.

<table>
<tr><td rowspan=”2″>Red</td><td>Blue</td></tr>
<tr><td>Yellow</td></tr>
</table>

Red Blue
Yellow

With the last two example, one can start to imagine how tables can be manipulated for the purpose of the layout of pages. We can imagine regions set aside for headers, or columns running down one side of the page. Now imagine putting tables within cells. That’s right. If I were to take one of the above examples, and then place an entire table and place it within one cell of another table, the code would look like this:

<table>

<tr><td>Blue</td><td>

<table>
<tr><td>Blue</td><td>Orange</td></tr>
<tr><td>Red</td><td>Yellow</td></tr>
</table>

</td></tr>

<tr><td>Red</td><td>Yellow</td></tr>
</table>

Blue
Blue Orange
Red Yellow
Red Yellow

At this point it should be apparent that this method could indeed created many possibilities for the layout of a page. But it is also true that this type of structure can get very complex very quickly. The code soon gets to be very confusing and hard to read. When nothing else existed to aid in the layout of web pages, tables were the answer. Today, however, there is a much better way—table-less CSS, cascading style sheets, which I will cover in my next post.

Tables do have a purpose, however, and that is to display tabular data. If you have a data set that is best displayed in rows and columns, tables allow you to do this in a neat and orderly way, just like table functions in other page layout or word processing programs. There is no tab function in html, so tables are the only to get information, through cells (<td>), to line up in a way that makes sense to the website visitor.

So tables are a great way to display data as a separate element within a page, but should never be used as the layout structure.

Posted in HTML-CSS Lessons | Leave a comment

CSS to the Rescue

CSS, or Cascading Style Sheets is a method developed to allow for laying out web pages without the use of tables. With tables, the html code used starts to get really cumbersome, and confusing. Also, once developed, these pages can be confusing to edit later on.

With CSS, sections of a web page can be sectioned off and given certain characteristics, like width, height, background color, etc. Some of these sections can be directed to “float” to the left, or to the right. CSS greatly simplifies the code, and makes edits later on much easier to implement. CSS is much more readable than complicated table structures.

With CSS, you can put sections within sections, similar to way you can put tables within tables to create a layout. Yet, when this is done with CSS, the sheer volume of code is greatly reduced, and the remaining code is simpler and easier to read.

Besides losing all the table code (<tr>, <td>, etc.), you lose all of the descriptive code that is required when not using CSS. All that code is located in its own area, either within the head of the html document, are in an additional .css file, that is referenced inside the html page head.

Posted in HTML-CSS Lessons | Leave a comment

Using CSS to style HTML

The easiest way to demonstrate how CSS works is through examples of the code, and then how these code examples would display on a web page. With CSS, there are lines of code that needed to be added to the basic HTML that determine specific regions to be stylized by CSS. One of the most common of these elements is called a “div”. Think of div as short for division, or divider. Once a certain section of HTML is placed within a div, you can control how everything in that div looks, and also how it might be placed on the web page.

Here is an example of some HTML code set inside a div:

<html>
<head>

<style type=”text/css”>

#imagefloatright {
float: right;
width: 200px;
height: 200px;
}

</style>

</head>

<body>

<div id=”imagefloatright”>
<img src=”http://outwardimage.net/blog_examples/boat-homepage.jpg” />
</div>

<h1>Top 50 Boats</h1>
<p>On the list, many familiar names are represented, but there are a few surprises. Pictured to the right is the top boat in this year’s show.</p>

</body>
</html>

Click the following link to see how this code would display in a browser window.

Popup Example

You can see by the popup example that the image of the boat (<img src=”http://outwardimage.net/blog_examples/boat-homepage.jpg” />)ended up on the right side, as it was designated to “float” to the right (float: right;) inside the div called “imagefloatright”(<div id=”imagefloatright”>).

The div is set inside the HTML using this format:

<div id=”(name of div)”>
[text or visual content]
</div>

from the example:
<div id=”imagefloatright”>
<img src=”http://outwardimage.net/blog_examples/boat-homepage.jpg” />
</div>

The div has an opening and closing tag like all other HTML. The div needs the id to designate it from other divs. You can name a div anything you want, but you should name it something relevant to what is going to be in the div or where the div may be placed on a page. Any text or other content is placed between the opening and closing div tags, and is carried along with the div wherever it goes.

In the example, the content is an image, placed between the div tags.

The div is referenced in the CSS code by using a # symbol for a div. So in the head section of the HTML code, between the CSS style tags, the div is designated in our example by:

#imagefloatright {}

The elements that you place within the {} symbols are the style properties that the div will be assigned, thus affecting how that div displays.

Again, in our example, the CSS code looks like this:

float: right;
width: 200px;
height: 200px;

Each one of these lines is called a CSS declaration. A declaration consists of a property and a value. In the case of the first line, the property is “float” and the value is “right”. All CSS declarations are written in the same syntax. Following the same example, each declaration begins with the property to be defined (float), followed by a colon (:), a space, then the value (right), and then finally a semi-colon;

The other declarations are pretty obvious as to what properties they control. The div is exactly 200 pixels wide by 200 pixels high, a perfect square.

 

Posted in HTML-CSS Lessons | Leave a comment