How to Make a Web Page:
Download
Report
Transcript 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
buttons:
very similar to radio
<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
<option value =
<option value =
<option value =
<option value =
<option value =
<option value =
</select>
name = “major”>
“cs”> Computer Science </option>
“econ”> Economics </option>
“eng”> English </option>
“hist”> History </option>
“math”> Mathematics </option>
“phys”> Physics </option>
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/cgibin/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??