the usage of these tags is important in order for you to make a layout. therefore do not forget these codes.
 

< p >

• to start a paragraph.

< p style >

• to style your paragraph. for example, < p style= "font-family:verdana;font-size:10;color:#F990CC; " > chocolate < /p>
  
   

chocolate

font-family

• styling the font. look the example above. i will post the font package in the next chapter! 

font-size

• the size of your font. for example, font-size: 20px or font-size:12px. you can look at the above example.

color

• the color of your font. for example, color:#000 (hex code). 
  < p style =" font-family:georgia;font-size:20px;color:#FF199F; " > chocolate mocha < /p >  

chocolate mocha

letter-spacing or spacing

spacing between the letters. for example, 

• < p style ="font-family:calibri;font-size:20px;spacing: 10px; " > chocolate mocha < /p >

chocolate mocha

• 
  < p style ="font-family:calibri;font-size:20px;spacing: -2px; "> chocolate mocha < /p >

chocolate mocha

margin

• space between the layout. for example, margin-left, margin-right, margin-top and margin bottom. you can use margin: (top)px (right)px (bottom)px (left) px as well. 

background-color or background

• color of the background of the layout. check out paletton.com or colourlovers.com for more colors! 

border-style

• this layout has border-style of dotted. i will update the border-style types soon.

border-width

• the width of the border. this one is 1 px. the bigger the width, well.. the wider your layout border.

border-color

• the color of the border. if you're not putting this tag, it will automatically be black.

< a href > and < /a >

• this one is for the link. the < a href > is for the link while < /a > is the closing tag. this can be easily done by highlighting the words you want to link, click the link image next the 'preview' section after the 'source', put in your url link, click ok and voila! 

for example, < a href = "url.com; "> url < /a >

url

< span style > and < /span >

• this is just the same as the paragraph < p > and < p style >

 
the semi colon,  ;

• semi colon  is used to separate the tags like < p style = "font-family:georgia;font-size:10px; " > < /p >

and the colon   :

• then this colon. see the above example.

line-height 

it's like a spacing in the microsoft words. the spacing between the upper sentence and lower sentence. if you don't get what i mean, ,, you can see here... the line height between this sentence i am typing and the sentence above here is 12px. the px number is up to you, but suggestion from me is that, keep the line-height number, the same as your font-size. :)

• ^{new notes} ​you can also write up in percentage for the line height. for example
  
  < p style ="font-family:calibri;font-size:14px;color:#000;line-height:100%;" > heroine of the story in the midnight seagull. this is just short note doesn't have any meaning < / p >
  
  or another:
  
  < p style =" font-family:calibri;font-size:14px;color:#000;line-height:60%;" > heroine of the story in the midnight seagull. this is just short note doesn't have any meaning < / p >
  
  or another:
  
  < p style ="font-family:calibri;font-size:14px;color:#000;line-height:140%;" > heroine of the story is in the midnight seagull. this is just short note doesn't have any meaning < / p >
  
  
  
  here the previews::
   

  heroine of the story in the midnight seagull.
  this is just short note doesn't have any meaning

  
  
  or another:

  heroine of the story in the midnight seagull.
  this is just short note doesn't have any meaning

  
  
  or another:

  heroine of the story is in the midnight seagull.
  this is just short note doesn't have any meaning

   

# this is the end of it. for the static image preview. click the link below to download the static image tutorial on html tags.

tags  tags