Good morning everybody and welcome to this special live seminar which is an introduction to HTML for WordPress users. It’s important to understand that most of what you’ll learn here today is the same regardless of the theme that you’re using in WordPress.
That is to say, HTML and CSS may behave exactly the same way both in say TwentyThirteen or TwentyEleven or in Genesis or in Thesis. Your method of editing them is going to be very familiar regardless of the theme that you use but we are teaching today using Thesis as an example and using Thesis systems. We have the same HTML seminar for Genesis using Genesis specific tools and Genesis specific examples.
What is HTML?
So, what is HTML? HTML is the fundamental language of the web and it is a combination of human language and machine language that your browser can interpret. HTML includes both things that are specifically to be used by your browser to determine how the page should appear and determine what the elements are. The human language, whether it’s English or Spanish or French or Swahili that you will be reading when you view the page, that’s what HTML is.
HTML of a Web Page
And I want to show you an example of that so let’s come over to the site that we’ll be working on today, thesis2demo.com. We’ll view the page source to see the HTML of this page and it looks like this. All of this is what was needed in order to create the content that you’re looking at here. This title, “The Barking Chihuahua Cafe” can be found once we get down here and we’ve got all those menu elements and each one of these things is part of that menu.
You’ve got a whole bunch of code up here at the beginning and then you’ve got all of this English language code that sits down here which ultimately becomes the content. So that is HTML and all of this is HTML.
HTML in WordPress
Now, in WordPress, most of your HTML is automatically generated so almost everything that you saw there in that source was generated by WordPress without any effort on anybody else’s part. Again, let’s look at that source. All of this in the head was generated automatically by Thesis and WordPress. There are potentially some boxes and plugins that are installed on the site and that kind of thing but all of that is automatically generated, you don’t have to interact with it at all.
The same thing is true with the menu, all you had to do is create the menu and say what you want it to be on the menu but WordPress automatically generated the HTML here. Really, the only parts of this that are not absolutely automatic happen inside of the main content area or inside of Thesis text boxes or inside of WordPress text widgets. These places here are the only places where the HTML is not automatically generated and even here some of it is.
So in spite of the fact that there’s a ton of readable machine intended code in this HTML page, the lion’s share of it in WordPress is automatically generated and it’s not necessary for you to write yourself. That is not the case if you are creating your own HTML pages from scratch.
One of the reasons why we say that WordPress is so much easier to use is because you don’t actually have to manage this as you would if you were writing HTML from scratch. You don’t have to know how all those pieces come together because that part of it is handled for you.
The Traditional Way to Learn HTML
The traditional way people learn HTML is not particularly useful for WordPress users and it’s especially not useful for beginning WordPress users. In the traditional system, HTML and CSS are taught separately and it starts off with a plain text editor so they’ll say, for example, open up notepad. This is very, very, very common way of doing it and they’ll say, open up notepad and then they are focused on creating a complete document.
An Example Page
So typical HTML just starts off with an opening HTML tag, closing HTML tag. Then inside of that would be an opening head tag like this and we’ll just do a closing head tag without anything in it. And then opening body tag and a closing body tag and then some kind of content.
So we’ll do an example of that with an opening h1 tag and say, “Hello World”. We’ll take this file which in this case we have to save as a text file and we’ll just save it as Howdy.txt and then change the name of it from Howdy.txt to Howdy.html.
Then open it up in a browser and there it is, now it says, “Hello World”, this is your HTML document then and this is the process that they go through where you end up step by step creating your own webpage from scratch and the webpage is complete and entire in its own right. That is, it has this file, this what they refer to as document. This document contains everything that it needs and is complete all by its lonesome which is not the case in WordPress, that’s not how WordPress works.
Now, one of the things they do when they start teaching you how to style this is they start adding inline styles. So if they want to change the color of this, now they’ll say styl=color:red and they’ll place it in inline style in the document. Now let’s bring that document back up; we actually have to open up the HTML version of this now. Now we’re in the HTML version, save it, refresh it and now it’s red.
So they teach CSS as something separate from HTML and if you want to talk about what things should look like you start off by what is considered to be poor professional practice, you start it off by adding inline styles here. That is the typical way of doing it and it results in you learning very bad habits at the beginning.
It also results in you learning things that are entirely academic that is, they have virtually no practical application in WordPress because they have you manipulating and changing things or having responsibility for creating things that WordPress automatically controls. You spend a lot of time learning a lot of information that does not help you actually use HTML and CSS in WordPress.
The WordPress Way to Learn HTML
So what we’re doing here today is working on a WordPress centric or WordPress way of learning HTML and CSS. And the WordPress way to learn it is first, it starts off with the editor that is built directly into WordPress.
Text Editor System
We’re going to take a look at that here extensively throughout the day but obviously that is the WordPress text editor or a WordPress text widget or a Thesis text box. The ability to add content to all of those is part of the WordPress text editor system and those editors are built directly into WordPress, there’s no need to use some other text editor to do this.
Also, there are no documents, WordPress does not have files that represent HTML pages that are complete documents in and of themselves. WordPress stores the information that would be inside of a page in a database and then draws different pieces of the page from different sources and assembles them altogether into an HTML page that it generates.
So there’s no such thing actually as a document that is your Home page or a document that is your Testimonials page. Even though that’s exactly the way it would be in a traditional HTML context, that does not exist at all inside of WordPress. There are no documents in WordPress.
Learn CSS Simultaneously with HTML
However, CSS can and really ought to be learned simultaneously with HTML. You don’t go to HTML school and learn HTML along with a lot of very bad styling habits and then you have to unlearn bad styling habits with good CSS practice. You yourself don’t have to figure out how to attach a stylesheet to WordPress or attach a stylesheet to a page because WordPress and Thesis manage that for you.
All you have to do is learn how to write CSS rules so that they apply to the specific elements that you want to change and in this way, you can bring your HTML knowledge and your CSS knowledge up concurrently with each other. So you can learn basic CSS and basic HTML at the same time.
That’s how we’re going to learn it. If you go to lynda.com, you’re going to have an opportunity to take a great class in HTML but it’s not going to be particularly useful in WordPress whereas in this case, we are going to ignore most of the things that you would learn in a regular HTML class and talk about the HTML that is relevant when you are working inside of WordPress.