Introduction: Personalize an Instructable ... Add HTML Code
This instructable is best viewed with a browser. The mobile apps (especially android) do not support all HTML tags.
This Instructable started when I changed some paragraphs in the editor, used to create a Instructable. I don't even remember which changes I made, but I ended with a different font size for a part of my Instructable.
I fixed this by entering the "background" editor by pressing the [ ] button in the editor. And using this editor takes you right back to the WordPerfect 5.1 (F11) era. This reveals all codes, used to create the layout of your instructable.
Let start with a Question: Has anyone ever wandered why there is only a "Header 3"-type in the paragraph selector?
This is paragraph 3
Well the code used to display this text is:
<h3>This is paragraph 3</h3>
I wondered what happened to Header 1 and Header 2, so I changed the code to:
<h1>This is paragraph 1</h1> <h2>This is paragraph 2</h2> <h3>This is paragraph 3</h3> <h4>This is paragraph 4</h4>
And this gave:
This is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4
And there are more codes to use. All codes are default HTML codes, used for the layout of a website. With this knowledge it's time to change the layout a little more.
So welcome to my instructable, how to customize your instructable. I will give some examples and explain how to use them in your next Instructable.
GosseAdema
Step 1: Add Some Color
One of the HTML features is changing the font color. The combination of Red, Green and Blue (with values from 0 to 255) gives a total of more than 16 million different colors. 140 color names are predefined in the HTML specification. And all modern browsers should support these color names. They should, but it's better to choose the hexadecimal code,
Changing the color of the text is easy:
This is Red
<i style="color:#FF0000";>This is Red.</i>
And the code to display my name on the first page:
GosseAdema
<h2> <i style="color:#6A5ACD;background-color:#F5F5DC;">G</i> <i style="color:#2E8B57;background-color:#FFEBCD;">o</i> <i style="color:#8B4513;background-color:#F0F8FF;">s</i> <i style="color:#FF0000;background-color:#FFF8DC;">s</i> <i style="color:#800080;background-color:#E6E6FA;">e</i> <i style="color:#000080;background-color:#F08080;"> </i> <i style="color:#C71585;background-color:#E0FFFF;">A</i> <i style="color:#800000;background-color:#FFE4E1;">d</i> <i style="color:#4B0082;background-color:#AFEEEE;">e</i> <i style="color:#00008B;background-color:#FFFAFA;">m</i> <i style="color:#0000FF;background-color:#D8BFD8;">a</i> </h2>
With this knowledge you can write: attach the red wire to the blue connector.
Lastly for this chapter, a tabular with 140 colors:
| Color Name | HEX | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| DarkOrange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370DB | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #DB7093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| RebeccaPurple | #663399 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
Step 2: Tables
Next item oftenly used are the bullets.
- one
- two
- three
The code used to display these bullets:
<p> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </p>
Those familiar with HTML know you can create HTML tables:
<table>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
<</table>
This code gives the following table:
| One | Two | Three |
|---|---|---|
| Four | Five | Six |
| Seven | Eight | Nine |
A HTML-table starts and ends with a table-tag. The end-tags always have a forward-slash. Each row starts and ends with a TableRow-tag.
This table contains of one header row and two data rows. The columns in the header row have TableHeader-tags and the other records have TableData-tags. Don't forget to close each item with the corresponding end-tag.
Lets add some color to this table
<table>
<tr style="background-color: #00FF00;">
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>Four</td>
<td style="background-color: #0000FF;">Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td style="color: #00FF00;">Eight</td>
<td style="background-color: #FF0000;">Nine</td>
</tr>
<</table>
Gives the following table:
| One | Two | Three |
|---|---|---|
| Four | Five | Six |
| Seven | Eight | Nine |
Each row or cell can have it's own collors. And there are even more items to change. It's possible to alter the width of the table and the border:
<table border="2" style="width:100%">
<tr style="background-color: #00FF00;">
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>Four</td>
<td style="background-color: #0000FF;">Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td style="color: #00FF00;">Eight</td>
<td style="background-color: #FF0000;">Nine</td>
</tr>
<</table>
Gives:
| One | Two | Three |
|---|---|---|
| Four | Five | Six |
| Seven | Eight | Nine |
Now you know how to create tables, let's add images.
Step 3: Images
The image above is hosted on the Instructables website. Actually it's stored multiple times, with different sizes:
https://content.instructables.com/F6A/6G7O/IEX4WLO2/F6A6G7OIEX4WLO2.png?auto=webp&crop=1:1&frame=1&width=320
https://www.instructables.com/files/deriv/F6A/6G7O/IEX4WLO2/F6A6G7OIEX4WLO2.SMALL.jpg
https://www.instructables.com/files/deriv/F6A/6G7O/IEX4WLO2/F6A6G7OIEX4WLO2.MEDIUM.jpg
https://www.instructables.com/files/deriv/F6A/6G7O/IEX4WLO2/F6A6G7OIEX4WLO2.LARGE.jpg
The links above use the following code.
<a href="https://content.instructables.com/F6A/6G7O/IEX4WLO2/F6A6G7OIEX4WLO2.png?auto=webp&crop=1:1&frame=1&width=320" target="_blank">https://content.instructables.com/F6A/6G7O/IEX4WLO2/F6A6G7OIEX4WLO2.png?auto=webp&crop=1:1&frame=1&width=320</a>
The a-tag defines a hyperlink, which is used to link from one page to another. But there are more tags to link to other content:
<img src="https://content.instructables.com/F6A/6G7O/IEX4WLO2/F6A6G7OIEX4WLO2.png?auto=webp&crop=1:1&frame=1&width=320" alt="Instructable Robot" style="width:200px;height:200px;">
Gives:
Now we have a picture inside the text area!
Step 4: Video
After displaying an image, why not show a Youtube video. All you need to know is the URL to the video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/FaI1eTCZEA8?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
And we have a video. It's even possible to disable the controls by altering the code.
Step 5: Buttons
Not all HTML code is accepted. You can create a button:
Press the button, and it does not trigger any action. You have to use the official "vote" button to vote for an Instructable.
Step 6: Instructables
With all this knowledge you should be able to make a HTML-table with different content:
| Instructable | Link | Note |
|---|---|---|
 | LEGO 3d Printer | Grand prize in the 3d printing contest! |
 | Create 20 Megapixel panoramic pictures with an 8 Megapixel DSLR | Featured. |
 | LEGO (Heartlake) City Playmat | Not featured, take a look! |
 | 3D Chocolate Printer (made from LEGO) | Could use some votes! |
Be inspired, be creative, and make an Instructable.
