Technical Topics
Resource pages on technical topics
HTML - Basic Tags
What is the WWW?
What is a client server network?
client : software application running on the users computer [Firefox, Safari, Internet Explorer, Netscape]
server : software application running on the information providers computer, handles requests from a client
←→ : the network, these are the pipes along which information flows. In order for the client to be able to communicate with the server, they must agree on a language or protocol. Web browsers usually use "hypertext transfer protocol" or "http".
A web page is a file that resides on a server.
People use client software [browser] to access a web page.
A web page contains HTML elements. These elements add structure to your content. A web browser displays the content of a web page, but not the characters that give it structure.
HTML or Hyper Text Markup Language is the language used to write web pages. An HTML file is basically a text file with various tags interspersed to control the appearance of the page. Some tags have additional attributes to further specify something about the element you are controlling. Note - XHTML documents (what we are making) must use lower case for all HTML tag and attribute names. Tags are like containers. They always are used in pairs (with a few exceptions).
CSS or cascading style sheets is a language used to describe the formatting and design of the webpage.
Resources
Basic Tags
<html></html> : Creates an HTML document.
<head></head> : Contains the title and other information that isn't displayed on the Web page itself.
<body></body> : The visible portion of the document. Only elements placed in the body get displayed in the browser window.
Header Tags:
<title></title> : Puts the name of the document in the title bar.
Body Attributes
<body bgcolor="#FFFFFF"> : Sets the background color, using name or hex value.
<body text=?> : Sets the text color, using name or hex value.
<body link=?> : Sets the link color, using name or hex value.
<body vlink=?> : Sets the visited link color, using name or hex value.
<body alink=?> : Sets the link color while clicked, using name or hex value.
HyperLinks and Anchors
The anchor tag can connect to a document on another server anywhere on the Internet, to a document on your server, or to another part of the current document.
<a href="URL"></a> : Creates a hyperlink. URL = Universal Resource Locator = Web addresss.
relative path: URL = "hello_world.html"
absolute path: URL = "http://www.yahoo.com"
<a href="mailto:EMAIL"></a> : Creates a mailto link. EMAIL = joe@yahoo.com
<a name="NAME"></a> : Creates a target location within a document.
<a href="#NAME"></a> : Links to that target location from elsewhere in the document.
Images
<img src="name"/> : Adds an image where "name" is the location of the image.
<img src="name" alt="text"/> : If the image can't be shown, the "alt" tag text is displayed instead.
<img src="name" width=? height=? /> : Sets height and width of image. Use the HEIGHT and WIDTH attributes to speed up page loading: by telling the browser the size of the image, it can leave space for the image, and display the rest of the text of the page while the image is loading. Note that using incorrect image dimensions can SLOW down page loading.
width=200
height=200
<img src="name" border=? > : Sets size of border around an image.
Basic Page Structure
<html>
<head>
<title>your page title here</title>
</head>
<body>
most of your code goes here
</body>
</html>
Best Practices - Guidelines
Well-formedness
Essentially this means that all elements must either have closing tags or be written in a special form (as described below), and that all the elements must nest properly.
Although overlapping is technically illegal, it is widely tolerated in existing browsers.
CORRECT: nested elements.
INCORRECT: overlapping elements
Element and attribute names must be in lower case
XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags.
For non-empty elements, end tags are required
In older versions of HTML certain elements were permitted to omit the end tag; with the elements that followed implying closure. XHTML does not allow end tags to be omitted.
CORRECT: terminated elements
INCORRECT: unterminated elements
Attribute values must always be quoted
All attribute values must be quoted, even those which appear to be numeric.
CORRECT: quoted attribute values
INCORRECT: unquoted attribute values
Empty Elements
Empty elements must either have an end tag or the start tag must end with />. For instance, <br/> or <hr></hr>.
CORRECT: terminated empty elements
INCORRECT: unterminated empty elements
Processing Basics
a series of basic processing code examples
- basic processing code and setup() routine - draw some shapes
- using the draw() routine - make a ball bounce