- Bits & Bytes
- Hard Disk Drive (HDDs)
- Scratch Disk
- Solid-state Drive (SDDs)
- RAM (volatile memory)
- Flash Memory (non-volatile memory)
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
- PHP – Hypertext Preprocessor
- TextEdit (included on every MAC)
- Text Wrangler (Our preferred editor for this class) [MAC DOWLOAD]
- <a href=””></a>
- <img src=”” />
- <br />
- <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)
The following tags are used more for styling content (text), these are used less frequently due to the development of CSS.
- <blink></blink> (depreciated)
- <del></del> + <ins></ins>
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.
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.
- <a href=“http://www.apple.com” title=“Apple Inc.”>
- <img src=“computer.gif” alt=“Desktop Computer” />
- <div id=”header”>
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>
<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.
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:
<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’.
<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” />
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>
The outer shell element that contains all other elements except for the doctype.
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.
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.
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>.