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

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: A Crash Course in HTML programming.

Documents

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