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

in #jp-newbie • 7 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


１. 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 !


#english #html #tag #howto
7 years ago in #jp-newbie by
$0.86
  • Past Payouts $0.86
  • - Author $0.69
  • - Curators $0.18
9 votes
Reply 1
Sort:  
  • Trending
    • [-]
     6 years ago 

    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!
    $0.00
      Reply