[SteeMagazin]^HTML tutorial for Steemit (part II)steemCreated with Sketch.

in esteem •  3 months ago
What's up lads? Today we're going to continue with our HTML tutorial. If you haven't seen my first tutorial you can check it out here: Tutorial (part I)
Now let's get back to business and take a look of our last example:

image Preview image


● the first div marks a style for whole grey area
● color of our text isn't green because we've overwrited it in p style which tells that color of our text is red
● h3 is style of our heading, we could add many more attributes here (we're gonna do that in next examples)
● text written between 'u' and '/u' tags will be underlined
● in p style we have defined alignment and color of our text
● below we've uploaded an image and added blank row with 'br' tag
● in the last row we've ended our div area which we started in the beginning - that's why this whole area is grey (background-color:grey)

Now let's make a more representative header. I'm going to do that in two easy steps.

Step 1:

** Adding borders**

● we now have border below and above our heading, we've done that by adding 'border-top:solid;' and 'border-bottom:solid;' to our h3 element
● we have also defined color of the border with 'border-color:white;' attribute

Step 2:

Changing heading color

● to change color of our heading we've added 'color:white;' attribute to h3 element

Now we can go on and add some margin to our sample.

Step 3:

Adding margin

OK, here it gets just a little bit tricky. We can add margin to our first div but that won't do the trick. Instead we'll add another div element right next to the first one (we are making div area inside a div area). We'll add our 'margin:5px;' attribute to this second div and we are gonna end him with '/div' tag right before the end of the first one. Here's the code and the outcome:


Looks much better, doesn't it? You can use this code sample to create your very own page style on Steemit. To learn and understand HTML code completely it's essential for you to play with it. My recommendation is that you open your eSteem app and start to write by yourself. You can take this code and change it or even add your own attributes. Below are the attributes which we've already mentioned, you just need to add them to your div, p or h style (if you don't know what this elements mean go to my first tutorial).

● color: (name of the color;/color code;) - use this attribute to change the color of your text
● background-color: (name of the color;/color code;) - use this attribute to change background color of wanted element (sector)
● font-family: (verdana;/calibri;/arial;...) - use this attribute to change your text font
● margin: (1/2/3/.../10px;) - use this attribute to add margin to your element,
● text-align: (left;/right;/center;/justify;) - use this attribute to align you text
● border: (solid;/dotted;/hidden;/...) - use this attribute to add borders to your p, h and div elements (sectors)
● border-color: (name of the color;/color code;) - use this attribute to add color to your border
● border-bottom: (solid;/dotted;/hidden;/...) - use this attribute to add only bottom border to your element
● border-top: (solid;/dotted;/hidden;/...) - use this attribute to add only top border to your element

<h4 style:"border: dotted;">
● 'br' tag - use this to add a row
● 'u' tag - use this to underline text (text between 'u' and '/u' tags will be underlined)
● 'i' tag - use this to make text italic (text between 'i' and '/i' tags will be italic)
● 'b' tag - use this to make text bold (text between 'b' and '/b' tags will be underlined)

If you want to learn more attributes then visit https://www.w3schools.com/html/. There are many more useful things you can learn and after some practice you can even make your own web page. If you've understood this first two tutorials then congratulations - you now know the basics of HTML code! I'll catch up with you again next week :)

Written by: @sulepower
HTML design: @sulepower

@steemagazin team: @atimk23, @tinmar, @kalu24, @sulepower, @strictlybusiness, @kekec
This is @steemagazin original content. All rights reserved.

First tutorial
Resizing images using HTML

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!