Lets get <HTML>


About your Presenter

Chris Langton

  • Loves to kayak, hike, and mountain bike.
  • Full stack open source developer
  • Blogger
  • In love with all things "code"
  • Always learning something new.



Learning how to read and write HTML is the first step in understanding how a website works. 

HTML Elements

Describe your content

Look like this:


<html> < / html>


HTML Elements can be....


Reference:
bit.ly/LessonA1

Structural Elements

<html>

  <head>
      ....
  
  </head>
  <body>
      ....
  </body>

</html>


Head Elements

Descriptions about the HTML document
<html>
  <head>
    <title>

    <meta>

    <script>

    <style>

  </head>

...

</html>

List Elements

<html>
  ... 

  <body>

    "ol" stands for Ordered List. 
    <ol>
      <li>This is a list item</li>
      <li>This is another list item</li>
      <li>Third Times a charm!</li>
    </ol>

  </body>
</html>

  1. This is a list item
  2. This is another list item
  3. Third Times a charm!

Text Formatting Elements

 
<b> This text is Bold </b>

<i> This text is written funny </i>

<strong> Strong texts have big muscles </strong>

<em> This text has lots and lots of emphasis!!!! </em>

<a href="www.facebook.com" target="_blank">This is a link to facebook
</a>

This text is Bold
This text is written funny
Strong texts have big muscles
This text has lots and lots of emphasis!!!!
This is a link to facebook

Form Elements


<form> .... </form>
<button> This is a button</button>

<label> This is a label for ... </label>

<input> Inputs are the most common Element

<select> 
  <option> Please select ... 
  <option value="Cat"> Cats </option>
  <option value="Dog"> Dogs </option>
</select>

<textarea>
We'll go through an example in a few minutes....

Images and Media

 <img src="http://placekitten.com/200/300">
 <object>     ... </object>

Table Elements

 <table>
    <thead>
      <tr> 
        <th> Heading #1 </th>
        <th> Heading #2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td> Column #1</td>
        <td> Column #2</td>
      </tr>
      <tr>
        <td> Second Row</td>
        <td> Second Row</td>
      </tr>    </tbody>
 </table>

Heading #1 Heading #2
Column #1 Column #2
Second Row Second Row

Lets write some HTML!



Structural Elements

jsbin.com/fibim/1/edit

Head Elements


jsbin.com/fibim/2/edit

List Elements


jsbin.com/fibim/3/edit

Text Formatting Elements


jsbin.com/fibim/4/edit

Form Elements


jsbin.com/fibim/6/edit

Images and Media


jsbin.com/fibim/7/edit

Table Elements


jsbin.com/fibim/8/edit

Lets Make it Pretty....


http://jsbin.com/fibim/10/edit
Made with Slides.com