Testing Font Sizes and Colors

Test Scratch Pad – Failed Tests

Below is the output of my testing out ways to define font types, sizes and colors using the <font> tag .  It no longer works in HTML 5

Now is the time for all good men…

desdemona fontThree of a kind all over again.

Three of a kind all over again.


3 Kinds of Lists

Samples of 3 Types of List That Can Be Done Using HTML

Taken from Dave Raggett’s Getting Started with HTML W3C’s website (2005)

This page shows the results of the code which is shown on the coding tab of my editor but it’s not available to others viewing the page.  So in the 3rd example I’ll show both the result and the coded version below it (the source code that was used to create the result)

ul = unordered ol = ordered and dl = definitiion list
li is for all list items except definitions which uses dd instead

UNORDERED uses ul & li

  • the first list item
  • the second list item
  • the third list item

ORDERED uses ol & li 

  1. the first list item
  2. the second list item
  3. the third list item

DEFINITIONS uses dl dt & dd 

the first term
its definition
the second term
its definition
the third term
its definition

dl is for defining the kind of list it is…a definition list
dt is for the word being defined…aka the term
dd is for the actual definition

CODE FOR THE DEFINITION LIST ABOVE

<dl>
  <dt>the first term</dt>
  <dd>its definition</dd>
  <dt>the second term</dt>
  <dd>its definition</dd>
  <dt>the third term</dt>
  <dd>its definition</dd>
</dl>

2nd Test for Using Inline HTML

Change Font Type, Size & Color

This time I’m trying another approach…using the WordPress WYSIWYG editor to create different sizes and colors and then examining the code it uses to accomplish that.  I know for font sizes how to use the <h> tag but was wondering if I could change the size anymore beyon those 5 or 6 default heading sizes…so for this aspect the approach mentioned won’t be helpul (I think.)

Here’s a pretty large font size (H2) in a very light color

Here’s a very small font size (H6) in a dark color

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s