Skip navigation

WordPress School: HTML and CSS Tutorial

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.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.

HTML links and code in web writing.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.

Screenshot of HTML - Experimental Test Web Page First View - Lorelle WordPress School.

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

Lorelle's WordPress School Assignment Badge.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:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


One Comment

  1. Posted April 12, 2015 at 11:24 pm | Permalink

    Reblogged this on MaryAnn's World.


8 Trackbacks/Pingbacks

  1. […] « WordPress School: HTML and CSS Tutorial […]

  2. […] learning about HTML basics. I shared a little history and information to help you get started and gave you an HTML file that you will use in this tutorial. In the next tutorial, I covered some very basic HTML elements found in the test HTML file. In this […]

  3. […] will be working more on the test HTML file and continuing with the experiments you did in the last tutorial and move from inline CSS styles to […]

  4. […] far in this mini-series on HTML and CSS for Lorelle’s WordPress School, we’ve covered the basics and gave you a test HTML file to experiment with, explored the basics of HTML tags, inline styles with CSS, HTML embedded styles […]

  5. […] Lorelle’s WordPress School free online course we’ve been exploring HTML and CSS basics to help you prepare for working with WordPress Themes coming soon. The information in these […]

  6. […] we round up the mini-series on HTML and CSS basics as part of the ongoing Lorelle’s WordPress School free online course, and to prepare you for […]

  7. […] ones work. Learn basic HTML. I’ve got a week series of lessons to help that start with WordPress School: HTML and CSS Tutorial, and there are many places online offering contextual, video, and online classes for free or low […]

  8. […] is in a sidebar Widget, you must identify a CSS ID in the HTML. You should have just finished the HTML tutorial series in this online course, so don’t be intimidated. View the source code and search for […]

Post a Comment

%d bloggers like this: