Noteman avatar

[Standing matter]Beginners to intermediate users <HTML tag> for steemit (English Ver.)

noteman

Published: 17 May 2018 › Updated: 17 May 2018[Standing matter]Beginners to intermediate users <HTML tag> for steemit (English Ver.)

[Standing matter]Beginners to intermediate users <HTML tag> for steemit (English Ver.)

Hello!

A lot of people have already posted HowTo of blog layout using HTML tags.
I am often indebted to such posts, but since the information is distributed, I thought that I wanted to create something that was put together into one.

Using tags adds a bit more time to writing posts, but even a little use makes them very readable.
I also think that it is essential to contribute to improving readability for postings explaining something complicated.

I think that it would be useful for those who are new to beginners, as well as those who are accustomed to posting.


html_steemit_en.png

① Text


Text Styling

　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　
on steemitHTML tag
Bold<b>Bold</b>
Italic<em>Italic</em>
Bolb Italic<b><em>Bolb Italic</em></b>
Delete<del>Delete</del>
Monospaced Text<code>Monospaced Text</code>
Link<a href=“URL”>Link</a>

※ ex.) Writing sample code. 　 　　 　　 　 　 　　 　　 　
on steemitHTML tag
SampleCode
<pre><code>SampleCode</code></pre>


Header Size

　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　
on steemitHTML tag

header1

<h1>header1</h1>

header2

<h2>header2</h2>

header3

<h3>header3</h3>

header4

<h4>header4</h4>
header5
<h5>header5</h5>
header6
<h6>header6</h6>


SuperText／SubText（Small Text）

　 　　 　　 　 　 　　 　　 　 　 　　 　　 　
on steemitHTML tag
supersupersupersuper<sup>super</sup>super
subsubsubsub<sub>sub</sub>super


Line

　 　　 　　 　　 　 　 　　 　　 　　 　 　 　　 　　 　　 　 　 　　 　　 　　 　
Styleon steemitHTML tag
BreakLine break at
arbitrary position.		Line break at<br>arbitrary position.
centering
---centering---
--centering--
<center>centering</center>
Quote
Quote
<center>Quote</center>


List

　 　　 　　 　　 　 　 　　 　　 　　 　 　 　　 　　 　　 　
Styleon SteemitHTML tag
Bullet
  • Steemit
  • UpVote
  • SteemPower
 <ul>
<li>Steemit</li>
<li>UpVote</li>
<li>SteemPower</li>
</ul>
With number
  1. Steemit
  2. UpVote
  3. SteemPower
 <ol>
<li>Steemit</li>
<li>UpVote</li>
<li>SteemPower</li>
</ol>


That is HTML code that can be used to edit letters.
I think <sup> and <sub> are usually tags used for signs etc.
Depending on how you use it as text of about half the size of normal text
It is useful as it can be used.



② Layout


１. HTML Table


on steemit
　 　　 　　 　 　 　　 　　 　 　 　　 　　 　 　 　　 　　 　
Line 1　Left（Title）Line 1　Right（Title）
Line 2　Left（Item）Line 2　Right（Item）
Line 3　Left（Item）Line 3　Right（Item）
Line 4　Left（Item）Line 4　Left（Item）

HTML Code
<table>
　<tr>
　　<th>Line 1　Left（Title）</th>
　　<th>Line 1　Right（Title）</th>
　</tr>
　<tr>
　　<td>Line 2　Left（Item）</td>
　　<td>Line 2　Right（Item）</td>
　</tr>
　<tr>
　　<td>Line 3　Left（Item）</td>
　　<td>Line 3　Right（Item）</td>
　</tr>
　<tr>
　　<td>Line 4　Left（Item）</td>
　　<td>Line 4　Right（Item）</td>
　</tr>
</table>
※ <tr> to </tr> is one line of the table. Please increase or decrease the number of lines as necessary.
※ <th> to </th> is a header cell. If the bold header is unnecessary, delete the line.

２. Right side Column


２− 1. Display text column on the right side
on steemit
□Sample text, right sentence
□Sample text, letf sentence

HTML Code
<div class="pull-right">
□Sample text, right sentence
</div>
□Sample text, letf sentence


２− 2. Display image column on the right side
on teemit

□Sample text, letf sentence




HTML Code
<div class="pull-right">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□Sample text, letf sentence
２− 3. Display the image on the left side and the text column on the right side
on steemit

□Sample text, right sentence




HTML Code
<div class="pull-left">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□Sample text, right sentence


That was a summary of HTML tags and codes!
Please try copy&paste the code.


See you !


Leave [Standing matter]Beginners to intermediate users <HTML tag> for steemit (English Ver.) to:

Written by

Bonsai artist

Read more #jp-newbie posts

Best Posts From Noteman

We have not curated any of noteman's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From Noteman