ULOG # 2: How to HTML - Things you might want to try on your next blog
Introduction
In this blog, we will be talking about HTML. You might want to visit my first blog, ULOG # 1: Markdown 101 - Creating this first blog, before you proceed with this one. I won't be explaining a lot about Markdown in this blog.
So again, here are some huskies for motivation.
What is HTML?
HTML stands for Hypertext Mark-up Language (whoa). Basically, it is a kind of 'language' we use to write content for the web that browsers understand. Markdown isn't HTML. We use Markdown to make our life easier so we don't use those weird greater-thans and less-thans in HTML. Markdown is converted to HTML which happens on the background without your knowledge. However, there are other editors that let you view the HTML code for your post.
Basically, to write in HTML, you need to enclose your text in an opening <tag> and a closing </tag>. Also there are a couple of properties you could add to the tag which will probably look like <tag property="value"> </tag>. Regardless, we'll be talking about this tags and properties throughout this blog. (To know more about HTML, please do visit this link. )
Alignment
Centering
You can center almost anything by enclosing them with <center></center> tags.
This is a normal text.
<center> This is centered. </center>
# <center> Centered header </center>
## <center> Centered header </center>
RESULT:
This is a normal text.
Centered header
Centered header
You can also use pull-right and pull-left classes to float your images to the right or left. You'll just need to enclose the thing you want to float right or left in a <div></div> tag with the classproperty and that will be floated.
Float Right
<div class="pull-right">
Something that should be on the right. It can be an image or text or link or anything you want.
https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg
</div>
Something that is on the left. This can also be an image. Be sure to add appropriate line breaks.
https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg
RESULT:
Float Left
<div class="pull-left">
Something that should be on the left.
https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg
</div>
Huskies are cute. Just look how cute they are. <3
RESULT:
You might want to add some `br` tags here to add line breaks.
(Using [Image Alternate Text](Image Link) doesn't work inside HTML tags. Just paste the link. It works! O_O)
You could also use the Markdown for table to align/divide your content into sections.
 |  | 
--- | --- | ---
 |  |  | 
--- | --- | --- | ---
RESULT:
| | |
|---|
| | | |
|---|
(You need the --- | --- | --- thing. It tells the editor that what you're doing is a table and not some random text. Don't forget them or else it would just be rendered as a series of images and the sizes will not adjust properly.)
Images
We already know how to put images but what if we want to resize them? Here's a handy tool for adjusting images. Use https://steemitimages.com/<dimension or (width)x(height)>/<url of the image>. See the example below.
The image will maintain its aspect ratio so we'll just have to adjust either width or height. Don't bother confusing yourself by adjusting them both.
100 pixels wide image
100 pixels tall image
RESULT:
100 pixels wide image
100 pixels tall image
Embedding Videos from Youtube and other sites
Basically, you can add or embed videos from Youtube by putting the link inside paragraph <p></p> tags. You might want to add the title and description of the video before or after the link since the editor doesn't exactly get the title or description like what Facebook or Twitter does.
## <center>**BTS (방탄소년단) - Fake Love | Sam Tsui, Megan Lee, KHS Cover**</center>
<center> Here's a cover of the newly released song of BTS, Fake Love. Hooray for the Sax and Flute. <3 </center>
<p>https://www.youtube.com/watch?v=r4-aNP2mlZM</p>
RESULT:
BTS (방탄소년단) - Fake Love | Sam Tsui, Megan Lee, KHS Cover
Conclusion
HTML offers a lot of things that Markdown doesn't. Exploring them is a must to make your content look more awesome. Hope this helps again. Hopefully, we'll be discussing emoticons or emojis and other things or tips you could do to your blog. Happy blogging! 😄
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by landster from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.
Hey! Very helpful post and it looks like I'll be coming back here a few times to check the codes I'm using. Hehez.
I love your blogs! They're very informative ^^ Keep posting =w=
Congratulations @landster! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOPDo not miss the last post from @steemitboard!
Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes
Congratulations @landster! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!