How to use HTML in your blogsteemCreated with Sketch.

in #html7 years ago

HTML
One thing that I find very beneficial in Steemit is that I can use HTML to help with the format of my posts. Being that I have a computer science background, I always enjoy taking control of how things are laid out in a post. Using HTML tags like <center> can change the way you story looks. Every tag is marked with a start and an end. The starting tag is just the tag itself surrounded by <>. So <center> was an example of a starting tag. After the starting tag you then type you content like"Now my text is centered!". Finally you have to close out your tag. It is similar to the starting tag except that you use a / before the tag name. So to close <center> we use </center>

You can do things like center you text:
Now my text is centered in the page!
Make your text italic:
Now my text is centered and Italicized!
You can put a strike through your font:
Now my text is centered and Italicized and stroken out :(
You could use a table to add an image beside your text:
Basic_HTML Then you could add a LINK to one of your previous posts!
Click HERE I dare you to!
You
can
force
a
new
line
anytime
you
want!


I think you may be getting the point. You can do a lot of things to customize your blog and make it visually stunning. I think it is a great idea to have a short piece of HTML code written that you just past into your blog as either a header or a footer. This could have links to your introduction post, your most previous post, a post that you are promoting, a witness account that you support. I even have a short one that I use on comments to make it easier for new steemians to find my account and learn more about me. So now lets get on to teaching some of this great stuff. I think a great place to start is headers.
How to use HTML headings
There are six predefined headers that are available. h1 to h6. All six header types will display that same style of font, the text will always be in bold and the header will be treated as a block (similar to a paragraph). The 3 elements that change from one header to another are the font size and the top and bottom margins.

This is h1

This is a larger font. I often use this for a main title or if there is more than one section it could be used at the top of each to define them.

This is h2

Each header number has a different size font but they all have the same font.

This is h3

The fact that the header is treated as style block means that it will have spacing before and after it. It will also always start the next section of text on a new line (after it adds the lower margin).

This is h4

There are ways to change some of the settings of the headers but you would require a bit more HTML knowledge to get into setting the style types.
This is h5
It is also important to notice that the default font is the same for all headings but it is different than the default content font.
This is h6
So even when the header is the same size as the content, it stands out due to the text being bold and the font being different. Anyway, for those of you who are new to HTML I hope I have sparked your interest. I will post some more "how to HTML" instructions going forward. If there is anything that you would like to learn please feel free to ask in the comments below!

Darryl (@dadview) resides in Canada. He is a loving husband and father who enjoys spending time with his family no matter the activity.


If you enjoyed this post, please up-vote and/or Follow @dadview on Steemit


Vote Luke Stokes for Witness as lukestokes.mhth
Sort:  

Thanks for this, helpful. Upvoted, followed and resteemed

Thanks.
I don't always use a lot of HTML in my posts but I often use it when I add images. That way you can control how they are placed in the layout. I also feel that headers / headings are on of the easiest and most useful. That is why I chose to start with them.

I definitely have to try and use HTML in my posts over the regular markdown :)

It's always better when you have complete control of how your content looks. I wouldn't have had been able to create those navigation links I have if it wasn't for HTML. I don't think I've ever posted anything where I used the non-Markdown editor haha I wish more people would take advantage of this, so they can learn a new tool in HTML (and Markdown, hopefully as well).

Thanks for the contribution @dadview, I will practice more with HTML. Greetings. ;)

Coin Marketplace

STEEM 0.19
TRX 0.13
JST 0.030
BTC 63749.66
ETH 3419.02
USDT 1.00
SBD 2.48