How to Enhance Your Instructables Using HTML
How to Enhance Your Instructables Using HTML

Instructables are an awesome way to share your knowledge and learn from others. Sometimes, a lot of text in an Instructable can be intimidating, or an Instructable just doesn't look very interesting. To solve this, you can use HTML and CSS.

HTML is useful for organizing your instructable into sections (read more on Wikipedia).
This includes things like: lists, simple text formatting, links, tables, and much more.

CSS is used to make the HTML look appealing and easier to read (more info on Wikipedia).
This includes things like: spacing, color, font, alignment, backgrounds, and much more.

Thanks to theedisoneffect for suggesting the creation of this Instructable.

NOTE: Sorry mobile users, most of this stuff only works on a computer :-(

Step 1: What You'll Need

How to Enhance Your Instructables Using HTML
How to Enhance Your Instructables Using HTML

There is only one requirement for this instructable: an Instructables

HTML has many tags, but only a few are allowed to be used in an Instructable. I have done my best to show all of the useful supported tags below, but if I missed any, be sure to let me know!

Input TagOutputI do nothing!
How to Enhance Your Instructables Using HTML
Sample computer outputWarning: "Font" is an outdated tag
But, this is the only way to color text on mobileSee step 6,,See step 4See step 2 for a possible useA link to my last Instructable See step 5 for another useNormal text This text is superscriptedNormal text This text is subscripted or Normal text This text is strong (bolded) or Normal text This text is emphasized (italicized)Normal text This text is underlinedNormal textThis text is in a blockquoteh6This can be used to show code (see step 2 for another way)
  • Unordered list item 1
  • Unordered list item 2
  • Ordered list item 1
  • Ordered list item 2, , , See step 3Some text above the horizontal ruleSome text below the horizontal ruleThis can be used to style something or apply a class to text. But, a class must be defined (it can be one that doesn't exist yet)

    For more information about the tags you should check out w3schools. This gives information about all of the HTML tags and how to use them.

    Step 10: Styling With CSS

    How to Enhance Your Instructables Using HTML

    CSS is where stuff gets cool! You can do A LOT of different things with CSS, with only a very few being listed here.

    CSS Code Example Description and Notes cursor:move;

    This text is styled

    Changes the cursor's look color:red;

    This text is styled

    Changes the color of text
    Check out this page for predefined color names font-size:1.2em;

    This text is styled

    Sets the size of text
    Can be used in these formats font-family:Lucida Console;

    This text is styled

    Determines the font of text
    Click here for more fonts height:120px; width:120px;

    This text is styled

    Defines the dimensions of the element
    (background is outlined in black) padding:5px;

    This text is styled

    Leaves space around an element
    (background is outlined in black) overflow:auto; height: 10px;

    This text is styled

    Creates a scrollbar if the text extends beyond the defined height and/or width border:2px solid grey;

    This text is styled

    Creates a border
    More info about the border property here background-color:#C6D7DE;

    This text is styled

    Changes the background color text-align:center;

    This text is styled

    Aligns the text to the right, center, or left text-decoration:underline;

    This text is styled

    Underlines or overlines text text-shadow:2px 2px 1px red;

    This text is styled

    Creates a shadow based on the text
    More info on the text-shadow property here font-variant: small-caps;

    This text is styled

    Makes every character uppercase, but smaller.

    Using inline CSS:

    Styled text here

    Step 11: Example Instructable

    This mini Instructable uses a few of the items you have learned. The steps are separated using multiple fieldset tags. The pictures are inserted using the img tag.

    Make a Blinky Circuit

    How to Enhance Your Instructables Using HTML

    This simple circuit blinks two LEDs.

    Difficulty: e a s y .. You need to be able to read a schematic

    Step 1: Materials

    How to Enhance Your Instructables Using HTML

    To make this circuit, you'll need a few components:

    PartSource (pictures are clickable!)2x 10KΩ resistors
    How to Enhance Your Instructables Using HTML
    How to Enhance Your Instructables Using HTML
    2x 220Ω resistors

    How to Enhance Your Instructables Using HTML
    How to Enhance Your Instructables Using HTML

    2x 10-47µF capacitors

    How to Enhance Your Instructables Using HTML
    How to Enhance Your Instructables Using HTML

    2x LEDs

    How to Enhance Your Instructables Using HTML
    How to Enhance Your Instructables Using HTML

    2x PNP transistors

    How to Enhance Your Instructables Using HTML
    How to Enhance Your Instructables Using HTML

    ~~ = This common part can be salvaged from almost anything

    ~~ = You can salvage this, or if it's bought, there will be leftovers

    Tools:

  • Breadboard
  • 3.5-5.5V power supply
  • Jumper wires Step 2: The Circuit

    How to Enhance Your Instructables Using HTML

    The circuit consists of resistors, capacitors, and LEDs. The 10KΩ resistors and the capacitors do the job of keeping a steady pace, while the transistors are responsible for turning the LED on/off.

    See step 1 for a list of materials required for this circuit.

    Step 3: Hooking it Up

    How to Enhance Your Instructables Using HTML

    Connect all of the components as seen in the schematic and watch it blink away! =)

    How to Enhance Your Instructables Using HTML
    exampleInstructable.txt5 KB

    Step 12: Conclusion and References

    How to Enhance Your Instructables Using HTML

    Learning everything in this Instructable at once is almost impossible. This was created to inspire the use of HTML/CSS in your Instructable, and as a reference if you do use them.

    Because there is so much to cover, I may have missed something or didn't explain something very well, so please ask questions or leave feedback!

    References:

  • W3schools HTML tag reference
  • W3schools CSS property reference
  • W3schools TryIt editor (try your code before putting it in an Instructable)
  • Instructable.com's stylesheet
  • Another stylesheet


    Thanks for reading! =D

  •  
     

    Tag cloud

    make build easy simple arduino making homemade solar laser printed portable cheap mini building custom cardboard wooden create super lego turn paracord chocolate your paper light intel