HTML Playground

Syllabus:

  1. How to Code a Line
  2. How to Code a Text Box
  3. How to Code Page and Post Jumps

A list that may come in handy:

  1. Colors List

Camps:

Sorry, no camps are available at the moment. Check back in a week or two!

Class:

At the HTML Playground, I try my best to teach whatever I can that I know of regarding HTML to all of you. I by no means am an expert, as I’m still quite young, but if you ever need help I’d be more than happy to see what I can do. I suggest having a draft post or page on your blog so you can try coding as we go along!

Please note: Any HTML coding required in this course must be done in the “Text” tab of the WordPress interface, as shown below:

text tab wordpress

Lesson 1: How to Code a Line

This is by far the easiest HTML code I have learned, but I actually learned how to code a text box before I learned this.

All you have to do is type <hr> in the Text tab (shown above). Like this!


To add color or a pattern to it, change the code to:

<hr style=”border: 1px dashed red;” />

It will look like this:


There are lots of colors to use [see the colors list]. The patterns you can use are: dotted, dashed, double, groove, ridge, inset, outset, and solid. Simply replace the “dashed” in the code with one of those. Likewise, replace “red” in the code with any color from the colors list. You can change the 1 from “1px” to another number to change the thickness of the line. Different themes have slightly different line formats.

That’s it! It’s probably one of the shortest lessons you’ll ever have…

Lesson 2: How to Code a Text Box

This one I actually didn’t memorize; I always have to copy and paste. A simple text box is like this:

Boxed Text Goes Here

The code is:

<div style="border:1px solid black;float:bottom;width:45%;margin:12px;padding:12px;">Boxed Text Goes Here</div>

Let’s take it apart and look at it. An important thing to note is that the colon (:) lists the subcategories (not exactly sure what they’re called, but I imagine them to be subcategories). The semicolon (;) separates the different categories (once again, not sure what they’re called). You’ll see what I mean later; it’s just something to keep in mind.
The first thing we probably see is style. Well, nothing really to learn about that, because it’s kind of the huge category that all of the following fall into:

  • Border
    • 1px: this is the width of the border. You can change it to any number you’d like, or keep it the way it is.
    • solid: this is the pattern of the border. You can change it to dotted, dashed, double, groove, ridge, inset, outset, or keep it as solid.
    • black: this is the color of the border. There are a lot of different colors you can change it to [see colors list]. I’m always discovering new ones! If you find one that’s not already listed, you can comment it and I’ll add it onto the list.
  • Float
    • bottom: the float controls where the text outside of the box will go. When I got the code it was on the left, and I initially had a problem figuring out how to change where the text outside of the box will go. I literally just now figured out what float meant and I changed the code for you all to make it simpler.
  • Width
    • 45%: I figured that changing the width of the text box would get rid of the text outside of the box being next to it. Turns out, I was right, but the better way would’ve been to change the “float.” For my theme, Adelle, having the width as 95% fills up the page width-wise. I was going to have a list for this too, but it depends
  • Margin
    • 12px: you can change this to any number you’d like. A bigger margin results in a thicker invisible border around the exterior of the text box.
  • Padding
    • 12px: you can change this to any number you’d like, too. A bigger padding results in a thicker invisible border around the interior of the text box.
  • Boxed Text Goes Here
    • Change it to whatever you want the text box to say!

If you want a background color in your text box, use this code:

<div style="border: 1px solid black; float: bottom; width: 45%; margin: 12px; padding: 12px; background: lightcoral;">Boxed Text Goes Here</div>
Boxed Text Goes Here

Note that the only difference is that ; background: lightcoral was added at the end before the quotation marks. Once again, you can customize your color!

Lesson 3: Page and Post Jumps

To not confuse you all, I’m going to direct you all to WordPress’s explanation of these.

Just some important things to note while doing this:

WordPress’s codes are: <a href="#unique-identifier">Click me</a> and <a id="unique-identifier">See?</a>

  • The “#unique-identifier” can be anything, but you need a different identifier for each jump.
  • The >Click me< can be replaced with anything that you want to be linked, so >put your text to be clicked on here<
  • As WordPress also states, try not to have spaces in your identifiers, because they can ultimately cause glitching and browser problems.
  • The first code is the link that starts it; it’s what has to be clicked on.
  • The second code is for the anchor point. It helps me to imagine a ship dropping its anchor. The anchor is where the first code links to.
  • If you don’t want any text for your anchor point, substitute >Click me< with ><.
  • This is the last lesson because it is the hardest; I’m always glad to help if you have questions!

Lists

Throughout the lessons, you might’ve seen [see —- list]. Well, here is our only list for this course! 😛

If you’re looking for a particular item on the list, use control + f and type in your item. On Macs, use command + f. For the colors list, there are no spaces, even if the color name has a space in it (that’s just the way HTML coding works).

Colors List

The colors list was completed on December 21, 2013, with a total of 126 colors!

These are the colors you can use in HTML coding in WordPress (no caps; no spaces) to replace the standard black:

  • black
  • darkslategrey
  • dimgrey
  • darkgrey
  • slategrey
  • grey
  • silver
  • gainsboro
  • maroon
  • darkred
  • firebrick
  • crimson
  • indianred
  • red
  • palevioletred
  • mediumvioletred
  • violet
  • darkmagenta
  • darkorchid
  • orchid
  • magenta
  • pink
  • hotpink
  • deeppink
  • darkorange
  • orange
  • orangered
  • tomato
  • coral
  • lightcoral
  • gold
  • yellow
  • ivory
  • floralwhite
  • cornsilk
  • bisque
  • khaki
  • lemonchiffon
  • papayawhip
  • blanchedalmond
  • peachpuff
  • antiquewhite
  • palegoldenrod
  • beige
  • burlywood
  • darkgoldenrod
  • darksalmon
  • chocolate
  • peru
  • darkkhaki
  • olive
  • olivedrab
  • seagreen
  • darkseagreen
  • palegreen
  • green
  • darkgreen
  • forestgreen
  • darkolivegreen
  • teal
  • darkcyan
  • cadet blue
  • darkturquoise
  • turquoise
  • mediumturquoise
  • chartreuse
  • lawngreen
  • springgreen
  • mediumspringgreen
  • greenyellow
  • yellowgreen
  • aquamarine
  • mediumaquamarine
  • mediumseagreen
  • aqua
  • cyan
  • navy
  • midnightblue
  • darkblue
  • mediumblue
  • steelblue
  • royalblue
  • slateblue
  • mediumslateblue
  • blue
  • dodgerblue
  • deepskyblue
  • skyblue
  • lightskyblue
  • lightblue
  • powderblue
  • paleturquoise
  • blueviolet
  • cornflowerblue
  • darkslateblue
  • indigo
  • mediumpurple
  • darkviolet
  • mediumorchid
  • purple
  • saddlebrown
  • sienna
  • brown
  • violet
  • plum
  • thistle
  • rosybrown
  • sandybrown
  • wheat
  • tan
  • mistyrose
  • lavender
  • moccasin
  • navajowhite
  • lavenderblush
  • seashell
  • lightcyan
  • azure
  • aliceblue
  • mintcream
  • honeydew
  • ghostwhite
  • oldlace
  • whitesmoke
  • snow
  • white

Congratulations! You have completed this course. Click here to go back to the Academy.

Advertisements

26 thoughts on “HTML Playground

  1. Hey, I just wanted to ask you, where did you get your fabulous header? I would really love to make a beautiful header like that one! 🙂

  2. I’ve got a question, I have been wondering this for a while and I just need your help to make it clear.
    How EXACTLY do you change the colour of your text?
    Sorry, I still kind of have no idea how.

    • Of the text? As in regular text, not in a text box?
      Highlight your text.
      Click the “Kitchen Sink” button:
      Kitchen Sink button
      Then, click the “Text Color” button:

      And it should look like this:

      Just choose your color, or if you want something even more specific, click “More Colors” 🙂

  3. Candy, The code you put on here somehow doesn’t work when i do it, BUT is works when I insert this code into the Text Editor: Boxed Text Goes Here

    • ARRGH, well I can’t insert the code in here or it will just show up as “Boxed Text Goes Here” but I looked up the “Inspect Element” thing and I found a working code.

    • No, sorry. It took me quite awhile to make it and I don’t think it would be fair if anybody could put it on their blog. If you’d like to make your own HTML Playground, then please submit a form at the Embassy. Thanks for asking though!

    • You can center the text in the box by switching back to the Visual tab and aligning it to the center. I’m not sure if you can center the box itself or not. I’ll let you know as soon as I find out! Glad you like it, it lets me know that it was worth the effort 🙂

Tell us what you think!

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