Creating basic HTML web pages R Chris Fraley

Creating basic HTML web pages R. Chris Fraley | http: //www. web-research-design. net/P 593/

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 Front. Page • 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.

Edit. Plus • 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 Edit. Plus (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 Edit. Plus. 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 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> <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 &nbsp (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> &nbsp joy <BR> &nbsp happy <BR> Factor 2<BR> &nbsp sad <BR> &nbsp shame <BR> </HTML>

Centering Text To center text, use the <CENTER> and </CENTER> tags Try this example. <HTML> <CENTER>Personality Research Lab </CENTER> <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=page 2. 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 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> </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> <TD> cell 3 </TD> <TD> cell 4 </TD> </TR> </TABLE>

Tables Modifying table attributes: <TABLE BORDER=1> <TR> <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> <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> <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> <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> <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; }. td 1 { border-style: solid; border-left-width: 1 px; border-right-width: 1 px; border-top-width: 1 px; border-bottom-width: 1 px; border-color: black; background: white; color: gray; padding: 10 px; } </style> Welcome to my web page!<BR> <TABLE> <TR> <TD class=td 1> home </TD> <TD class=td 1> research </TD> <TD class=td 1> 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 (F 5) 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/nauttext 2. 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=nauttext 2. gif width=240 height=240 alt=‘main graphic’> Images as background (http: //www. w 3 schools. com/css_background. asp): <style type="text/css" media="all"> body { background-image: url('nauttext 2. 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 Dream. Weaver, Dream. Weaver 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.