#Lesson Index Card
###1. HTML Basics
###2. Learning Objective
- Build a basic page and identify HTML5 semantic elements
- Understand what HTML stands for
- Be able to create an HTML page from scratch
- Understand Nested HTML
- Understand the basics of The DOM
###3. Essential Question(s)
- How do you start an HTML document?
###4. Talking Points/Road Map
- What HTML stands for
- Differences from physical media
- What the DOM is
- Writing from scratch
- nested elements === ###What is HTML Hyper text markup language html is just a contract between a browser and the server that things will be displayed in a certain way
###HTML tags
html tags are style with greater than and less than signs like: < >
We open and close them like so <p> </p>
=== ###Heading tags and Paragraph tags
- HTML uses
<h + number>for a heading, h1 > h2 > h3 - there are up to 6
<p>is for paragraph
###Break tag
<br> is html code for break, meaning a new line
###Lists in HTML
Creating lists in HTML is super ez theyre structured with two elements <ul> unordered list, and <li> list item.
structured like so
<ul>
<li>I'm a list item</li>
<li>So am I</li>
<li>We're Unordered</li
<li>And we love it!</li>
</ul>
###Tables in HTML
Tables are great for doing one thing, making tables
we structure tables with 3 main tags <table> to open the table <tr> for a table row, and <td> for a table cell. We can build a table pretty quickly like so:
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
===
###Span and Div
<span> and <div> elements are used to define parts of a document so that they are identifiable when no other HTML element is suitable.
Where no existing HTML element is applicable, span and div can valuably represent parts of a document so that HTML attributes such as class or id can be applied.
###Section Works like a div
-
Why is section preferred over div? Holds more info, used for grouping, a div has no special meaning
-
http://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
###Form tags Form tags are to create HTML Forms,
<html>
<head>
<title>Form Page</title>
</head>
<body>
<form action="submit.php" method="get">
Name: <input type="text" name="name" >
Age: <input type="text" name="age">
<input type="submit" >
</form>
</body>
</html>
===
###Input tags
<input> tags are to define....inputs
each input tag will have at least two options, a type, and a name.
There are a ton of different types that an input can have, most of them are self explanatory and for a complete list check the w3 docs here
The ones that you'll be using most often are:
textpassworddatecheckboxradiobutton
###Select Tags
So what if you want to give the user a set number of options without cluttering up your form with a huge list.
Luckily we have the <select> tag!
Nested inside the <select> tag we have a list of <option> tags which do exactly what they sound like, they create options.
===
stands for Document Object Model... what does that mean? THe webpage is the Document Objects are stuff on the page. The model of this is a structure that lets you access them. Think of the Roots of a tree.
Create an HTML doc that includes these elements
- an internal link
- multiple headers
- a link that opens in a new tab
- an image
- a list
- a link that opens to an email address and has "Greetings!" as the subject
- a paragraph element
Link to cool youtube video here Code specs for what the Document is ans what you can do with it
###Resources