Class 8 - Miscellaneous XHTML items
Character Entities
In previous classes, you may have noticed that I was able to add and display XHTML code directly on the page (i.e. <head>). If I were to just type an angle bracket, the word "head" then a closing angle bracket, all that would display is the word "head", that's because the browser automatically interprets such sequence of characters as HTML, and attempts to render it as such. To be able to display code on my page, I need to use a character entity. Below is a list of the most common character entities:
| Character | Description | HTML Entity Reference |
|---|---|---|
| < | Less Than | < |
| > | Greater Than | > |
| & | Ampersand | & |
| Non Breaking space | | |
| " | Quote | " |
| © | Copyright Symbol | © |
In addition to each of these, there are also entity numbers. So if you want to create a copyright symbol (©), you can use © or ©. Both will display the © symbol.
For a more complete list, check out w3schools.com:
Colors in HTML
In the CSS portions of this course, we learned how to assign colors to parts of our page (background color, text color, etc), but I didn't go over how to know what color to use.
There are several methods to set a color. They are:
- Color Name
- Hexidecimal Code
- RGB value
Color Names
In HTML there are several dozen valid color names that you can use to set your color. Many common names are present, like "red" and "yellow". For a full list, check out the w3schools.com page on HTML colors.
Hexidecimal Color Codes
Hexidecimal Color Codes (or Hex Codes) are created using 3 pairs of Hexidecimal (0-F) numbers which tell the browser how much of red, green, and blue you want to use. Since these use an additive color scheme, 000000 = black and FFFFFF = white.
Each Hex Code is pre-pended with an octothorp (#) to designate that this is a Hex Color code. The first pair of numbers represents the RED value, the second pair GREEN and the last pair BLUE. So, #FF0000 has full red, no green and no blue. #00FF00 has no red, full green and no blue and #0000FF has no red, no green and full blue.
For more on Hex Color codes check out the w3schools.com site.
RGB color codes
Just like Hex Codes, RGB uses a numerical representation of the color, however, RGB uses base 10 (i.e. our normal numbering system) and uses a slightly different format. To give something a red color, for example, you might use the following CSS:
body {
color: rgb(255,0,0);
}
Here, we have 3 pairs of values that go from 0 to 255 (which is 00 to FF in base 16), with the first number representing the RED, the second number representing the GREEN and the third number representing the BLUE.
Embedding Objects in your Page
Sometimes, we want to add non-HTML content to our page. This might be a Video, a game or other widget that doesn't run natively in XHTML. While there are some advancements in allowing these types of content to be native in HTML5, they're not fully standardized and supported at this time. So, we fall back to the old standards for now.
The object Tag
The object tag allows us to embed a flash object, a java ojbect (not javascript, that's different), into a page. In conjunction with the object tag is the param tag, which allows us to pass parameters to the object (for example, auto start a video). A simple example is below:
<object classid="clsid:CAFEEFAC-0014-0002-0000-ABCDEFFEDCBA" width="200" height="200" align="baseline"
codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0">
<param name="code" value="XYZApp.class">
<param name="codebase" value="html/">
<param name="type" value="application/x-java-applet;jpi-version=1.4.2">
<param name="model" value="models/HyaluronicAcid.xyz">
<param name="scriptable" value="true">
<!-- This ling shows only if there is no plugin to support the object -->
No Java 2 SDK, Standard Edition v 1.4.2 support for APPLET!!
</object>
The embed tag is an older proprietary method for embedding objects in your page. It is still used for backwards compatibility. A full write up on the object / embed tags can be found here: http://docs.oracle.com/javase/1.4.2/docs/guide/plugin/developer_guide/using_tags.html
iframes
Totally left out of this class are frames. Mostly because they have almost no proper place in website development. I could write an entire class on the problems with frames alone, but I'll refrain and simply point you to the w3schools.com site if you want to learn more: http://www.w3schools.com/tags/tag_frameset.asp
That said, there is an element which can be usefull for embedding content into your page, and that is the iframe tag. The iframe or "inline frame" tag, allows you to set a specific area on the page which will "pull in" content from another page. An excellent example of an iframe in use are the youtube videos I've been adding to my lecture notes. Their code looks like this:
<iframe width="600" height="400" src="http://www.youtube.com/embed/H3KESBQTD8k" frameborder="0" allowfullscreen="true"></iframe>