Introduction: Snork Adding HTML TAGS to Instructables

Ok so I am making my Instructable El Día de los Muertos (The Day of The Dead) and I wanted to center the text in part of the Instructable so I tried HTML tags for center.



And a funny thing happened the text centered.
So on one of my published Instructables that mysteriously went from published to drafts I tried some more HTMLs like text color and low and behold I could control the color of the text. In fact I could change the text color at will.


Now here is the fun part I can’t put the HTML in the Instructable without it doing its job.

 

Step 1: HTML TAGS

So I bitmapped it.

Although bold, italic, and underline, is in the editor strikethrough and center is not in the new editor.

Your text goes here  bold

Your text goes here  italic
 
Your text goes here  strike through
 
Your text goes here  underline
 

Your text goes here


Color of text when you enter the font color from that point on the font is that color until you enter a new color however some text colors do not come out in the old editor.

Your text goes here  red text
 
Your text goes here  blue text
 
Your text goes here  orange text
 
Your text goes here  hot pink text
 
Your text goes here  aqua text
 
Your text goes here  purple text
 
Your text goes here  green text
 
Your text goes here  magenta text
 
Your text goes here  lime text
 
Your text goes here yellow text
 
Your text goes here  navy text
 
Your text goes here  sky blue
 
Your text goes here  marron text
 
Your text goes here  gray text
 
Your text goes here  black text
 
These are symbols not in the editors symbols.

 

 

 

 

 

 

 
©
 
 

Step 2: Emoticons

:skullwink:
Unfortunately Emoticons however don't work yet.
:@
:)



 

Step 3: Greek Alphabet

Inspired by Jack A Lopez I added the Greek Alphabet.
 
No matter what I did if I enter the HTML Tags in the Instructable it converts to the symbol so back to a pic.

alpha Α α “Α α”                     nu Ν ν “Ν ν”
beta Β β “Β β”                       xi Ξ ξ “Ξ ξ”
gamma Γ γ “Γ γ”                   omicron Ο ο “ο ο”
delta Δ δ “Δ δ”                      pi Π π “Π π”
epsilon Ε ε “Ε ε”                   rho Ρ ρ “Ρ ρ”
zeta Ζ ζ “Ζ ζ”                        sigma Σ σ “Σ σ”
eta Η η “Η η”                        tau Τ τ “Τ τ”
theta Θ θ “Θ θ”                     upsilon Υ υ “Υ υ”
iota Ι ι “Ι ι”                             phi Φ φ “Φ φ”
kappa Κ κ “Κ κ”                    chi Χ χ “Χ χ”
lambda Λ λ “Λ λ”                  psi Ψ ψ “Ψ ψ”
mu Μ μ “Μ μ”                       omega Ω ω “Ω ω”

However copy and paste from Word works well.

Α α  Alpha
Β β  Beta
Γ γ  Gamma
Δ δ  Delta
Ε ε  Epsilon
Ζ ζ  Zeta
Η η  Eta
Θ θ  Theta
Ι ι  Iota
Κ κ  Kappa
Λ λ  Lambda
Μ μ  Mu
Ν ν  Nu
Ξ ξ  Xi
Ο ο  Omicron
Π π  Pi
Ρ ρ  Rho
Σ σς  Sigma
Τ τ  Tau
Υ υ  Upsilon
Φ φ  Phi
Χ χ  Chi
Ψ ψ  Psi
Ω ω  Omega

Comments

author
Josehf Murchison (author)2013-11-13

Testing testing 123

https://www.instructables.com/id/El-Día-de-los-Muertos-The-Day-of-The-Dead/
Joe

author

OK that didn't work

author
rimar2000 (author)2013-11-06

Pardon: <big>, Michael.

author
kelseymh (author)2013-11-05

Congratulations! You've found one of the nice tricks which PRO members have access to :-) Here's a few things to clarify:

1) If you want to include the literal angle brackets, you have to use HTML entities for that purpose: greater-than is "&gt;", which is displayed as ">"; less-than is "&lt;", which becomes "<"; and the ampersand itself is "&amp;" (which is how I showed you the entity strings :-) ). So I can tell you that the "bold" tag in HTML is written as "<b>bold</b>".

2) Emoticons are not HTML (neither tags nor entities). They're interpreted (or not) by whatever text-processing code is used on the back-end server.

author
Jack A Lopez (author)kelseymh2013-11-05

Hey, I just noticed the "Insert Special Character" button in my "Rich Editor" here.  Maybe it has been there the whole time.  ;-)  This button has a dark blue capital omega, a well-known character from one of those other alphabets, and thus a good choice to symbolize the set of all other characters.

The darn thing is, when I click on that button, I get a set of 210 characters, which does not include the capital omega, or any other Greek letters. To be clear, I'll attach a screenshot of this.

I guess that means if I actually want to insert a capital omega, Ω , into my text, I will have to do it the old-fashioned way via the edit-the-html, also called "Source" button.

BTW, for everyone reading this who doesn't know, the HTML entities for Greek letters are just the spelled out phonetic "word" for that letter, with the first letter lowercase for lowercase, and first letter uppercase for uppercase, like so:

"&alpha;" is displayed as: α
"&Alpha;" is displayed as:  Α
"&beta;" is displayed as:  β
"&Beta;" is displayed as: Β
"&gamma;" is displayed as: γ
"&Gamma;" is displayed as: Γ
.
.
(and so forth until)
.
"&omega;" is displayed as: ω
"&Omega;" is displayed as: Ω

I really feel for the non-pros, if they aren't even allowed to write Greek letters in their posts.

select_special_character.png
author

Maybe if non pro members try writing in word like I do then cut and paste in there instructables and messages they could send Ω £ β ≥ ® ∑ ῷ ᾯ after all word has a lot more symbols.

author

Hey, that's another good idea. I guess there is multiple ways to do this.

author

Thanks for the Greek alphabet idea I added that as a step.

author
kelseymh (author)Jack A Lopez2013-11-05

Hi, Jack. It looks to me like the set of characters in that display are nothing more than the ISO-Latin-1 character set. Those are the characters you could also insert using numeric entities (&#nnn;). The Greek letters, and other named entities, actual come from different character sets. I would have expected the editor to support them, but maybe not.

By the way, you do not need to go to "Rich Editor" then "Source" to use HTML directly! If you type into the default comment box, you can embed HTML directly (that's what I did with the entity stuff above).

author
Jack A Lopez (author)kelseymh2013-11-05

Whoa! Typing it in directly? Without "Rich Editor"? That'd be like looking at the Matrix unencoded. Lemme try it...

1 Ω = (1 V)/(1 A)

...and "Preview" button... and wow! How about that? I didn't know it could be done that way.

author

Other than center, for some reason the entities did not work even on bold it went past the entities.

Ω, π, β, and ∞, I write in word then copy and paste into my Instructables and so on and all these symbols come out.

I do remember having trouble with these symbols at one time and they come out here and in PM when I cut and paste from word.

Bummer about Emoticons but you cant have every thing.

author
rimar2000 (author)2013-11-05

I use only some easy HTML tags, like or . HTML has many loopholes, depending on the navigator.

author
rimar2000 (author)rimar20002013-11-05

When I said "like or ." I want to say "like \ or \". The editor interpreted the tags.

author
rimar2000 (author)rimar20002013-11-05

When I said "like or ." I want to say "like small or big". The editor interpreted the tags.

author

I do not know how your translator program will react but maybe if you try writing in word like I do then cut and paste in your translator then cut and paste in Instructables and messages you could send Ω £ β ≥ ® ∑ ῷ ᾯ and after all word has a lot more symbols. I know text color will not work when you cut and paste from word.

author
kelseymh (author)rimar20002013-11-05

Use entities for this. See my top-level comment to Joseph.

author
rickharris (author)2013-11-05

useful - Thanks

author

About Ω, π, β, and ∞, I write in word then copy and paste into my Instructables and so on and all these symbols come out.

I do remember having trouble with these symbols at one time and they come out here and in PM when I cut and paste from word.

author
iceng (author)2013-11-05

Nice,
Favorited you ysterday.

A

author
Josehf Murchison (author)iceng2013-11-05

Thanks icing

I belong to a couple online writing groups that critique my writing before I publish fresh eyes see mistakes I miss, and to make my Carmen figuratums I use HTMLs.

After all if you can't figuratum your Carmen you can't have a Carmen figuratum.

So I tried the HTMLs I use on this sights and they work.

You know I never thought about Ω, π, β, and ∞, I write in word then copy and paste into my Instructables and so on and all these symbols come out.

I do remember having trouble with these symbols at one time and they come out here and in PM when I cut and paste from word.

About This Instructable

1,405views

5favorites

License:

Bio: I am a photographer, a tinker, an electronics technology engineer, and author; I write short stories and poetry for the love of writing. I started ... More »
More by Josehf Murchison:Gluten Free Rhubarb MuffinsAmateur NaturalistTen Unusual Uses for a Condom That Can Save Your Life
Add instructable to: