HTMl

HTMl

1. Elemnt

   • ElementParagraph
     • </p>
   • Heading
     • <h1> Heading Level </h>
       • <h1 align = "center"
   • Line break elemnt
     • <br>
   • blockqoute elemnt
     • <blockqoute>
   • Nav
     • web page doc's main navigation
     • <nav< </nav>
   • Main
     • main contents
     • <main> </main>
   • div
     • Configures a structural block area or “division” on a webpage with empty space above and below.
     • <div> ....</div>
   • span
     • used withy other elemnt to configure one inline.
     • <span style = "color:red">.....</span>

2. List

   • Order lists
   • unorder lists
   • discreption lists

3. Element Anchor/hyperlink reference

   • <a href="contact.html"> Contact Us </a>

4. Cascading Style Sheets

   • Inline style
     • to the spicific elemnt
   • embeded style
     • entire web page
     • font size property
     • for-family property
   • external style
     • saperate text file
     • to link the css use
       • <link rel = "stylesheet" href="color.css">
   • imported style

5. CSS selectors

   • Class selector
     • Aplly rules to a certain element
     • type.className {.....}
       • <p class= "name">........</p>
         • applying the class
   • Id selector
     • #idName{....}
       • <p id="idName"> ......</p>
         • how to apply the rules
   • Descendent selector

6. virual elemnt + graphics

   • horizontal line
     • <hr>
   • CSS border Property/ h2 { border: 2px solid #ff0000 }
     • Consists of◦ border border -width◦ border border -style
   • Padding property
     • h2 { border: 2px solid #ff0000; padding: 5px; }
   • Graphics
     • HTML image elemnt
       • <img src src=“dog.jpg” alt=“Dog at computer” height=“100” width=“100”>
     • Image Link
     • HTML< img /> Alignment..../ using align =".m+t+r+l..."
     • vertical space using vspace ="5"
       • spaces above and below the image
     • horizontal space using hspace ="50"
       • space betwen the iamge from left and right
     • background image
       • body { background -image: url(background1.gif); }
       • body {background-repeat:" X " }
     • image map
       • Map elemnt
         • define the map
       • area elemnt
         • define a spicific area on the map
         • coords+shape+ href

Bilder und Dateien der Mindmap