HTML 101 – A Brief History of HTML – Tags

View Github Repository Open presentation in a new window

phoenix0665

See all presentation from phoenix0665

HTML 101 – A Brief History of HTML – Tags

2 1

first_repo

On Github phoenix0665 / first_repo

HTML 101

A Brief History of HTML

1989

An Unlikely Place of Birth

The European Organization for Nuclear Research/Organisation européenne pour la recherche nucléaire AKA CERN

The Brains Behind it!!

'Sir' Tim Berners Lee

The 1989 J.A.R.V.I.S

The NeXT Cube

The Holy Scroll

Timeline

Must Read

First HTML page

Tree

HTML Inspector in chrome

DOM

DOM Structure; Source: Wikipedia

Everything in it's place

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo Structure<title>
    <link href="css/main.css">
    <script src="js/main.js"></script>
  </head>
  <body>
    <h1>...</h1>
    <div class="container">
      <div>
        ...
      </div>
      <span>
        ...
      </span>
      <table class="...">
        ...
      </table>
      <form>
       ...
      </form>
    </div>

    <script src="..."></script>
    <script src="..."></script>
  </body>
</html>

Tags

The Bare Necessities

  • HTML root

    <html></html>

  • Head

    <head></head>

  • Title

    <title></title>

  • Body

    <body></body>

The little ones

  • Headers

    <h(1-6)></h(1-6)>

  • Paragraph

    <p></p>

  • Anchor

    <a href="..."></a>

  • Image

    <img src="..." alt="...">

The Complex Gaints

Unordered Lists

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Ordered List

<ol>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Defintion Lists

<dl>
  <dt>...</dt>
  <dd>...</dd>

  <dt>...</dt>
  <dd>...</dd>
</dl>

Table

<table>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Forms

<form action="..." method="...">
  <label>
    <input type="text" name="...">
  </label>
  <label for="...">...</label>
  <input id="..." type="text" name="...">
  <label for="..."></label>
  <select>
    <option>...</option>
    <option>...</option>
  </select>
  <label for="...">...</label>
  <input type="..." type="checkbox" name="..." value="...">
  <label for="...">...</label>
  <textarea id="..." cols="..." row="..."></textarea>

  <input type="submit" value="Submit">
  <input type="cancel" value="cancel">
</form>

DIV and SPAN the distant cousins

<div></div>
<span></span>

The real Big Shots

  • Meta

    <meta charset="...">
<meta http-equiv="..." content="...">
<meta name="...">

  • Link

    <link rel="..." href="...">

  • Script

    <script type="..." src="..."></script>

HTML5

Semantics

  • Header

    <header>Put Here Headers here</header>

  • Navigation

    <nav>This holds your menu</nav>

  • Time

    <time datetime="2014-02-03">3, Feburary 2014</time>

  • Aside

    <aside>Side Show goes here</aside>

Semantics

  • Mark

    <mark>Mark your text</mark>

  • Footer

    <footer>Your Copyright and trademark info will be here</footer>

  • Article

    <article>Write your posts, in a semantic way</article>

  • Section

    <section>
	<article>
			Structure your layout not only with styles, 
			but also semantically as well
	</article>
</section>

Forms

  • Form Attributes

    <form action="example.php" method="POST" novalidate>

  • Input Attributes

    <input type="text" name="name" autofocus placeholder="Name">
<input type="url" name="url" placeholder="https://www.example.com">
<input type="number" name="number" placeholder="1234567">
<input type="email" name="email" placeholder="john.doe@example.com" required>

Meta Data

<div data-easter-egg="bunny">
...
...
</div>

T

U