HTML - GradedJestRisk/web-training GitHub Wiki

Table of Contents

Structure

Lexicon:

  • element (eg:
    some text
    )
  • tag (eg: div)
  • property (ex: header)

head

List:

body

text

    • line-breaking
      • br: linebreak
      • pre: pre-formated
      • hr> : horizontal rule, line
      •   : non-breakable space
  • containers : rendering respective to other items
    • block (eg div - division)
      • contains block or inline
      • When rendered visually, block-level elements begin on a new line, breaking the flow of content (not inline)
      • markup:
        • paragraph: p
        • headings : h - 6 levels: h1 to h6
    • inline (eg span)
      • contains inline only
      • does not start on a new line and only takes up as much width as necessary.
    • more
      • subscript: sub
      • superscript: sup
      • quotation:
        • cite
        • line-quote: q
        • block-quote: blockquote
      • abbreviation: abbr
      • code: code
      • sample: samp
      • keyboard: kbd
      • variable: var
    • forget about old-school style
      • bold : b
      • italics : i
      • underlined: u
      • deleted: del
    • semantic without div:
      • article
      • section
      • footer
      • header

list

Types:

  • un-ordered : ul
  • ordered: ol
  • definition: dl ?

link

Type:

  • external
  • internal
A for anchor, href for hypertext-reference (other re

table

  • images
Why ?
  • Inline elements cannot be placed directly inside the <body></body> element; they must be wholly nested within block-level element

Best friends

Too many of them here

All elements can have:

  • id: <p id="warningArea" >
  • class : <p class="mandatoryFields">

Basic blocks

Element Stands for Meaning Attribute Sample
h X h (eader) level X _ _ <h1> I'm the first and only header in this whole page </h1>
p p(aragraph) lowest-level element _ <p> I'm the paragraph's text </p>
div (document) div(isions) container _ <div style="background-color:lightblue"> <h3>This is a heading</h3> <p>This is a paragraph. </p> </div>

Format

Element Stands for Meaning Attribute Sample
em emp(hasized) Italics ? _ read this <strong> correctly </strong>
strong strong Bold _ <strong>Shouting outt </p>

Graphics

Element Stands for Meaning Attribute Sample
img im(a)g(e) Image src: location / alt: text <img alt="This is a pipe" src="http://upload.a.org/wikipedia/MagritteNotAPipe.jpg.">

Data structure

Lists

Element Stands for Meaning Attribute Sample
ul u(nordred) l(ist) Bullet list _ <ul> (Some li) </ul>
ol o(rdred) l(ist) Numberre list _ <ol> (Some li) </ol>
li l(ist) i(tem) List item _ <ul> <li>line 1 </li> <li>line 2 </li> </ul>

Table

Try it 

&lt;table&gt;
   &lt;tr&gt;
      &lt;th&gt; column 1 heaader &lt;/th&gt; &lt;th&gt;column 2 header &lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt; row 1, column 1 &lt;/td&gt; &lt;td&gt; row 1, column 2 &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt; row 2, column 1 &lt;/td&gt; &lt;td&gt; row 2, column 2 &lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
Element Stands for Meaning Attribute Sample
th t(able) h(eader) header _ <tr> <th> header 1</th> <th> header 2</th> </tr>
td t(able) d(ata) Cell _ <td> cell 1 </td>
tr t(able) r(ow) Line _ <tr> <td> cell 1</td> <td> cell 2</td> </tr>

User interaction (Form markup)

Type Visual form Attribute Sample
text Entry fileld _ <input type="text" name="fname">
submit Clickable button _ <input type="submit" value="Submit form">

Templates

Here

Misc

An overwiew:

  • script markup shoulnd't be self-closing More here:
    • work &lt;script src&#61;&quot;foobar.js&quot;&gt;&lt;/script&gt;
    • don't work &lt;script src&#61;&quot;foobar.js&quot; /&gt;
⚠️ **GitHub.com Fallback** ⚠️