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.
① Text
Text Styling
| on steemit | HTML tag |
|---|---|
| Bold | <b>Bold</b> |
| Italic | <em>Italic</em> |
| Bolb Italic | <b><em>Bolb Italic</em></b> |
| <del>Delete</del> | |
Monospaced Text |
<code>Monospaced Text</code> |
| Link | <a href=“URL”>Link</a> |
※ ex.) Writing sample code.
| on steemit | HTML tag |
|---|---|
|
|
Header Size
| on steemit | HTML 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 steemit | HTML tag |
|---|---|
| supersupersuper | super<sup>super</sup>super |
| subsubsub | sub<sub>sub</sub>super |
Line
| Style | on steemit | HTML tag |
|---|---|---|
| Break | Line break at arbitrary position. |
Line break at<br>arbitrary position. |
| centering | --centering-- |
<center>centering</center> |
| Quote | Quote |
<center>Quote</center> |
List
| Style | on Steemit | HTML tag |
|---|---|---|
| Bullet |
|
<ul> <li>Steemit</li> <li>UpVote</li> <li>SteemPower</li> </ul> |
| With number |
|
<ol> <li>Steemit</li> <li>UpVote</li> <li>SteemPower</li> </ol> |
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>
※ <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
HTML Code
<div class="pull-left">
http://kojiman.info/wp-content/uploads/2018/05/sample.png
</div>
□Sample text, right sentencePlease try copy&paste the code.
See you !