How to RENDER / DISPLAY HTML tags and mask their effect on the text it surrounds; A MUST READ FOR STEEMIT TUTORIAL MAKERS

in #html8 years ago

html things.jpg

Let's start from the familiar to the unfamiliar concept.

It is quite easy to use html tags or markdown styling to format your publications on steemit and during website design/programming; well, if you don't know how, do not be perturbed, I will release a tutorial on it a week from this publication. In the aforementioned case, the tags take effect on the text; for instance, if I want to bold or italize a text, the tags applied will only effect the emboldening on the text, but will never display the tags used to bolden the text.

Now what of a case where I want the reverse to be the case; I WANT TO RENDER THE TAGS and not leave an EFFECT on the text it surrounds. This is usually needed when performing tutorials that involve html tags or markdown styling.

A bunch of tutorials I have seen on steemit, usually, when performing these tutorials (tutorials that involve html tags or markdown styling) employ images as a solution to this challenge, since images cannot encode html effects. Well that's just a way of solving this problem, but IT IS NOT PROFESSIONAL!

The PROFESSIONAL WAY TO RESOLVE THIS CHALLENGE is to use a different character set to encode. In this case you use certain special entities. See the table below for a detailed list of the different entities for rendering your html tags.

Example:

To display this:

<b>Steemit rocks!</b>

Write this:

&lt;b&gt;Steemit rocks!&lt;/b&gt;


Note:
If you write this instead : "<b>Steemit rocks!</b>" it will surely display this for you: Steemit rocks!


Observe that
&lt; displayed (rendered) this <
also,
&gt; displayed (rendered) this >


You could also render them using numbers; that is the one i personally prefer.
To display this:
<
Write this:
&#60;

Also
To display this:
>
Write this:
&#62;

See the tables below for a complete guide:

Table One:

Character Entity Decimal Hex Rendering in Your Browser
quotation mark = APL quote &quot; &#34; &#x22; " " "
ampersand &amp; &#38; &#x26; & & &
less-than sign &lt; &#60; &#x3C; < < <
greater-than sign &gt; &#62; &#x3E; > > >
Latin capital ligature OE &OElig; &#338; &#x152; Œ Œ Œ
Latin small ligature oe &oelig; &#339; &#x153; œ œ œ
Latin capital letter S with caron &Scaron; &#352; &#x160; Š Š Š
Latin small letter s with caron &scaron; &#353; &#x161; š š š
Latin capital letter Y with diaeresis &Yuml; &#376; &#x178; Ÿ Ÿ Ÿ
modifier letter circumflex accent &circ; &#710; &#x2C6; ˆ ˆ ˆ
small tilde &tilde; &#732; &#x2DC; ˜ ˜ ˜
en space &ensp; &#8194; &#x2002;
em space &emsp; &#8195; &#x2003;
thin space &thinsp; &#8201; &#x2009;
zero width non-joiner &zwnj; &#8204; &#x200C;
zero width joiner &zwj; &#8205; &#x200D;
left-to-right mark &lrm; &#8206; &#x200E;
right-to-left mark &rlm; &#8207; &#x200F;
en dash &ndash; &#8211; &#x2013;
em dash &mdash; &#8212; &#x2014;
left single quotation mark &lsquo; &#8216; &#x2018;
right single quotation mark &rsquo; &#8217; &#x2019;
single low-9 quotation mark &sbquo; &#8218; &#x201A;
left double quotation mark &ldquo; &#8220; &#x201C;
right double quotation mark &rdquo; &#8221; &#x201D;
double low-9 quotation mark &bdquo; &#8222; &#x201E;
dagger &dagger; &#8224; &#x2020;
double dagger &Dagger; &#8225; &#x2021;
per mille sign &permil; &#8240; &#x2030;
single left-pointing angle quotation mark &lsaquo; &#8249; &#x2039;
single right-pointing angle quotation mark &rsaquo; &#8250; &#x203A;
euro sign &euro; &#8364; &#x20AC;

Table Two:

Numb ASCII ANSI 8859 UTF-8 Description
32 space
33!!!!exclamation mark
34""""quotation mark
35####number sign
36$$$$dollar sign
37%%%%percent sign
38&&&&ampersand
39''''apostrophe
40((((left parenthesis
41))))right parenthesis
42****asterisk
43++++plus sign
44,,,,comma
45----hyphen-minus
46....full stop
47////solidus
480000digit zero
491111digit one
502222digit two
513333digit three
524444digit four
535555digit five
546666digit six
557777digit seven
568888digit eight
579999digit nine
58::::colon
59;;;;semicolon
60<<<<less-than sign
61====equals sign
62>>>>greater-than sign
63????question mark
64@@@@commercial at
65AAAALatin capital letter A
66BBBBLatin capital letter B
67CCCCLatin capital letter C
68DDDDLatin capital letter D
69EEEELatin capital letter E
70FFFFLatin capital letter F
71GGGGLatin capital letter G
72HHHHLatin capital letter H
73IIIILatin capital letter I
74JJJJLatin capital letter J
75KKKKLatin capital letter K
76LLLLLatin capital letter L
77MMMMLatin capital letter M
78NNNNLatin capital letter N
79OOOOLatin capital letter O
80PPPPLatin capital letter P
81QQQQLatin capital letter Q
82RRRRLatin capital letter R
83SSSSLatin capital letter S
84TTTTLatin capital letter T
85UUUULatin capital letter U
86VVVVLatin capital letter V
87WWWWLatin capital letter W
88XXXXLatin capital letter X
89YYYYLatin capital letter Y
90ZZZZLatin capital letter Z
91[[[[left square bracket
92\\\\reverse solidus
93]]]]right square bracket
94^^^^circumflex accent
95____low line
96````grave accent
97aaaaLatin small letter a
98bbbbLatin small letter b
99ccccLatin small letter c
100ddddLatin small letter d
101eeeeLatin small letter e
102ffffLatin small letter f
103ggggLatin small letter g
104hhhhLatin small letter h
105iiiiLatin small letter i
106jjjjLatin small letter j
107kkkkLatin small letter k
108llllLatin small letter l
109mmmmLatin small letter m
110nnnnLatin small letter n
111ooooLatin small letter o
112ppppLatin small letter p
113qqqqLatin small letter q
114rrrrLatin small letter r
115ssssLatin small letter s
116ttttLatin small letter t
117uuuuLatin small letter u
118vvvvLatin small letter v
119wwwwLatin small letter w
120xxxxLatin small letter x
121yyyyLatin small letter y
122zzzzLatin small letter z
123{{{{left curly bracket
124||||vertical line
125}}}}right curly bracket
126~~~~tilde
127DEL    
128 â‚¬  euro sign
129 ÂÂÂNOT USED
130 â€š  single low-9 quotation mark
131 Æ’  Latin small letter f with hook
132 â€ž  double low-9 quotation mark
133 â€¦  horizontal ellipsis
134 â€   dagger
135 â€¡  double dagger
136 Ë†  modifier letter circumflex accent
137 â€°  per mille sign
138 Å   Latin capital letter S with caron
139 â€¹  single left-pointing angle quotation mark
140 Å’  Latin capital ligature OE
141 ÂÂÂNOT USED
142 Å½  Latin capital letter Z with caron
143 ÂÂÂNOT USED
144 ÂÂÂNOT USED
145 â€˜  left single quotation mark
146 â€™  right single quotation mark
147 â€œ  left double quotation mark
148 â€  right double quotation mark
149 â€¢  bullet
150 â€“  en dash
151 â€”  em dash
152 Ëœ  small tilde
153 â„¢  trade mark sign
154 Å¡  Latin small letter s with caron
155 â€º  single right-pointing angle quotation mark
156 Å“  Latin small ligature oe
157 ÂÂÂNOT USED
158 Å¾  Latin small letter z with caron
159 Å¸  Latin capital letter Y with diaeresis
160    no-break space
161 Â¡Â¡Â¡inverted exclamation mark
162 Â¢Â¢Â¢cent sign
163 Â£Â£Â£pound sign
164 Â¤Â¤Â¤currency sign
165 Â¥Â¥Â¥yen sign
166 Â¦Â¦Â¦broken bar
167 Â§Â§Â§section sign
168 Â¨Â¨Â¨diaeresis
169 Â©Â©Â©copyright sign
170 ÂªÂªÂªfeminine ordinal indicator
171 Â«Â«Â«left-pointing double angle quotation mark
172 Â¬Â¬Â¬not sign
173 Â­Â­Â­soft hyphen
174 Â®Â®Â®registered sign
175 Â¯Â¯Â¯macron
176 Â°Â°Â°degree sign
177 Â±Â±Â±plus-minus sign
178 Â²Â²Â²superscript two
179 Â³Â³Â³superscript three
180 Â´Â´Â´acute accent
181 ÂµÂµÂµmicro sign
182 Â¶Â¶Â¶pilcrow sign
183 Â·Â·Â·middle dot
184 Â¸Â¸Â¸cedilla
185 Â¹Â¹Â¹superscript one
186 ÂºÂºÂºmasculine ordinal indicator
187 Â»Â»Â»right-pointing double angle quotation mark
188 Â¼Â¼Â¼vulgar fraction one quarter
189 Â½Â½Â½vulgar fraction one half
190 Â¾Â¾Â¾vulgar fraction three quarters
191 Â¿Â¿Â¿inverted question mark
192 Ã€Ã€Ã€Latin capital letter A with grave
193 ÃÃÃLatin capital letter A with acute
194 Ã‚ÂÂLatin capital letter A with circumflex
195 ÃƒÃƒÃƒLatin capital letter A with tilde
196 Ã„ÄÄLatin capital letter A with diaeresis
197 Ã…Ã…Ã…Latin capital letter A with ring above
198 Ã†Ã†Ã†Latin capital letter AE
199 Ã‡Ã‡Ã‡Latin capital letter C with cedilla
200 ÃˆÃˆÃˆLatin capital letter E with grave
201 Ã‰Ã‰Ã‰Latin capital letter E with acute
202 ÃŠÃŠÃŠLatin capital letter E with circumflex
203 Ã‹Ã‹Ã‹Latin capital letter E with diaeresis
204 ÃŒÃŒÃŒLatin capital letter I with grave
205 ÃÃÃLatin capital letter I with acute
206 ÃŽÃŽÃŽLatin capital letter I with circumflex
207 ÃÃÃLatin capital letter I with diaeresis
208 ÃÃÃLatin capital letter Eth
209 Ã‘ÑÑLatin capital letter N with tilde
210 Ã’Ã’Ã’Latin capital letter O with grave
211 Ã“ÓÓLatin capital letter O with acute
212 Ã”ÔÔLatin capital letter O with circumflex
213 Ã•ÕÕLatin capital letter O with tilde
214 Ã–ÖÖLatin capital letter O with diaeresis
215 Ã—××multiplication sign
216 Ã˜Ã˜Ã˜Latin capital letter O with stroke
217 Ã™Ã™Ã™Latin capital letter U with grave
218 ÃšÃšÃšLatin capital letter U with acute
219 Ã›Ã›Ã›Latin capital letter U with circumflex
220 ÃœÃœÃœLatin capital letter U with diaeresis
221 ÃÃÃLatin capital letter Y with acute
222 ÃžÃžÃžLatin capital letter Thorn
223 ÃŸÃŸÃŸLatin small letter sharp s
224 Ã Ã Ã Latin small letter a with grave
225 Ã¡Ã¡Ã¡Latin small letter a with acute
226 Ã¢Ã¢Ã¢Latin small letter a with circumflex
227 Ã£Ã£Ã£Latin small letter a with tilde
228 Ã¤Ã¤Ã¤Latin small letter a with diaeresis
229 Ã¥Ã¥Ã¥Latin small letter a with ring above
230 Ã¦Ã¦Ã¦Latin small letter ae
231 Ã§Ã§Ã§Latin small letter c with cedilla
232 Ã¨Ã¨Ã¨Latin small letter e with grave
233 Ã©Ã©Ã©Latin small letter e with acute
234 ÃªÃªÃªLatin small letter e with circumflex
235 Ã«Ã«Ã«Latin small letter e with diaeresis
236 Ã¬Ã¬Ã¬Latin small letter i with grave
237 Ã­Ã­Ã­Latin small letter i with acute
238 Ã®Ã®Ã®Latin small letter i with circumflex
239 Ã¯Ã¯Ã¯Latin small letter i with diaeresis
240 Ã°Ã°Ã°Latin small letter eth
241 Ã±Ã±Ã±Latin small letter n with tilde
242 Ã²Ã²Ã²Latin small letter o with grave
243 Ã³Ã³Ã³Latin small letter o with acute
244 Ã´Ã´Ã´Latin small letter o with circumflex
245 ÃµÃµÃµLatin small letter o with tilde
246 Ã¶Ã¶Ã¶Latin small letter o with diaeresis
247 Ã·Ã·Ã·division sign
248 Ã¸Ã¸Ã¸Latin small letter o with stroke
249 Ã¹Ã¹Ã¹Latin small letter u with grave
250 ÃºÃºÃºLatin small letter u with acute
251 Ã»Ã»Ã»Latin small letter with circumflex
252 Ã¼Ã¼Ã¼Latin small letter u with diaeresis
253 Ã½Ã½Ã½Latin small letter y with acute
254 Ã¾Ã¾Ã¾Latin small letter thorn
255 Ã¿Ã¿Ã¿Latin small letter y with diaeresis

I remain your humble friend and brother, Felix Obianozie (The Technopreneur). In case of any challenges or questions regarding this tutorials, converse with me on the comment section. Follow for more like this!

DQmahG9STR1KC4aVJV3jb34v3KvEKfSkTDTCENTvQQoGSLZ.gif

Sort:  

This post has received a 6.31 % upvote from @boomerang thanks to: @blessingchinaza

@boomerang distributes 100% of the SBD and up to 80% of the Curation Rewards to STEEM POWER Delegators. If you want to bid for votes or want to delegate SP please read the @boomerang whitepaper.

you got up voted for $3.24 at 49% by @hamza-arshad

This post has received a 1.03 % upvote from @buildawhale thanks to: @blessingchinaza. Send at least 1 SBD to @buildawhale with a post link in the memo field for a portion of the next vote.

To support our daily curation initiative, please vote on my owner, @themarkymark, as a Steem Witness

Your post had been curated by the @buildawhale team and mentioned here:

https://steemit.com/buildawhale/@buildawhale/buildawhale-curation-digest-12-19-17

Keep up the good work and original content, everyone appreciates it!

Coin Marketplace

STEEM 0.13
TRX 0.34
JST 0.033
BTC 118690.75
ETH 4401.17
SBD 0.80