Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc

(1)

Essential HTML & CSS for WordPress

Mark Raymond

Luminys, Inc.

949-654-3890

[email protected]

www.luminys.com

(2)

HTML: Hypertext Markup Language

• HTML is a specification that defines how pages are created

for the web.

<h1>Hello, World!</h1>

• CSS – Cascading Style Sheets – describes presentation (how

things should look)

h1 {font-size: 34px; font-weight: bold; color: #ff0000;}

• Javascript – a program language in your web page run by

the browser to respond to mouse events, handle form

validation, dynamic content (e.g., stock ticker), and

animation.

(3)

HTML

• A little HTML knowledge

can go a long way

• Easy to switch between

visual and text (html)

mode in WordPress

• WordPress takes care of all the complexities, so

that you only need to understand HTML for

text

(4)

HTML Tags

• Tags are how we structure and display content

• Tags may contain content:

<h1>Header 1 Text</h1>

• Some tags don’t contain content:

<br />

<hr />

• All tags must be closed with a “/”

• Tags may contain parameters:

(5)

HTML Text Tags

• Headers

<h1>Header 1 Text</h1> Header 1

• Paragraphs

<p>The quick brown fox</p>

• The <span> tag is used to apply styles to text inside a

paragraph

<p>The quick <span style=‘color:#9a6b49;’>brown</span> fox</p>

(6)

HTML Text Tags: Bullets & Lists

OL tag: ordered (numbered) list

<ol>

<li>List option 1</li>

1. List option 1

2. List option 2

3. List option 3

</ol>

UL tag: unordered (bulleted) list

<ul>

 List option 1

 List option 2

 List option 3

<ul>

(7)

HTML Tags: Images

Image tag elements:

img

_{Image tag}

src

_{Source image URL or URI}

Let’s digress and discuss URLs:

http://www.luminys.com/wp-content/updates/2013/10/mark-Raymond.jpg

Domain Name

URI

(8)

HTML Tags: Hyperlinks

Hyperlinks link text to other websites:

<a href=“http://www.luminys.com”>Go to the Luminys home page!</a>

Or to pages in your own website:

<a href=“/about/”>About Us</a>

And you can link images:

(9)

HTML Layout Tags: Tables

 Avoid using tables for page layout

<table> <tr> <th>Item</th> <th>Cost</th> </tr> <tr> <td>Bananas</td> <td>$0.58/lb</td> </tr> <tr> <td>Apples</td> <td>$1.32/lb</td> </tr> </table>

Item

Cost

Bananas

$.058/lb

Apples

$1.32/lb

This table has no style, so simple black outline, no text justification

Tags that compose a table:

<table>

Table tag

<tr>…</tr>

Table row

<th>…</th> Table header

<td>…</td> Table cell

You can put anything in a cell:

text, images, etc.

(10)

HTML Layout Tags: DIVs

DIVs are used for page layout and contain HTML code

that you can position on the page

Header

WordPress Page

Side

b

ar

Content

Footer

Your Content

<div>

(11)

HTML Layout: DIVs Example

<div style=‘float: left;width: 33%’>The brown fox</div> <div style=‘float: left; width: 66%;’>Runs fast</div> <div style=‘clear: both; width: 100%;’>

The quick brown fox runs fast. </div>

The quick brown fox runs fast.

The brown fox

Runs fast

We used some inline CSS here:

float

_{left, right}

(12)

Cascading Style Sheets

• Lots of styles – color, size, fonts, outlines, margins

and spacing, location on page, transparency…

• A single CSS files can be created with all your styles

and included in all your HTML web page

• Your WordPress theme defines your styles

• Quality themes include an advance setting where

you can add your own custom styles

• Inline styles are used inside of HTML tags:

(13)

Let’s Digress (again) and talk about color

• 16 colors can be represented as 0 – F

• 16 * 16 = 0x0F * 0x0F = 256

• 256 shades of color at 00 – FF

• Colors on the web are represented

as R(red) G (green) B (blue), with 256

shades of each color:

#rr

ggbb

Binary Decimal Hex

0000

0

0 0001

1

1 0010

2

2 0011

3

3 0100

4

4 0101

5

5 0110

6

6 0111

7

7 1000

8

8 1001

9

9 1010

10 A

1011

11 B

1100

12 C

1101

13 D

1110

14 E

1111

15 F

#ffffff

white

#000000

black

#888888

gray

#ff0000

red

#00ff00

green

#0000ff

blue

(14)

Common CSS styles

color:#ffffff;

element color in hex

width: 250px;

element width in pixels

font-size: 2em;

element size in pixels or em

text-align: center;

text alignment

line-height: 28px;

line spacing in pixels or em

font-weight: bold;

font weight (bold, normal, light)

font-family: Arial;

Times New Roman, Arial, etc.

background-color: #ff0000;

element background color in hex

background-image:

URI or image

(15)

Margin and Padding

Now is the time for all good

men to come to the aid of

the quick brown fox.

margin: 25px;

Now is the time for all good

men to come to the aid of

the quick brown fox.

(16)

Making your page pixel perfect

Now is the time for all good

men to come to the aid of

the quick brown fox. The

quick brown fox jumped

Unformatted, line height

pushes text down

over the log as he chased the rabbit

through the forest, where upon he

Now is the time for all good

men to come to the aid of

the quick brown fox. The

quick brown fox jumped

over the log as he chased

the rabbit through the

forest, where upon he tripped and fell

and bonked his head.

padding-top: 15px; padding-right: 15px; padding-bottom: 15px;

or

(17)

(18)