Good morning everybody and welcome to this special seminar on an Introduction to HTML for WordPress and Genesis 2 Users. This is a true introduction to HTML. We’re going to start at the very beginning and we’ll be working our way through the process.
This seminar assumes that you don’t know anything about HTML. I’m sure some of you probably already do know some HTML and to that extent, at least the very first part of this is going to be rudimentary and won’t include much in the way of new information for you. We’ll focus on WordPress at first and then later in the seminar we’ll get to more Genesis 2 specific information.
What is HTML?
So what is HTML? HTML is the fundamental language of the web and it is a combination of human language and that’s not necessarily English but it’s whatever language your content is in and machine language that your browser can interpret. This is what delivers the appearance of a web page to you.
We’re working on this site right here today, byobgenesis.com, and this is just a straight Genesis 2 theme. I don’t have a child theme installed here.
If we view the page source here, this is the HTML of the page and the content of the page is actually pretty small. It’s this “Learn to Build a Website Just Like This”, there’s a paragraph and list and a couple of widgets and things like that. It’s got tons and tons of this machine code, meta, link, meta property, that sort of thing and then body and ul and li. All these things are machine-readable code. Then it gets down to some human-readable code, “This site is designed to showcase the services offered and provided”, so on and so forth.
You’ve got this human language in here and then you’ve got all of this additional again machine-readable code, some of which just looks like gobbledygook. And this is HTML. Almost all of this HTML is actually generated for you.
In fact, you know maybe it would be interesting just to see that one more time. Let’s come over here to create a brand new page. We’ll add a new page and give it a title and give it a tiny bit of text. Let’s view that page and then view the page source. Again you can see tons and tons of HTML even though we only have a little tiny bit of content.
All the way up here, in the midst of all this HTML, we’ve got this one little tiny piece of content, right? Everything else here was automatically generated. I didn’t do anything to create this, that automatically happened. The only thing that I did was type in the “Hello World” and we got this page. And that’s what I mean by most of this stuff is automated for you.
The Traditional Way to Learn HTML
There’s a traditional method of learning HTML and CSS and in the traditional method, HTML and CSS are taught separately. So it starts off by using a separate text editor and it’s focused on creating a complete document. For example, if you go to lynda.com and look at their basic HTML course, they’ll start you off with typing an opening and closing HTML tag. Then inside of that they’ll have you type a head tag and then a closing head tag. Inside of that they’ll have you type an opening body tag and then inside that they’ll have you create a heading tag.
You’ll finish the file off and then save the file, call it “Hellow World”. And then what you have to do is change the name of the document from helloworld.txt to helloworld.html. You can open it up in your browser and lo and behold, you have a misspelled “Hellow World”. This is the HTML page that you’ve created by typing all that code from scratch.
Let’s open that document up, all files and open up Hellow World.html. After you create the document they teach you how to style this using inline styles which is very poor practice. I’ll add some here, so style=color:red and save it. And now if you refresh your browser and the text is red. The course goes on to developing all of the complexity of HTML based on this kind of an application.
However, it starts by having you create a complete document and it uses inline styles to style the text that you include. Unfortunately, most of this traditional HTML instruction is entirely academic for WordPress users and very little of that stuff has any practical application and the reason is that again, WordPress automatically does this coding for you.
WordPress Way to Learn HTML
WordPress automatically writes most of your HTML for you and so I take a nontraditional approach to teaching HTML and CSS. Most of the information that you learn in a standard HTML course doesn’t do you any good and so I want to teach you the WordPress way to learn HTML.
In WordPress, the HTML editor is built into WordPress and so you don’t need a separate editor to write your HTML and the second place, there are no documents in WordPress.
WordPress does not have a page that has all of the HTML in it for all of your pages. What WordPress does is it takes content that you entered into the text editor, places that in the database and then it assembles different template files and different pieces of data together into an HTML page.
There is no single file anywhere in WordPress that has all of that content in it. So learning that whole document system doesn’t do you any good because WordPress doesn’t have documents like that.
One of the good things is that some of the complex aspects of CSS are handled also automatically for you which means that CSS can and really ought to be learned simultaneously with learning HTML and so that’s the process that we’re going to be going through.
You only need to know a little bit of CSS to be able to use it and you only need to know a little bit of HTML in order to use it. You don’t need to learn the really complex aspects of it because the complicated parts of it are already handled for you.
You can learn both of these things in simplified forms simultaneously rather than taking a course in HTML and then going back and taking a course in CSS and then blending those two things together. What we’re going to do is start with them blended and talk about basic simple HTML and basic simple CSS together and that I think is the right way to learn this kind of material.