Personalize an Instructable ... Add HTML Code

by Gosse Adema

2.8K6214

Intro: 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:

Vote on this instructable!

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.

12 Comments

Sjoerd Hekking 3 years ago

So inserting a <table> won't work, it shows up in the editing process, but when I press "Full Preview" it doesn't, any help? :)

Sjoerd Hekking 3 years ago

I accepted the fact tables can't be used anymore

bravoechonovember1 8 years ago

I added a .GIF inline with help from your instructable!

https://www.instructables.com/id/How-to-Fake-a-Laser-Cut/

Butane Flame 8 years ago

It's got my vote. Thank you for sharing. I know a little bit about HTML so may have a go at this.

JesusG33k 8 years ago

Can we use the <script> tag?

Gosse Adema 8 years ago

<noscript>Sorry, instructables does not support JavaScript!</noscript>

Jeph Diel 8 years ago

very cool, I just wanted to let you know that the colors and the tables did not work when viewing with an android phone with the mobile app.

Gosse Adema 8 years ago

Looks like the android app differs from the ios app.