Warning: Declaration of WPVCAdminConfigAction::render() should be compatible with WPVCWPPlugin::render($ug_name, $ug_vars = Array, $action = NULL) in /nfs/c02/h06/mnt/27819/domains/ianwhitmore.com/html/teaching/psu/wp-content/plugins/wp-vcard/classes/action/WPVCAdminConfigAction.php on line 170
HTML | Interactive Media – Whitmore

HTML

Technical Terms

General

  1. Bits & Bytes
  2. Hard Disk Drive (HDDs)
  3. Scratch Disk
  4. Solid-state Drive (SDDs)
  5. RAM (volatile memory)
  6. Flash Memory (non-volatile memory)

File Types, Compression and Color Space

  1. PSD
  2. TIFF
  3. JPEG
  4. GIF
  5. PNG
  6. LOSSY/LOSSLESS
  7. LAB
  8. ADOBE RGB (1998)
  9. sRGB

General Web Programming Terms

  1. FTP – File Transfer Protocol
  2. HTML – Hyper Text Markup Language
  3. XHTML – Extensible Hyper Text Markup Language
  4. CSS – Cascading Style Sheets
  5. WYSIWYG – What You See Is What You Get
  6. W3C – World Web Consortium

Advanced Programming Terms

  1. SSI (SHTML) – Server Side Includes
  2. JS – JavaScript
  3. jQuery – Advanced JavaScript Library
  4. PHP – Hypertext Preprocessor

Software Options

Text Editors:

  1. TextEdit (included on every MAC)
  2. Text Wrangler (Our preferred editor for this class) [MAC DOWLOAD]
  3. CODA
  4. BBedit
  5. TacoHTML
  6. SubethaEdit

WYSIWYG Editors:

  1. Dreamweaver
  2. iWeb

FTP Programs:

  1. Transmit
  2. FireFTP
  3. FileZilla
  4. Cyberduck
  5. Fetch

HTML elements

  1. !DOCTYPE
  2. <html></html>
  3. <head></head>
  4. <body></body>
  5. <div></div>
  6. <a href=””></a>
  7. <img src=”” />
  8. <p></p>
  9. <br />
  10. <ul></ul>
  11. <li></li>
  12. <table> <tr> <td></td> </tr> <table>
  13. Basic HTML page structure

Breaks in content

<br /> = line break

<p> </p> = paragraph

<hr /> = hortizontal rule (creates a line between two pieces of content)

 

Styling Content

The following tags are used more for styling content (text), these are used less frequently due to the development of CSS.

  1. <em></em>
  2. <strong></strong>
  3. <u></u>
  4. <blink></blink> (depreciated)
  5. <del></del> + <ins></ins>
  6. <code></code>

Predefined Formatting and Organization in HTML


<h1>The Smaller the numer</h1>

<h2>The larger the text default size</h2>

<h3>This is used for prioritizing headings</h3>

<h4>And can be very helpful with making lists</h4>

<h5>Different browsers have different default values</h5>
<h6>Later you can customize the sizes using CSS</h6>

LISTS : Unordered and Ordered 

Unordered lists use bullets or other symbols

<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

Ordered lists use sequential characters such as numbers, roman numerals or letters

<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>


Special Characters + Symbols 
To show a symbol such as  “©” you must use an ENTITY. 
Common entities:
Greater Than    >   &gt;
Less Than    <   &lt;
Ampersand    &   &amp;
Pound (monetary)  £   &pound;
Copyright     ©   &copy;
Trademark    ™   &trade;

HTML Elements may have have attributes inside their opening tag in order to add functionality and control appearance.
For example:

  1. <a href=“http://www.apple.com” title=“Apple Inc.”>
  2. <img src=“computer.gif” alt=“Desktop Computer” />
  3. <p>
  4. <div id=”header”>

Non-Replaced Elements
Elements where the content coded within the tag is the content visible in the browser.

<p>This is the text that will appear on the web page.</p>

Replaced Elements

<img src=”” /> and <br /> are elements that represent spatial content and files (images, pdfs, video) that are outside of the coded document. These are also examples of ‘self-closing’ tags, note that there is NOT a second closing tag, instead there is a forward slash at the end of these singluar tags.

Linking/Addressing

For <img> and <a> elements an address is required to properly link to a page or source and image. There are two types of addressing:

Relative Addressing

<img src=”images/computer.gif” />
This method of addressing is dependent on the relationship between the document you are coding and the image you are sourcing.

An example of a relative link would be <a href=”contact.html”>Contact Me</a>
This address indicates that that your document is in the same directory/folder as ‘contact.html’.

Absolute Addressing

<a href=”http://www.apple.com”>Link to Apple</a>
This method of addressing is independent of any relationship between the document and its absolute destination.

An example for sourcing an image with an absolute address would be
<img src=”http://images.apple.com/home/images/hero-touch-20090909.jpg” />

Targeting
Opening a link in a new window/tab

In order to open a link in a new window you have to add a target attribute to your link tag:
<a href=”page.html” target=”_blank”>Linked Text</a>

The setting _blank used for the target attribute tells your browser to open the page in a new window. There are other setting for this attribute but none of them pertain to what we’ll be covering in class.


Parts of a Web Page

Learn how to view source code in your browser,to check your own code and see what others have done.
FIREFOX: View –> Page Source

 

Basic HTML Framework

<!DOCTYPE>
   <html>
        <head>
             <title></title>
        </head>

        <body> </body>

   </html>


<!DOCTYPE>

Reference: http://www.w3schools.com/tags/tag_DOCTYPE.asp

<html>

The outer shell element that contains all other elements except for the doctype.

<head>

This is where the brain of your website typically resides. The scripts and styles and other documents that are loaded to assist with the rendering of you pages are processed here.

The <head> does the thinking, while the body is the framework or skeleton of your site.

<title>

The <title> tag is the only real visible element within the <head> tag. This tag determines what you see in the top of your browser window.

<body>

This is the structure of your page, this is where you build the framework and organize your areas of content. Your CSS stylesheets will be controlling the appearance of most, if not all of the content in your <body>.