HTML Editing-HTML Codes, HTML Tags to make your Blog attractive ~ SAMPATKUMARI'S Blog "PARISHKAR"

HTML Editing-HTML Codes, HTML Tags to make your Blog attractive

HTML Editing-HTML Codes, HTML Tags to make your Blog attractive-Previously I have posted an article on customizing the navigation bas of a blogger Template and another article on robots.txt.  In this article I am going to explain the HTML codes, Tags mostly used to set, Margins, Padding, color, border etc. We need these frequently as these are the settings which we need to change mostly. These are very useful to make the appearance of our blog better and attractive. The attractive look of a blog or website is very important to attract the customers to visit again. The procedure of step by step modification of HTML file is given below -

Scales and Measurements used in HTML Coding

Pix - One px is equal to one dot.
Pt -  are much like pixels, One point is equal to 1/72 of an inch.
Em – Ems are scalable in nature, and 1 em is equal to 12pt.

First of all login to blogger dashboard, click Template>Edit HTML, The HTML document will open -
HTML Editing-HTML Codes, HTML Tags to make your Blog attractive
HTML Editing-HTML Codes, HTML Tags to make your Blog attractive

Set Margins and Padding by Editing HTML

Margin and Padding are commonly used properties for spacing html elements. A margin is the space outside the page, whereas padding is the space inside the page. There are a number of margins and paddings in an HTML document so first of all you have to go to the margins or paddings which you actually want to edit. For this purpose use the HTML search box. To open the HTML search box click anywhere inside the HTML document, Press CTRL+F, Write ‘margin’ or padding inside the search box and press ‘Enter’. As I have already said there are a number of margins and Paddings in an HTML document therefore you may need to press ‘Enter’ key more than once to find the string you actually want to edit -

(i)                 In HTML margin or padding is measured in px, pt. em % or auto. Auto means-‘0’.

                #div {
                -top: 0;
                margin-right: 5px;
                margin-bottom: 5px;
                margin-left: 5px;

                }

(ii)               Predefined Sequence of margin is “top, right, bottom, left” so the above can also be defined in a single line as follow –

#div {
                        margin:0 5px 5px 5px;
}

(The margins will be set to Top Margin-0, Right Margin -5px, Bottom Margin-5 px and Left Margin-5px). Result of both the above will be the same.)

Set Borders and border colors by Editing HTML

Borders are defined as thin, thick, medium or a value is set in px.  If we set it as default, it will be set as medium because the default value is set to medium. Border styles are solid, dashed, dotted, double and default. Default style is set to none.
                                                            #div {
border-width: 10px;
border-style: solid;
border-color: green;
}

Predefined Sequence of margin is “width, style, color” so the above can also be defined in a single line as follow –

                                          #div {
                                          border:10px solid green;
                                          }

(The the borders and border colors will be set to width-10px, style-solid, color-green. Result of both the above will be the same.)

Colors are defined by name, hex or rgb proportions. A css/html color code may also be used. For color code help you can visit w3school,s colorpickerhere.

1 comment:

  1. I couldn't resist commenting. Very well written!

    Feel free to surf to my web blog: make a blog for free

    ReplyDelete