Technical Terms

General

File Types, Compression and Color Space

General Web Programming Terms

FTP – File Transfer Protocol
HTML – Hyper Text Markup Language
XHTML – Extensible Hyper Text Markup Language
CSS – Cascading Style Sheets
WYSIWYG – What You See Is What You Get
W3C – World Web Consortium

Advanced Programming Terms

SSI (SHTML) – Server Side Includes
JS – JavaScript
jQuery – Advanced JavaScript Library
PHP – Hypertext Preprocessor

Software Options

Text Editors:

TextEdit (included on every MAC)
Text Wrangler (Our preferred editor for this class) [MAC DOWLOAD]
CODA
BBedit
TacoHTML
SubethaEdit

WYSIWYG Editors:

FTP Programs:

HTML elements

!DOCTYPE
<html></html>
<head></head>
<body></body>
<div></div>
<a href=””></a>
<img src=”” />
<p></p>
<br />
<ul></ul>
<li></li>
<table> <tr> <td></td> </tr> <table>
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.

<em></em>
<strong></strong>
<u></u>
<blink></blink> (depreciated)
<del></del> + <ins></ins>
<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

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

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

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

<a href=“http://www.apple.com” title=“Apple Inc.”>
<img src=“computer.gif” alt=“Desktop Computer” />
<p>
<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>.