Posts

Showing posts from July, 2020

colors in css

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > colors in css </ title >      < style >          #firstpara {              color :blueviolet;  /* color by name */              background-color : rosybrown;         }          #secondpara {              color : rgb( 87 ,  177 ,  75 );  /* color by rgb value */  ...

css fonts

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > CSS Fonts </ title >          < link   href = "https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap"   rel = "stylesheet" >      < style >          h3 {              font-family : 'Tenali Ramakrishna' ,  'Franklin Gothic Medium' ,  'Arial Narrow' , Arial, sans-serif;         }          p {           ...

developer tools

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Developer Tools </ title >      < style >          p {              color :purple;              font-style : italic;              background-color : rosybrown;         }          .bgprimary {              background-color :#60a0bb;         }...

css selectors

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > CSS Selectors </ title >      < style >          p {              border :  2px  solid red;         }          /* id selector */          #bgblue {              color : yellow;              background-color : blue;         }  ...

css tutorial

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > CSS Tutorial </ title >      < style >          p {              color :blue;              background-color : seagreen  !important ;         }          </ style >      <!-- this is how internal css is to be added  -->      < link   rel = "stylesheet"   href = "tut13.css" > <...

semantic tags in html

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Semantic tags in HTML </ title > </ head > < body >      < h3 > Semantic Elements </ h3 >      <!-- refer google -->      < details >          < summary > Ihave keys but no doors.You can enter but can't leave. What am I? </ summary >         A keyboard      </ details > </ body > </ html >

html entities

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > HTML entities </ title > </ head > < body >      < div   class = "container" >      < p > This is a                paragraph </ p >      </ div >        < div   class = "container" >      < p > This is another  &nbsp; &nbsp; paragraph with spaces </ p >      < p > paragraph is written like this  < p ></ p ...

ids and classes in html

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Ids and Classes in HTML </ title > </ head > < body >      < h3 > IDs and classes tutorial </ h3 >      < div   id = "mainBox"   class = "redBg blueBorder" >         this is mainbox      </ div >      < span   class = "redBg" ></ span >      <!-- two elements cant have same id. an element cant have more than one id. two elements can h...

inline and block elements

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Inline and Block elements </ title > </ head > < body >      < p   style = " border: 2px solid red; " > This is a paragraph </ p >      < p   style = " border: 2px solid blue; " > This is also a paragraph </ p >      <!-- paragraph is a block element islie vo saari jagah leleta h aur next para next line se start hota h  -->      < span   style = " bo...

forms

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Forms </ title > </ head > < body >      < h2 > This is HTML forms tutorial </ h2 >      < form   action = "backend.php" >          < label   for = "name" >              < div >                 Name:  < input   type = "text"   name = "myName"   id = "name" >              </ div >   ...

tables and lists

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Tables and lists </ title > </ head > < body >      <!-- LISTS -->      < ul   type = "square" >          < li > This is first item of my unordered list. </ li >          < li > This is second item of my unordered list. </ li >          < li >              < ul >        ...

links and images

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Links and images </ title > </ head > < body > <!-- if we press alt and then click on multiple places then all of them will have cursors and type the same thing. -->      < a   href = "https://google.com"   target = "_blank" >  Go to google  </ a >      < a   href = "https://facebook.com"   target = "_blank" >   < br > Go to facebook  </ a >      < a   href = "https://twitter.co...