WordPress School: HTML and CSS Tutorial

Over the past week we’ve been learning about the web browser, your gateway to WordPress and the web. This was a precursor to the next mini-series of tutorials in Lorelle’s WordPress School free online course. We are going to learn HTML and CSS.

Learning WordPress from the inside out means learning the basic fundamentals of HTML and CSS. HTML is the core architecture of the web. It is the framework that holds content and design. WordPress Themes are built on the architecture of HTML, the styles or “paint” of CSS, and the engines of PHP, JavaScript, jQuery, WordPress Template Tags, and other web programming languages.

According to Wikipedia, HTML as created by Berners-Lee and his team was to allow not just text but graphics to be converted into visual or audible content accessible by anyone.

The first publicly available description of HTML was a document called “HTML Tags”, first mentioned on the Internet by Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML…

HyperText Markup Language is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer’s additional use of CSS.

When it comes to learning HTML, treat it like learning a language. Okay, not the whole language. This isn’t an HTML course. We are going to learn the basics to give you a fundamental understanding of how a web page is formed and how to manipulate some basic HTML and CSS to arrange and style the end results. Consider it like learning a vacation language. You will learn just enough to get you through the adventure.

By the time you complete this series of tutorials, you should be able to add inline styles to WordPress posts and Pages, add HTML to the Text Widget and other areas of your site, and tweak your WordPress Theme. When we get to learning more about WordPress Themes, you will be able to speak the lingo and communicate with the natives.

As you go through these next tutorials, work hard to visualize what you are doing, not just do it. HTML works best when you can see what it looks like in your mind as you work on the code because most of the time you won’t be able to see it until you generate the web page in the browser. Working with HTML requires a lot of imagination, which can make it great fun for many and frustration for a few. Breathe through it. I know you can do it.

To complete the following tutorials, you will need a text editor. In our tutorial on Text Editors, you were introduced to a few examples and should have one picked out by now. If not, jump now.

We are going to start with the structure of a basic HTML web page. Inside of it are HTML containers, tags that hold instructions and content.

As you work on each tutorial in this series, you will be making modifications to the HTML web page code, changing the look and feel. Each lesson builds upon the other, improving your skills and familiarity with HTML and CSS. We will start with inline styles, the styles you might use within a WordPress post or Page or Text Widget, and move toward separating the styles from the HTML framework, how your WordPress Theme would work.

I’m breaking these tutorials up into digestible chunks, one step at a time.

Be brave. You can do this.

Creating the HTML Test Page

To begin this series of HTML lessons, open your text editor of choice (NOT Windows Notepad or MS Word).

1. Copy the code below taking care to only select and copy the same HTML tags
2. Open a new file in the text editor
3. Paste the code into the text editor ensuring you didn’t copy any unwanted stuff. Delete it if you did.
4. Save the text file as test.html to a folder you can easily find later
5. Keeping your text editor open, open test.html in your web browser using a button or tool in your text editor or find the file on your computer and double click it. It will open in your open web browser.
6. As we go through the lessons, you will make changes as indicated in the tutorial in the test.html file. Save it, and reload the web page in the browser to see the changes. Switch back and forth between the browser and text editor as you go forward.
7. Keep playing with this to experiment and make it look different.

The following is the basic HTML code and CSS styles for the tutorial. In this experiment, the styles are embedded, featured in the web page header section for you to easily change, rather than in a separate file. We’ll talk about moving the styles out of the HTML file later.

<!DOCTYPE html>

<html>

<head>

<title>This is a web page title</title>

<style type="text/css">

body { }

div { }

div p { }

p { }

a { }

a:link { }

a:hover { }

a:visited { }

</style>

</head>

<body>

<div>

<p>Hello world!</p>

<p>I've created <a href="#" title="This is a sample link.">a link</a>. This is a <a href="#" title="This is another sample link.">second link</a> for further testing.</p>

</div>

</body>

</html> 

Want to see what it looks like? It will be boring. View the saved HTML file in your web browser.

Yep, very boring. That’s okay, we’ll be breaking it and making it look cool in the upcoming lessons.

The next section will introduce you to the concept of HTML tags and a few of the most basic HTML tags we use in class and in WordPress content and Themes.

Assignment

Per the above instructions, open the text editor and copy and paste the HTML into a new file and save it. View it in the web browser.

Take time to explore the text editor if you haven’t already. Try writing your next post on your site in with the HTML you learned in an earlier tutorial. Remember, in the text editor, use two ENTERs at the end of a paragraph to create a blank line between paragraphs. You do not need the paragraph tag in WordPress, though you will in our test file.

Look for some basic tutorials on the text editor you’ve chosen to get familiar with it.

Hang on, we’re heading into some more code. Come on, it will be fun.

Join us in our discussions on this assignment in our WordPress School Google+ Community. We will be talking some basic HTML and learning about using the text editor for these tutorials. We are discussing this on Assignment: HTML and CSS Tutorial in Google+.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---