Contents
This is used to demonstrate how the HTML markup works for steemit. To add a link this is what you would type Here is the link. Okay now say I want to make a word BOLD, or I have a need to make it Italic, or I really want to go hog wild and have a Bolded Italic set of words. Pretty simple to do. Some times to make things easier to read or where we change subject matter we want to break apart our paragraphs, we want to have one of those cool little separation line thingies. To do that we place the letters "hr" between angle brackets.
Here, in the pinky stuff is the code for everything so far:
<h3>Contents</h3> This is used to demonstrate how the HTML markup works for steemit. To add a link this is what you would type <a href="https://steemit.com/@bashadow">Here is the link</a>. Okay now say I want to make a word <b>BOLD</b>, or I have a need to make it <i>Italic</i>, or I really want to go hog wild and have a <b><i>Bolded Italic</i></b> set of words. Pretty simple to do. Some time to make things easier to read or where we change subject matter we want to break apart our paragraphs, we want to have one of those cool little separation line thingies. To do that we place the letters "hr" between angle brackets.
Breaking down the "Code" Headers
You see the
<h3>
that is the header, headers can be any size from h1-h6. h1 being the biggest header. You need to close out the header or all your work will be giant sized. To close out your work use a back slant in the HTML code /
. Close the header with </h3>
make sure you use the same number as the first piece of code.
Indent
Next up is how I indent the paragraph, this is still very new code for me found only about 3 weeks ago. If you use
5 times you get an indent. Note: there is a space after the semicolon and it is needed between and after the last usage of
to work correctly.
Building a "Link"
Building a simple link is not difficult, but you must be careful with it. <a href="https://steemit.com/@bashadow">Here is the link</a>
. We start with an angle bracket <
like all HTML code. and end with an angle bracket >
. The <a href="
is the first third of your link, after the "
(first quote mark) paste or type in the page address you want to link to https://steemit.com/@bashadow
, then close out the first third of the process with ">
Now type the words you want to use for the link, Here is the link
that is the second part of the process. Now we need to close the link out. This is where</a>
comes in and it is the third part of and closes out the link.
Showing HTML Code in your post
To get the pinky stuff and show HTML code that does not work
use the ` that is the first character on the numbers line of your keyboard. It is a remember, but take no action marker for HTML.
Bold and Italic
Okay now say I want to make a word BOLD, Here is what it's HTML would look like:
<b>BOLD</b>
, or I have a need to make it Italic, Here is what it's HTML would look like: <i>Italic</i>
or I really want to go hog wild and have a Bolded Italic set of words. Here is what it's HTML would look like: <b><i>Bolded Italic</i></b>
Pretty simple to do. Very important note: When "nesting" that's two or more pieces of HTML code together as in the bold/italic example it is important to keep the order right when "unnesting" them. <b><i></i></b>
work from the center out.

Image created and provided by: @amariespeaks
Using an Images
Using an image can be pretty simple. You just drag and drop the image onto your post, or copy and paste the link into your post. You should Always provide a source of where the picture came from, even if it is yours. @amariespeaks provided the image above for @mudcat36 and @dvaemccoy's newbiewresteem project. Even if an image is yours you should still provide that information.
<center>https://steemitimages.com/DQmNZmjbHD9aK8iU3gMPJJp3R7NCc4vAQZowY2nkDtFdSqF/image.png <sup>Image created and provided by: @amariespeaks</sup></center>
I wanted to center the picture to do this use <center>
, I also wanted to provide the source for the image, and to make it look more professional. I wanted to use the smaller type that you see on most other source statements when it comes to pictures. To do that use the <sup>
code. sup
makes the font smaller and raises it up on the type line. If you wanted to use smaller font like 2nd, then you would use <sub>
. A simple was to remember which one goes up and which one goes down is sub is like a submarine. Then to finish the image off do not forget to close out the two pieces of HTML code, </sup> and </center>
Links
More tips on using Photos and wrapping words around photos. I need to do a rework of that post since I have learned a little bit more of the usable HTML on here, and on making more organized type post.- Dave McCoy resteem Initiative post.
- Mudcat36 resteem Initiative post.