A list that may come in handy:
Sorry, no camps are available at the moment. Check back in a week or two!
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:
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…
This one I actually didn’t memorize; I always have to copy and paste. A simple text box is like this:
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:
- 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.
- 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.
- 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
- 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.
- 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>
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!
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
- 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!
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).
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:
- cadet blue