Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Creating HTML web pages - How to conduct behavioral research
Document related concepts
Transcript
Creating basic HTML web pages
R. Chris Fraley | http://www.web-research-design.net/P593/
HTML web pages
• Most web pages are written in a language called
HTML (hypertext markup language).
• HTML files exist on a web server. When a person
types in the URL for a specific file in his or her
web browser, the person is essentially retrieving
that pre-existing file from the web server.
HTML
• There are many programs that are designed to
help you create HTML files
– Macromedia’s Dreamweaver
– Microsoft’s FrontPage
• These kinds of programs are often called
WYSIWYG programs. They allow you to create
web pages in the way in which you want them to
appear; the HTML code is generated in the
background.
WYSIWYG
• There are two reasons for NOT using these kinds
of programs if you’re going to be conducting
research over the Internet.
– Not dynamic. We’ll be writing CGI scripts that
create the code on-the-fly (i.e., web programs that
create web pages). As such, a WYSIWYG program
cannot help us.
– Code bloat. These programs often create
unnecessary and confusing code if you revise your
pages or make changes.
EditPlus
• Although there are good reasons not to use
WYSIWYG programs, there are good reasons to
use programs that will make HTML coding easier
for you.
• The perks of EditPlus
(http://www.editplus.com/)
– Free trial version
– Works in a lot like MS Word (e.g., buttons for placing text in
bold), but creates the HTML code for you rather than doing
so in the background.
– Built-in browser so you can see what your code looks like
as you write it
– Color-coding
– Spell checking
• Let’s begin . . .
• [Live examples of creating HTML code using
EditPlus. Review use of text, basic formatting
(bold, italics), line breaks, colors. Inserting
images, links, and sound files. Using CSS to
format things in a global fashion.]
HTML Tags
HTML web pages are based on a combination of text and
tags.
Tags are programming commands used to modify the
contents of a web page. They are used, for example, to
change the color of the text, the size of the text, insert
images, etc.
Example: <B> and </B>
Most (but not all) tags have an “opening” and “closing”
tag. The opening tag is used to tell the browser that a
new command is coming and the closing tag tells the
browser that the command is complete.
HTML Tags
The most basic tag is the HTML tag. This is used so the
browser will know that the content to follow is HTML
code/content. (Most browsers assume this by default
even without the use of the HTML tag.)
<HTML>
</HTML>
HTML Tags
Any text that is placed in-between these tags will be
rendered by the browser.
Try this example.
<HTML>
The purpose of this experiment is to learn more about
the way people understand others.
</HTML>
HTML Tags - Bold
Text can be formatted in ways that you would normally do
so in a program like MS Word.
To set something in bold, use the <B> </B> tags and
include the piece to be set in bold in-between.
Try this example.
<HTML>
The purpose of this experiment is to learn more about
the way <B>people</B> understand <B>machines</B>.
</HTML>
HTML Tags - Italics
Italics work in the same way. The HTML tags for setting
text in italics is <I> and </I>
Try this example.
<HTML>
Although the average score in this sample is 4.23,
<I>your score</I> was 6.32.
</HTML>
Font size and color
To set the font face, use the <FONT> </FONT> tags.
Note: The font tag is the first of several tags we will
discuss that have attributes. For example, when setting
the font, you can adjust the face, the size, and the color.
The examples will make this clear.
<HTML>
<FONT SIZE=2 FACE=arial COLOR=blue>
Welcome to our lab web page!
</FONT>
</HTML>
Font size and color
Another example.
<HTML>
<FONT SIZE=3 FACE=arial COLOR=blue>
Personality Research Lab
</FONT>
<FONT SIZE=2 FACE=arial COLOR=blue>
Welcome to our lab web page!
</FONT>
</HTML>
Line spacing
In HTML, carriage returns are not coded as line breaks.
You can use them all you wish to format your file, but the
presence of a return in the code will not affect the
rendering of the text.
To insert a line break, you must include a tag for it.
The line break tag is <BR>. There is no closing tag.
Line spacing
Try this example.
<HTML>
<FONT SIZE=3 FACE=arial COLOR=blue>
Personality Research Lab
</FONT>
<BR><BR>
<FONT SIZE=2 FACE=arial COLOR=blue>
Welcome to our lab web page!
</FONT>
</HTML>
Blank Spaces
Blank spaces work in a similar way: Any space (greater
than 1) that exists in the HTML code will not be rendered.
If you want a sequence of blank spaces (e.g., for minor
indenting), you have to include them explicitly.
The command is  
(Notice that this is not a tag per se, but it is still an HTML
command. Nbsp stands for Non-Breaking Space.)
Blank spaces
Try this example.
<HTML>
Factor 1<BR>
    joy <BR>
    happy <BR>
Factor 2<BR>
    sad <BR>
    shame <BR>
</HTML>
Centering Text
To center text, use the <CENTER> and </CENTER> tags
Try this example.
<HTML>
<CENTER>Personality Research Lab </CENTER>
<BR><BR>
The purpose of this experiment is to learn more about
the way people understand others.
</HTML>
Creating Links
A link is a portion of the page that, when clicked,
automatically transports the user to a new page.
HTML code:
<A HREF=http://www.google.com>click here to go to
Google</A>
Note: The “A” stands for “anchor”. The HREF attribute is
the URL for the page you want the user to go to when the
link is clicked. The text in between the two tags will be
what the user sees as the link.
Creating Links
Please note that, when the link leads to an external site
(i.e., not your own), you need to include the full URL with
the http portion.
If the link leads to another webpage on your site that is
located in the same directory (e.g., www), you only need
to include the file name.
Example:
<A HREF=page2.htm>click here to go to the next page</A>
Use this method whenever you can because it will make it
easier for you to transfer files from one server or directory
to another without rewriting the URL for all your links.
Tables
Tables are a valuable way to organize the placement of
text on a web page.
A few important things to know about the way table code
is processed by browsers.
- Row by row
-Left to right
Tables
Any text that is placed in-between these tags will be
rendered by the browser.
Try this example.
<TABLE>
</TABLE>
Tables
The <TR> and </TR> tags are used to denote a new Table
Row.
<TABLE>
<TR>
</TR>
</TABLE>
Tables
The <TD></TD> tags are used to denote a cell within a
row. Any text that is placed in-between these tags will be
rendered within that cell in the table.
<TABLE>
<TR>
<TD> cell 1 </TD>
<TD> cell 2 </TD>
</TR>
</TABLE>
Tables
A table with two rows.
<TABLE>
<TR>
<TD> cell 1 </TD>
<TD> cell 2 </TD>
</TR>
<TR>
<TD> cell 3 </TD>
<TD> cell 4 </TD>
</TR>
</TABLE>
Tables
Modifying table attributes:
<TABLE BORDER=1>
<TR>
<TD>
<TD>
</TR>
<TR>
<TD>
<TD>
</TR>
</TABLE>
cell 1 </TD>
cell 2 </TD>
cell 3 </TD>
cell 4 </TD>
Tables
Modifying table attributes:
<TABLE BORDER=1 BGCOLOR=gray>
<TR>
<TD> cell 1 </TD>
<TD> cell 2 </TD>
</TR>
<TR>
<TD> cell 3 </TD>
<TD> cell 4 </TD>
</TR>
</TABLE>
Tables
Please note that formatting needs to be applied within
each cell. (A pain. I’ll show you a way around this later.)
<TABLE BORDER=1 BGCOLOR=gray>
<TR>
<TD><FONT SIZE=10> cell 1 </TD>
<TD> cell 2 </TD>
</TR>
<TR>
<TD> cell 3 </TD>
<TD> cell 4 </TD>
</TR>
</TABLE>
Tables
You can span across columns using the COLSPAN
attribute.
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2><CENTER> Means </CENTER></TD>
</TR>
<TR>
<TD> Group 1 </TD>
<TD> Group 2 </TD>
</TR>
</TABLE>
Tables
Any text that is placed in-between these tags will be
rendered by the browser. Try this example.
<TABLE>
<TR>
<TD> cell 1 </TD>
<TD> cell 2 </TD>
</TR>
<TR>
<TD> cell 3 </TD>
<TD> cell 4 </TD>
</TR>
</TABLE>
Cascading Style Sheets (CSS)
• One of the cumbersome aspects of formatting
text in classic HTML is the sheer number of tags
required to do so. If you choose to change the
“style” of your web page after a period of time,
all of the code needs to be rewritten.
• This is especially inconvenient when working
with tables because the text has to be formatted
separately within each cell.
• CSS provides a means for separating style from
content and is an efficient way to add pizzazz
(not pizza) and personality to your web pages.
CSS
Any text that is placed in-between these tags will be
rendered by the browser. Try this example.
<HTML>
<style type="text/css" media="all">
body {
color: white;
background: gray;
font-family: verdana;
font-size: 14;
line-height: 2;
}
</style>
Welcome to my web page!
</HTML>
• You can define “classes” so that different
portions of your content are styled differently.
<HTML>
<style type="text/css" media="all">
body {
color: white;
background: gray;
font-family: verdana;
font-size: 14;
line-height: 2;
}
.td1 {
border-style: solid;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: black;
background: white;
color: gray;
padding: 10px;
}
</style>
Welcome to my web page!<BR>
<TABLE>
<TR>
<TD class=td1> home </TD>
<TD class=td1> research </TD>
<TD class=td1> vita </TD>
</TR>
</TABLE>
</HTML>
CSS
Adjusting the way in which links behave.
<HTML>
<style type="text/css" media="all">
a:link
{ color: blue; }
a:visited
{ color: navy; }
a:active
{ color: pink; }
a:hover
{ color: red; background-color: blue;}
}
</style>
Welcome to my web page!<BR>
<A HREF=http://www.google.com>click here to go to Google</A>
</HTML>
Transferring your web page to the web
server
• Save your file with the *.htm extension.
Example: mypage.htm
• Go to the Netfirms web page and login to your
account.
• Go to the File Manager.
• Click the “www” folder to open your www
directory (i.e., the directory where your web
pages will reside)
• Click the “upload” button.
• Find mypage.htm on your computer using the
“browse” option.
• Upload the file.
Viewing your webpage
• You should now be able to see your web page on
the “live” Internet.
• URL: http://mysite.netfirms.com/mypage.htm
• Important note: You will be tempted to simply
click on the link for your file from within the
Netfirms File Manager. Don’t do it! It will not
open your file naturally; it will try to open it in a
secure way, which may cause your file to display
improperly. To view your file, type the URL
directly into the address bar in a separate
browser window. As you make changes and
trasnsfer the new file, you’ll need to REFRESH
(F5) the screen to see the changes take effect.
• Notes about revising your page.
Images
You can use tags that enable images to be displayed on
your web page.
Here is the basic code:
<img
src=http://www.psych.uiuc.edu/~rcfraley/nauttext2.gif
width=240 height=240 alt=‘main graphic’>
• Notice that there are several attributes that can
be varied: width, height, and ‘alt’ (i.e., the text
that appears when you hover your mouse over
the graphic).
• As with links, your URL can be absolute (i.e.,
including the full URL address for the image) or
relative (i.e., just the file name, assuming the
graphic file is in the same directory as the page
calling it).
Images
If the image were in the same directory:
<img src=nauttext2.gif width=240 height=240 alt=‘main
graphic’>
Images as background
(http://www.w3schools.com/css/css_background.asp):
<style type="text/css" media="all">
body {
background-image: url('nauttext2.gif');
}
</style>
Images
Using an image as a link:
<A HREF=http://www.google.com>
<img src=http://www.cs.cmu.edu/~wjh/go/go.gif alt=‘goto
google’>
</A>
Image Cautions
• Things people do wrong when working with
images:
• 1. They do not have the image file in the same
directory as the web page that is displaying it.
• 2. If they are using DreamWeaver, DreamWeaver
has assumed that, since the image was on the C
drive of the user’s computer, the web page code
should try to pull the image of the user’s
computer. This won’t work when the page goes
live.
• 3. People sometimes use images that are too big
and resize them downward. Large image files
take a long time to download even if they are
displayed using smaller dimensions.
