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

in #jp-newbie6 years ago (edited)

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



1. 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.



2. Right side Column


2− 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− 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

2− 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 !


Sort:  

Congratulations @noteman! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

3 years on Steem - The distribution of commemorative badges has begun!
Happy Birthday! The Steem blockchain is running for 3 years.
Vote for @Steemitboard as a witness to get one more award and increased upvotes!