DATT 1939 Week 2 - Minimum Code/Techniques to Have Practiced Before Week 3

Practice more than the content in grey on this page before your week 3 tutorial:

The following tags (and more) can be found in the Basic HTML5 notes: 

<br>
<hr>

Know how to name and how to save HTML files properly.
Know how to look at your HTML pages in a browser.


<p> </p>    - defines a paragraph

<b>  </b>   - bold
<i>  </i>   - italic
<u>  </u>   - underline

<s> </s>             - text no longer correct or accurate (adds a strikethrough to text)

<mark>  </mark>      - marked or highlighted text (highlights indicated text)

<small>  </small>    - makes text small
<small><small>  </small></small>    - makes text even smaller

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>


<blockquote> </blockquote>


<span> </span>
  (remember that spans are boring until we use CSS next week to make them do interesting things)

<div> </div>
  (remember that divs are boring until we use CSS next week to make them do interesting things)


Ordered list (ol) and Unordered list (ul):
<ol>
<li>one thing</li>
<li>another</li>
<li>yet another</li>
</ol>


Description list - single:
<dl>
  <dt>Term Goes Here</dt>		
    <dd>Description of the term goes here.</dd>
</dl> 

Description list - multiple:
<dl>
  <dt>Black Grapes:</dt>
    <dd>a small, sweet, delicious fruit that grows in bunches on vines</dd>
  <dt>Green Grapes</dt>
    <dd>often milder in flavor</dd>
  <dt>Red Grapes</dt>
    <dd>are one of my favorite kinds of grapes, usually more intense than green grapes</dd>
</dl> 


Work from the proper DOCTYPE tag and HTML5 page structure for HTML5.

If you have BBEdit for HTML editing, try BBEdit: How to Create a New HTML Document


<a href=" ">    </a>
Know how to link HTML pages together when pages are saved in the same place/folder,
or when the other page is a web site out on the internet.


<img src="" width="" height="" alt="">
Know how to load an image on to an HTML page when both files are saved in the same place/folder.

Create images as links.


PC Users -- if you normally use a PC, the following applies to you:
If you know almost nothing about Macs, you should review all of Introduction to Mac OS X All PC users should make sure to learn at least these parts of the above document:
  1. Quitting a Browser on a Mac
  2. PC User Confusion about how Drives work on a Mac
  3. Deleting files off of Drives on a Mac is DIFFERENT than for a PC
Remember to practice/experiment with essential course techniques a minimum of 3 times per week! (Tutorial can count as one of those times.) Try to spend at least 40+ minutes each time.

Some More Code/Techniques to Try This Week

Starting with the Basics of Internal CSS, start to learn how colour and control to your pages 
with a small internal Cascading Style Sheet (CSS) added in the head tag of the web page, like so:

<style>
 body {
        background-color: #ffffff;
        font-family: Verdana, Helvetica, Arial;
        font-size: medium;
        color: #000000;
     }
</style>

Look up the Webmonkey RGB Colour Code chart so that you can find colours you like, and get the hexadecimal code
 for a colour (like #ffffff, for example).

Learn how to Set Link Colours with CSS.
Learn the basic way to load a Simple Background Image using CSS.
Make sure you recognize CSS comments and their basic usefulness.

Set the border of images used as links to 0 using CSS.

Work from the proper DOCTYPE tag and HTML5 page structure with CSS for HTML5. 
Start your new HTML pages using the above code!

Using <a id="targetname">  </a>  Learn how to link to a point part-way down the same page, or part-way down another html page 
(when pages are saved in the same place/folder, or when the other page is a web site out on the internet).

Learn useful Mac shortcuts you don't already know: Some Shortcut Keys for Mac OS X

Have an idea of what blocklevel versus inline tags are.
Try a few a syntax checks in BBEdit, or using an online checker, and correct any syntax errors that come up, and check again.


Finally, try other tags, links, and information from any week 2 notes not listed here!

If you want more, feel free to work ahead into the Week 3 notes, or
look up online HTML5 resources, CSS resources (ideally, CSS3), and/or ask your tutorial leader for pointers...