HTML & CSS

:::::::::::::::::::::::::::::::::::::HTML:::::::::::::::::::::::::::::::::::::::::

Hyper-Text Markup Language

HTML ( <html></html>) : 

=> Head(<head></head>)  :contains meta tags and title, links,refrences

=> Body(<body> </body>) :it contains body of the the html page 

 important tags found inside body of html page

1. heading tags : <h1></h1>, <h2></h2>, <h3></h13>, <h4></h4>,

2. paragraph tags : <p></p>

3. breaks : <br>

4. horizontal row : <hr>

5. strong tag to bold : <strong></strong> ,<b></b>

6. italic the letter : <em></em> , <i></i>

7. hyperlink tags to include links : <a href="" target =""></a>

8. image tag to include image or gif : <img src = "" alt="" ></img>

9. listing of objects : <ul></ul> (unorderd) , <ol></ol> (orderd) , <li></li> (list objects)

10.  table creation : 

<table>
    <thread>
        <th>(obj1)</th> <th>(obj2)</th> ..
.   </thread>
    <tbody>
        <tr>
            <td>(obj1)</td> <td>(obj2)</td> ....
        </tr>
    <tbody>
<table>

11. More frequent used elements :
    divs ( <div></div> ) ,
    spans (<span></span>),
    headers (<header></,header>) ,
    navs (<nav></nav>) ,


12. Creating forms :
    <form action = "backend">
         <label></label> <div> <input type = ""  name = ""> </div>
         <label></label> <div> <input type = ""  name = ""> </div>
         <label></label> <div> <input type = ""  name = ""> </div>
        .....
    </form>

    you can use many varities of input as :
    <select name=""><option value = ""></option> <option value = ""></option> ....</select>
    <textarea name = "" cols= ""  rows= ""></textarea>
    default<input type = "radio" >option1<input type = "radio">option2<input type = "radio" >..
    <input type = "checkbox" name="">
    <input type = "number" name = "">
    <input type = "date" name="">
    <input type = "email" name = "">


13. Block-level elements in html

  1. <div></div>
  2. <p>/<p>
  3. <h1> to <h6>
  4. <ul> , <ol>, <li> 
  5. <form></form>
  6.  <nav></nav>
  7. <header></header>
  8. <footer></footer>
  9. <section></section>
  10. <table> , <th> , <tr> ,<td> ,
  11. <articles></articles>
  12. <legend></legend>
  13. <blockquote></blockquote>
  14. <adress></adress>
  15. <fieldset></fieldset>

 

14. Inline-level elemetns in html 

  1. <span></span>
  2. <a href= ''></a>
  3. <img>
  4. <br>
  5. <input>
  6. <label></label>
  7. <option></option>
  8. <strong></strong>
  9. <em></em>
  10. <textarea>
  11. <button>
  12. <code></code>
  13. <details></details>
  14. <summary></summary>

Any block element can be converted to inline element by using css property called Display : inline-block;

setting : id and classes
classes : can be common to multiple element , added by using attribute class=" class_name_1 class_name_2 ..."
Ids : must be unique for a element , added by using attribute id = "Id_name"

15. Symblos in HTML 

search google , example for typing extra space use  &nbsp,
for pound symbol  : &pound
for copyright  symbol : &copy
dollar symbol : &dollar
factor symbol : &frac14;
&lt, &gt etc are some more symbols , others can be founded by searching goolge or chat-gpt 

16. Other famous symmentic tags searche by google  and use them else no-need

     <article>
    <aside>
    <details>
    <figcaption>
    <figure>
    <footer>
    <header>
    <main>
    <mark>
    <nav>
    <section>
    <summary>
    <time>

:::::::::::::::::::::::::::::::::::::::::C S S:::::::::::::::::::::::::::::::::::

Cascade Style Sheet - 3 

three ways to add css to html :
1. Inline: by using attributes
2. Internal : by writing css in html itself inside <style></style> tags anywhere
3. External: by writing css in any other .css file and addig path to html head by <link src ="stylesheet" href ="">

1. general syntax
target element(s): by using any of the selector below

  1.     by tags
  2.     by class 
  3.     by id

    selector {
        style prop 1:
        style prop 2:
        style prop 3:
    }

2.  Famous and common styles and their syntaxes

  1. border : thickness(2px) type(solid) color;
  2. background : color Imge Repeat-type Attachment(scroll/fixed/local)  Position(top, bottom , left ..);
  3.  color : color_for_text;
  4. font-style : (italic, bold);

 

 


Comments

Post a Comment