Web Pages and Code Pages

Summary

HTML coding; Representing various code pages with special emphasis on Unicode; Formatting; Tables; Links; Multimedia content, and other bells and whistles, using ready-made software to design Web pages.

Homework

HW # 2 (due end of Week 2): Create a Web page in your personal space which contains non-English characters, tables, images (e.g., your mug shot), sounds (e.g., you cursing in an exotic language), and links. E-mail the link to your page to me

Resources

Blackboard Course Cartridges (www.blackboard.com). This university uses Blackboard. You can go here to see how all that works.
Other similar resources: www.quia.com, www.hotpotatoes.net
HTML editors: Macromedia Dreamweaver http://www.macromedia.com/software/dreamweaver/, Microsoft FrontPage http://www.microsoft.com/frontpage/, Coffee Cup (www.cofeecup.com/editor - Windows and Unix), HotDog (www.sausage.com - Windows), Edit+ (www.editplus.com - Windows), W3 (dragon.acadiau.ca/~giles/HTML_Editor/Documentation.html - Mac)
Unicode (www.unicode.org)
W3C = World Wide Web Consortium (www.w3c.org) - re HTML standard
TEI = Text Encoding Initiative (www.tei-c.org) - re SGML/XML standard
PERL = Practical Extraction and Report Language (www.perl.org)

Check other confusing acronyms @ www.acronymfinder.com

HTML Tags - basics

<book>  - book starts            <html> - html document starts
   Text                             Content
</book> - book ends              </html> - html document ends

 <book>
     <chapter1>
        Text 
     </chapter1>
    [...]
 </book>

<html>
    <head>
                                             - for computers and computer nerds
    </head>
    <body>
                        - for humans
    </body> 
</html>

<TITLE>Title of the page in the upper left-hand corner</TITLE>

<H1>Heading</H1>
<BR> - new line (you do not have to close it)
<P> - new paragraph(not necessary to close)
<HR> -  horizontal line (not necessary to close)

HTML Head - other typical elements

<META http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
- sets character encoding (in this case Windows Cyrillic, 
ohter charsets are described at: www.iana.org/assignments/character-sets)
<META NAME="language" content="ru">	
- language defined as Russian
<META http-equiv="Keywords" content="drills, language, Russian, genitive">
-	keywords so that search engines can find your page (the example is for the Russian genitive drill)
<META NAME="Author" content="Ivan the Terrible">
- your vanity pleased

HTML Body - other typical elements

See Dave Raggetts 10' guide to HTML at: www.w3c.org/MarkUp/Guide

Emphasizing <b>bold</b>, <i>italics</i>, <u>underlined</u>
Adding a picture and determinig its size: <img src="yourpicture.jpg" width="200" height="150">
Adding a sound file <a href="sound.mp3">Click here to hear sounds of silence</a>

Adding a link to another page 

Click here to go to my home page

<a href="http://www.public.asu.edu/~dsipka">Click here to go to my home page</a>

Creating a bulleted list:
<ul>
  <li>the first list item</li>
  <li>the second list item</li>
  <li>the third list item</li>
</ul>
Making the background blue: Change  <body> into <body color="blue">
Changing the color of your text to yellow: <font color="yellow">

Tables:

first row, first cell first row, second cell

second row, first cell second row, second cell

<table> - open table; <tr> - open row; <td> - open cell

<table border=1>
<tr><td bgcolor=lightskyblue>first row, first cell</td><td>first row, second cell</td></tr>
<tr><td>second row, first cell</td><td>second row, second cell</td></tr>
</table>

Adding sounds:

A link to sound

Embedded sound

Background sound (you heard it when you opened this page)

Sound object:

A link to <a href="sound.mp3">sound</a>
Embedded sound: <embed src="sound.mp3" autostart=false>
Background sound: <bgsound src="sound.mp3" loop=1>
Sound object: <OBJECT><PARAM NAME="controls" VALUE="All"><PARAM NAME="console1" VALUE="e1">
<embed SRC="sound.mp3" type="audio/x-pn-windowsmediaplayer-plugin"  
CONSOLE="e1" CONTROLS="All" HEIGHT=65 WIDTH=130 
AUTOSTART=false></OBJECT>

If this sound is not annoying enough, you can pick up free Praat Analyzer and create even more agitating sounds.

Adding pictures

<img src="cli.gif">

This is a picture surounded by text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text, and more text

Forms:

<form action="mailto:Danko.Sipka@asu.edu" method="send" enctype="text/plain">
Field: <input name=coolfield size=65><p>
Box: <textarea name=cooltext rows=5 cols=65></textarea><p>
<input type=submit value="Send">
</form>

Flashy pages:

<a href="vitae.htm" onMouseOver='rollover1.src="picture2.gif"'
onMouseOut='rollover1.src="picture1.gif"'>
<img src="picture1.gif" name="rollover1" border="0"></a>

Cascading style sheets

One example. If you wish you links to not to be underlined but rather with a changed background (as on this page), you have two choices:

Either you put the following in the head section:

<STYLE TYPE="text/css">
<!--
A {text-decoration:none}
A:hover {background:blue; color:white}
//-->
</STYLE>

or, if you want to use the same style in several files, you create a file called, e.g., mystyle.css, which contains the following two lines:

A {text-decoration:none}
A:hover {background:blue; color:white}

and you put the following in the head section of your Web page

  <LINK rel="stylesheet" href="mystyle.css" type="text/css">

You can get more bells and whistles using Macromedia Flash. Take a look at two examples here. Flash Tutorial is here.

Example

Last year's project

first row, first cell	first row, second cell
second row, first cell	second row, second cell