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
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>
- This is a list item
- This is another list item
- 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>
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
Lets get
By Chris Langton
