Dana Vrajitoru
I310 Multimedia Arts and Technology
Multimedia and the Web
Introduction to HTML
- HTML stands for HyperText Markup Language.
- An html document (page) contains text and some tags specifying the format.
- A tag is a format specification that is applied to the entire text enclosed by <tag> and </tag>. Any text between <! and > is considered a comment and will not appear on the screen.
- A document must start with the tag <html> and end with </html>. It is composed of a header and a body.
<html>
<head> ... </head>
<body> ... </body>
</html>
- Examples of things found in the head:
<title>My web page</title>
Simple Formatting Tags
- New line:
<br>
- New paragraph
<p>
- Horizontal rule
<hr>
- Blockquote(indented to the interior)
<blockquote> ...text... </blockquote>
- Headings: various titles, text to be displayed in a bigger font and usually bold or italics
heading 1 <h1> ... </h1>
heading 2 <h2> ... </h2>
etc.
Text Properties
- bold: <b> ... </b>
- italics: <i> ... </i>
- centered: <center> ... </center>
- Whitespace doesn't matter in a web page. Any sequence of spaces and/or new lines is converted to a simple space.
- Special characters:
extra space (non-breakable space)
& the & character
< the < character
> the > character
´e the acute accent applied to e (´e).
Fonts - Divisions
- A font tag can be used to set character properties like font, color, size.
<font face="Magneto" size="+1" color="#99aaff">Text with those properties</font>
99aaff = 9*16+9 red, 10*16+10 green, 16*15+15 blue
= 144 red, 170 green, 255 blue
black = 000000 (0, 0, 0), white = ffffff (255, 255, 255)
- Division: a div tag can set paragraph properties like spacing, font type, alignment, position on the page, etc.
<div style="position: absolute; width: 635px; height: 1016px; z-index: 27; left: 10px; top: 9px; background-color: #4B4B96" id="layer1">Several paragraphs in this division</div>
Lists
- Lists in html can be of 3 types: unordered, ordered, definition.
- Unordered lists:
<UL>
<LI>Monday
<LI>Tuesday
</UL>
- Ordered lists:
<OL>
<LI>Monday
<LI>Tuesday
</OL>
- Definition lists:
<DL>
<DT>Do
<DD>a deer, a female deer
<DT>Re
<DD>a drop of golden sun
</DL>
Tables
- Delimited bt the tags
<table> ... </table>
- Each table row is delimited by
<tr> ... </tr>
- Each table cell is delimited by
<td> ... </td>
- The table tag can specify some things about the table format, as
<table border="1" align="center" width="100%" bordercolor="#DDDDFF" >
- Each cell of the table can define its own background color, alignment, height
Links, Anchors, and Images
- An anchor in a web page is a bookmark to a particular position that the browser can jump to.
<a name="links">
- A link is a hypertext link to another file, to a position in a page, or can also provide an email address:
<a href="http://www.cs.iusb.edu/~danav"> Dana V. </a>
<a href="mailto:danav@cs.iusb.edu"> Dana V. </a>
<a href="http://www.cs.iusb.edu/~isl/index1.html#2002"> 2002 publications</a>
- Inserting an image in the page:
<img src="cat.jpg">
- The image above is in the same directory as the page. It can be an image from an external location.
Frames
- Frames are divisions in the browser that can load a web page independently.
- Each frame must be identified by a name.
- A frameset can be aligned horizontally or vertically. The framesets can be nested.
- They need a starting page defining the frameset that replaces the <body> tag.
<frameset rows="70,*,70" border=0>
<frame name="navigate" src="navigate.html">
<frame name="content" src="home.html">
<frame name="updated" src="updated.html">
</frameset>
Directing Links
- A href tag can also specify where the link it provides should open:
<a href="some address" target="_blank"> Link </a>
- The value of target can be:
- target="content" the link opens in the frame named "content" in the same page.
- target="_top" the link opens in the main page, overwriting all the frames.
- target="_blank" the link open in a new browser window
- target="_parent" the link opens in the parent frame of the current frame
- target="_self" the link opens in the same frame as the one it's called from. This is the default behavior.
Embedded Multimedia
- The <embed> tag is not officially part of HTML but is supported
by most browsers. Often used in combination with the <object> tag
to specify more parameters.
- More
info on embedded objects
- It calls a plug-in inside the browser. Example:
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/CbvSms-1yj4"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/CbvSms-1yj4" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>