ULOG # 2: How to HTML - Things you might want to try on your next blog

in #ulog6 years ago

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.

Husky

(Disclaimer: Credits again to the owner for this awfully cute photo. You'll probably see this photo as an example across this blog.)


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.

This is centered.

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:

Something that should be on the right. It can be an image or text or link or anything you want.
Something that is on the left. This can also be an image. Be sure to add appropriate line breaks.
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:

Something that should be on the left.
Huskies are cute. Just look how cute they are. <3
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.

![Cute Husky](https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg) | ![Cute Husky](https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg) | ![Cute Husky](https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg)
--- | --- | ---

![Cute Husky](https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg) | ![Cute Husky](https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg) | ![Cute Husky](https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg) | ![Cute Husky](https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg)
--- | --- | --- | ---

RESULT:

Cute HuskyCute HuskyCute Husky
Cute HuskyCute HuskyCute HuskyCute Husky

(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
![Husky](https://steemitimages.com/100x0/https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg)

100 pixels tall image
![Husky](https://steemitimages.com/0x100/https://i.pinimg.com/originals/98/2d/ff/982dff98229b485ddab6f41fed64f335.jpg)

RESULT:

100 pixels wide image
Husky

100 pixels tall image
Husky


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

Here's a cover of the newly released song of BTS, Fake Love. Hooray for the Sax and Flute. <3



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! 😄



Related links and blogs

ULOG # 1: Markdown 101 - Creating this first blog

Sort:  

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) :

You got your First payout

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 STOP

Do 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


Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

Congratulations @landster! 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

Vote for @Steemitboard as a witness to get one more award and increased upvotes!