Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to - ,

WordPress is great because it doesn’t force you to learn HTML to use it. However, many folks find that not knowing HTML places limitations on what they can do. Unfortunately learning HTML can be an arduous process, especially because much of what you would typically learn isn’t relevant in WordPress. This seminar bridges the gap between learning HTML and leaning HTML that will be useful to you as a WordPress (and Thesis) user.

How to learn HTML

  • What is HTML?
    • The fundamental language of the web
    • HTML is a combination of human language and machine language that browsers can interpret
      • show a raw html page
    • Most of the HTML in WordPress is automated
  • Traditional system – HTML and CSS are taught separately
    • Start with a plain text editor
    • Create a document – it’s a file based system
      • Add opening & closing html tags
      • Opening & closing head and body tags
      • Hello world heading
      • Save as html
    • Any styling is done with inline CSS –
      • good CSS practice is taught in a separate class.
      • Very bad habits are learned at the beginning and need to be unlearned.
    • All of this is “academic” – without practical application – to the typical WordPress user
  • WordPress based
    • Editor is built in to WordPress
    • There are no “documents” in WordPress
      • No need to create the document framework
      • You can just start typing
    • Thesis has a built in system for handling and modifying CSS
      • which means that CSS knowledge needs to come immediately
      • Good practices can be learned immediately

Tools of the Trade

  • Firefox
    • ColorZilla
    • Measureit
    • Source Chart
  • Using the Firefox Developer Tools
  • Tour of the developer tools
    • Toolbar
    • Page inspector
      • HTML Pane
        • HTML Breadcrumbs
        • HTML Tree
      • CSS Pane
        • Rules
        • Computed
    • Style editor
      • Stylesheet pane
      • Editor pane
  • WordPress
    • ACE Editor for WP

HTML Tags & the Structure of an HTML Document

  • You generally don’t need to interact with this
  • Doctype
  • HTML tag’
  • Head
  • Body
  • 2 types of HTML tags
    • Containers
    • Self closing
  • Anatomy of an HTML Tag
    • Containers
      • opening tag
        • element
        • attribute
      • content
      • closing tag
    • Self Closing
  • Attributes
    • typical attributes
      • class
      • id
      • href
      • src
      • title
      • alt
    • attributes are comprised of
      • attribute name
      • attribute value
  • Parent/Child/Sibling Relationships
    • Element Types
      • simplified version – critical
        • Block
          • generally begins a new line
          • can take height and width
          • can float
        • Inline
          • does not begin a new line
          • cannot take a height or width
          • cannot float
        • Inline block
          • does not begin a new line
          • can take height, width and float
      • HTML 5 version – useful

HTML in the WordPress Text Editor

  • The different views of the WordPress text editor
  • What the text editor is good at
  • What the text editor is bad at
  • Paragraphs
  • Paragraph tags and non-breaking spaces
  • Using the Visual editor
  • Using the Text editor

Headings & Other HTML Text Elements

  • Headings
    • Types of headings
    • Headings are block level
  • Blockquotes
    • Purpose of blockquotes
    • Block level element
  • Span
    • Purpose of the span tag
    • Not block level

Creating Lists in HTML

  • Unordered lists – block element
    • ul
    • li
  • Nested lists
    • nested ul within an li
  • Ordered lists
    • ol
    • li
  • Other uses for lists
  • Lists are block level elements

Creating Links in HTML

  • Text link
  • Attributes
  • Anchors

Using Images in HTML

  • Anatomy of an image tag
  • Attributes
    • src
    • title
    • alt text
    • height
    • width
  • Inline block element
  • Image Links
  • HTML image is different than a CSS background image

Styling Text with Inline styles

  • The good – text formatting
    • Bold <b>
    • Italic <i>
    • small<small>
    • Emphasis <em>
    • Important text<strong>
  • The bad and the ugly

Styling Text With CSS in Thesis 2.1

  • What is CSS?
    • language or defining what html elements look like
  • Cascading Style Sheets
    • How styles are passed through
    • Controls look and feel
    • Many HTML elements with a single style
    • Can style individual elements
  • Why use CSS?
    • Separate style from content
    • Minimize the effort
  • The Cascade
    • From General to Specific
    • Browser
    • External style sheets
    • Internal styles
    • Inline styles
  • Anatomy of a CSS Rule
  • Where to put custom CSS
  • Styling the main page heading
    • inspect the element
    • choose the selector
    • add a selector
    • which selector did Thesis use?

How the font got its color

  • Determining where the main font color comes from
    • Select the element
    • Scroll down the rules list till you find the rule that governs
  • Where do heading fonts get their colors?
  • Where do links get their colors?
  • Changing the blockquote link color

Styling Lists in Thesis 2.1 Using CSS

  • List style

Using the Thesis Body Class System

  • A Method of allowing you to write a rule that applies to specific pages or specific templates
  • The class gets added to the body tag
  • Adding Thesis body class
    • Class can be added in an individual post or page
    • Class can be added in an individual template
  • WordPress body class system
  • Why this works
  • Syntax for everything but the body
  • Syntax for the body

Using Structural HTML in a Post or Page

  • What are Structural HTML Elements?
  • Structural HTML Elements in HTML 4
    • div – block elements
  • Structural HTML Elements in HTML 5
    • all block elements
    • section
    • article
    • header
    • nav
    • footer
    • aside
    • figure
  • Create an testimonial box

Using Structural CSS to style Structural HTML Elements

  • Style the box
    • background color
    • padding
    • border
    • clear float
  • Style the heading
  • Style the text

Create a Button for a Link

  • Create the link
  • Style the link

Styling Text with a Span Tag

Question and Answer

0 Comments… add one
0 comments… add one