How to Make a Web Page:

How to Make a Web Page: A Crash Course in HTML programming

The HTML File • An HTML file is just an ordinary text file, usually with the .html or .htm extension. • An HTML file can be easily created and modified with any familiar text editor. • Such editors include note pad and word pad.

Basic Structure: text and tags • An HTML document is basically just text, with different formatting commands, called tags, dispersed through it. • Most commands have a start tag, enclosed by < >, and an end tag, enclosed by </ >. • Between the two tags is placed text (and other tags), which is then formatted according to the command specified by the tags.

Structure of a page • A page is structured into different parts, each separated by different start and end tags: html, head, title, body, and headers.

Example 1 <html> <head> <title> Hi there! </title> </head> <body> <h1> My first homepage </h1> HTML is fun once you get the hang of it! </body> </html>

Text Formatting Tags • For bold text, use tags <b> and </b>. • For italics, use tags <i> and </i> • For larger text, use <big> and </big>. • For small text, use <small> and </small>. • For a line break, insert the tag <br> (there is no end tag for line breaks).

Example 2 <html> <body> This is normal. <br> <b>This is bold.</b> <br> <i>This is italics.</i> <br> <big>This is big.</big> <br> <small>This is small.</small> </body> </html>

Adding hyperlinks • In order to add a hyperlink, use the tags: <a href = “web address or file path here” >, < /a>. • For instance, <a href = “http://www.washingtonpost.com” > newspaper </a> would create a link titled “newspaper” to the Washington Post website.

Adding Images • In order to add an image use the tag <img src = “web address or path of picture”>. • Note that there is no end tag for images.

Example 3 <html> Check out my <a href =“http://www.cs.yale.edu”> school </a>. <br><br> Or take a look at the hurricane! <br> <img src = “storm.jpg”> </html>

Making Lists • One can make a list with bullets: <ul> <li> Beautiful Day </li> <li> Mysterious Ways </li> <li> Where the Streets Have No Name</li> </ul>

Lists, cont • Or one with numbers: <ol> <li> Ferrero</li> <li> Roddick</li> <li> Federer</li> </ol>

Example 4 <html> <p> Songs: <ul> <li> Beautiful Day </li> <li> Mysterious Ways </li> <li> Where the Streets Have No Name</li> </ul> Top Men's Tennis Players: <ol> <li> Ferrero</li> <li> Roddick</li> <li> Federer</li> </ol> </p> </html>

Background and Text Color • In order to change the background or text color use the tag: <body bgcolor =“red” text =“white”>. • Or if you want to tile the background with a picture use the same tag but: <body background = “bear.jpg”>.

Example 5

HTML editors • With these commands, you can (and should) create a personal home page! • It’s fun and not too difficult. • Alternatively, you can avoid directly writing HTML by using special programs like Netscape Composer.

Any Questions???

Web Form Basics

What is a web form? • A web form is a web page in which the user may enter information. The entered data are then processed by a program called a script, which then does something useful.

Starting a web form • A web form section starts with the tag: <form action = “location of script” method = “post” >. • And ends with the tag: </form>.

Making a text input line • The command for a text input line is of the form: <input type=“text” name = “book” size=“54”>. • This will create a text input line, with the same length as 54 characters. • The script will then be given the input as text labeled “book”.

Radio Buttons • Radio buttons: <input type = “radio” name = “class type” value = “fuzzy”> Humanities <br> <input type = “radio” name = “class type” value = “techie”> Sciences • This will create two buttons, from which the user may only choose one. • The buttons specify a field called “class type” that will be used by the script.

Check Boxes • Command very similar to radio buttons: <input type = “checkbox” name = “bro” value = “Y”> Brother <br> <input type = “checkbox” name = “sis” value = “Y”> Sister • Here, the user may check multiple boxes, rather than just one.

Choosing from Lists • In order to create a list: <select multiple name = “major”> <option value = “cs”> Computer Science </option> <option value = “econ”> Economics </option> <option value = “eng”> English </option> <option value = “hist”> History </option> <option value = “math”> Mathematics </option> <option value = “phys”> Physics </option> </select>

Etc. • There are other types of inputs, including menus that drop and text input boxes, which are explained on the HW1 assignment web page.

The Submit Button • Very Essential: we must create the submit button. • The user clicks this in order to submit his information. This is accomplished with the line of code: <input type="submit" value="Send my info!">

Putting it all together: Example 6 <html> <form action = “http://lab.zoo.cs.yale.edu/cs156/cgi-bin/sendform.cgi” method = “post” > Email Address: <input type=“text” name = “to” size=“54”> <br> <input type="submit" value=“Send my info!"> </form> </html>

Example Form Elements

Questions??

How to Make a Web Page: