Friday, March 28, 2014

The code we worked in class on 3/27 is shown below. This will be the foundation that we will be building off of for the rest of the semester. Make sure to save your code somewhere for now that you can get at it and keep adding to it week after week. We are working on an online solution for you, more details to come.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Seahawks Merch</title>

</head>

<body>

<header>

<div>

<h1>We are 12</h1>

<div>

<input type="text" />

<button>shopping cart</button>

</div>

</div>

</header>

<nav>

<ul>

<li><a href="#">Mens</a></li>

<li><a href="#">Womens</a></li>

<li><a href="#">Kids</a></li>

<li><a href="#">Jerseys</a></li>

<li><a href="#">Accesseries</a></li>

<li><a href="#">T-Shirts</a></li>

<li><a href="#">Sweatshirts</a></li>

<li><a href="#">Hats</a></li>

</ul>

</nav>

<section>

</section>

<section>

<ul>

<li>

<img src="" />

<h3>Shop Mens</h3>

</li>

<li>

<img src="" />

<h3>Shop Womens</h3>

</li>

</ul>

</section>

<footer>

<div>

<h2>Check out our fans!</h2>

</div>

</footer>

</body>

</html>

Hopefully you can write and understand the mark up above. If you have any problems don't forget to GTS (Google That S***). Some people have been using Code Academy and W3Schools to learn more about some of the tags and attributes. Those are both good places to go through some tutorials and learn extra on your own. I also heard that Code Academy has an app you can download so you can practice on your commute.

Have a great Spring Break. Looking forward to seeing everyone the following week.

So far in class, we have learned the following tags. ALL of these get 'nested' between the <body> and </body> tags (see below):

Paragraph:
<p>this is a paragraph</p>

Unordered list:
<ul>
<li>ul stands for 'unordered list'</li>
<li>li stands for 'list item'</li>
<li>li elements are 'nested' inside the ul</li>
<li>li elements have a bullet point in front of them by default</li>
</ul>

Ordered list:
<ol>
<li>ol is an ordered list. There will be numbers in front of each li, list item</li>
</ol>

It is always good to review the basic HTML structure:
<html>
<head>links to other documents and settings go in here</head>
<body>
<p>EVERYTHING you see on an HTML page goes inside the body tag</p>
</body>
</html>

Some very important tags that we haven't learned yet are:Anchor links - This is what runs the interwebs!Images - This is what makes the interwebs look pretty!

Practice makes perfect with HTML, make sure get as much exposure as you can!